Skip to content

Commit 516544f

Browse files
nirajxdevnirajxdev
committed
fix the design
1 parent 48fd2c1 commit 516544f

File tree

1 file changed

+29
-32
lines changed

1 file changed

+29
-32
lines changed

‎11_muic-player-clone/index.html‎

Lines changed: 29 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -5,53 +5,50 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<title>Music Player Clone</title>
77
<script src="https://cdn.tailwindcss.com"></script>
8-
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css'>
9-
<link rel='stylesheet' href='https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css'>
10-
<style>
11-
/* @import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css') */
12-
</style>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
139
</head>
14-
<body>
15-
<div id="player">
10+
<body class="h-screen flex items-center justify-center bg-gray-100">
1611

17-
<div id="details">
18-
<div id="now-playing">Playing</div>
19-
<div id="track-art"></div>
20-
<div id="track-name">Track name</div>
21-
<div id="track-artist">Track Artist</div>
12+
<div id="player" class="w-80 p-6 bg-white border border-gray-300 rounded-lg flex flex-col gap-4 text-center">
13+
<div id="details" class="flex flex-col items-center">
14+
<div id="now-playing" class="text-xs uppercase text-gray-500 mb-2">Playing Now</div>
15+
<div id="track-art" class="w-48 h-48 bg-gray-200 rounded mb-4 flex items-center justify-center text-gray-400">
16+
<span>Album Art</span>
17+
</div>
18+
<div id="track-name" class="font-bold text-lg">Track Name</div>
19+
<div id="track-artist" class="text-sm text-gray-600">Artist Name</div>
2220
</div>
2321

24-
<div id="buttons">
25-
<div id="prev-btn">
26-
<i class="fi fi-ss-rewind"></i>
22+
23+
<div id="buttons" class="flex items-center justify-center gap-8 text-2xl my-2">
24+
<div id="prev-btn" class="cursor-pointer hover:text-gray-600">
25+
<i class="fa-solid fa-backward-step"></i>
2726
</div>
28-
<div id="play-pause-btn">
29-
<i class="fi fi-sr-play-pause"></i>
27+
28+
<div id="play-pause-btn" class="cursor-pointer text-4xl hover:text-gray-600">
29+
<i class="fa-solid fa-play-circle"></i>
3030
</div>
31-
<div id="next-btn">
32-
<i class="fi fi-ss-forward"></i>
31+
32+
<div id="next-btn" class="cursor-pointer hover:text-gray-600">
33+
<i class="fa-solid fa-forward-step"></i>
3334
</div>
3435
</div>
3536

36-
<div id="slider-container">
37-
<div id="time-duration">
37+
<div id="slider-container" class="w-full">
38+
<div id="time-duration" class="flex justify-between text-xs text-gray-500 mb-1">
3839
<div id="current-time">00:00</div>
39-
<input type="range" min="1" max="100" value="0">
40+
<input type="range" min="1" max="100" value="0" id="seek-slider" class="w-full cursor-pointer">
4041
<div id="total-time">00:00</div>
4142
</div>
42-
43-
<div id="volume">
44-
<div id="volume-down">
45-
<i class="fi fi-sr-volume-down"></i>
46-
</div>
47-
<input type="range" min="0" max="100" value="99">
48-
<div id="volume-up">
49-
<i class="fi fi-sr-volume"></i>
50-
</div>
43+
44+
<div id="volume" class="flex items-center gap-2 mt-4">
45+
<i class="fa-solid fa-volume-low text-xs text-gray-400"></i>
46+
<input type="range" min="0" max="100" value="99" id="volume-slider" class="w-full cursor-pointer">
47+
<i class="fa-solid fa-volume-high text-xs text-gray-400"></i>
5148
</div>
5249
</div>
53-
</div>
5450

51+
</div>
5552

5653
<script src="script.js"></script>
5754
</body>

0 commit comments

Comments
 (0)