Spaces:
Sleeping
Sleeping
| <html lang="es"> | |
| <head> | |
| <title>Registro de Usuario - Ejemplo CRUD Python</title> | |
| <meta charset="utf-8" /> | |
| <meta content="width=device-width, initial-scale=1.0" name="viewport"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> | |
| <!-- Styles --> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.min.css') }}" /> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}" /> | |
| </head> | |
| <body style="background-color: var(--bg-light);"> | |
| <div class="container"> | |
| <div class="login-box"> | |
| <div class="text-center" style="margin-bottom: 30px;"> | |
| <h1 style="color: var(--primary); font-weight: 700;">Registro de Personas</h1> | |
| <p style="color: var(--text-light);">Ejemplo CRUD Python</p> | |
| </div> | |
| <div class="clinic-card"> | |
| <h4 style="font-weight: 700; color: var(--text-dark); margin-bottom: 20px;">Nuevo Usuario</h4> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| <div class="alert alert-info" style="font-size: 14px; border-radius: 5px;"> | |
| {% for message in messages %} | |
| {{ message }} | |
| {% endfor %} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| <form action="{{ url_for('auth.registro') }}" method="POST"> | |
| <div class="form-group" style="margin-bottom: 20px;"> | |
| <label style="color: var(--text-dark);">Elige un Usuario</label> | |
| <input type="text" name="usuario" class="form-control" placeholder="Nombre de usuario" | |
| required /> | |
| </div> | |
| <div class="form-group" style="margin-bottom: 20px;"> | |
| <label style="color: var(--text-dark);">Contraseña</label> | |
| <input type="password" name="password" class="form-control" placeholder="Mínimo 4 caracteres" | |
| required /> | |
| </div> | |
| <div class="form-group" style="margin-bottom: 25px;"> | |
| <label style="color: var(--text-dark);">Confirmar Contraseña</label> | |
| <input type="password" name="confirm_password" class="form-control" | |
| placeholder="Repite tu contraseña" required /> | |
| </div> | |
| <!-- CAPTCHA de Imagen Moderno --> | |
| <div class="form-group" | |
| style="margin-bottom: 25px; background: #f8f9fa; padding: 15px; border-radius: 8px; border: 1px solid #dee2e6;"> | |
| <label | |
| style="color: var(--primary); font-weight: 700; display: block; margin-bottom: 10px;">Seguridad | |
| (Captcha)</label> | |
| <div class="text-center" style="margin-bottom: 15px;"> | |
| <img src="{{ captcha_img }}" alt="Captcha" | |
| style="border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); width: 100%; max-width: 180px;"> | |
| </div> | |
| <input type="text" name="captcha_input" class="form-control" | |
| placeholder="Escribe el código de la imagen" required | |
| style="text-transform: uppercase; text-align: center; font-weight: 700; letter-spacing: 2px;" /> | |
| </div> | |
| <button type="submit" class="btn-clinic btn-block" style="width: 100%;">Registrarme</button> | |
| <p class="text-center" style="margin-top: 20px; font-size: 14px;"> | |
| ¿Ya tienes cuenta? <a href="{{ url_for('auth.login') }}" | |
| style="color: var(--primary); font-weight: 600;">Inicia sesión aquí</a> | |
| </p> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |