104 lines
1.4 KiB
HTML
104 lines
1.4 KiB
HTML
<head>
|
|
|
|
<title>hiss</title>
|
|
<!-- 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/main.js"></script>
|
|
<!-- end injection -->
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
max-height: 100vh;
|
|
margin: 0;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
height: 100%;
|
|
}
|
|
|
|
section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
|
|
section:not(.open) {
|
|
display: none;
|
|
}
|
|
|
|
menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
menu li {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
list-style-type: none;
|
|
height: 28px;
|
|
margin: 8px 0;
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
menu li img {
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
|
|
menu li aside {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
menu .focus {
|
|
color: red;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<main data-action-set="main">
|
|
|
|
<section id="browser">
|
|
|
|
<header>Browser</header>
|
|
<menu data-action-set="browser" id="browser-menu"></menu>
|
|
|
|
</section>
|
|
<section id="queue">
|
|
|
|
<header>Queue</header>
|
|
<menu data-action-set="menu" id="queue-menu"></menu>
|
|
|
|
</section>
|
|
<section id="player">
|
|
|
|
<img id="track-cover">
|
|
<cite id="track-title"></cite>
|
|
<cite id="track-artist"></cite>
|
|
|
|
<code id="track-current-time">--:--</code>
|
|
<code id="track-duration">--:--</code>
|
|
|
|
</section>
|
|
|
|
</main>
|
|
|
|
</body>
|