Worst-possible-web

Bad UI design

Comment

🧭 AgonyMaps (HellNav™) & BadUI Participant Portal

A Complete, Fully-Functional Google Maps Clone Wrapped in the Most Agonizing, Inconvenient UI Possible

"Make it work. Make it weird." — UI Gone Bad (TechnoVIT Challenge Edition)

Welcome to AgonyMaps, an interactive, multi-webpage clone of modern mapping applications engineered with real working Google Maps capabilities (real OpenStreetMap tiles, real Nominatim geocoding search, real OSRM road routing, real GPS geolocation, and real place discovery) fused with the most excruciating BadUI design tropes inspired by the BadUI Participant Portal.

⚡ Quick Start: How to Run

Because AgonyMaps is built with zero build steps and zero local backend dependencies (pure HTML5, CSS3, ES6 Modules, Leaflet via CDN, and Web APIs), running it takes 2 seconds:

Step 1: Start a local server with Python

cd C:\Users\nisha\.gemini\antigravity\scratch\agony-maps
python -m http.server 8000

Step 2: Open your browser

Open your browser and navigate to: 👉 http://localhost:8000

(Or double-click index.html in Windows Explorer to launch directly!)

🌐 The 6 Dynamic Webpages Overview

Webpage Route Purpose & Working Google Maps Feature
Map Explorer index.html Real Leaflet & OpenStreetMap + Esri Satellite explorer, real Nominatim search bar, Roman numeral zoom dial (I–XVI), scrambling D-Pad, and evasive GPS "Locate Me".
Rage Route Planner directions.html Real OSRM Road Routing: Calculates real road polylines between any two world cities, transport mode dice-roller, contradictory avoidances, and pitch-shifted robot voice TTS navigation.
Cursed Places & Reviews places.html Real POI Place Discovery: Searches real cafes, restaurants, and hotels via Nominatim, with ratings given in Boiled Eggs and an interactive 2D Emotion Coordinate Plane review canvas.
Add Missing Place contribute.html Community Contribution: Add new locations using microscopic dual joystick coordinate sliders and manually paint the storefront in an interactive 32×32 retro pixel art canvas!
BadUI Participant Portal portal.html BadUI Challenge Portal: 10-digit phone range slider (0000000000–9999999999), Mayan/French DOB roulette, scrambling keyboard, and strict divine password validator.
Hostile Settings settings.html Mutually Contradictory Preferences: Blinding Dark Mode, distance units in ancient Babylonian cubits, and an 80,000-word Terms of Service scrollbox.

🤬 Detailed Feature Breakdown of Working Maps + Agony UI

1. 🗺️ Real Map Explorer (index.html)

  • Real Global Mapping: Powered by Leaflet.js with live OpenStreetMap tiles, Esri World Imagery (Satellite), and Topographic layers.
  • Wheel Zoom Prohibition: Mouse wheel scrolling is intercepted with an error buzzer and an alert: "⚠️ MOUSE WHEEL VIOLATION! Use the Roman Numeral Dial or Microscope Slider!"
  • Roman Numeral Zoom: Zoom levels are mapped to Roman numerals (I to XVIII).
  • Microscope Precision Slider: Vertical slider with extreme sensitivity where 1 pixel leaps across 50x magnification.
  • Scrambling Directional D-Pad: 8-way directional navigation pad where all arrow buttons randomly shuffle their positions on every single click!
  • Real Nominatim Search Bar: Type any real city or landmark ("Eiffel Tower", "Tokyo", "Times Square"); uses live OpenStreetMap geocoding with a 15% chance to swap adjacent characters as you type.
  • Evasive "Locate Me" GPS Button: Uses real browser navigator.geolocation to fly to your exact physical coordinates, but the button runs away on hover and asks 2 double-negative confirmation dialogs before pinpointing you.

2. 🚗 Rage Route Planner & Directions (directions.html)

  • Real Road Routing via OSRM: Enter any real start and end destination (e.g. "Paris, France" to "Lyon, France"). The engine queries the public Open Source Routing Machine API, plots the real road network geometry, and computes actual distances and travel times.
  • Transport Mode Dice Roller: To select "Walking", you must roll a 6-sided dice until you roll a 1; to select "Bicycle", you must roll a 6; otherwise, you are forced into toll-heavy driving!
  • Contradictory Avoidance Checkboxes: Checking "Avoid Highways" randomly flips "Avoid Happiness" or "Prefer Potholes".
  • Turn-by-Turn Guidance in Ancient Cubits: Converts road distances to ancient Babylonian cubits and rods.
  • Pitch-Shifted Robot Voice Navigation: Uses the Web Speech API (speechSynthesis) in a low mechanical monotone to read instructions: "In 400 cubits, turn right onto Boulevard. Recalculating because you took a wrong breath."

3. ☕ Cursed Places & 2D Emotion Reviews (places.html)

  • Real POI Discovery: Live category search for real cafes, restaurants, hotels, and gas stations in any city.
  • Egg-Based Rating System: Instead of 5 stars, places are rated out of 7.3 Boiled Eggs and Rusty Nails of noise.
  • 2D Emotion Coordinate Plane: Writing a review requires clicking on an interactive 2D canvas coordinate plane between:
    • X-Axis: Mild Annoyance ⟷ Existential Dread
    • Y-Axis: Food Poisoning ⟷ Spiritual Satiation
  • Evasive Publish Button: Flees cursor when you attempt to submit.

4. 📍 Add Missing Place (contribute.html)

  • Microscopic Dual Joysticks: Enter Latitude and Longitude using two high-precision range sliders with 0.0001° step sizes.
  • 32×32 Pixel Art Storefront Photo Canvas: Digital image uploads are banned. You must manually paint the storefront using an interactive 32×32 retro pixel art canvas with a 4-color palette!

5. 🔐 The BadUI Participant Portal (portal.html)

Directly inspired by the BadUI Participant Portal (badui-portal-participant.vercel.app):

  • Slot Machine Handle Roller: Username cannot be typed; click 🎰 SPIN to gamble for a handle.
  • 10-Digit Phone Range Slider: Drag between 0000000000 and 9999999999 to enter your 2FA number.
  • Date of Birth Roulette: Choose between Mayan Long Count, French Republican, or Julian calendars; roll a dice for your birth day; slide a range slider from 1000 BCE to 3000 CE for your year.
  • Scrambling Keyboard: On-screen keyboard shuffles all keys on every keystroke.
  • Divine Password Mandates:
    1. Length must be a prime number.
    2. Must contain a Roman numeral (I, V, X, L, C, D, M).
    3. Must contain a vehicle emoji (🚗, 🚜, 🛸, 🛴, 🚢).
    4. Must NOT contain the letter E.
    5. Sum of digits must equal the current UTC minute (updates live every 60s!).
  • Evasive Remember Me & Submit: The checkbox flees the cursor; clicking it wipes the form.

6. ⚙️ Hostile Preferences (settings.html)

  • Contradictory Theme Toggles: Enabling "Dark Mode" activates blinding high-contrast neon; "Invert" flashes photo-negative; "Wingdings Mode" transforms the entire app font into Wingdings cryptography.
  • Cursed Distance Units: Furlongs, Nautical Leagues, Parsecs, and Ancient Cubits.
  • 80,000-Word Terms of Service Scrollbox: Must scroll to the very bottom to enable the surrender button.
  • Reverse Volume Slider: 0% is max volume, 100% is mute.

📁 Architecture & File Structure

agony-maps/
├── index.html              # Page 1: Real Leaflet Map Explorer, Nominatim search, Roman zoom, D-Pad
├── directions.html         # Page 2: Real OSRM Road Routing, dice roller, TTS voice navigator
├── places.html             # Page 3: Real POI place discovery, boiled egg ratings, 2D emotion canvas
├── contribute.html         # Page 4: Add Missing Place with dual coordinate joysticks & 32x32 pixel canvas
├── portal.html             # Page 5: BadUI Participant Portal (phone slider, DOB roulette, scrambling keys)
├── settings.html           # Page 6: Hostile Preferences (contradictory toggles, cursed units, TOS scrollbox)
├── README.md               # Comprehensive guide and UX documentation (this document)
├── styles/
│   ├── main.css            # Navigation bar, CRT scanlines, typography, layout, spite toasts
│   ├── map.css             # Leaflet overrides, Roman numeral zoom dial, search card, D-Pad
│   ├── badui.css           # BadUI portal styles (phone slider, pixel canvas, emotion plane, dice)
│   └── modals.css          # Cookie labyrinth banner, toll booth modal, spite alerts
└── js/
    ├── agony-audio.js      # Synthesized Web Audio API sounds + Web Speech API robot TTS
    ├── badui-utils.js      # Reusable BadUI mechanics (evasive buttons, toasts, status bar)
    ├── map-page.js         # Leaflet map orchestrator, Nominatim search, GPS, layers
    ├── directions-page.js  # Real OSRM road routing, dice roller, turn-by-turn drawer, TTS
    ├── places-page.js      # Real POIs search, egg ratings, 2D emotion coordinate canvas
    ├── contribute-page.js  # Dual joystick coordinates, 32x32 retro pixel art photo maker
    ├── portal-page.js      # BadUI participant portal with phone slider, DOB roulette, password rules
    └── settings-page.js    # Contradictory settings, reverse volume, unit converters

🧪 Browser Compatibility

Tested and 100% compatible with:

  • Google Chrome (Desktop)
  • Microsoft Edge (Desktop)
  • Mozilla Firefox (Desktop)
  • Brave Browser (Desktop)
Share this project:

Updates