pskkeygen.github.io/index.html at main · microeetc/pskkeygen.github.io · 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
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gerador de chaves PSK</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#8b5cf6',
                        secondary: '#f59e0b'
                    }
                }
            }
        }
    </script>
</head>
<body class="min-h-full bg-gradient-to-br from-gray-900 to-gray-800 text-white flex flex-col">
    <main class="flex-1 flex flex-col items-center justify-center p-4">
        <!-- Aumenta a largura máxima do contêiner -->
        <div class="max-w-lg w-full bg-gray-800 rounded-xl shadow-2xl overflow-hidden border border-gray-700">
            <div class="bg-primary-600 p-6 text-center">
                <i data-feather="key" class="w-12 h-12 mx-auto mb-4"></i>
                <h1 class="text-3xl font-bold">PSK KeyGen</h1>
                <p class="text-primary-100 mt-2">Gerador de chaves PSK</p>
            </div>

            <div class="p-8 space-y-8">
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-gray-300">PSK Identity</label>
                    <div class="flex">
                        <input id="pskIdentity" type="text" readonly class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <button onclick="copyToClipboard('pskIdentity')" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-r-lg transition">
                            <i data-feather="copy" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="block text-sm font-medium text-gray-300">PSK Key</label>
                    <div class="flex">
                        <!-- Aumenta a largura do campo de PSK Key -->
                        <input id="pskKey" type="text" readonly class="flex-1 bg-gray-700 border border-gray-600 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500">
                        <button onclick="copyToClipboard('pskKey')" class="bg-gray-600 hover:bg-gray-500 px-4 py-2 rounded-r-lg transition">
                            <i data-feather="copy" class="w-5 h-5"></i>
                        </button>
                    </div>
                </div>

                <!-- Botão com fundo elegante e tamanho ajustado -->
                <button onclick="generateKeys()" class="w-auto bg-primary-600 text-white font-bold py-2 px-4 rounded-lg shadow-lg hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-300 transition-all ease-in-out duration-150 flex items-center justify-center space-x-2">
                    <i data-feather="zap" class="w-5 h-5"></i>
                    <span>Generate New Keys</span>
                </button>
            </div>
        </div>
    </main>

    <footer class="p-4 text-center text-gray-400 text-sm">
        <p>Desenvolvido por SPKR Soluções</p>
    </footer>

    <script src="script.js"></script>
    <script>feather.replace();</script>
</body>
</html>