Spaces:
No application file
No application file
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Login</title> | |
| <style> | |
| :root{ | |
| --black:#000; | |
| --gold-1:#ffeab6; | |
| --gold-2:#f6c752; | |
| --gold-3:#d89a1f; | |
| --text-warm:#f3ece0; | |
| --text-muted:#9a988f; | |
| --text-faint:#625f57; | |
| } | |
| /* Reset */ | |
| *{box-sizing:border-box;margin:0;padding:0;} | |
| body{ | |
| font-family:-apple-system, sans-serif; | |
| background:var(--black); | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| min-height:100vh; | |
| color:var(--text-warm); | |
| } | |
| /* CENTERED LOGIN */ | |
| .stage-login{ | |
| width:100%; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| } | |
| /* GLASS CARD */ | |
| .glass-frame{ | |
| width:min(420px,92vw); | |
| border-radius:28px; | |
| padding:8px; | |
| background:linear-gradient(155deg,#35373b,#101114); | |
| box-shadow:0 30px 70px rgba(0,0,0,.75); | |
| } | |
| .glass-pane{ | |
| border-radius:22px; | |
| padding:2.5rem 2rem; | |
| background:rgba(255,255,255,0.05); | |
| backdrop-filter:blur(18px); | |
| } | |
| /* TITLE */ | |
| .title{ | |
| text-align:center; | |
| font-size:1.8rem; | |
| font-weight:700; | |
| margin-bottom:.4rem; | |
| background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); | |
| -webkit-background-clip:text; | |
| color:transparent; | |
| } | |
| .subtitle{ | |
| text-align:center; | |
| font-size:.9rem; | |
| color:var(--text-muted); | |
| margin-bottom:1.6rem; | |
| } | |
| /* INPUTS */ | |
| form{ | |
| display:flex; | |
| flex-direction:column; | |
| gap:1rem; | |
| } | |
| .field{ | |
| display:flex; | |
| align-items:center; | |
| padding:0 1rem; | |
| height:52px; | |
| border-radius:999px; | |
| background:rgba(255,255,255,0.04); | |
| border:1px solid rgba(255,255,255,0.08); | |
| } | |
| .field input{ | |
| flex:1; | |
| border:none; | |
| outline:none; | |
| background:none; | |
| color:var(--text-warm); | |
| } | |
| /* BUTTON */ | |
| .btn-login{ | |
| height:54px; | |
| border:none; | |
| border-radius:999px; | |
| font-weight:700; | |
| cursor:pointer; | |
| background:linear-gradient(180deg,var(--gold-1),var(--gold-3)); | |
| } | |
| /* LINKS */ | |
| .row-between{ | |
| display:flex; | |
| justify-content:space-between; | |
| font-size:.8rem; | |
| color:var(--text-muted); | |
| } | |
| .signup{ | |
| text-align:center; | |
| font-size:.85rem; | |
| margin-top:.5rem; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="stage-login"> | |
| <div class="glass-frame"> | |
| <div class="glass-pane"> | |
| <h1 class="title">Welcome Back</h1> | |
| <p class="subtitle">Please login to continue</p> | |
| <form> | |
| <div class="field"> | |
| <input type="text" placeholder="Username or Email"> | |
| </div> | |
| <div class="field"> | |
| <input type="email" placeholder="Email Address"> | |
| </div> | |
| <div class="field"> | |
| <input type="password" placeholder="Password"> | |
| </div> | |
| <div class="row-between"> | |
| <span>Remember me</span> | |
| <span>Forgot password?</span> | |
| </div> | |
| <button class="btn-login">LOGIN</button> | |
| <p class="signup"> | |
| Don't have an account? <span style="color:#f6c752">Sign up</span> | |
| </p> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| </body> | |
| </html> |