commit 023c45b841742e5e95d492d03a7e620ad8024a0f Author: Pearu Date: Thu Jan 4 17:20:47 2018 +0200 Initial commit diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..ebef3db Binary files /dev/null and b/favicon.ico differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..1f03146 --- /dev/null +++ b/index.html @@ -0,0 +1,39 @@ + + + + Kahtlane FM + + + + + + + + + + + + + + + + + + + +

Kahtlane FM

Minge vittu kui sitt muusika...

KUULA PÄRIS PLEIERIGA, PLEB
0 kuulajat praegalt

HETKEL EETRIS:

+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..4606a97 --- /dev/null +++ b/script.js @@ -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; +} + diff --git a/style.css b/style.css new file mode 100644 index 0000000..f04de6a --- /dev/null +++ b/style.css @@ -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; +} +