Skip to content

Instantly share code, notes, and snippets.

@tjb0607

tjb0607/upd8-kosmos.html

Created September 6, 2017 21:18
Show Gist options
  • Save tjb0607/ab348c6403f9d77ebe869666a48dedd5 to your computer and use it in GitHub Desktop.
Save tjb0607/ab348c6403f9d77ebe869666a48dedd5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
upd8-kosmos.html
<head>
<meta charset="utf-8"/>
<title>
Update Notifier - NEOKOSMOS
</title>
<link href="favicon-32x32.png" rel="shortcut icon" id="favicon"/>
<meta name="viewport" content="width=540"/>
<meta name="description" content="The official update notifier for NEOKOSMOS"/>
<link href='https://fonts.googleapis.com/css?family=Press+Start+2P' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<style>
body {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 4px;
text-align: center;
background-color: black;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: rgba(208, 241, 254, 0.5);
font-size: 14px;
}
a, .jslink {
color: inherit;
text-decoration: underline;
cursor: pointer;
}
p {
margin: 0px;
}
#main {
background-color: #2c2d31;
font-size: 16px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 500px;
border-radius: 3px;
padding-top: 24px;
padding-bottom: 24px;
}
#update {
font-size: 19px;
font-family: 'Press Start 2P', cursive;
margin-top: 0px;
margin-bottom: -1px;
}
.updatefound, #dismiss {
color: #d0f1fe;
}
#header, #footer {
width: 500px;
height: 0px;
font-size: 12px;
position: absolute;
}
#header {
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
#footer {
-webkit-transform: translateY(24px);
-moz-transform: translateY(24px);
-ms-transform: translateY(24px);
-o-transform: translateY(24px);
transform: translateY(24px);
}
#title, #lastcheck, #dismiss, #nextcheck {
float: left;
}
#credits, #desktop {
float: right;
}
#test-notify {
position: absolute;
bottom: 0px;
left: 0px;
}
#prefetch {
display: none;
}
</style>
<script>
var icons = [
"icons/9.png",
"icons/director.png",
"icons/scree.png",
"icons/seven1.png",
"icons/seven2.png",
"icons/triss1.png",
"icons/triss2.png",
"icons/tye1.png",
"icons/tye2.png",
"icons/tye3.png",
"icons/tye4.png",
"icons/xaveria1.png",
"icons/xaveria2.png",
"icons/z1.png",
"icons/z2.png",
"icons/z3.png",
"icons/zehra1.png",
"icons/zehra2.png",
"icons/z_tye.png"
];
var latestpage = 0;
var lastcheck = 0;
var checking = false;
var desktop = false;
if (document.cookie)
desktop = document.cookie.split('=')[1] == "true";
var mainloopTimerID;
var icon;
var notification;
var client;
onreadystatechange = function() {
if (this.readyState == 4) {
var newlatestpage = parseInt(this.responseText);
if (newlatestpage > 0) {
checking = false;
clearTimeout(mainloopTimerID);
lastcheck = 0;
if (latestpage == 0) {
showNoUpdate();
} else {
if (newlatestpage > latestpage) {
showUpdate(latestpage + 1);
} else {
showNoUpdate();
}
}
latestpage = newlatestpage;
}
}
};
function toggleSound() {
if (desktop) {
desktop = false;
document.cookie = "desktop=false";
document.getElementById("desktop").innerHTML = "desktop notifications: off";
} else {
enableDesktopNotifications();
}
}
function testNotify() {
checking=false;
clearTimeout(mainloopTimerID);
try {
client.abort();
} catch (e) { }
lastcheck = 0;
showUpdate(1);
}
function blinkTitle() {
if (document.title == "UPDATE!")
document.title = "!!!"
else
document.title = "UPDATE!";
lastcheck++;
mainloopTimerID = setTimeout("blinkTitle()", 1000)
}
function showUpdate(pagenum) {
document.getElementById("update").innerHTML = "<span class=\"updatefound\"><a href=\"http://www.neo-kosmos.com/page/" + pagenum + "\">&gt;UPDATE!</a></span>";
document.getElementById("lastcheck").innerHTML = "";
document.getElementById("nextcheck").innerHTML = "";
document.getElementById("dismiss").innerHTML = "[ dismiss ]";
mainloopTimerID = setTimeout("blinkTitle()", 0);
if (desktop) {
notification = new Notification(">UPDATE!", {icon: icon});
notification.onclick = function() {
window.focus();
this.close();
};
chooseNextIcon();
}
}
function showNoUpdate() {
document.getElementById("update").innerHTML = "<span class=\"noupdatefound\">no new pages.</span>";
mainloopTimerID = setTimeout("mainloop()", 0);
}
function doCheck() {
checking = true;
document.getElementById("nextcheck").innerHTML = "";
document.getElementById("update").innerHTML = "<span class=\"noupdatefound\">checking...</span>";
try {
client.abort();
} catch (e) { }
client = new XMLHttpRequest();
client.open("GET", "kosmos.txt?" + Math.floor(Date.now() / 10000), true);
client.onreadystatechange = onreadystatechange;
client.timeout = 9000;
client.send();
}
function dismiss() {
if (notification != null)
notification.close();
clearTimeout(mainloopTimerID);
lastcheck = 10;
document.title = "Update Notifier - NEOKOSMOS";
document.getElementById("dismiss").innerHTML = "";
mainloopTimerID = setTimeout("mainloop()", 0);
}
function chooseNextIcon() {
icon = icons[Math.floor(Math.random()*icons.length)];
var prefetch = document.getElementById("prefetch");
prefetch.innerHTML = "";
var img = document.createElement("img");
img.src = icon;
prefetch.appendChild(img);
}
function enableDesktopNotifications() {
if (!("Notification" in window)) {
alert("This browser doesn't support desktop notifications. Try getting Chrome or Firefox.");
} else {
if (Notification.permission === "granted") {
desktop = true;
document.cookie = "desktop=true";
document.getElementById("desktop").innerHTML = "desktop notifications: on";
if (icon == null) {
chooseNextIcon();
}
} else {
Notification.requestPermission(function(permission) {
if (permission === "granted") {
desktop = true;
document.cookie = "desktop=true";
document.getElementById("desktop").innerHTML = "desktop notifications: on";
if (icon == null) {
chooseNextIcon();
}
}
});
}
}
}
function mainloop() {
clearTimeout(mainloopTimerID);
if (lastcheck % 10 == 0 && (lastcheck > 0 || latestpage == 0))
doCheck();
var pluralize = "s";
if (lastcheck == 1)
pluralize = "";
if (latestpage > 0) {
document.getElementById("lastcheck").innerHTML = "last check: " + lastcheck + " second" + pluralize + " ago&nbsp;";
if (!checking) {
document.getElementById("nextcheck").innerHTML = "(next: " + (10 - (lastcheck % 10)) + "s)";
}
} else {
document.getElementById("lastcheck").innerHTML = "last check: never";
}
lastcheck++;
mainloopTimerID = setTimeout("mainloop()", 1000);
}
</script>
</head>
<body>
<div id="main">
<div id="header">
<span id="title">NeoNotifier - the official <a href="http://neo-kosmos.com/">NEOKOSMOS</a> update checker/notifier</a></span>
<span id="credits">by <a href="//tjb0607.me">tjb0607</a></span>
</div>
<p id="update">
<span class="noupdatefound">no new pages.</span>
</p>
<div id="footer">
<p id="lastcheck">last check: never</p>
<p id="dismiss" class="jslink"></p>
<p id="nextcheck"></p>
<p id="desktop" class="jslink">desktop notifications: off</p>
</div>
</div>
<div id="test-notify" class="jslink">
preview notification
</div>
<div id="prefetch">
</div>
<script>
window.onload = new function() {
mainloop();
document.getElementById("dismiss").addEventListener("click", dismiss);
document.getElementById("desktop").addEventListener("click", toggleSound);
document.getElementById("test-notify").addEventListener("click", testNotify);
if (desktop) {
enableDesktopNotifications();
}
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment