kennethnym/infinifi
1
0
Fork 0
Code Issues 2 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

Fix: CSS + Imports #2

Closed
Yagasaki7K wants to merge 1 commits from main into main
pull from: main
merge into: kennethnym:main
Conversation 1 Commits 1 Files Changed 3 +13 -14
3 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
web/index.html
View File

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<title>infinifi</title> <title>infinifi</title>
<link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -24,18 +24,17 @@
<input id="volume-slider" type="range" min="0" max="100" step="1" /> <input id="volume-slider" type="range" min="0" max="100" step="1" />
</div> </div>
</main> </main>
<img class="cat" src="/images/cat-0.png"></img> <img class="cat" src="./images/cat-0.png"></img>
<img class="eeping-cat" src="/images/eeping-cat.png"></img> <img class="eeping-cat" src="./images/eeping-cat.png"></img>
</div> </div>
<footer> <footer>
<span>made by kennethnym &lt;3 ·&nbsp;</span> <span>made by kennethnym &lt;3 · <a href="https://github.com/kennethnym/infinifi">github</a></span>
<a href="https://github.com/kennethnym/infinifi">github</a>
</footer> </footer>
<canvas id="bg"></canvas> <canvas id="bg"></canvas>
<script type="text/javascript" src="/bg.js"></script> <script type="text/javascript" src="./bg.js"></script>
<script type="text/javascript" src="/script.js"></script> <script type="text/javascript" src="./script.js"></script>
</body> </body>
</html> </html>

8
web/script.js
View File

@@ -2,8 +2,8 @@ const playBtn = document.getElementById("play-btn");
const catImg = document.getElementsByClassName("cat")[0]; const catImg = document.getElementsByClassName("cat")[0];
const volumeSlider = document.getElementById("volume-slider"); const volumeSlider = document.getElementById("volume-slider");
const currentVolumeLabel = document.getElementById("current-volume-label"); const currentVolumeLabel = document.getElementById("current-volume-label");
const clickAudio = new Audio("/audio/click.wav"); const clickAudio = new Audio("./audio/click.wav");
const clickReleaseAudio = new Audio("/audio/click-release.wav"); const clickReleaseAudio = new Audio("./audio/click-release.wav");
const CROSSFADE_DURATION_MS = 5000; const CROSSFADE_DURATION_MS = 5000;
const CROSSFADE_INTERVAL_MS = 20; const CROSSFADE_INTERVAL_MS = 20;
@@ -17,7 +17,7 @@ let currentVolume = 0;
function playAudio() { function playAudio() {
// add a random query parameter at the end to prevent browser caching // 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 = () => { currentAudio.onplay = () => {
isPlaying = true; isPlaying = true;
playBtn.innerText = "pause"; playBtn.innerText = "pause";
@@ -93,7 +93,7 @@ function animateCat() {
} else { } else {
current += 1; current += 1;
} }
catImg.src = `/images/cat-${current}.png`; catImg.src = `./images/cat-${current}.png`;
}, 500); }, 500);
} }

6
web/style.css
View File

@@ -170,21 +170,21 @@ a {
input[type="range"] { input[type="range"] {
overflow: hidden; overflow: hidden;
height: var(--range-height); height: var(--range-height);
-webkit-appearance: none; appearance: none;
border: 2px solid var(--text); border: 2px solid var(--text);
background-color: var(--base); background-color: var(--base);
} }
input[type="range"]::-webkit-slider-runnable-track { input[type="range"]::-webkit-slider-runnable-track {
height: var(--range-height); height: var(--range-height);
-webkit-appearance: none; appearance: none;
color: #13bba4; color: #13bba4;
} }
input[type="range"]::-webkit-slider-thumb { input[type="range"]::-webkit-slider-thumb {
width: var(--range-height); width: var(--range-height);
height: var(--range-height); height: var(--range-height);
-webkit-appearance: none; appearance: none;
background: var(--text); background: var(--text);
box-shadow: -80px 0 0 80px var(--range-accent); box-shadow: -80px 0 0 80px var(--range-accent);
} }