arimelody.me/views/music-gateway.html

122 lines
7.5 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.PrintArtists}} - {{.Title}}</title>
<link rel="icon" href="{{.ResolveArtwork}}">
<meta name="description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists}} on all platforms!">
<meta name="author" content="{{.PrintArtists}}">
<meta name="keywords" content="{{.PrintCommaArtists}}, music, {{.Title}}, {{.Id}}, {{.Year}}">
<meta property="og:url" content="https://arimelody.me/music/{{.Id}}">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_IE">
<meta property="og:site_name" content="ari melody music">
<meta property="og.Title" content="{{.PrintArtists}} - {{.Title}}">
<meta property="og:description" content="Stream &quot;{{.Title}}&quot; by {{.PrintArtists}} on all platforms!">
<meta property="og:image" content="https://arimelody.me{{.ResolveArtwork}}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@funniduck">
<meta name="twitter:creator" content="@funniduck">
<meta property="twitter:domain" content="arimelody.me">
<meta property="twitter:url" content="https://arimelody.me/music/{{.Id}}">
<meta name="twitter.Title" content="{{.PrintArtists}} - {{.Title}}">
<meta name="twitter:description" content="Stream &quot;{{.Title}}&quot; by mellodoot on all platforms!">
<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>
<link rel="stylesheet" href="/style/music-gateway.css">
</head>
<body>
<div id="background" data-url="{{.ResolveArtwork}}"></div>
<div id="overlay"></div>
<a id="go-back" title="back to arimelody.me" href="/music">&lt;</a>
<main>
<div id="music-container">
<div id="art-container">
<div class="tilt-topleft"></div>
<div class="tilt-top"></div>
<div class="tilt-topright"></div>
<div class="tilt-right"></div>
<div class="tilt-bottomright"></div>
<div class="tilt-bottom"></div>
<div class="tilt-bottomleft"></div>
<div class="tilt-left"></div>
<img id="artwork" src="{{.ResolveArtwork}}" alt="{{.Title}} artwork">
</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="links">
{{if .Buylink}}
<a href="{{.Buylink}}" target="_blank" class="buy">
{{if .Buyname}}
{{.Buyname}}
{{else}}
{{if .Free}}
download
{{else}}
buy
{{end}}
{{end}}</a>
{{end}}
{{range .Links}}
<a class="{{.NormaliseName}}" target="_blank" href="{{.Url}}">
{{.Name}}
</a>
{{end}}
</div>
<p id="description">
{{.Description}}
</p>
<p id="share">share</p>
</div>
<!-- <div id="tracks"> -->
<!-- <% var file = `/audio/preview/${data.id}.webm` %> -->
<!-- <% if (data.tracks && typeof(data.tracks) == typeof([])) { %> -->
<!-- <% for( let i = 0; i < data.tracks.length; i++ ) { %> -->
<!-- <% -->
<!-- songid = data.tracks[i].title.toLowerCase().replace(/[^a-z0-9]/g, ""); -->
<!-- file = `/audio/preview/${data.id}-${songid}.webm`; -->
<!-- %> -->
<!---->
<!-- <div class="track-preview" id="preview-<%= songid %>"> -->
<!-- <i class="fa-solid fa-play play"></i> -->
<!-- <p><%= data.tracks[i].title %></p> -->
<!-- <audio src="<%= file %>"></audio> -->
<!-- </div> -->
<!---->
<!-- <% } %> -->
<!-- <% } else { %> -->
<!-- <div class="track-preview" id="preview-<%= data.id %>"> -->
<!-- <i class="fa-solid fa-play play"></i> -->
<!-- <p>{{.Title}}</p> -->
<!-- <audio src="<%= file %>"></audio> -->
<!-- </div> -->
<!-- <% } %> -->
<!-- </div> -->
</div>
</main>
<footer>
<p>made with &#10084; by <a href="/" target="_blank">ari melody</a>, 2024</p>
</footer>
</body>
</html>