add icon and stuff

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "heardle",
+    "name": "musedel",
     "type": "module",
     "version": "0.0.1",
     "scripts": {

public/favicon.svg

@@ -1,9 +1,76 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
-    <style>
+
-        path { fill: #000; }
+<svg
-        @media (prefers-color-scheme: dark) {
+   width="256"
-            path { fill: #FFF; }
+   height="256"
-        }
+   viewBox="0 0 67.733332 67.733333"
-    </style>
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="favicon.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#000000"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.693779"
+     inkscape:cx="161.17805"
+     inkscape:cy="118.37436"
+     inkscape:window-width="2544"
+     inkscape:window-height="1331"
+     inkscape:window-x="35"
+     inkscape:window-y="32"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient4"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#cc56d0;stop-opacity:1;"
+         offset="0"
+         id="stop4" />
+      <stop
+         style="stop-color:#6e06ff;stop-opacity:1;"
+         offset="1"
+         id="stop5" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4"
+       id="linearGradient5"
+       x1="18.62522"
+       y1="30.241716"
+       x2="42.590687"
+       y2="30.241716"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(1.7399691,0,0,1.7399691,-19.390224,-18.752995)" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <circle
+       style="fill:#ffffff;stroke:#000000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round"
+       id="path1"
+       cx="33.866665"
+       cy="33.866665"
+       r="33.866665" />
+    <path
+       style="font-variation-settings:'wght' 800;fill:#000000;fill-opacity:0.999603;stroke:url(#linearGradient5);stroke-width:1.26618;stroke-dasharray:none"
+       d="m 51.766119,15.709776 c -0.34468,-0.01677 -0.699084,0.03482 -1.043917,0.163646 L 36.967845,21.012087 23.70982,15.90849 c -0.651354,-0.250727 -1.334031,-0.222498 -1.920594,0.02788 -1.272851,0.318204 -2.246985,2.286788 -2.246985,4.682793 v 20.873859 a 5.8726179,5.2829476 0 0 0 -0.652784,-0.03236 5.8726179,5.2829476 0 0 0 -5.872374,5.28253 5.8726179,5.2829476 0 0 0 5.872374,5.283428 5.8726179,5.2829476 0 0 0 4.442719,-1.842366 c 0.139439,-0.127644 0.271184,-0.276846 0.394729,-0.445981 a 5.8726179,5.2829476 0 0 0 1.034924,-2.995081 5.8726179,5.2829476 0 0 0 -0.01175,-0.330887 c 0.0077,-0.147882 0.01175,-0.29796 0.01175,-0.44958 V 21.885164 l 11.023629,4.24311 c 0.29583,0.149895 0.620334,0.240973 0.954902,0.269745 0.453631,0.04537 0.901892,-0.03322 1.301973,-0.215797 l 11.454323,-4.278174 v 15.177717 a 5.8726179,5.2829476 0 0 0 -0.652786,-0.03237 5.8726179,5.2829476 0 0 0 -5.872375,5.282529 5.8726179,5.2829476 0 0 0 5.872375,5.283427 5.8726179,5.2829476 0 0 0 5.872374,-5.283427 5.8726179,5.2829476 0 0 0 -0.0082,-0.28683 c 0.0058,-0.110974 0.0082,-0.222925 0.0082,-0.336286 v -21.87821 c 0,-2.261125 -1.16343,-4.08126 -2.609344,-4.08126 -0.112112,-0.0205 -0.225887,-0.03397 -0.340781,-0.03957 z"
+       id="rect1" />
+  </g>
 </svg>

src/assets/icon.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 67.733332 67.733333"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="note.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#999999"
+     borderopacity="1"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="1.693779"
+     inkscape:cx="161.17805"
+     inkscape:cy="118.37436"
+     inkscape:window-width="1066"
+     inkscape:window-height="995"
+     inkscape:window-x="35"
+     inkscape:window-y="32"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1">
+    <linearGradient
+       id="linearGradient4"
+       inkscape:collect="always">
+      <stop
+         style="stop-color:#cc56d0;stop-opacity:1;"
+         offset="0"
+         id="stop4" />
+      <stop
+         style="stop-color:#6e06ff;stop-opacity:1;"
+         offset="1"
+         id="stop5" />
+    </linearGradient>
+    <linearGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient4"
+       id="linearGradient5"
+       x1="18.62522"
+       y1="30.241716"
+       x2="42.590687"
+       y2="30.241716"
+       gradientUnits="userSpaceOnUse"
+       gradientTransform="matrix(2.3887526,0,0,2.3887526,-39.248161,-38.373326)" />
+  </defs>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       style="font-variation-settings:'wght' 800;fill:#000000;fill-opacity:0.999603;stroke:url(#linearGradient5);stroke-width:1.73806;stroke-dasharray:none"
+       d="M 58.440302,8.9396043 C 57.9671,8.9165719 57.480551,8.9874152 57.007139,9.1642689 L 38.124184,16.218991 19.922629,9.2124118 c -0.894227,-0.3442168 -1.831452,-0.3054594 -2.636727,0.038268 -1.74746,0.4368527 -3.08482,3.1394632 -3.08482,6.4288692 v 28.657109 a 8.0623453,7.2528042 0 0 0 -0.896188,-0.04443 8.0623453,7.2528042 0 0 0 -8.0620117,7.252231 8.0623453,7.2528042 0 0 0 8.0620117,7.253464 8.0623453,7.2528042 0 0 0 6.099278,-2.529331 c 0.191434,-0.175238 0.372301,-0.380075 0.541913,-0.612273 a 8.0623453,7.2528042 0 0 0 1.420817,-4.11186 8.0623453,7.2528042 0 0 0 -0.01605,-0.454266 c 0.01048,-0.203021 0.01605,-0.40906 0.01605,-0.617213 V 17.417614 l 15.134017,5.825239 c 0.406135,0.205788 0.851638,0.330826 1.310957,0.370326 0.622776,0.06228 1.238181,-0.04562 1.787441,-0.29626 l 15.725304,-5.873382 v 20.837046 a 8.0623453,7.2528042 0 0 0 -0.89619,-0.04443 8.0623453,7.2528042 0 0 0 -8.062012,7.252229 8.0623453,7.2528042 0 0 0 8.062012,7.253464 8.0623453,7.2528042 0 0 0 8.062011,-7.253464 8.0623453,7.2528042 0 0 0 -0.01123,-0.393781 c 0.0079,-0.152355 0.01123,-0.306047 0.01123,-0.461675 V 14.596961 c 0,-3.104232 -1.597239,-5.6030412 -3.582293,-5.6030412 -0.153908,-0.028151 -0.310113,-0.046638 -0.467847,-0.054316 z"
+       id="rect1" />
+  </g>
+</svg>

src/layouts/Layout.astro

@@ -1,3 +1,7 @@
+---
+import "../styles/layout.css"
+---
+
 <!doctype html>
 <html lang="en">
     <head>
@@ -5,18 +9,9 @@
         <meta name="viewport" content="width=device-width" />
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <meta name="generator" content={Astro.generator} />
-		<title>Astro Basics</title>
+        <title>Musedel</title>
     </head>
     <body>
         <slot />
     </body>
 </html>
-
-<style>
-	html,
-	body {
-		margin: 0;
-		width: 100%;
-		height: 100%;
-	}
-</style>

src/pages/index.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "../layouts/Layout.astro"
+import "../styles/index.css"
 ---
 
 <Layout>
@@ -7,29 +8,53 @@ import Layout from "../layouts/Layout.astro"
         id="music"
         src="https://www.youtube-nocookie.com/embed/NyaOYfpq9Fc?enablejsapi=1"
     ></iframe>
-    <button id="play">Play</button>
+    <button id="play">
-    <button id="skip">Skip</button>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
+            ><path
+                d="M320-273v-414q0-17 12-28.5t28-11.5q5 0 10.5 1.5T381-721l326 207q9 6 13.5 15t4.5 19q0 10-4.5 19T707-446L381-239q-5 3-10.5 4.5T360-233q-16 0-28-11.5T320-273Z"
+            ></path></svg
+        >
+    </button>
     <span id="timeout">1</span>
-</Layout>
+    <button id="skip">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
+            ><path
+                d="M660-280v-400q0-17 11.5-28.5T700-720q17 0 28.5 11.5T740-680v400q0 17-11.5 28.5T700-240q-17 0-28.5-11.5T660-280Zm-440-35v-330q0-18 12-29t28-11q5 0 11 1t11 5l248 166q9 6 13.5 14.5T548-480q0 10-4.5 18.5T530-447L282-281q-5 4-11 5t-11 1q-16 0-28-11t-12-29Z"
+            ></path></svg
+        >
+    </button>
 
-<style>
+    <script>
-    :root {
+        class ExtendableTimeout {
-        background-color: black;
+            private timerId: ReturnType<typeof setTimeout>
-        color: white;
+            private timeStart: number
-    }
+            private fn: () => void
-    #music {
-        position: absolute;
-        width: 0;
-        height: 0;
-        border: none;
-    }
-</style>
 
-<script>
+            constructor(fn: () => void, time: number) {
-    const iframe = document.getElementById("music")
+                this.fn = fn
-    const play = document.getElementById("play")
+                this.timeStart = Date.now()
-    const skip = document.getElementById("skip")
+                this.timerId = setTimeout(fn, time)
+            }
+
+            extend(time: number): void {
+                clearTimeout(this.timerId)
+
+                const elapsed = Date.now() - this.timeStart
+                const newTime = Math.max(0, time - elapsed)
+
+                this.timerId = setTimeout(this.fn, newTime)
+            }
+
+            cancel(): void {
+                clearTimeout(this.timerId)
+            }
+        }
+
+        const iframe = document.querySelector("#music")
+        const play = document.querySelector("#play")
+        const skip = document.querySelector("#skip")
         var timeout = 1000
+        var timer: ExtendableTimeout | null
 
         const message = (command: String) =>
             (iframe as HTMLIFrameElement)?.contentWindow?.postMessage(
@@ -41,19 +66,27 @@ import Layout from "../layouts/Layout.astro"
             )
 
         const playVideo = () => {
+            // fix times
+            timer?.cancel()
             message("playVideo")
-        setTimeout(() => {
+            if (timer == null) {
+                timer = new ExtendableTimeout(() => {
                     message("stopVideo")
+                    timer = null
                 }, timeout)
+            } else {
+            }
         }
 
         play?.addEventListener("click", playVideo)
 
         skip?.addEventListener("click", () => {
+            if (timeout >= 16000) return alert("FAIL!!!!")
             timeout *= 2
             document.querySelector("#timeout")!.textContent = (
                 timeout / 1000
             ).toString()
             playVideo()
         })
-</script>
+    </script>
+</Layout>

src/styles/index.css

@@ -0,0 +1,6 @@
+#music {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border: none;
+}

src/styles/layout.css

@@ -0,0 +1,59 @@
+html,
+body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+}
+
+html {
+    background: linear-gradient(black, rgb(18, 2, 38));
+}
+
+body {
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+button {
+    --border-radius: 2rem;
+    position: relative;
+    background: white;
+    border: none;
+    border-radius: var(--border-radius);
+
+    padding: 0.2rem 1rem;
+    margin: 1rem;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    cursor: pointer;
+    &:hover {
+        background: rgb(211, 211, 211);
+    }
+
+    & svg {
+        width: 2.2rem;
+    }
+}
+
+button::before {
+    --border-size: 5px;
+    content: "";
+    border-radius: var(--border-radius);
+    width: 100%;
+    height: 100%;
+    background-image: linear-gradient(
+        to bottom right,
+        #cc56d0 0%,
+        #6e06ff 100%
+    );
+    padding: var(--border-size);
+    top: calc(var(--border-size) * -1);
+    left: calc(var(--border-size) * -1);
+    position: absolute;
+    z-index: -1;
+}