Compare commits
No commits in common. "91283999484a20b9ed2ab0054a7ef6f7b4a66db7" and "e1ebc2fc1836a76dd9bdccc962c15c949be8757f" have entirely different histories.
9128399948
...
e1ebc2fc18
2 changed files with 11 additions and 192 deletions
|
|
@ -181,7 +181,7 @@ time {
|
|||
font-size: .5em;
|
||||
}
|
||||
.section-headers {
|
||||
margin: 2px;
|
||||
margin: 2px 4px;
|
||||
border-radius: 100px;
|
||||
padding: 80px 20px;
|
||||
border-style: double;
|
||||
|
|
@ -210,7 +210,7 @@ time {
|
|||
border-width: 10px;
|
||||
flex: 1 1 100% !important;
|
||||
border-radius: 0 0 100px 100px;
|
||||
margin: 2px;
|
||||
margin: 2px 4px;
|
||||
|
||||
}
|
||||
.border {
|
||||
|
|
@ -267,7 +267,7 @@ time {
|
|||
flex: 1 1 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
margin: 2px;
|
||||
margin: 2px 4px;
|
||||
}
|
||||
|
||||
.support {
|
||||
|
|
@ -364,7 +364,7 @@ justify-content: space-between;
|
|||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
height: 200px;
|
||||
max-height: 200px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -384,68 +384,13 @@ justify-content: space-between;
|
|||
|
||||
#radio {
|
||||
|
||||
.radioplayer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#recordPlayer {
|
||||
flex: 1 1 300px;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
margin-top:40px;
|
||||
|
||||
img {
|
||||
border-radius:7px;
|
||||
transition: all linear 1s;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.legend-container {
|
||||
align-content: center;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex: 1 1 300px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.spinner {
|
||||
border-radius: 2000px !important;
|
||||
animation: rotate 10s linear infinite;
|
||||
border-style: double;
|
||||
border-color: purple;
|
||||
border-width: 10px;
|
||||
}
|
||||
.stop {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.legend {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.border {
|
||||
margin: 2px;
|
||||
margin: 2px 4px;
|
||||
}
|
||||
audio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#myBtn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
|
||||
|
||||
|
|
@ -508,23 +453,6 @@ justify-content: space-between;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
#radio {
|
||||
|
||||
|
||||
#myBtn {
|
||||
font-size: 4em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ANIMATIONS */
|
||||
|
||||
@keyframes rotate {
|
||||
0% {
|
||||
transform: rotate(0deg)
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,124 +1,15 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<section id="radio">
|
||||
<div class="section-headers" style="background-image: url(/2025/images/radio.webp);">
|
||||
<h2>RadioStation</h2>
|
||||
<h4>𝕭𝖆𝖘𝖘𝖕𝖎𝖘𝖙𝖔𝖑 𝕽𝖆𝖉𝖎𝖔 𝕾𝖙𝖆𝖙𝖎𝖔𝖓</h4>
|
||||
<p>777% music, without commercials! RobotDJ-sets and live interventions! This is the sound of freedom.</p>
|
||||
|
||||
<a class="button" href="https://radio.basspistol.com/">Request song 📻</a>
|
||||
</div>
|
||||
<div class="border radioplayer">
|
||||
<div class="border">
|
||||
<iframe src="https://radio.basspistol.com/public/basspistol/embed?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 150px; border: 0;"></iframe>
|
||||
|
||||
<div class="legend-container">
|
||||
<div class="legend">
|
||||
<button id="myBtn">▶️</button>
|
||||
<div>
|
||||
<h4 id="npTitle"></h4>
|
||||
<p id="npArtist"></p>
|
||||
<audio preload="none" id="radioAudio">
|
||||
<source src="https://radio.basspistol.com/listen/basspistol/radio.mp3" type="audio/mpeg">
|
||||
Your browser does not support the audio element.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<br />
|
||||
<a target="_blank" href="" id="supportButtonDelux" class="button player">🫰 Support this Artist</a>
|
||||
<br />
|
||||
<a class="button" target="_blank" href="https://radio.basspistol.com/">📻 Request song</a>
|
||||
<br />
|
||||
<a class="button" target="_blank" href="https://radio.basspistol.com/public/basspistol/schedule">🗓️ Schedule</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="recordPlayer">
|
||||
<img src="" id="coverArt" />
|
||||
</div>
|
||||
<iframe src="https://radio.basspistol.com/public/basspistol/history?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 480px; border: 0;"></iframe>
|
||||
</div>
|
||||
<div class="section-footers"></div>
|
||||
|
||||
</section>
|
||||
<script>
|
||||
|
||||
console.log("Loading Basspistol Radio! Enjoy!");
|
||||
|
||||
// Logic to fetch URL of currently playing artist
|
||||
|
||||
const list = document.createDocumentFragment();
|
||||
const supportUrl = 'https://radio.basspistol.com/api/nowplaying';
|
||||
|
||||
// Catch elements that need influece
|
||||
// support button
|
||||
let supportButtonDelux = document.getElementById('supportButtonDelux');
|
||||
|
||||
// record player
|
||||
let coverArt = document.getElementById('coverArt');
|
||||
coverArt.classList.add("btn");
|
||||
|
||||
// Title and Artist
|
||||
let npArtist = document.getElementById('npArtist');
|
||||
let npTitle = document.getElementById('npTitle');
|
||||
|
||||
function timeleyManner(){
|
||||
fetch(supportUrl)
|
||||
.then((response) => {
|
||||
return response.json();
|
||||
})
|
||||
.then((data) => {
|
||||
let supportClicker = data;
|
||||
|
||||
|
||||
supportClicker.map(function(support) {
|
||||
|
||||
// set background image in record player
|
||||
coverArt.src = `${support.now_playing.song.art}`;
|
||||
|
||||
// print text
|
||||
|
||||
npTitle.innerHTML = `${support.now_playing.song.title}`;
|
||||
|
||||
npArtist.innerHTML = `by ${support.now_playing.song.artist}`;
|
||||
|
||||
if(`${support.now_playing.song.custom_fields.support_url}` != "null") {
|
||||
supportButtonDelux.href = `${support.now_playing.song.custom_fields.support_url}` + "?ref=radio.basspistol.com" + "&title=" + `${support.now_playing.song.text}`;
|
||||
|
||||
}
|
||||
else {
|
||||
supportButtonDelux.href = "https://www.urbandictionary.com/define.php?term=Anon";
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
})
|
||||
.catch(function(error) {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
timeleyManner();
|
||||
|
||||
setInterval
|
||||
|
||||
// player logic
|
||||
var audio = document.getElementById("radioAudio");
|
||||
var btn = document.getElementById("myBtn");
|
||||
|
||||
btn.onclick = function() {
|
||||
if (audio.paused) {
|
||||
audio.play();
|
||||
btn.innerHTML = "⏸️";
|
||||
coverArt.classList.add("spinner");
|
||||
coverArt.classList.remove("stop");
|
||||
} else {
|
||||
audio.pause();
|
||||
btn.innerHTML = "▶️";
|
||||
coverArt.classList.add("stop");
|
||||
}
|
||||
};
|
||||
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue