🔔 Bell Sequencer 🔔

\n Audio State: {audioState}\n \n

\n {Object.entries(grids).map(([note, grid], noteIndex) => (\n

{note}{octaves[note]}

\n \n \n

\n {grid.map((cell, index) => (\n toggleGridCell(note, index)}\n >\n {cell ? '🔔' : ''}\n \n ))}\n

\n ))}\n

\n \n \n

\n Speed: {1000 / noteInterval} beats/second\n setNoteInterval(Number(e.target.value))}\n />\n

\n Ring the source on Val Town 🔔\n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(\n `\n \n \n Bell Sequencer\n \n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Roboto', sans-serif;\n margin: 0;\n padding: 20px;\n background-color: #f5f5f5;\n color: #333;\n}\n.container {\n max-width: 800px;\n margin: 0 auto;\n text-align: center;\n}\nh1, h2 {\n color: #333;\n margin-bottom: 20px;\n}\n.audio-state {\n margin-bottom: 20px;\n font-weight: bold;\n}\n.init-audio-button {\n margin-left: 10px;\n padding: 5px 10px;\n background-color: #4ecdc4;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n.init-audio-button:hover {\n background-color: #45b7aa;\n}\n.grids {\n display: flex;\n justify-content: center;\n gap: 20px;\n margin-bottom: 30px;\n}\n.grid {\n background-color: #fff;\n border-radius: 8px;\n padding: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n.octave-buttons {\n display: flex;\n justify-content: center;\n gap: 10px;\n margin-bottom: 10px;\n}\n.octave-button {\n padding: 5px 10px;\n font-size: 16px;\n background-color: #f0f0f0;\n border: 1px solid #ccc;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n.octave-button:hover {\n background-color: #e0e0e0;\n}\n.grid-cells {\n display: grid;\n grid-template-rows: repeat(8, 1fr);\n gap: 10px;\n}\n.grid-cell {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 2px solid #ccc;\n background-color: #fff;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 20px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n.grid-cell.active {\n border-color: currentColor;\n}\n.grid-cell.current {\n box-shadow: 0 0 0 2px #333;\n}\n.controls {\n margin-bottom: 20px;\n}\n.playback-button, .refresh-button {\n padding: 10px 20px;\n font-size: 18px;\n color: white;\n border: none;\n border-radius: 25px;\n cursor: pointer;\n transition: all 0.3s ease;\n margin: 0 10px 20px;\n}\n.playback-button {\n background-color: #4ecdc4;\n}\n.refresh-button {\n background-color: #f7b731;\n}\n.playback-button:hover, .refresh-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n.playback-button:hover {\n background-color: #45b7aa;\n}\n.refresh-button:hover {\n background-color: #e5a82e;\n}\n.slider-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 20px;\n}\n.slider-container label {\n margin-bottom: 10px;\n}\ninput[type=\"range\"] {\n width: 100%;\n max-width: 300px;\n}\n.footer {\n margin-top: 30px;\n font-size: 14px;\n color: #666;\n}\n.footer a {\n color: #4ecdc4;\n text-decoration: none;\n}\n.footer a:hover {\n text-decoration: underline;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/all/bellTracker/code/main.tsx","extension","actionData","errors"]