-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhackathons.html
More file actions
412 lines (385 loc) · 28.1 KB
/
Copy pathhackathons.html
File metadata and controls
412 lines (385 loc) · 28.1 KB
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Belgium Campus iTversity - Hackathons</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/navigation.css">
<link rel="stylesheet" href="css/components.css">
<link rel="stylesheet" href="css/pages.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animations.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<div class="nav-logo">
<h2><i class="fas fa-graduation-cap"></i> Belgium Campus iTversity</h2>
</div>
<ul class="nav-menu">
<li class="nav-item">
<a href="index.html" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="hackathons.html" class="nav-link active">Hackathons</a>
</li>
<li class="nav-item">
<a href="student-portal.html" class="nav-link" id="student-portal-link">Student Portal</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</nav>
<!-- Hackathons Page -->
<section id="hackathons" class="page active">
<div class="container">
<h1>Hackathons</h1>
<div class="tabs">
<button class="tab-btn active" onclick="showTab('upcoming')">Upcoming</button>
<button class="tab-btn" onclick="showTab('past')">Past</button>
</div>
<div id="upcoming" class="tab-content active">
<h2>Upcoming Hackathons</h2>
<div class="hackathons-grid" id="upcoming-hackathons">
<!-- Hackathon cards will be populated by JavaScript -->
</div>
</div>
<div id="past" class="tab-content">
<h2>Past Hackathons</h2>
<div class="hackathons-grid" id="past-hackathons">
<!-- Past hackathons will be populated by JavaScript -->
</div>
</div>
</div>
</section>
<!-- Hackathon Details Section -->
<section id="hackathon-details" class="page">
<div class="container">
<h1>Hackathon Details</h1>
<table class="hackathon-details-table" style="width: 100%; max-width: 1000px; margin: 0 auto; border-collapse: separate; border-spacing: 1rem; background-color: #ffffff; padding: 2rem; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.15);">
<tr>
<td style="width: 50%; vertical-align: top; padding: 1.5rem; border: 2px solid #ffd700; background-color: #ffffff; border-radius: 10px; min-height: 200px;">
<h3 style="color: #333; font-weight: bold; border-bottom: 2px solid #ffd700; padding-bottom: 0.5rem; margin-bottom: 1rem;">Event Overview</h3>
<p>Hackathon hosted at the Stellenbosch campus. See complete schedule, rules, prizes, and project ideas below.</p>
<p><strong>Theme: Applied tech build with hands-on project development</strong></p>
</td>
<td style="width: 50%; vertical-align: top; padding: 1.5rem; border: 2px solid #ffd700; background-color: #ffffff; border-radius: 10px; min-height: 200px;">
<h3 style="color: #333; font-weight: bold; border-bottom: 2px solid #ffd700; padding-bottom: 0.5rem; margin-bottom: 1rem;">Key Information</h3>
<ul style="list-style: none; padding: 0;">
<li style="margin-bottom: 0.75rem; display: flex; align-items: flex-start;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.2rem;">▶</span>
<span><strong>Date:</strong> 11 October 2025</span>
</li>
<li style="margin-bottom: 0.75rem; display: flex; align-items: flex-start;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.2rem;">▶</span>
<span><strong>Time:</strong> 08:00 – 20:00 (12 hours)</span>
</li>
<li style="margin-bottom: 0.75rem; display: flex; align-items: flex-start;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.2rem;">▶</span>
<span><strong>Venue:</strong> Belgium Campus — Stellenbosch campus</span>
</li>
<li style="margin-bottom: 0.75rem; display: flex; align-items: flex-start;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.2rem;">▶</span>
<span><strong>Eligibility:</strong> Only Stellenbosch students</span>
</li>
<li style="margin-bottom: 0.75rem; display: flex; align-items: flex-start;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.2rem;">▶</span>
<span><strong>Format:</strong> Teams of 3</span>
</li>
</ul>
</td>
</tr>
<tr>
<td style="width: 50%; vertical-align: top; padding: 1.5rem; border: 2px solid #ffd700; background-color: #ffffff; border-radius: 10px; min-height: 200px;">
<h3 style="color: #333; font-weight: bold; border-bottom: 2px solid #ffd700; padding-bottom: 0.5rem; margin-bottom: 1rem;">Rules & Guidelines</h3>
<ul>
<li>Teams of 3.</li>
<li>AI may not be used.</li>
<li>Moderators will ensure fair play.</li>
<li>Technolab resources may be used.</li>
</ul>
</td>
<td style="width: 50%; vertical-align: top; padding: 1.5rem; border: 2px solid #ffd700; background-color: #ffffff; border-radius: 10px; min-height: 200px;">
<h3 style="color: #333; font-weight: bold; border-bottom: 2px solid #ffd700; padding-bottom: 0.5rem; margin-bottom: 1rem;">Prizes & Awards</h3>
<ul>
<li><strong>1st Place:</strong> Top project prize</li>
<li><strong>2nd Place:</strong> Second place prize</li>
<li><strong>3rd Place:</strong> Third place prize</li>
<li><strong>Recognition:</strong> All participants receive certificates</li>
</ul>
</td>
</tr>
</table>
<!-- Schedule Section -->
<div style="margin-top: 2rem; padding: 1.5rem; background-color: #ffffff; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); border: 2px solid #ffd700;">
<h3 style="text-align: center; color: #ffd700; font-weight: bold; margin-bottom: 1.5rem; font-size: 1.5rem;">Detailed Schedule</h3>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; padding: 0 1rem;">
<div style="background-color: #f8f9fa; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #ffd700;">
<h4 style="color: #333; font-weight: bold; border-bottom: 2px solid #ffd700; padding-bottom: 0.5rem; margin-bottom: 1rem; font-size: 1.1rem;">Morning Session</h4>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>08:00 – 08:10:</strong> Welcoming</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>08:10 – 08:40:</strong> Topic explanation & idealization (Explaining idealization, giving examples)</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>08:40 – 08:50:</strong> Team selection</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>08:50 – 09:30:</strong> Work on project (Preferably planning)</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>09:30 – 10:00:</strong> VR presentation (Either Philip/Nick can hopefully present)</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>10:00 – 11:00:</strong> IoT Arduino explanation</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>11:00 – 12:30:</strong> Development time</span>
</li>
</ul>
</div>
<div style="background-color: #f8f9fa; padding: 1.5rem; border-radius: 10px; border-left: 4px solid #ffd700;">
<h4 style="color: #333; font-weight: bold; border-bottom: 2px solid #ffd700; padding-bottom: 0.5rem; margin-bottom: 1rem; font-size: 1.1rem;">Afternoon Session</h4>
<ul style="list-style: none; padding: 0; margin: 0;">
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>12:30 – 13:30:</strong> Lunch break</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>13:30 – 14:00:</strong> Presentation on Drones (Provided by Philip or Nick ideally)</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>14:00 – 16:00:</strong> Development time</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>16:00 – 16:30:</strong> Implementation phase</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>16:30 – 19:30:</strong> Final implementation</span>
</li>
<li style="margin-bottom: 0.6rem; display: flex; align-items: flex-start; padding: 0.3rem 0;">
<span style="color: #ffd700; margin-right: 0.5rem; margin-top: 0.1rem; font-size: 0.9rem;">▶</span>
<span style="line-height: 1.4;"><strong>19:30 – 20:00:</strong> Presentations; prizes and winners announced</span>
</li>
</ul>
</div>
</div>
</div>
<!-- Available Technologies & Resources Section -->
<div style="margin-top: 2rem; padding: 2rem; background-color: #ffffff; border-radius: 15px; box-shadow: 0 8px 25px rgba(0,0,0,0.15); border: 2px solid #ffd700;">
<h3 style="text-align: center; color: #ffd700; font-weight: bold; margin-bottom: 1rem;">Available Technologies & Resources</h3>
<p style="text-align: center; margin-bottom: 2rem; color: #666;">Students will have access to cutting-edge technologies and tools to bring their innovative ideas to life:</p>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;">
<!-- Left Column -->
<div>
<!-- IoT & Hardware Development -->
<div style="margin-bottom: 2rem; padding: 1.5rem; background-color: #f8f9fa; border-radius: 10px; border-left: 4px solid #ffd700;">
<h4 style="color: #333; font-weight: bold; margin-bottom: 1rem;">🤖 IoT & Hardware Development</h4>
<ul style="list-style: none; padding: 0;">
<li style="margin-bottom: 0.5rem;"><strong>Arduino Boards:</strong> Various Arduino models for sensor integration and automation</li>
<li style="margin-bottom: 0.5rem;"><strong>Raspberry Pi:</strong> Single-board computers for complex IoT solutions</li>
<li style="margin-bottom: 0.5rem;"><strong>Sensors:</strong> Motion, temperature, humidity, light, and proximity sensors</li>
<li style="margin-bottom: 0.5rem;"><strong>Actuators:</strong> Motors, servos, relays, and LED systems</li>
<li style="margin-bottom: 0.5rem;"><strong>Prototyping Kits:</strong> Breadboards, jumper wires, and electronic components</li>
</ul>
</div>
<!-- Drone Technology -->
<div style="margin-bottom: 2rem; padding: 1.5rem; background-color: #f8f9fa; border-radius: 10px; border-left: 4px solid #ffd700;">
<h4 style="color: #333; font-weight: bold; margin-bottom: 1rem;">🚁 Drone Technology</h4>
<ul style="list-style: none; padding: 0;">
<li style="margin-bottom: 0.5rem;"><strong>Drone Kits:</strong> Build and program custom drone solutions</li>
<li style="margin-bottom: 0.5rem;"><strong>Flight Controllers:</strong> Advanced control systems for autonomous flight</li>
<li style="margin-bottom: 0.5rem;"><strong>Camera Systems:</strong> HD cameras for aerial imaging and computer vision</li>
<li style="margin-bottom: 0.5rem;"><strong>GPS Modules:</strong> Navigation and positioning systems</li>
</ul>
</div>
</div>
<!-- Right Column -->
<div>
<!-- 3D Printing & Manufacturing -->
<div style="margin-bottom: 2rem; padding: 1.5rem; background-color: #f8f9fa; border-radius: 10px; border-left: 4px solid #ffd700;">
<h4 style="color: #333; font-weight: bold; margin-bottom: 1rem;">🖨️ 3D Printing & Manufacturing</h4>
<ul style="list-style: none; padding: 0;">
<li style="margin-bottom: 0.5rem;"><strong>3D Printers:</strong> FDM and resin printers for rapid prototyping</li>
<li style="margin-bottom: 0.5rem;"><strong>Laser Cutters:</strong> Precision cutting for custom enclosures and parts</li>
<li style="margin-bottom: 0.5rem;"><strong>CAD Software:</strong> Design tools for 3D modeling and engineering</li>
<li style="margin-bottom: 0.5rem;"><strong>Materials:</strong> Various filaments, resins, and cutting materials</li>
</ul>
</div>
<!-- VR & Augmented Reality -->
<div style="margin-bottom: 2rem; padding: 1.5rem; background-color: #f8f9fa; border-radius: 10px; border-left: 4px solid #ffd700;">
<h4 style="color: #333; font-weight: bold; margin-bottom: 1rem;">🎮 VR & Augmented Reality</h4>
<ul style="list-style: none; padding: 0;">
<li style="margin-bottom: 0.5rem;"><strong>VR Headsets:</strong> Immersive virtual reality experiences</li>
<li style="margin-bottom: 0.5rem;"><strong>AR Development Kits:</strong> Augmented reality application development</li>
<li style="margin-bottom: 0.5rem;"><strong>Motion Controllers:</strong> Interactive input devices for VR/AR</li>
<li style="margin-bottom: 0.5rem;"><strong>Development Platforms:</strong> Unity, Unreal Engine, and AR frameworks</li>
</ul>
</div>
<!-- Software & Development -->
<div style="margin-bottom: 2rem; padding: 1.5rem; background-color: #f8f9fa; border-radius: 10px; border-left: 4px solid #ffd700;">
<h4 style="color: #333; font-weight: bold; margin-bottom: 1rem;">💻 Software & Development</h4>
<ul style="list-style: none; padding: 0;">
<li style="margin-bottom: 0.5rem;"><strong>Programming Languages:</strong> Python, C++, JavaScript, and more</li>
<li style="margin-bottom: 0.5rem;"><strong>AI/ML Libraries:</strong> TensorFlow, PyTorch, and computer vision tools</li>
<li style="margin-bottom: 0.5rem;"><strong>Cloud Services:</strong> AWS, Azure, and Google Cloud integration</li>
<li style="margin-bottom: 0.5rem;"><strong>Mobile Development:</strong> Android and iOS app development tools</li>
</ul>
</div>
</div>
</div>
</div>
<div class="text-center" style="margin-top: 2rem;">
<button class="btn btn-secondary" onclick="showHackathonsList()">
<i class="fas fa-arrow-left"></i> Back to Hackathons List
</button>
</div>
</div>
</section>
<!-- Second Hackathon Details Section -->
<section id="hackathon-details-senses" class="page">
<div class="container" style="max-width: 1100px;">
<h1>Hackathon 2026 Details</h1>
<div style="background: #ffffff; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.12); border: 2px solid #ffd700; padding: 1.5rem; margin-bottom: 1.5rem;">
<p style="text-transform: uppercase; letter-spacing: 0.18em; color: #b28b00; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem;">Dedicated detail view</p>
<h2 style="margin-top: 0; color: #1f2937;">Theme: Senses</h2>
<p style="color: #374151; line-height: 1.6;">Students choose a sense (taste, sight, hearing, smell, touch) and must build a project that triggers a real action once that sense is used. This could include making a sound to make a drone fly to that sound, looking in a certain direction to make a drone fly that way, touching a spot on the body to make a drone fly there, or touching a button in VR to light up a real LED.</p>
</div>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem;">
<article style="background: #fffdf7; border: 1px solid #f2e08c; border-radius: 14px; padding: 1rem;"> <h3 style="margin-top: 0; color: #1f2937;">AI Use</h3><p style="margin: 0; color: #374151;">Scheduled timeslots for when AI is allowed to be used for research purposes only. Outside these slots, AI is not allowed.</p></article>
<article style="background: #fffdf7; border: 1px solid #f2e08c; border-radius: 14px; padding: 1rem;"> <h3 style="margin-top: 0; color: #1f2937;">Date and Time</h3><p style="margin: 0; color: #374151;">11th July 2026 (Saturday) – 12th July 2026<br>08:00 – 08:00 (24 hour)<br>Students can leave when they want to.</p></article>
<article style="background: #fffdf7; border: 1px solid #f2e08c; border-radius: 14px; padding: 1rem;"> <h3 style="margin-top: 0; color: #1f2937;">Prizing</h3><p style="margin: 0; color: #374151;">To be announced</p></article>
<article style="background: #fffdf7; border: 1px solid #f2e08c; border-radius: 14px; padding: 1rem;"> <h3 style="margin-top: 0; color: #1f2937;">Schedule</h3><p style="margin: 0; color: #374151;">To be announced</p></article>
</div>
<div class="text-center" style="margin-top: 2rem;">
<button class="btn btn-secondary" onclick="showHackathonsList()"><i class="fas fa-arrow-left"></i> Back to Hackathons List</button>
</div>
</div>
</section>
<!-- Footer -->
<footer class="site-footer">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<h3><i class="fas fa-graduation-cap"></i> Belgium Campus iTversity</h3>
<p>Building innovation and collaboration through hackathons.</p>
</div>
<div class="footer-links">
<h4>Explore</h4>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="hackathons.html">Hackathons</a></li>
<li><a href="pages/student-portal-standalone.html">Student Portal</a></li>
</ul>
</div>
<div class="footer-contact">
<h4>Contact</h4>
<p>Email: 601681@student.belgiumcampus.ac.za</p>
<p>© <span id="year"></span> Belgium Campus iTversity</p>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<script src="js/data.js"></script>
<script src="js/navigation.js"></script>
<script src="js/hackathons.js"></script>
<script src="js/main.js"></script>
<script>
// Set current year
document.getElementById('year').textContent = new Date().getFullYear();
// Session management and navigation updates
function checkUserSession() {
const currentUser = JSON.parse(localStorage.getItem('currentUser') || 'null');
const studentPortalLink = document.getElementById('student-portal-link');
if (currentUser && currentUser.email) {
// User is logged in - update navigation
studentPortalLink.innerHTML = `
<i class="fas fa-user"></i> ${currentUser.name || currentUser.email}
`;
studentPortalLink.href = 'dashboard.html';
// Add logout option to navigation
const navMenu = document.querySelector('.nav-menu');
if (!document.getElementById('logout-nav-item')) {
const logoutItem = document.createElement('li');
logoutItem.className = 'nav-item';
logoutItem.id = 'logout-nav-item';
logoutItem.innerHTML = `
<a href="#" class="nav-link" onclick="logout()" style="color: #dc3545;">
<i class="fas fa-sign-out-alt"></i> Logout
</a>
`;
navMenu.appendChild(logoutItem);
}
} else {
// User is not logged in - show student portal link
studentPortalLink.innerHTML = '<i class="fas fa-user-graduate"></i> Student Portal';
studentPortalLink.href = 'student-portal.html';
// Remove logout option if it exists
const logoutItem = document.getElementById('logout-nav-item');
if (logoutItem) {
logoutItem.remove();
}
}
}
function logout() {
if (confirm('Are you sure you want to log out?')) {
localStorage.removeItem('currentUser');
showNotification('You have been logged out successfully.', 'success');
setTimeout(() => {
window.location.reload();
}, 1000);
}
}
function showNotification(message, type = 'info') {
const notification = document.createElement('div');
notification.className = `notification ${type}`;
notification.textContent = message;
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 1rem 1.5rem;
border-radius: 8px;
color: white;
font-weight: 600;
z-index: 10000;
opacity: 0;
transform: translateX(100%);
transition: all 0.3s ease;
background: ${type === 'success' ? '#28a745' : type === 'error' ? '#dc3545' : '#17a2b8'};
`;
document.body.appendChild(notification);
setTimeout(() => notification.classList.add('show'), 100);
setTimeout(() => {
notification.classList.remove('show');
setTimeout(() => notification.remove(), 300);
}, 3000);
}
// Check session when page loads
document.addEventListener('DOMContentLoaded', function() {
checkUserSession();
});
</script>
</body>
</html>