Reality Glitch Simulator

#devchallenge #418challenge #showdev
April Fools Challenge Submission ☕️🤡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reality Glitch Simulator™</title>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: black;
        color: #00ffcc;
        text-align: center;
        overflow: hidden;
    }

    h1 {
        margin-top: 40px;
        font-size: 2.5rem;
    }

    button {
        padding: 15px 30px;
        font-size: 18px;
        border: none;
        background: #00ffcc;
        color: black;
        cursor: pointer;
        border-radius: 10px;
        transition: 0.2s;
    }

    #clock {
        margin-top: 20px;
        font-size: 2rem;
    }

    #glitchText {
        margin-top: 30px;
        font-size: 1.5rem;
        color: #ff4d4d;
    }

    .glitch {
        animation: glitch 0.2s infinite;
    }

    @keyframes glitch {
        0% { transform: translate(0); }
        25% { transform: translate(2px, -2px); }
        50% { transform: translate(-2px, 2px); }
        75% { transform: translate(2px, 2px); }
        100% { transform: translate(0); }
    }

    .error {
        position: absolute;
        background: #111;
        border: 2px solid red;
        padding: 10px;
        color: red;
        font-size: 14px;
    }
</style>
</head>

<body>

<h1>🌀 Reality Glitch Simulator™</h1>

<button id="startBtn">Start Reality</button>

<div id="clock"></div>
<div id="glitchText"></div>

<script>
const btn = document.getElementById("startBtn");
const clock = document.getElementById("clock");
const glitchText = document.getElementById("glitchText");

const glitches = [
    "You entered a room and forgot why.",
    "Your brain is buffering...",
    "NPC ignored your greeting.",
    "Mission objective unclear.",
    "You opened fridge 5 times. No update.",
    "Reality.exe has stopped working.",
    "Memory leak detected in brain.",
    "You walked into the wrong conversation.",
    "Loading motivation... failed.",
    "Time skipped without permission."
];

// Escaping button
btn.addEventListener("mouseover", () => {
    btn.style.position = "absolute";
    btn.style.top = Math.random() * window.innerHeight + "px";
    btn.style.left = Math.random() * window.innerWidth + "px";
});

// Start simulation
btn.addEventListener("click", () => {
    document.body.classList.add("glitch");

    // Teapot error
    setTimeout(() => {
        alert("Error 418: I am a teapot ☕");
    }, 1000);

    // Glitch text update
    setInterval(() => {
        glitchText.innerText =
            glitches[Math.floor(Math.random() * glitches.length)];
    }, 2000);

    // Broken clock (time goes weird)
    setInterval(() => {
        let now = new Date();
        now.setSeconds(now.getSeconds() - Math.random() * 20);
        clock.innerText = "⏳ " + now.toLocaleTimeString();
    }, 1000);

    // Random error popups
    setInterval(() => {
        const error = document.createElement("div");
        error.className = "error";
        error.innerText = "⚠️ System Error: Reality not found";

        error.style.top = Math.random() * window.innerHeight + "px";
        error.style.left = Math.random() * window.innerWidth + "px";

        document.body.appendChild(error);

        setTimeout(() => {
            error.remove();
        }, 3000);
    }, 1500);

    // Random screen flash
    setInterval(() => {
        document.body.style.background =
            Math.random() > 0.5 ? "black" : "#111";
    }, 300);
});
</script>

</body>
</html>
DEV Community

Reality Glitch Simulator

Top comments (0)
