139 lines
4.9 KiB
HTML
139 lines
4.9 KiB
HTML
{{ template "base.html" . }}
|
|
|
|
{{ define "extrahead" }}
|
|
<style type="text/css">
|
|
.sidebar { display:none; }
|
|
|
|
.display {
|
|
text-align: center;
|
|
}
|
|
|
|
.display .event_title {
|
|
font-size: 80px;
|
|
line-height: 80px;
|
|
}
|
|
|
|
.display .date {
|
|
margin-top: 40px;
|
|
font-size: 30px;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.display .precounter {
|
|
margin: 40px 0 0 0;
|
|
font-size: 50px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.display .postcounter {
|
|
margin: 0 0 40px 0;
|
|
font-size: 50px;
|
|
line-height: 50px;
|
|
}
|
|
|
|
.display .counter {
|
|
margin: 20px 0;
|
|
font-size: 50px;
|
|
line-height: 50px;
|
|
font-family: consolas, inconsolata, monospace;
|
|
white-space: pre;
|
|
}
|
|
|
|
.display > a {
|
|
display: inline-block;
|
|
margin-top: 20px;
|
|
}
|
|
</style>
|
|
{{ end }}
|
|
|
|
{{ define "content" }}
|
|
<div class="display">
|
|
<p class="event_title"></p>
|
|
<a class="external event_url" target="_blank" rel="nofollow"></a>
|
|
<p class="date"></p>
|
|
<p class="precounter"></p>
|
|
<p class="counter"></p>
|
|
<p class="postcounter">ago</p>
|
|
<input id="notify_checkbox" type="checkbox"><label for="notify_checkbox">Notify me when it starts (Keep this tab open to receive notification)</label><br />
|
|
</div>
|
|
<script type="text/javascript">
|
|
var timestamp = {{ .Timestamp }};
|
|
var title = "{{ .Name }}";
|
|
var url = "{{ .Url }}";
|
|
var happened = false;
|
|
var notificationState = "unknown";
|
|
timestamp *= 1000;
|
|
var date = new Date(timestamp);
|
|
happened = timestamp < new Date().getTime();
|
|
document.querySelector(".display .event_title").textContent = title;
|
|
var eventUrl = document.querySelector(".display .event_url");
|
|
if (url && url.length > 0) {
|
|
eventUrl.textContent = url;
|
|
if (!(url.startsWith("http://") || url.startsWith("https://"))) {
|
|
url = "//" + url;
|
|
}
|
|
eventUrl.setAttribute("href", url);
|
|
} else {
|
|
eventUrl.style.display = "none";
|
|
}
|
|
document.querySelector(".display .date").textContent = date.toDateString() + ", " + date.toLocaleTimeString();
|
|
if (document.querySelector("#notify_checkbox").checked) {
|
|
if (Notification.permission == "granted") {
|
|
notificationState = "on";
|
|
} else {
|
|
document.querySelector("#notify_checkbox").checked = false;
|
|
}
|
|
}
|
|
document.querySelector("#notify_checkbox").addEventListener("change", updateNotifications);
|
|
updateTimer();
|
|
|
|
function updateTimer() {
|
|
function pad(t) {
|
|
var str = t.toString();
|
|
if (str.length == 1) {
|
|
str = " " + str;
|
|
}
|
|
return str;
|
|
}
|
|
var now = new Date().getTime();
|
|
var delta = Math.floor((timestamp - now) / 1000);
|
|
var past = delta < 0;
|
|
if (!happened && past) {
|
|
happened = true;
|
|
if (notificationState == "on") {
|
|
new Notification(title + " is starting!!");
|
|
}
|
|
}
|
|
delta = Math.abs(delta);
|
|
var days = Math.floor(delta / 60 / 60 / 24);
|
|
var hours = Math.floor(delta / 60 / 60) % 24;
|
|
var minutes = Math.floor(delta / 60) % 60;
|
|
var seconds = delta % 60;
|
|
document.querySelector(".display .precounter").textContent = (past ? "Started" : "Starts in");
|
|
document.querySelector(".display .counter").textContent = (days > 0 ? days + "d " : "") + (days > 0 || hours > 0 ? pad(hours) + "h " : "") + pad(minutes) + "m " + pad(seconds) + "s";
|
|
document.querySelector(".display .postcounter").style.visibility = (past ? "visible" : "hidden");
|
|
setTimeout(updateTimer, 1000);
|
|
}
|
|
|
|
function updateNotifications() {
|
|
var checked = document.querySelector("#notify_checkbox").checked;
|
|
if (checked) {
|
|
if (Notification.permission == "granted") {
|
|
notificationState = "on";
|
|
} else {
|
|
Notification.requestPermission().then(function(permission) {
|
|
if (permission == "granted") {
|
|
document.querySelector("#notify_checkbox").checked = true;
|
|
notificationState = "on";
|
|
} else {
|
|
document.querySelector("#notify_checkbox").checked = false;
|
|
}
|
|
});
|
|
}
|
|
} else {
|
|
notificationState = "off";
|
|
}
|
|
}
|
|
</script>
|
|
{{ end }}
|