/ password_generator / index.html
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>SECURE.PASS // NEO-GEN</title> 8 <script src="https://cdn.tailwindcss.com"></script> 9 <link rel="preconnect" href="https://fonts.googleapis.com"> 10 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 11 <link 12 href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" 13 rel="stylesheet"> 14 <style> 15 body { 16 font-family: "Lato", sans-serif; 17 background-color: #FFDE00; 18 /* Vibrant Neobrutalist Yellow */ 19 } 20 21 .neo-border { 22 border: 4px solid #000000; 23 } 24 25 .neo-shadow { 26 box-shadow: 8px 8px 0px 0px #000000; 27 } 28 29 .neo-shadow-sm { 30 box-shadow: 4px 4px 0px 0px #000000; 31 } 32 33 .neo-button:active { 34 transform: translate(4px, 4px); 35 box-shadow: 0px 0px 0px 0px #000000; 36 } 37 38 .help-box-visible { 39 opacity: 1 !important; 40 transform: translateY(0) !important; 41 } 42 43 .validator-hidden { 44 display: none; 45 } 46 47 .validator-visible { 48 display: block; 49 } 50 </style> 51 </head> 52 53 <body class="text-black flex flex-col items-center justify-start min-h-screen m-0 p-8"> 54 55 <!-- Generator Section --> 56 <div class="bg-white p-8 neo-border neo-shadow w-full max-w-md text-center mb-16"> 57 <h1 id="main-title" 58 class="font-black text-4xl mb-8 uppercase italic tracking-tighter transition-all duration-200 cursor-crosshair"> 59 Password Gen 60 </h1> 61 62 <div class="relative mb-6"> 63 <div id="password-output" 64 class="bg-cyan-300 p-6 neo-border font-mono text-xl break-all min-h-[4rem] flex items-center justify-center cursor-grab transition-all active:cursor-grabbing font-black" 65 draggable="true" title="DRAG TO SAVE"> 66 CLICK GENERATE 67 </div> 68 <div id="expiry-timer" 69 class="absolute -top-4 -right-4 bg-pink-500 text-white text-xs px-3 py-1 neo-border font-black uppercase hidden rotate-12"> 70 EXP: <span id="seconds">30</span>s 71 </div> 72 </div> 73 74 <div class="text-left mb-8 space-y-6"> 75 <div class="relative"> 76 <label for="length" class="block font-black uppercase text-sm mb-2"> 77 Size: <span id="length-val" class="bg-black text-white px-2">12</span> 78 </label> 79 <input type="range" id="length" min="6" max="32" value="12" 80 class="w-full h-4 bg-black appearance-none cursor-pointer"> 81 <div id="length-help" 82 class="absolute bg-lime-400 neo-border neo-shadow-sm px-3 py-1 text-[10px] font-black uppercase -top-10 right-0 opacity-0 transition-all duration-200 translate-y-2 pointer-events-none z-10"> 83 Strong: 12+ Chars 84 </div> 85 </div> 86 87 <div class="grid grid-cols-2 gap-4"> 88 <label 89 class="flex items-center space-x-2 cursor-pointer font-bold uppercase text-xs p-2 bg-slate-50 neo-border hover:bg-slate-100 transition-colors"> 90 <input type="checkbox" id="uppercase" checked 91 class="w-6 h-6 border-4 border-black rounded-none appearance-none checked:bg-black transition-colors shrink-0"> 92 <span>Upper</span> 93 </label> 94 <label 95 class="flex items-center space-x-2 cursor-pointer font-bold uppercase text-xs p-2 bg-slate-50 neo-border hover:bg-slate-100 transition-colors"> 96 <input type="checkbox" id="lowercase" checked 97 class="w-6 h-6 border-4 border-black rounded-none appearance-none checked:bg-black transition-colors shrink-0"> 98 <span>Lower</span> 99 </label> 100 <label 101 class="flex items-center space-x-2 cursor-pointer font-bold uppercase text-xs p-2 bg-slate-50 neo-border hover:bg-slate-100 transition-colors"> 102 <input type="checkbox" id="numbers" checked 103 class="w-6 h-6 border-4 border-black rounded-none appearance-none checked:bg-black transition-colors shrink-0"> 104 <span>Numbers</span> 105 </label> 106 <label 107 class="flex items-center space-x-2 cursor-pointer font-bold uppercase text-xs p-2 bg-slate-50 neo-border hover:bg-slate-100 transition-colors"> 108 <input type="checkbox" id="symbols" 109 class="w-6 h-6 border-4 border-black rounded-none appearance-none checked:bg-black transition-colors shrink-0"> 110 <span>Symbols</span> 111 </label> 112 </div> 113 </div> 114 115 <button id="generate-btn" 116 class="neo-button bg-lime-400 hover:bg-lime-300 text-black font-black py-4 px-6 neo-border neo-shadow-sm w-full transition-all uppercase text-lg italic tracking-widest"> 117 Execute Generation 118 </button> 119 120 <!-- Validation Section --> 121 <div id="validation-panel" class="mt-8 p-4 bg-pink-300 neo-border validator-hidden"> 122 <p class="text-[10px] font-black mb-2 uppercase italic text-left">Verification Required_</p> 123 <div class="flex space-x-2"> 124 <input type="password" id="verify-input" placeholder="INPUT PWD" 125 class="flex-1 p-2 text-sm neo-border bg-white outline-none font-bold uppercase"> 126 <button id="verify-btn" 127 class="bg-black text-white text-[10px] px-4 py-2 font-black uppercase hover:bg-slate-800 transition-colors">Check</button> 128 </div> 129 <p id="verify-feedback" class="text-[10px] mt-2 font-black uppercase text-left"></p> 130 </div> 131 132 <div id="drop-zone" 133 class="mt-8 border-4 border-dashed border-black p-8 transition-all text-black font-black uppercase italic text-sm bg-slate-50 hover:bg-lime-100"> 134 Drop here to archive_ 135 </div> 136 137 <div class="mt-8 text-left"> 138 <div class="flex justify-between items-center mb-4"> 139 <strong class="text-xs font-black uppercase tracking-tighter italic">Archive_History</strong> 140 <button id="clear-history" 141 class="text-[10px] bg-red-500 text-white px-2 py-1 neo-border font-black uppercase hover:bg-red-600">Nuke 142 All 143 </button> 144 </div> 145 <ul id="history-list" class="space-y-4"></ul> 146 </div> 147 </div> 148 149 <!-- Questions Section --> 150 <div class="w-full max-w-4xl mb-12 space-y-8 mt-16"> 151 <h2 152 class="text-3xl font-black uppercase italic bg-black text-white px-6 py-2 inline-block neo-border neo-shadow-sm rotate-[-1deg]"> 153 Lab Analysis_ 154 </h2> 155 156 <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> 157 <!-- Question 1 --> 158 <div 159 class="bg-cyan-300 p-6 neo-border neo-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all flex flex-col"> 160 <div class="font-black uppercase text-[10px] mb-4 bg-black text-white px-2 py-1 self-start"> 161 Case_Study_01</div> 162 <div class="font-black text-sm mb-6 leading-tight flex-grow"> 163 ¿Por qué es una buena práctica usar JavaScript para checar que sean válidos los inputs de las formas 164 antes de enviar los datos al servidor? 165 </div> 166 <div class="bg-white p-4 neo-border font-bold text-xs italic"> 167 Porque la validación ocurre al instante, sin necesidad de recargar la página ni esperar la respuesta 168 del servidor. 169 </div> 170 </div> 171 172 <!-- Question 2 --> 173 <div 174 class="bg-pink-300 p-6 neo-border neo-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all flex flex-col"> 175 <div class="font-black uppercase text-[10px] mb-4 bg-black text-white px-2 py-1 self-start"> 176 Case_Study_02</div> 177 <div class="font-black text-sm mb-6 leading-tight flex-grow"> 178 ¿Cómo puedes saltarte la seguridad de validaciones hechas con JavaScript? 179 </div> 180 <div class="bg-white p-4 neo-border font-bold text-xs italic"> 181 Porque se ejecutan del lado del cliente a la que se tiene acceso por medio de la consola. El usuario 182 tiene acceso total a ese código. 183 </div> 184 </div> 185 186 <!-- Question 3 --> 187 <div 188 class="bg-lime-300 p-6 neo-border neo-shadow hover:translate-x-1 hover:translate-y-1 hover:shadow-none transition-all flex flex-col md:col-span-2"> 189 <div class="font-black uppercase text-[10px] mb-4 bg-black text-white px-2 py-1 self-start"> 190 Case_Study_03</div> 191 <div class="font-black text-sm mb-6 leading-tight"> 192 Si te puedes saltar la seguridad de las validaciones de JavaScript, entonces ¿por qué la primera 193 pregunta dice que es una buena práctica? 194 </div> 195 <div class="bg-white p-4 neo-border font-bold text-xs italic mt-4"> 196 Porque las validaciones del lado del cliente mejoran la experiencia del usuario y reducen cargas 197 innecesarias al servidor, pero la seguridad real siempre debe implementarse en el backend. 198 </div> 199 </div> 200 </div> 201 </div> 202 203 <script src="script.js"></script> 204 </body> 205 206 </html>