PassGenerator/index.html at main · RafaRdrgz/PassGenerator · 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
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="en">
    <head>

        <!-- Agregar Tailwind CSS desde CDN -->

        <script src="https://unpkg.com/@tailwindcss/browser@4"></script>

        <!-- Agregar Phosphor Icons desde CDN -->

        <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>

        <!--Agregar Estilos CSS-->
        <link rel="stylesheet" href="styles.css">

        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Secure Password Generator</title>

      </head>
      <body class="min-h-screen flex flex-col">

        <header class="header h-16 shadow-lg flex items-center justify-center">

          <h2 class="ubuntu-bold text-center text-white text-lg">
            <a href="index.html" aria-label="Index page">Secure Password Generator</a>
          </h2>

        </header>

        <main class="main flex-1 flex items-center justify-center">

          <div class="bg-white max-w-xs sm:max-w-sm md:max-w-md lg:max-w-lg py-4 px-2 md:px-8 lg:px-16 rounded-xl shadow-lg flex flex-col my-2 md:my-4 lg:my-6">

            <p class="ubuntu-bold text-lg text-center m-0 md:m-2">Generate your password</p>

              <div class="bg-white py-2 px-2 md:py-4 md:px-4 lg:py-8 lg:px-8 rounded-xl border-2 shadow-lg my-2 md:my-4 mb-2">

                <h3 class="text-base mb-4 text-center">Choose password size</h3>

                <form class="flex flex-wrap md:flex-nowrap justify-between space-x-2 md:space-x-4" autocomplete="off">

                  <!-- Opción de 8 caracteres -->
                  <div class="flex items-center mb-2 md:mb-0">
                    <input type="radio" id="size-8" name="password-size" value="8" class="mr-2" checked>
                    <label for="size-8" class="text-xs font-medium">8 chars</label>
                  </div>

                  <!-- Opción de 12 caracteres -->
                  <div class="flex items-center mb-2 md:mb-0">
                    <input type="radio" id="size-12" name="password-size" value="12" class="mr-2">
                    <label for="size-12" class="text-xs font-medium">12 chars</label>
                  </div>

                  <!-- Opción de 16 caracteres -->
                  <div class="flex items-center mb-2 md:mb-0">
                    <input type="radio" id="size-16" name="password-size" value="16" class="mr-2">
                    <label for="size-16" class="text-xs font-medium">16 chars</label>
                  </div>

                  <!-- Opción de 32 caracteres -->
                  <div class="flex items-center mb-2 md:mb-0">
                    <input type="radio" id="size-32" name="password-size" value="32" class="mr-2">
                    <label for="size-32" class="text-xs font-medium">32 chars</label>
                  </div>
                </form>
              </div> <!-- end tamaño-->

              <!--Botón de generación de contraseña-->
              <button id="generate-password" class="generate-button ubuntu-regular text-sm p-2 rounded-md mx-auto mb-2 md:mb-4">
                Generate Password
              </button>

              <!--Input para mostrar contraseña-->
              <input id="generated-password" type="text" class="w-full sm:w-auto text-center text-sm border-2 rounded-md py-2 px-4 mb-4"
                     placeholder="Your password will appear here" readonly autocomplete="off">

              <button id="copy-password" class="copy-button ubuntu-regular p-4 rounded-md mx-auto mb-2">
                <i class="ph-bold ph-clipboard-text text-xl"></i> <p class="text-xs">To Clipboard</p>
              </button>

            </div>
          </div>

        </main>

        <footer class="footer h-4 p-4 shadow-lg flex items-center justify-center">
          <p class="ubuntu-light text-xs text-white">Made by R.</p>
        </footer>

        <!-- Agregar script de JavaScript -->
        <script src="script.js"></script>
      </body>
</html>