<body>
<audio id="background-music" loop>
<source
src="https://github.com/ecemgo/mini-samples-great-tricks/raw/main/song-list/Positive-Fuse.mp3"
type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<button id="play-pause-button">
<ion-icon
class="audio-icon"
id="play-music"
name="play-circle-outline"></ion-icon>
<ion-icon
class="audio-icon hidden"
id="pause-music"
name="pause-circle-outline"></ion-icon>
</button>
<section>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="gradient"></div>
<h1 data-animate="bottom" class="title">Dua Lipa</h1>
<img class="hero" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/cee8040b-a98f-469e-b106-66ab49a41c32" alt="dua lipa" loading="lazy" />
<div class="box-container">
<div data-animate="bottom" class="box songs">
<h1 style="align-self: center">Songs</h1>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/a8369951-13b2-4e17-a112-af8ce697b1d3" alt="" loading="lazy" />
<h3>Dua Lipa</h3>
<p>Levitating</p>
<button class="more-btn" data-modal="dua-songs">
<ion-icon
class="more-btn-icon"
name="add-circle-outline"></ion-icon>
</button>
</div>
<div class="box-mobile" data-modal="dua-songs">
<h1 style="align-self: center">Songs</h1>
</div>
<div data-animate="bottom" class="box overview">
<h1 style="align-self: center">Overview</h1>
<p>
Dua Lipa is a famous singer from the United Kingdom. She was
born on August 22, 1995, in London, England. Dua's love for
music started when she was a kid...
</p>
<button class="more-btn" data-modal="dua-bio">
<ion-icon
class="more-btn-icon"
name="add-circle-outline"></ion-icon>
</button>
</div>
<div class="box-mobile" data-modal="dua-bio">
<h1 style="align-self: center">Overview</h1>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="gradient"></div>
<h1 data-animate="bottom" class="title">Taylor Swift</h1>
<img
class="hero"
src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/956c1e41-3164-4141-bfdc-3cd3dcb09473"
alt="taylor swift" loading="lazy" />
<div class="box-container">
<div data-animate="bottom" class="box songs">
<h1 style="align-self: center">Songs</h1>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/6f3b9928-c597-4e5b-b776-098cbc5207b3" alt="" loading="lazy" />
<h3>Taylor Swift</h3>
<p>Blank Space</p>
<button class="more-btn" data-modal="taylor-songs">
<ion-icon
class="more-btn-icon"
name="add-circle-outline"></ion-icon>
</button>
</div>
<div class="box-mobile" data-modal="taylor-songs">
<h1 style="align-self: center">Songs</h1>
</div>
<div data-animate="bottom" class="box overview">
<h1 style="align-self: center">Overview</h1>
<p>
Taylor Swift is a famous singer from the United States. She
was born on December 13, 1989, in Reading, Pennsylvania. When
Taylor was a young girl...
</p>
<button class="more-btn" data-modal="taylor-bio">
<ion-icon
class="more-btn-icon"
name="add-circle-outline"></ion-icon>
</button>
</div>
<div class="box-mobile" data-modal="taylor-bio">
<h1 style="align-self: center">Overview</h1>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="gradient"></div>
<h1 data-animate="bottom" class="title">Ed Sheeran</h1>
<img class="hero" src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/567bafa8-61d5-4c2f-82da-858061c7b706" alt="ed sheeran" loading="lazy" />
<div class="box-container">
<div data-animate="bottom" class="box songs">
<h1 style="align-self: center">Songs</h1>
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/83bab099-74d4-4ab4-aecd-3b6c8cb131cf" alt="" loading="lazy" />
<h3>Ed Sheeran</h3>
<p>Shape of You</p>
<button class="more-btn" data-modal="ed-songs">
<ion-icon
class="more-btn-icon"
name="add-circle-outline"></ion-icon>
</button>
</div>
<div class="box-mobile" data-modal="ed-songs">
<h1 style="align-self: center">Songs</h1>
</div>
<div data-animate="bottom" class="box overview">
<h1 style="align-self: center">Overview</h1>
<p>
Ed Sheeran is a famous singer and songwriter from England. He
was born on February 17, 1991, in Hebden Bridge, West
Yorkshire...
</p>
<button class="more-btn" data-modal="ed-bio">
<ion-icon
class="more-btn-icon"
name="add-circle-outline"></ion-icon>
</button>
</div>
<div class="box-mobile" data-modal="ed-bio">
<h1 style="align-self: center">Overview</h1>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="sidebar" id="dua-songs">
<div class="sidebar-container song-list-container">
<div class="sidebar-header">
<button class="close-btn">
<ion-icon class="close-icon" name="arrow-back-outline"></ion-icon
>Back
</button>
</div>
<div class="song-list-body">
<h1>Songs</h1>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/e3be4bc0-7968-470f-825f-c4be551c75b2" alt="" loading="lazy" />
<div class="song-title">
<h4>Levitating</h4>
<p>Dua Lipa</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/fc9aeb60-085b-422d-9c4a-e1770bf4c216" alt="" loading="lazy" />
<div class="song-title">
<h4>Physical</h4>
<p>Dua Lipa</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/9278b860-d777-4bd7-96fd-de10c7c983f3" alt="" loading="lazy" />
<div class="song-title">
<h4>Be The One</h4>
<p>Dua Lipa</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/b1ca72d1-d975-4471-8452-a60a1a339f56" alt="" loading="lazy" />
<div class="song-title">
<h4>New Rules</h4>
<p>Dua Lipa</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/f762770b-6a8e-45a6-884c-54bda85245c9" alt="" loading="lazy" />
<div class="song-title">
<h4>IDGAF</h4>
<p>Dua Lipa</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
<div class="sidebar" id="dua-bio">
<div class="sidebar-container">
<div class="sidebar-header">
<button class="close-btn">
<ion-icon class="close-icon" name="arrow-back-outline"></ion-icon
>Back
</button>
</div>
<div class="sidebar-body bio">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/71aab672-117e-4ffd-b300-558bb8ad4cca" alt="" loading="lazy" />
<p>
Dua Lipa is a famous singer from the United Kingdom. She was born on
August 22, 1995, in London, England. Dua's love for music started
when she was a kid. She began singing and even created covers of
songs to share on the internet. Her first big hit was "New Rules,"
which became a worldwide sensation.
</p>
<p>
In 2017, she released her self-titled debut album, "Dua Lipa," which
had songs like "Be the One" and "IDGAF." People loved her music, and
she won awards for her songs and albums.
</p>
<p>
Dua Lipa is known for her cool style and her powerful voice. She's a
talented songwriter and has a lot of hit songs that many people
enjoy, including "Don't Start Now" and "Levitating."
</p>
</div>
</div>
</div>
<div class="sidebar" id="taylor-songs">
<div class="sidebar-container song-list-container">
<div class="sidebar-header">
<button class="close-btn">
<ion-icon class="close-icon" name="arrow-back-outline"></ion-icon
>Back
</button>
</div>
<div class="song-list-body">
<h1>Songs</h1>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2c00793c-55a7-4b4e-946d-9a281f930610" alt="" loading="lazy" />
<div class="song-title">
<h4>Blank Space</h4>
<p>Taylor Swift</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/82c45a56-d9de-4023-a3fd-ff5e1086f8a2" alt="" />
<div class="song-title">
<h4>Shake It Off</h4>
<p>Taylor Swift</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/2121357a-262c-4e51-ab2b-f316c1555a7b" alt="" loading="lazy" />
<div class="song-title">
<h4>Delicate</h4>
<p>Taylor Swift</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
<div class="sidebar" id="taylor-bio">
<div class="sidebar-container">
<div class="sidebar-header">
<button class="close-btn">
<ion-icon class="close-icon" name="arrow-back-outline"></ion-icon
>Back
</button>
</div>
<div class="sidebar-body">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/014c7224-ead9-480b-9c89-2bae4ea9e7a6" alt="" loading="lazy" />
<p>
Taylor Swift is a famous singer from the United States. She was born
on December 13, 1989, in Reading, Pennsylvania. When Taylor was a
young girl, she loved singing and writing songs. She started
performing at local events and fairs. Her family moved to Nashville,
Tennessee, which is a big city for country music, to help her music
career.
</p>
<p>
In 2006, Taylor Swift released her first album, which had country
songs. One of her first hits was "Tim McGraw." Her music was loved
by many people who liked country songs.
</p>
<p>
As Taylor got older, she started making more pop and rock music. Her
album "Fearless" in 2008 was a huge success and won many awards,
including Grammy Awards. She continued to make hit songs like "Love
Story" and "You Belong with Me."
</p>
<p>
Taylor is also known for writing her songs based on her personal
experiences and feelings. She wrote many songs about love and
relationships. She's a well-loved artist all around the world, and
her music has made a big impact on the music industry.
</p>
</div>
</div>
</div>
<div class="sidebar" id="ed-songs">
<div class="sidebar-container song-list-container">
<div class="sidebar-header">
<button class="close-btn">
<ion-icon class="close-icon" name="arrow-back-outline"></ion-icon
>Back
</button>
</div>
<div class="song-list-body">
<h1>Songs</h1>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/5f34ef23-402f-4199-9c2f-0b133a3fe0f3" alt="" loading="lazy" />
<div class="song-title">
<h4>Shape of You</h4>
<p>Ed Sheeran</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/7eb5d150-0825-4891-a6ee-257067475825" alt="" />
<div class="song-title">
<h4>Perfect</h4>
<p>Ed Sheeran</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
<div class="song-item">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/6a7e7b8e-04cf-46db-b2dc-6de3dcefc2a0" alt="" loading="lazy" />
<div class="song-title">
<h4>Thinking Out Loud</h4>
<p>Ed Sheeran</p>
</div>
<a href="#">
<ion-icon class="play-icon" name="play-circle-outline"></ion-icon
></a>
</div>
</div>
</div>
</div>
<div class="sidebar" id="ed-bio">
<div class="sidebar-container">
<div class="sidebar-header">
<button class="close-btn">
<ion-icon class="close-icon" name="arrow-back-outline"></ion-icon
>Back
</button>
</div>
<div class="sidebar-body">
<img src="https://github.com/ecemgo/mini-samples-great-tricks/assets/13468728/572a1246-a4b0-4691-8413-7383a9dd19b2" alt="" loading="lazy" />
<p>
Ed Sheeran is a famous singer and songwriter from England. He was
born on February 17, 1991, in Hebden Bridge, West Yorkshire. Ed fell
in love with music at a young age and started singing in a church
choir when he was just four years old. When he was eleven, he got
his first guitar and learned to play it by himself. He started
writing songs and became really good at it. His mom and dad
supported his love for music.
</p>
<p>
In 2008, Ed moved to London to chase his dream of becoming a
musician. He played at small places and open mic nights. People
started to notice him, and his career took off.
</p>
<p>
In 2011, Ed released his first album called "+." It had songs like
"The A Team" and "Lego House," which became big hits. Everyone loved
his music, and he won awards, like the BRIT Award for Best British
Male Solo Artist.
</p>
<p>
His second album, "x," came out in 2014 and made him even more
famous. Songs like "Sing" and "Thinking Out Loud" were huge hits.
Ed's music was special because it was sincere and easy to relate to.
He didn't stop there. Ed explored different music styles, like pop,
R&B, and hip-hop. His 2017 album, "÷," had songs like "Shape of You"
and "Castle on the Hill." People loved it.
</p>
</div>
</div>
</div>
</body>
@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Agbalumo&family=Kalam:wght@700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: "Nunito", sans-serif;
}
img {
width: 100%;
}
ul {
list-style-type: none;
}
html,
body {
position: relative;
height: 100vh;
width: 100%;
background-color: #040a22;
}
section {
display: flex;
justify-content: center;
width: 100%;
height: 100vh;
}
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
position: relative;
text-align: center;
font-size: 1.25rem;
display: flex;
justify-content: center;
align-items: center;
background-color: #040a22;
}
.hero {
position: absolute;
bottom: 0;
z-index: 5;
width: 450px;
filter: contrast(90%);
pointer-events: none;
}
.title {
position: absolute;
top: 20%;
left: 5%;
font-family: "Kalam", cursive;
font-size: 5rem;
color: #fff;
transition-delay: 3s;
}
.gradient {
width: 500px;
height: 500px;
filter: blur(50px);
background-image: linear-gradient(#4ddc9e, #5b37eb, #f1307e);
animation: rotate 10s cubic-bezier(0.8, 0.2, 0.2, 0.8) alternate infinite;
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box-container {
position: absolute;
top: 13%;
right: 6%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(2, 1fr);
gap: 40px;
}
.box {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 250px;
aspect-ratio: 3/2;
border-radius: 20px;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.095);
box-shadow: inset 2.01px -2.01px 20px rgba(214, 214, 214, 0.17),
inset -3.01333px 3.01333px 3.01333px rgba(255, 255, 255, 0.39);
backdrop-filter: blur(70px);
padding: 20px 20px 30px;
z-index: 6;
}
.box-mobile {
display: none;
}
.box h1 {
position: relative;
text-align: center;
text-transform: uppercase;
font-size: 1.1rem;
margin-bottom: 10px;
}
.box h1::before {
content: "";
position: absolute;
top: 95%;
width: 100%;
left: 0;
height: 3px;
border-radius: 5px;
background: linear-gradient(
89.7deg,
#2b60bc 0%,
#45329d 15%,
#822f99 30%,
#97174a 50%,
#822f99 70%,
#45329d 85%,
#2b60bc 100%
);
background-size: 200% 100%;
animation: line-animation 13s infinite linear;
}
@keyframes line-animation {
from {
background-position: 100%;
}
to {
background-position: -100%;
}
}
.box p {
font-weight: 300;
font-size: 0.8rem;
}
.songs,
.overview {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.songs img {
border-radius: 10px;
margin: 8px 0 5px;
aspect-ratio: 5/3;
object-fit: cover;
}
.songs h3 {
font-size: 1rem;
}
.overview p {
text-align: start;
}
.more-btn {
position: absolute;
top: 93%;
left: 42%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
background: rgba(220, 220, 220, 0.7);
backdrop-filter: blur(70px);
-webkit-backdrop-filter: blur(70px);
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: 50%;
padding: 5px;
cursor: pointer;
transform: rotate(0deg);
transition: all 0.5s linear;
}
.more-btn:hover {
background: rgba(220, 220, 220, 1);
transform: rotate(360deg);
}
.more-btn-icon {
font-size: 20px;
color: #2e2e2f;
}
.swiper-slide-active [data-animate] {
opacity: 1;
transform: none;
}
.swiper-slide-active .title {
transition-delay: 0.6s;
}
.swiper-slide-active .songs {
transition-delay: 1s;
}
.swiper-slide-active .overview {
transition-delay: 1.4s;
}
[data-animate] {
opacity: 0;
transition: all 0.8s ease-out;
}
[data-animate="bottom"] {
transform: translate3d(0, 15px, 0);
}
.audio-icon {
font-size: 2rem;
color: #fff;
}
#play-pause-button {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
left: 5%;
bottom: 5%;
background: #5b37eb;
padding: 12px;
border-radius: 50%;
box-shadow: rgba(120, 46, 240, 0.4) 5px 5px, rgba(120, 46, 240, 0.3) 10px 10px;
z-index: 10;
border: 0;
outline: 0;
cursor: pointer;
animation: fade-in 0.5s linear 1;
transition: all 0.5s ease-in;
}
#play-pause-button:hover {
background: #a143b9;
box-shadow: rgba(149, 30, 164, 0.4) 5px 5px, rgba(149, 30, 164, 0.3) 10px 10px;
}
@keyframes fade-in {
0% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
.hidden {
display: none;
}
body.prevent-background-scroll {
min-height: 100dvh;
overflow-y: hidden;
}
.sidebar {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 20;
animation: openSidebar 0.6s ease-in-out 1 normal;
}
@keyframes openSidebar {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.sidebar-container {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 40%;
background: rgba(133, 133, 133, 0.2);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
z-index: 30;
}
.sidebar-header {
position: relative;
display: flex;
font-weight: 600;
padding: 15px 20px 10px;
font-size: 1.2rem;
}
.sidebar-header .close-btn {
position: sticky;
display: flex;
align-items: center;
gap: 5px;
top: 20px;
left: 20px;
background: transparent;
color: #fff;
font-weight: 600;
text-transform: uppercase;
border: 0;
outline: 0;
cursor: pointer;
}
.close-icon {
font-size: 1.8rem;
color: #efefef;
}
.sidebar-body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding: 20px 50px 60px;
height: 100vh;
overflow-y: auto;
}
.sidebar-body > img {
max-width: 100%;
width: 250px;
aspect-ratio: 4/3;
object-fit: cover;
border-radius: 8px;
margin-bottom: 20px;
}
.sidebar-body > p {
margin-bottom: 20px;
color: #94a3b8;
}
.song-list-container {
width: 40%;
}
.song-list-body {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 40px 40px 60px;
height: 100vh;
overflow-y: auto;
}
.song-list-body h1 {
margin-bottom: 20px;
font-weight: 500;
font-size: 1.5rem;
}
.song-item {
display: grid;
grid-template-columns: 35% 55% 10%;
align-items: center;
margin-bottom: 20px;
}
.song-item img {
width: 100px;
aspect-ratio: 3/2;
border-radius: 10px;
object-fit: cover;
}
.song-title {
display: flex;
flex-direction: column;
}
.song-title p {
font-size: 0.8rem;
font-weight: 300;
}
.play-icon {
font-size: 1.8rem;
color: #efefef;
transition: all 0.5s ease;
}
.play-icon:hover {
font-size: 1.85rem;
color: #5834c4;
}
.sidebar-body::-webkit-scrollbar,
.song-list-body::-webkit-scrollbar {
width: 0.7rem;
}
.sidebar-body::-webkit-scrollbar-track,
.song-list-body::-webkit-scrollbar-track {
box-shadow: inset 0 0 0.375rem rgb(79, 78, 78);
border-radius: 0.8rem;
}
.sidebar-body::-webkit-scrollbar-thumb,
.song-list-body::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0.375rem rgba(238, 238, 238, 0.9);
outline: none;
border-radius: 0.8rem;
}
@media (max-width: 1250px) {
.title {
top: 15%;
}
}
@media (max-width: 1200px) {
.hero {
width: 420px;
}
}
@media (max-width: 880px) {
.hero {
left: 15%;
width: 400px;
}
.title {
top: 5%;
font-size: 5rem;
}
.sidebar-container {
width: 50%;
}
.song-list-container {
width: 70%;
}
}
@media (max-width: 700px) {
.box-container {
position: absolute;
top: 21%;
right: 6%;
gap: 0;
}
.box {
width: 150px;
}
.title {
top: 5%;
font-size: 5rem;
}
.song-list-container {
width: 70%;
}
}
@media (max-width: 580px) {
.hero {
left: 10%;
}
.sidebar-container {
width: 70%;
}
.song-list-container {
width: 80%;
}
}
@media (max-width: 500px) {
.gradient {
width: 300px;
height: 300px;
}
.hero {
width: 400px;
}
.title {
top: 7%;
font-size: 4rem;
}
.box-container {
top: 60%;
right: 7%;
gap: 20px;
}
.box {
display: none;
}
.box-mobile {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 150px;
aspect-ratio: 3/2;
border-radius: 20px;
color: #cbd5e1;
background: rgba(255, 255, 255, 0.095);
box-shadow: inset 2.01px -2.01px 20px rgba(214, 214, 214, 0.17),
inset -3.01333px 3.01333px 3.01333px rgba(255, 255, 255, 0.39);
backdrop-filter: blur(70px);
padding: 20px 20px 30px;
z-index: 6;
}
.sidebar-container {
width: 100%;
}
.song-list-container {
width: 100%;
}
.song-item {
grid-template-columns: 40% 50% 10%;
}
}
var swiper = new Swiper(".swiper", {
grabCursor: true,
speed: 500,
effect: "fade",
loop: true,
clickable: true,
mousewheel: {
invert: false,
sensitivity: 1,
},
});
swiper.enable();
const moreBtns = document.querySelectorAll(".more-btn");
const closeBtns = document.querySelectorAll(".close-btn");
const boxContainers = document.querySelectorAll(".box-container");
const body = document.querySelector("body");
const mobileBoxes = document.querySelectorAll(".box-mobile");
moreBtns.forEach((btn) => {
btn.addEventListener("click", () => {
let modal = btn.getAttribute("data-modal");
document.getElementById(modal).style.display = "block";
body.classList.add("prevent-background-scroll");
boxContainers.forEach((container) => {
container.style.display = "none";
});
});
});
closeBtns.forEach((btn) => {
btn.addEventListener("click", () => {
let modal = (btn.closest(".sidebar").style.display = "none");
body.classList.remove("prevent-background-scroll");
boxContainers.forEach((container) => {
container.style.display = "grid";
});
});
});
document.addEventListener("click", (e) => {
if (e.target.classList.contains("sidebar")) {
e.target.style.display = "none";
body.classList.remove("prevent-background-scroll");
boxContainers.forEach((container) => {
container.style.display = "grid";
});
}
});
mobileBoxes.forEach((btn) => {
btn.addEventListener("click", () => {
let modal = btn.getAttribute("data-modal");
document.getElementById(modal).style.display = "block";
body.classList.add("prevent-background-scroll");
boxContainers.forEach((container) => {
container.style.display = "none";
});
});
});
const audio = document.getElementById("background-music");
const playPauseButton = document.getElementById("play-pause-button");
const playIcon = document.getElementById("play-music");
const pauseIcon = document.getElementById("pause-music");
let isPlaying = false;
function togglePlayPause() {
if (isPlaying) {
audio.pause();
playIcon.classList.remove("hidden");
pauseIcon.classList.add("hidden");
} else {
audio.play();
playIcon.classList.add("hidden");
pauseIcon.classList.remove("hidden");
}
isPlaying = !isPlaying;
}
audio.addEventListener("ended", function () {
audio.currentTime = 0;
audio.play();
});
playPauseButton.addEventListener("click", togglePlayPause);
