bracourse/index.html at main · dwmk/bracourse · 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
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
<!DOCTYPE html>
<html lang="en" class="light" id="theme">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bracourse</title>
    <meta name="description" content="Search engine for information about courses, faculties, seats, schedules, etc. for BRAC University.">
    <meta name="keywords" content="bracu course search, bracu unlocked, usis unlocked, connect unlocked, bracu connect, usis eniamza, preprereg eniamza">
    <meta name="author" content="Stoobid">
    <meta name="robots" content="index, follow">
    <meta property="og:title" content="Bracourse. Courses + Routine Checker">
    <meta property="og:description" content="Search engine for information about courses, faculties, seats, schedules, etc. for BRAC University.">
    <meta property="og:image" content="ogimage.png">
    <meta property="og:url" content="https://bracourse.mux8.com">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="en_US">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@ditilrocks">
    <meta name="twitter:title" content="Bracourse">
    <meta name="twitter:description" content="Search engine for information about courses, faculties, seats, schedules, etc. for BRAC University.">
    <meta name="twitter:image" content="ogimage.png">
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.png" type="image/png">
    <link rel="stylesheet" href="styles.css">
    <link rel="apple-touch-icon" href="favicon.png">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        // Theme toggle logic
        document.addEventListener('DOMContentLoaded', () => {
            const themeToggle = document.getElementById('theme-toggle');
            const html = document.documentElement;
            const currentTheme = localStorage.getItem('theme') || 'light';
            html.classList.add(currentTheme);
            themeToggle.innerHTML = currentTheme === 'light' ? '🌙' : '☀️';

            themeToggle.addEventListener('click', () => {
                if (html.classList.contains('light')) {
                    html.classList.remove('light');
                    html.classList.add('dark');
                    localStorage.setItem('theme', 'dark');
                    themeToggle.innerHTML = '☀️';
                } else {
                    html.classList.remove('dark');
                    html.classList.add('light');
                    localStorage.setItem('theme', 'light');
                    themeToggle.innerHTML = '🌙';
                }
            });
        });
    </script>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3SEBXPJ4E"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-Q3SEBXPJ4E');
</script>

</head>
<body class="font-sans bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen flex flex-col">
    <!-- Header -->
<header class="sticky top-0 z-[1000] bg-white/80 dark:bg-gray-800/80 backdrop-blur-md shadow-lg rounded-b-3xl">
  <nav class="container mx-auto px-4 py-3 flex items-center justify-between">
    <h1 class="text-xl font-semibold">Bracourse.</h1>
    <div class="flex items-center space-x-4">
      <button id="theme-toggle" class="text-2xl focus:outline-none" aria-label="Toggle theme">🌙</button>
      <button id="toggle-cart" class="text-2xl focus:outline-none" aria-label="Toggle cart">🛒</button>
    </div>
  </nav>
</header>

    <!-- Main Content -->
    <main class="container mx-auto px-4 py-8 flex-1">
        <!-- Search and Filters -->
        <section class="mb-8">
            <div class="flex flex-col sm:flex-row gap-4">
                <input type="text" id="search" placeholder="Search by course code (e.g., CSE) or faculty (e.g., FHZ)" oninput="filterCourses()" class="flex-1 p-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent" aria-label="Search courses">
                <select id="department-filter" class="p-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100" aria-label="Filter by department">
                    <option value="">All Departments</option>
                    <!-- Populate dynamically if needed -->
                </select>
            </div>
        </section>

        <!-- Course List -->
        <section class="mb-8">
            <p id="loadingMessage" class="text-center text-gray-600 dark:text-gray-400">Loading courses...</p>
            <div id="courseList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Courses populated by JS -->
            </div>
        </section>

        <!-- Routine Table -->
        <section class="mb-8">
    <table id="data_table" class="w-full border-collapse bg-white dark:bg-gray-800 rounded-lg shadow-md">
        <thead>
            <tr class="bg-gray-200 dark:bg-gray-700">
                <th class="p-3 text-left font-semibold">Time/Day</th>
                <th class="p-3 text-left font-semibold">Sunday</th>
                <th class="p-3 text-left font-semibold">Monday</th>
                <th class="p-3 text-left font-semibold">Tuesday</th>
                <th class="p-3 text-left font-semibold">Wednesday</th>
                <th class="p-3 text-left font-semibold">Thursday</th>
                <th class="p-3 text-left font-semibold">Friday</th>
                <th class="p-3 text-left font-semibold">Saturday</th>
            </tr>
        </thead>
        <tbody>
            <tr id="row1">
                <td class="p-3 font-medium">08:00 AM-09:20 AM</td>
                <td id="1-1"></td><td id="1-2"></td><td id="1-3"></td><td id="1-4"></td><td id="1-5"></td><td id="1-6"></td><td id="1-7"></td>
            </tr>
            <tr id="row2">
                <td class="p-3 font-medium">09:30 AM-10:50 AM</td>
                <td id="2-1"></td><td id="2-2"></td><td id="2-3"></td><td id="2-4"></td><td id="2-5"></td><td id="2-6"></td><td id="2-7"></td>
            </tr>
            <tr id="row3">
                <td class="p-3 font-medium">11:00 AM-12:20 PM</td>
                <td id="3-1"></td><td id="3-2"></td><td id="3-3"></td><td id="3-4"></td><td id="3-5"></td><td id="3-6"></td><td id="3-7"></td>
            </tr>
            <tr id="row4">
                <td class="p-3 font-medium">12:30 PM-01:50 PM</td>
                <td id="4-1"></td><td id="4-2"></td><td id="4-3"></td><td id="4-4"></td><td id="4-5"></td><td id="4-6"></td><td id="4-7"></td>
            </tr>
            <tr id="row5">
                <td class="p-3 font-medium">02:00 PM-03:20 PM</td>
                <td id="5-1"></td><td id="5-2"></td><td id="5-3"></td><td id="5-4"></td><td id="5-5"></td><td id="5-6"></td><td id="5-7"></td>
            </tr>
            <tr id="row6">
                <td class="p-3 font-medium">03:30 PM-04:50 PM</td>
                <td id="6-1"></td><td id="6-2"></td><td id="6-3"></td><td id="6-4"></td><td id="6-5"></td><td id="6-6"></td><td id="6-7"></td>
            </tr>
            <tr id="row7">
                <td class="p-3 font-medium">05:00 PM-06:20 PM</td>
                <td id="7-1"></td><td id="7-2"></td><td id="7-3"></td><td id="7-4"></td><td id="7-5"></td><td id="7-6"></td><td id="7-7"></td>
            </tr>
        </tbody>
    </table>
</section>
    </main>

<!-- Cart Overlay -->
<div id="cart" class="fixed bottom-4 right-4 z-50 hidden">
    <ul id="cart-items" class="space-y-3"></ul>
    <button id="clear-cart" class="mx-auto mt-3 w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center hover:bg-red-600 transition-colors hidden" aria-label="Clear all courses">✖</button>
</div>

    <!-- Footer -->
    <footer class="bg-gray-200 dark:bg-gray-800 py-4 mt-auto">
        <div class="container mx-auto px-4 text-center text-gray-600 dark:text-gray-400">
            <p>Made by <a href="https://dewanmukto.github.io/" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline">Dewan Mukto</a></p>
            <p>Data from <a href="https://connect.eniamza.com/" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline">USIS Unlocked</a> by <a href="https://eniamza.com/" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline">Tashfeen Azmaine</a></p>
            <p>Routine table from <a href="https://preprereg.vercel.app/" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline">PrePreReg</a> by <a href="https://eniac00.github.io/terminal-portfolio/" target="_blank" class="text-blue-600 dark:text-blue-400 hover:underline">Abir Ahammed Bhuiyan</a></p>
        </div>
    </footer>

    <script src="script.js"></script>

</body>
</html>