added on local at 2026-07-01 13:48:00
| 1 | <!DOCTYPE html> | |
| 2 | <html lang="en"> | |
| 3 | <head> | |
| 4 | <meta charset="UTF-8"> | |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | <title>Sign in · $store_name</title> | |
| 7 | <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| 8 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| 9 | <link href="https://fonts.googleapis.com/css2?family=Inter:wght\@400;500;600;700&family=Space+Grotesk:wght\@500;600;700&display=swap" rel="stylesheet"> | |
| 10 | <!-- site.css is required for the StoreChrome header buttons (.btn, | |
| 11 | .btn-primary, .btn-secondary) to pick up their normal styling -- | |
| 12 | without it they render as bare underlined text links. --> | |
| 13 | <link rel="stylesheet" href="/assets/css/site.css"> | |
| 14 | <style> | |
| 15 | :root { $theme_css_vars } | |
| 16 | /* Layout: chrome stays at the very top, the auth card fills the | |
| 17 | remaining viewport and centers itself. Was display:grid on body | |
| 18 | which centered EVERYTHING (chrome AND card) in the page. */ | |
| 19 | body { background: var(--col-bg, #050a1c); color: var(--col-text, #e6ecf6); font-family: 'Inter', system-ui, sans-serif; margin: 0; min-height: 100vh; display: flex; flex-direction: column; } | |
| 20 | .auth-wrap { flex: 1; display: grid; place-items: center; padding: 40px 20px; } | |
| 21 | .auth-card { background: var(--col-surface-1); border: 1px solid var(--col-border); border-radius: 16px; padding: 36px 36px 32px; max-width: 460px; width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.35); } | |
| 22 | .auth-eyebrow { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-text-3); margin-bottom: 8px; } | |
| 23 | .auth-title { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; margin: 0 0 6px; color: #fff; } | |
| 24 | .auth-sub { font-size: 14px; color: var(--col-text-2); margin: 0 0 24px; line-height: 1.5; } | |
| 25 | .auth-form .field { margin-bottom: 14px; } | |
| 26 | .auth-form label { display: block; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--col-text-3); margin-bottom: 6px; font-weight: 600; } | |
| 27 | .auth-form input { width: 100%; background: var(--col-surface-2); border: 1px solid var(--col-border); color: var(--col-text); padding: 12px 14px; border-radius: 10px; font-size: 14px; font-family: inherit; box-sizing: border-box; } | |
| 28 | .auth-form input:focus { outline: none; border-color: var(--col-accent); } | |
| 29 | .auth-submit { width: 100%; padding: 13px 18px; background: var(--grad-brand, linear-gradient(135deg,#7c3aed,#3b82f6)); color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 14px; cursor: pointer; letter-spacing: 0.4px; margin-top: 8px; } | |
| 30 | .auth-error { background: rgba(239,68,68,0.10); border: 1px solid rgba(239,68,68,0.40); color: #fca5a5; border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 18px; } | |
| 31 | .auth-foot { margin-top: 22px; font-size: 13px; color: var(--col-text-2); text-align: center; } | |
| 32 | .auth-foot a { color: var(--col-accent-bright); text-decoration: none; font-weight: 600; } | |
| 33 | .auth-back { display: inline-block; margin-top: 14px; font-size: 12px; color: var(--col-text-3); text-decoration: none; } | |
| 34 | .auth-back:hover { color: var(--col-text-2); } | |
| 35 | </style> | |
| 36 | </head> | |
| 37 | <body> | |
| 38 | $store_chrome_html | |
| 39 | <div class="auth-wrap"> | |
| 40 | <div class="auth-card"> | |
| 41 | <div class="auth-eyebrow">$store_name</div> | |
| 42 | <h1 class="auth-title">Welcome back</h1> | |
| 43 | <p class="auth-sub">Sign in to your buyer account to see your order history and re-download files.</p> | |
| 44 | ||
| 45 | [if:$has_error] | |
| 46 | <div class="auth-error">$error_message</div> | |
| 47 | [/if] | |
| 48 | ||
| 49 | <form class="auth-form" method="POST" action="/buyer_login.cgi"> | |
| 50 | <input type="hidden" name="id" value="$store_id"> | |
| 51 | <div class="field"> | |
| 52 | <label>Email</label> | |
| 53 | <input type="email" name="email" value="$email_value" required maxlength="191" autocomplete="email" autofocus> | |
| 54 | </div> | |
| 55 | <div class="field"> | |
| 56 | <label>Password</label> | |
| 57 | <input type="password" name="password" required autocomplete="current-password"> | |
| 58 | </div> | |
| 59 | <button type="submit" class="auth-submit">Sign in</button> | |
| 60 | </form> | |
| 61 | ||
| 62 | <div class="auth-foot"> | |
| 63 | New here? <a href="$signup_href">Create an account</a> | |
| 64 | </div> | |
| 65 | <div style="text-align:center"><a href="$back_href" class="auth-back">← Back to store</a></div> | |
| 66 | </div> | |
| 67 | </div> | |
| 68 | </body> | |
| 69 | </html> |