mirror of
https://github.com/thebaer/cdr.git
synced 2024-11-14 17:21:01 +00:00
75 lines
1.4 KiB
Cheetah
75 lines
1.4 KiB
Cheetah
{{define "mixtape"}}
|
|
<html>
|
|
<head>
|
|
<title>Mixtape</title>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<style type="text/css">
|
|
body {
|
|
font-size: 1.2em;
|
|
margin: 1em;
|
|
font-family: Helvetica, sans-serif;
|
|
}
|
|
h1 {
|
|
font-size: 1.2em;
|
|
font-weight: normal;
|
|
font-style: italic;
|
|
}
|
|
audio {
|
|
width: 100%;
|
|
}
|
|
p {
|
|
line-height: 1.5;
|
|
}
|
|
#wrapper {
|
|
margin: 1em auto 2em;
|
|
max-width: 30em;
|
|
}
|
|
#playlist {
|
|
list-style: decimal-leading-zero;
|
|
margin: 1em 0;
|
|
}
|
|
#playlist li {
|
|
margin: 0.5em 0;
|
|
}
|
|
li.active > a {
|
|
font-weight: bold;
|
|
}
|
|
li p {
|
|
display: none;
|
|
}
|
|
li.active p {
|
|
display: block;
|
|
}
|
|
#controls {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 1em 0 2em;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="wrapper">
|
|
<h1>Mixtape</h1>
|
|
{{template "player" .Tracks}}
|
|
<div id="controls">
|
|
<a id="prev" href="#prev">⏮ Previous</a>
|
|
<a id="next" href="#next">Next ⏭</a>
|
|
</div>
|
|
{{template "playlist" .Tracks}}
|
|
{{template "playlist-js"}}
|
|
</div>
|
|
</body>
|
|
</html>
|
|
{{end}}
|
|
|
|
{{define "track-info"}}
|
|
{{if eq .Num 1}}
|
|
<p>[Here I might introduce this mix.]</p>
|
|
<p>[Some notes about track 1.]</p>
|
|
{{else if eq .Num 2}}
|
|
<p>[Some notes about track 2.]</p>
|
|
{{else if eq .Num 5}}
|
|
<p>[Some notes about track 5.]</p>
|
|
{{end}}
|
|
{{end}} |