empede/templates/index.html

150 lines
4.4 KiB
HTML
Raw Normal View History

2023-04-25 01:26:27 +00:00
{# Template #}
<!DOCTYPE html>
<html>
<head>
<title>Empede</title>
<script src="https://unpkg.com/htmx.org@1.9.0" integrity="sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
2023-04-25 02:15:01 +00:00
<link href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAABqklEQVRoQ+2XOy8FURSF720oJRK3U3lfohYahULjF6CU3Erjf0hoJH6BUqeWeIRGId5RoVMpaH1bLpkIkz17ztw5wz7JSiaZvfesddY+j6nXKj7qFedfcwFlO+gO/AcHbhE5pBR6R9ywMvYjrBMt5ALSHHEHFP3qLVR2C90kdpZTnt9SCD3wblnh6ldIp9fACF+Wlgo2XIBiKpOL2B34PmHeQt5Cihko+xzwRewO5GxTbyFvob/cQnKSL4J50ATjoAucgE2wA64S12n5YZcf92Ajz1WiBxa7YDaFzTXvGqC3HRONgG4Iyc/JZMapjEbANsRXMpKX8Ciu0xMQOTeQl5QoHNiAyKpRQBQOHEN+qsoCLiAvW6ZlDJJ0b0n8LceyjR5QbMZIQrbeF2Puj2kWAVtUahlIPJLTb8hLTbEIkFN3z0BknZw1Q15wAVLwEExnICNtMwCeM+SoQi0OSOE+sA/GFF95JWYOyO4VfFgFCBHNXeiJuAVwFpx5u2AeAZ+clniQdSE30VEgpC/BEZAbqThQ2AghoDBymsIuQDNLRca4A0XOrqZ25R14B64XVDFuhNlbAAAAAElFTkSuQmCC" rel="icon" type="image/png">
2023-04-25 01:26:27 +00:00
<style>
body {
font-family: sans;
background-color: #112;
color: #fff;
}
a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
ul {
list-style: none;
padding: 0;
}
ul.queue li {
padding: .5rem 0;
}
ul.queue li.playing {
font-weight: bold;
}
ul.breadcrumb {
display: flex;
margin-bottom: 1rem;
flex-wrap: wrap;
list-style: none;
background-color: #334;
border-radius: .25rem;
padding: .75rem 1rem;
}
ul.breadcrumb li:not(:first-child)::before {
display: inline-block;
padding-left: .5rem;
2023-04-25 02:03:33 +00:00
padding-right: .1rem;
2023-04-25 01:26:27 +00:00
color: #6c757d;
content: "/";
}
ul.dir li {
cursor: pointer;
padding: .75rem .75rem;
border-radius: 3px;
display: flex;
align-items: center;
}
ul.dir li:hover {
background-color: #334;
}
ul.dir li .material-symbols-outlined {
margin-right: 0.75rem;
width: 24px;
}
.song .song__name {
font-weight: bold;
}
span.control {
font-size: 40px;
cursor: pointer;
}
</style>
</head>
<body hx-sse="connect:/sse">
<span
hx-post="/previous" hx-swap="none"
class="control material-symbols-outlined" role="button"
>skip_previous</span>
<span
hx-post="/play" hx-swap="none"
class="control material-symbols-outlined" role="button"
>play_arrow</span>
<span
hx-post="/pause" hx-swap="none"
class="control material-symbols-outlined" role="button"
>pause</span>
<span
hx-post="/next" hx-swap="none"
class="control material-symbols-outlined" role="button"
>skip_next</span>
<div hx-trigger="load,sse:queue,sse:player" hx-get="/queue"></div>
<hr>
<ul class="breadcrumb">
<li><a href="?path=">Root</a></li>
{% for (i, component) in path.iter().enumerate() %}
<li>
{% if i == path.len() - 1 %}
{{ component }}
{% else %}
<a href="?path={{ path[..i + 1].join("/") }}">
{{ component }}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
<ul class="dir">
{% for entry in entries %}
2023-04-25 02:00:46 +00:00
{% match entry %}
{% when mpd::Entry::Song with { name, path, artist } %}
<li hx-post="/queue?path={{path}}" hx-swap="none" role="button" >
2023-04-25 01:26:27 +00:00
<span class="material-symbols-outlined">music_note</span>
2023-04-25 02:00:46 +00:00
<div class="song">
2023-04-25 01:26:27 +00:00
<div class="song__name">{{ name }}</div>
<div class="song__artist">{{ artist }}</div>
</a>
2023-04-25 02:00:46 +00:00
</li>
{% when mpd::Entry::Directory with { name, path }%}
<li onclick="window.location = '?path={{path}}'">
2023-04-25 01:26:27 +00:00
<span class="material-symbols-outlined">folder</span>
<a href="?path={{path}}">{{ name }}</a>
2023-04-25 02:00:46 +00:00
</li>
{% when mpd::Entry::Playlist with { name, path } %}
<li hx-post="/queue?path={{path}}" hx-swap="none" role="button" >
2023-04-25 01:26:27 +00:00
<span class="material-symbols-outlined">playlist_play</span>
2023-04-25 02:00:46 +00:00
<div class="song">
<div class="song__name">{{ name }}</div>
</a>
2023-04-25 01:26:27 +00:00
</li>
2023-04-25 02:00:46 +00:00
{% endmatch %}
2023-04-25 01:26:27 +00:00
{% endfor %}
</ul>
</body>
</html>