Move style and favicon to static files
This commit is contained in:
parent
5d34359eb1
commit
9138ce4cc9
GPG Key ID:
DAF7821E067D9C48
|
|
@ -191,6 +191,8 @@ async fn main() -> tide::Result<()> {
|
||||||
app.at("/previous").post(post_previous);
|
app.at("/previous").post(post_previous);
|
||||||
app.at("/next").post(post_next);
|
app.at("/next").post(post_next);
|
||||||
|
|
||||||
|
app.at("/static").serve_dir("static/")?;
|
||||||
|
|
||||||
app.listen("0.0.0.0:8080").await?;
|
app.listen("0.0.0.0:8080").await?;
|
||||||
Ok(())
|
Ok(())
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 483 B |
|
|
@ -0,0 +1,170 @@
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: sans;
|
||||||
|
background-color: #112;
|
||||||
|
color: #fff;
|
||||||
|
display: flex;
|
||||||
|
margin: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.browser {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: bold;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.queue {
|
||||||
|
margin-top: 1.0rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.queue li {
|
||||||
|
padding: 0 0.5rem;
|
||||||
|
border-radius: .25rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.queue li.playing {
|
||||||
|
background-color: #334;
|
||||||
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
padding-right: .1rem;
|
||||||
|
color: #6c757d;
|
||||||
|
content: "/";
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dir {
|
||||||
|
overflow: auto;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dir li {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: .75rem .75rem;
|
||||||
|
border-radius: 3px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dir li img {
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dir li:hover {
|
||||||
|
background-color: #334;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul.dir li .material-symbols-outlined {
|
||||||
|
margin-right: 0.75rem;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song__name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player {
|
||||||
|
width: 25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player .nowplaying {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
background-color: #334;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
height: 9.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player .controls {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player .control {
|
||||||
|
font-size: 40px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player .current {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nowplaying .albumart {
|
||||||
|
margin-right: 1.0rem;
|
||||||
|
background-color: #445;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
transition: transform 200ms ease-in-out;
|
||||||
|
}
|
||||||
|
.nowplaying .albumart:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nowplaying .metadata {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nowplaying .idle {
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
@ -6,181 +6,8 @@
|
||||||
<script src="https://unpkg.com/htmx.org@1.9.0" integrity="sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls" crossorigin="anonymous"></script>
|
<script src="https://unpkg.com/htmx.org@1.9.0" integrity="sha384-aOxz9UdWG0yBiyrTwPeMibmaoq07/d3a96GCbb9x60f3mOt5zwkjdbcHFnKH8qls" crossorigin="anonymous"></script>
|
||||||
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
|
<script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,1,0" />
|
||||||
|
<link rel="stylesheet" href="/static/style.css">
|
||||||
<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">
|
<link href="/static/favicon.png" rel="icon" type="image/png">
|
||||||
|
|
||||||
<style>
|
|
||||||
html {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
font-family: sans;
|
|
||||||
background-color: #112;
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body > div {
|
|
||||||
padding: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.queue {
|
|
||||||
margin-top: 1.0rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.queue li {
|
|
||||||
padding: 0 0.5rem;
|
|
||||||
border-radius: .25rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.queue li.playing {
|
|
||||||
background-color: #334;
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
padding-right: .1rem;
|
|
||||||
color: #6c757d;
|
|
||||||
content: "/";
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.dir {
|
|
||||||
overflow: auto;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.dir li {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: .75rem .75rem;
|
|
||||||
border-radius: 3px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.dir li img {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
object-fit: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.dir li:hover {
|
|
||||||
background-color: #334;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul.dir li .material-symbols-outlined {
|
|
||||||
margin-right: 0.75rem;
|
|
||||||
width: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.song__name {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player {
|
|
||||||
width: 25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player .nowplaying {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: column;
|
|
||||||
background-color: #334;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
height: 9.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player .controls {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player .control {
|
|
||||||
font-size: 40px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player .current {
|
|
||||||
display: flex;
|
|
||||||
flex-flow: row;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.5rem;
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nowplaying .albumart {
|
|
||||||
margin-right: 1.0rem;
|
|
||||||
background-color: #445;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
transition: transform 200ms ease-in-out;
|
|
||||||
}
|
|
||||||
.nowplaying .albumart:hover {
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nowplaying .metadata {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nowplaying .idle {
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body hx-ext="sse" sse-connect="/sse">
|
<body hx-ext="sse" sse-connect="/sse">
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue