new style

nginx/vue/public/css/styles.css

@@ -42,6 +42,7 @@
 body {
     margin: 0 auto;
     font-family: var(--font-text);
+    background-color: beige;
 }
 
 p {
@@ -61,18 +62,29 @@ img {
     object-fit: contain;
 }
 
+video {
+    width: 100%;
+    object-fit: contain;
+}
+
 /* END OF ELEMENTS */
 
 /* CLASSES */
 .bordered-1 {
     width: 300px;
-    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
+    /*box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);*/
     /*padding: 15px;*/
     border: 30px solid;
-    border-image: url("/img/borders/border-minimal.png") 30 round;
+    border-image: url("/img/borders/border3.gif") 30 round;
     /*border-image: url("/img/borders/border2.png") 30;*/
 }
 
+.bordered-2 {
+    background: white;
+    border: 2px solid black;
+    text-align: center;
+}
+
 .flex-row {
     display: flexbox;
     flex-direction: row;

nginx/vue/src/App.vue

@@ -7,16 +7,7 @@ import Footer from "@/components/Footer.vue";
 <template>
     <Navbar style="height: 10vh" />
 
-    <RouterView :class="$route.name" />
+    <RouterView />
 
-    <Footer style="height: 10vh" />
+    <Footer />
 </template>
-
-<style>
-.home {
-    height: 80vh; /* takes full window height */
-    overflow: hidden; /* removes scrolling */
-    display: flex;
-    flex-direction: column;
-}
-</style>

nginx/vue/src/components/Radio.vue

@@ -1,7 +1,11 @@
 <template>
-    <div>
+    <div v-if="streamLive" class="stream-live">
-        <audio v-if="streamLive" controls :src="streamUrl" ref="audio"></audio>
+        <img src="/img/tmpen31z3pe.PNG" />
-        <p v-else>Stream is currently offline.</p>
+        <audio controls :src="streamUrl" ref="audio"></audio>
+    </div>
+    <div v-else class="stream-not-live">
+        <img src="/img/tmpen31z3pe.PNG" />
+        <p>Stream is currently offline.</p>
         <button @click="checkStream()">Check Stream</button>
     </div>
 </template>
@@ -18,9 +22,8 @@ async function checkStream() {
     try {
         const res = await fetch("/radio/status-json.xsl"); // Icecast JSON status
         const data = await res.json();
-        // Replace 'mounts' and '/stream' with your Icecast mountpoint
-        streamMount.value = data.icestats.source.listenurl.split("/").pop();
 
+        streamMount.value = data.icestats.source.listenurl.split("/").pop();
         if (streamMount.value) {
             streamLive.value = true;
             streamUrl.value = "/radio/" + streamMount.value;
@@ -31,6 +34,22 @@ async function checkStream() {
         streamLive.value = false;
     }
 }
+
+onMounted(() => {
+    checkStream();
+    setInterval(checkStream, 30000);
+});
 </script>
 
-<style scoped></style>
+<style scoped>
+.stream-live {
+    background: white;
+    border: 2px solid black;
+    text-align: center;
+}
+.stream-not-live {
+    background: white;
+    border: 2px solid black;
+    text-align: center;
+}
+</style>

nginx/vue/src/components/Spotify.vue

@@ -1,10 +1,13 @@
 <template>
-    <div class="spotify-now-playing">
+    <div v-if="playing" class="spotify-now-playing">
-        <img :src="playing ? albumImage : '/img/Untitled.png'" />
+        <img :src="albumImage" />
-        <p><strong v-if="playing">Song:</strong> {{ songName }}</p>
+        <p><strong>Song:</strong> {{ songName }}</p>
-        <p><strong v-if="playing">Artist:</strong> {{ artistName }}</p>
+        <p><strong>Artist:</strong> {{ artistName }}</p>
-        <p v-if="playing">Status: Playing</p>
+        <p>Is what im currently listening to rnrnrn ^_^</p>
-        <p v-else>Status: Not playing</p>
+    </div>
+    <div v-else class="spotify-not-playing">
+        <img src="/img/Untitled.png" />
+        <p>I ain't listenin to nofin</p>
     </div>
 </template>
 
@@ -20,20 +23,25 @@ export default {
         const songUrl = ref("");
         const playing = ref(false);
 
-        const fetchSpotify = async () => {
+        async function fetchSpotify() {
             try {
                 const res = await fetch("/api/spotify");
                 if (!res.ok) throw new Error("Failed to fetch Spotify data");
                 const data = await res.json();
+                if (playing.value == false) {
+                    return;
+                } else {
                     albumImage.value = data.album_image;
                     artistName.value = data.artist_name;
                     songUrl.value = data.song_url;
                     songName.value = data.song_name;
                     playing.value = data.playing;
+                    return;
+                }
             } catch (err) {
                 console.error(err);
             }
-        };
+        }
 
         onMounted(() => {
             fetchSpotify();
@@ -60,11 +68,10 @@ export default {
     box-shadow: 3px;
 }
 
-.spotify-now-playing img {
+.spotify-not-playing {
-    width: 200px;
+    border: 2px solid black;
-    height: 200px;
+    align-items: center;
-    object-fit: cover;
+    text-align: center;
-    box-shadow: 3px;
+    background: white;
-    margin-bottom: 10px;
 }
 </style>

nginx/vue/src/views/Home.vue

@@ -6,30 +6,47 @@ import Radio from "@/components/Radio.vue";
 <template>
     <main>
         <div class="bordered-1">
-            <h1>Welcome</h1>
+            <div class="bordered-2">
                 <img src="/img/epic.jpeg" />
-
+                <h1>Welcome</h1>
-            <h2>whoami?</h2>
                 <p>Hi im Adam</p>
             </div>
-
-        <div class="bordered-1">
-            <h2>cv</h2>
-            <RouterLink to="/cv">cv</RouterLink>
         </div>
 
         <div class="bordered-1">
+            <div class="bordered-2">
+                <!-- <video>
+                    <source src="/img/memes/1761540684738196.webm" />
+                </video> -->
+                <img src="/img/img.png" />
+                <RouterLink to="/cv"><h2>cv</h2></RouterLink>
+            </div>
+        </div>
+
+        <!-- <div class="bordered-1">
+            <div class="bordered-2">
+                <video>
+                    <source src="/img/demoman/m2-res_720p.mp4" />
+                </video>
                 <h2>bookmarks</h2>
                 <RouterLink to="/bookmarks">bookmarks</RouterLink>
             </div>
+        </div> -->
 
-        <div class="bordered-1">
+        <!-- <div class="bordered-1">
+            <div class="bordered-2">
+                <video>
+                    <source src="/img/demoman/1761570214170465.webm" />
+                </video>
                 <h2>Shrines</h2>
                 <RouterLink to="/shrines/gto">gto</RouterLink>
                 <RouterLink to="/shrines/demoman">demoman</RouterLink>
-            <RouterLink to="/shrines/skipskipbenben">skipskipbenben</RouterLink>
+                <RouterLink to="/shrines/skipskipbenben"
+                    >skipskipbenben</RouterLink
+                >
                 <RouterLink to="/shrines/evangelion">evangelion</RouterLink>
             </div>
+        </div> -->
 
         <div class="bordered-1">
             <Spotify class="border" />
@@ -44,8 +61,8 @@ import Radio from "@/components/Radio.vue";
 main {
     display: flex;
     flex-wrap: wrap;
-    flex-direction: column;
+    flex-direction: row;
-    align-items: center;
+    /*align-items: center;*/
     justify-content: center;
     gap: 1rem;
 }