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

Small optimizations #1

Merged
Rettend merged 22 commits from kennethnym-main into main 2024-07-24 15:30:46 +01:00
Conversation 4 Commits 22 Files Changed 4 +68 -10
4 changed files with 68 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f63470582e - Show all commits

2
.gitignore vendored
View File

@@ -248,3 +248,5 @@ $RECYCLE.BIN/
*.lnk *.lnk
# End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux # End of https://www.toptal.com/developers/gitignore/api/python,windows,macos,linux
*.mp3

BIN
0.mp3
View File

Binary file not shown.

BIN
1.mp3
View File

Binary file not shown.

BIN
2.mp3
View File

Binary file not shown.

BIN
3.mp3
View File

Binary file not shown.

BIN
4.mp3
View File

Binary file not shown.

0
5.mp3
View File

BIN
6.mp3
View File

Binary file not shown.

BIN
7.mp3
View File

Binary file not shown.

BIN
8.mp3
View File

Binary file not shown.

BIN
9.mp3
View File

Binary file not shown.

2
start-server.sh Normal file
View File

@@ -0,0 +1,2 @@
#!/bin/sh
uvicorn server:app --host 0.0.0.0 --port 443 --ssl-keyfile private.key.pem --ssl-certfile domain.cert.pem > server.log 2> server.err < /dev/null

12
web/index.html
View File

@@ -2,11 +2,9 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>infinifi</title> <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="./bg.js">
<link rel="modulepreload" href="./script.js"> <link rel="modulepreload" href="./script.js">
<link rel="preload" href="./images/cat-0.png" as="image"> <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-1.png" as="image">
<link rel="prefetch" href="./images/cat-2.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="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> </head>
<body> <body>
<div class="container"> <div class="container">

25
web/script.js
View File

@@ -97,6 +97,30 @@ function animateCat() {
}, 500); }, 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 = () => { playBtn.onmousedown = () => {
clickAudio.play(); clickAudio.play();
document.addEventListener( document.addEventListener(
@@ -127,3 +151,4 @@ volumeSlider.oninput = () => {
volumeSlider.value = 100; volumeSlider.value = 100;
animateCat(); animateCat();
enableSpaceBarControl();

14
web/style.css
View File

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