Exam_Routine_Generator/index.html at main · No-man1234/Exam_Routine_Generator · 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
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Generate personalized exam routines from Excel files. Upload your exam schedule, filter by courses and sections, and download as image.">
    <meta name="keywords" content="exam routine, schedule generator, excel parser, student tools, academic planner">
    <meta name="author" content="Exam Routine Generator">

    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="Exam Routine Generator">
    <meta property="og:description" content="Generate personalized exam routines from Excel files with smart filtering and dark mode support.">
    <meta property="og:url" content="https://yourusername.github.io/exam-routine-generator">

    <!-- Twitter -->
    <meta property="twitter:card" content="summary">
    <meta property="twitter:title" content="Exam Routine Generator">
    <meta property="twitter:description" content="Generate personalized exam routines from Excel files with smart filtering and dark mode support.">

    <title>Exam Routine Generator - Create Your Personal Exam Schedule</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
</head>
<body>
    <div class="container">
        <!-- Header -->
        <div class="header">
            <button class="theme-toggle" id="themeToggle" aria-label="Toggle dark mode">
                🌙
            </button>
            <h1>Exam Routine Generator</h1>
            <p>Upload your Excel file and generate a personalized exam routine</p>
            <div class="current-date" id="currentDate"></div>
        </div>

        <!-- Upload Section -->
        <div class="upload-section">
            <div class="upload-area" id="uploadArea">
                <div class="upload-icon">📁</div>
                <h3>Upload Excel File</h3>
                <p>Drag and drop your exam schedule Excel file here or click to browse</p>
                <input type="file" id="fileInput" class="file-input" accept=".xlsx,.xls">
                <button class="browse-btn" type="button">
                    Browse Files
                </button>
            </div>
        </div>

        <!-- Loading -->
        <div class="loading" id="loading">
            Processing your file...
        </div>

        <!-- Filters Section -->
        <div class="filters-section" id="filtersSection">
            <div class="filters-grid">
                <div class="filter-group">
                    <h3>Department</h3>
                    <div class="form-group">
                        <label for="deptSelect">Select Department:</label>
                        <select id="deptSelect">
                            <option value="">All Departments</option>
                        </select>
                    </div>
                </div>

                <div class="filter-group">
                    <h3>Courses</h3>
                    <div class="form-group">
                        <label for="courseInput">Search Courses:</label>
                        <div class="autocomplete-container">
                            <input type="text" id="courseInput" placeholder="Type course code or name..." autocomplete="off">
                            <div class="suggestions" id="courseSuggestions"></div>
                        </div>
                    </div>

                    <!-- Section Selection for Course -->
                    <div class="section-dropdown" id="sectionDropdown">
                        <label for="availableSections">Select Sections:</label>
                        <select id="availableSections" size="4">
                        </select>
                        <button type="button" class="add-sections-btn" onclick="addSelectedSections()">
                            ➕ Add Selected Sections
                        </button>
                    </div>

                    <div class="selected-items" id="selectedCourses">
                        <div class="selected-label">Selected Courses & Sections:</div>
                    </div>
                </div>

                <div class="filter-group" id="sectionAutocomplete">
                    <h3>Sections</h3>
                    <div class="form-group">
                        <label for="sectionInput">Search Sections:</label>
                        <div class="autocomplete-container">
                            <input type="text" id="sectionInput" placeholder="Type section..." autocomplete="off">
                            <div class="suggestions" id="sectionSuggestions"></div>
                        </div>
                    </div>

                    <div class="selected-items" id="selectedSections">
                        <div class="selected-label">All Selected Sections:</div>
                    </div>
                </div>
            </div>

            <button class="generate-btn" onclick="generateRoutine()">
                Generate My Routine
            </button>
        </div>

        <!-- Routine Section -->
        <div class="routine-section" id="routineSection">
            <div class="routine-container" id="routineContainer">
                <div class="routine-header">
                    <h2 class="routine-title" id="routineTitle">Your Exam Routine</h2>
                    <p class="routine-subtitle">Generated on <span id="currentDate"></span></p>
                </div>

                <div class="table-container">
                    <table class="routine-table">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Time</th>
                                <th>Course Code</th>
                                <th>Course Title</th>
                                <th>Section</th>
                                <th>Teacher</th>
                                <th>Room</th>
                            </tr>
                        </thead>
                        <tbody id="routineBody">
                        </tbody>
                    </table>
                </div>

                <button class="download-btn" id="downloadBtn" onclick="downloadRoutine()">
                    📷 Download as Image
                </button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="footer-content">
            <div class="footer-section">
                <h4>📅 Exam Routine Generator</h4>
                <p>Create personalized exam schedules from Excel files with ease.</p>
                <div class="footer-stats">
                    <span class="visit-counter">
                        <img src="https://api.visitorbadge.io/api/visitors?path=No-man1234-Exam_Routine_Generator&label=Site%20Visits&countColor=%23263759" style="vertical-align: middle; height: 24px;" />
                    </span>
                </div>
            </div>

            <div class="footer-section">
                <h4>✨ Features</h4>
                <ul>
                    <li>📁 Excel File Support</li>
                    <li>🌙 Dark Mode Toggle</li>
                    <li>📱 Mobile Responsive</li>
                    <li>📷 Image Export</li>
                    <li>🔍 Smart Search</li>
                </ul>
            </div>

            <div class="footer-section">
                <h4>🔗 Quick Links</h4>
                <ul>
                    <li><a href="#" onclick="scrollToTop()">🔝 Back to Top</a></li>
                    <li><a href="https://github.com/No-man1234/Exam_Routine_Generator" target="_blank" rel="noopener">📁 Source Code</a></li>
                    <li><a href="#" onclick="showHelp()">❓ Help & Support</a></li>
                    <li><a href="#" onclick="showAbout()">ℹ️ About</a></li>
                </ul>
            </div>

            <div class="footer-section">
                <h4>🛠️ Tech Stack</h4>
                <div class="tech-badges">
                    <span class="tech-badge">HTML5</span>
                    <span class="tech-badge">CSS3</span>
                    <span class="tech-badge">JavaScript</span>
                    <span class="tech-badge">SheetJS</span>
                </div>
            </div>
        </div>

        <div class="footer-bottom">
            <div class="footer-bottom-content">
                <p>&copy; 2025 Exam Routine Generator. Made with 💻 and ☕</p>
                <div class="footer-links">
                    <span class="last-updated">Last updated: <span id="lastUpdated">July 2025</span></span>
                    <span>|</span>
                    <span>⚡ Powered by GitHub Pages</span>
                </div>
            </div>
        </div>
    </footer>

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