123 lines
3.0 KiB
HTML
123 lines
3.0 KiB
HTML
<head>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<!-- start injection -->
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"device": "./device/browser.js",
|
|
"store": "./lib/store.js"
|
|
}
|
|
}
|
|
</script>
|
|
<script src="./node_modules/jsmediatags/dist/jsmediatags.min.js"></script>
|
|
<script type="module" src="src/index.js"></script>
|
|
<!-- end injection -->
|
|
<script type="module" src="src/index.js"></script>
|
|
<link rel="stylesheet" href="assets/main.css"></link>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!-- <section class="controls">
|
|
|
|
<header>
|
|
|
|
<h3 id="track-title">Bocce</h3>
|
|
<p id="track-artist">Patricia Taxxon</p>
|
|
|
|
</header>
|
|
<nav>
|
|
|
|
<button id="prev">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 120 120" preserveAspectRatio="xMidYMid meet">
|
|
<path d="M15,60 L15,60 L60,105 L60,15 L15,60 M60,60 L60,60 L105,15 L105,105 L60,60 "/>
|
|
</svg>
|
|
|
|
</button>
|
|
<button id="playpause">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 105 120" preserveAspectRatio="xMidYMid meet">
|
|
<path id="pause-icon" d="M15,15 L15,15 L15,105 L45,105 L45,15 L15,15 M60,15 L60,15 L60,105 L90,105 L90,15 L60,15 "/>
|
|
<path id="play-icon" d="M30,15 L30,15 L30,105 L90,60 L30,15 "/>
|
|
</svg>
|
|
|
|
</button>
|
|
<button id="next">
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" baseProfile="full" version="1.1" viewbox="0 0 120 120" preserveAspectRatio="xMidYMid meet">
|
|
<path d="M60,60 L60,60 L15,105 L15,15 L60,60 M105,60 L105,60 L60,15 L60,105 L105,60 " />
|
|
</svg>
|
|
|
|
</button>
|
|
|
|
</nav>
|
|
|
|
|
|
</section> -->
|
|
|
|
<svg viewBox="0 0 100 1" xmlns="http://www.w3.org/2000/svg" id="tab-indicator">
|
|
<!-- No dashes nor gaps -->
|
|
<line x1="0" y1="0" x2="100" y2="0" stroke-width="2" id="tab-indicator-line" />
|
|
</svg>
|
|
<!-- <header id="tabs"></header> -->
|
|
<!-- <header>
|
|
<b>Browser</b>
|
|
</header> -->
|
|
<main id="main">
|
|
<section class="player">
|
|
|
|
<img>
|
|
<header id="track-title">Bocce</header>
|
|
<cite id="track-artist">Patricia Taxxon</cite>
|
|
|
|
<code id="timestamp">00:00</code>
|
|
<code id="track-length">00:00</code>
|
|
|
|
</section>
|
|
<section class="browser">
|
|
|
|
<header class="top">Browser</header>
|
|
<menu id="browser-menu"></menu>
|
|
|
|
</section>
|
|
<section class="queue">
|
|
|
|
|
|
<header class="top">Queue</header>
|
|
<menu id="queue-menu"></menu>
|
|
|
|
</section>
|
|
<section id="loading">
|
|
|
|
<header>— Loading —</header>
|
|
<small id="loading-status"></small>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
<svg class="progress" viewBox="0 0 100 1" xmlns="http://www.w3.org/2000/svg">
|
|
|
|
<path id="progress" d="M 0 1 L 100 1" stroke-width=1 stroke="currentColor"/>
|
|
|
|
</svg>
|
|
<nav>
|
|
|
|
<button class="left player">Previous</button>
|
|
<button class="center player playing">Paused</button>
|
|
<button class="center player paused">Play</button>
|
|
<button class="right player">Next</button>
|
|
|
|
<button class="left queue">Up</button>
|
|
<button class="center queue">Jump</button>
|
|
<button class="right queue">Down</button>
|
|
|
|
<button class="left browser">Queue All</button>
|
|
<button class="center browser">Queue</button>
|
|
<button class="right browser">Play Track</button>
|
|
|
|
</nav>
|
|
|
|
</body>
|