login.html (2513B)
1 <!DOCTYPE html> 2 <html lang="en" data-theme="dark"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Sign In - StenoDojo</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=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet"> 10 <link rel="stylesheet" href="/static/css/style.css?v={{ cache_bust }}"> 11 <script> 12 (function(){var m=document.cookie.match(/(?:^| )theme=([^;]+)/);document.documentElement.setAttribute('data-theme',m?m[1]:'dark')})(); 13 </script> 14 </head> 15 <body> 16 <div class="login-page"> 17 <div class="login-card"> 18 <div class="login-brand"> 19 <svg class="login-logo" viewBox="0 0 24 24" fill="none"> 20 <rect x="1" y="3" width="9" height="11" rx="2.5" fill="currentColor" opacity="0.6"/> 21 <rect x="14" y="3" width="9" height="11" rx="2.5" fill="currentColor"/> 22 <rect x="5" y="16" width="14" height="6" rx="2.5" fill="currentColor" opacity="0.8"/> 23 </svg> 24 <h1 class="login-title">StenoDojo</h1> 25 <p class="login-subtitle">Stenography Practice</p> 26 </div> 27 28 {% if error %} 29 <div class="login-error">{{ error }}</div> 30 {% endif %} 31 32 <a href="/login/google" class="btn btn--google"> 33 <svg class="google-icon" viewBox="0 0 24 24" width="20" height="20"> 34 <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z" fill="#4285F4"/> 35 <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/> 36 <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/> 37 <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/> 38 </svg> 39 Sign in with Google 40 </a> 41 42 <p class="login-footer">Your email must be verified by Google to sign in.</p> 43 </div> 44 </div> 45 </body> 46 </html>