Browse Source

Initial commit

master
Pearu 7 years ago
commit
023c45b841
  1. BIN
      favicon.ico
  2. 39
      index.html
  3. 55
      script.js
  4. 108
      style.css

BIN
favicon.ico

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

39
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>

55
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;
}

108
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;
}
Loading…
Cancel
Save