mirror of
https://github.com/rvtr/music.git
synced 2025-06-18 10:45:31 -04:00
223 lines
6.2 KiB
HTML
223 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
<!--
|
|
- primary meta tags
|
|
-->
|
|
<title>Music Player</title>
|
|
<meta name="title" content="Music Player">
|
|
<meta name="description" content="A web music player html template made by codewithsadee">
|
|
|
|
<!--
|
|
- favicon
|
|
-->
|
|
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">
|
|
|
|
<!--
|
|
- google font link
|
|
-->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
|
|
|
<!--
|
|
- material icon font
|
|
-->
|
|
<link rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,-25" />
|
|
|
|
<!--
|
|
- custom css link
|
|
-->
|
|
<link rel="stylesheet" href="./assets/css/style.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!--
|
|
- #TOP APP BAR
|
|
-->
|
|
|
|
<div class="top-bar wrapper">
|
|
|
|
<div class="logo wrapper">
|
|
<span class="material-symbols-rounded">graphic_eq</span>
|
|
|
|
<h1 class="title-lg">Lillian's Playlist</h1>
|
|
</div>
|
|
|
|
<div class="top-bar-actions">
|
|
<button class="btn-icon" data-playlist-toggler>
|
|
<span class="material-symbols-rounded">queue_music</span>
|
|
</button>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<main>
|
|
<article>
|
|
|
|
<!--
|
|
- #PLAYER
|
|
-->
|
|
|
|
<div class="player" style="overflow-x: hidden;">
|
|
<div class="container">
|
|
|
|
<figure class="music-banner">
|
|
<img src="https://cdn.randommeaninglesscharacters.com/music-albums/Ahmad_Jamal_-_Jamalca_(1974).jpeg" width="100%" height="100%" alt="Jamalca Album Poster"
|
|
class="img-cover" data-player-banner>
|
|
</figure>
|
|
|
|
<div class="music-content">
|
|
|
|
<h2 class="headline-sm" data-title>Jamalca</h2>
|
|
|
|
<p class="label-md artist"><span data-artist>Ahmad Jamal</span><span data-year>1974</span></p>
|
|
<!-- It's not a certified lillian skinner edit without loads of shitty inline CSS -->
|
|
<div style="margin: 4px, 4px;padding: 0px;width: 100%;overflow-x: auto;overflow-y: hidden;white-space: nowrap;text-align: left;">
|
|
<table>
|
|
<tr>
|
|
<th data-track-1>CONTENT1</th>
|
|
<th data-track-6>CONTENT6</th>
|
|
<th data-track-11>CONTENT11</th>
|
|
<th data-track-16>CONTENT16</th>
|
|
<th data-track-21>CONTENT21</th>
|
|
</tr>
|
|
<tr>
|
|
<th data-track-2>CONTENT2</th>
|
|
<th data-track-7>CONTENT7</th>
|
|
<th data-track-12>CONTENT12</th>
|
|
<th data-track-17>CONTENT17</th>
|
|
<th data-track-22>CONTENT22</th>
|
|
</tr>
|
|
<tr>
|
|
<th data-track-3>CONTENT3</th>
|
|
<th data-track-8>CONTENT8</th>
|
|
<th data-track-13>CONTENT13</th>
|
|
<th data-track-18>CONTENT18</th>
|
|
<th data-track-23>CONTENT23</th>
|
|
</tr>
|
|
<tr>
|
|
<th data-track-4>CONTENT4</th>
|
|
<th data-track-9>CONTENT9</th>
|
|
<th data-track-14>CONTENT14</th>
|
|
<th data-track-19>CONTENT19</th>
|
|
<th data-track-24>CONTENT24</th>
|
|
</tr>
|
|
<tr>
|
|
<th data-track-5>CONTENT5</th>
|
|
<th data-track-10>CONTENT10</th>
|
|
<th data-track-15>CONTENT15</th>
|
|
<th data-track-20>CONTENT20</th>
|
|
<th data-track-25>CONTENT25</th>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="seek-control">
|
|
|
|
<div>
|
|
<div class="range-wrapper">
|
|
<input type="range" step="any" value="0" class="range" data-range data-seek>
|
|
|
|
<div class="range-fill" data-range-fill></div>
|
|
</div>
|
|
|
|
<div class="duration-label wrapper">
|
|
<span class="label-md" data-running-time>0:00</span>
|
|
|
|
<span class="label-md" data-duration>0:01</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="volume">
|
|
<button class="btn-icon" data-volume-btn>
|
|
<span class="material-symbols-rounded">volume_up</span>
|
|
</button>
|
|
|
|
<div class="range-wrapper">
|
|
<input type="range" step="any" max="1" value="1" class="range" data-range data-volume>
|
|
|
|
<div class="range-fill" data-range-fill></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="player-control wrapper">
|
|
|
|
<button class="btn-icon toggle" data-repeat>
|
|
<span class="material-symbols-rounded default-icon">repeat</span>
|
|
<span class="material-symbols-rounded active-icon">repeat_one</span>
|
|
</button>
|
|
|
|
<button class="btn-icon" data-skip-prev>
|
|
<span class="material-symbols-rounded">skip_previous</span>
|
|
</button>
|
|
|
|
<button class="btn-icon play" data-play-btn>
|
|
<span class="material-symbols-rounded default-icon">play_arrow</span>
|
|
<span class="material-symbols-rounded active-icon">pause</span>
|
|
</button>
|
|
|
|
<button class="btn-icon" data-skip-next>
|
|
<span class="material-symbols-rounded">skip_next</span>
|
|
</button>
|
|
|
|
<button class="btn-icon toggle" data-shuffle>
|
|
<span class="material-symbols-rounded">shuffle</span>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- #PLAYLIST
|
|
-->
|
|
|
|
<div class="playlist" data-playlist>
|
|
|
|
<ul class="music-list" data-music-list></ul>
|
|
|
|
</div>
|
|
|
|
<div class="overlay" data-playlist-toggler data-overlay></div>
|
|
|
|
</article>
|
|
</main>
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
- custom js link
|
|
-->
|
|
<script src="./assets/js/script.js"></script>
|
|
|
|
</body>
|
|
|
|
</html> |