Hugging Face's logo

Spaces:
Neurolingua
/
Aiducation-Edtech-GenAI
Running

App Files Community
6
Neurolingua commited on
Commit
88db748
•
1 Parent(s): fb08a60

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +277 -272
templates/index.html CHANGED
@@ -1,273 +1,278 @@
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>Smart-Learn</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
- <style>
9
- body, html {
10
- margin: 0;
11
- padding: 0;
12
- height: 100%;
13
- font-family: 'Roboto', sans-serif;
14
- color: #fff;
15
- overflow: hidden;
16
- }
17
- .video-container {
18
- position: fixed;
19
- top: 0;
20
- left: 0;
21
- width: 100%;
22
- height: 100%;
23
- z-index: -1;
24
- overflow: hidden;
25
- }
26
- #background-video {
27
- min-width: 100%;
28
- min-height: 100%;
29
- width: auto;
30
- height: auto;
31
- position: absolute;
32
- top: 50%;
33
- left: 50%;
34
- transform: translate(-50%, -50%);
35
- }
36
- .content {
37
- position: relative;
38
- z-index: 1;
39
- text-align: center;
40
- padding: 20px;
41
- background: rgba(0, 0, 0, 0.5);
42
- min-height: 100vh;
43
- display: flex;
44
- flex-direction: column;
45
- justify-content: space-between;
46
- }
47
- .header {
48
- padding: 20px 0;
49
- }
50
- .logo-circle {
51
- width: 150px;
52
- height: 150px;
53
- border-radius: 50%;
54
- overflow: hidden;
55
- margin: 0 auto;
56
- box-shadow: 0 4px 8px rgba(0,0,0,0.3);
57
- }
58
- .logo-circle img {
59
- width: 100%;
60
- height: 100%;
61
- object-fit: cover;
62
- }
63
- .school-name {
64
- font-size: 2.5em;
65
- margin-top: 20px;
66
- color: #ffffff;
67
- text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
68
- }
69
- .login-text {
70
- font-size: 1.2em;
71
- margin-top: 20px;
72
- margin-bottom: 10px;
73
- }
74
- .login-buttons {
75
- margin-top: 10px;
76
- }
77
- .login-button {
78
- background-color: rgba(52, 152, 219, 0.8);
79
- border: none;
80
- color: white;
81
- padding: 12px 24px;
82
- text-align: center;
83
- text-decoration: none;
84
- display: inline-block;
85
- font-size: 16px;
86
- margin: 4px 10px;
87
- cursor: pointer;
88
- border-radius: 25px;
89
- transition: background-color 0.3s, transform 0.3s;
90
- }
91
- .login-button:hover {
92
- background-color: rgba(41, 128, 185, 0.9);
93
- transform: translateY(-2px);
94
- }
95
- .modal {
96
- display: none;
97
- position: fixed;
98
- z-index: 2;
99
- left: 0;
100
- top: 0;
101
- width: 100%;
102
- height: 100%;
103
- overflow: auto;
104
- background-color: rgba(0,0,0,0.8);
105
- }
106
- .modal-content {
107
- background-color: #fefefe;
108
- margin: 10% auto;
109
- padding: 30px;
110
- border: 1px solid #888;
111
- width: 300px;
112
- border-radius: 8px;
113
- box-shadow: 0 4px 6px rgba(0,0,0,0.1);
114
- }
115
- .close {
116
- color: #aaa;
117
- float: right;
118
- font-size: 28px;
119
- font-weight: bold;
120
- }
121
- .close:hover,
122
- .close:focus {
123
- color: black;
124
- text-decoration: none;
125
- cursor: pointer;
126
- }
127
- #login-form input {
128
- width: 100%;
129
- padding: 10px;
130
- margin: 10px 0;
131
- border: 1px solid #ddd;
132
- border-radius: 4px;
133
- }
134
- #login-form button {
135
- width: 100%;
136
- padding: 10px;
137
- background-color: #2ecc71;
138
- color: white;
139
- border: none;
140
- border-radius: 4px;
141
- cursor: pointer;
142
- transition: background-color 0.3s;
143
- }
144
- #login-form button:hover {
145
- background-color: #27ae60;
146
- }
147
- .info-section {
148
- width: 100% ;
149
- color: #ecf0f1;
150
- padding: 20px 0;
151
- text-align: center;
152
- }
153
- .contact-info {
154
- max-width: 600px;
155
- margin: 0 auto;
156
- }
157
- #login-title {
158
- color: #333;
159
- margin-bottom: 15px;
160
- }
161
- #login-instructions {
162
- color: #666;
163
- margin-bottom: 20px;
164
- }
165
- </style>
166
- </head>
167
-
168
- <body>
169
- <div class="video-container">
170
- <video autoplay muted loop playsinline id="background-video">
171
- <source src="../static/background.mp4" type="video/mp4">
172
- <source src="../static/background.webm" type="video/webm">
173
- Your browser does not support the video tag.
174
- </video>
175
- </div>
176
-
177
- <div class="content" id="main-content">
178
- <div class="header">
179
- <div class="logo-circle">
180
- <img src="../static/smart-learn.jpeg" alt="Smart Learn Logo">
181
- </div>
182
- <h1 class="school-name">Smart-Learn</h1>
183
-
184
- <!-- Login Text and Buttons -->
185
- <p class="login-text">Login whether you are a student or teacher</p>
186
- <div class="login-buttons">
187
- <button class="login-button" onclick="showLogin('student')">Student Portal</button>
188
- <button class="login-button" onclick="showLogin('teacher')">Teacher Portal</button>
189
- </div>
190
- </div>
191
-
192
- <!-- Contact Information Section -->
193
- <div class="info-section">
194
- <div class="contact-info">
195
- <h2>Contact Information</h2>
196
- <p><strong>Email:</strong> [email protected]</p>
197
- <p><strong>Phone:</strong> (123) 456-7890</p>
198
- <p><strong>Address:</strong> 123 Education Street, Knowledge City, ST 12345</p>
199
- </div>
200
- </div>
201
- </div>
202
-
203
- <!-- Login Modal -->
204
- <div id="login-modal" class="modal">
205
- <div class="modal-content">
206
- <span class="close" onclick="closeLogin()">&times;</span>
207
- <h2 id="login-title"></h2>
208
- <p id="login-instructions">Enter your details:</p>
209
- <form id="login-form">
210
- <input type="text" id="username" name="username" placeholder="Username" required>
211
- <input type="password" id="password" name="password" placeholder="Password Type '12345'" required>
212
- <button type="submit">Login</button>
213
- </form>
214
- <p id="login-error" style="color: red; display: none;">Invalid username or password. Please try again.</p>
215
- </div>
216
- </div>
217
-
218
- <script>
219
- document.addEventListener('DOMContentLoaded', function() {
220
- var video = document.getElementById('background-video');
221
- video.play().catch(function(error) {
222
- console.log("Auto-play was prevented");
223
- });
224
- });
225
- let currentLoginType = '';
226
-
227
- function showLogin(type) {
228
- currentLoginType = type;
229
- document.getElementById('main-content').style.display = 'none';
230
- document.getElementById('login-modal').style.display = 'block';
231
- document.getElementById('login-title').innerText = type.charAt(0).toUpperCase() + type.slice(1) + ' Login';
232
- document.getElementById('login-error').style.display = 'none';
233
- }
234
-
235
- function closeLogin() {
236
- document.getElementById('login-modal').style.display = 'none';
237
- document.getElementById('main-content').style.display = 'flex';
238
- }
239
-
240
- document.getElementById('login-form').addEventListener('submit', function(event) {
241
- event.preventDefault();
242
- const username = document.getElementById('username').value;
243
- const password = document.getElementById('password').value;
244
-
245
- fetch('/' + currentLoginType + '_login', {
246
- method: 'POST',
247
- headers: {
248
- 'Content-Type': 'application/json',
249
- },
250
- body: JSON.stringify({ name: username, password: password }),
251
- })
252
- .then(response => response.json())
253
- .then(data => {
254
- if (data.success) {
255
- window.location.href = '/' + currentLoginType;
256
- } else {
257
- document.getElementById('login-error').style.display = 'block';
258
- }
259
- })
260
- .catch(error => {
261
- console.error('Error:', error);
262
- });
263
- });
264
-
265
- // Close the modal if clicked outside
266
- window.onclick = function(event) {
267
- if (event.target == document.getElementById('login-modal')) {
268
- closeLogin();
269
- }
270
- }
271
- </script>
272
- </body>
 
 
 
 
 
273
  </html>
 
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>Smart-Learn</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ body, html {
10
+ margin: 0;
11
+ padding: 0;
12
+ height: 100%;
13
+ font-family: 'Roboto', sans-serif;
14
+ color: #fff;
15
+ overflow: hidden;
16
+ }
17
+ .video-container {
18
+ position: fixed;
19
+ top: 0;
20
+ left: 0;
21
+ width: 100%;
22
+ height: 100%;
23
+ z-index: -1;
24
+ overflow: hidden;
25
+ }
26
+ #background-video {
27
+ min-width: 100%;
28
+ min-height: 100%;
29
+ width: auto;
30
+ height: auto;
31
+ position: absolute;
32
+ top: 50%;
33
+ left: 50%;
34
+ transform: translate(-50%, -50%);
35
+ }
36
+ .content {
37
+ position: relative;
38
+ z-index: 1;
39
+ text-align: center;
40
+ padding: 20px;
41
+ background: rgba(0, 0, 0, 0.5);
42
+ min-height: 100vh;
43
+ display: flex;
44
+ flex-direction: column;
45
+ justify-content: space-between;
46
+ }
47
+ .header {
48
+ padding: 20px 0;
49
+ }
50
+ .logo-circle {
51
+ width: 150px;
52
+ height: 150px;
53
+ border-radius: 50%;
54
+ overflow: hidden;
55
+ margin: 0 auto;
56
+ box-shadow: 0 4px 8px rgba(0,0,0,0.3);
57
+ }
58
+ .logo-circle img {
59
+ width: 100%;
60
+ height: 100%;
61
+ object-fit: cover;
62
+ }
63
+ .school-name {
64
+ font-size: 2.5em;
65
+ margin-top: 20px;
66
+ color: #ffffff;
67
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
68
+ }
69
+ .login-text {
70
+ font-size: 1.2em;
71
+ margin-top: 20px;
72
+ margin-bottom: 10px;
73
+ }
74
+ .login-buttons {
75
+ margin-top: 10px;
76
+ }
77
+ .login-button {
78
+ background-color: rgba(52, 152, 219, 0.8);
79
+ border: none;
80
+ color: white;
81
+ padding: 12px 24px;
82
+ text-align: center;
83
+ text-decoration: none;
84
+ display: inline-block;
85
+ font-size: 16px;
86
+ margin: 4px 10px;
87
+ cursor: pointer;
88
+ border-radius: 25px;
89
+ transition: background-color 0.3s, transform 0.3s;
90
+ }
91
+ .login-button:hover {
92
+ background-color: rgba(41, 128, 185, 0.9);
93
+ transform: translateY(-2px);
94
+ }
95
+ .modal {
96
+ display: none;
97
+ position: fixed;
98
+ z-index: 2;
99
+ left: 0;
100
+ top: 0;
101
+ width: 100%;
102
+ height: 100%;
103
+ overflow: auto;
104
+ background-color: rgba(0,0,0,0.8);
105
+ }
106
+ .modal-content {
107
+ background-color: #fefefe;
108
+ margin: 10% auto;
109
+ padding: 30px;
110
+ border: 1px solid #888;
111
+ width: 300px;
112
+ border-radius: 8px;
113
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
114
+ }
115
+ .close {
116
+ color: #aaa;
117
+ float: right;
118
+ font-size: 28px;
119
+ font-weight: bold;
120
+ }
121
+ .close:hover,
122
+ .close:focus {
123
+ color: black;
124
+ text-decoration: none;
125
+ cursor: pointer;
126
+ }
127
+ #login-form input {
128
+ width: 100%;
129
+ padding: 10px;
130
+ margin: 10px 0;
131
+ border: 1px solid #ddd;
132
+ border-radius: 4px;
133
+ }
134
+ #login-form button {
135
+ width: 100%;
136
+ padding: 10px;
137
+ background-color: #2ecc71;
138
+ color: white;
139
+ border: none;
140
+ border-radius: 4px;
141
+ cursor: pointer;
142
+ transition: background-color 0.3s;
143
+ }
144
+ #login-form button:hover {
145
+ background-color: #27ae60;
146
+ }
147
+ .info-section {
148
+ width: 100% ;
149
+ color: #ecf0f1;
150
+ padding: 20px 0;
151
+ text-align: center;
152
+ }
153
+ .contact-info {
154
+ max-width: 600px;
155
+ margin: 0 auto;
156
+ }
157
+ #login-title {
158
+ color: #333;
159
+ margin-bottom: 15px;
160
+ }
161
+ #login-instructions {
162
+ color: #666;
163
+ margin-bottom: 20px;
164
+ }
165
+ </style>
166
+ </head>
167
+
168
+ <body>
169
+ <div class="video-container">
170
+ <video autoplay muted loop id="background-video">
171
+ <source src="../static/background.mp4" type="video/mp4">
172
+ Your browser does not support the video tag.
173
+ </video>
174
+ </div>
175
+
176
+ <div class="content" id="main-content">
177
+ <div class="header">
178
+ <div class="logo-circle">
179
+ <img src="../static/smart-learn.jpeg" alt="Smart Learn Logo">
180
+ </div>
181
+ <h1 class="school-name">Smart-Learn</h1>
182
+
183
+ <!-- Login Text and Buttons -->
184
+ <p class="login-text">Login whether you are a student or teacher</p>
185
+ <div class="login-buttons">
186
+ <button class="login-button" onclick="showLogin('student')">Student Portal</button>
187
+ <button class="login-button" onclick="showLogin('teacher')">Teacher Portal</button>
188
+ </div>
189
+ </div>
190
+
191
+ <!-- Contact Information Section -->
192
+ <div class="info-section">
193
+ <div class="contact-info">
194
+ <h2>Contact Information</h2>
195
+ <p><strong>Email:</strong> [email protected]</p>
196
+ <p><strong>Phone:</strong> (123) 456-7890</p>
197
+ <p><strong>Address:</strong> 123 Education Street, Knowledge City, ST 12345</p>
198
+ </div>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Login Modal -->
203
+ <div id="login-modal" class="modal">
204
+ <div class="modal-content">
205
+ <span class="close" onclick="closeLogin()">&times;</span>
206
+ <h2 id="login-title"></h2>
207
+ <p id="login-instructions">Enter your details:</p>
208
+ <form id="login-form">
209
+ <input type="text" id="username" name="username" placeholder="Username" required>
210
+ <input type="password" id="password" name="password" placeholder="Password" required>
211
+ <button type="submit">Login</button>
212
+ </form>
213
+ <p id="login-hint" style="color: #666; font-size: 0.9em; margin-top: 10px;"></p>
214
+ <p id="login-error" style="color: red; display: none;">Invalid username or password. Please try again.</p>
215
+ </div>
216
+ </div>
217
+
218
+ <script>
219
+ let currentLoginType = '';
220
+
221
+ function showLogin(type) {
222
+ currentLoginType = type;
223
+ document.getElementById('main-content').style.display = 'none';
224
+ document.getElementById('login-modal').style.display = 'block';
225
+ document.getElementById('login-title').innerText = type.charAt(0).toUpperCase() + type.slice(1) + ' Login';
226
+ document.getElementById('login-error').style.display = 'none';
227
+
228
+ // Set placeholders and hint based on login type
229
+ if (type === 'student') {
230
+ document.getElementById('username').placeholder = "Student ID (e.g., 'Alice Johnson')";
231
+ document.getElementById('password').placeholder = "Password (e.g., '12345')";
232
+ document.getElementById('login-hint').innerText = "Hint: Use your student ID as 'Alice Johnson' and default password is '12345'";
233
+ } else {
234
+ document.getElementById('username').placeholder = "Teacher ID (e.g., 'John Doe')";
235
+ document.getElementById('password').placeholder = "Password (e.g., '12345')";
236
+ document.getElementById('login-hint').innerText = "Hint: Use your Teacher ID as 'John Doe' and default password is '12345'";
237
+ }
238
+ }
239
+
240
+ function closeLogin() {
241
+ document.getElementById('login-modal').style.display = 'none';
242
+ document.getElementById('main-content').style.display = 'flex';
243
+ }
244
+
245
+ document.getElementById('login-form').addEventListener('submit', function(event) {
246
+ event.preventDefault();
247
+ const username = document.getElementById('username').value;
248
+ const password = document.getElementById('password').value;
249
+
250
+ fetch('/' + currentLoginType + '_login', {
251
+ method: 'POST',
252
+ headers: {
253
+ 'Content-Type': 'application/json',
254
+ },
255
+ body: JSON.stringify({ name: username, password: password }),
256
+ })
257
+ .then(response => response.json())
258
+ .then(data => {
259
+ if (data.success) {
260
+ window.location.href = '/' + currentLoginType;
261
+ } else {
262
+ document.getElementById('login-error').style.display = 'block';
263
+ }
264
+ })
265
+ .catch(error => {
266
+ console.error('Error:', error);
267
+ });
268
+ });
269
+
270
+ // Close the modal if clicked outside
271
+ window.onclick = function(event) {
272
+ if (event.target == document.getElementById('login-modal')) {
273
+ closeLogin();
274
+ }
275
+ }
276
+ </script>
277
+ </body>
278
  </html>