404 NORMAL NOT FOUND

“Normal is the only feature this website doesn't have.”
Category: Certified Menace — Funniest / Most Annoying

A futuristic, surreal cyber-experience crafted like an operating system that has completely lost its mind. Features electric-blue light streaks, neon-purple glows, acid-yellow panels, hot-pink accents, animated chromatic glitch typography, and hilarious interactive absurdities.

---

⚡ Key Highlights & Core Experiences

1. Hero Experience & Live Normality Telemetry

• Animated 404 Heading: Chromatic RGB-split glitch animation with interactive data attributes.
• FIX EVERYTHING: Runs an automated system diagnostic repair wizard, pretends to recalibrate common sense, and introduces a harmless new absurdity.
• MAKE IT WORSE: Safe, temporary 8-second chaos mode featuring emergency strobe, matrix stream, and a live countdown banner with an immediate ABORT CHAOS button.
• FIND NORMAL: Interactive terminal scanning 8+ billion humans and planetary archives, discovering that normality was discontinued in Q3 1998.
• Live Normality Indicator: Dynamic telemetry showing 0.00% normality, fluctuating with user interactions.

2. Four Original Interactive Experiences

• A. Login from Hell: Fictional authentication simulator with dynamically shifting impossible criteria (e.g. apologizing to your keyboard), a brutally judgmental strength meter, a runaway verification button, and 25+ absurd server rejection notices. (Strictly client-side entertainment; never stores or collects data).
• B. The Unreliable Calculator: A 100% mathematically accurate arithmetic calculator (+, -, *, /, %, +/-, AC) coupled with a sarcastic commentary engine delivering sharp remarks on every calculation, an interactive calculation history tape, and a prank keypad shuffler.
• C. Time Machine 404: Chrono-displacement navigator allowing travel to bizarre epochs (-500 BCE, 404, 1337, 1999, 2026, 2077, 3042, 9999). Clearly distinguishes Historical Facts from Fictional Timeline Paradoxes.
• D. The Department of Unnecessary Problems: Contradictory toggles that sabotage each other, a runaway self-preserving button that dodges the cursor, fake system updates (Patch 404.99.01), and a weirdness identity generator producing fictional personas with useless superpowers.

3. Surprises & Micro-Interactions

• NetScape 404: A simulated browser returning ridiculous locally indexed web search results.
• Synthesized Web Audio: Custom 8-bit sound effects synthesized entirely in JavaScript via the Web Audio API (default muted, opt-in with header toggle; never autoplays).
• Draggable Sticky Notes: Interactive retro memos scattered on the desktop.
• Secret Konami Code: Type Up Up Down Down Left Right Left Right B A on your keyboard to trigger 8-Bit Disco Rave mode!
• Achievements System: Live badges unlocked by discovering easter eggs (e.g. dividing by zero, dodging buttons).
• Restore Normality Panic Button: Always available in the top bar to immediately cancel all chaos and restore baseline abnormality.

---

📱 Mobile Scrolling & Responsive Design (320px–480px)

• Unblocked Vertical Scrolling: Fluid touch-scrolling with -webkit-overflow-scrolling: touch;, touch-action: pan-y; on the page root, and passive touch handlers to prevent gesture locking.
• Horizontal Swipeable Sections (Left-to-Right):
  • Quick Navigation Ribbon: Sticky horizontal swipeable category chips (Terminal, Login Hell, Calculator, Time Machine, Problems, NetScape 404).
  • Time Machine Presets Strip: Swipeable epoch picker carousel with snap points.
  • Trending Search Queries: Horizontal swipeable chip collection.
  • Achievements Deck: Smooth horizontal swipeable card ribbon on compact viewports.
• Ultra-Mobile Fitting (320px–480px):
  • Compact header with dynamic button labels (RESET, ⚡ 0.00%, 🔇).
  • Scaled glitch headlines with word-break safeguards preventing horizontal overflow.
  • Responsive calculator keypad with touch-action: manipulation; and 44px+ minimum touch targets.
  • 16px input font sizing preventing iOS Safari auto-zoom disruption.
  • Interactive retro draggable sticky note memo preserved.

---

1. Pure Vanilla Stack: Built exclusively with semantic HTML5, modern CSS3, and vanilla JavaScript.
2. Zero Dependencies: No React, Vue, Angular, jQuery, Tailwind runtime, Bootstrap, or external script libraries.
3. No Backend Required: 100% client-side execution; runs offline or as a static site.
4. Privacy & Safety First: Zero personal data collection, zero tracking, no spam, no trap loops, no autoplay sound.
5. Universal Accessibility: WCAG AA contrast standards, keyboard navigation, focus rings (:focus-visible), and prefers-reduced-motion support

---

📄 File Manifest

• index.html — Accessible, semantic HTML5 structure and layout.
• style.css — Handcrafted CSS3 design tokens, glitch keyframes, glowing windows, and responsive layouts.
• script.js — Vanilla JavaScript state manager, Web Audio synthesizer, and interaction handlers.
• README.md — Project documentation and competition guide.