`data/artifacts/035b7009e366/hermes3-8b.html`

194 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Designer Wallcoverings</title>
<style>
:root {
    --bg-color: #faf8f4;
    --surface-color: #ffffff;
    --text-color: #1c1a17;
    --muted-color: #9b948a;
    --accent-color: #b0472e;
    --accent-hover: #2f4c39;
    --line-color: #f5f2ea;
    --shadow-color: rgba(0, 0, 0, .12);
    --hover-shadow: rgba(0, 0, 0, .18);
    --ease-in-out-quart: cubic-bezier(.22, 1, .36, 1);
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    display: flex;
    justify-content: center;
    margin: 0;
    padding-top: 60px;
}

.wall {
    background-color: var(--surface-color);
    box-shadow: 0 8px 24px var(--shadow-color);
    display: flex;
    align-items: center;
    position: relative;
    width: 100vw;
}

.roller {
    background-color: var(--accent-color);
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(var(--accent-hover), 35%);
    cursor: grab;
    display: block;
    height: 80px;
    position: absolute;
    width: 80px;
}

.roll {
    animation: roll 1s infinite linear;
    background-color: var(--surface-color);
    box-shadow: 0 16px 48px var(--hover-shadow);
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: 100px;
    position: absolute;
    width: 100px;
}

.obstacle {
    background-color: var(--muted-color);
    box-shadow: 0 8px 24px var(--shadow-color);
    border-radius: 50%;
    cursor: default;
    display: block;
    height: 120px;
    position: absolute;
    width: 120px;
}

.pattern {
    background-color: var(--accent-hover);
    box-shadow: 0 8px 24px var(--shadow-color);
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: 80px;
    position: absolute;
    width: 80px;
}

.overlay {
    background-color: rgba(0, 0, 0, .7);
    color: var(--text-color);
    display: none;
    justify-content: center;
    left: 0;
    opacity: 0;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    text-align: center;
}

.overlay.visible {
    display: flex;
    opacity: 1;
}

@keyframes roll {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

@keyframes fadeUp {
    from {opacity: 0; transform: translateY(28px);}
    to {opacity: 1; transform: translateY(0);}
}
</style>
<body>
<div class="wall" style="--surface-color:#fff9f1">
    <div class="roller" style="top:50vh;"></div>
    <span class="score">Score: 0</span>
    <div class="score">Best: 0</div>
    <div class="roll" style="left:100vw;"></div>
    <div class="obstacle" style="right:5vw;"></div>
    <div class="pattern" style="left:10vw; bottom:20vh;"></div>
    <div class="pattern" style="right:15vw; top:30vh;"></div>
    <div class="pattern" style="left:25vw; bottom:10vh;"></div>
</div>

<div class="overlay">
    Game Over
</div>

<script>
document.addEventListener("DOMContentLoaded", () => {
    const wall = document.querySelector(".wall");
    let score = 0;
    let bestScore = 0;

    function rollRoller() {
        if (Math.random() < 0.1) {
            score++;
            wall.querySelectorAll(".pattern").forEach((p, i) => {
                p.style.animationName = `roll`;
                setTimeout(() => { 
                    p.style.animationName = ``; 
                    p.style.transform = `translate(${Math.random()*100}vw, ${Math.random()*50}vh)`;
                }, (i === 0 ? 500 : 0));
            });
        } else {
            score = Math.max(score, ++bestScore);
        }
        document.querySelector(".score").textContent = `Score: ${score}`;
        document.querySelector(".score:last-child").textContent = `Best: ${bestScore}`;

        const roll = wall.querySelector(".roll");
        if (Math.random() < 0.02) {
            roll.style.animationName = ``;
            roll.style.transform = `translate(${Math.random()*100}vw, ${Math.random()*50}vh)`;
            setTimeout(() => { 
                roll.style.animationName = `roll`; 
                roll.style.transform = `translate(0, 50%)`; 
            }, 600);
        }
    }

    setInterval(() => {
        const obstacles = Array.from(wall.querySelectorAll(".obstacle")).filter(o => !o.classList.contains("collected"));
        if (obs) {
            obs.forEach((o, i) => o.style.transform = `translate(${Math.random()*50}vw, ${Math.random()*20}vh)`);
            setTimeout(() => { 
                obs.forEach(o => o.classList.add("collected")); 
                wall.querySelector(".obstacle:last-child").remove();
            }, (i === 0 ? 500 : 0));
        }
        if (!obs.length && score >= bestScore) rollRoller();
    }, 150);

    wall.addEventListener("click", (e) => {
        if (e.target.matches(".pattern")) e.target.style.display = "none";
        else if (e.target.matches(".roll") || e.target.matches(".obstacle")) return;
        const obs = Array.from(wall.querySelectorAll(".obstacle")).filter(o => !o.classList.contains("collected"));
        if (obs.length && score >= bestScore) {
            obs[0].classList.add("collected");
            setTimeout(() => { 
                obs.forEach((o, i) => o.style.transform = `translate(${Math.random()*50}vw, ${Math.random()*20}vh)`);
                wall.querySelector(".obstacle:last-child").remove();
            }, 100);
        }
    });

    wall.addEventListener("gameover", () => {
        document.querySelector(".overlay").classList.add("visible");
    });
});
</script>
</body>
</html>