50 ? 'overflow' : ''}`} onClick={addSplat}>\n

Hello, World!

Welcome to my super juicy Val Town creation!

Click anywhere for more juice!

\n {splats.map((splat, i) => (\n

\n ))}\n

\n {[...Array(5)].map((_, i) =>

)}\n

\n );\n}\n\n// Client-side only code\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\n// Server-side only code\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n \n Hello World Val\n \n \n \n

\n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\n body {\n font-family: 'Fredoka One', cursive;\n max-width: 800px;\n margin: 0 auto;\n padding: 20px;\n line-height: 1.6;\n background-color: orange;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n h1 {\n color: #333;\n font-size: 2.5em;\n }\n .content {\n background-color: white;\n padding: 20px;\n border-radius: 8px;\n animation: bounce 1s ease-in-out infinite alternate;\n position: relative;\n cursor: pointer;\n overflow: hidden;\n }\n .welcome {\n opacity: 0;\n animation: fadeIn 2s forwards 1s;\n }\n @keyframes bounce {\n from {\n transform: translateY(0px);\n }\n to {\n transform: translateY(-15px);\n }\n }\n @keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n .super-juicy {\n background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n font-weight: bold;\n display: inline-block;\n animation: squeeze 2s ease-in-out infinite;\n }\n .rainbow {\n background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n animation: rainbow 5s linear infinite, wobble 0.5s ease-in-out infinite alternate;\n }\n @keyframes rainbow {\n 0% { filter: hue-rotate(0deg); }\n 100% { filter: hue-rotate(360deg); }\n }\n @keyframes squeeze {\n 0%, 100% { transform: scale(1, 1) rotate(0deg); }\n 25% { transform: scale(1.2, 0.8) rotate(-5deg); }\n 50% { transform: scale(0.8, 1.2) rotate(5deg); }\n 75% { transform: scale(1.1, 0.9) rotate(-5deg); }\n }\n .shake {\n animation: shake 0.5s ease-in-out;\n }\n @keyframes shake {\n 0%, 100% { transform: translateX(0); }\n 25% { transform: translateX(-5px) rotate(-5deg); }\n 75% { transform: translateX(5px) rotate(5deg); }\n }\n @keyframes wobble {\n 0% { transform: rotate(-5deg); }\n 100% { transform: rotate(5deg); }\n }\n .juice-drops {\n position: absolute;\n bottom: -20px;\n left: 0;\n right: 0;\n }\n .drop {\n position: absolute;\n width: 10px;\n height: 10px;\n background-color: #ff6600;\n border-radius: 50%;\n animation: drip 2s ease-in infinite;\n }\n @keyframes drip {\n 0% {\n transform: translateY(0) scale(1);\n opacity: 1;\n }\n 70% {\n transform: translateY(20px) scale(0.9);\n opacity: 0.7;\n }\n 100% {\n transform: translateY(30px) scale(0.8);\n opacity: 0;\n }\n }\n .splat {\n position: absolute;\n border-radius: 50%;\n transform: translate(-50%, -50%);\n animation: splat 0.5s ease-out forwards;\n }\n @keyframes splat {\n 0% { transform: scale(0); opacity: 1; }\n 50% { transform: scale(1.2); opacity: 0.8; }\n 100% { transform: scale(1); opacity: 0.7; }\n }\n .instruction {\n font-size: 0.8em;\n color: #666;\n margin-top: 20px;\n animation: pulse 2s infinite;\n }\n @keyframes pulse {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n }\n .juice-meter {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 5px;\n background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00);\n transition: width 0.3s ease;\n }\n .overflow::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: radial-gradient(circle, transparent 30%, rgba(255,165,0,0.3) 70%);\n pointer-events: none;\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/jxnblk/the-juice/code/tragic-indigo-gopher","extension","actionData","errors"]