-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
176 lines (162 loc) · 10.3 KB
/
index.html
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
<!DOCTYPE html>
<html>
<title>S8 TimeTable</title>
<meta charset="UTF-8">
<meta content="Todays S8 Timetable!" name="description" />
<meta content="Elvis Tony" name="author" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/loader.css">
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" href="css/snow-lite.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<!-- <div class="snow"></div> -->
<body class="w3-white">
<div class="w3-top w3-white">
<div class=" w3-center w3-padding" style="max-width:1200px;margin:auto">
<h4 class=" w3-padding-top w3-margin">CSE - S8 - A</h4>
<p id="time" class="w3-small w3-margin w3-padding-bottom">TimeTable for: <i>Loading</i></p>
</div>
</div>
<!-- !PAGE CONTENT! -->
<div class=" w3-content w3-padding" style="max-width:1200px;margin-top:150px">
<div id="myNav" class="overlay">
<div class="overlay-content">
<div class="loader" id="status">Ohaiyo'Oh!<br><span class="w3-small">Asking around,<br> for the TimeTable</span></div>
</div>
<span class="loader-btn w3-opacity w3-small" onclick="closeNav()"><br>Stop Loading</span>
</div>
<div class=" w3-display-container w3-round-large" id="timediv">
<span class="w3-display-topleft w3-text-white w3-small w3-margin w3-round-large w3-padding" style="background:white;">Now<br><span class="w3-large" id="nowhr">Sleep</span></span>
<span class="w3-display-topright w3-small w3-text-white w3-margin w3-round-large w3-padding" style="background:white;">Next <br><span class="w3-large" id="nxthr">Sleep</span></span>
<div class="w3-center">
<p class="">Time Left</p><p id="timeleft" class="w3-large w3-margin"><span class='w3-small'>Calculating Duration</span></p>
</div>
</div>
<script>
function move(bar) {
var elem = document.getElementById(bar);
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
<div class="w3-row-padding w3-padding-16 w3-center" style="height:200px;" id="tt">
<div style="height:100%;" class="w3-text-white w3-display-container w3-quarter" id="c1">
<a id="m1" href="#" class="w3-display-topright w3-button w3-small w3-hover-opacity" target="_blank"><i class="fa fa-video-camera"></i></a>
<h4 class="w3-small">Period 1</h4>
<h3 id="p1">Period-1</h3>
<a id="l1" target="_blank" href="https://classroom.google.com/" class="w3-button w3-block w3-border w3-hover-white w3-round-large">Google Classroom</a>
<span class="w3-display-bottomleft w3-small w3-margin">Starts at: <b id='s1'>00:00</b> </span>
<span class="w3-display-bottomright w3-small w3-margin">Ends at: <b id='e1'>00:00</b> </span>
</div>
<div style="height:100%;" class="w3-text-white w3-quarter w3-display-container" id="c2">
<a id="m2" href="#" class="w3-display-topright w3-button w3-small w3-hover-opacity" target="_blank"><i class="fa fa-video-camera"></i></a>
<h4 class="w3-small">Period 2</h4>
<h3 id="p2">Period-2</h3>
<a id="l2" target="_blank" href="https://classroom.google.com/" class="w3-button w3-block w3-border w3-hover-white w3-round-large">Google Classroom</a>
<span class="w3-display-bottomleft w3-small w3-margin">Starts at: <b id='s2'>00:00</b> </span>
<span class="w3-display-bottomright w3-small w3-margin">Ends at: <b id='e2'>00:00</b> </span>
</div>
<div style="height:100%;" class="w3-text-white w3-quarter w3-display-container" id="c3">
<a id="m3" href="#" class="w3-display-topright w3-button w3-small w3-hover-opacity" target="_blank"><i class="fa fa-video-camera"></i></a>
<h4 class="w3-small">Period 3</h4>
<h3 id="p3">Period-3</h3>
<a id="l3" target="_blank" href="https://classroom.google.com/" class="w3-button w3-block w3-border w3-hover-white w3-round-large">Google Classroom</a>
<span class="w3-display-bottomleft w3-small w3-margin">Starts at: <b id='s3'>00:00</b> </span>
<span class="w3-display-bottomright w3-small w3-margin">Ends at: <b id='e3'>00:00</b> </span>
</div>
<div style="height:100%;" class="w3-text-white w3-quarter w3-display-container" id="c4">
<a id="m4" href="#" class="w3-display-topright w3-button w3-small w3-hover-opacity" target="_blank"><i class="fa fa-video-camera"></i></a>
<h4 class="w3-small">Period 4</h4>
<h3 id="p4">Period-4</h3>
<a id="l4" target="_blank" href="https://classroom.google.com/" class="w3-button w3-block w3-border w3-hover-white w3-round-large">Google Classroom</a>
<span class="w3-display-bottomleft w3-small w3-margin">Starts at: <b id='s4'>00:00</b> </span>
<span class="w3-display-bottomright w3-small w3-margin">Ends at: <b id='e4'>00:00</b> </span>
</div>
</div>
<div class="w3-row">
<div class="w3-row-padding w3-center" style="height:200px;margin-top:-16px" id="labrow">
<div style="height:100%;" class="w3-text-white w3-padding w3-block w3-display-container" id="c5">
<a id="m5" href="#" class="w3-display-topright w3-button w3-small w3-hover-opacity" target="_blank"><i class="fa fa-video-camera"></i></a>
<h4 class="w3-small">Period 5</h4>
<h3 id="p5">Period-5</h3>
<a id="l5" target="_blank" href="https://classroom.google.com/" class="w3-button w3-block w3-border w3-hover-white w3-round-large">Google Classroom</a>
<span class="w3-display-bottomleft w3-small w3-margin">Starts at: <b id='s5'>00:00</b> </span>
<span class="w3-display-bottomright w3-small w3-margin">Ends at: <b id='e5'>00:00</b> </span>
</div>
</div>
</div>
<!-- <div class="w3-block w3-center w3-margin-top">
<a href="http://timetablecse.c1.biz/" target="_blank" class="w3-button w3-margin w3-center w3-round-large w3-hover-teal">View TimeTable <span class="w3-small">From Aishu's Site</span></a>
</div> -->
<!-- End page content -->
</div>
<div class="w3-padding-32 w3-margin w3-center">
<p class=" w3-button w3-teal w3-round-large w3-hover-blue" onclick="OpenSettings(this)">Alter TimeTable Settings</p>
<div class="w3-content w3-hide" id="settings">
<div class="w3-row">
<label class="switch w3-right w3-margin">
<input id="audio-switch" type="checkbox" onchange="saveNotifChange(this)">
<span class="slider round"></span>
</label>
<p class="w3-left">Enable Audio Alerts </p>
</div>
<div class="w3-row w3-margin" >
<p class="w3-left">Volume <span class="w3-border w3-tiny w3-border w3-padding w3-round-large w3-hover-pink" style="user-select: none;" onclick="Ring()">Test Sound</span></p>
<span class="w3-right w3-margin">
<span id="vol-low" onclick="setNotifVolume(0.2)" class=" w3-tiny w3-padding w3-round-large w3-hover-opacity" style="user-select: none;" >Low</span> <span id="vol-med" onclick="setNotifVolume(0.4)" class=" w3-tiny w3-padding w3-round-large w3-hover-opacity w3-border" style="user-select: none;" >Medium</span> <span id="vol-high" onclick="setNotifVolume(0.6)" class=" w3-tiny w3-padding w3-round-large w3-hover-opacity " style="user-select: none;" >High</span>
</span>
</div>
<div class="w3-row">
<label class="switch w3-right w3-margin">
<input id="dark-switch" type="checkbox" onchange="saveDarkChange(this)">
<span class="slider round"></span>
</label>
<p class="w3-left">Enable Dark Mode</p>
</div>
<div class="w3-row">
<span class="w3-right w3-small"> <button id="gid0" onclick="location.replace('#0');location.reload();" id="gid0" class="w3-margin w3-center w3-button w3-round">0</button><button id="gid1" onclick="location.replace('#1');location.reload();" class="w3-margin w3-center w3-button w3-round">1</button><button onclick="location.replace('#2');location.reload();" id="gid2" class="w3-margin w3-center w3-button w3-round">2</button> </span>
<p class="w3-left">Set Google User <i onclick="alert(this.title)" class="fa fa-question-circle" title="Set your College Google Account Position to avoid selecting the account on every click! (Works on Desktop Only)"></i></p>
</div>
</div>
</div>
<footer class="w3-row-padding w3-container w3-padding-top w3-margin-top w3-center">
<hr>
<div id="warnpanel" class="w3-center w3-panel w3-padding w3-round w3-pale-red">
Having trouble Loading ? Go to <a href="https://classroom.google.com" class="w3-button w3-border w3-hover-teal w3-round"><i class="w3-large fa fa-google w3-text-orange"></i>oogle Classroom</a> Directly<br><span class="w3-small">In case the site Fails to load, Use the Link above to Enter Google Classroom Dashboard</span>
</div>
<hr>
<div class="w3-small">
<p>Developed by <span class="w3-small w3-text-blue w3-round"> LVZ </span>| Powered by <span class="w3-small w3-text-orange w3-round">Google API </span>| Hosted by <span class="w3-small w3-text-purple w3-round">Github</span></p>
<p>Meet Link Concept adapted from <a class="w3-button w3-small w3-hover-pale-blue w3-round-large" href="http://timetablecse.c1.biz/"><b class="w3-small w3-text-teal w3-round"> Aishwarya Joy </b></a></p>
<p>Backed by <a class="w3-text-green w3-small" href="https://www.w3schools.com/w3css/default.asp" target="_blank">w3.css</a></p>
</div>
<div class="w3-tiny w3-margin">
<a target="_blank" href="https://forms.gle/a6U4X6waW7LknpQg6" class="w3-button w3-border w3-hover-white w3-round">Update Today's Timetable</a>
</div>
</footer>
<audio id="audio-not" src="media/notif.mp3"></audio>
<script>
function OpenSettings(ele){
settings = document.getElementById('settings');
if(settings.classList.contains('w3-hide')){
ele.innerText="Save and Close Settings";
settings.classList.remove('w3-hide')
}else{
ele.innerText="Alter Timetable Settings";
settings.classList.add('w3-hide')
}
}
</script>
<script src="js/commons.js" charset="utf-8"></script>
</body>
</html>