marco/personal-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added music players to music page
Deploy static site / deploy (push) Successful in 38s
Details

Browse Source
This commit is contained in:
marco
2026-04-24 13:31:09 +02:00
parent e36501a6fd
commit 6e3715af7b
5 changed files with 102 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
template-music.html
+61 -6
View File
@@ -16,19 +16,74 @@
<a href="index.html">home</a>
<a href="music.html">music</a>
</div>
<div class="nowplaying">
<iframe class="nowplaying" title="last.fm now playing widget"
src="https://lastfm-embed.vercel.app/api/currently-playing?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6"></iframe>
</div>
<header id="about">
<h1>{{music-heading}}</h1>
<p>{{music-paragraph}}</p>
</header>
<div id="nowplayingwidget">
<iframe height="160" title="last.fm now playing widget" src="https://lastfm-embed.vercel.app/api/currently-playing?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6"></iframe>
<h2 id="djent">djent</h2>
<div class="audiocard">
<img class="albumcoversmall"
src="https://archive.org/download/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321/mbid-b0aba2a0-c210-4201-992e-0c5cc4069321-28191981668_thumb250.jpg"
alt="Album cover of Periphery's Juggernaut: Alpha">
<div class="audioinner">
<p>Periphery - Rainbow Gravity</p>
<a href="https://sumerianrecords.bandcamp.com/album/juggernaut-alpha">Juggernaut: Alpha</a>
<audio controls>
<source src="../music/Periphery - Juggernnaut Alpha.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<h2>some music stats</h2>
<iframe width="600" height="700" title="last.fm top songs 7 days" src="https://lastfm-embed.vercel.app/api/top-tracks?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=7day&layout=vertical&rows=0&columns=2"></iframe>
<iframe width="600" height="700" title="last.fm top artists last month" src="https://lastfm-embed.vercel.app/api/top-artists?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=1month&layout=vertical&rows=6&columns=2&usePlaceholderImage=false"></iframe>
<iframe width="600" title="last.fm top artists last month" src="https://lastfm-embed.vercel.app/api/stats?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&numberFormat=periods"></iframe>
<h2 id="metalcore">metalcore</h2>
<div class="audiocard">
<img class="albumcoversmall"
src="https://archive.org/download/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054/mbid-886f742e-0bb9-4aad-992b-f43b39f6e054-26050116040_thumb250.jpg"
alt="Album cover of Invent Animate's Greyview">
<div class="audioinner">
<p>Invent Animate - Cloud Cascade</p>
<a href="https://inventanimate.bandcamp.com/album/greyview">Greyview</a>
<audio controls>
<source src="../music/Invent Animate - Cloud Cascade.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<h2 id="progressive">progressive metal</h2>
<div class="audiocard">
<img class="albumcoversmall"
src="https://archive.org/download/mbid-dcb6d817-0f33-4faa-8720-fb720396a0a8/mbid-dcb6d817-0f33-4faa-8720-fb720396a0a8-14429420393_thumb250.jpg"
alt="Album cover of Fallujah's Dreamless">
<div class="audioinner">
<p>Fallujah - Dreamless</p>
<a href="https://fallujah.bandcamp.com/album/dreamless">Dreamless</a>
<audio controls>
<source src="../music/Fallujah - Dreamless.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
<h2 id="stats">some music stats</h2>
<iframe width="550" height="650" title="last.fm top songs 7 days"
src="https://lastfm-embed.vercel.app/api/top-tracks?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=7day&layout=vertical&rows=0&columns=2"></iframe>
<iframe width="550" height="650" title="last.fm top artists last month"
src="https://lastfm-embed.vercel.app/api/top-artists?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=true&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&limit=12&period=1month&layout=vertical&rows=6&columns=2&usePlaceholderImage=false"></iframe>
<iframe width="500" title="last.fm top artists last month"
src="https://lastfm-embed.vercel.app/api/stats?user=havulinnaan&lang={{lang-short}}&theme=catppuccinMocha&borderSize=0&borderRadius=16&showTitle=false&bgColor=%2351324A&textColor=%23DDDDEE&urlColor=%23DD7FB6&scrobbleColor=%23DD7FB6&numberFormat=periods"></iframe>
</body>
</html>