112 lines
5.3 KiB
PHP
112 lines
5.3 KiB
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?v=1.0.0">
|
|
</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>
|
|
|
|
<script src="/assets/js/script.js?v=1.0.0"></script>
|
|
</body>
|
|
</html> |