diff options
Diffstat (limited to 'static/login.html')
| -rw-r--r-- | static/login.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/static/login.html b/static/login.html new file mode 100644 index 0000000..9b6c437 --- /dev/null +++ b/static/login.html @@ -0,0 +1,129 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Sign In - TaskFlow</title> + <link rel="stylesheet" href="login-styles.css"> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> +</head> +<body> + <div class="login-container"> + <div class="login-left"> + <div class="login-branding"> + <div class="brand-logo">TaskFlow</div> + <h1>Welcome back</h1> + <p>Sign in to your account to continue managing your projects</p> + </div> + <div class="login-testimonial"> + <blockquote> + "TaskFlow has transformed how our team collaborates. We've increased productivity by 40% since switching." + </blockquote> + <div class="testimonial-author"> + <div class="author-avatar">SM</div> + <div class="author-info"> + <div class="author-name">Sarah Mitchell</div> + <div class="author-title">Project Manager, TechCorp</div> + </div> + </div> + </div> + </div> + + <div class="login-right"> + <div class="login-form-container"> + <div class="login-header"> + <h2>Sign in to TaskFlow</h2> + <p>Enter your credentials to access your dashboard</p> + </div> + + <form id="loginForm" class="login-form"> + <div class="form-group"> + <label for="email">Email address</label> + <input + type="email" + id="email" + name="email" + required + placeholder="Enter your email" + autocomplete="email" + > + <div class="error-message" id="emailError"></div> + </div> + + <div class="form-group"> + <label for="password">Password</label> + <div class="password-input-container"> + <input + type="password" + id="password" + name="password" + required + placeholder="Enter your password" + autocomplete="current-password" + > + <button type="button" class="password-toggle" id="passwordToggle"> + <span class="toggle-icon">👁️</span> + </button> + </div> + <div class="error-message" id="passwordError"></div> + </div> + + <div class="form-options"> + <label class="checkbox-container"> + <input type="checkbox" id="rememberMe" name="rememberMe"> + <span class="checkmark"></span> + Remember me + </label> + <a href="#forgot-password" class="forgot-password">Forgot password?</a> + </div> + + <button type="submit" class="btn btn-primary btn-full" id="loginButton"> + <span class="button-text">Sign In</span> + <span class="loading-spinner" id="loadingSpinner"></span> + </button> + + <div class="form-divider"> + <span>or</span> + </div> + + <div class="social-login"> + <button type="button" class="btn btn-social btn-google"> + <svg width="18" height="18" viewBox="0 0 18 18"> + <path fill="#4285F4" d="M16.51 8H8.98v3h4.3c-.18 1-.74 1.48-1.6 2.04v2.01h2.6a7.8 7.8 0 0 0 2.38-5.88c0-.57-.05-.66-.15-1.18z"/> + <path fill="#34A853" d="M8.98 16c2.16 0 3.97-.72 5.3-1.94l-2.6-2.04a4.8 4.8 0 0 1-7.18-2.53H1.83v2.07A8 8 0 0 0 8.98 16z"/> + <path fill="#FBBC05" d="M4.5 9.49a4.8 4.8 0 0 1 0-3.07V4.35H1.83a8 8 0 0 0 0 7.28z"/> + <path fill="#EA4335" d="M8.98 4.72c1.17 0 2.23.4 3.06 1.2l2.3-2.3A8 8 0 0 0 1.83 4.35L4.5 6.42c.68-2.07 2.49-3.22 4.48-3.22z"/> + </svg> + Continue with Google + </button> + <button type="button" class="btn btn-social btn-microsoft"> + <svg width="18" height="18" viewBox="0 0 18 18"> + <path fill="#f25022" d="M0 0h8v8H0z"/> + <path fill="#00a4ef" d="M10 0h8v8h-8z"/> + <path fill="#7fba00" d="M0 10h8v8H0z"/> + <path fill="#ffb900" d="M10 10h8v8h-8z"/> + </svg> + Continue with Microsoft + </button> + </div> + + <div class="general-error" id="generalError"></div> + </form> + + <div class="login-footer"> + <p>Don't have an account? <a href="#signup">Sign up for free</a></p> + </div> + </div> + </div> + </div> + + <div class="toast" id="toast"> + <div class="toast-content"> + <span class="toast-icon">✓</span> + <span class="toast-message">Login successful! Redirecting...</span> + </div> + </div> + + <script src="login-script.js"></script> +</body> +</html> |