🔔 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",[128],"51691dbe-2796-11f0-9d52-569c3dd06744","README.md","51691e86-2796-11f0-9d52-569c3dd06744",1,["D",1727391953290],"Needs `GITHUB_CONTRIBUTIONS` key set in your Val Town [Environment Variables](https://www.val.town/settings/environment-variables).\n\nGet this token here: https://github.com/settings/personal-access-tokens/new\n\nGive it basically the minimum permissions. It should only pull public data anyways.\n\nMigrated from folder: audio/brokenBells",[144],"pulls","forks","envVars",{"_156":34,"_158":34},"connections",{"_156":34,"_157":34},"count","unfilledCount","emptyCount",{"_20":143,"_13":144,"_129":145,"_130":-5,"_131":21,"_132":146,"_133":40,"_22":165,"_29":34,"_136":104,"_138":148,"_140":76,"_141":-5,"_162":166,"_92":167},{"_20":127,"_13":128,"_129":49,"_130":-5,"_131":21,"_132":30,"_133":40,"_22":161,"_29":135,"_136":137,"_138":139,"_140":76,"_141":-5,"_162":163,"_92":164},["D",1727393063652],"children",[],[128],["D",1727391953290],[],[144],["D",1746218701252],{"_11":12,"_90":86},{"_11":12,"_84":-5,"_85":86,"_46":47,"_87":88,"_89":76},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_77":42,"_78":79,"_80":81,"_82":14,"_83":12},"ctx",{"_69":-5,"_114":205,"_206":207,"_208":209,"_210":76,"_211":76,"_212":76,"_213":40,"_214":-5,"_215":-7,"_216":-7,"_217":34,"_218":76,"_219":76,"_220":-5,"_221":76,"_222":76,"_223":76,"_224":-5},"ENV",{"_176":177,"_178":179,"_180":26,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192,"_193":194,"_195":196,"_197":198,"_199":200,"_201":202,"_203":204},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1