Initial commit

6 years ago · 023c45b841
4 changed files with 202 additions and 0 deletions
--- a/favicon.ico
+++ b/favicon.ico
--- a/index.html
+++ b/index.html
@ -0,0 +1,39 @@
				@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Kahtlane FM</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Minge vittu kui sitt muusika">
+    <meta property="og:url" content="http://kahtlane.eu">
+    <meta property="og:title" content="Kahtlane FM">
+    <meta property="og:description" content="Minge vittu kui sitt muusika">
+    <meta property="og:image" content="http://i.imgur.com/37n5BhH.png">
+    <meta property="og:image:type" content="image/jpeg">
+    <meta property="og:image:width" content="1920">
+    <meta property="og:image:height" content="1080">
+    <meta property="og:type" content="website">
+    <meta property="og:locale" content="et_EE">
+    <meta property="og:audio" content="http://kahtlane.eu:8000/live">
+    <meta property="og:audio:type" content="application/ogg">
+    <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
+    <link rel="stylesheet" type="text/css" href="style.css" media="screen, print" />
+    <script type="text/javascript" src="script.js"></script>
+  </head>
+  <body>
+	<div id="content">
+		<h1 onmouseover="change_bg('37n5BhH');" onmouseout="reset_bg();">Kahtlane FM</h1>
+		<hr />
+		<h3>Minge vittu kui sitt muusika...</h3>
+		<div id="players">
+			<div class="playertitle"><a href="http://kahtlane.eu:8000/live.m3u">KUULA PÄRIS PLEIERIGA, PLEB</a><br /><span id="listeners1">0</span> kuulajat praegalt</div>
+			<div class="playerbox"><audio controls="controls" preload="none"><source src="http://kahtlane.eu:8000/live" type="application/ogg" /></audio></div>
+			<div id="on-air-head">HETKEL EETRIS:</div>
+			<div id="on-air"></div>
+		</div>
+	</div>
+	<script>
+		autoupdate();
+	</script>
+  </body>
+</html>
--- a/script.js
+++ b/script.js
@ -0,0 +1,55 @@
				@@ -0,0 +1,55 @@
+function update(){
+	var xhttp = new XMLHttpRequest();
+	xhttp.onreadystatechange = function() {
+		if (xhttp.readyState == 4 && xhttp.status == 200) {
+			var json_text = xhttp.responseText;
+			var json_obj = JSON.parse(json_text);
+			var playing = '';
+			var first = getFirstPlaying(json_obj);
+			if (first == null) {}
+			else if (first.artist != undefined) { 
+				playing = first.artist + ' - '; 
+			}
+			playing += first.title;
+			var nowPlaying = playing;
+			update_field('on-air', playing);
+			update_listeners(json_obj);
+		}
+	};
+	xhttp.open("GET", "http://kahtlane.eu:8000/status-json.xsl", true);
+	xhttp.send();
+}
+
+function update_field(field, data){
+	document.getElementById(field).innerHTML = data;
+	return 'ok';
+}
+
+function update_listeners(json_obj){
+	var nowPlaying = getFirstPlaying(json_obj);
+	update_field('listeners1', nowPlaying.listeners);
+}
+
+function autoupdate(){
+	update();
+	setInterval(function(){ update(); }, 30000);	
+}
+
+function change_bg(id){
+	document.body.style.backgroundImage = "url('http://i.imgur.com/" + id + ".jpg')";
+}
+
+function reset_bg(){
+	document.body.style.backgroundImage = "url('http://i.imgur.com/BkSL2KJ.png')";
+}
+
+function getFirstPlaying(jsonObj){
+	var sources = jsonObj.icestats.source;
+	for(o=0; o < sources.length; o++) {
+		if (sources[o].title != undefined) {
+			return sources[o];
+		}
+	}
+	return null;
+}
+
--- a/style.css
+++ b/style.css
@ -0,0 +1,108 @@
				@@ -0,0 +1,108 @@
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+body {
+	font-family: 'Roboto', sans-serif;
+	background-image: url('http://i.imgur.com/BkSL2KJ.png');
+	background-position: center top;
+	background-size: cover;
+	color: #fff;
+}
+#content {
+	width: 100%;
+	max-width: 500px;
+	margin: 50px auto auto;
+	text-align: center;
+}
+
+h1 {
+	font-weight: 500;
+	font-size: 36pt;
+	text-transform: uppercase;
+}
+h3 {
+	font-size: 16pt;
+	text-transform: uppercase;
+}
+#content hr {
+	width: 350px;
+	height: 2px;
+	border: none;
+	background-color: #fff;
+	margin: 0 auto 5px;
+}
+#players {
+	background-color: rgba(255,255,255,0.12);
+	margin: 30px auto;
+	padding: 15px 0;
+}
+.playerbox {
+	width: 300px;
+	margin: 5px auto 18px;
+	border-radius: 3px;
+}
+.playertitle {
+	font-size: 18pt;
+	font-weight: 500;
+}
+#on-air-head {
+	font-weight: 700;
+	font-size: 15pt;
+	margin-bottom: 4px;
+}
+#on-air {
+	font-size: 13pt;
+}
+audio {
+	width: 100%;
+	border-radius: 3px;
+}
+#players a {
+	text-decoration: none;
+	color: #fff;
+}
+#players a:hover {
+	text-decoration: underline;
+	color: #fafafa;
+}
+