Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Create Account – Proofly</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <script src="https://unpkg.com/@phosphor-icons/web"></script> | |
| <script>if (localStorage.getItem('proofly-theme') === 'dark') document.documentElement.setAttribute('data-theme', 'dark');</script> | |
| <style> | |
| body { | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .auth-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-lg); | |
| padding: 3rem 2.5rem; | |
| width: 100%; | |
| max-width: 440px; | |
| box-shadow: var(--app-shadow); | |
| } | |
| .auth-logo { | |
| text-align: center; | |
| margin-bottom: 2rem; | |
| } | |
| .auth-logo i { | |
| font-size: 2.5rem; | |
| color: var(--primary); | |
| } | |
| .auth-logo h1 { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| margin-top: 0.5rem; | |
| } | |
| .auth-logo p { | |
| font-size: 0.9rem; | |
| color: var(--text-muted); | |
| margin-top: 0.25rem; | |
| } | |
| .field { | |
| margin-bottom: 1.2rem; | |
| } | |
| .field label { | |
| display: block; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| color: var(--text-muted); | |
| margin-bottom: 0.4rem; | |
| } | |
| .field input { | |
| width: 100%; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius-sm); | |
| background: var(--bg-input); | |
| color: var(--text-main); | |
| font-family: inherit; | |
| font-size: 0.95rem; | |
| outline: none; | |
| transition: border-color 0.2s ease; | |
| } | |
| .field input:focus { | |
| border-color: var(--primary); | |
| } | |
| .auth-btn { | |
| width: 100%; | |
| padding: 0.85rem; | |
| background: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-sm); | |
| font-family: inherit; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: var(--transition); | |
| margin-top: 0.5rem; | |
| } | |
| .auth-btn:hover { | |
| opacity: 0.9; | |
| transform: translateY(-1px); | |
| } | |
| .auth-footer { | |
| text-align: center; | |
| margin-top: 1.5rem; | |
| font-size: 0.88rem; | |
| color: var(--text-muted); | |
| } | |
| .auth-footer a { | |
| color: var(--primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| } | |
| .flash { | |
| padding: 0.75rem 1rem; | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 1.25rem; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| } | |
| .flash.error { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: #ef4444; | |
| border: 1px solid rgba(239, 68, 68, 0.2); | |
| } | |
| .flash.success { | |
| background: rgba(16, 185, 129, 0.1); | |
| color: #10b981; | |
| border: 1px solid rgba(16, 185, 129, 0.2); | |
| } | |
| .flash.info { | |
| background: rgba(88, 166, 255, 0.1); | |
| color: var(--primary); | |
| border: 1px solid rgba(88, 166, 255, 0.2); | |
| } | |
| .theme-float { | |
| position: fixed; | |
| top: 1.25rem; | |
| right: 1.25rem; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| border: 1.5px solid var(--border-color); | |
| background: var(--bg-input); | |
| color: var(--text-muted); | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: var(--transition); | |
| } | |
| .theme-float:hover { | |
| background: var(--primary); | |
| color: white; | |
| border-color: var(--primary); | |
| } | |
| .theme-float .icon-sun { | |
| position: absolute; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .theme-float .icon-moon { | |
| transition: opacity 0.3s; | |
| } | |
| [data-theme="dark"] .theme-float .icon-moon { | |
| opacity: 0; | |
| } | |
| [data-theme="dark"] .theme-float .icon-sun { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <button class="theme-float" onclick="toggleTheme()" title="Toggle theme"> | |
| <i class="ph ph-moon icon-moon"></i> | |
| <i class="ph ph-sun icon-sun"></i> | |
| </button> | |
| <div class="auth-card"> | |
| <div class="auth-logo"> | |
| <i class="ph-fill ph-check-circle"></i> | |
| <h1>Create Account</h1> | |
| <p>Join Proofly today</p> | |
| </div> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% for category, message in messages %} | |
| <div class="flash {{ category }}">{{ message }}</div> | |
| {% endfor %} | |
| {% endwith %} | |
| <form method="POST" action="{{ url_for('auth.register') }}"> | |
| <div class="field"> | |
| <label for="username">Username</label> | |
| <input type="text" id="username" name="username" placeholder="Your display name" required autofocus> | |
| </div> | |
| <div class="field"> | |
| <label for="email">Email address</label> | |
| <input type="email" id="email" name="email" placeholder="you@example.com" required> | |
| </div> | |
| <div class="field"> | |
| <label for="password">Password</label> | |
| <input type="password" id="password" name="password" placeholder="Min. 6 characters" required> | |
| </div> | |
| <div class="field"> | |
| <label for="confirm_password">Confirm password</label> | |
| <input type="password" id="confirm_password" name="confirm_password" placeholder="Repeat password" | |
| required> | |
| </div> | |
| <button type="submit" class="auth-btn">Create Account <i class="ph ph-user-plus"></i></button> | |
| </form> | |
| <div class="auth-footer"> | |
| Already have an account? <a href="{{ url_for('auth.login') }}">Sign in</a> | |
| </div> | |
| </div> | |
| <script> | |
| function toggleTheme() { | |
| const isDark = document.documentElement.getAttribute('data-theme') === 'dark'; | |
| if (isDark) { | |
| document.documentElement.removeAttribute('data-theme'); | |
| localStorage.setItem('proofly-theme', 'light'); | |
| } else { | |
| document.documentElement.setAttribute('data-theme', 'dark'); | |
| localStorage.setItem('proofly-theme', 'dark'); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |