devlab/authenticator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: overhaul index.php structure and add styles and script for password validation and generation

Browse Source
This commit is contained in:
rafael
2026-01-01 18:30:54 -04:00
parent 54f489322b
commit 860eed72a6
3 changed files with 583 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
index.php
View File

@@ -1,3 +1,112 @@
<?php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validador y Generador de Contraseñas Seguras</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
<div class="container">
<div class="header">
<h1><i class="fas fa-shield-alt"></i> Validador y Generador de Contraseñas</h1>
<p>Verifica la fortaleza de tus contraseñas y genera nuevas contraseñas seguras con nuestros herramientas gratuitas.</p>
</div>
<div class="card">
<h2 class="card-title"><i class="fas fa-check-circle"></i> Validar Contraseña</h2>
<div class="input-group">
<label for="password-input">Ingresa una contraseña para validar:</label>
<div class="password-container">
<input type="password" id="password-input" placeholder="Escribe tu contraseña aquí...">
<button class="toggle-password" id="toggle-password">
<i class="far fa-eye"></i>
</button>
</div>
<div class="strength-indicator">
<div class="strength-bar" id="strength-bar"></div>
</div>
<div class="strength-text" id="strength-text">Fortaleza: Muy débil</div>
</div>
<ul class="criteria-list" id="criteria-list">
<li><i class="fas fa-times-circle invalid" id="length-icon"></i> Al menos 8 caracteres</li>
<li><i class="fas fa-times-circle invalid" id="uppercase-icon"></i> Al menos una letra mayúscula</li>
<li><i class="fas fa-times-circle invalid" id="lowercase-icon"></i> Al menos una letra minúscula</li>
<li><i class="fas fa-times-circle invalid" id="number-icon"></i> Al menos un número</li>
<li><i class="fas fa-times-circle invalid" id="special-icon"></i> Al menos un carácter especial (!@#$%^&*)</li>
</ul>
<div class="tips">
<h3>Consejos para contraseñas seguras:</h3>
<ul>
<li>Usa una combinación de letras, números y símbolos</li>
<li>Evita información personal como nombres o fechas</li>
<li>No reutilices contraseñas en diferentes servicios</li>
<li>Considera usar un gestor de contraseñas</li>
</ul>
</div>
</div>
<div class="card">
<h2 class="card-title"><i class="fas fa-key"></i> Generar Contraseña Segura</h2>
<div class="generate-options">
<div class="option-group">
<input type="checkbox" id="uppercase-checkbox" checked>
<label for="uppercase-checkbox">Mayúsculas (A-Z)</label>
</div>
<div class="option-group">
<input type="checkbox" id="lowercase-checkbox" checked>
<label for="lowercase-checkbox">Minúsculas (a-z)</label>
</div>
<div class="option-group">
<input type="checkbox" id="numbers-checkbox" checked>
<label for="numbers-checkbox">Números (0-9)</label>
</div>
<div class="option-group">
<input type="checkbox" id="symbols-checkbox" checked>
<label for="symbols-checkbox">Símbolos (!@#$%^&*)</label>
</div>
</div>
<div class="input-group">
<label for="length-slider">Longitud de la contraseña: <span class="length-value" id="length-value">12</span> caracteres</label>
<input type="range" id="length-slider" class="length-slider" min="8" max="24" value="12" step="1">
</div>
<button class="btn" id="generate-btn">
<i class="fas fa-bolt"></i> Generar Contraseña
</button>
<div class="result-password" id="result-password">
<div id="generated-password"></div>
<button class="copy-btn" id="copy-btn">
<i class="far fa-copy"></i> Copiar al portapapeles
</button>
</div>
<div class="tips">
<h3>Características de una buena contraseña:</h3>
<ul>
<li>Longitud mínima de 12 caracteres</li>
<li>Combinación de diferentes tipos de caracteres</li>
<li>Sin patrones obvios o secuencias</li>
<li>Fácil de recordar pero difícil de adivinar</li>
</ul>
</div>
</div>
<div class="footer">
<p>© 2025 - Herramienta de seguridad de contraseñas | Diseñada para proteger tu información</p>
<p><i class="fas fa-lock"></i> Tus contraseñas nunca se envían a ningún servidor - todo se procesa localmente en tu dispositivo</p>
</div>
</div>
echo "Hola Mundo";
<script src="/assets/js/script.js"></script>
</body>
</html>