diff options
Diffstat (limited to 'ui')
| -rw-r--r-- | ui/html/base.tmpl.html | 20 | ||||
| -rw-r--r-- | ui/html/music_player.tmpl.html | 28 | ||||
| -rw-r--r-- | ui/html/pages/index.tmpl.html | 2 |
3 files changed, 41 insertions, 9 deletions
diff --git a/ui/html/base.tmpl.html b/ui/html/base.tmpl.html index f3d618d..0bcf405 100644 --- a/ui/html/base.tmpl.html +++ b/ui/html/base.tmpl.html @@ -4,16 +4,20 @@ <head> <meta charset="UTF-8"> <title>{{template "title" .}} - Paterissa</title> - <link rel="stylesheet" href="https://unpkg.com/7.css"> + <link rel="stylesheet" href="/static/get?file=app.css"> </head> <body> - <header> - <h1>Paterissa</h1> - </header> - <hr> - <main> - {{template "main" .}} - </main> + <img src="/static/get?file=images/bg.png" id="bg-image"> + <div class="pane"> + <header> + <h1>Paterissa</h1> + </header> + <hr> + <main class="inner_pane"> + {{template "main" .}} + </main> + </div> + {{template "music_player" .}} </body> </html> {{end}} diff --git a/ui/html/music_player.tmpl.html b/ui/html/music_player.tmpl.html new file mode 100644 index 0000000..e58a9c0 --- /dev/null +++ b/ui/html/music_player.tmpl.html @@ -0,0 +1,28 @@ +{{define "music_player"}} +<script type="module" src="/static/get?file=music_player.js"></script> +<div id="music_player"> + <div class="vert_align center"> + <div class="vert_align"> + <div id="mp_track_name">Track Name</div> + <div id="mp_track_artist">Artist</div> + </div> + <div class="vert_align"> + <div id="mp_prev_track" class="vert_align" onclick="mpPrevTrack()"> + <img src="/static/get?file=images/chevron_left.svg" alt="Previous Track"> + </div> + <div id="mp_pp_track" class="vert_align" onclick="mpPpTrack()"> + <img src="/static/get?file=images/play.svg" alt="Play"> + </div> + <div id="mp_next_track" class="vert_align" onclick="mpNextTrack()"> + <img src="/static/get?file=images/chevron_right.svg" alt="Next Track"> + </div> + </div> + <div class="slider_container vert_align"> + <div id="mp_current_time" class="vert_align">00:00</div> + <input type="range" class="vert_align" min="1" max="100" value="0" class="seek_slider" onchange="mpSeekTo()"> + <div id="mp_total_duration" class="vert_align">00:00</div> + </div> + <select name="Tracks" id="mp_tracks"></select> + </div> +</div> +{{end}} diff --git a/ui/html/pages/index.tmpl.html b/ui/html/pages/index.tmpl.html index c252465..46a58e8 100644 --- a/ui/html/pages/index.tmpl.html +++ b/ui/html/pages/index.tmpl.html @@ -2,5 +2,5 @@ {{define "main"}} <h2>Blog</h2> - <p>Home of {{.Webmaster}}</p> + <p>Home of {{.Name}}</p> {{end}} |