first commit
Tomas Dvorak
|
After Width: | Height: | Size: 70 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 203 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 754 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 3.9 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 66 KiB |
|
After Width: | Height: | Size: 112 KiB |
|
After Width: | Height: | Size: 102 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 107 KiB |
|
After Width: | Height: | Size: 65 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 134 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 56 KiB |
|
After Width: | Height: | Size: 6.8 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 492 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 48 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 58 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 60 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 94 KiB |
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 177 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 24 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 293 KiB |
|
After Width: | Height: | Size: 52 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 9.4 KiB |
|
After Width: | Height: | Size: 186 KiB |
|
After Width: | Height: | Size: 44 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 4.6 KiB |
|
After Width: | Height: | Size: 167 KiB |
|
After Width: | Height: | Size: 193 KiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 57 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 24 KiB |
@@ -0,0 +1,945 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="swiper-bundle.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="shortcut icon" href="https://tdvorak.dev/icon.png" sizes="any" type="image/svg+xml">
|
||||
<title>TD - Music</title>
|
||||
<script defer src="last-song.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<nav class="main-menu">
|
||||
<div>
|
||||
<div class="user-info">
|
||||
<a href="https://tdvorak.dev" target="_blank"><img
|
||||
src="logo.png" class="logo"/>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
|
||||
<section class="content">
|
||||
<div class="left-content">
|
||||
<div class="slider-container">
|
||||
<h1>Listening Now:</h1>
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
src="Images/in-flames.webp" />
|
||||
<div class="slide-overlay">
|
||||
<h2>In Flames</h2>
|
||||
<a href="https://open.spotify.com/artist/57ylwQTnFnIhJh4nu4rxCs?si=tgWCb1zlQv-yLd648bRkqw" target="_blank">
|
||||
Listen Now <i class="fa-solid fa-circle-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
src="Images/lorna-shore.webp" class="lorna"/>
|
||||
<div class="slide-overlay">
|
||||
<h2>Lorna Shore</h2>
|
||||
<a href="https://open.spotify.com/artist/6vXYoy8ouRVib302zxaxFF?si=e8f5b607f74146bd" target="_blank">
|
||||
Listen Now <i class="fa-solid fa-circle-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
src="Images/ice-nine-kills.webp" />
|
||||
<div class="slide-overlay">
|
||||
<h2>Ice Nine Kills</h2>
|
||||
<a href="https://open.spotify.com/artist/52qKfVcIV4GS8A8Vay2xtt?si=e0e3418fb08443a8" target="_blank">
|
||||
Listen Now <i class="fa-solid fa-circle-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
src="Images/linkin-park.webp" />
|
||||
<div class="slide-overlay">
|
||||
<h2>Linkin Park</h2>
|
||||
<a href="https://open.spotify.com/artist/6XyY86QOPPrYVGvF9ch6wz?si=25708e6eb41141cd" target="_blank">
|
||||
Listen Now <i class="fa-solid fa-circle-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
src="Images/dymytry.webp" />
|
||||
<div class="slide-overlay">
|
||||
<h2>Dymytry</h2>
|
||||
<a href="https://open.spotify.com/artist/74jZjGsZ4aBEZbtrvytbIZ?si=24179897ca034615" target="_blank">
|
||||
Listen Now <i class="fa-solid fa-circle-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide xslide">
|
||||
<img
|
||||
src="Images/hollow-front.webp" />
|
||||
<div class="slide-overlay">
|
||||
<h2>Hollow Front</h2>
|
||||
<a href="https://open.spotify.com/artist/50YmW8f4U5IxTIwYI9mGAe?si=jFWJsh8fSsOxxqr0-8y8sg" target="_blank">
|
||||
Listen Now <i class="fa-solid fa-circle-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<img
|
||||
src="Images/slipknot.webp" />
|
||||
<div class="slide-overlay">
|
||||
<h2>Slipknot</h2>
|
||||
<a href="https://open.spotify.com/artist/05fG473iIaoy82BF1aGhL8?si=DWCv-fyvQHugmjZT69wXIQ" target="_blank">
|
||||
Listen Now <i class="fa-solid fa-circle-play"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="last-played-song">
|
||||
<h1>Currently Playing Song:</h1>
|
||||
<div id="last-played-song-info">
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="splitter"></div>
|
||||
|
||||
<div class="artists">
|
||||
<h1>Favorite Artists:</h1>
|
||||
<div class="artist-container containers">
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/aday.webp"
|
||||
alt="" />
|
||||
<p>A Day To Remember</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/against.webp"
|
||||
alt="" />
|
||||
<p>Against The Current</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/all.webp"
|
||||
alt="" />
|
||||
<p>All That Remains</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/apo.webp"
|
||||
alt="" />
|
||||
<p>Apocalyptica</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/arch.webp"
|
||||
alt="" />
|
||||
<p>Architects</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/ask.webp"
|
||||
alt="" />
|
||||
<p>Asking Alexandria</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/avenged.webp"
|
||||
alt="" />
|
||||
<p>Avenged Sevenfold</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/baby.webp"
|
||||
alt="" />
|
||||
<p>BABYMETAL</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/bad.webp"
|
||||
alt="" />
|
||||
<p>Bad Omens</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/black.webp"
|
||||
alt="" />
|
||||
<p>Black Veil Brides</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/bmth.webp"
|
||||
alt="" />
|
||||
<p>Bring Me The Horizon</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/bull.webp"
|
||||
alt="" />
|
||||
<p>Bullet For My Valentine</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/cryst.webp"
|
||||
alt="" />
|
||||
<p>Crystal Lake</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/dist.webp"
|
||||
alt="" />
|
||||
<p>Disturbed</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/dymy.webp"
|
||||
alt="" />
|
||||
<p>Dymytry</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/ele.webp"
|
||||
alt="" />
|
||||
<p>Electric Callboy</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/fall.webp"
|
||||
alt="" />
|
||||
<p>Fall Out Boy</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/falling.webp"
|
||||
alt="" />
|
||||
<p>Falling In Reverse</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/five.webp"
|
||||
alt="" />
|
||||
<p>Five Finger Death Punch</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/ghost.webp"
|
||||
alt="" />
|
||||
<p>Ghostemane</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/holy.webp"
|
||||
alt="" />
|
||||
<p>Hollywood Undead</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/ice.webp"
|
||||
alt="" />
|
||||
<p>Ice Nine Kills</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/in.webp"
|
||||
alt="" />
|
||||
<p>In Flames</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/kord.webp"
|
||||
alt="" />
|
||||
<p>Kordhell</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/korn.webp"
|
||||
alt="" />
|
||||
<p>Korn</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/link.webp"
|
||||
alt="" />
|
||||
<p>Linkin Park</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/little.webp"
|
||||
alt="" />
|
||||
<p>Little V.</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/lorna.webp"
|
||||
alt="" />
|
||||
<p>Lorna Shore</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/mem.webp"
|
||||
alt="" />
|
||||
<p>Memphis May Fire</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/mike.webp"
|
||||
alt="" />
|
||||
<p>Mike Shinoda</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/moti.webp"
|
||||
alt="" />
|
||||
<p>Motionless In White</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/mydark.webp"
|
||||
alt="" />
|
||||
<p>My Darkest Days</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/nik.webp"
|
||||
alt="" />
|
||||
<p>Nik Nocturnal</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/papa.webp"
|
||||
alt="" />
|
||||
<p>Papa Roach</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/park.webp"
|
||||
alt="" />
|
||||
<p>Parkway Drive</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/power.webp"
|
||||
alt="" />
|
||||
<p>Powerwolf</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/reznik.webp"
|
||||
alt="" />
|
||||
<p>Reznik</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/saba.webp"
|
||||
alt="" />
|
||||
<p>Sabaton</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/skil.webp"
|
||||
alt="" />
|
||||
<p>Skillet</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/slaugh.webp"
|
||||
alt="" />
|
||||
<p>Slaughter to Prevail</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/sleep.webp"
|
||||
alt="" />
|
||||
<p>Sleep Token</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/slip.webp"
|
||||
alt="" />
|
||||
<p>Slipknot</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/sum.webp"
|
||||
alt="" />
|
||||
<p>Sum 41</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/syst.webp"
|
||||
alt="" />
|
||||
<p>System Of A Down</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/theani.webp"
|
||||
alt="" />
|
||||
<p>The Animal In Me</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/off.webp"
|
||||
alt="" />
|
||||
<p>The Offspring</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/thou.webp"
|
||||
alt="" />
|
||||
<p>Thousand Foot Krutch</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/three.webp"
|
||||
alt="" />
|
||||
<p>Three Days Graceh</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/wage.webp"
|
||||
alt="" />
|
||||
<p>Wage War</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/we.webp"
|
||||
alt="" />
|
||||
<p>We Came As Romans</p>
|
||||
</div>
|
||||
|
||||
<div class="artist">
|
||||
<img
|
||||
src="Images/suis.webp"
|
||||
alt="" />
|
||||
<p>$uicideboy$</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splitter"></div>
|
||||
|
||||
<div class="albums">
|
||||
<h1>Favorite Albums:</h1>
|
||||
<div class="album-container containers">
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Slipknot/We-are-not-your-kind" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/wearenot.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>We Are Not Your Kind</h2>
|
||||
<p>Slipknot</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Slipknot/Iowa" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/iowa.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>IOWA</h2>
|
||||
<p>Slipknot</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Slipknot/5-the-gray-chapter" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/thegray.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>.5: The Gray Chapter</h2>
|
||||
<p>Slipknot</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Slipknot/All-hope-is-gone" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/allhope.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>All Hope Is Gone</h2>
|
||||
<p>Slipknot</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Linkin-park/Meteora-20th-anniversary-edition" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/meteora.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Meteora (20th Anniversary Edition)</h2>
|
||||
<p>Linkin Park</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Linkin-park/Minutes-to-midnight" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/minutes.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Minutes to Midnight</h2>
|
||||
<p>Linkin Park</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Linkin-park/Hybrid-theory-deluxe-edition" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/hybrid.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Hybrid Theory</h2>
|
||||
<p>Linkin Park</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Lorna-shore/Pain-remains" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/pain.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Pain Remains</h2>
|
||||
<p>Lorna Shore</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://open.spotify.com/album/0okokJG5I0FvfQBdLo3TPv?si=YxvCe1dGQCKBtSUwyf36XQ" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/pharma.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Pharmageddon</h2>
|
||||
<p>Dymytry</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Dymytry/Revolter" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/revolter.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Revolter</h2>
|
||||
<p>Dymytry</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Bring-me-the-horizon/Thats-the-spirit" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/thats.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>That's The Spirit</h2>
|
||||
<p>Bring Me The Horizon</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Bring-me-the-horizon/Sempiternal" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/sempite.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Sempiternal</h2>
|
||||
<p>Bring Me The Horizon</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/Bring-me-the-horizon/Post-human-survival-horror" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/post.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>Post Human: Survival Horror</h2>
|
||||
<p>Bring Me The Horizon</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<a href="https://genius.com/albums/In-flames/I-the-mask" target="_blank">
|
||||
<div class="album-frame">
|
||||
<img
|
||||
src="Images/I.webp"
|
||||
alt="" />
|
||||
</div>
|
||||
</a>
|
||||
<div>
|
||||
<h2>I, the Mask</h2>
|
||||
<p>In Flames</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="splitter"></div>
|
||||
|
||||
<div class="albums">
|
||||
<h1>Favorite Music Videos:</h1>
|
||||
<div class="album-container containers">
|
||||
<div class="album">
|
||||
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/qMXESlny4-I?si=AWTPv5BfLurH5r6A" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<div>
|
||||
<h2>Watch The World Burn</h2>
|
||||
<p>Falling In Reverse</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/HMluqSGag5E?si=gfktfwFNbd32ATzr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<div>
|
||||
<h2>Friendly Fire</h2>
|
||||
<p>Linkin Park</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/9FnG9lGLyEM?si=67yAB57194XnwAMr" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<div>
|
||||
<h2>Yen</h2>
|
||||
<p>Slipknot</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/ozOb5FcnDf4?si=JMMuOZ3mzCNbiUUI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<div>
|
||||
<h2>Hip To Be Scared</h2>
|
||||
<p>Ice Nine Kills</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/0XjjBP3pWkM?si=0sTgOhfCDKdmrb7i" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<div>
|
||||
<h2>Černá Je Metal</h2>
|
||||
<p>Dymytry</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/SYwnlU8jdQw?si=nxY65g1-2algKUn6" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<div>
|
||||
<h2>Pravda a Lež</h2>
|
||||
<p>Dymytry</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="album">
|
||||
<iframe class="bandsvid" width="560" height="315" src="https://www.youtube.com/embed/wszIGQ0BwKE?si=eqbIdOx6H22u8pQ5" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
|
||||
<div>
|
||||
<h2>Lidice</h2>
|
||||
<p>Dymytry</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="right-content">
|
||||
<div class="recommended-songs">
|
||||
<h1>Most Favorite Songs:</h1>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/373gDROnujxNTFa1FojYIl?si=87aa94b5834a442c" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/1.webp"
|
||||
alt="1" />
|
||||
<div class="one">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Lost</h2>
|
||||
<p>Linkin Park</p>
|
||||
</div>
|
||||
<span>3:19</span>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/2P4OICZRVAQcYAV2JReRfj?si=2a5fd848a9fc4073" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/2.webp"
|
||||
alt="2" />
|
||||
<div class="overlay">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Waiting For Love</h2>
|
||||
<p>Avicii</p>
|
||||
</div>
|
||||
<span>3:50</span>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/2UREu1Y8CO4jXkbvqAtP7g?si=d9301c62effc44fd" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/3.webp"
|
||||
alt="3" />
|
||||
<div class="overlay2">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Monster</h2>
|
||||
<p>Skillet</p>
|
||||
</div>
|
||||
<span>2:58</span>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/3Z1BDC3XSs3FVYwrR5ldEu?si=95f48ff89a6d4d30" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/4.webp"
|
||||
alt="4" />
|
||||
<div class="overlay">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Hyper-Insomnia-Para-Condrioid</h2>
|
||||
<p>Sum 41</p>
|
||||
</div>
|
||||
<span>2:32</span>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/4QaxyJsbo5AR3bnEB7ko8h?si=1724d628034a470c" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/5.webp"
|
||||
alt="5" />
|
||||
<div class="overlay2">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Heartless Madness</h2>
|
||||
<p>Dynazty</p>
|
||||
</div>
|
||||
<span>3:59</span>
|
||||
</div>
|
||||
|
||||
<div class="song-container">
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/0X6ph2SjyOCqfnN7rMDtXq?si=a5c4c9c0b9d54d94" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/6.webp"
|
||||
alt="6" />
|
||||
<div class="overlay">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>A Conversation with Death</h2>
|
||||
<p>Khemmis</p>
|
||||
</div>
|
||||
<span>4:50</span>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/6FhB5ZyT4JsIJ0ozDlXCIp?si=e71846d20e114f7b" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/7.webp"
|
||||
alt="7" />
|
||||
<div class="overlay2">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Save Yourself</h2>
|
||||
<p>My Darkest Days</p>
|
||||
</div>
|
||||
<span>3:41</span>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/6o39Ln9118FKTMbM4BvcEy?si=498caad812ed4e26" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/8.webp"
|
||||
alt="8" />
|
||||
<div class="overlay">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Drown</h2>
|
||||
<p>Bring Me The Horizon</p>
|
||||
</div>
|
||||
<span>3:42</span>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/23Vf9hNoBN8AacpUUHbiRy?si=32e228f0bcc54fbe" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/9.webp"
|
||||
alt="9" />
|
||||
<div class="overlay2">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>War</h2>
|
||||
<p>Sum 41</p>
|
||||
</div>
|
||||
<span>3:29</span>
|
||||
</div>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/1xBRGN41DWx2vwNFY5CvGe?si=5271ad99c4654250" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/10.webp"
|
||||
alt="10" />
|
||||
<div class="overlay">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Night Witches</h2>
|
||||
<p>Sabaton</p>
|
||||
</div>
|
||||
<span>3:01</span>
|
||||
</div>
|
||||
<h1>Honorable Mention:</h1>
|
||||
|
||||
<div class="song">
|
||||
<a href="https://open.spotify.com/track/3RptaQ5Xb8WvtpItZ2f9Hi?si=6bd09e264b454e62e" target="_blank">
|
||||
<div class="song-img">
|
||||
<img
|
||||
src="Images/count/crown.webp"
|
||||
alt="9" />
|
||||
<div class="sli">
|
||||
<i class="fa-solid fa-play"></i>
|
||||
</div>
|
||||
</div></a>
|
||||
<div class="song-title">
|
||||
<h2>Snuff</h2>
|
||||
<p>Slipknot</p>
|
||||
</div>
|
||||
<span>4:36</span>
|
||||
</div>
|
||||
<div class="splitter2"></div>
|
||||
<h4 style="text-align: center; padding-top: 5px;">© Copyright 2024<br>Tomas Dvorak</h4>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
<script src="swiper-bundle.min.js"></script>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,73 @@
|
||||
const clientId = '0b5fbd7968674f6d9535b5d12e124e23';
|
||||
const clientSecret = '3e58f955fa5b4f20a4a83102bb113f5c';
|
||||
|
||||
async function getAccessToken() {
|
||||
const response = await fetch('https://accounts.spotify.com/api/token', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
'Authorization': 'Basic ' + btoa(clientId + ':' + clientSecret)
|
||||
},
|
||||
body: 'grant_type=client_credentials'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
return data.access_token;
|
||||
}
|
||||
|
||||
async function getCurrentlyPlayingSong(accessToken) {
|
||||
const response = await fetch('https://api.spotify.com/v1/me/player/currently-playing', {
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + accessToken
|
||||
}
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
return data;
|
||||
}
|
||||
|
||||
function formatTime(ms) {
|
||||
const minutes = Math.floor(ms / 60000);
|
||||
const seconds = ((ms % 60000) / 1000).toFixed(0);
|
||||
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
|
||||
}
|
||||
|
||||
async function displayCurrentlyPlayingSong() {
|
||||
const accessToken = await getAccessToken();
|
||||
if (!accessToken) return;
|
||||
|
||||
const currentlyPlaying = await getCurrentlyPlayingSong(accessToken);
|
||||
if (!currentlyPlaying || !currentlyPlaying.is_playing) {
|
||||
document.getElementById('last-played-song-info').innerHTML = '<p>No song is currently playing.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
const song = currentlyPlaying.item;
|
||||
const progress = currentlyPlaying.progress_ms;
|
||||
const duration = song.duration_ms;
|
||||
|
||||
const songInfoDiv = document.getElementById('last-played-song-info');
|
||||
songInfoDiv.innerHTML = `
|
||||
<div class="song-info-container">
|
||||
<img src="${song.album.images[0].url}" alt="${song.album.name}" class="album-cover">
|
||||
<div class="song-details">
|
||||
<p><strong>Song:</strong> ${song.name}</p>
|
||||
<p><strong>Artist:</strong> ${song.artists[0].name}</p>
|
||||
<p><strong>Album:</strong> ${song.album.name}</p>
|
||||
<div class="timeline">
|
||||
<span>${formatTime(progress)}</span>
|
||||
<div class="progress-bar">
|
||||
<div class="progress" style="width: ${(progress / duration) * 100}%"></div>
|
||||
</div>
|
||||
<span>${formatTime(duration)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Initial call to display the currently playing song
|
||||
displayCurrentlyPlayingSong();
|
||||
|
||||
// Refresh the currently playing song every 30 seconds
|
||||
setInterval(displayCurrentlyPlayingSong, 30000);
|
||||
@@ -0,0 +1,51 @@
|
||||
$uicideboy$ -
|
||||
A Day To Remember -
|
||||
Against The Current -
|
||||
All That Remains -
|
||||
Apocalyptica -
|
||||
Architects -
|
||||
Asking Alexandria -
|
||||
Avenged Sevenfold -
|
||||
BABYMETAL -
|
||||
Bad Omens -
|
||||
Black Veil Brides -
|
||||
Bring Me The Horizon -
|
||||
Bullet For My Valentine -
|
||||
Crystal Lake -
|
||||
Disturbed -
|
||||
Dymytry -
|
||||
Electric Callboy -
|
||||
Fall Out Boy -
|
||||
Falling In Reverse -
|
||||
Five Finger Death Punch -
|
||||
Ghostemane -
|
||||
Hollywood Undead -
|
||||
Ice Nine Kills -
|
||||
In Flames -
|
||||
Kordhell -
|
||||
Korn -
|
||||
Linkin Park -
|
||||
Little V. -
|
||||
Lorna Shore -
|
||||
Memphis May Fire -
|
||||
Mike Shinoda -
|
||||
Motionless In White -
|
||||
My Darkest Days -
|
||||
Nik Nocturnal -
|
||||
Papa Roach -
|
||||
Parkway Drive -
|
||||
Powerwolf -
|
||||
Reznik -
|
||||
Sabaton -
|
||||
Skillet -
|
||||
Slaughter to Prevail -
|
||||
Sleep Token -
|
||||
Slipknot -
|
||||
Sum 41 -
|
||||
System Of A Down -
|
||||
The Animal In Me -
|
||||
The Offspring -
|
||||
Thousand Foot Krutch -
|
||||
Three Days Grace -
|
||||
Wage War -
|
||||
We Came As Romans -
|
||||
|
After Width: | Height: | Size: 81 KiB |
@@ -0,0 +1,95 @@
|
||||
const navItems = document.querySelectorAll(".nav-item");
|
||||
|
||||
navItems.forEach((navItem, i) => {
|
||||
navItem.addEventListener("click", () => {
|
||||
navItems.forEach((item, j) => {
|
||||
item.className = "nav-item";
|
||||
});
|
||||
navItem.className = "nav-item active";
|
||||
});
|
||||
});
|
||||
|
||||
const containers = document.querySelectorAll(".containers");
|
||||
|
||||
containers.forEach((container) => {
|
||||
let isDragging = false;
|
||||
let startX;
|
||||
let scrollLeft;
|
||||
|
||||
container.addEventListener("mousedown", (e) => {
|
||||
isDragging = true;
|
||||
startX = e.pageX - container.offsetLeft;
|
||||
scrollLeft = container.scrollLeft;
|
||||
});
|
||||
|
||||
container.addEventListener("mousemove", (e) => {
|
||||
if (!isDragging) return;
|
||||
e.preventDefault();
|
||||
|
||||
const x = e.pageX - container.offsetLeft;
|
||||
const step = (x - startX) * 0.6;
|
||||
container.scrollLeft = scrollLeft - step;
|
||||
});
|
||||
|
||||
container.addEventListener("mouseup", () => {
|
||||
isDragging = false;
|
||||
});
|
||||
|
||||
container.addEventListener("mouseleave", () => {
|
||||
isDragging = false;
|
||||
});
|
||||
});
|
||||
|
||||
var swiper = new Swiper(".swiper", {
|
||||
effect: "coverflow",
|
||||
grabCursor: true,
|
||||
centeredSlides: true,
|
||||
loop: true,
|
||||
speed: 600,
|
||||
slidesPerView: "auto",
|
||||
coverflowEffect: {
|
||||
rotate: 10,
|
||||
stretch: 120,
|
||||
depth: 200,
|
||||
modifier: 1,
|
||||
slideShadows: false,
|
||||
},
|
||||
on: {
|
||||
click(event) {
|
||||
swiper.slideTo(this.clickedIndex);
|
||||
},
|
||||
},
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
},
|
||||
});
|
||||
|
||||
// JavaScript
|
||||
function checkActiveElement() {
|
||||
let closest = null;
|
||||
let closestDistance = Infinity;
|
||||
|
||||
document.querySelectorAll('.slide-overlay').forEach((element) => {
|
||||
const rect = element.getBoundingClientRect();
|
||||
const distance = Math.abs(rect.top);
|
||||
|
||||
if (distance < closestDistance) {
|
||||
closest = element;
|
||||
closestDistance = distance;
|
||||
}
|
||||
});
|
||||
|
||||
if (closest) {
|
||||
document.querySelectorAll('.slide-overlay.active').forEach((element) => {
|
||||
element.classList.remove('active');
|
||||
});
|
||||
|
||||
closest.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Call the function immediately to check on page load
|
||||
checkActiveElement();
|
||||
|
||||
// Call the function at regular intervals to check without user action
|
||||
setInterval(checkActiveElement, 500); // checks every second
|
||||
@@ -0,0 +1,679 @@
|
||||
/* author: https://codepen.io/ecemgo/pen/MWxjXeq
|
||||
Ecem Gokdogan */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900;1000&family=Roboto:wght@300;400;500;700&display=swap");
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
nav ul,
|
||||
nav ul li {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(1.2rem, 3vw, 1.5rem);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Nunito", sans-serif;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background-color: #090909;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
/* MAIN MENU */
|
||||
|
||||
main {
|
||||
display: grid;
|
||||
grid-template-columns: 11% 89%;
|
||||
width: 95%;
|
||||
margin: 40px;
|
||||
background: rgb(9, 9, 9);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.5);
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset,
|
||||
0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.main-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
border-radius: 15px 0 0 15px;
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.5);
|
||||
padding: 12px 0 20px;
|
||||
overflow: hidden;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.user-info img {
|
||||
padding: 12px 24px 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.user-info p {
|
||||
color: #fff;
|
||||
font-size: clamp(0.8rem, 3vw, 1rem);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
padding: 0 6px 32px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-item a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
padding: 12px 0;
|
||||
margin: 0 8px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
.nav-icon {
|
||||
width: 40px;
|
||||
height: 20px;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
display: block;
|
||||
width: 70px;
|
||||
height: 20px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
/* CONTENT */
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
grid-template-columns: 75% 25%;
|
||||
}
|
||||
|
||||
.content2 {
|
||||
display: grid;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
|
||||
/* LEFT CONTENT */
|
||||
|
||||
.left-content {
|
||||
padding: 30px 20px;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
/* SLIDER */
|
||||
|
||||
.slider-container {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 100%;
|
||||
padding: 16px 0 40px;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
border-radius: 20px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255, 255, 255, 0.897);
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
--swiper-pagination-bottom: -4px;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #ffffffe7;
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.swiper-pagination-bullet-active {
|
||||
background-color: #fff;
|
||||
width: 18px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.slide-overlay {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: flex-end;
|
||||
row-gap: 12px;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 98%;
|
||||
border-radius: 20px;
|
||||
padding: 30px;
|
||||
background: transparent;
|
||||
transition: background 1s ease-in-out;
|
||||
box-shadow: 10px 12px 0px 0px #ffffff;
|
||||
}
|
||||
|
||||
.slide-overlay::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; right: 0; bottom: 0; left: 0;
|
||||
background: linear-gradient(
|
||||
240deg,
|
||||
transparent 20%,
|
||||
transparent 50%,
|
||||
rgba(255, 0, 0, 0.637) 100%
|
||||
);
|
||||
opacity: 0;
|
||||
border-radius: 20px;
|
||||
transition: opacity 0.5s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.slide-overlay.active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.slide-overlay h2 {
|
||||
font-size: clamp(1.2rem, 3vw, 2.2rem);
|
||||
font-weight: 800;
|
||||
text-shadow: 5px 5px 0 #ffffff;
|
||||
color: transparent;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.slide-overlay a {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
column-gap: 10px;
|
||||
width: max-content;
|
||||
padding: 12px 16px;
|
||||
background: transparent;
|
||||
color: #ffffff;
|
||||
border: 1px solid rgb(255, 255, 255);
|
||||
border-radius: 12px;
|
||||
outline: 0;
|
||||
font-size: clamp(0.7rem, 3vw, 1rem);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
|
||||
rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
|
||||
transition: all 0.4s linear;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.slide-overlay a:is(:hover, :focus-visible) {
|
||||
background: #fff;
|
||||
color: rgb(0, 0, 0);
|
||||
box-shadow: 4px 4px 0 2px rgb(0, 0, 0);
|
||||
}
|
||||
|
||||
/* Containers of Artist and Albums */
|
||||
|
||||
.containers {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 0 12px;
|
||||
overflow-x: auto;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
/* ARTISTS */
|
||||
|
||||
.artists h1 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.artist-container {
|
||||
column-gap: 20px;
|
||||
}
|
||||
|
||||
.artist {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
align-items: center;
|
||||
grid-template-rows: 8fr 2fr;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.artist img {
|
||||
object-fit: cover;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
width: 140px;
|
||||
scale: 0.9;
|
||||
aspect-ratio: 1/1;
|
||||
margin-bottom: 8px;
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
|
||||
.artist img:hover {
|
||||
border: 4px solid rgb(255, 0, 0);
|
||||
box-shadow: rgb(255, 0, 0) 0px 3px 14px -3px,
|
||||
rgb(255, 0, 0) 0px -3px 5px inset;
|
||||
box-shadow: none inset;
|
||||
transform: rotate(-3deg) scale(1.12);
|
||||
}
|
||||
|
||||
.artist p {
|
||||
font-size: clamp(0.9rem, 3vw, 1rem);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ALBUMS */
|
||||
|
||||
.albums h1 {
|
||||
margin: 60px 0 14px;
|
||||
}
|
||||
|
||||
.album-container {
|
||||
column-gap: 24px;
|
||||
}
|
||||
|
||||
.album {
|
||||
display: grid;
|
||||
grid-auto-flow: dense;
|
||||
grid-template-rows: 5fr 2fr;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
.album-frame {
|
||||
position: relative;
|
||||
width: 180px;
|
||||
aspect-ratio: 1/1;
|
||||
border: 2px solid rgb(255, 255, 255);
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.album-frame img {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.8s;
|
||||
}
|
||||
|
||||
.album-frame img:hover {
|
||||
transform: rotate(3deg) scale(1.2);
|
||||
}
|
||||
|
||||
.album-frame:hover{
|
||||
border: 4px solid rgb(255, 0, 0);
|
||||
box-shadow: rgb(255, 0, 0) 0px 3px 14px -3px,
|
||||
rgb(255, 0, 0) 0px -3px 5px inset;
|
||||
}
|
||||
|
||||
.album h2 {
|
||||
font-size: clamp(0.9rem, 4vw, 1.1rem);
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
@supports (-webkit-line-clamp: 2) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: initial;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
}
|
||||
|
||||
.album p {
|
||||
font-size: clamp(0.9rem, 4vw, 1rem);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Containers Scrollbar Style */
|
||||
|
||||
.artist-container::-webkit-scrollbar,
|
||||
.album-container::-webkit-scrollbar {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
|
||||
.artist-container::-webkit-scrollbar-thumb,
|
||||
.album-container::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0 0 0.5rem rgb(255, 255, 255);
|
||||
background-color: rgb(255, 255, 255);
|
||||
outline: none;
|
||||
border-radius: 40px;
|
||||
}
|
||||
|
||||
/* RIGHT CONTENT */
|
||||
|
||||
.right-content {
|
||||
display: grid;
|
||||
grid-template-rows: 60% 40%;
|
||||
border-radius: 0 15px 15px 0;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.5);
|
||||
padding: 30px 20px;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
/* SONGS */
|
||||
|
||||
.recommended-songs h1 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.song-container {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.song {
|
||||
display: grid;
|
||||
grid-template-columns: 26% auto 10%;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.song-img {
|
||||
position: relative;
|
||||
width: 60px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.song-img img {
|
||||
aspect-ratio: 4/3;
|
||||
border-radius: inherit;
|
||||
object-fit: cover;
|
||||
border: 2px solid rgba(255, 255, 255, 0.884);
|
||||
box-shadow: 8px -10px 0px 0px #ffffff;
|
||||
}
|
||||
|
||||
.song-img .one {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
border-radius: inherit;
|
||||
font-size: 1.75rem;
|
||||
opacity: 0;
|
||||
transition: all 0.4s linear;
|
||||
cursor: pointer;
|
||||
box-shadow: rgb(255, 196, 0) 0px 6px 20px -3px,
|
||||
rgb(255, 196, 0) 0px -3px 0px inset,
|
||||
8px -10px 0px 0px rgb(255, 196, 0);
|
||||
}
|
||||
|
||||
.song-img .overlay {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
border-radius: inherit;
|
||||
font-size: 1.75rem;
|
||||
opacity: 0;
|
||||
transition: all 0.4s linear;
|
||||
cursor: pointer;
|
||||
box-shadow: rgb(0, 183, 255) 0px 6px 20px -3px,
|
||||
rgb(0, 183, 255) 0px -3px 0px inset,
|
||||
8px -10px 0px 0px rgb(0, 183, 255);
|
||||
}
|
||||
|
||||
.song-img .overlay2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
border-radius: inherit;
|
||||
font-size: 1.75rem;
|
||||
opacity: 0;
|
||||
transition: all 0.4s linear;
|
||||
cursor: pointer;
|
||||
box-shadow: rgb(204, 0, 255) 0px 6px 20px -3px,
|
||||
rgb(204, 0, 255) 0px -3px 0px inset,
|
||||
8px -10px 0px 0px rgb(204, 0, 255);
|
||||
}
|
||||
|
||||
.song-img .sli {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 92%;
|
||||
border-radius: inherit;
|
||||
font-size: 1.75rem;
|
||||
opacity: 0;
|
||||
transition: all 0.4s linear;
|
||||
cursor: pointer;
|
||||
box-shadow: rgb(255, 0, 0) 0px 3px 14px -3px,
|
||||
rgb(255, 0, 0) 0px -3px 0px inset;
|
||||
}
|
||||
|
||||
.overlay:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.one:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay2:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.sli:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.song h2 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.song p,
|
||||
.song span {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.song p {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.bandsvid{
|
||||
border-radius: 15px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.884);
|
||||
margin-bottom: 15px;
|
||||
box-shadow: 10px 12px 0px 0px #ffffff;
|
||||
}
|
||||
|
||||
.splitter{
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.884);
|
||||
margin-top: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.splitter2{
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.884);
|
||||
margin-top: 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1424px) {
|
||||
main {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
.content, .content2 {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.slide-overlay {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 820px) {
|
||||
main {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
.content, .content2 {
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
}
|
||||
.logo {
|
||||
display: none;
|
||||
}
|
||||
.slide-overlay {
|
||||
box-shadow: none;
|
||||
}
|
||||
.bandsvid{
|
||||
width: 280px;
|
||||
height: 157.5px;
|
||||
}
|
||||
}
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.last-played-song {
|
||||
margin-top: 40px;
|
||||
padding: 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.last-played-song h1 {
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#last-played-song-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.song-info-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.album-cover {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.song-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.song-details p {
|
||||
margin: 5px 0;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.timeline span {
|
||||
font-size: 0.9rem;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
flex-grow: 1;
|
||||
height: 10px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress {
|
||||
height: 100%;
|
||||
background: #1db954;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||