blob: 77d32a13f3c261d1206c24713ab39ea062279102 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
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="text"
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>
|
