Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[177,183,190],[177,183],{"_107":199,"_99":200,"_151":201,"_153":178,"_154":140,"_155":202,"_157":122,"_109":203,"_104":204,"_159":205,"_161":206,"_162":27,"_163":-5,"_164":207,"_102":208},"68362f2c-08f2-11f0-ad61-569c3dd06744","favicon.svg","8b2c53d6-08f1-11f0-9e74-569c3dd06744",9,["D",1742849767188],1,"file","",[],[177,200],{"_107":210,"_99":211,"_151":212,"_153":178,"_154":140,"_155":213,"_157":122,"_109":214,"_104":94,"_159":205,"_161":215,"_162":27,"_163":-5,"_164":216,"_102":217},"6186fc2e-08f2-11f0-bc3d-569c3dd06744","index.html","17d5aa36-08f1-11f0-910c-569c3dd06744",8,["D",1742849755963],"\n\n \n \n \n FEASTABLES - Time is Running Out\n \n \n \n \n \n \n

FEASTABLES

\n Shop\n Ethical Sourcing\n Worldwide Domination\n

\n \n \n \n \n \n

\n \n

TIME IS RUNNING OUT

Days

Hours

Minutes

Seconds

\n \n

Become a Contestant

\n Your chance to be a contestant on BEAST GAMES SEASON 2! \n Purchase any Feastables product for a chance to win and join the crew.\n

\n \n

\n BEAST COIN\n

\n \n

\n \n \n \n \n \n",[],[177,211],{"_107":219,"_99":220,"_151":221,"_153":178,"_154":140,"_155":94,"_157":122,"_109":222,"_104":33,"_159":193,"_161":223,"_162":27,"_163":-5,"_164":224,"_102":225},"17c5e5e2-08f1-11f0-baab-569c3dd06744","index.tsx","17c5e696-08f1-11f0-baab-569c3dd06744",["D",1742849202740],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[177,220],{"_107":227,"_99":228,"_151":229,"_153":178,"_154":140,"_155":139,"_157":122,"_109":230,"_104":33,"_159":205,"_161":231,"_162":27,"_163":-5,"_164":232,"_102":233},"26207ca4-08f3-11f0-b1cc-569c3dd06744","style.css","26207d62-08f3-11f0-b1cc-569c3dd06744",["D",1742850085816],"@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800;900&display=swap');\n\n:root {\n --primary-blue: #a8e0f0;\n --dark-blue: #0a1c3f;\n --accent-pink: #ff69b4;\n --timer-blue: #4dc4e0;\n --black: #000;\n --white: #fff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: 'Montserrat', sans-serif;\n background-color: var(--primary-blue);\n color: var(--white);\n overflow-x: hidden;\n}\n\n.container {\n max-width: 1440px;\n margin: 0 auto;\n padding: 0 20px;\n}\n\n/* Navigation Bar */\n.navbar {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px 0;\n background-color: var(--primary-blue);\n}\n\n.logo h1 {\n font-weight: 900;\n font-size: 28px;\n color: var(--black);\n text-transform: uppercase;\n}\n\n.menu ul {\n display: flex;\n list-style: none;\n gap: 30px;\n}\n\n.menu a {\n color: var(--black);\n text-decoration: none;\n font-weight: 700;\n font-size: 16px;\n}\n\n.icons {\n display: flex;\n gap: 15px;\n}\n\n.icon {\n color: var(--black);\n text-decoration: none;\n font-size: 20px;\n}\n\n/* Countdown Section */\n.countdown-section {\n background-color: var(--black);\n border-radius: 15px;\n padding: 20px;\n margin: 20px 0;\n display: flex;\n flex-wrap: wrap;\n justify-content: space-between;\n align-items: center;\n position: relative;\n}\n\n.countdown-content {\n flex: 1;\n padding: 20px;\n text-align: left;\n}\n\n.countdown-content h2 {\n font-size: 48px;\n font-weight: 900;\n color: var(--accent-pink);\n text-transform: uppercase;\n margin-bottom: 10px;\n line-height: 1;\n}\n\n.countdown-content p {\n font-size: 18px;\n font-weight: 700;\n color: var(--white);\n margin-bottom: 10px;\n max-width: 500px;\n}\n\n.small-text {\n font-size: 14px !important;\n font-weight: 400 !important;\n}\n\n.small-text a {\n color: var(--accent-pink);\n text-decoration: none;\n}\n\n.timer-container {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.timer {\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.time-block {\n text-align: center;\n}\n\n.time-value {\n font-size: 72px;\n font-weight: 700;\n color: var(--timer-blue);\n line-height: 1;\n}\n\n.time-label {\n font-size: 14px;\n color: var(--timer-blue);\n text-transform: uppercase;\n font-weight: 600;\n}\n\n.time-separator {\n font-size: 72px;\n font-weight: 700;\n color: var(--timer-blue);\n line-height: 1;\n margin-top: -10px;\n}\n\n.buy-now-container {\n position: absolute;\n right: 30px;\n top: 50%;\n transform: translateY(-50%);\n}\n\n.buy-now-btn {\n background-color: var(--accent-pink);\n color: var(--white);\n border: none;\n padding: 15px 40px;\n font-size: 20px;\n font-weight: 800;\n border-radius: 10px;\n cursor: pointer;\n text-transform: uppercase;\n}\n\n/* Promo Section */\n.promo-section {\n background-color: var(--black);\n border-radius: 15px;\n padding: 40px;\n margin: 20px 0;\n background-image: url('https://maxm-imggenurl.web.val.run/explosion-with-fire-and-money-flying-in-the-air-with-a-chocolate-coin-in-foreground');\n background-size: cover;\n background-position: right center;\n position: relative;\n min-height: 400px;\n}\n\n.promo-content {\n max-width: 60%;\n text-align: left;\n}\n\n.promo-content h2 {\n font-size: 36px;\n font-weight: 900;\n color: var(--white);\n text-transform: uppercase;\n margin-bottom: 5px;\n}\n\n.promo-content h3 {\n font-size: 36px;\n font-weight: 900;\n color: var(--white);\n text-transform: uppercase;\n margin-bottom: 20px;\n}\n\n.highlight {\n color: var(--accent-pink);\n}\n\n.beast-games-logo {\n margin-bottom: 30px;\n}\n\n.beast-text {\n font-size: 80px;\n font-weight: 900;\n color: var(--timer-blue);\n text-transform: uppercase;\n line-height: 0.9;\n}\n\n.games-text {\n font-size: 100px;\n font-weight: 900;\n color: var(--white);\n text-transform: uppercase;\n line-height: 0.9;\n}\n\n.promo-text {\n font-size: 24px;\n font-weight: 800;\n color: var(--white);\n margin-top: 30px;\n line-height: 1.3;\n}\n\n/* Join Crew Button */\n.join-crew-container {\n position: relative;\n margin: 20px 0;\n text-align: left;\n}\n\n.join-crew-btn {\n background-color: var(--black);\n color: var(--accent-pink);\n border: none;\n padding: 15px 30px;\n font-size: 18px;\n font-weight: 800;\n border-radius: 10px;\n cursor: pointer;\n text-transform: uppercase;\n}\n\n/* Responsive Design */\n@media (max-width: 1024px) {\n .countdown-section {\n flex-direction: column;\n text-align: center;\n }\n \n .countdown-content {\n text-align: center;\n margin-bottom: 20px;\n }\n \n .buy-now-container {\n position: static;\n transform: none;\n margin-top: 20px;\n }\n \n .promo-content {\n max-width: 100%;\n text-align: center;\n }\n \n .beast-text, .games-text {\n font-size: 60px;\n }\n \n .join-crew-container {\n text-align: center;\n }\n}\n\n@media (max-width: 768px) {\n .navbar {\n flex-direction: column;\n gap: 15px;\n }\n \n .menu ul {\n flex-direction: column;\n gap: 10px;\n text-align: center;\n }\n \n .time-value {\n font-size: 48px;\n }\n \n .time-separator {\n font-size: 48px;\n }\n \n .beast-text {\n font-size: 40px;\n }\n \n .games-text {\n font-size: 60px;\n }\n \n .promo-text {\n font-size: 18px;\n }\n}",[],[177,228],[177],{"_107":236,"_99":237,"_151":238,"_153":-5,"_154":140,"_155":204,"_157":122,"_109":239,"_104":33,"_159":205,"_161":240,"_162":27,"_163":-5,"_164":241,"_102":242},"17bd5fb2-08f1-11f0-80a8-569c3dd06744","README.md","17bd6084-08f1-11f0-80a8-569c3dd06744",["D",1742849202685],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n- **Remix** this starter template on the top right to get started.\n\n- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.\n\n[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.",[],[237],"files",[148,166,175,181,188,198,209,218,226,235],"counts",{"_247":33,"_248":204,"_249":33,"_250":33},"pulls","branches","forks","envVars","contents",[],{"_107":167,"_99":168,"_151":120,"_153":152,"_154":140,"_155":156,"_157":122,"_109":254,"_104":33,"_159":170,"_161":171,"_162":27,"_163":-5,"_102":255},["D",1742849202792],[150,168],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_97":98,"_99":100,"_101":43,"_102":103,"_105":261,"_205":265,"_268":269,"_272":273,"_276":-7,"_277":33,"_278":27},{"_107":108,"_99":100,"_109":262,"_111":-5,"_112":27,"_113":114,"_115":116,"_117":-5,"_12":118,"_119":120,"_121":122,"_123":-5,"_124":33,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":263,"_137":264},["D",1742849202610],{"_97":98,"_135":136},{"_104":139,"_99":43,"_107":140,"_141":108,"_142":-5,"_143":-5,"_144":-5,"_145":-5},{"_107":167,"_99":168,"_151":120,"_153":152,"_154":140,"_155":156,"_157":122,"_109":266,"_104":33,"_159":170,"_161":171,"_162":27,"_163":-5,"_102":267},["D",1742849202792],[150,168],"history",[270],{"_107":167,"_154":140,"_151":120,"_99":168,"_161":171,"_159":170,"_104":33,"_153":152,"_109":271,"_155":156,"_163":-5},["D",1742849202792],"versions",[274],{"_205":270,"_275":-5},"previous","versionNumber","page","hasNext","routes/_app","actionData","errors"]

History for index.ts