From 2c0ede92f4bc7a6a51b1b5c2df933cdd01f74ae9 Mon Sep 17 00:00:00 2001 From: Anderson Marlon Date: Tue, 23 Jul 2024 16:56:54 -0300 Subject: [PATCH] Fix: CSS + Imports --- web/index.html | 13 ++++++------- web/script.js | 8 ++++---- web/style.css | 6 +++--- 3 files changed, 13 insertions(+), 14 deletions(-) diff --git a/web/index.html b/web/index.html index 2593744..1ef1b60 100644 --- a/web/index.html +++ b/web/index.html @@ -2,7 +2,7 @@ infinifi - + @@ -24,18 +24,17 @@ - - + + - - + + diff --git a/web/script.js b/web/script.js index c19e933..99233b5 100644 --- a/web/script.js +++ b/web/script.js @@ -2,8 +2,8 @@ const playBtn = document.getElementById("play-btn"); const catImg = document.getElementsByClassName("cat")[0]; const volumeSlider = document.getElementById("volume-slider"); const currentVolumeLabel = document.getElementById("current-volume-label"); -const clickAudio = new Audio("/audio/click.wav"); -const clickReleaseAudio = new Audio("/audio/click-release.wav"); +const clickAudio = new Audio("./audio/click.wav"); +const clickReleaseAudio = new Audio("./audio/click-release.wav"); const CROSSFADE_DURATION_MS = 5000; const CROSSFADE_INTERVAL_MS = 20; @@ -17,7 +17,7 @@ let currentVolume = 0; function playAudio() { // add a random query parameter at the end to prevent browser caching - currentAudio = new Audio(`/current.mp3?t=${Date.now()}`); + currentAudio = new Audio(`./current.mp3?t=${Date.now()}`); currentAudio.onplay = () => { isPlaying = true; playBtn.innerText = "pause"; @@ -93,7 +93,7 @@ function animateCat() { } else { current += 1; } - catImg.src = `/images/cat-${current}.png`; + catImg.src = `./images/cat-${current}.png`; }, 500); } diff --git a/web/style.css b/web/style.css index 4b852a4..7a3b2c2 100644 --- a/web/style.css +++ b/web/style.css @@ -170,21 +170,21 @@ a { input[type="range"] { overflow: hidden; height: var(--range-height); - -webkit-appearance: none; + appearance: none; border: 2px solid var(--text); background-color: var(--base); } input[type="range"]::-webkit-slider-runnable-track { height: var(--range-height); - -webkit-appearance: none; + appearance: none; color: #13bba4; } input[type="range"]::-webkit-slider-thumb { width: var(--range-height); height: var(--range-height); - -webkit-appearance: none; + appearance: none; background: var(--text); box-shadow: -80px 0 0 80px var(--range-accent); }