Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[176,182,189],[176,182],{"_106":198,"_99":199,"_150":200,"_152":177,"_153":139,"_154":201,"_156":121,"_108":202,"_103":203,"_158":204,"_160":205,"_161":27,"_162":-5,"_163":206,"_102":207},"68362f2c-08f2-11f0-ad61-569c3dd06744","favicon.svg","8b2c53d6-08f1-11f0-9e74-569c3dd06744",9,["D",1742849767188],1,"file","",[],[176,199],{"_106":209,"_99":210,"_150":211,"_152":177,"_153":139,"_154":212,"_156":121,"_108":213,"_103":94,"_158":204,"_160":214,"_161":27,"_162":-5,"_163":215,"_102":216},"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",[],[176,210],{"_106":218,"_99":219,"_150":220,"_152":177,"_153":139,"_154":94,"_156":121,"_108":221,"_103":33,"_158":192,"_160":222,"_161":27,"_162":-5,"_163":223,"_102":224},"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();",[],[176,219],{"_106":226,"_99":227,"_150":228,"_152":177,"_153":139,"_154":138,"_156":121,"_108":229,"_103":33,"_158":204,"_160":230,"_161":27,"_162":-5,"_163":231,"_102":232},"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}",[],[176,227],[176],{"_106":235,"_99":236,"_150":237,"_152":-5,"_153":139,"_154":203,"_156":121,"_108":238,"_103":33,"_158":204,"_160":239,"_161":27,"_162":-5,"_163":240,"_102":241},"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.",[],[236],"files",[147,165,174,180,187,197,208,217,225,234],"counts",{"_246":33,"_247":203,"_248":33,"_249":33},"pulls","branches","forks","envVars","contents",[252,255,258],{"_106":148,"_99":149,"_150":151,"_152":-5,"_153":139,"_154":155,"_156":121,"_108":253,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":254},["D",1742849202792],[149],{"_106":175,"_99":176,"_150":177,"_152":-5,"_153":139,"_154":94,"_156":121,"_108":256,"_103":33,"_158":159,"_160":-5,"_161":27,"_162":-5,"_102":257},["D",1742849202740],[176],{"_106":235,"_99":236,"_150":237,"_152":-5,"_153":139,"_154":203,"_156":121,"_108":259,"_103":33,"_158":204,"_160":239,"_161":27,"_162":-5,"_102":260},["D",1742849202685],[236],"upstream","screenshots","emptyEnvVars","routes/_app.x.$handle.$name.branch.$branch.history",{"_97":98,"_99":100,"_101":43,"_104":266,"_270":271,"_340":33,"_341":27},{"_106":107,"_99":100,"_108":267,"_110":-5,"_111":27,"_112":113,"_114":115,"_116":-5,"_12":117,"_118":119,"_120":121,"_122":-5,"_123":33,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":268,"_136":269},["D",1742849202610],{"_97":98,"_134":135},{"_103":138,"_99":43,"_106":139,"_140":107,"_141":-5,"_142":-5,"_143":-5,"_144":-5},"history",[272,277,282,287,295,303,311,319,327,335],{"_150":228,"_103":138,"_108":273,"_153":139,"_242":274},["D",1742850085816],[275],{"_106":226,"_153":139,"_150":228,"_99":227,"_160":230,"_158":204,"_103":33,"_152":177,"_108":273,"_154":138,"_162":-5,"_156":121,"_161":27,"_102":276},[176,227],{"_150":200,"_103":201,"_108":278,"_153":139,"_242":279},["D",1742849767188],[280],{"_106":198,"_153":139,"_150":200,"_99":199,"_160":205,"_158":204,"_103":203,"_152":177,"_108":278,"_154":201,"_162":-5,"_156":121,"_161":27,"_102":281},[176,199],{"_150":211,"_103":212,"_108":283,"_153":139,"_242":284},["D",1742849755963],[285],{"_106":209,"_153":139,"_150":211,"_99":210,"_160":214,"_158":204,"_103":94,"_152":177,"_108":283,"_154":212,"_162":-5,"_156":121,"_161":27,"_102":286},[176,210],{"_150":200,"_103":288,"_108":289,"_153":139,"_242":290},7,["D",1742849396351],[291],{"_106":292,"_153":139,"_150":200,"_99":199,"_160":293,"_158":204,"_103":33,"_152":177,"_108":289,"_154":288,"_162":-5,"_156":27,"_161":27,"_102":294},"8b2c5318-08f1-11f0-9e74-569c3dd06744","",[176,199],{"_150":211,"_103":296,"_108":297,"_153":139,"_242":298},6,["D",1742849392651],[299],{"_106":300,"_153":139,"_150":211,"_99":210,"_160":301,"_158":204,"_103":203,"_152":177,"_108":297,"_154":296,"_162":-5,"_156":27,"_161":27,"_102":302},"88f8697e-08f1-11f0-8151-569c3dd06744","\n\n \n \n \n Val Town Dashboard\n \n \n \n \n

\n \n \n \n",[176,210],{"_150":190,"_103":184,"_108":304,"_153":139,"_242":305},["D",1742849202925],[306,308],{"_106":188,"_153":139,"_150":190,"_99":189,"_160":193,"_158":192,"_103":33,"_152":183,"_108":304,"_154":184,"_162":-5,"_156":121,"_161":27,"_102":307},[176,182,189],{"_106":181,"_153":139,"_150":183,"_99":182,"_160":-5,"_158":159,"_103":33,"_152":177,"_108":309,"_154":184,"_162":-5,"_156":121,"_161":27,"_102":310},["D",1742849202925],[176,182],{"_150":211,"_103":312,"_108":313,"_153":139,"_242":314},4,["D",1742849202844],[315],{"_106":316,"_153":139,"_150":211,"_99":210,"_160":317,"_158":204,"_103":33,"_152":177,"_108":313,"_154":312,"_162":-5,"_156":27,"_161":27,"_102":318},"17d5a982-08f1-11f0-910c-569c3dd06744","\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[176,210],{"_150":119,"_103":155,"_108":320,"_153":139,"_242":321},["D",1742849202792],[322,324],{"_106":166,"_153":139,"_150":119,"_99":167,"_160":170,"_158":169,"_103":33,"_152":151,"_108":320,"_154":155,"_162":-5,"_156":121,"_161":27,"_102":323},[149,167],{"_106":148,"_153":139,"_150":151,"_99":149,"_160":-5,"_158":159,"_103":33,"_152":-5,"_108":325,"_154":155,"_162":-5,"_156":121,"_161":27,"_102":326},["D",1742849202792],[149],{"_150":177,"_103":94,"_108":328,"_153":139,"_242":329},["D",1742849202740],[330,332],{"_106":175,"_153":139,"_150":177,"_99":176,"_160":-5,"_158":159,"_103":33,"_152":-5,"_108":328,"_154":94,"_162":-5,"_156":121,"_161":27,"_102":331},[176],{"_106":218,"_153":139,"_150":220,"_99":219,"_160":222,"_158":192,"_103":33,"_152":177,"_108":333,"_154":94,"_162":-5,"_156":121,"_161":27,"_102":334},["D",1742849202740],[176,219],{"_150":237,"_103":203,"_108":336,"_153":139,"_242":337},["D",1742849202685],[338],{"_106":235,"_153":139,"_150":237,"_99":236,"_160":239,"_158":204,"_103":33,"_152":-5,"_108":336,"_154":203,"_162":-5,"_156":121,"_161":27,"_102":339},[236],"page","hasNext","routes/_app","actionData","errors"]

History