diff --git a/server.py b/server.py
index 2c3f332..9928dbd 100644
--- a/server.py
+++ b/server.py
@@ -1,13 +1,12 @@
import threading
-from .generate import generate
+
+# from generate import generate
from fastapi import FastAPI
from fastapi.responses import FileResponse
from fastapi.staticfiles import StaticFiles
app = FastAPI()
-current_index = 0
-
-app.mount("/", StaticFiles(directory="web", html=True), name="web")
+current_index = -1
def advance():
@@ -23,8 +22,19 @@ def advance():
else:
current_index = current_index + 1
+ print(f"advancing, current index {current_index}")
+
t = threading.Timer(60, advance)
t.start()
advance()
+
+
+@app.get("/current.mp3")
+def get_current_audio():
+ print("hello")
+ return FileResponse(f"{current_index}.mp3")
+
+
+app.mount("/", StaticFiles(directory="web", html=True), name="web")
diff --git a/web/index.html b/web/index.html
index 42b9237..d98131b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -2,10 +2,15 @@
infinifi
+
-
- test
+
+
+ infinite lo-fi music in the background
+
+
+
diff --git a/web/script.js b/web/script.js
index e69de29..f8f4a7a 100644
--- a/web/script.js
+++ b/web/script.js
@@ -0,0 +1,34 @@
+const playBtn = document.getElementById("play-btn");
+
+let isPlaying = false;
+let currentAudio;
+let volume = 1;
+
+function playAudio() {
+ currentAudio = new Audio("/current.mp3");
+ currentAudio.onplay = () => {
+ isPlaying = true;
+ playBtn.innerText = "pause";
+ };
+ currentAudio.onpause = () => {
+ isPlaying = false;
+ playBtn.innerText = "play";
+ };
+
+ currentAudio.volume = volume;
+
+ currentAudio.load();
+ currentAudio.play();
+}
+
+function pauseAudio() {
+ currentAudio.pause();
+}
+
+playBtn.onclick = () => {
+ if (isPlaying) {
+ pauseAudio();
+ } else {
+ playAudio();
+ }
+};
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 0000000..070bcd6
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,95 @@
+:root {
+ font-family: monospace;
+ --background-color: #f0f0f0;
+}
+
+html,
+body {
+ width: 100%;
+}
+
+body {
+ height: 100vh;
+ margin: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #f0f0f0;
+ opacity: 1;
+ background-image: radial-gradient(#000000 0.5px, #f0f0f0 0.5px);
+ background-size: 10px 10px;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ margin: 0;
+ opacity: 80%;
+ font-weight: 400;
+}
+
+.header {
+ font-weight: 800;
+ margin-bottom: 1rem;
+}
+
+.container {
+ width: 50%;
+ display: flex;
+ flex-direction: column;
+ align-items: start;
+}
+
+.button-container {
+ margin-top: 2rem;
+ display: flex;
+}
+
+.button {
+ border: 2px solid black;
+ position: relative;
+ font-family: monospace;
+ font-weight: 800;
+ padding: 0.5rem 1rem;
+}
+
+.button:hover {
+ background-color: #f0f0f0;
+ background-size: 10px 10px;
+ background-image: repeating-linear-gradient(
+ 45deg,
+ #c9c9c9 0,
+ #c9c9c9 1px,
+ #f0f0f0 0,
+ #f0f0f0 50%
+ );
+}
+
+.button:active {
+ background: black !important;
+ color: white;
+ transform: translate(2px, 2px);
+}
+
+.button:active::after {
+ content: none;
+}
+
+.button:after {
+ display: block;
+ position: absolute;
+ margin: -2px;
+ width: inherit;
+ top: 1px;
+ left: 1px;
+ right: -1px;
+ bottom: -1px;
+ padding: 0.5rem 1rem;
+ content: "";
+ background-color: black;
+ z-index: -1;
+ transform: translate(2px, 2px);
+}