mirror of
https://github.com/Dvorinka/Portfolio.git
synced 2026-10-29 00:01:19 +00:00
first commit
This commit is contained in:
Tomas Dvorak committed
commit
882f91ebf6
335 files changed
+34705
No files matched your search
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 754 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 66 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 134 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 492 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 94 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 177 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 93 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 167 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
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 -
|
||||
Binary file not shown.
|
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
|
||||
+679
@@ -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;
|
||||
}
|
||||
Vendored
+13
@@ -0,0 +1,13 @@
|
||||
/**
|
||||
* Swiper 11.0.6
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* https://swiperjs.com
|
||||
*
|
||||
* Copyright 2014-2024 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: February 5, 2024
|
||||
*/
|
||||
|
||||
@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-cLine truncated
|
||||
Vendored
+14
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Swiper 11.0.6
|
||||
* Most modern mobile touch slider and framework with hardware accelerated transitions
|
||||
* https://swiperjs.com
|
||||
*
|
||||
* Copyright 2014-2024 Vladimir Kharlampidi
|
||||
*
|
||||
* Released under the MIT License
|
||||
*
|
||||
* Released on: February 5, 2024
|
||||
*/
|
||||
|
||||
var Swiper=function(){"use strict";function e(e){return null!==e&&"object"==typeof e&&"constructor"in e&&e.constructor===Object}function t(s,a){void 0===s&&(s={}),void 0===a&&(a={}),Object.keys(a).forEach((i=>{void 0===s[i]?s[i]=a[i]:e(a[i])&&e(s[i])&&Object.keys(a[i]).length>0&&t(s[i],a[i])}))}const s={body:{},addEventListener(){},removeEventListener(){},activeElement:{blur(){},nodeName:""},querySelector:()=>null,querySelectorAll:()=>[],getElementById:()=>null,createEvent:()=>({initEvent(){}}),createElement:()=>({children:[],childNodes:[],style:{},setAttribute(){},getElementsByTagName:()=>[]}),createElementNS:()=>({}),importNode:()=>null,location:{hash:"",host:"",hostname:"",href:"",origin:"",pathname:"",protocol:"",search:""}};function a(){const e="undefined"!=typeof document?document:{};return t(e,s),e}const i={document:s,navigator:{userAgent:""},location:{hash:"",host:"",hostname:"",href:"",origin:"",pathname:"",protocol:"",search:""},history:{replaceState(){},pushState(){},go(){},back(){}},CustomEvent:function(){return this},addEventListener(){},removeEventListener(){},getComputedStyle:()=>({getPropertyValue:()=>""}),Image(){},Date(){},screen:{},setTimeout(){},clearTimeout(){},matchMedia:()=>({}),requestAnimationFrame:e=>"undefined"==typeof setTimeout?(e(),null):setTimeout(e,0),cancelAnimationFrame(e){"undefined"!=typeof setTimeout&&clearTimeout(e)}};function r(){const e="undefined"!=typeof window?window:{};return t(e,i),e}function n(e){return void 0===e&&(e=""),e.trim().split(" ").filter((e=>!!e.trim()))}function l(e,t){return void 0===t&&(t=0),setTimeout(e,t)}function o(){return Date.now()}function d(e,t){void 0===t&&(t="x");const s=r();let a,i,n;const l=function(e){const t=r();let s;return t.getComputedStyle&&(s=t.getComputedStyle(e,null)),!s&&e.currentStyle&&(s=e.currentStyle),s||(s=e.style),s}(e);return s.WebKitCSSMatrix?(i=l.transform||l.webkitTransform,i.split(",").length>6&&(i=i.split(", ").map((e=>e.replace(",","."))).join(", ")),n=new s.WebKitCSSMatrix("none"===i?"":i)):(n=l.MozTransform||l.OTransform||l.MsTransform||l.msTransform||l.transform||l.getPropertyValue("transform").replace("translate(","matrix(1, 0, 0, 1,"),a=n.toString().split(",")),"x"===t&&(i=s.WebKitCSSMatrix?n.m41:16===a.length?parseFloat(a[12]):parseFloat(a[4])),"y"===t&&(i=s.WebKitCSSMatrix?n.m42:16===a.length?parseFloat(a[13]):parseFloat(a[5])),i||0}function c(e){return"object"==typeof e&&null!==e&&e.constructor&&"Object"===Object.prototype.toString.call(e).slice(8,-1)}function p(){const e=Object(arguments.length<=0?void 0:arguments[0]),t=["__proto__","constructor","prototype"];for(let a=1;a<arguments.length;a+=1){const i=a<0||arguments.length<=a?void 0:arguments[a];if(null!=i&&(s=i,!("undefined"!=typeof window&&void 0!==window.HTMLElement?s instanceof HTMLElement:s&&(1===s.nodeType||11===s.nodeType)))){const s=Object.keys(Object(i)).filter((e=>t.indexOf(e)<0));for(let t=0,a=s.length;t<a;t+=1){const a=s[t],r=Object.getOwnPropertyDescriptor(i,a);void 0!==r&&r.enumerable&&(c(e[a])&&c(i[a])?i[a].__swiper__?e[a]=i[a]:p(e[a],i[a]):!c(e[a])&&c(i[a])?(e[a]={},i[a].__swiper__?e[a]=i[a]:p(e[a],i[a])):e[a]=i[a])}}}var s;return e}function u(e,t,s){e.style.setProperty(t,s)}function m(e){let{swiper:t,targetPosition:s,side:a}=e;const i=r(),n=-t.translate;let l,o=null;const d=t.params.speed;t.wrapperEl.style.scrollSnapType="none",i.cancelAnimationFrame(t.cssModeFrameID);const c=s>n?"next":"prev",p=(e,t)=>"next"===c&&e>=t||"prev"===c&&e<=t,u=()=>{l=(new Date).getTime(),null===o&&(o=l);const e=Math.max(Math.min((l-o)/d,1),0),r=.5-Math.cos(e*Math.PI)/2;let c=n+r*(s-n);if(p(c,s)&&(c=s),t.wrapperEl.scrollTo({[a]:c}),p(c,s))return t.wrapperEl.style.overflow="hidden",t.wrapperEl.style.scrollSnapType="",setTimeout((()=>{t.wrapperEl.style.overflow="",t.wrapperEl.scrollTo({[a]:c})})),void i.cancelAnimationFrame(t.cssModeFrameID);t.cssModeFrameID=i.requestAnimationFrame(u)};u()}function h(e){return e.querySelector(".swiper-slide-transform")||e.shadowRoot&&e.shadowRoot.querySelector(".swiper-slide-transform")||e}function f(e,t){return void 0===t&&(t=""),[...e.children].filter((e=>e.matches(t)))}function g(e){try{return void console.warn(e)}catch(e){}}function v(e,t){void 0===t&&(t=[]);const s=document.createElement(e);return s.classList.add(...Array.isArray(t)?t:n(t)),s}function w(e){const t=r(),s=a(),i=e.getBoundingClientRect(),n=s.body,l=e.clientTop||n.clientTop||0,o=e.clientLeft||n.clientLeft||0,d=e===t?t.scrollY:e.scrollTop,c=e===t?t.scrollX:e.scrollLeft;return{top:i.top+d-l,left:i.left+c-o}}function b(e,t){return r().getComputedStyle(e,null).getPropertyValue(t)}function y(e){let t,s=e;if(s){for(t=0;null!==(s=s.previousSibling);)1===s.nodeType&&(t+=1);return t}}function E(e,t){const s=[];let a=e.parentElement;for(;a;)t?a.matches(t)&&s.push(a):s.push(a),a=a.parentElement;return s}function x(e,t){t&&e.addEventListener("transitionend",(function s(a){a.target===e&&(t.call(e,a),e.removeEventListener("transitionend",s))}))}function S(e,t,s){const a=r(Line truncated
|
||||
//# sourceMappingURL=swiper-bundle.min.js.map
|
||||
Reference in new issue
Block a user