added on WebSTLs (webstls.com) at 2026-07-01 22:26:58
| 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 | <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg"> | |
| 7 | <title>Sign up · $store_name</title> | |
| 8 | <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| 9 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| 10 | <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"> | |
| 11 | <!-- site.css gives the StoreChrome header buttons (.btn, .btn-primary, | |
| 12 | .btn-secondary) their proper styling. Without it Sign in / Cart | |
| 13 | render as bare underlined text links. --> | |
| 14 | <link rel="stylesheet" href="/assets/css/site.css"> | |
| 15 | <style> | |
| 16 | :root { $theme_css_vars } | |
| 17 | /* Chrome at top, auth card centered in the remaining space. The | |
| 18 | old display:grid on body centered EVERYTHING including the | |
| 19 | chrome, pushing it into the middle of the page. */ | |
| 20 | 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; } | |
| 21 | .auth-wrap { flex: 1; display: grid; place-items: center; padding: 40px 20px; } | |
| 22 | .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); } | |
| 23 | .auth-eyebrow { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--col-text-3); margin-bottom: 8px; } | |
| 24 | .auth-title { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; margin: 0 0 6px; color: #fff; } | |
| 25 | .auth-sub { font-size: 14px; color: var(--col-text-2); margin: 0 0 24px; line-height: 1.5; } | |
| 26 | .auth-form .field { margin-bottom: 14px; } | |
| 27 | .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; } | |
| 28 | .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; } | |
| 29 | .auth-form input:focus { outline: none; border-color: var(--col-accent); } | |
| 30 | .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; } | |
| 31 | .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; } | |
| 32 | .auth-foot { margin-top: 22px; font-size: 13px; color: var(--col-text-2); text-align: center; } | |
| 33 | .auth-foot a { color: var(--col-accent-bright); text-decoration: none; font-weight: 600; } | |
| 34 | .auth-back { display: inline-block; margin-top: 14px; font-size: 12px; color: var(--col-text-3); text-decoration: none; } | |
| 35 | .auth-back:hover { color: var(--col-text-2); } | |
| 36 | </style> | |
| 37 | </head> | |
| 38 | <body> | |
| 39 | $store_chrome_html | |
| 40 | <div class="auth-wrap"> | |
| 41 | <div class="auth-card"> | |
| 42 | <div class="auth-eyebrow">$store_name</div> | |
| 43 | <h1 class="auth-title">Create a buyer account</h1> | |
| 44 | <p class="auth-sub">Sign up to track your downloads, see your order history, and re-grab files anytime.</p> | |
| 45 | ||
| 46 | [if:$has_error] | |
| 47 | <div class="auth-error">$error_message</div> | |
| 48 | [/if] | |
| 49 | ||
| 50 | <form class="auth-form" method="POST" action="/buyer_signup.cgi"> | |
| 51 | <div aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden"><label>Company website (leave blank)<input type="text" name="company_website" tabindex="-1" autocomplete="off" value=""></label></div> | |
| 52 | <input type="hidden" name="id" value="$store_id"> | |
| 53 | <div class="field"> | |
| 54 | <label>Display name</label> | |
| 55 | <input type="text" name="display_name" value="$name_value" maxlength="120" placeholder="What should we call you?"> | |
| 56 | </div> | |
| 57 | <div class="field"> | |
| 58 | <label>Email</label> | |
| 59 | <input type="email" name="email" value="$email_value" required maxlength="191" autocomplete="email"> | |
| 60 | </div> | |
| 61 | <div class="field"> | |
| 62 | <label>Password</label> | |
| 63 | <input type="password" name="password" required minlength="8" autocomplete="new-password" placeholder="At least 8 characters"> | |
| 64 | </div> | |
| 65 | <button type="submit" class="auth-submit">Create account</button> | |
| 66 | </form> | |
| 67 | ||
| 68 | <div class="auth-foot"> | |
| 69 | Already have an account? <a href="$login_href">Sign in</a> | |
| 70 | </div> | |
| 71 | <div style="text-align:center"><a href="$back_href" class="auth-back">← Back to store</a></div> | |
| 72 | </div> | |
| 73 | </div> | |
| 74 | </body> | |
| 75 | </html> |