adamf/web_server
1
1
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

new style

Browse Source
This commit is contained in:
Adam French
2025-11-28 18:15:43 +00:00
parent c528f3dadf
commit a776c852b2
5 changed files with 104 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
nginx/vue/public/css/styles.css
View File

@@ -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;

13
nginx/vue/src/App.vue
View File

@@ -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>

31
nginx/vue/src/components/Radio.vue
View File

@@ -1,7 +1,11 @@
<template>
<div>
<audio v-if="streamLive" controls :src="streamUrl" ref="audio"></audio>
<p v-else>Stream is currently offline.</p>
<div v-if="streamLive" class="stream-live">
<img src="/img/tmpen31z3pe.PNG" />
<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>

45
nginx/vue/src/components/Spotify.vue
View File

@@ -1,10 +1,13 @@
<template>
<div class="spotify-now-playing">
<img :src="playing ? albumImage : '/img/Untitled.png'" />
<p><strong v-if="playing">Song:</strong> {{ songName }}</p>
<p><strong v-if="playing">Artist:</strong> {{ artistName }}</p>
<p v-if="playing">Status: Playing</p>
<p v-else>Status: Not playing</p>
<div v-if="playing" class="spotify-now-playing">
<img :src="albumImage" />
<p><strong>Song:</strong> {{ songName }}</p>
<p><strong>Artist:</strong> {{ artistName }}</p>
<p>Is what im currently listening to rnrnrn ^_^</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();
albumImage.value = data.album_image;
artistName.value = data.artist_name;
songUrl.value = data.song_url;
songName.value = data.song_name;
playing.value = data.playing;
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 {
width: 200px;
height: 200px;
object-fit: cover;
box-shadow: 3px;
margin-bottom: 10px;
.spotify-not-playing {
border: 2px solid black;
align-items: center;
text-align: center;
background: white;
}
</style>

57
nginx/vue/src/views/Home.vue
View File

@@ -6,30 +6,47 @@ import Radio from "@/components/Radio.vue";
<template>
<main>
<div class="bordered-1">
<h1>Welcome</h1>
<img src="/img/epic.jpeg" />
<h2>whoami?</h2>
<p>Hi im Adam</p>
<div class="bordered-2">
<img src="/img/epic.jpeg" />
<h1>Welcome</h1>
<p>Hi im Adam</p>
</div>
</div>
<div class="bordered-1">
<h2>cv</h2>
<RouterLink to="/cv">cv</RouterLink>
<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">
<h2>bookmarks</h2>
<RouterLink to="/bookmarks">bookmarks</RouterLink>
</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">
<h2>Shrines</h2>
<RouterLink to="/shrines/gto">gto</RouterLink>
<RouterLink to="/shrines/demoman">demoman</RouterLink>
<RouterLink to="/shrines/skipskipbenben">skipskipbenben</RouterLink>
<RouterLink to="/shrines/evangelion">evangelion</RouterLink>
</div>
<!-- <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/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;
align-items: center;
flex-direction: row;
/*align-items: center;*/
justify-content: center;
gap: 1rem;
}