Skip to content

Commit

Permalink
new changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gokul-sami
Gokul-sami committed Sep 3, 2024
1 parent cd66236 commit 6d5b29c
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 128 deletions.
66 changes: 8 additions & 58 deletions Exercise 2/ex2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ body{
justify-content: space-evenly;
gap: 10px;
}
.popular-song-name{
color: white;
}
.popular-song-name, .popular-singer-name{
margin-top: 0px;
margin-bottom: 0px;
Expand All @@ -25,65 +28,12 @@ body{
}
.cover{
border-style: solid;
border-width: 5px;
border-color: white;
border-width: 4px;
border-radius: 10%;
}
.cover:hover {
transform: translateY(-5px);
transition: transform 80ms;
}


/* Song Details Container */
.song-details-container {
width: 25%;
height: 100vh;
position: fixed;
right: 0;
top: 0;
background-color: #7827e7;
padding: 20px;
overflow-y: auto;
display: none;
transition: transform 0.1s ease-in-out;
}

.close-button{
width: 1.5rem;
}

.close-button:hover{
transform: translateY(-2px);
}

.song-image img {
width: 215px;
border-radius: 10px;
}

.song-details {
margin-top: 20px;
text-align: center;
}

.song-details h1 {
font-size: 28px;
margin: 10px 0;
color: #000000;
}

.song-details h3 {
font-size: 22px;
margin: 5px 0;
color: rgb(147, 142, 142);
}

.song-audio {
margin-top: 20px;
text-align: center;
margin-bottom: 30px;
.cover:hover, .popular-song-name:hover {
color: #7827e7;
border-color: #7827e7;
}

.song-audio audio {
width: 100%;
}
93 changes: 23 additions & 70 deletions Exercise 2/ex2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise 2</title>
<link href='https://fonts.googleapis.com/css?family=Sacramento' rel='stylesheet'>
<link rel="stylesheet" href="ex2.css">
<style>
.popular-section{
Expand All @@ -21,11 +20,10 @@
text-decoration: underline;
}
.header h2{
font-family: "Sacramento", cursive;
font-family: 'Times New Roman', Times, serif;
font-size: 80px;
margin-top: 0;
margin-bottom: 0;
text-shadow: 3px 3px white;
}
</style>
</head>
Expand All @@ -39,165 +37,120 @@ <h2>Groovy</h2>

<!-- populard section -->
<div class="popular-section">
<h2 style="text-align: center;">Popular Songs</h2>
<h2 style="text-align: center; font-size: 30px;">Popular Songs</h2>
<div class="popular-songs">
<!-- 1 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Electric Love', 'Borns', './images/electric love.jpg')">
<a href="https://open.spotify.com/track/2GiJYvgVaD2HtM8GqD9EgQ">
<img class="cover" src="./images/electric love.jpg" alt="Electric Love">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Electric Love', 'Borns', './images/electric love.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/2GiJYvgVaD2HtM8GqD9EgQ">
<h3 class="popular-song-name">Electric Love</h3>
</a>
<h4 class="popular-singer-name">Borns</h4>
</div>
<!-- 2 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('FEIN', 'Travis Scott, Playboi Carti', './images/fein.jpg')">
<a href="https://open.spotify.com/track/42VsgItocQwOQC3XWZ8JNA">
<img class="cover" src="./images/fein.jpg" alt="FEIN">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('FEIN', 'Travis Scott, Playboi Carti', './images/fein.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/42VsgItocQwOQC3XWZ8JNA">
<h3 class="popular-song-name">FEIN</h3>
</a>
<h4 class="popular-singer-name">Travis Scott, Playboi Carti</h4>
</div>

<!-- 3 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Do I Wanna Know', 'Arctic Monkeys', './images/do i wanna know.jpg')">
<a href="https://open.spotify.com/track/5FVd6KXrgO9B3JPmC8OPst">
<img class="cover" src="./images/do i wanna know.jpg" alt="Do I Wanna Know">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Do I Wanna Know', 'Arctic Monkeys', './images/do i wanna know.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/5FVd6KXrgO9B3JPmC8OPst">
<h3 class="popular-song-name">Do I Wanna Know</h3>
</a>
<h4 class="popular-singer-name">Arctic Monkeys</h4>
</div>

<!-- 4 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Here', 'Alessia Shah', './images/here.jpg')">
<a href="https://open.spotify.com/track/5LrN7yUQAzvthd4QujgPFr">
<img class="cover" src="./images/here.jpg" alt="Here">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Here', 'Alessia Shah', './images/here.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/5LrN7yUQAzvthd4QujgPFr">
<h3 class="popular-song-name">Here</h3>
</a>
<h4 class="popular-singer-name">Alessia Shah</h4>
</div>

<!-- 5 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Jericho', 'Iniko', './images/jericho.jpg')">
<a href="https://open.spotify.com/track/4ztdjZ2t7BVo5DLIFQBdJh">
<img class="cover" src="./images/jericho.jpg" alt="Jericho">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Jericho', 'Iniko', './images/jericho.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/4ztdjZ2t7BVo5DLIFQBdJh">
<h3 class="popular-song-name">Jericho</h3>
</a>
<h4 class="popular-singer-name">Iniko</h4>
</div>

<!-- 6 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Astronaut In The Ocean', 'Masked Wolf', './images/astronaut in the ocean.jpg')">
<a href="https://open.spotify.com/album/7vus4Q8r5DS2Dl1JClxEsA?uid=980533fe5f7ca9710059&uri=spotify%3Atrack%3A3Ofmpyhv5UAQ70mENzB277">
<img class="cover" src="./images/astronaut in the ocean.jpg" alt="Astronaut In The Ocean">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Astronaut In The Ocean', 'Masked Wolf', './images/astronaut in the ocean.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/album/7vus4Q8r5DS2Dl1JClxEsA?uid=980533fe5f7ca9710059&uri=spotify%3Atrack%3A3Ofmpyhv5UAQ70mENzB277">
<h3 class="popular-song-name">Astronaut In The Ocean</h3>
</a>
<h4 class="popular-singer-name">Masked Wolf</h4>
</div>

<!-- 7 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Promiscuous', 'Nelly Furtado, Timbaland', './images/promiscuous.jpg')">
<a href="https://open.spotify.com/track/2gam98EZKrF9XuOkU13ApN">
<img class="cover" src="./images/promiscuous.jpg" alt="Promiscuous">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Promiscuous', 'Nelly Furtado, Timbaland', './images/promiscuous.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/2gam98EZKrF9XuOkU13ApN">
<h3 class="popular-song-name">Promiscuous</h3>
</a>
<h4 class="popular-singer-name">Nelly Furtado, Timbaland</h4>
</div>

<!-- 8 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Swim', 'Chase Atlantic', './images/swim.jpg')">
<a href="https://open.spotify.com/track/3M0lSi5WW79CXQamgSBIjx">
<img class="cover" src="./images/swim.jpg" alt="Swim">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Swim', 'Chase Atlantic', './images/swim.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/3M0lSi5WW79CXQamgSBIjx">
<h3 class="popular-song-name">Swim</h3>
</a>
<h4 class="popular-singer-name">Chase Atlantic</h4>
</div>

<!-- 9 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Gurenge', 'Akano', './images/gurenge.jpg')">
<a href="https://open.spotify.com/track/0qMip0B2D4ePEjBJvAtYre">
<img class="cover" src="./images/gurenge.jpg" alt="Gurenge">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Gurenge', 'Akano', './images/gurenge.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/0qMip0B2D4ePEjBJvAtYre">
<h3 class="popular-song-name">Gurenge</h3>
</a>
<h4 class="popular-singer-name">Akano</h4>
</div>

<!-- 10 -->
<div class="popular">
<a href="javascript:void(0)" onclick="showSongDetails('Cold', 'Maroon 5, Future', './images/cold.jpg')">
<a href="https://open.spotify.com/track/2FpWhUMOPGUVR95DkfKjGH">
<img class="cover" src="./images/cold.jpg" alt="Cold">
</a>
<a class="popular-song-name-link" href="javascript:void(0)" onclick="showSongDetails('Cold', 'Maroon 5, Future', './images/cold.jpg')">
<a class="popular-song-name-link" href="https://open.spotify.com/track/2FpWhUMOPGUVR95DkfKjGH">
<h3 class="popular-song-name">Cold</h3>
</a>
<h4 class="popular-singer-name">Maroon 5, Future</h4>
</div>
</div>
</div>

</div>

<!-- Right-side Song Details Container -->
<div id="song-details-container" class="song-details-container">
<div>
<img class="close-button" onclick="closeSongDetails()" src="./images/arrow-left-square-fill.svg" alt="back">
</div>
<div class="song-image">
<img id="song-cover" src="" alt="Song Cover" style="width: 100%;">
</div>
<div class="song-details">
<h1 id="song-title">Song Title</h1>
<h3 id="song-artist">Artist Name</h3>
</div>
<div class="song-audio">
<audio controls id="song-audio"></audio>
</div>
</div>


<script>
function showSongDetails(title, artist, image) {
document.getElementById('song-title').textContent = title.replace(/_/g, ' ');
document.getElementById('song-artist').textContent = artist.replace(/_/g, ' ');
document.getElementById('song-cover').src = image;
document.getElementById('song-audio').src = "https://pagalnew.com.se/files/download/id/2016";

document.getElementById('song-details-container').style.display = 'block';

const bodyElement = document.querySelector('.body');
if (bodyElement) {
bodyElement.style.marginRight = '25%';
}
}

function closeSongDetails() {
// Hide the song details container
document.getElementById('song-details-container').style.display = 'none';

// Reset the margin of the body
const bodyElement = document.querySelector('.body');
if (bodyElement) {
bodyElement.style.marginRight = '0';
}
}
</script>

</body>
</html>

0 comments on commit 6d5b29c

Please sign in to comment.