/** @jsxImportSource https://esm.sh/react */ import React, { useState, useEffect } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; function App() { const [count, setCount] = useState(0); useEffect(() => { const interval = setInterval(() => { setCount((prevCount) => prevCount + 1); }, 100); return () => clearInterval(interval); }, []); return (

Welcome to the Ugliest Website Ever

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

Pointless Counter: {count}

{Array.from({ length: 10 }, (_, i) => ( Random large image

))}

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

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

smallAndCuteSnakeGame

Version 5