https://bookmark-buddies.replit.app/login?next=/mentor/sessions

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    <title>Sign In - Bookmark Buddies</title>
7    <!-- Bootstrap CSS -->
8    <link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet">
9    <!-- Font Awesome -->
10    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11    <!-- Google Fonts -->
12    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
13    <!-- Custom CSS -->
14    <link rel="stylesheet" href="/static/css/style.css">
15    
16    <!-- Page-specific default stylesheet -->
17    
18    
19    
20<style>
21    .navbar {
22        background-color: #1976D2 !important;
23    }
24    .login-container {
25        max-width: 450px;
26        margin: 30px auto;
27        border: 1px solid #ddd;
28        border-radius: 4px;
29        overflow: hidden;
30        background-color: white;
31    }
32    .login-header {
33        background-color: #f8f9fa;
34        padding: 15px 20px;
35        border-bottom: 1px solid #ddd;
36    }
37    .login-header h2 {
38        margin: 0;
39        font-size: 1.5rem;
40        color: #333;
41    }
42    .login-body {
43        padding: 20px;
44    }
45    .form-label {
46        font-weight: 500;
47        margin-bottom: 5px;
48    }
49    .login-btn {
50        background-color: #1976D2;
51        width: 100%;
52        padding: 10px 0;
53    }
54    .login-footer {
55        text-align: center;
56        padding: 15px 20px;
57        border-top: 1px solid #ddd;
58    }
59    .login-footer a {
60        color: #1976D2;
61    }
62    .input-with-icon {
63        position: relative;
64    }
65    .input-icon {
66        position: absolute;
67        right: 10px;
68        top: 50%;
69        transform: translateY(-50%);
70        color: #aaa;
71        cursor: pointer;
72    }
73    body {
74        background-color: #f8f9fa;
75    }
76</style>
77
78    
79    
80</head>
81<body>
82    <!-- Navigation -->
83    <nav class="navbar navbar-expand-lg navbar-dark">
84        <div class="container">
85            <a class="navbar-brand d-flex align-items-center" href="/">
86                Bookmark Buddies
87            </a>
88            
89            
90        </div>
91    </nav>
92
93    <!-- Flash Messages -->
94    <div class="container mt-3">
95        
96            
97        
98    </div>
99
100    <!-- Main Content -->
101    <main>
102        
103<div class="container">
104    <div class="login-container">
105        <div class="login-header">
106            <h2>Sign In</h2>
107        </div>
108        <div class="login-body">
109            <form method="POST" action="/login" class="needs-validation" novalidate>
110                <div class="mb-3">
111                    <label for="username" class="form-label">Username or Email</label>
112                    <div class="input-with-icon">
113                        <input type="text" class="form-control" id="username" name="email" required>
114                        <i class="fas fa-user input-icon"></i>
115                    </div>
116                </div>
117                
118                <div class="mb-3">
119                    <label for="password" class="form-label">Password</label>
120                    <div class="input-with-icon">
121                        <input type="password" class="form-control" id="password" name="password" required>
122                        <i class="fas fa-eye input-icon toggle-password" data-target="#password"></i>
123                    </div>
124                </div>
125                
126                <div class="mb-3 form-check">
127                    <input type="checkbox" class="form-check-input" id="remember" name="remember">
128                    <label class="form-check-label" for="remember">Remember Me</label>
129                </div>
130                
131                <div class="d-grid mt-4">
132                    <button type="submit" class="btn btn-primary login-btn">Sign in</button>
133                </div>
134            </form>
135        </div>
136        <!-- Registration link removed as requested -->
137    </div>
138</div>
139
140

141<script>
142    document.querySelectorAll('.toggle-password').forEach(button => {
143        button.addEventListener('click', function() {
144            const targetId = this.getAttribute('data-target');
145            const passwordInput = document.querySelector(targetId);
146            
147            if (passwordInput.type === 'password') {
148                passwordInput.type = 'text';
149                this.classList.remove('fa-eye');
150                this.classList.add('fa-eye-slash');
151            } else {
152                passwordInput.type = 'password';
153                this.classList.remove('fa-eye-slash');
154                this.classList.add('fa-eye');
155            }
156        });
157    });
158</script>

158
159
160
161    </main>
162
163    <!-- Footer -->
164    <footer class="footer">
165        <div class="container">
166            
167            <!-- Full footer with all sections -->
168            <div class="row">
169                <div class="col-lg-4 col-md-6 mb-4 mb-md-0">
170                    <h5 class="text-uppercase mb-4 font-weight-bold">Bookmark Buddies</h5>
171                    <p class="mb-3">Supporting student literacy through coordinated mentorship and tracking student reading progress.</p>
172                    <p class="mb-0">In partnership with Foundation for Osceola Education.</p>
173                </div>
174                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
175                    <h5 class="text-uppercase mb-4 font-weight-bold">Resources</h5>
176                    <ul class="list-unstyled">
177                        <li class="mb-2"><a href="/" class="text-white text-decoration-none">Home</a></li>
178                        
179                        <li class="mb-2"><a href="/login" class="text-white text-decoration-none">Login</a></li>
180                        
181                        <li class="mb-2"><a href="#" class="text-white text-decoration-none">Help & Support</a></li>
182                    </ul>
183                </div>
184                <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
185                    <h5 class="text-uppercase mb-4 font-weight-bold">Contact</h5>
186                    <ul class="list-unstyled">
187                        <li class="mb-2"><i class="fas fa-home me-2"></i> 2310 New Beginnings Rd, Kissimmee, FL 34744</li>
188                        <li class="mb-2"><i class="fas fa-phone me-2"></i> (407) 870-4855</li>
189                    </ul>
190
191                </div>
192            </div>
193            
194            
195            <hr class="bg-light my-4">
196            
197            <div class="text-center">
198                
199                <p class="mb-0">&copy; 2025 Bookmark Buddies. All rights reserved.</p>
200                
201            </div>
202        </div>
203    </footer>
204
205    <!-- Bootstrap JS Bundle -->
206    

206<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

206
207    <!-- Custom JS -->
208    

208<script src="/static/js/main.js"></script>

208
209    

210<script>
211    document.querySelectorAll('.toggle-password').forEach(button => {
212        button.addEventListener('click', function() {
213            const targetId = this.getAttribute('data-target');
214            const passwordInput = document.querySelector(targetId);
215            
216            if (passwordInput.type === 'password') {
217                passwordInput.type = 'text';
218                this.classList.remove('fa-eye');
219                this.classList.add('fa-eye-slash');
220            } else {
221                passwordInput.type = 'password';
222                this.classList.remove('fa-eye-slash');
223                this.classList.add('fa-eye');
224            }
225        });
226    });
227</script>

227
228
229</body>
230</html>