Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>JobDrop — Admin Login</title> | |
| <meta name="robots" content="noindex, nofollow"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| :root { | |
| --bg: #070b14; | |
| --surface: #0e1625; | |
| --card: #111d30; | |
| --purple: #7c3aed; | |
| --purple2: #9f5bff; | |
| --purple-glow: rgba(124,58,237,0.18); | |
| --cyan: #22d3ee; | |
| --text: #f0f4ff; | |
| --muted: #7a8fad; | |
| --border: #1e2f48; | |
| --red: #f87171; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: var(--bg); | |
| color: var(--text); | |
| min-height: 100vh; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| } | |
| /* glow blob */ | |
| body::before { | |
| content: ''; | |
| position: fixed; | |
| top: -100px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| width: 600px; | |
| height: 400px; | |
| background: radial-gradient(ellipse, rgba(124,58,237,0.12) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .login-box { | |
| background: var(--card); | |
| border: 1px solid var(--border); | |
| border-radius: 20px; | |
| padding: 36px 24px; | |
| width: 100%; | |
| max-width: 420px; | |
| position: relative; | |
| } | |
| .brand { | |
| text-align: center; | |
| margin-bottom: 32px; | |
| } | |
| .brand .logo { | |
| font-size: 1.6rem; | |
| font-weight: 800; | |
| letter-spacing: -0.5px; | |
| } | |
| .brand .logo span { | |
| background: linear-gradient(135deg, var(--purple2), var(--cyan)); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .brand p { | |
| margin-top: 8px; | |
| color: var(--muted); | |
| font-size: 0.85rem; | |
| } | |
| .brand .admin-badge { | |
| display: inline-block; | |
| background: var(--purple-glow); | |
| color: var(--purple2); | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| text-transform: uppercase; | |
| padding: 3px 12px; | |
| border-radius: 100px; | |
| border: 1px solid rgba(124,58,237,0.3); | |
| margin-bottom: 10px; | |
| } | |
| label { | |
| display: block; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| color: var(--muted); | |
| margin-bottom: 6px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| input { | |
| width: 100%; | |
| background: var(--surface); | |
| border: 1px solid var(--border); | |
| border-radius: 10px; | |
| padding: 13px 14px; | |
| color: var(--text); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| margin-bottom: 18px; | |
| -webkit-appearance: none; | |
| } | |
| input:focus { border-color: var(--purple); } | |
| input::placeholder { color: var(--muted); } | |
| .login-btn { | |
| width: 100%; | |
| background: linear-gradient(135deg, var(--purple), var(--purple2)); | |
| color: #fff; | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| padding: 14px; | |
| border-radius: 10px; | |
| border: none; | |
| cursor: pointer; | |
| transition: opacity 0.2s, box-shadow 0.2s; | |
| min-height: 50px; | |
| touch-action: manipulation; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| .login-btn:hover { | |
| opacity: 0.9; | |
| box-shadow: 0 6px 24px rgba(124,58,237,0.4); | |
| } | |
| .error-msg { | |
| background: rgba(248,113,113,0.1); | |
| border: 1px solid rgba(248,113,113,0.25); | |
| color: var(--red); | |
| font-size: 0.82rem; | |
| padding: 10px 14px; | |
| border-radius: 8px; | |
| margin-bottom: 18px; | |
| display: none; | |
| } | |
| .back-link { | |
| text-align: center; | |
| margin-top: 22px; | |
| font-size: 0.8rem; | |
| color: var(--muted); | |
| } | |
| .back-link a { color: var(--purple2); text-decoration: none; } | |
| .back-link a:hover { text-decoration: underline; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="login-box"> | |
| <div class="brand"> | |
| <div class="admin-badge">Admin Portal</div> | |
| <div class="logo">Job<span>Drop</span></div> | |
| <p>Sign in to manage job listings</p> | |
| </div> | |
| <div class="error-msg" id="errorMsg">❌ Invalid username or password.</div> | |
| <label for="username">Username</label> | |
| <input type="text" id="username" placeholder="Enter admin username" autocomplete="off"/> | |
| <label for="password">Password</label> | |
| <input type="password" id="password" placeholder="Enter password"/> | |
| <button class="login-btn" onclick="doLogin()">Sign In →</button> | |
| <div class="back-link"> | |
| <a href="index.html">← Back to Job Board</a> | |
| </div> | |
| </div> | |
| <script> | |
| // Default credentials — change these! | |
| const ADMIN_USER = 'admin'; | |
| const ADMIN_PASS = 'jobdrop123'; | |
| document.getElementById('password').addEventListener('keydown', e => { | |
| if (e.key === 'Enter') doLogin(); | |
| }); | |
| function doLogin() { | |
| const user = document.getElementById('username').value.trim(); | |
| const pass = document.getElementById('password').value; | |
| const err = document.getElementById('errorMsg'); | |
| if (user === ADMIN_USER && pass === ADMIN_PASS) { | |
| sessionStorage.setItem('jd_admin', '1'); | |
| window.location.href = 'admin-dashboard.html'; | |
| } else { | |
| err.style.display = 'block'; | |
| document.getElementById('password').value = ''; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> | |