_
/
empede
1
0
Fork 0
Code Issues Releases 18 Activity
empede/templates/index.html

202 lines
4.6 KiB
HTML
Raw Normal View History

Initial commit
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>
Migrate to SSE extension, make SSE more robust
2023-04-25 16:46:21 +00:00
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
Initial commit
2023-04-25 01:26:27 +00:00
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
That's one way to add a favicon
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">
Initial commit
2023-04-25 01:26:27 +00:00
<style>
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
html {
height: 100%;
}
Initial commit
2023-04-25 01:26:27 +00:00
body {
font-family: sans;
background-color: #112;
color: #fff;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
display: flex;
margin: 0;
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
height: 100%;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
}
body > div {
padding: 1rem;
}
.browser {
flex: 1;
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
display: flex;
flex-flow: column;
height: 100%;
Initial commit
2023-04-25 01:26:27 +00:00
}
a {
color: #fff;
font-weight: bold;
text-decoration: none;
}
ul {
list-style: none;
padding: 0;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
margin: 0;
}
ul.queue {
margin-top: 1.0rem;
Initial commit
2023-04-25 01:26:27 +00:00
}
ul.queue li {
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
padding: 0 0.5rem;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
border-radius: .25rem;
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
display: flex;
align-items: center;
Initial commit
2023-04-25 01:26:27 +00:00
}
Implement "now playing" card
2023-04-25 14:32:51 +00:00
Initial commit
2023-04-25 01:26:27 +00:00
ul.queue li.playing {
Implement "now playing" card
2023-04-25 14:32:51 +00:00
background-color: #334;
Initial commit
2023-04-25 01:26:27 +00:00
}
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;
Make breadcrumb padding consistent
2023-04-25 02:03:33 +00:00
padding-right: .1rem;
Initial commit
2023-04-25 01:26:27 +00:00
color: #6c757d;
content: "/";
}
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
ul.dir {
overflow: auto;
flex: 1;
}
Initial commit
2023-04-25 01:26:27 +00:00
ul.dir li {
cursor: pointer;
padding: .75rem .75rem;
border-radius: 3px;
display: flex;
align-items: center;
}
Implement "now playing" card
2023-04-25 14:32:51 +00:00
ul.dir li img {
width: 48px;
height: 48px;
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
object-fit: cover;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
}
Initial commit
2023-04-25 01:26:27 +00:00
ul.dir li:hover {
background-color: #334;
}
ul.dir li .material-symbols-outlined {
margin-right: 0.75rem;
width: 24px;
}
Implement "now playing" card
2023-04-25 14:32:51 +00:00
.song__name {
Initial commit
2023-04-25 01:26:27 +00:00
font-weight: bold;
}
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
.albumart {
border-radius: 0.25rem;
}
.queue .albumart {
margin: 0.75rem;
margin-left: 0;
width: 48px;
height: 48px;
}
.albumart img {
border-radius: 0.25rem;
width: 100%;
height: 100%;
object-fit: cover;
}
Implement "now playing" card
2023-04-25 14:32:51 +00:00
.player {
width: 25rem;
}
.player .nowplaying {
Style "Nothing currently playing" text
2023-04-25 16:59:37 +00:00
display: flex;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
flex-flow: column;
background-color: #334;
border-radius: 0.25rem;
Style "Nothing currently playing" text
2023-04-25 16:59:37 +00:00
height: 9.5rem;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
}
.player .controls {
display: flex;
justify-content: space-around;
padding: 0.5rem;
}
.player .control {
Initial commit
2023-04-25 01:26:27 +00:00
font-size: 40px;
cursor: pointer;
}
Implement "now playing" card
2023-04-25 14:32:51 +00:00
.player .current {
display: flex;
flex-flow: row;
align-items: center;
padding: 0.5rem;
Style "Nothing currently playing" text
2023-04-25 16:59:37 +00:00
flex: 1;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
}
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
.nowplaying .albumart {
margin-right: 1.0rem;
background-color: #445;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
width: 80px;
height: 80px;
Open album art in new tab when clicking on it
2023-04-27 02:03:52 +00:00
transition: transform 200ms ease-in-out;
Implement "now playing" card
2023-04-25 14:32:51 +00:00
}
Open album art in new tab when clicking on it
2023-04-27 02:03:52 +00:00
.nowplaying .albumart:hover {
transform: scale(1.05);
};
Implement "now playing" card
2023-04-25 14:32:51 +00:00
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
.nowplaying .metadata {
Implement "now playing" card
2023-04-25 14:32:51 +00:00
flex: 1;
}
Style "Nothing currently playing" text
2023-04-25 16:59:37 +00:00
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
.nowplaying .idle {
Style "Nothing currently playing" text
2023-04-25 16:59:37 +00:00
font-weight: bold;
text-align: center;
}
Initial commit
2023-04-25 01:26:27 +00:00
</style>
</head>
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
<body hx-ext="sse" sse-connect="/sse">
<div class="browser" hx-trigger="sse:database" hx-get="/browser">
{% include "browser.html" %}
Implement "now playing" card
2023-04-25 14:32:51 +00:00
</div>
Several changes: - Add MPD_HOST and MPD_PORT environment variables - Improve styling - Move browser to separate template - Reload directory on database update
2023-04-27 01:40:19 +00:00
<div class="player">
<div hx-trigger="sse:player" hx-get="/player">
{% include "player.html" %}
</div>
<div hx-trigger="sse:playlist,sse:player" hx-get="/queue">
{% include "queue.html" %}
</div>
Implement "now playing" card
2023-04-25 14:32:51 +00:00
</div>
Initial commit
2023-04-25 01:26:27 +00:00
</body>
</html>