click to copy

src/routes/+page.svelte

@@ -21,6 +21,14 @@
 
     let audio: HTMLAudioElement;
     let showNotification = $state(false);
+    let showCopyNotification = $state(false);
+
+    function copyCurlCommand() {
+        navigator.clipboard.writeText("curl https://satr14.my.id").then(() => {
+            showCopyNotification = true;
+            setTimeout(() => showCopyNotification = false, 3000);
+        }).catch(() => {});
+    }
 
     function playAudio() {
         if (audio.paused) {
@@ -61,6 +69,14 @@
     </div>
 {/if}
 
+{#if showCopyNotification}
+    <div class="z-50 fixed top-6 right-6 left-6 flex justify-center items-center">
+        <div class="flex items-center gap-3 bg-ctp-surface0 text-ctp-text px-4 py-3 rounded-xl shadow-lg border border-ctp-sky" transition:fly={{ y: 20, duration: 300, easing: cubicOut }}>
+            <p class="m-0 font-medium">Copied to clipboard</p>
+        </div>
+    </div>
+{/if}
+
 <div class="fixed top-0 left-0 w-full h-full animate-[rainbow_20s_linear_infinite,breathing_8s_ease-in-out_infinite]" style="background: linear-gradient(-6deg, hsl(var(--rainbow-hue-bottom), 70%, 60%), transparent, hsl(var(--rainbow-hue-top), 70%, 60%));" transition:fade={{
     duration: 1500, easing: cubicOut
 }}></div>
@@ -117,7 +133,7 @@
                     {/each}
                 </div>
                 <a href="/#abt" id="abt" class="text-center no-underline text-xl font-extrabold" onclick={playAudio}>&uarr;</a>
-                <p class="text-center m-0 font-mono italic hidden md:block">curl https://satr14.my.id</p>
+                <p onclick={copyCurlCommand} class="text-center m-0 font-mono italic hidden md:block cursor-pointer hover:text-ctp-sky">curl https://satr14.my.id</p>
             </nav>
         </header>