Nu Disco, House, Synthpop, Dance
+Nu Disco, House, Synthpop, Dance
+ -
-
+
+ 
+ Funk, Disco, R&B
+ +
-
+
+ Rock Alternatiu, Shoegaze
+ +
-
+
+ Post Punk, Cold Wave
+ +
-
+
+ Indie, Dream Pop, Emo
+ + +
+
+ El que siga
+ + +
+
+ 
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..6bb47ed
--- /dev/null
+++ b/script.js
@@ -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)
+ }
+
+
+
diff --git a/style.css b/style.css
index d548e51..90cf977 100644
--- a/style.css
+++ b/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;
+}