Timely/index.html at main · gowtham2thrive/Timely · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Intelligent Time Table Generator</title>
    <link rel="icon" href="./Timely.webp" type="image/webp">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/pdf-lib@1.17.1/dist/pdf-lib.min.js"></script>
</head>
<body>
    <div class="app-container">
        <div class="control-panel">
            <header class="app-header">
                <div class="app-title">
                    <h1>Timely</h1>
                    <span>-by Gowtham Kondapalli</span>
                </div>
                <div class="header-controls">
                    <button id="theme-toggle" class="icon-btn">
                        <span class="material-symbols-outlined sun-icon">light_mode</span>
                        <span class="material-symbols-outlined moon-icon">dark_mode</span>
                    </button>
                    <button id="clear-all-btn" class="danger-btn">
                        <span class="material-symbols-outlined">delete_sweep</span>
                        Clear All
                    </button>
                </div>
            </header>

            <div class="config-section">
                <h2><span class="material-symbols-outlined">tune</span>Configuration</h2>
                <div class="slider-group">
                    <label for="periods-per-day">Periods per Day: <span id="periods-per-day-value">8</span></label>
                    <input type="range" id="periods-per-day" min="1" max="12" value="8">
                </div>
                <div class="slider-group">
                    <label for="start-time">Start Time: <span id="start-time-value">9:00 AM</span></label>
                    <input type="range" id="start-time" min="0" max="16" value="8">
                </div>
                <div class="slider-group">
                    <label for="period-duration">Period Duration (mins): <span id="period-duration-value">45</span></label>
                    <input type="range" id="period-duration" min="30" max="90" value="45">
                </div>
                 <div class="slider-group">
                    <label for="lunch-break-at">Lunch Break After Period: <span id="lunch-break-at-value">4</span></label>
                    <input type="range" id="lunch-break-at" min="0" max="12" value="4">
                </div>
                <hr class="config-divider">
                <div class="slider-group">
                    <label for="max-subjects-per-day">Max Subjects/Day (per subject): <span id="max-subjects-per-day-value">2</span></label>
                    <input type="range" id="max-subjects-per-day" min="1" max="5" value="2">
                </div>
                <div class="slider-group">
                    <label for="max-labs-per-day">Max Labs/Day (total): <span id="max-labs-per-day-value">1</span></label>
                    <input type="range" id="max-labs-per-day" min="1" max="3" value="1">
                </div>
                <div class="slider-group">
                    <label for="max-activities-per-day">Max Activities/Day (total): <span id="max-activities-per-day-value">2</span></label>
                    <input type="range" id="max-activities-per-day" min="1" max="5" value="2">
                </div>
            </div>

            <div class="config-section" id="faculty-management">
                <h2><span class="material-symbols-outlined">school</span>Faculty & Subjects</h2>
                <div id="faculty-list-container"></div>
                <div class="add-form">
                    <input type="text" id="faculty-name-input" placeholder="Enter new faculty name">
                    <button id="add-faculty-btn">
                        <span class="material-symbols-outlined">add</span>Add Faculty
                    </button>
                </div>
            </div>

            <div class="config-section">
                <h2><span class="material-symbols-outlined">groups</span>Sections & Assignments</h2>
                <div id="section-tags-container"></div>
                <div class="add-form">
                    <input type="text" id="section-name-input" placeholder="e.g., CSE-A">
                    <button id="add-section-btn">
                        <span class="material-symbols-outlined">add</span>Add Section
                    </button>
                </div>
            </div>

            <div id="courses-container"></div>

            <button id="generate-btn" class="cta-btn">
                <span class="material-symbols-outlined">auto_awesome</span>
                <span class="btn-text">Generate Timetables</span>
                <span class="spinner" style="display: none;"></span>
            </button>
        </div>

        <div class="output-panel">
            <div id="output-placeholder" class="placeholder-card">
                <span class="material-symbols-outlined placeholder-icon">space_dashboard</span>
                <h2>Your Timetables Will Appear Here</h2>
                <p>Configure your setup and click "Generate".</p>
            </div>
            <div id="timetables-container"></div>
        </div>
    </div>

    <div id="summary-modal" class="modal">
        <div class="modal-content">
            <button class="modal-close material-symbols-outlined">close</button>
            <h2 id="modal-title">Section Summary</h2>
            <div id="modal-body"></div>
        </div>
    </div>

    <div id="faculty-edit-modal" class="modal">
        <div class="modal-content large">
            <button class="modal-close material-symbols-outlined">close</button>
            <h2 id="faculty-modal-title">Manage Faculty</h2>
            <div id="faculty-modal-body"></div>
        </div>
    </div>

    <div id="assignment-prefs-modal" class="modal">
        <div class="modal-content">
            <button class="modal-close material-symbols-outlined">close</button>
            <h2 id="assignment-modal-title">Set Preferences</h2>
            <div id="assignment-modal-body"></div>
        </div>
    </div>

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