forked from SAI/kahtlane-fm
Pearu
7 years ago
commit
023c45b841
4 changed files with 202 additions and 0 deletions
|
After Width: | Height: | Size: 1.1 KiB |
@ -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> |
||||||
@ -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; |
||||||
|
} |
||||||
|
|
||||||
@ -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…
Reference in new issue