-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
306 lines (267 loc) · 16 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
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>810NICLE Day - BIONICLEsector01</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="August 10, 2020 is 810NICLE Day, a BIONICLE fan community event presented by BIONICLEsector01.">
<meta property="og:type" content="website" />
<meta property="og:site_name" content="BIONICLEsector01">
<meta property="og:title" content="810NICLE Day 2020">
<meta property="og:description" content="August 10, 2020 is 810NICLE Day, a BIONICLE fan community event presented by BIONICLEsector01.">
<meta property="og:url" content="https://biosector01.com/810">
<meta property="og:image" content="https://biosector01.com/810/assets/810-logo.png">
<link rel="stylesheet" type="text/css" href="assets/810.css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i&display=swap" rel="stylesheet">
</head>
<body>
<a id="bs01-logo-wrapper" href="https://biosector01.com">
<img id="bs01-logo" alt="BIONICLEsector01" title="BIONICLEsector01" width="64" height="64" src="assets/bs01-logo-triangle.png" />
</a>
<div id="hero">
<header id="header-810">
<div id="header-810-lead">August 10, 2020 is</div>
<h1><img alt="810NICLE Day" title="810NICLE Day" class="logo-810" width="317" height="189" src="assets/810-logo.png" /></h1>
<div id="header-810-desc">a BIONICLE fan community event</div>
</header>
</div>
<div id="schedule-wrapper">
<h2>Schedule</h2>
<p><strong>This schedule is a work in progress and is subject to significant change.</strong></p>
<p>Times are listed in <span id="time-zone">UTC</span>.</p>
<!-- schedule based on https://css-tricks.com/building-a-conference-schedule-with-css-grid/ -->
<div id="schedule">
<h3 class="time-slot"><time datetime="2020-08-10T14:00Z" class="time-slot-time">8/10/2020, 2:00 PM</time></h3>
<div class="time-line event-start-day-1-time-1400 event-end-day-1-time-1400"></div>
<a href="https://www.youtube.com/user/Vahkiti" class="event event-start-day-1-time-1400 event-end-day-1-time-1500 event-track-1">
<div class="event-contents">
<h4 class="event-title">Gathered Friends: The Last Ryde</h4>
<span class="event-time"><time datetime="2020-08-10T14:00Z">2:00 PM</time>-<time datetime="2020-08-10T15:00Z">3:00 PM</time></span>
<div class="event-description">
Featuring BIONICLE G2 author Ryder Windham. He won't be happy once he catches windham of that pun.
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T14:30Z" class="time-slot-time">2:30 PM</time></h3>
<div class="time-line event-start-day-1-time-1430 event-end-day-1-time-1430"></div>
<h3 class="time-slot"><time datetime="2020-08-10T15:00Z" class="time-slot-time">3:00 PM</time></h3>
<div class="time-line event-start-day-1-time-1500 event-end-day-1-time-1500"></div>
<a href="https://www.youtube.com/user/Vahkiti" class="event event-start-day-1-time-1500 event-end-day-1-time-1700 event-track-1">
<div class="event-contents">
<h4 class="event-title">Miscellaneous games with the Beaverhouse</h4>
<span class="event-time"><time datetime="2020-08-10T15:00Z">3:00 PM</time>-<time datetime="2020-08-10T17:00Z">5:00 PM</time></span>
<div class="event-description">
I just lost the game.
</div>
</div>
</a>
<a href="https://www.youtube.com/user/thethreevirtues" class="event event-start-day-1-time-1500 event-end-day-1-time-1530 event-track-2">
<div class="event-contents">
<h4 class="event-title">TTV MOC Spotlight #1</h4>
<span class="event-time"><time datetime="2020-08-10T15:00Z">3:00 PM</time>-<time datetime="2020-08-10T15:30Z">3:30 PM</time></span>
<div class="event-description">
The Phantom MOCist
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T15:30Z" class="time-slot-time">3:30 PM</time></h3>
<div class="time-line event-start-day-1-time-1530 event-end-day-1-time-1530"></div>
<h3 class="time-slot"><time datetime="2020-08-10T16:00Z" class="time-slot-time">4:00 PM</time></h3>
<div class="time-line event-start-day-1-time-1600 event-end-day-1-time-1600"></div>
<a href="https://www.youtube.com/user/thethreevirtues" class="event event-start-day-1-time-1600 event-end-day-1-time-1630 event-track-2">
<div class="event-contents">
<h4 class="event-title">TTV MOC Spotlight #2</h4>
<span class="event-time"><time datetime="2020-08-10T16:00Z">4:00 PM</time>-<time datetime="2020-08-10T16:30Z">4:30 PM</time></span>
<div class="event-description">
Attack of the Clone Builds
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T16:30Z" class="time-slot-time">4:30 PM</time></h3>
<div class="time-line event-start-day-1-time-1630 event-end-day-1-time-1630"></div>
<h3 class="time-slot"><time datetime="2020-08-10T17:00Z" class="time-slot-time">5:00 PM</time></h3>
<div class="time-line event-start-day-1-time-1700 event-end-day-1-time-1700"></div>
<a href="https://wallofhistory.com" class="event event-start-day-1-time-1700 event-end-day-1-time-1830 event-track-1">
<div class="event-contents">
<h4 class="event-title">Wall of History Movie Stream</h4>
<span class="event-time"><time datetime="2020-08-10T17:00Z">5:00 PM</time>-<time datetime="2020-08-10T18:30Z">6:30 PM</time></span>
<div class="event-description">
Show up, or next year we'll do a Wall of Drying Paint Movie Stream.
</div>
</div>
</a>
<a href="https://wallofhistory.com" class="event event-start-day-1-time-1700 event-end-day-1-time-1730 event-track-2">
<div class="event-contents">
<h4 class="event-title">Wall of History Update #1</h4>
<span class="event-time"><time datetime="2020-08-10T17:00Z">5:00 PM</time>-<time datetime="2020-08-10T17:30Z">5:30 PM</time></span>
<div class="event-description">
The Story Update
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T17:30Z" class="time-slot-time">5:30 PM</time></h3>
<div class="time-line event-start-day-1-time-1730 event-end-day-1-time-1730"></div>
<h3 class="time-slot"><time datetime="2020-08-10T18:00Z" class="time-slot-time">6:00 PM</time></h3>
<div class="time-line event-start-day-1-time-1800 event-end-day-1-time-1800"></div>
<h3 class="time-slot"><time datetime="2020-08-10T18:30Z" class="time-slot-time">6:30 PM</time></h3>
<div class="time-line event-start-day-1-time-1830 event-end-day-1-time-1830"></div>
<a class="event event-start-day-1-time-1830 event-end-day-1-time-2200 event-track-1">
<div class="event-contents">
<h4 class="event-title">Trials of the Great Spirit/Legend of Mata Nui Livestream</h4>
<span class="event-time"><time datetime="2020-08-10T18:30Z">6:30 PM</time>-<time datetime="2020-08-10T22:00Z">10:00 PM</time></span>
<div class="event-description">
This is getting out of hand. Now there are two of them!
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T19:00Z" class="time-slot-time">7:00 PM</time></h3>
<div class="time-line event-start-day-1-time-1900 event-end-day-1-time-1900"></div>
<a href="https://www.youtube.com/user/thethreevirtues" class="event event-start-day-1-time-1900 event-end-day-1-time-1930 event-track-2">
<div class="event-contents">
<h4 class="event-title">TTV MOC Spotlight #3</h4>
<span class="event-time"><time datetime="2020-08-10T19:00Z">7:00 PM</time>-<time datetime="2020-08-10T19:30Z">7:30 PM</time></span>
<div class="event-description">
Revenge of the Solek
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T19:30Z" class="time-slot-time">7:30 PM</time></h3>
<div class="time-line event-start-day-1-time-1930 event-end-day-1-time-1930"></div>
<a href="https://wallofhistory.com" class="event event-start-day-1-time-1930 event-end-day-1-time-2000 event-track-2">
<div class="event-contents">
<h4 class="event-title">Wall of History Update #2</h4>
<span class="event-time"><time datetime="2020-08-10T19:30Z">7:30 PM</time>-<time datetime="2020-08-10T20:00Z">8:00 PM</time></span>
<div class="event-description">
The Reference Update
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T20:00Z" class="time-slot-time">8:00 PM</time></h3>
<div class="time-line event-start-day-1-time-2000 event-end-day-1-time-2000"></div>
<h3 class="time-slot"><time datetime="2020-08-10T20:30Z" class="time-slot-time">8:30 PM</time></h3>
<div class="time-line event-start-day-1-time-2030 event-end-day-1-time-2030"></div>
<h3 class="time-slot"><time datetime="2020-08-10T21:00Z" class="time-slot-time">9:00 PM</time></h3>
<div class="time-line event-start-day-1-time-2100 event-end-day-1-time-2100"></div>
<a href="https://www.youtube.com/user/thethreevirtues" class="event event-start-day-1-time-2100 event-end-day-1-time-2130 event-track-2">
<div class="event-contents">
<h4 class="event-title">TTV MOC Spotlight #4</h4>
<span class="event-time"><time datetime="2020-08-10T21:00Z">9:00 PM</time>-<time datetime="2020-08-10T21:30Z">9:30 PM</time></span>
<div class="event-description">
Onua Hope
</div>
</div>
</a>
<a href="https://wallofhistory.com" class="event event-start-day-1-time-2130 event-end-day-1-time-2200 event-track-2">
<div class="event-contents">
<h4 class="event-title">Wall of History Update #3</h4>
<span class="event-time"><time datetime="2020-08-10T21:30Z">9:30 PM</time>-<time datetime="2020-08-10T22:00Z">10:00 PM</time></span>
<div class="event-description">
The Languages Update
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T21:30Z" class="time-slot-time">9:30 PM</time></h3>
<div class="time-line event-start-day-1-time-2130 event-end-day-1-time-2130"></div>
<h3 class="time-slot"><time datetime="2020-08-10T22:00Z" class="time-slot-time">10:00 PM</time></h3>
<div class="time-line event-start-day-1-time-2200 event-end-day-1-time-2200"></div>
<a href="https://twitter.com/AskBS01/status/1288111975075987457" class="event event-start-day-1-time-2200 event-end-day-1-time-2300 event-track-1">
<div class="event-contents">
<h4 class="event-title">BS01 Trivia Challenge</h4>
<span class="event-time"><time datetime="2020-08-10T22:00Z">10:00 PM</time>-<time datetime="2020-08-10T23:00Z">11:00 PM</time></span>
<div class="event-description">
Top performers on the preliminary quiz duke it out harder than the peerage.
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T22:30Z" class="time-slot-time">10:30 PM</time></h3>
<div class="time-line event-start-day-1-time-2230 event-end-day-1-time-2230"></div>
<h3 class="time-slot"><time datetime="2020-08-10T23:00Z" class="time-slot-time">11:00 PM</time></h3>
<div class="time-line event-start-day-1-time-2300 event-end-day-1-time-2300"></div>
<a class="event event-start-day-1-time-2300 event-end-day-2-time-0400 event-track-1">
<div class="event-contents">
<h4 class="event-title">Red Star Games One-Shot Campaign</h4>
<span class="event-time"><time datetime="2020-08-10T23:00Z">11:00 PM</time>-<time datetime="2020-08-11T04:00Z">4:00 AM</time></span>
<div class="event-description">
<p>Who will lose? The players.</p>
<p>Who will prevail? The viewers.</p>
<p>Who will tell the final tale? The DM.</p>
</div>
</div>
</a>
<a href="https://www.youtube.com/user/thethreevirtues" class="event event-start-day-1-time-2300 event-end-day-1-time-2330 event-track-2">
<div class="event-contents">
<h4 class="event-title">TTV MOC Spotlight #5</h4>
<span class="event-time"><time datetime="2020-08-10T23:00Z">11:00 PM</time>-<time datetime="2020-08-10T23:30Z">11:30 PM</time></span>
<div class="event-description">
The LEGO Group Strikes Back
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-10T23:30Z" class="time-slot-time">11:30 PM</time></h3>
<div class="time-line event-start-day-1-time-2330 event-end-day-1-time-2330"></div>
<a href="https://wallofhistory.com" class="event event-start-day-1-time-2330 event-end-day-2-time-0000 event-track-2">
<div class="event-contents">
<h4 class="event-title">Wall of History Update #4: The Games Update</h4>
<span class="event-time"><time datetime="2020-08-10T23:30Z">11:30 PM</time>-<time datetime="2020-08-11T00:00Z">12:00 AM</time></span>
<div class="event-description">
The Games Update
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-11T00:00Z" class="time-slot-time">8/11/2020, 12:00 AM</time></h3>
<div class="time-line event-start-day-2-time-0000 event-end-day-2-time-0000"></div>
<h3 class="time-slot"><time datetime="2020-08-11T00:30Z" class="time-slot-time">12:30 AM</time></h3>
<div class="time-line event-start-day-2-time-0030 event-end-day-2-time-0030"></div>
<h3 class="time-slot"><time datetime="2020-08-11T01:00Z" class="time-slot-time">1:00 AM</time></h3>
<div class="time-line event-start-day-2-time-0100 event-end-day-2-time-0100"></div>
<a href="https://www.youtube.com/user/thethreevirtues" class="event event-start-day-2-time-0100 event-end-day-2-time-0130 event-track-2">
<div class="event-contents">
<h4 class="event-title">TTV MOC Spotlight #6</h4>
<span class="event-time"><time datetime="2020-08-10T01:00Z">1:00 AM</time>-<time datetime="2020-08-10T01:30Z">11:30 AM</time></span>
<div class="event-description">
Return of the Good Guy
</div>
</div>
</a>
<h3 class="time-slot"><time datetime="2020-08-11T01:30Z" class="time-slot-time">1:30 AM</time></h3>
<div class="time-line event-start-day-2-time-0130 event-end-day-2-time-0130"></div>
<h3 class="time-slot"><time datetime="2020-08-11T02:00Z" class="time-slot-time">2:00 AM</time></h3>
<div class="time-line event-start-day-2-time-0200 event-end-day-2-time-0200"></div>
<h3 class="time-slot"><time datetime="2020-08-11T02:30Z" class="time-slot-time">2:30 AM</time></h3>
<div class="time-line event-start-day-2-time-0230 event-end-day-2-time-0230"></div>
<h3 class="time-slot"><time datetime="2020-08-11T03:00Z" class="time-slot-time">3:00 AM</time></h3>
<div class="time-line event-start-day-2-time-0300 event-end-day-2-time-0300"></div>
<h3 class="time-slot"><time datetime="2020-08-11T03:30Z" class="time-slot-time">3:30 AM</time></h3>
<div class="time-line event-start-day-2-time-0330 event-end-day-2-time-0330"></div>
<h3 class="time-slot"><time datetime="2020-08-11T04:00Z" class="time-slot-time">4:00 AM</time></h3>
<div class="time-line event-start-day-2-time-0400 event-end-day-2-time-0400"></div>
</div>
</div>
<script>
let timeTags = document.getElementsByTagName("time");
let prevDay = 0; // day of the prior time-slot
// update each time to match local time zone
let timeUTC = null;
let timeSlotText = "";
for (let timeTag of timeTags) {
timeUTC = new Date(timeTag.getAttribute("datetime"));
// only list the date if this is a time-slot and the first
// time-slot with that date
if (timeUTC.getDay() != prevDay && timeTag.className == "time-slot-time") {
timeSlotText = timeUTC.toLocaleDateString("en-US",
{ hour: "numeric", minute: "numeric" });
prevDay = timeUTC.getDay();
} else {
timeSlotText = timeUTC.toLocaleString("en-US",
{ hour: "numeric", minute: "numeric" });
}
timeTag.innerText = timeSlotText;
}
// update the time zone name listed at the top of the schedule
const timeZoneLocation = Intl.DateTimeFormat().resolvedOptions().timeZone;
const timeZoneOffset = -(new Date()).getTimezoneOffset() / 60;
document.getElementById("time-zone").innerText = "your device's time zone ("
+ timeZoneLocation + "; UTC" + (timeZoneOffset < 0 ? "" : "+") + timeZoneOffset + ")";
</script>
</body>
</html>