write html

nirajxdev · nirajxdev · commit 48fd2c1cd5eb · 2025-11-30T20:57:34.000+05:30
diff --git a/11_muic-player-clone/index.html b/11_muic-player-clone/index.html
@@ -5,9 +5,54 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Music Player Clone</title>
     <script src="https://cdn.tailwindcss.com"></script>
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css'>
+    <link rel='stylesheet' href='https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-rounded/css/uicons-solid-rounded.css'>
+    <style>
+        /* @import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-solid-straight/css/uicons-solid-straight.css') */
+    </style>
 </head>
 <body>
-    
+    <div id="player">
+
+        <div id="details">
+            <div id="now-playing">Playing</div>
+            <div id="track-art"></div>
+            <div id="track-name">Track name</div>
+            <div id="track-artist">Track Artist</div>
+        </div>
+
+        <div id="buttons">
+            <div id="prev-btn">
+                <i class="fi fi-ss-rewind"></i>
+            </div>
+            <div id="play-pause-btn">
+                <i class="fi fi-sr-play-pause"></i>
+            </div>
+            <div id="next-btn">
+                <i class="fi fi-ss-forward"></i>
+            </div>
+        </div>
+
+        <div id="slider-container">
+            <div id="time-duration">
+                <div id="current-time">00:00</div>
+                <input type="range" min="1" max="100" value="0">
+                <div id="total-time">00:00</div>
+            </div>
+
+            <div id="volume">
+                <div id="volume-down">
+                    <i class="fi fi-sr-volume-down"></i>
+                </div>
+                <input type="range" min="0" max="100" value="99">
+                <div id="volume-up">
+                    <i class="fi fi-sr-volume"></i>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
     <script src="script.js"></script>
 </body>
 </html>
