Un prototype mobile-first pour suivre les blocs d'un live techno à 130 BPM. Le radar central montre les cercles micro (16 mesures), macro (64) et morceau complet (192) avec des segments internes, le grid de 11 slots permet de suivre qui joue quoi, et les boutons de contrôle gèrent le chrono, le reset et le passage au morceau suivant.
"Create a single-page web app (HTML/Tailwind/JS) for a Techno Live Set visualizer. The app must run at 130 BPM.Use a central Canvas to draw three concentric progress circles based on measures: 16 bars (small), 64 bars (medium), 192 bars (large).1 bar @ 130BPM = 1.846 seconds.Include a grid of 11 toggleable buttons (8 drums + 3 synths) that change color when tapped.Add a large Start/Reset button at the bottom.Use the Screen Wake Lock API to prevent the phone from sleeping.Dark mode UI with neon cyan accents. No scrolling allowed, fit everything on one screen."
Ouvrir index.html dans un navigateur mobile / bureau. Le chrono, les cercles et les contrôles sont pilotés par JavaScript, les actions se trouvent en bas de l'écran.
Le menu “Ring settings” propose plusieurs thèmes : Default (Rastafari), Acid, Cherry Blossom, Red Shift, Ableton Live, VSCode, Swiss Clock, Patriot, Halloween, Industrial, Flow, Heineken et 8.6. Les thèmes ajustent les couleurs et le fond tout en conservant une lisibilité élevée.
Le projet inclut un manifeste (manifest.webmanifest), un service worker (sw.js) et des icônes pour l’installation en PWA. Servez le dossier via HTTPS, puis utilisez “Add to Home screen” sur mobile.