Hugging Face's logo

Spaces:
DAU-Main
/
Exams
Paused

App Files Community
JaivinBarot commited on
Commit
79ea4fa
·
verified ·
1 Parent(s): c62e4f8

Update templates/view_schedule.html

Browse files
Files changed (1) hide show
  1. templates/view_schedule.html +286 -123
templates/view_schedule.html CHANGED
@@ -1,124 +1,287 @@
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>View Schedule</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- background-color: #f2f2f2;
11
- margin: 0;
12
- padding: 20px;
13
- }
14
-
15
- h1 {
16
- text-align: center;
17
- }
18
-
19
- form {
20
- text-align: center;
21
- margin-bottom: 20px;
22
- }
23
-
24
- label {
25
- display: block;
26
- margin-bottom: 5px;
27
- font-weight: bold;
28
- }
29
-
30
- input[type="text"],
31
- input[type="date"] {
32
- padding: 8px;
33
- border: 1px solid #ccc;
34
- border-radius: 4px;
35
- }
36
-
37
- input[type="submit"] {
38
- padding: 8px 16px;
39
- background-color: #4CAF50;
40
- color: white;
41
- border: none;
42
- border-radius: 4px;
43
- cursor: pointer;
44
- }
45
- table {
46
- border-collapse: collapse;
47
- width: 100%;
48
- }
49
-
50
- th, td {
51
- border: 1px solid #ddd;
52
- padding: 8px;
53
- text-align: left;
54
- }
55
-
56
- th {
57
- background-color: #f2f2f2;
58
- }
59
- nav {
60
- text-align: center;
61
- margin-bottom: 20px;
62
- }
63
- nav a {
64
- margin: 0 15px;
65
- text-decoration: none;
66
- color: #333;
67
- }
68
- nav a:hover {
69
- text-decoration: underline;
70
- }
71
- body {
72
- font-family: Arial, sans-serif;
73
- background-color: #f2f2f2;
74
- margin: 0;
75
- padding: 20px;
76
- }
77
- </style>
78
- </head>
79
- <body>
80
-
81
-
82
- <form action="{% url 'view_schedule' %}" method="post">
83
- {% csrf_token %}
84
- <label for="student_id">Student ID:</label>
85
- <input type="text" name="student_id" id="student_id" required><br><br>
86
- <label for="exam_date">Exam Date:</label>
87
- <input type="date" name="exam_date" id="exam_date" required><br><br>
88
- <input type="submit" value="Search">
89
- </form>
90
- {% if schedules %}
91
- <table>
92
- <tr>
93
- <th>Student Name</th>
94
- <th>Student ID</th>
95
- <th>Exam Date</th>
96
- <th>Room Number</th>
97
- <th>Subject Name</th>
98
- <th>Subject Code</th>
99
- <th>Seat Number</th>
100
- </tr>
101
- {% for schedule in schedules %}
102
- <tr>
103
- <td>{{schedule.student_name}}</td>
104
- <td>{{schedule.student_id}}</td>
105
- <td>{{schedule.exam_date}}</td>
106
- <td>{{schedule.room_number}}</td>
107
- <td>{{schedule.subject_name}}</td>
108
- <td>{{schedule.subject_code}}</td>
109
- <td>{{schedule.seat_Number}}</td>
110
- </tr>
111
- {% endfor %}
112
- </table>
113
-
114
- {% endif %}
115
-
116
- {% if message %}
117
- <p>{{ message }}</p>
118
- {% endif %}
119
-
120
-
121
-
122
-
123
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
124
  </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>Exam Schedule Viewer</title>
7
+ <style>
8
+ :root {
9
+ --primary-color: #3498db;
10
+ --secondary-color: #2980b9;
11
+ --accent-color: #e74c3c;
12
+ --text-color: #333;
13
+ --bg-color: #f5f7fa;
14
+ --card-bg: #ffffff;
15
+ --border-radius: 8px;
16
+ --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ body {
26
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
27
+ background-color: var(--bg-color);
28
+ color: var(--text-color);
29
+ line-height: 1.6;
30
+ padding: 0;
31
+ margin: 0;
32
+ }
33
+
34
+ .container {
35
+ max-width: 1200px;
36
+ margin: 0 auto;
37
+ padding: 20px;
38
+ }
39
+
40
+ header {
41
+ background-color: var(--primary-color);
42
+ color: white;
43
+ padding: 20px 0;
44
+ margin-bottom: 30px;
45
+ text-align: center;
46
+ box-shadow: var(--box-shadow);
47
+ }
48
+
49
+ h1 {
50
+ font-size: 2.2rem;
51
+ margin-bottom: 10px;
52
+ }
53
+
54
+ .subtitle {
55
+ font-size: 1rem;
56
+ opacity: 0.9;
57
+ }
58
+
59
+ .card {
60
+ background-color: var(--card-bg);
61
+ border-radius: var(--border-radius);
62
+ box-shadow: var(--box-shadow);
63
+ padding: 25px;
64
+ margin-bottom: 30px;
65
+ }
66
+
67
+ .form-group {
68
+ margin-bottom: 20px;
69
+ }
70
+
71
+ label {
72
+ display: block;
73
+ margin-bottom: 8px;
74
+ font-weight: 600;
75
+ color: var(--text-color);
76
+ }
77
+
78
+ input[type="text"],
79
+ input[type="date"] {
80
+ width: 100%;
81
+ padding: 12px;
82
+ border: 1px solid #ddd;
83
+ border-radius: var(--border-radius);
84
+ font-size: 1rem;
85
+ transition: border-color 0.3s;
86
+ }
87
+
88
+ input[type="text"]:focus,
89
+ input[type="date"]:focus {
90
+ border-color: var(--primary-color);
91
+ outline: none;
92
+ box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
93
+ }
94
+
95
+ .btn {
96
+ background-color: var(--primary-color);
97
+ color: white;
98
+ border: none;
99
+ padding: 12px 24px;
100
+ border-radius: var(--border-radius);
101
+ cursor: pointer;
102
+ font-size: 1rem;
103
+ font-weight: 600;
104
+ transition: background-color 0.3s;
105
+ display: inline-block;
106
+ }
107
+
108
+ .btn:hover {
109
+ background-color: var(--secondary-color);
110
+ }
111
+
112
+ .search-form {
113
+ display: flex;
114
+ flex-direction: column;
115
+ max-width: 500px;
116
+ margin: 0 auto;
117
+ }
118
+
119
+ .form-row {
120
+ display: flex;
121
+ justify-content: space-between;
122
+ gap: 20px;
123
+ margin-bottom: 20px;
124
+ }
125
+
126
+ .form-col {
127
+ flex: 1;
128
+ }
129
+
130
+ .btn-container {
131
+ text-align: center;
132
+ }
133
+
134
+ table {
135
+ width: 100%;
136
+ border-collapse: collapse;
137
+ margin-top: 20px;
138
+ box-shadow: var(--box-shadow);
139
+ border-radius: var(--border-radius);
140
+ overflow: hidden;
141
+ }
142
+
143
+ th, td {
144
+ padding: 15px;
145
+ text-align: left;
146
+ border-bottom: 1px solid #ddd;
147
+ }
148
+
149
+ th {
150
+ background-color: var(--primary-color);
151
+ color: white;
152
+ font-weight: 600;
153
+ }
154
+
155
+ tr:nth-child(even) {
156
+ background-color: rgba(0, 0, 0, 0.02);
157
+ }
158
+
159
+ tr:hover {
160
+ background-color: rgba(52, 152, 219, 0.05);
161
+ }
162
+
163
+ .message {
164
+ padding: 15px;
165
+ background-color: #f8d7da;
166
+ color: #721c24;
167
+ border-radius: var(--border-radius);
168
+ margin-top: 20px;
169
+ text-align: center;
170
+ }
171
+
172
+ .no-results {
173
+ text-align: center;
174
+ margin-top: 30px;
175
+ color: #777;
176
+ }
177
+
178
+ footer {
179
+ text-align: center;
180
+ margin-top: 40px;
181
+ padding: 20px;
182
+ color: #777;
183
+ font-size: 0.9rem;
184
+ }
185
+
186
+ @media screen and (max-width: 768px) {
187
+ .form-row {
188
+ flex-direction: column;
189
+ gap: 10px;
190
+ }
191
+
192
+ th, td {
193
+ padding: 10px;
194
+ font-size: 0.9rem;
195
+ }
196
+
197
+ table {
198
+ display: block;
199
+ overflow-x: auto;
200
+ white-space: nowrap;
201
+ }
202
+ }
203
+ </style>
204
+ </head>
205
+ <body>
206
+ <header>
207
+ <div class="container">
208
+ <h1>Seating Plan Viewer</h1>
209
+ <p class="subtitle">Search and view your examination details</p>
210
+ </div>
211
+ </header>
212
+
213
+ <div class="container">
214
+ <div class="card">
215
+ <form class="search-form" action="{% url 'view_schedule' %}" method="post">
216
+ {% csrf_token %}
217
+ <div class="form-row">
218
+ <div class="form-col">
219
+ <div class="form-group">
220
+ <label for="student_id">Student ID:</label>
221
+ <input type="text" name="student_id" id="student_id" placeholder="Enter your student ID" required>
222
+ </div>
223
+ </div>
224
+ <div class="form-col">
225
+ <div class="form-group">
226
+ <label for="exam_date">Exam Date:</label>
227
+ <input type="date" name="exam_date" id="exam_date" required>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ <div class="btn-container">
232
+ <button type="submit" class="btn">Search Schedule</button>
233
+ </div>
234
+ </form>
235
+ </div>
236
+
237
+ {% if schedules %}
238
+ <div class="card">
239
+ <table>
240
+ <thead>
241
+ <tr>
242
+ <th>Student Name</th>
243
+ <th>Student ID</th>
244
+ <th>Exam Date</th>
245
+ <th>Room Number</th>
246
+ <th>Subject Name</th>
247
+ <th>Subject Code</th>
248
+ <th>Seat Number</th>
249
+ </tr>
250
+ </thead>
251
+ <tbody>
252
+ {% for schedule in schedules %}
253
+ <tr>
254
+ <td>{{schedule.student_name}}</td>
255
+ <td>{{schedule.student_id}}</td>
256
+ <td>{{schedule.exam_date}}</td>
257
+ <td>{{schedule.room_number}}</td>
258
+ <td>{{schedule.subject_name}}</td>
259
+ <td>{{schedule.subject_code}}</td>
260
+ <td>{{schedule.seat_Number}}</td>
261
+ </tr>
262
+ {% endfor %}
263
+ </tbody>
264
+ </table>
265
+ </div>
266
+ {% endif %}
267
+
268
+ {% if message %}
269
+ <div class="message">
270
+ {{ message }}
271
+ </div>
272
+ {% endif %}
273
+
274
+ {% if not schedules and not message %}
275
+ <div class="no-results card">
276
+ <p>Enter your information above to view your exam schedule.</p>
277
+ </div>
278
+ {% endif %}
279
+ </div>
280
+
281
+ <footer>
282
+ <div class="container">
283
+ <p>Exam Scheduling System &copy; 2025</p>
284
+ </div>
285
+ </footer>
286
+ </body>
287
  </html>