forked from redloste/gcal
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
257 lines (243 loc) · 12.8 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
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
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Calendar App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<style>
/* customizable snowflake styling */
.snowflake {
color: #0000ff;
font-size: 2.25em;
font-family: Arial, sans-serif;
}
.snowflake,.snowflake .inner{animation-iteration-count:infinite;animation-play-state:running}@keyframes snowflakes-fall{0%{transform:translateY(0)}100%{transform:translateY(110vh)}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;user-select:none;cursor:default;animation-name:snowflakes-shake;animation-duration:3s;animation-timing-function:ease-in-out}.snowflake .inner{animation-duration:10s;animation-name:snowflakes-fall;animation-timing-function:linear}.snowflake:nth-of-type(0){left:1%;animation-delay:0s}.snowflake:nth-of-type(0) .inner{animation-delay:0s}.snowflake:first-of-type{left:10%;animation-delay:1s}.snowflake:first-of-type .inner,.snowflake:nth-of-type(8) .inner{animation-delay:1s}.snowflake:nth-of-type(2){left:20%;animation-delay:.5s}.snowflake:nth-of-type(2) .inner,.snowflake:nth-of-type(6) .inner{animation-delay:6s}.snowflake:nth-of-type(3){left:30%;animation-delay:2s}.snowflake:nth-of-type(11) .inner,.snowflake:nth-of-type(3) .inner{animation-delay:4s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s}.snowflake:nth-of-type(10) .inner,.snowflake:nth-of-type(4) .inner{animation-delay:2s}.snowflake:nth-of-type(5){left:50%;animation-delay:3s}.snowflake:nth-of-type(5) .inner{animation-delay:8s}.snowflake:nth-of-type(6){left:60%;animation-delay:2s}.snowflake:nth-of-type(7){left:70%;animation-delay:1s}.snowflake:nth-of-type(7) .inner{animation-delay:2.5s}.snowflake:nth-of-type(8){left:80%;animation-delay:0s}.snowflake:nth-of-type(9){left:90%;animation-delay:1.5s}.snowflake:nth-of-type(9) .inner{animation-delay:3s}.snowflake:nth-of-type(10){left:25%;animation-delay:0s}.snowflake:nth-of-type(11){left:65%;animation-delay:2.5s}
</style>
<style type="text/css">
body {
background-color: #ffffff;
color: #000;
}
.table {
width: 90%;
margin: 0 auto;
text-align: center;
color: #000;
}
.row input {
width: 100%;
}
.row input::placeholder {
font-style: italic;
}
.rowHead {
margin-bottom: 0.5em;
}
.col-1 {
min-width: 10%;
overflow: clip;
padding: 0 1%;
text-align: left;
}
.col-2 {
min-width: 20%;
}
.block {
text-align: left;
}
#submitContainer {
display: flex;
justify-content: center;
align-items: center;
}
/* input:{
color: #000;
}*/
</style>
</head>
<script type="text/javascript">
if (!(new Date().getMonth() === 11 || new Date().getMonth() === 0 || new Date().getMonth() === 1)) {
document.getElementById('snow-container').style.display = 'none';
document.getElementById('subtitle').innerHTML = "The placeholder subjects there are mine as an example :)";
}
</script>
<body>
<br>
<div id="snow-container">
<div class="snowflakes" aria-hidden="true">
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
<div class="snowflake"> <div class="inner">❄</div> </div>
</div>
</div>
<br>
<h1 style="text-align: center">Hi, put your subjects here!</h1>
<div style="text-align: center"><p id="subtitle">The placeholder subjects there are mine as an example :) And Merry Chrismas 🎄</p></div>
<div style="display: flex; width: 100%; justify-content: center;">
<label style="margin-right: 5px; margin-bottom: 0;">Manual filling</label>
<input id="manual-fill" type="checkbox">
</div>
<br>
<div class="table" id="timetable">
<div class="row rowHead">
<div class="col-2"> </div>
<div class="col-1">Day 1</div>
<div class="col-1">Day 2</div>
<div class="col-1">Day 3</div>
<div class="col-1">Day 4</div>
<div class="col-1">Day 5</div>
<div class="col-1">Day 6</div>
<div class="col-1">Day 7</div>
<div class="col-1">Day 8</div>
</div>
<div class="row row1">
<div class="col-2 block"><p>Block 1 (8:00-8:55)</p></div>
<div class="col-1 day1 block7"><input placeholder="English"></div>
<div class="col-1 day2 block8"><input placeholder="TOK"></div>
<div class="col-1 day3 block1"><input placeholder="Math"></div>
<div class="col-1 day4 block2"><input placeholder="Biology"></div>
<div class="col-1 day5 block3"><input placeholder="Italian"></div>
<div class="col-1 day6 block4"><input placeholder="Physics"></div>
<div class="col-1 day7 block5"><input placeholder=""></div>
<div class="col-1 day8 block6"><input placeholder="WAC"></div>
</div>
<div class="row row2 row-manual">
<div class="col-2 block"><p>Block 2 (9:00-9:55)</p></div>
<div class="col-1 day1 block3"><input disabled placeholder="Italian"></div>
<div class="col-1 day2 block4"><input disabled placeholder="Physics"></div>
<div class="col-1 day3 block5"><input disabled placeholder=""></div>
<div class="col-1 day4 block6"><input disabled placeholder="WAC"></div>
<div class="col-1 day5 block7"><input disabled placeholder="English"></div>
<div class="col-1 day6 block8"><input disabled placeholder="TOK"></div>
<div class="col-1 day7 block1"><input disabled placeholder="Math"></div>
<div class="col-1 day8 block2"><input disabled placeholder="Biology"></div>
</div>
<div class="row row3 row-manual">
<div class="col-2 block"><p>Block 3 (10:00-10:55)</p></div>
<div class="col-1 day1 block1"><input disabled placeholder="Math"></div>
<div class="col-1 day2 block2"><input disabled placeholder="Biology"></div>
<div class="col-1 day3 block3"><input disabled placeholder="Italian"></div>
<div class="col-1 day4 block4"><input disabled placeholder="Physics"></div>
<div class="col-1 day5 block5"><input disabled placeholder=""></div>
<div class="col-1 day6 block6"><input disabled placeholder="WAC"></div>
<div class="col-1 day7 block7"><input disabled placeholder="English"></div>
<div class="col-1 day8 block8"><input disabled placeholder="TOK"></div>
</div>
<div class="row row4 row-manual">
<div class="col-2 block"><p>Block 4 (11:20-12:15)</p></div>
<div class="col-1 day1 block4"><input disabled placeholder="Physics"></div>
<div class="col-1 day2 block1"><input disabled placeholder="Math"></div>
<div class="col-1 day3 block2"><input disabled placeholder="Biology"></div>
<div class="col-1 day4 block3"><input disabled placeholder="Italian"></div>
<div class="col-1 day5 block4"><input disabled placeholder="Physics"></div>
<div class="col-1 day6 block1"><input disabled placeholder="Math"></div>
<div class="col-1 day7 block2"><input disabled placeholder="Biology"></div>
<div class="col-1 day8 block3"><input disabled placeholder="Italian"></div>
</div>
<div class="row row5 row-manual">
<div class="col-2 block"><p>Block 5 (12:20-13:45)</p></div>
<div class="col-1 day1 block5"><input disabled placeholder=""></div>
<div class="col-1 day2 block6"><input disabled placeholder="WAC"></div>
<div class="col-1 day3 block7"><input disabled placeholder="English"></div>
<div class="col-1 day4 block8"><input disabled placeholder="TOK"></div>
<div class="col-1 day5 block1"><input disabled placeholder="Math"></div>
<div class="col-1 day6 block2"><input disabled placeholder="Biology"></div>
<div class="col-1 day7 block3"><input disabled placeholder="Italian"></div>
<div class="col-1 day8 block4"><input disabled placeholder="Physics"></div>
</div>
</div>
<br>
<br>
<div id="submitContainer"><button id="submit">Download your CSV File</button></div>
<br>
<div style="margin-left: 2em">
<h3>How do I use this?</h3>
<ol>
<li>Fill in your subjects</li>
<li>Download the CSV File</li>
<li>Create a new Calendar in Google Calendar</li>
<li>In Google Calendar, go to Settings > Import & export</li>
<li>Upload your file, choose your new Calendar, and import it!</li>
</ol>
</div>
<br>
<!-- <div style="text-align: center"><p><b>For secondi: Don't forget to remove classes during trials!</b></p></div> -->
<div style="text-align: center"><p>The app is now updated until summer break 2024!</p></div>
<div style="text-align: center"><p>Let Tín (+39 351 9129282) know if there are any problems :)</p></div>
<div style="text-align: center"><p>Continuing the work of Red, we will miss you!</p></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script type="text/javascript">
// for future maintenance, change daycyc-ledayss
const daycycledays = [ "08/01/2024", "09/01/2024", "10/01/2024", "11/01/2024", "12/01/2024", "15/01/2024", "16/01/2024", "17/01/2024", "18/01/2024", "19/01/2024", "22/01/2024", "23/01/2024", "24/01/2024", "25/01/2024", "26/01/2024", "29/01/2024", "30/01/2024", "31/01/2024", "01/02/2024", "02/02/2024", "05/02/2024", "06/02/2024", "07/02/2024", "08/02/2024", "09/02/2024", "12/02/2024", "13/02/2024", "14/02/2024", "15/02/2024", "16/02/2024", "19/02/2024", "20/02/2024", "21/02/2024", "22/02/2024", "23/02/2024", "04/03/2024", "05/03/2024", "06/03/2024", "07/03/2024", "11/03/2024", "12/03/2024", "13/03/2024", "14/03/2024", "15/03/2024", "18/03/2024", "19/03/2024", "20/03/2024", "21/03/2024", "22/03/2024", "25/03/2024", "26/03/2024", "27/03/2024", "28/03/2024", "02/04/2024", "03/04/2024", "04/04/2024", "05/04/2024", "08/04/2024", "09/04/2024", "10/04/2024", "11/04/2024", "12/04/2024", "15/04/2024", "16/04/2024", "17/04/2024", "18/04/2024", "19/04/2024", "22/04/2024", "23/04/2024", "24/04/2024", "26/04/2024", "29/04/2024", "30/04/2024", "01/05/2024"];
const starts = ['8:00','9:00','10:00','11:20','12:20'];
const ends = ['8:55','9:55','10:55','12:15','13:45'];
const header = ['Subject', 'Start Date', 'Start Time', 'End Date', 'End Time', 'All Day Event', 'Location'];
let csv = header.join(',') + '\n';
let manualFill = document.querySelector('#manual-fill');
manualFill.addEventListener('change', () => {
if (manualFill.checked)
document.querySelectorAll('.row .col-1 input').forEach((item) => {
item.disabled = false;
});
else
document.querySelectorAll('.row-manual .col-1 input').forEach((item) => {
item.disabled = true;
});
})
// auto-fill
for(let i = 1; i <= 8; i++) {
let subjectElement = document.querySelector('.row1 .block' + i);
let subjectInput = document.querySelector('.row1 .block' + i + ' input');
let subjectBlock = Array.from(subjectElement.classList).filter(word => word.slice(0, -1) == "block")[0];
subjectInput.addEventListener("input", () => {
if (manualFill.checked) return;
let subject = document.querySelector('.row1 .block' + i + ' input').value;
document.querySelectorAll('.row .' + subjectBlock + ' input').forEach((item) => {
item.value = subject;
});
});
}
// read data from inputs
document.querySelector('#submit').addEventListener('click', function(){
let subjs = [];
for(let i = 1; i <= 8; i++){
for(let j = 1; j <= 5; j++){
let query = '.row' + j + ' .day' + i + ' input'
subjs.push(document.querySelector(query).value)
}
}
// cycling the timetable
for(let i = 0; i < daycycledays.length; i++){
// for future maintenace, change (i+x) (x is number fitted to calendar)
let count = (i + 6) % 8 + 1;
// console.log(count, daycycledays[i])
// 5 is the number of blocks in a day
for(let subjcount = 0; subjcount < 5; subjcount++){
if(!subjs[(count - 1) * 5 + subjcount] == ""){
subjs_ind = (count - 1)*5 + subjcount;
subj = subjs[subjs_ind];
csv += [subj, daycycledays[i], starts[subjcount], daycycledays[i], ends[subjcount], false, ''].join(',');
csv += '\n';
}
}
}
// export .csv file
var hiddenElement = document.createElement('a');
hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
hiddenElement.target = '_blank';
hiddenElement.download = 'calendarTest.csv';
hiddenElement.click();
})
</script>
</html>