aboutsummaryrefslogtreecommitdiffstats
path: root/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'index.html')
-rw-r--r--index.html153
1 files changed, 153 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..2bffb84
--- /dev/null
+++ b/index.html
@@ -0,0 +1,153 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8" />
+ <title>scrobble.observer</title>
+
+ <link href="/style.css" rel="stylesheet" />
+
+ <style>
+#wizard {
+ display: flex;
+ flex-direction: row;
+}
+#wizard * {
+ box-sizing: border-box;
+}
+#wizard > div {
+ margin: 2px;
+}
+#wizard-container > *,
+#wizard-outputs > * {
+ width: 100%;
+}
+#wizard-container {
+ flex-grow: 1;
+}
+ </style>
+
+ <!-- Open Graph Begin -->
+ <meta property="og:type" value="website">
+ <meta property="og:title" value="scrobble.observer">
+ <meta property="og:image" value="https://scrobble.observer/favicon.ico">
+ <meta property="og:url" value="https://scrobble.observer">
+ <meta property="og:description"
+ value="A little embed for your personal site, with whatever you're scrobbling.">
+ <meta property="og:site_name" value="scrobble.observer">
+ <!-- Open Graph End -->
+</head>
+
+<body>
+ <hgroup>
+ <h1>Scrobble.Observer</h1>
+ <p>A little embed for your personal site, with whatever you're scrobbling.</p>
+ </hgroup>
+ <main>
+ <section id=blurb>
+ <img src='/logo.png' id=logo style='margin-left: calc(50% - 64px); box-shadow: white 0px 0px 16px; border-radius: 14px;'>
+ <p><a href='https://last.fm'>Last.fm</a> is a cool service! It keeps a live, usually public, log, of whatever music you're listening to!
+ I felt like that fit into the general set of status buttons and other widgets present in the
+ Web Revival movement, and yet last.fm was basically stuck on <code>https://www.last.fm</code>. I decided to write an embed myself.
+ If you'd like to know about the technical details, the code and lengthy documentation are available on my git server (link at the bottom).</p>
+ <p>This project is not affiliated with or endorsed by last.fm at all, I'm just doing it for fun :&gt;</p>
+ </section>
+ <section id=intro>
+ <h2>Introduction</h2><br>
+ <iframe style='background-color: black; width: 60%; height: 3.2cm; margin-left: 20%' src='/user/LAST.HQ?dark'></iframe>
+ <p>This is the embed. Currently, it's displaying the listening history of the last.fm staff. It will update once-a-minute,
+ every minute, with whatever they're listening to. This rate limit is to avoid pinging the last.fm API too much, and because
+ few songs are shorter than 1 minute. This embed also uses no Javascript, instead relying on other mechanisms to refresh.</p>
+ </section>
+ <section id=generator>
+ <h2>Generate your embed!</h2><br>
+ <div id=wizard>
+ <div id=wizard-outputs style='width: 60%;'>
+ <iframe id=wizard-iframe style='height: 3.2cm; width: 100%; box-sizing: border-box;' src='/user/LAST.HQ?dark'></iframe>
+ <textarea id=wizard-code readonly style='width: 100%;' rows=4>&lt;iframe style='height: 3.2cm;' src='/user/LAST.HQ?theme=plain&dark'&gt;&lt;/iframe&gt;</textarea>
+ </div>
+ <div id=wizard-container style='width: 40%'>
+ <input type=text id=wizard-username placeholder='Your last.fm username, e.g. LAST.HQ' style='width: 100%;'>
+ <select id=wizard-theme><option selected disabled value='plain'>-- Choose a theme --</option></select><hr><p id=wizard-theme-notes></p><span>Options</span>
+ <select id=wizard-theme-params-bool multiple><option selected value='dark'>Dark Mode</option></select>
+ <div id=wizard-theme-params-text></div>
+ </div>
+ </div>
+ </section>
+ <section id=contact>
+ <h2>Contact</h2>
+ <p>This project is currently run by just one person, but if you need help or want to contribute, these are the places to go.</p>
+ <ul>
+ <li><a href='https://forum.melonland.net/index.php?topic=2280.0'>The Melonland Forum Topic</a></li>
+ <li><a href='https://git.aleteoryx.me/cgit/lfm_embed/'>The Git Repository</a></li>
+ <li>The Author's...</li>
+ <ul>
+ <li><a href='https://aleteoryx.me'>Website</a></li>
+ <li><a href='https://mk.aleteoryx.me/@admin'>Fedi</a></li>
+ <li><a href='mailto:webmaster@aleteoryx.me'>Email</a></li>
+ </ul>
+ </ul>
+ </section>
+ </main>
+ <footer>🄯 Aleteoryx 2024. Free forever. If you don't trust me, <a href='https://git.aleteoryx.me/cgit/lfm_embed/'>host it yourself</a>.</footer>
+<script>
+const THEMES = {
+ "plain": {
+ "name": "Plain (Default)",
+ "notes": "This theme works best with <code>width: 10cm;</code>, at minimum. You'll need to figure out what looks best and add it to the style attribute manually on your site.",
+ "style": 'height: 3.2cm;',
+ "bool": {"dark": "Dark Mode"}
+ }
+};
+console.log(THEMES);
+for (const theme in THEMES) {
+ const option = document.createElement('option');
+ option.value = theme;
+ option.innerText = THEMES[theme].name;
+ document.getElementById('wizard-theme').appendChild(option);
+}
+
+window.iframetimeout = null;
+
+function regen(throttle) {
+ const username = document.getElementById('wizard-username').value.replace(" ", "") || 'LAST.HQ';
+ const themename = document.getElementById('wizard-theme').value;
+ const themeparams = Array.from(document.getElementById('wizard-theme-params-bool').selectedOptions).map(x => x.value);
+
+ const url = 'https://scrobble.observer/user/'+username+'?theme='+themename+(themeparams.length ? '&' + themeparams.join('&') : '');
+
+ clearTimeout(window.iframetimeout);
+ if (throttle) {
+ window.iframetimeout = setTimeout(() => (document.getElementById('wizard-iframe').src = url), 500);
+ }
+ else {
+ document.getElementById('wizard-iframe').src = url;
+ }
+
+ document.getElementById('wizard-code').value = "<iframe style='"+THEMES[themename].style+"' src='"+url+"'></iframe>"
+}
+function themechange() {
+ const themename = document.getElementById('wizard-theme').value;
+ const themeparamelement = document.getElementById('wizard-theme-params-bool');
+ const themenoteselement = document.getElementById('wizard-theme-notes');
+
+ themenoteselement.innerHTML = THEMES[themename].notes;
+
+ themeparamelement.innerHTML = '';
+ for (const boolparam in THEMES[themename]['bool']) {
+ const option = document.createElement('option');
+ option.value = boolparam;
+ option.innerText = THEMES[themename]['bool'][boolparam];
+ themeparamelement.appendChild(option);
+ }
+
+ regen();
+}
+
+document.getElementById('wizard-username').oninput = () => regen(true);
+document.getElementById('wizard-theme').onchange = themechange;
+document.getElementById('wizard-theme-params-bool').onchange = regen;
+</script>
+</body>
+</html>
+