From 736d4fa2c5ae5381dcf7abb4ee8ebea84265f103 Mon Sep 17 00:00:00 2001
From: Bulat Kurbanov <kurbanovbul@gmail.com>
Date: Sun, 25 May 2025 20:15:34 +0200
Subject: [PATCH] Make relative

---
 gowatch.yml |   3 ++
 index.html  | 140 +++++++++++++++++++++++++++++-----------------------
 2 files changed, 80 insertions(+), 63 deletions(-)
 create mode 100644 gowatch.yml
diff --git a/gowatch.yml b/gowatch.yml
new file mode 100644
index 0000000..6e56173
--- /dev/null
+++ b/gowatch.yml
@@ -0,0 +1,3 @@
+watch_exts:
+  - .html
+  - .go
diff --git a/index.html b/index.html
index 37690cb..7d1e302 100644
--- a/index.html
+++ b/index.html
@@ -1,75 +1,89 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-  <head>
-    <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>Spotify</title>
-    <style>
-      body {
-        display: flex;
-      }
+    <head>
+        <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>Spotify</title>
+        <style>
+            body {
+                display: flex;
 
-      .spotify {
-        display: flex;
-        align-items: center;
-        column-gap: 16px;
+                margin: 0;
+                padding: 0;
 
-        /* Font */
-        font-family: Inter;
-        font-size: 24px;
-        color: #fff;
-      }
+                width: 100%;
+                height: 100vh;
+            }
 
-      .image {
-        width: 52px;
-        height: 52px;
-        border-radius: 8px;
-        background-color: #e9e9e9;
-        overflow: hidden;
-      }
+            .spotify {
+                display: flex;
+                align-items: center;
+                column-gap: 16px;
 
-      #cover {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
+                padding: 0.5rem;
 
-      #artist {
-        opacity: 0.6;
-        font-size: 16px;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="spotify">
-      <div class="image">
-        <img id="cover" src="{{ .Track.ArtworkURL }}" />
-      </div>
-      <div class="info">
-        <span id="name">{{ .Track.Name }}</span>
-        <div id="artist">{{ .Track.Artist }}</div>
-      </div>
-    </div>
-  </body>
-  <script>
-    const fetchCurrentTrack = () =>
-      fetch("http://localhost:{{ .Port }}/track").then((resp) => resp.json());
+                /* Font */
+                font-family: Montserrat;
+                font-size: clamp(24px, 21vh, 140px);
 
-    const artistEl = document.querySelector("#artist");
-    const coverEl = document.querySelector("#cover");
-    const nameEl = document.querySelector("#name");
+                color: #fff;
 
-    const render = async () => {
-      const currentTrack = await fetchCurrentTrack();
+                background-color: black;
+                width: 100%;
+            }
 
-      if (!currentTrack || !currentTrack.name) return;
+            .image {
+                aspect-ratio: 1;
+                height: 100%;
+                border-radius: 8px;
+                background-color: #e9e9e9;
+                overflow: hidden;
 
-      coverEl.src = currentTrack.artworkUrl;
-      nameEl.innerHTML = currentTrack.name;
-      artistEl.innerHTML = currentTrack.artist;
-    };
+                max-height: 640px;
+            }
 
-    setInterval(render, {{ .Refresh }});
-  </script>
+            #cover {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+
+            #artist {
+                opacity: 0.6;
+                font-size: clamp(16px, 12vh, 70px);
+            }
+        </style>
+    </head>
+    <body>
+        <div class="spotify">
+            <div class="image">
+                <img id="cover" src="{{ .Track.ArtworkURL }}" />
+            </div>
+            <div class="info">
+                <span id="name">{{ .Track.Name }}</span>
+                <div id="artist">{{ .Track.Artist }}</div>
+            </div>
+        </div>
+    </body>
+    <script>
+        const fetchCurrentTrack = () =>
+          fetch("http://localhost:{{ .Port }}/track").then((resp) => resp.json());
+
+        const artistEl = document.querySelector("#artist");
+        const coverEl = document.querySelector("#cover");
+        const nameEl = document.querySelector("#name");
+
+        const render = async () => {
+          const currentTrack = await fetchCurrentTrack();
+
+          if (!currentTrack || !currentTrack.name) return;
+
+          coverEl.src = currentTrack.artworkUrl;
+          nameEl.innerHTML = currentTrack.name;
+          artistEl.innerHTML = currentTrack.artist;
+        };
+
+        setInterval(render, {{ .Refresh }});
+    </script>
 </html>
