implementing themes and refactoring path operations
This commit is contained in:
evilchili
@@ -0,0 +1,10 @@
|
||||
# Blue Train
|
||||
|
||||
This is the default theme for Groove on Demand, inspired by the cover to John Coltrane's 1957 album _Blue Train_, [designed by Reid Miles](https://www.immigrantentrepreneurship.org/images/john-coltrane-blue-train-album-cover-1957/).
|
||||
|
||||
## Credits
|
||||
```
|
||||
author: @evilchili
|
||||
author_link: https://linernotes.club/@evilchili
|
||||
version: 1.0
|
||||
```
|
||||
@@ -0,0 +1,259 @@
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: 0;
|
||||
font-family: 'Clarendon MT Std', sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
background: rgb(0,4,16);
|
||||
background: linear-gradient(0deg, rgba(0,4,16,1) 31%, rgba(1,125,147,1) 97%);
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
text-decoration: none;
|
||||
color: #f1f2f6;
|
||||
}
|
||||
a:active, a:hover {
|
||||
color: #70bc45;
|
||||
}
|
||||
|
||||
#container {
|
||||
overflow-x: wrap;
|
||||
width: 96%;
|
||||
height: 96%;
|
||||
margin: auto;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#details {
|
||||
margin-left: 0.25em;
|
||||
display: flex;
|
||||
border-bottom: 1px solid rgb(255,255,255,0.3);
|
||||
}
|
||||
|
||||
#poster {
|
||||
display: none;
|
||||
width: 10em;
|
||||
height: 10em;
|
||||
background: #DDD;
|
||||
}
|
||||
#poster > img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* informmation */
|
||||
#playlist_title {
|
||||
margin-bottom: 0.25em;
|
||||
color: #f1f2f6;
|
||||
}
|
||||
#playlist_desc {
|
||||
}
|
||||
|
||||
|
||||
|
||||
#player {
|
||||
width: 100%;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
#controls {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
vertical-align: middle;
|
||||
padding-right: 1em;
|
||||
}
|
||||
#controls > div {
|
||||
width: 5em;
|
||||
height: 5em;
|
||||
}
|
||||
|
||||
|
||||
#track {
|
||||
color: #70bc45;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
#track_controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#timer {
|
||||
margin-left:0;
|
||||
padding-left:0;
|
||||
}
|
||||
#duration {
|
||||
}
|
||||
|
||||
/* Controls */
|
||||
.widget {
|
||||
margin-right: 0.5em;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
}
|
||||
.btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#big_button {
|
||||
position: relative;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 5em;
|
||||
}
|
||||
#playBtn {
|
||||
font-family: sans-serif;
|
||||
font-size: 5em;
|
||||
padding-left: 0.1em;
|
||||
}
|
||||
#pauseBtn {
|
||||
font-family: sans-serif;
|
||||
display: none;
|
||||
font-size: 4em;
|
||||
}
|
||||
#prevBtn {
|
||||
color: #fff;
|
||||
text-align: right;
|
||||
vertical-align: middle;
|
||||
line-height: 0.75em;
|
||||
font-size: 1.5em;
|
||||
padding:0;
|
||||
}
|
||||
#nextBtn {
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
line-height: 0.75em;
|
||||
font-size: 1.5em;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
|
||||
/* Progress */
|
||||
#bar {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
line-height: 1em;
|
||||
}
|
||||
#bar > hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid #000;
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: calc(100% - 1em);
|
||||
}
|
||||
|
||||
#progress {
|
||||
position: relative;
|
||||
width: 0%;
|
||||
height: 0.33em;
|
||||
margin: 0.33em 0;
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
/* Loading */
|
||||
#loading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Plylist */
|
||||
#playlist {
|
||||
display: block;
|
||||
margin-left: 0.25em;
|
||||
}
|
||||
#list {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
.list-song {
|
||||
padding: 0.25em;
|
||||
}
|
||||
.list-song:hover {
|
||||
cursor: pointer;
|
||||
background: #f1f2f6;
|
||||
}
|
||||
|
||||
#footer {
|
||||
font-family: helvetica, sans-serif;
|
||||
border-top: 1px solid rgb(128,128,128,0.3);
|
||||
text-align: right;
|
||||
color: #888;
|
||||
font-size: 0.9em;
|
||||
letter-spacing: 0.1em;
|
||||
margin: 0;
|
||||
margin-top: 1em;
|
||||
padding-top: 1em;
|
||||
}
|
||||
#footer a {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Volume */
|
||||
#volume {
|
||||
display: none;
|
||||
}
|
||||
.bar {
|
||||
}
|
||||
#barEmpty {
|
||||
width: 90%;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
#barFull {
|
||||
width: 90%;
|
||||
}
|
||||
#sliderBtn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Fade-In */
|
||||
.fadeout {
|
||||
webkit-animation: fadeout 0.5s;
|
||||
-ms-animation: fadeout 0.5s;
|
||||
animation: fadeout 0.5s;
|
||||
}
|
||||
.fadein {
|
||||
webkit-animation: fadein 0.5s;
|
||||
-ms-animation: fadein 0.5s;
|
||||
animation: fadein 0.5s;
|
||||
}
|
||||
@keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-webkit-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@-ms-keyframes fadein {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-webkit-keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@-ms-keyframes fadeout {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0; }
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="user-scalable=no">
|
||||
<title>Groove On Demand</title>
|
||||
<link rel='stylesheet' href='/static/styles.css' />
|
||||
<link rel='stylesheet' href="https://fonts.cdnfonts.com/css/clarendon-mt-std" />
|
||||
<script defer crossorigin src='https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.core.min.js'></script>
|
||||
<script defer src='/static/player.js'></script>
|
||||
<script>
|
||||
var playlist_tracks = [
|
||||
% for entry in playlist['entries']:
|
||||
{
|
||||
title: "{{entry['artist']}} - {{entry['title']}}",
|
||||
url: "{{entry['url']}}",
|
||||
},
|
||||
% end
|
||||
];
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id='container'>
|
||||
|
||||
<div id='details'>
|
||||
<div id='poster'>
|
||||
<img src=''></img>
|
||||
</div>
|
||||
<div>
|
||||
<h1 id='playlist_title'>{{playlist['name']}}</h1>
|
||||
<span id='playlist_desc'>{{playlist['description']}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table id='player'>
|
||||
<tr>
|
||||
<td id='controls'>
|
||||
<div id='big_button' class='btn'>
|
||||
<div id="loading"></div>
|
||||
<div id="playBtn">⏵</div>
|
||||
<div id="pauseBtn">⏸</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<div id="track"></div>
|
||||
<div id='track_controls'>
|
||||
<div class='widget' id="timer">0:00</div>
|
||||
<div class='widget' id="bar">
|
||||
<hr>
|
||||
<div id="progress"></div>
|
||||
</div>
|
||||
<div class='widget' id="duration">0:00</div>
|
||||
<div class="widget btn" id="prevBtn">⏮</div>
|
||||
<div class="widget btn" id="nextBtn">⏭</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<div id="playlist">
|
||||
<div id="list"></div>
|
||||
</div>
|
||||
<div id='footer'>groove on demand : an <a alt="evilchili at liner notes dot club" href="https://linernotes.club/@evilchili">@evilchili</a> jam</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user