SteamCode-Gen/index.html at main · DanielK1511/SteamCode-Gen · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<!DOCTYPE html>
<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
        <script src="https://cdn.tailwindcss.com/"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css">
        <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter+Tight:900,800,700,600&display=swap">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Red+Hat+Display:900,800,700,600&display=swap">
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Red+Hat+Mono:700,600,500,400&display=swap">
    </head>
    <body style="font-family: 'Inter Tight', sans-serif;">
        <div style="">
            <div class="bg-gray-100 h-screen w-screen">
                <div class="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
                    <div class="mx-auto max-w-2xl">
                        <div class="bg-white overflow-hidden rounded-3xl shadow-lg">
                            <div class="border-b border-gray-200 px-4 py-5 text-center sm:px-6">
                                <h1 class="mb-4 mt-5 text-3xl" style="font-family: 'Red Hat Display', sans-serif; font-weight: 900;">Key Generator</h1>
                                <button onclick="displayRandomString()" class="bg-gray-200 button focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-opacity-100 hover:bg-gray-300 mr-2 px-4 py-1.5 rounded-xl">Generate</button>
                                <button onclick="generateMultipleRandomStrings()" class="bg-gray-200 button focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-opacity-100 hover:bg-gray-300 mr-2 px-4 py-1.5 rounded-xl">Generate 10</button>
                            </div>
                            <div class="px-4 py-1 text-right sm:pr-6 sm:pt-6">
                                <button onclick="copyToClipboard()" class="bg-gray-200 button focus:outline-none focus:ring-2 focus:ring-gray-300 focus:ring-offset-2 focus:ring-opacity-100 hover:bg-gray-300 mt-2 mx-2 px-4 py-1.5 rounded-xl">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="h-6 w-6">
                                        <path fill-rule="evenodd" d="M10.5 3A1.501 1.501 0 009 4.5h6A1.5 1.5 0 0013.5 3h-3zm-2.693.178A3 3 0 0110.5 1.5h3a3 3 0 012.694 1.678c.497.042.992.092 1.486.15 1.497.173 2.57 1.46 2.57 2.929V19.5a3 3 0 01-3 3H6.75a3 3 0 01-3-3V6.257c0-1.47 1.073-2.756 2.57-2.93.493-.057.989-.107 1.487-.15z" clip-rule="evenodd"/>
                                    </svg>
                                </button>
                            </div>
                            <div class="px-4 py-5 sm:p-6">
                                <div id="codePanel" class="bg-gray-100 py-3 rounded-2xl text-center"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script>
function getCodePanel() {
  return document.getElementById('codePanel');
}

function getRandomCharacter() {
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  const index = Math.floor(Math.random() * characters.length);
  return characters.charAt(index);
}

function generateRandomString() {
  const result = Array.from({ length: 15 }, (_, i) => i % 5 === 0 && i > 0 ? '-' : getRandomCharacter());
  return '<code>' + result.join('') + '</code>';
}

function displayRandomString() {
  const codePanel = getCodePanel();
  codePanel.innerHTML = generateRandomString();
  codePanel.style.display = 'block';
}

function generateMultipleRandomStrings() {
  const result = Array.from({ length: 10 }, () => generateRandomString()).join('<br>');
  const codePanel = getCodePanel();
  codePanel.innerHTML = result;
  codePanel.style.display = 'block';
}

function copyToClipboard() {
    let codePanel = document.getElementById('codePanel');
    let copyButton = document.querySelector('.copy-button');
    let codeText = codePanel.innerText;
    navigator.clipboard.writeText(codeText).then(function() {
        /* On success, change the color of the button to green and then revert it back after 1 second */
        copyButton.style.backgroundColor = 'green';
        setTimeout(function() {
            copyButton.style.backgroundColor = '';
        }, 1000);
    }, function() {
        /* On error, change the color of the button to red */
        copyButton.style.backgroundColor = 'red';
    });
}
</script>
    </body>
</html>