-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
164 lines (146 loc) · 20.3 KB
/
index.html
File metadata and controls
164 lines (146 loc) · 20.3 KB
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
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="refresh" content="900">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="gridiculous.css">
<link rel="stylesheet" href="styleshit.css">
<link rel="stylesheet" href="TELETEXT.CSS">
<script type="text/javascript" src="paho-mqtt.js"></script>
<script type="text/javascript" language="JavaScript">
<!--
function initNowPlaying() {
var client = new Paho.MQTT.Client("ws://mqtt.hackheim", 8083, "hackheim_infoscreen");
var elem = document.getElementById("nowplaying");
function onConnect() {
client.subscribe("mopidy/nowplaying");
}
function onMessageArrived(message) {
if (message.destinationName == "mopidy/nowplaying") {
elem.innerText = "Now on hackheim FM: " + message.payloadString.split(":").join(" - ");
}
console.log("Message! " + message.payloadString);
}
client.onMessageArrived = onMessageArrived;
client.connect({
userName: "hackheim_infoscreen",
// Don't get excited, it can't actually do anything except read current tune
password: "XPY3CcGLy7eB9vKe",
onSuccess: onConnect,
uris: [
"ws://mqtt.hackheim:8083/mqtt",
],
mqttVersion: 4,
reconnect: true,
useSSL: false,
});
}
var initTeletext = function() {
initNowPlaying();
window.setInterval(updateClock, 1000);
window.setTimeout(updateCounter, 100);
}
var addleadingspace = function(number) {
return (number < 10 ? " " : "") + number;
}
var addleadingzero = function(number) {
return (number < 10 ? "0" : "") + number;
}
var dayofweek = ["Sun","Mon","Tue","Wed","Thu","Fri","Sat"];
var monthname = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var updateClock = function() {
var d = new Date();
document.getElementById("TTdate").innerHTML = dayofweek[d.getDay()] + " " + d.getDate() + " " + monthname[d.getMonth()];
document.getElementById("TTtime").innerHTML = addleadingzero(d.getHours() + 1) + ":" + addleadingzero(d.getMinutes()) + ":" + addleadingzero(d.getSeconds());
}
var counter=100;
var updateCounter = function() {
document.getElementById("TTcounter").innerHTML = counter;
counter +=1;
if (counter > 199) {
counter = 100;
}
if (Math.random() < 0.05) {
window.setTimeout(updateCounter, 1000 + Math.random()*3000);
} else {
window.setTimeout(updateCounter, 100);
}
}
//-->
</script>
</head>
<body>
<div id="site-container" class="grid">
<header class="row">
<div class="teletext c12"><div style="float: left">P100 <span class="green">HACKHEIM.NO <span id="TTcounter">100</span></div><div style="float: right;"><span id="TTdate">Mon 1 Jan<span></span></span> <span id="TTtime" class="yellow">00:00:00</span></div></div>
<div class="teletext c12"> </div>
<div class="teletext c12 bluebg white"><p>Teletext the future of information distribution?..............................................123</p></div>
<div class="teletext c12 bluebg white"><p>The internet, just a hype?....................................................................666</p></div>
<div class="teletext c12"> </div>
<div class="c12 headerlogo"><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"> </span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"> </span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"> </span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"> </span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"> </span><span class="yellow"> </span><span class="cyan"> </span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow">  </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"> </span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow">  </span><span class="cyan"></span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span>
<span class="yellow"></span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span><span class="cyan"></span><span class="yellow"> </span>
<span class="yellow">         </span>
</div>
</header>
<div id="site-content" role="main">
<div class="row">
<div class="c7">
<div class="teletext doublesize">
<span class="yellow blackbg"></span>
<span class="cyan blackbg"></span></div>
<div class="teletext"><span class="blackbg"> </span></div>
<p>Welcome to Hackheim! We're an open Makerspace, you can find us behind the bar at Work-Work<br></p>
<div class="teletext doublesize"><span class="yellow blackbg"></span>
<span class="cyan blackbg"></span></div>
<div class="teletext"><span class="blackbg"> </span></div>
<p>Want to become one of us? drop by and visit on our open days or sign up on our website hackheim.no</p>
<p class="yellow info"><b>Prices:</b></p>
<table>
<tr><td style="padding-right: 10px;" class="cyan">Adult:</td><td>400 kr/month</td></tr>
<tr><td style="padding-right: 10px;" class="cyan">Student: </td><td>250 kr/month<span class="red">*</span></td></tr>
</table>
<p class="disclaimer"><span class="red">*</span><i>Valid student card must be shown on request</i></p>
</div>
<div class="c5 end"><div class="teletext doublesize">
<span class="yellow blackbg"></span>
<span class="cyan blackbg"></span>
</div>
<p class="white">Stay tuned!</p>
<div class="teletext doublesize">
<span class="yellow blackbg"></span>
<span class="cyan blackbg"></span>
</div>
<br>
<p class="white">Wed <span class="green">18:00</span> - <span class="red">Bedtime</span></p><br>
<p class="white">Sun <span class="green">18:00</span> - <span class="red">Bedtime</span></p><br>
<br>
</div>
<footer class="row">
<div class="teletext c12 black blackbg" style="text-align: center;"> </div>
<div class="teletext c12 bluebg white" style="text-align: center;">Hackheim Industries AS - 2022</div>
<!--<div class="teletext c12 white" style="text-align: center;">Thanks to our sponsors:</div>-->
<!--<div class="teletext c12 white blackbg" style="text-align: center;"><span class="cyan">Nordic Semiconductor!</span> | <span class="yellow">Elfa Distrec</span> | <span class="red">(your company here?)</span> | <span class="blue">(your company here?)</span></div>-->
<div id="nowplaying" class="teletext c12 white flashing" style="text-align: center;">Now on hackheim FM : ?</div>
</footer>
</div>
</div>
<script type="text/javascript">
window.onload = initTeletext;
</script>
</body>
</html>