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

new image size

Browse Source
This commit is contained in:
Adam French
2025-11-23 22:47:57 +00:00
parent 28bc43860a
commit 38c02b1986
3 changed files with 59 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
backend/main.go
View File

@@ -35,9 +35,9 @@ func main() {
clientSecret := os.Getenv("SPOTIFY_CLIENT_SECRET") clientSecret := os.Getenv("SPOTIFY_CLIENT_SECRET")
spotifyConfig := services.SpotifyConfig{AuthState: authState, RedirectURL: redirectURL, ClientID: clientID, ClientSecret: clientSecret} spotifyConfig := services.SpotifyConfig{AuthState: authState, RedirectURL: redirectURL, ClientID: clientID, ClientSecret: clientSecret}
auth := services.InitSpotifyAuth(spotifyConfig) auth, client := services.InitSpotifyAuth(spotifyConfig)
store := handlers.Store{DB: db, SpotifyAuth: auth, SpotifyClient: nil, SpotifyToken: nil} store := handlers.Store{DB: db, SpotifyAuth: auth, SpotifyClient: client}
r.GET("/posts", store.GetPosts) r.GET("/posts", store.GetPosts)
r.POST("/posts", store.CreatePost) r.POST("/posts", store.CreatePost)

5
html/css/styles.css
View File

@@ -32,3 +32,8 @@ h4 {
width: 100%; width: 100%;
background-color: beige; background-color: beige;
} }
.album-img {
width: 10vw;
height: 10vw;
}

96
html/index.html
View File

@@ -7,26 +7,28 @@
></script> ></script>
<script> <script>
function spotifyPlayer() { function spotifyPlayer() {
return { return {
album_image: '', album_image: "",
artist_name: '', artist_name: "",
song_name: '', song_name: "",
playing: false, playing: false,
async fetchNowPlaying() { async fetchNowPlaying() {
try { try {
const res = await fetch('https://www.adam-french.co.uk/api/spotify'); const res = await fetch(
const data = await res.json(); "https://www.adam-french.co.uk/api/spotify",
this.album_image = data.album_image; );
this.artist_name = data.artist_name; const data = await res.json();
this.song_name = data.song_name; this.album_image = data.album_image;
this.playing = data.playing; this.artist_name = data.artist_name;
} catch (err) { this.song_name = data.song_name;
console.error('Failed to fetch Spotify data', err); this.playing = data.playing;
} } catch (err) {
console.error("Failed to fetch Spotify data", err);
}
},
};
} }
}
}
</script> </script>
<!--<script type="module"> <!--<script type="module">
@@ -43,36 +45,43 @@
</head> </head>
<body> <body>
<canvas <canvas
id="automataCanvas" id="automataCanvas"
style=" style="
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: block; display: block;
z-index: -1; z-index: -1;
" "
></canvas> ></canvas>
<div class="container"> <div class="container">
<h1> Welcome </h1> <h1>Welcome</h1>
<h2> whoami?</h2> <h2>whoami?</h2>
<p>Hi im Adam</p> <p>Hi im Adam</p>
<h2> cv </h2> <h2>cv</h2>
<a href="./cv/index.html">CV</a> <a href="./cv/index.html">CV</a>
<div x-data="spotifyPlayer()" x-init="fetchNowPlaying()" class="spotify-card"> <div
<img :src="album_image" alt="Album Art"> x-data="spotifyPlayer()"
<div class="spotify-info"> x-init="fetchNowPlaying()"
<span x-text="song_name || 'No song playing'"></span> class="spotify-card"
<span x-text="artist_name"></span> >
<span x-text="playing ? 'Playing' : 'Paused'" :class="{'playing': playing}"></span> <img :src="album_image" class="album-img" alt="Album Art" />
</div> <div class="spotify-info">
<div x-text="song_name || 'No song playing'"></div>
<div x-text="artist_name"></div>
<div
x-text="playing ? 'Playing' : 'Paused'"
:class="{'playing': playing}"
></div>
</div>
</div> </div>
<!--<h2> </h2> <!--<h2> </h2>
@@ -82,12 +91,11 @@
</p> </p>
--> -->
<h2>Shrines</h1> <!--<h2>Shrines</h1>
<a href="shrines/evangelion.html">Evangelion</a> <a href="shrines/evangelion.html">Evangelion</a>
<a href="shrines/skipskipbenben.html">Skip skip ben ben</a> <a href="shrines/skipskipbenben.html">Skip skip ben ben</a>
<a href="shrines/demoman.html">demoman</a> <a href="shrines/demoman.html">demoman</a>-->
<!--<a href="shrines/gto.html">GTO</a>--> <!--<a href="shrines/gto.html">GTO</a>-->
</div> </div>
</body> </body>
</html> </html>