New Version
This commit is contained in:
parent
e52464bacf
commit
efc076a44d
|
|
@ -0,0 +1,72 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="30.173193mm"
|
||||
height="28.396435mm"
|
||||
viewBox="0 0 30.173193 28.396435"
|
||||
version="1.1"
|
||||
id="svg5"
|
||||
inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
|
||||
sodipodi:docname="chain.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview7"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:pageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="false"
|
||||
inkscape:zoom="2.8284271"
|
||||
inkscape:cx="-2.4748737"
|
||||
inkscape:cy="2.298097"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1011"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="use2067" />
|
||||
<defs
|
||||
id="defs2">
|
||||
<marker
|
||||
style="overflow:visible"
|
||||
id="Arrow1Lstart"
|
||||
refX="0"
|
||||
refY="0"
|
||||
orient="auto"
|
||||
inkscape:stockid="Arrow1Lstart"
|
||||
inkscape:isstock="true">
|
||||
<path
|
||||
transform="matrix(0.8,0,0,0.8,10,0)"
|
||||
style="fill:context-stroke;fill-rule:evenodd;stroke:context-stroke;stroke-width:1pt"
|
||||
d="M 0,0 5,-5 -12.5,0 5,5 Z"
|
||||
id="path3594" />
|
||||
</marker>
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Capa 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-63.286163,-139.61049)">
|
||||
<g
|
||||
inkscape:label="Clip"
|
||||
id="use2067">
|
||||
<path
|
||||
id="rect4222"
|
||||
style="fill:none;stroke:#fffff5;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke fill markers;stroke-opacity:1"
|
||||
d="m 77.59583,160.65655 -3.801325,4.944 c -1.006081,1.30851 -2.869457,1.55197 -4.177962,0.54589 l -3.924001,-3.01707 c -1.308505,-1.00608 -1.551974,-2.86945 -0.545892,-4.17796 l 7.291796,-9.48369 c 1.006081,-1.30851 2.86945,-1.55198 4.177955,-0.5459 l 3.924,3.01708"
|
||||
sodipodi:nodetypes="cssssssc" />
|
||||
<path
|
||||
id="rect4222-3"
|
||||
style="fill:none;stroke:#fffff5;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;paint-order:stroke fill markers;stroke-opacity:1"
|
||||
d="m 79.559808,146.42748 3.391215,-4.41061 c 1.006081,-1.3085 2.869449,-1.55197 4.177954,-0.54589 l 3.924001,3.01707 c 1.308505,1.00608 1.551974,2.86945 0.545892,4.17796 l -7.291796,9.48369 c -1.006082,1.30851 -2.86945,1.55198 -4.177955,0.5459 l -3.924001,-3.01708"
|
||||
sodipodi:nodetypes="ccsssssc" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 944 B |
122
index.html
122
index.html
|
|
@ -2,98 +2,132 @@
|
|||
<html lang=ca>
|
||||
<head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1"/>
|
||||
<script src="script.js"></script>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=0.75"/>
|
||||
<link rel="stylesheet" href="style.css"/>
|
||||
<title>Duskin' Radio</title>
|
||||
<link rel="icon" type="image/png" href="favicon.png"/>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<img alt="Logo: Duskin' Radio" src="logo.png" id="logo"/>
|
||||
<h2>Cadenes</h2>
|
||||
<hr/>
|
||||
<button id="refresh">Refrescar Metadades</button>
|
||||
<div class="container">
|
||||
<div class="cadena" id="dancin">
|
||||
<h3>Dancin'</h3>
|
||||
<p>Nu Disco, House, Synthpop, Dance</p>
|
||||
<p>Nu Disco, House, Synthpop, Dance</p>
|
||||
<p class="playing"></p>
|
||||
<audio preload="metadata">
|
||||
<source src="dancin.mp3" type="audio/mpeg"/>
|
||||
Audio tag not supported
|
||||
</audio>
|
||||
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||
<input class="link"></input>
|
||||
<div>
|
||||
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
|
||||
</div>
|
||||
<input class="link"/>
|
||||
</div>
|
||||
|
||||
<div class="cadena" id="funkin">
|
||||
<h3>Funkin'</h3>
|
||||
<p>Funk, Disco, R&B</p>
|
||||
<p class="playing"></p>
|
||||
<audio preload="metadata">
|
||||
<source src="funkin.mp3" type="audio/mpeg"/>
|
||||
Audio tag not supported
|
||||
</audio>
|
||||
<div>
|
||||
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||
<input class="link"></input>
|
||||
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
|
||||
</div>
|
||||
<input class="link"/>
|
||||
</div>
|
||||
|
||||
<div class="cadena" id="gazin">
|
||||
<h3>Gazin'</h3>
|
||||
<p>Rock Alternatiu, Shoegaze</p>
|
||||
<p class="playing"></p>
|
||||
<audio preload="metadata">
|
||||
<source src="gazin.mp3" type="audio/mpeg"/>
|
||||
Audio tag not supported
|
||||
</audio>
|
||||
<div>
|
||||
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||
<input class="link"></input>
|
||||
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
|
||||
</div>
|
||||
<input class="link"/>
|
||||
</div>
|
||||
|
||||
<div class="cadena" id="doomin">
|
||||
<h3>Doomin'</h3>
|
||||
<p>Post Punk, Cold Wave</p>
|
||||
<p class="playing"></p>
|
||||
<audio preload="metadata">
|
||||
<source src="doomin.mp3" type="audio/mpeg"/>
|
||||
Audio tag not supported
|
||||
</audio>
|
||||
<div>
|
||||
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||
<input class="link"></input>
|
||||
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
|
||||
</div>
|
||||
<input class="link"/>
|
||||
</div>
|
||||
|
||||
<div class="cadena" id="dreamin">
|
||||
<h3>Dreamin'</h3>
|
||||
<p>Indie, Dream Pop, Emo</p>
|
||||
<p class="playing"></p>
|
||||
<audio preload="metadata">
|
||||
<source src="dreamin.mp3" type="audio/mpeg"/>
|
||||
Audio tag not supported
|
||||
</audio>
|
||||
<div>
|
||||
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
|
||||
</div>
|
||||
<input class="link"/>
|
||||
</div>
|
||||
<div class="cadena" id="random">
|
||||
<h3>Random Shit</h3>
|
||||
<p>El que siga</p>
|
||||
<p class="playing"></p>
|
||||
<audio preload="metadata">
|
||||
<source src="random.mp3" type="audio/mpeg"/>
|
||||
Audio tag not supported
|
||||
</audio>
|
||||
<div>
|
||||
<img class="play" alt="Play Button" src="./play.svg"/>
|
||||
<img class="linkButton" alt="Copy Link" src="./chain.svg"/>
|
||||
</div>
|
||||
<input class="link"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
let playButtons = [...document.querySelectorAll('.play')]
|
||||
playButtons.map((x) => x.addEventListener('click', () => playButtonAction(x)))
|
||||
let cadenaDivs = [...document.querySelectorAll('.cadena')]
|
||||
cadenaDivs.map((x) => x.addEventListener('click', () => copyLink(x)))
|
||||
})
|
||||
|
||||
function playButtonAction(x) {
|
||||
let audio = x.parentNode.querySelector('audio')
|
||||
if (audio.paused) {
|
||||
audio.load()
|
||||
audio.play()
|
||||
x.src="./stop.svg"
|
||||
}
|
||||
else {
|
||||
let aux = audio.querySelector('source').src
|
||||
audio.querySelector('source').src = ""
|
||||
audio.pause()
|
||||
setTimeout(() => audio.load())
|
||||
x.src="./play.svg"
|
||||
audio.querySelector('source').src = aux
|
||||
}
|
||||
}
|
||||
|
||||
function copyLink(x) {
|
||||
let link = x.querySelector('source')
|
||||
let pText = x.querySelector('.link')
|
||||
pText.value = link.src
|
||||
console.log(pText.value)
|
||||
pText.select()
|
||||
document.execCommand('copy')
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<footer id="bottom">Copia els enllaços per a escoltar en un client! (Com per exemple, VLC o MPV)</footer>
|
||||
<footer id="bottom">
|
||||
<p>Copia els enllaços per a escoltar en un client!</p>
|
||||
<p>Clients recomanats:</p>
|
||||
<div class="flist">
|
||||
<ul type="square">
|
||||
<li>MPV</li>
|
||||
<li>VLC</li>
|
||||
<li>Goodvibes (Linux)</li>
|
||||
<li>URL Radio (Android).</li>
|
||||
</ul>
|
||||
</div>
|
||||
<p>Enllaços:</p>
|
||||
<div class="flist">
|
||||
<ul>
|
||||
<li>radio.dusk.fai.su:5080/dancin.mp3</li>
|
||||
<li>radio.dusk.fai.su:5080/funkin.mp3</li>
|
||||
<li>radio.dusk.fai.su:5080/gazin.mp3</li>
|
||||
<li>radio.dusk.fai.su:5080/doomin.mp3</li>
|
||||
<li>radio.dusk.fai.su:5080/dreamin.mp3</li>
|
||||
</ul>
|
||||
</div>
|
||||
</footer>
|
||||
<img id="funnygif" src="alunya_dance.gif"/>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
document.addEventListener('DOMContentLoaded', () => {
|
||||
setTimeout(initialize, 500)
|
||||
})
|
||||
function initialize() {
|
||||
let playButtons = [...document.querySelectorAll('.play')]
|
||||
playButtons.map((x) => x.addEventListener('click', () => playButtonAction(x)))
|
||||
|
||||
let cadenaLinks = [...document.querySelectorAll('.linkButton')]
|
||||
cadenaLinks.map((x) => x.addEventListener('click', () => copyLink(x)))
|
||||
|
||||
var cadenaPlaying = [...document.querySelectorAll('.playing')]
|
||||
cadenaPlaying.map((x) => actualitzar(x))
|
||||
|
||||
let refreshButton = document.querySelector('#refresh')
|
||||
refreshButton.addEventListener('click', () => { cadenaPlaying.map((x) => actualitzar(x))})
|
||||
}
|
||||
function playButtonAction(x) {
|
||||
let audio = x.parentNode.parentNode.querySelector('audio')
|
||||
if (audio.paused) {
|
||||
audio.load()
|
||||
audio.play()
|
||||
x.src="./stop.svg"
|
||||
}
|
||||
else {
|
||||
let aux = audio.querySelector('source').src
|
||||
audio.querySelector('source').src = ""
|
||||
audio.pause()
|
||||
setTimeout(() => audio.load())
|
||||
x.src="./play.svg"
|
||||
audio.querySelector('source').src = aux
|
||||
}
|
||||
}
|
||||
function copyLink(x) {
|
||||
let link = x.parentNode.parentNode.querySelector('source')
|
||||
let pText = x.parentNode.parentNode.querySelector('.link')
|
||||
console.log(link)
|
||||
console.log(pText)
|
||||
pText.style.display = "unset"
|
||||
pText.value = link.src
|
||||
console.log(pText.value)
|
||||
pText.select()
|
||||
document.execCommand('copy')
|
||||
pText.style.display = "none"
|
||||
}
|
||||
function actualitzar(x) {
|
||||
actualitzarIntern(x)
|
||||
}
|
||||
function actualitzarIntern(x) {
|
||||
fetch("status-json.xsl").then((response) => response.json())
|
||||
.then((json) => {
|
||||
var link = x.parentNode.querySelector('source').src
|
||||
var filename = basename(link)
|
||||
var title = ""
|
||||
var JSONArray = Array.from(json.icestats.source)
|
||||
for (let i = 0; i < JSONArray.length; i++) {
|
||||
if (basename(JSONArray[i].listenurl) === filename) {
|
||||
title = "♪ " + JSONArray[i].title
|
||||
|
||||
}
|
||||
}
|
||||
x.parentNode.querySelector('.playing').innerHTML = title
|
||||
|
||||
})
|
||||
}
|
||||
function basename (str) {
|
||||
return str.substring(str.lastIndexOf('/') + 1)
|
||||
}
|
||||
|
||||
|
||||
|
||||
54
style.css
54
style.css
|
|
@ -51,9 +51,6 @@ hr {
|
|||
.cadena {
|
||||
border: 5px solid #d6d6d6;
|
||||
text-shadow: rgba(0, 0, 0, 0.75) 0px 0px 10px;
|
||||
min-width: 500px;
|
||||
|
||||
|
||||
}
|
||||
#dancin {
|
||||
background-color: rgba(240, 180, 255, 0.25);
|
||||
|
|
@ -76,16 +73,26 @@ hr {
|
|||
background-color: rgba(10, 25, 25, 0.75);
|
||||
}
|
||||
#gazin {
|
||||
color: #e2c5a1;
|
||||
background-color: rgba(174, 133, 81, 0.5);
|
||||
}
|
||||
#gazin:hover {
|
||||
background-color: rgba(174, 133, 81, 0.75);
|
||||
}
|
||||
#dreamin {
|
||||
color: #cce0c3;
|
||||
background-color: rgba(106, 167, 186, 0.5);
|
||||
|
||||
}
|
||||
#dreamin:hover {
|
||||
background-color: rgba(106, 167, 186, 0.75);
|
||||
}
|
||||
#controls {
|
||||
width: 80px;
|
||||
}
|
||||
.play {
|
||||
max-width: 10%;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.play:hover {
|
||||
|
|
@ -97,11 +104,19 @@ hr {
|
|||
@media only screen and (max-width: 1250px) {
|
||||
.container {
|
||||
grid-template-columns: auto;
|
||||
max-width: 80%;
|
||||
}
|
||||
.cadena {
|
||||
font-size: 0.75em;
|
||||
}
|
||||
#logo {
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
.link {
|
||||
display: none;
|
||||
background-color: transparent;
|
||||
border: 0px solid transparent;
|
||||
color: transparent;
|
||||
|
|
@ -109,3 +124,36 @@ hr {
|
|||
width: 0px;
|
||||
outline: none;
|
||||
}
|
||||
.linkButton {
|
||||
max-width: 12.5%;
|
||||
margin-bottom: 30px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.linkButton:hover {
|
||||
opacity: 0.75;
|
||||
}
|
||||
.linkButton:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.flist {
|
||||
text-align: left;
|
||||
width: 500px;
|
||||
display: inline-block;
|
||||
}
|
||||
#random {
|
||||
background-color: #e66465;
|
||||
|
||||
color: #ffbdea;
|
||||
}
|
||||
#refresh {
|
||||
border: #d6d6d6 solid;
|
||||
background: #ffbffa;
|
||||
font-family: "Gemunu-Libre", sans-serif;
|
||||
font-size: inherit;
|
||||
margin: inherit;
|
||||
color: #090c17;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#refresh:active {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue