blank them links

comming soon, on a URL near you

themes/basspistol2025/assets/css/style.css

@@ -181,7 +181,7 @@ time {
   font-size: .5em;
 }
 .section-headers {
-  margin: 2px 4px;
+  margin: 2px;
   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 4px;
+  margin: 2px;
 
 }
 .border {
@@ -267,7 +267,7 @@ time {
     flex: 1 1 100%;
     background-position: center center;
     background-size: cover;
-    margin: 2px 4px;
+    margin: 2px;
   }
 
   .support {
@@ -364,7 +364,7 @@ justify-content: space-between;
     img {
       width: 100%;
       object-fit: cover;
-      max-height: 200px;
+      height: 200px;
     }
 
 
@@ -384,12 +384,67 @@ 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 4px;
+    margin: 2px;
   }
+  audio {
+    width: 100%;
   }
 
+  #myBtn {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    font-size: 3em;
+  }
 
+}
 
 @media screen and (max-width: 720px) {
 
@@ -453,6 +508,23 @@ justify-content: space-between;
       }
     }
   }
+
+  #radio {
+
+
+    #myBtn {
+      font-size: 4em;
+    }
+  }
 }
 
+/* ANIMATIONS */
 
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg)
+  }
+  100% {
+    transform: rotate(360deg)
+  }
+}

themes/basspistol2025/layouts/partials/body/radio.html

@@ -1,15 +1,124 @@
+
+
+
+
+
+
+
 <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">
-    <iframe src="https://radio.basspistol.com/public/basspistol/embed?theme=dark" frameborder="0" allowtransparency="true" style="width: 100%; min-height: 150px; border: 0;"></iframe>
 
-    <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="border radioplayer">
+
+    <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>
   </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>