Edu-Hub/studenthome.html at master · smartclassorg/Edu-Hub · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EduHub - Student</title>
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&family=Open+Sans:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles-stu-home.css">
</head>
<body>
    <header class="header">
        <div class="logo" style="font-weight: 800;">EduHub</div>
        <div class="user-profile">
            <div class="avatar"></div>
            <div>
                <div style="font-weight: bold;">Alex Chen</div>
                <div style="font-size: 0.8rem;" class="user-role">Student</div>
            </div>
        </div>
    </header>

    <label class="dark-mode-switch">
        <input type="checkbox" id="darkModeToggle">
        <span class="slider"></span>
        <i class="fas fa-moon"></i>
    </label>

    <section class="hero" id="home">
        <div class="container">
            <h1 class="fade-in-up">Welcome Alex Chen! 🌟</h1>
            <p class="fade-in-up">Your comprehensive learning platform designed to streamline education management and enhance the learning experience for Students.</p>
        </div>
    </section>

        <section class="main-nav">
                <div class="container">
        <script>
            // Dark mode toggle functionality
            document.addEventListener('DOMContentLoaded', function() {
                const darkModeToggle = document.getElementById('darkModeToggle');
                const body = document.body;
                // Set initial state from localStorage
                if (localStorage.getItem('darkMode') === 'enabled') {
                    body.classList.add('dark-mode');
                    darkModeToggle.checked = true;
                }
                darkModeToggle.addEventListener('change', function() {
                    if (darkModeToggle.checked) {
                        body.classList.add('dark-mode');
                        localStorage.setItem('darkMode', 'enabled');
                    } else {
                        body.classList.remove('dark-mode');
                        localStorage.setItem('darkMode', 'disabled');
                    }
                });
            });
        </script>
            <div class="nav-grid">
                <div class="nav-card fade-in-up" onclick="handleNavigation('timetable')">
                    <div class="icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <h3>TIMETABLE</h3>
                    <p>Access your personalized class schedule, view upcoming sessions, and manage your academic calendar efficiently.</p>
                    <button class="btn">View Timetable</button>
                </div>

                <div class="nav-card fade-in-up" onclick="handleNavigation('attendance')">
                    <div class="icon">
                        <i class="fas fa-user-check"></i>
                    </div>
                    <h3>ATTENDANCE</h3>
                    <p>Track your attendance records, view attendance statistics, and stay updated on your participation status.</p>
                    <button class="btn">Check Attendance</button>
                </div>

                <div class="nav-card fade-in-up" onclick="handleNavigation('smartboard')">
                    <div class="icon">
                        <i class="fas fa-chalkboard-teacher"></i>
                    </div>
                    <h3>SMART BOARD SESSIONS</h3>
                    <p>Join interactive smart board sessions, access recorded lessons, and participate in collaborative learning experiences.</p>
                    <button class="btn">Join Sessions</button>
                </div>
            </div>
        </div>
    </section>

    <script src="script-stu-home.js"></script>
</body>
</html>