Hugging Face's logo

Spaces:
ngwakomadikwe
/
SmartMate
Runtime error

App Files Community
ngwakomadikwe commited on
Commit
88fe539
·
verified ·
1 Parent(s): 60f874e

Create templates/dashboard.html (Facebook Theme)

Browse files
Files changed (1) hide show
  1. templates/dashboard.html (Facebook Theme) +195 -0
templates/dashboard.html (Facebook Theme) ADDED
@@ -0,0 +1,195 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>ThutoAI - Student Login</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
16
+ background: linear-gradient(135deg, #1877f2 0%, #42a5f5 100%);
17
+ height: 100vh;
18
+ display: flex;
19
+ justify-content: center;
20
+ align-items: center;
21
+ }
22
+
23
+ .login-container {
24
+ background: white;
25
+ padding: 40px;
26
+ border-radius: 15px;
27
+ box-shadow: 0 8px 32px rgba(24, 119, 242, 0.3);
28
+ width: 90%;
29
+ max-width: 400px;
30
+ text-align: center;
31
+ }
32
+
33
+ .logo {
34
+ font-size: 32px;
35
+ font-weight: bold;
36
+ color: #1877f2;
37
+ margin-bottom: 10px;
38
+ }
39
+
40
+ .subtitle {
41
+ color: #65676b;
42
+ margin-bottom: 30px;
43
+ }
44
+
45
+ .form-group {
46
+ margin-bottom: 20px;
47
+ text-align: left;
48
+ }
49
+
50
+ .form-group label {
51
+ display: block;
52
+ margin-bottom: 5px;
53
+ color: #1c1e21;
54
+ font-weight: 500;
55
+ }
56
+
57
+ .form-group input {
58
+ width: 100%;
59
+ padding: 14px 16px;
60
+ border: 1px solid #dddfe2;
61
+ border-radius: 6px;
62
+ font-size: 16px;
63
+ transition: border-color 0.3s;
64
+ background: #f5f6f7;
65
+ }
66
+
67
+ .form-group input:focus {
68
+ outline: none;
69
+ border-color: #1877f2;
70
+ background: white;
71
+ }
72
+
73
+ .login-btn {
74
+ width: 100%;
75
+ padding: 12px;
76
+ background: #1877f2;
77
+ color: white;
78
+ border: none;
79
+ border-radius: 6px;
80
+ font-size: 16px;
81
+ font-weight: 600;
82
+ cursor: pointer;
83
+ transition: background 0.3s;
84
+ }
85
+
86
+ .login-btn:hover {
87
+ background: #166fe5;
88
+ }
89
+
90
+ .login-btn:disabled {
91
+ opacity: 0.7;
92
+ cursor: not-allowed;
93
+ }
94
+
95
+ .error-message {
96
+ color: #e41e3f;
97
+ margin-top: 15px;
98
+ padding: 10px;
99
+ background: #ffebee;
100
+ border-radius: 5px;
101
+ display: none;
102
+ }
103
+
104
+ .demo-info {
105
+ margin-top: 30px;
106
+ padding: 20px;
107
+ background: #e7f3ff;
108
+ border-radius: 8px;
109
+ border-left: 4px solid #1877f2;
110
+ }
111
+
112
+ .demo-info h4 {
113
+ color: #1877f2;
114
+ margin-bottom: 10px;
115
+ }
116
+
117
+ .demo-info p {
118
+ color: #65676b;
119
+ font-size: 14px;
120
+ margin-bottom: 5px;
121
+ }
122
+ </style>
123
+ </head>
124
+ <body>
125
+ <div class="login-container">
126
+ <div class="logo">ThutoAI</div>
127
+ <div class="subtitle">Your AI-Powered Student Portal</div>
128
+
129
+ <form id="loginForm">
130
+ <div class="form-group">
131
+ <label for="username">Student ID</label>
132
+ <input type="text" id="username" name="username" required>
133
+ </div>
134
+
135
+ <div class="form-group">
136
+ <label for="password">Password</label>
137
+ <input type="password" id="password" name="password" required>
138
+ </div>
139
+
140
+ <button type="submit" class="login-btn" id="loginBtn">
141
+ Sign In
142
+ </button>
143
+
144
+ <div class="error-message" id="errorMessage"></div>
145
+ </form>
146
+
147
+ <div class="demo-info">
148
+ <h4>Demo Credentials</h4>
149
+ <p><strong>Username:</strong> student123</p>
150
+ <p><strong>Password:</strong> password123</p>
151
+ <p><em>Use these credentials to explore ThutoAI</em></p>
152
+ </div>
153
+ </div>
154
+
155
+ <script>
156
+ document.getElementById('loginForm').addEventListener('submit', async (e) => {
157
+ e.preventDefault();
158
+
159
+ const username = document.getElementById('username').value;
160
+ const password = document.getElementById('password').value;
161
+ const loginBtn = document.getElementById('loginBtn');
162
+ const errorMessage = document.getElementById('errorMessage');
163
+
164
+ loginBtn.disabled = true;
165
+ loginBtn.textContent = 'Signing In...';
166
+ errorMessage.style.display = 'none';
167
+
168
+ try {
169
+ const response = await fetch('/login', {
170
+ method: 'POST',
171
+ headers: {
172
+ 'Content-Type': 'application/json',
173
+ },
174
+ body: JSON.stringify({ username, password })
175
+ });
176
+
177
+ const data = await response.json();
178
+
179
+ if (data.success) {
180
+ window.location.href = data.redirect;
181
+ } else {
182
+ errorMessage.textContent = data.message;
183
+ errorMessage.style.display = 'block';
184
+ }
185
+ } catch (error) {
186
+ errorMessage.textContent = 'Login failed. Please try again.';
187
+ errorMessage.style.display = 'block';
188
+ } finally {
189
+ loginBtn.disabled = false;
190
+ loginBtn.textContent = 'Sign In';
191
+ }
192
+ });
193
+ </script>
194
+ </body>
195
+ </html>