Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Register</title> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <style> | |
| /* Base styles */ | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100vh; | |
| margin: 0; | |
| background: linear-gradient(135deg, #0f0c29, #302b63, #24243e); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| /* Animated background elements */ | |
| .balls-container { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: 0; | |
| overflow: hidden; | |
| } | |
| .ball { | |
| position: absolute; | |
| border-radius: 50%; | |
| opacity: 0.7; | |
| filter: blur(5px); | |
| animation: float 15s infinite linear; | |
| } | |
| @keyframes float { | |
| 0% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 25% { | |
| transform: translate(20vw, 40vh) scale(1.1); | |
| } | |
| 50% { | |
| transform: translate(40vw, 10vh) scale(0.9); | |
| } | |
| 75% { | |
| transform: translate(60vw, 30vh) scale(1.2); | |
| } | |
| 100% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| } | |
| /* Card styling */ | |
| .card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| padding: 30px; | |
| border-radius: 16px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); | |
| width: 360px; | |
| border: 1px solid rgba(255, 255, 255, 0.18); | |
| z-index: 1; | |
| position: relative; | |
| } | |
| h2 { | |
| margin-top: 0; | |
| margin-bottom: 20px; | |
| font-size: 24px; | |
| color: #fff; | |
| text-align: center; | |
| text-shadow: 0 0 10px rgba(5, 150, 105, 0.8); | |
| } | |
| label { | |
| color: #e0e0e0; | |
| font-size: 14px; | |
| margin-bottom: 5px; | |
| display: block; | |
| } | |
| input[type="text"], input[type="email"], input[type="password"] { | |
| width: 100%; | |
| padding: 12px; | |
| margin: 6px 0 16px 0; | |
| border-radius: 8px; | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| box-sizing: border-box; | |
| background: rgba(255, 255, 255, 0.1); | |
| color: #fff; | |
| transition: all 0.3s ease; | |
| } | |
| input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus { | |
| outline: none; | |
| border-color: #059669; | |
| box-shadow: 0 0 10px rgba(5, 150, 105, 0.5); | |
| } | |
| input::placeholder { | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| button { | |
| width: 100%; | |
| padding: 12px; | |
| border-radius: 8px; | |
| border: none; | |
| background: linear-gradient(45deg, #059669, #10b981); | |
| color: white; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 15px rgba(5, 150, 105, 0.4); | |
| } | |
| button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 20px rgba(5, 150, 105, 0.6); | |
| } | |
| .small { | |
| margin-top: 20px; | |
| text-align: center; | |
| } | |
| .small p { | |
| color: #e0e0e0; | |
| } | |
| .link { | |
| color: #10b981; | |
| text-decoration: none; | |
| font-weight: 600; | |
| transition: all 0.3s ease; | |
| } | |
| .link:hover { | |
| text-shadow: 0 0 8px rgba(16, 185, 129, 0.8); | |
| } | |
| .flash { | |
| padding: 12px; | |
| border-radius: 8px; | |
| margin-bottom: 16px; | |
| font-size: 14px; | |
| } | |
| .flash.success { | |
| background: rgba(209, 250, 229, 0.2); | |
| color: #a7f3d0; | |
| border: 1px solid rgba(167, 243, 208, 0.3); | |
| } | |
| .flash.danger { | |
| background: rgba(254, 226, 226, 0.2); | |
| color: #fecaca; | |
| border: 1px solid rgba(254, 202, 202, 0.3); | |
| } | |
| .flash.warning { | |
| background: rgba(255, 247, 237, 0.2); | |
| color: #fed7aa; | |
| border: 1px solid rgba(254, 215, 170, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Animated background balls --> | |
| <div class="balls-container" id="ballsContainer"></div> | |
| <!-- Registration card --> | |
| <div class="card"> | |
| <h2>Register</h2> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| {% for category, msg in messages %} | |
| <div class="flash {{ category }}">{{ msg }}</div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| <form method="post" action="{{ url_for('register') }}"> | |
| <label for="username">Username</label> | |
| <input id="username" name="username" type="text" required value="{{ username|default('') }}" placeholder="Choose a username"> | |
| <label for="email">Email</label> | |
| <input id="email" name="email" type="email" required value="{{ email|default('') }}" placeholder="Enter your email"> | |
| <label for="password">Password</label> | |
| <input id="password" name="password" type="password" required placeholder="Create a password"> | |
| <button type="submit">Register</button> | |
| </form> | |
| <div class="small"> | |
| <p>Already registered? <a class="link" href="{{ url_for('login') }}">Login</a></p> | |
| </div> | |
| </div> | |
| <script> | |
| // Create animated balls for background | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const container = document.getElementById('ballsContainer'); | |
| const ballCount = 15; | |
| const colors = ['#059669', '#10b981', '#047857', '#34d399', '#6ee7b7']; | |
| for (let i = 0; i < ballCount; i++) { | |
| const ball = document.createElement('div'); | |
| ball.classList.add('ball'); | |
| // Random properties for each ball | |
| const size = Math.random() * 60 + 20; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| ball.style.width = `${size}px`; | |
| ball.style.height = `${size}px`; | |
| ball.style.background = `radial-gradient(circle at 30% 30%, ${color}, ${color}00)`; | |
| ball.style.left = `${Math.random() * 100}vw`; | |
| ball.style.top = `${Math.random() * 100}vh`; | |
| ball.style.animationDuration = `${Math.random() * 20 + 15}s`; | |
| ball.style.animationDelay = `${Math.random() * 5}s`; | |
| container.appendChild(ball); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |