100 lines
4.5 KiB
HTML
100 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{lang}}">
|
|
|
|
<head>
|
|
<meta name="robots" content="noindex nofollow">
|
|
<link rel="stylesheet" href="../styles.css">
|
|
<title>{{page-title}}</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="language">
|
|
{{language-switcher}}
|
|
</div>
|
|
|
|
<div id="navbar">
|
|
<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>
|
|
|
|
<h2 id="djent">djent</h2>
|
|
|
|
<div style="display: flex;">
|
|
<div class="audiocard audiocard-floating-left">
|
|
<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>
|
|
|
|
<p>{{djent-paragraph}}</p>
|
|
|
|
</div>
|
|
|
|
<h2 id="metalcore">metalcore</h2>
|
|
|
|
<div style="display: flex;">
|
|
<p>{{metalcore-paragraph}}</p>
|
|
|
|
<div class="audiocard audiocard-floating-right">
|
|
<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>
|
|
</div>
|
|
|
|
<h3>invent animate</h3>
|
|
|
|
<p>{{invent-animate-paragraph}}</p>
|
|
|
|
<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> |