Welcome to the Ugliest Website Ever

\n This site is under constant construction! Visit often for more ugliness!\n

\n \n

Pointless Counter: {count}

\n \n

\n {Array.from({ length: 10 }, (_, i) => (\n $\"Random$ \n ))}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") {\n client();\n}\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n \n \n \n \n \n Ugly and Bloated Website\n \n \n \n \n \n

\n \n \n \n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\n /* Intentionally bloated and ugly CSS */\n * {\n box-sizing: content-box !important;\n }\n\n body {\n font-family: 'Comic Neue', cursive;\n background: repeating-linear-gradient(\n 45deg,\n #ff00ff,\n #ff00ff 10px,\n #00ffff 10px,\n #00ffff 20px\n );\n color: yellow;\n text-shadow: 2px 2px 4px #000000, -2px -2px 4px #ffffff;\n cursor: wait;\n }\n\n .container {\n width: 200%;\n overflow-x: scroll;\n }\n\n h1, h2, h3 {\n font-family: 'Press Start 2P', cursive;\n animation: rainbow 2s linear infinite;\n }\n\n @keyframes rainbow {\n 0% { color: red; }\n 14% { color: orange; }\n 28% { color: yellow; }\n 42% { color: green; }\n 57% { color: blue; }\n 71% { color: indigo; }\n 85% { color: violet; }\n 100% { color: red; }\n }\n\n nav {\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%) rotate(45deg);\n z-index: 9999;\n }\n\n nav a {\n display: inline-block;\n padding: 10px;\n background-color: #ff00ff;\n color: #00ff00;\n text-decoration: blink;\n font-size: 24px;\n margin: 5px;\n transform: skew(20deg);\n }\n\n .content {\n column-count: 3;\n column-gap: 40px;\n column-rule: 4px dotted #ff00ff;\n }\n\n button {\n font-size: 48px;\n background-color: black;\n color: white;\n border: 10px solid #00ff00;\n border-radius: 50%;\n padding: 20px;\n cursor: not-allowed;\n animation: pulse 0.5s infinite alternate;\n }\n\n @keyframes pulse {\n from { transform: scale(1); }\n to { transform: scale(1.1); }\n }\n\n .image-container {\n display: flex;\n flex-wrap: wrap;\n }\n\n .image-container img {\n width: 100%;\n height: auto;\n margin: 10px;\n border: 5px solid #ff00ff;\n box-shadow: 0 0 20px #00ffff;\n transition: all 0.3s;\n }\n\n .image-container img:hover {\n transform: rotate(360deg) scale(1.2);\n }\n\n aside {\n position: fixed;\n right: -300px;\n top: 0;\n width: 300px;\n height: 100%;\n background-color: rgba(255, 0, 255, 0.8);\n overflow-y: scroll;\n transition: right 0.3s;\n }\n\n aside:hover {\n right: 0;\n }\n\n footer {\n background-color: #000000;\n color: #ffffff;\n text-align: center;\n padding: 20px;\n font-family: 'Pacifico', cursive;\n font-size: 24px;\n }\n\n .social-icons {\n display: flex;\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .icon {\n margin: 10px;\n animation: spin 2s linear infinite;\n }\n\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n\n /* Unnecessary media queries */\n @media (max-width: 9999px) {\n body::before {\n content: \"\";\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: url('https://picsum.photos/2000/2000') no-repeat center center fixed;\n opacity: 0.1;\n z-index: -1;\n }\n }\n`;","deleted","label",[98],"permalink","https://www.val.town/x/jake/smallAndCuteSnakeGame/code/main.tsx","extension","actionData","errors"]