Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Oracle Password Changer</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <style> | |
| .oracle-card { | |
| backdrop-filter: blur(16px); | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 16px; | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .input-field { | |
| background: rgba(255, 255, 255, 0.1); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .input-field:focus { | |
| background: rgba(255, 255, 255, 0.2); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-blue-900 to-indigo-900 text-white" id="vanta-bg"> | |
| <div class="container mx-auto px-4 py-12"> | |
| <div class="max-w-md mx-auto oracle-card p-8"> | |
| <div class="text-center mb-8"> | |
| <div class="w-20 h-20 bg-blue-500 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i data-feather="key" class="w-10 h-10"></i> | |
| </div> | |
| <h1 class="text-2xl font-bold">Oracle Password Wizard</h1> | |
| <p class="text-blue-200">Cambio seguro de contraseñas</p> | |
| </div> | |
| <form class="space-y-6" onsubmit="changePassword(event)"> | |
| <div> | |
| <label for="username" class="block text-sm font-medium mb-1">Usuario Oracle</label> | |
| <input type="text" id="username" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| </div> | |
| <div> | |
| <label for="current-password" class="block text-sm font-medium mb-1">Contraseña Actual</label> | |
| <div class="relative"> | |
| <input type="password" id="current-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none focus:ring-2 focus:ring-blue-500" required> | |
| <button type="button" class="absolute right-3 top-3 text-blue-300 hover:text-white" onclick="togglePassword('current-password')"> | |
| <i data-feather="eye" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="new-password" class="block text-sm font-medium mb-1">Nueva Contraseña</label> | |
| <div class="relative"> | |
| <input type="password" id="new-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none focus:ring-2 focus:ring-blue-500" required minlength="8"> | |
| <button type="button" class="absolute right-3 top-3 text-blue-300 hover:text-white" onclick="togglePassword('new-password')"> | |
| <i data-feather="eye" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div> | |
| <label for="confirm-password" class="block text-sm font-medium mb-1">Confirmar Nueva Contraseña</label> | |
| <div class="relative"> | |
| <input type="password" id="confirm-password" class="w-full px-4 py-3 rounded-lg input-field focus:outline-none focus:ring-2 focus:ring-blue-500" required minlength="8"> | |
| <button type="button" class="absolute right-3 top-3 text-blue-300 hover:text-white" onclick="togglePassword('confirm-password')"> | |
| <i data-feather="eye" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition duration-200 flex items-center justify-center gap-2"> | |
| <i data-feather="refresh-cw" class="w-5 h-5"></i> | |
| Cambiar Contraseña | |
| </button> | |
| <script> | |
| function changePassword(e) { | |
| e.preventDefault(); | |
| const username = document.getElementById('username').value; | |
| const currentPass = document.getElementById('current-password').value; | |
| const newPass = document.getElementById('new-password').value; | |
| // Simulando conexión a Oracle | |
| try { | |
| // Código real para cambiar contraseña en Oracle | |
| // ALTER USER username IDENTIFIED BY new_password REPLACE old_password; | |
| alert(`Contraseña cambiada exitosamente para el usuario: ${username}`); | |
| // Limpiar formulario | |
| e.target.reset(); | |
| } catch (error) { | |
| alert('Error al cambiar la contraseña: ' + error.message); | |
| } | |
| } | |
| function togglePassword(id) { | |
| const input = document.getElementById(id); | |
| input.type = input.type === 'password' ? 'text' : 'password'; | |
| feather.replace(); | |
| } | |
| // Inicializar efectos de fondo | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| color: 0x3a86ff, | |
| backgroundColor: 0x0, | |
| points: 12, | |
| maxDistance: 20, | |
| spacing: 15 | |
| }); | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> |