87 lines
4.0 KiB
HTML
87 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Music · Clove Twilight</title>
|
|
<link rel="stylesheet" href="/css/main.css">
|
|
<script>try { var f = localStorage.getItem('ctpFlavor'); document.documentElement.setAttribute('data-flavor', ['mocha', 'macchiato', 'frappe', 'latte'].indexOf(f) >= 0 ? f : 'mocha'); } catch (e) { document.documentElement.setAttribute('data-flavor', 'mocha'); }</script>
|
|
<link rel="icon" type="image/svg+xml" href="/assets/favicon/favicon.svg">
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="What Clove Twilight is listening to — live now-playing, synced lyrics, and recent plays.">
|
|
<meta name="author" content="doughmination">
|
|
<meta name="robots" content="index, follow">
|
|
<link rel="canonical" href="https://clove.is-a.dev/music">
|
|
<meta name="theme-color" content="#f5c2e7">
|
|
|
|
<!-- Open Graph -->
|
|
<meta property="og:image" content="https://clove.is-a.dev/assets/favicon/favicon.png">
|
|
<meta property="og:site_name" content="clove.is-a.dev">
|
|
<meta property="og:title" content="Music · Clove Twilight">
|
|
<meta property="og:description" content="Live now-playing, synced lyrics, and recent plays.">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:url" content="https://clove.is-a.dev/music">
|
|
<meta property="og:locale" content="en_GB">
|
|
</head>
|
|
|
|
<body>
|
|
<header class="nav">
|
|
<nav class="nav-links">
|
|
<a class="nav-link" data-href="/">Link Center</a>
|
|
<a class="nav-link" data-href="/cool-people">Cool People</a>
|
|
<a class="nav-link" data-href="/dev-info">Dev Info</a>
|
|
<a class="nav-link" data-href="/discord">Discord</a>
|
|
<a class="nav-link" data-href="/discord-bots">Discord Bots</a>
|
|
<a class="nav-link selected" data-href="/music">Music</a>
|
|
<a class="nav-link" data-href="/88x31">88x31</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<main class="music-wrap" id="music">
|
|
<header class="music-head">
|
|
<h1>Music</h1>
|
|
<p>What I'm listening to, with lyrics that follow along.</p>
|
|
</header>
|
|
|
|
<!-- now playing -->
|
|
<a class="mnp" id="np-link">
|
|
<img class="mnp-art" id="np-art" alt="" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">
|
|
<div class="mnp-meta">
|
|
<span class="mnp-state" id="np-state">Connecting…</span>
|
|
<span class="mnp-title" id="np-title">—</span>
|
|
<span class="mnp-artist" id="np-artist"></span>
|
|
<span class="mnp-album" id="np-album"></span>
|
|
<div class="mnp-progress" id="np-progress" hidden>
|
|
<span class="mnp-time" id="np-cur">0:00</span>
|
|
<span class="mnp-bar"><span class="mnp-fill" id="np-fill"></span></span>
|
|
<span class="mnp-time" id="np-dur">0:00</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- lyrics -->
|
|
<div class="sec-row" id="lyrics-section">
|
|
<h2 class="sec-title">Lyrics</h2>
|
|
<button class="ly-lock is-locked" id="ly-lock" type="button" aria-pressed="true" hidden><span class="ly-bars" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="ly-lock-label">Synced</span></button>
|
|
</div>
|
|
<div class="lyrics is-empty" id="lyrics"><p class="ly-note">Waiting for a track…</p></div>
|
|
|
|
<!-- recently played -->
|
|
<h2 class="sec-title" id="recently-played">Recently played</h2>
|
|
<ul class="recent" id="recent"></ul>
|
|
|
|
<!-- top artists (hidden until Last.fm data arrives) -->
|
|
<div id="top" hidden></div>
|
|
|
|
</main>
|
|
|
|
<script src="/js/cat.js" data-cat="/assets/oneko/classics/classic.png"></script>
|
|
<script src="/js/nav.js"></script>
|
|
<script src="/js/music.js"></script>
|
|
<script src="/js/flavors.js"></script>
|
|
<script src="/js/site-switcher.js"></script>
|
|
</body>
|
|
|
|
</html> |