🔔 Bell Sequencer 🔔

\n {Object.keys(NOTES).map((note, index) => (\n \n ))}\n

Bell Sequence

\n {timeline.map((item, index) => (\n

\n 🔔\n {item.note}\n \n

\n ))}\n

\n \n \n

\n Note Interval: {noteInterval}ms\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.bell-buttons {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));\n gap: 10px;\n margin-bottom: 30px;\n}\n.bell-button {\n padding: 15px;\n font-size: 16px;\n background-color: #fff;\n border: 2px solid currentColor;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n.bell-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n.bell-button:active {\n transform: translateY(1px);\n}\n.timeline {\n margin-bottom: 30px;\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.timeline-notes {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n justify-content: center;\n}\n.timeline-note {\n padding: 10px;\n border-radius: 8px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 24px;\n position: relative;\n background-color: #f9f9f9;\n border: 2px solid currentColor;\n transition: all 0.3s ease;\n}\n.timeline-note.active {\n transform: scale(1.1);\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n.note-label {\n font-size: 12px;\n margin-left: 5px;\n}\n.remove-note {\n position: absolute;\n top: -8px;\n right: -8px;\n background-color: #ff6b6b;\n color: white;\n border: none;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n font-size: 14px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n.timeline-note:hover .remove-note {\n opacity: 1;\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/brokenBells/code/main.tsx","extension","actionData","errors"]