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

Merge branch 'main' of https://github.com/kennethnym/infinifi into kennethnym-main

Browse Source
This commit is contained in:
Hegyi Áron Ferenc
2024-07-23 20:02:29 +02:00
parent 63e67dd2a2 63a8056283
commit f63470582e
15 changed files with 52 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
web/index.html
View File

@@ -2,11 +2,9 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>infinifi</title>
<link rel="stylesheet" href="./style.css">
<link rel="preload" href="./style.css" as="style">
<link rel="modulepreload" href="./bg.js">
<link rel="modulepreload" href="./script.js">
<link rel="preload" href="./images/cat-0.png" as="image">
@@ -14,6 +12,14 @@
<link rel="prefetch" href="./images/cat-1.png" as="image">
<link rel="prefetch" href="./images/cat-2.png" as="image">
<link rel="prefetch" href="./images/cat-3.png" as="image">
<link rel="stylesheet" href="/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="twitter:card" content="summary"></meta>
<meta name="twitter:site" content="@kennethnym"></meta>
<meta name="twitter:title" content="infinifi"></meta>
<meta name="twitter:description" content="infinite lo-fi beats in the background"></meta>
</head>
<body>
<div class="container">

25
web/script.js
View File

@@ -97,6 +97,30 @@ function animateCat() {
}, 500);
}
/**
* Allow audio to be played/paused using the space bar
*/
function enableSpaceBarControl() {
document.addEventListener("keydown", (event) => {
if (event.code === "Space") {
playBtn.classList.add("button-active");
playBtn.dispatchEvent(new MouseEvent("mousedown"));
clickAudio.play();
}
});
document.addEventListener("keyup", (event) => {
if (event.code === "Space") {
playBtn.classList.remove("button-active");
clickReleaseAudio.play();
}
});
document.addEventListener("keypress", (event) => {
if (event.code === "Space") {
playBtn.click();
}
});
}
playBtn.onmousedown = () => {
clickAudio.play();
document.addEventListener(
@@ -127,3 +151,4 @@ volumeSlider.oninput = () => {
volumeSlider.value = 100;
animateCat();
enableSpaceBarControl();

14
web/style.css
View File

@@ -36,6 +36,13 @@ body {
background-color: var(--base);
overflow: hidden;
}
@media (min-width: 768px) {
body {
width: calc(100% - 8rem - 2px);
height: calc(100vh - 10rem - 2px);
padding: 4rem;
}
}
h1,
h2,
@@ -66,6 +73,11 @@ footer {
align-items: center;
justify-content: center;
}
@media (min-width: 768px) {
footer {
padding: 2rem 0;
}
}
footer > span {
color: var(--text);
@@ -245,12 +257,14 @@ input[type="range"]::-ms-fill-upper {
}
}
.button.button-active,
.button:active {
background: var(--text) !important;
color: var(--base);
transform: translate(4px, 4px);
}
.button.button-active::after,
.button:active::after {
content: none;
}