Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Whacky Chat - Login</title> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;700&family=Orbitron:wght@700&display=swap'); | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Rajdhani', sans-serif; | |
| background: linear-gradient(45deg, #0f0f23, #1a1a3a, #2d1b69); | |
| background-size: 400% 400%; | |
| animation: gradientShift 8s ease infinite; | |
| color: #fff; | |
| height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| @keyframes gradientShift { | |
| 0%{background-position:0% 50%} | |
| 50%{background-position:100% 50%} | |
| 100%{background-position:0% 50%} | |
| } | |
| .login-container { | |
| background: rgba(0,0,0,0.3); | |
| backdrop-filter: blur(10px); | |
| border: 2px solid rgba(255,255,255,0.1); | |
| border-radius: 20px; | |
| padding: 40px; | |
| text-align: center; | |
| max-width: 400px; | |
| width: 90%; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| } | |
| .title { | |
| font-family: 'Orbitron', monospace; | |
| font-size: 2.5rem; | |
| background: linear-gradient(45deg, #ff6ec4, #7873f5, #00ff88); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| text-shadow: 0 0 20px rgba(255,110,196,0.5); | |
| margin-bottom: 30px; | |
| animation: titleGlow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes titleGlow { | |
| from { filter: drop-shadow(0 0 10px rgba(255,110,196,0.5)); } | |
| to { filter: drop-shadow(0 0 20px rgba(120,115,245,0.8)); } | |
| } | |
| .subtitle { | |
| font-size: 1.2rem; | |
| color: rgba(255,255,255,0.8); | |
| margin-bottom: 30px; | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| } | |
| .form-input { | |
| width: 100%; | |
| padding: 15px; | |
| border: 2px solid rgba(255,255,255,0.2); | |
| border-radius: 10px; | |
| background: rgba(0,0,0,0.3); | |
| color: #fff; | |
| font-size: 1.1rem; | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| outline: none; | |
| border-color: #00ff88; | |
| box-shadow: 0 0 15px rgba(0,255,136,0.3); | |
| } | |
| .form-input::placeholder { | |
| color: rgba(255,255,255,0.5); | |
| } | |
| .login-button { | |
| width: 100%; | |
| padding: 15px; | |
| border: none; | |
| border-radius: 10px; | |
| background: linear-gradient(45deg, #ff6ec4, #7873f5); | |
| color: #fff; | |
| font-size: 1.1rem; | |
| font-weight: bold; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| } | |
| .login-button:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(255,110,196,0.4); | |
| } | |
| .login-button:active { | |
| transform: translateY(0); | |
| } | |
| .info-text { | |
| margin-top: 20px; | |
| color: rgba(255,255,255,0.6); | |
| font-size: 0.9rem; | |
| } | |
| .user-number-info { | |
| background: rgba(0,255,136,0.2); | |
| padding: 15px; | |
| border-radius: 10px; | |
| border: 1px solid rgba(0,255,136,0.5); | |
| margin: 20px 0; | |
| font-size: 0.9rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="login-container"> | |
| <div class="title">WHACKY CHAT</div> | |
| <div class="subtitle">Enter the Whacky Zone</div> | |
| <div class="subtitle">Run in this location: https://mysafecode-whackychatapp.hf.space</div> | |
| <form method="POST" action="/login"> | |
| <div class="form-group"> | |
| <input type="text" | |
| name="username" | |
| class="form-input" | |
| placeholder="Enter your username" | |
| required | |
| maxlength="20"> | |
| </div> | |
| <button type="submit" class="login-button">JOIN CHAT</button> | |
| </form> | |
| <div class="user-number-info"> | |
| You'll be assigned a unique two-digit user number (01, 02, 03...) | |
| </div> | |
| <div class="info-text"> | |
| No password needed - just pick a username and join the fun! | |
| </div> | |
| </div> | |
| </body> | |
| </html> |