ari/arimelody.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

major UI/UX improvements

Browse source 
Signed-off-by: ari melody <ari@arimelody.me>
This commit is contained in:
ari melody 2024-03-18 15:04:04 +00:00
parent 93539c8376
commit 6efd47c6c6
17 changed files with 739 additions and 458 deletions
Download patch file Download diff file Expand all files Collapse all files

91
views/music-gateway.html
View file

@ -31,8 +31,8 @@
<meta name="twitter:image" content="https://arimelody.me{{.ResolveArtwork}}">
<meta name="twitter:image:alt" content="Cover art for &quot;{{.Title}}&quot;">
<script type="text/javascript" src="/script/music-gateway.js" defer=""></script>
<script type="text/javascript" src="/script/prideflag.js" defer=""></script>
<script type="module" src="/script/music-gateway.js" defer></script>
<script type="text/javascript" src="/script/prideflag.js" defer></script>
<link rel="stylesheet" href="/style/music-gateway.css">
</head>
<body>
@ -41,6 +41,8 @@
<a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>
{{block "header" .}}{{end}}
<main>
<div id="music-container">
<div id="art-container">
@ -52,40 +54,75 @@
<div class="tilt-bottom"></div>
<div class="tilt-bottomleft"></div>
<div class="tilt-left"></div>
<img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork">
<img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork" width=240 height=240>
</div>
<div id="vertical-line"></div>
<div id="info">
<h1 id="title">{{.Title}}<span id="year">{{.Year}}</span></h1>
<p id="artist">{{.PrintArtists}}</p>
<p id="type" class="{{.Type}}">{{.Type}}</p>
<div id="main">
<div id="title-container">
<h1 id="title">{{.Title}}</h1>
<span id="year">{{.Year}}</span>
</div>
<p id="artist">{{.PrintArtists}}</p>
<p id="type" class="{{.Type}}">{{.Type}}</p>
<div id="links">
{{if .Buylink}}
<a href="{{.Buylink}}" target="_blank" class="buy">
{{if .Buyname}}
<div id="links">
{{if .Buylink}}
<a href="{{.Buylink}}" target="_blank" class="buy">
{{if .Buyname}}
{{.Buyname}}
{{else}}
{{if .Free}}
download
{{else}}
buy
{{if .Free}}
download
{{else}}
buy
{{end}}
{{end}}</a>
{{end}}
{{end}}</a>
{{end}}
{{range .Links}}
<a class="{{.NormaliseName}}" target="_blank" href="{{.Url}}">
{{.Name}}
</a>
{{end}}
{{range .Links}}
<a class="{{.NormaliseName}}" target="_blank" href="{{.Url}}">
{{.Name}}
</a>
{{end}}
</div>
<p id="description">
{{.Description}}
</p>
<ul id="extras">
{{if .Credits}}
<li><a href="#credits">credits</a></li>
{{end}}
{{if .Lyrics}}
<li><a href="#lyrics">lyrics</a></li>
{{end}}
</ul>
<p id="share">share</p>
</div>
<p id="description">
{{.Description}}
</p>
{{if .Credits}}
<div id="credits">
<a href="#" class="scrollback">go back</a>
<h2>credits:</h2>
<ul>
{{range .Credits}}
<li><strong><a href="{{.Url}}">{{.Name}}</a></strong>: {{.Role}}</li>
{{end}}
</ul>
</div>
{{end}}
<p id="share">share</p>
{{if .Lyrics}}
<div id="lyrics">
<a href="#" class="scrollback">go back</a>
<h2>lyrics:</h2>
<p>{{.Lyrics}}</p>
</div>
{{end}}
</div>
<!-- <div id="tracks"> -->
<!-- <% var file = `/audio/preview/${data.id}.webm` %> -->
@ -114,8 +151,6 @@
</div>
</main>
<footer>
<p>made with &#10084; by <a href="/" target="_blank">ari melody</a>, 2024</p>
</footer>
{{block "footer" .}}{{end}}
</body>
</html>