Halloween Countdown-Uhr-Monster

Im Editor öffnen Veröffentlichen Sie Ihren Code

21 October 2024

Halloween-Matching-Spiel

HTML

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, viewport-fit=cover"
  />
  <meta name="color-scheme" content="dark light" />
  <title>Halloween Countdown Clock Monster</title>
  <meta
    name="description"
    content="A spinning alarm clock-headed creature with a live Halloween countdown, CRT scanlines, fog, and vignette overlays."
  />
</head>
<body>
  
  <header class="hud" aria-live="polite">
     
    <div class="chip" role="status" aria-atomic="true">
      <span class="label">Days left until Halloween:</span>
      <span class="row">
        <time id="localTime" aria-label="Local time" datetime="">--:--:--</time>
        <span class="sep" aria-hidden="true">•</span>
        <time id="toHalloween" aria-label="Time until Halloween" datetime="">--d --:--:--</time>
      </span>
    </div>
  </header>

<main id="app" role="main">
    <section
      class="scene"
      role="img"
      aria-label="Gaunt torso with a spinning alarm clock head, gore, fog, and CRT scanlines."
    >
      
      <div class="stage" aria-label="Clock monster display">
        <svg
          id="clockhead"
          viewBox="0 0 460 520"
          role="group"
          aria-labelledby="svgTitle svgDesc"
        >
          <title id="svgTitle">Alarm clock-headed creature</title>
          <desc id="svgDesc">
            An emaciated torso with an alarm clock for a head. The face spins while hands show the real time.
          </desc>

<filter id="veins" x="-30%" y="-30%" width="160%" height="160%">
              <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" seed="4" result="n1" />
              <feColorMatrix
                in="n1"
                type="matrix"
                values="1 0 0 0 0.35
                        0 0 0 0 0.10
                        0 0 0 0 0.10
                        0 0 0 1 0"
                result="tone"
              />
              <feBlend mode="multiply" in="SourceGraphic" in2="tone" />
            </filter>

<ellipse cx="230" cy="494" rx="120" ry="16" fill="#000" opacity="0.45" />

<g filter="url(#veins)">
            <path
              d="M70,400 L150,330 L230,352 L310,328 L388,395
                 L360,480 L280,470 L230,450 L180,470 L100,480 Z"
              fill="url(#flesh)"
              stroke="#231915"
              stroke-width="2"
            />
            <polygon
              points="198,298 262,298 280,340 180,340"
              fill="url(#flesh)"
              stroke="#231915"
              stroke-width="2"
            />
            
            <g stroke="#3b2a24" stroke-width="6" stroke-linecap="round" opacity="0.9" aria-hidden="true">
              <path d="M160,370 C178,356 184,352 206,350" />
              <path d="M154,390 C174,372 186,366 210,362" />
              <path d="M150,410 C170,392 186,386 214,380" />
            </g>
          </g>

<g class="gore" aria-hidden="true">
            <circle cx="185" cy="342" r="10" fill="url(#blood)" opacity="0.9" />
            <circle cx="272" cy="348" r="8"  fill="url(#blood)" opacity="0.85" />
            <path d="M186,352 C186,374 180,392 176,410" fill="none" stroke="url(#blood)" stroke-width="6" stroke-linecap="round" />
            <path d="M272,356 C272,378 268,396 266,414" fill="none" stroke="url(#blood)" stroke-width="6" stroke-linecap="round" />
            <path d="M228,360 C228,390 226,406 224,426" fill="none" stroke="url(#blood)" stroke-width="7" stroke-linecap="round" />
          </g>

<g id="head" transform="translate(230,250)">
            
            <path d="M-76,-112 C-52,-154 52,-154 76,-112" fill="none" stroke="url(#metal)" stroke-width="12" stroke-linecap="round" />

<g id="bells">
              <ellipse cx="-72" cy="-90" rx="34" ry="24" fill="url(#metal)" stroke="#241913" stroke-width="4" />
              <ellipse cx="72"  cy="-90" rx="34"  ry="24" fill="url(#metal)" stroke="#241913" stroke-width="4" />
            </g>

<g id="faceSpin">
              <circle r="118" fill="url(#metal)" stroke="#241913" stroke-width="7" />
              <circle r="98"  fill="none" stroke="#1b120e" stroke-width="10" />
              <g filter="url(#grime)">
                <circle r="92" fill="url(#paper)" />
                <circle r="92" fill="url(#cracks)" opacity="0.65" />
              </g>
              <g id="ticks"></g>
              <g id="romans"></g>
              <circle r="100" fill="none" stroke="#2e2019" stroke-width="3" stroke-dasharray="6 10" />
            </g>

<g id="hands" stroke="#170d0a" stroke-linecap="round">
              <line id="hHand" x1="0" y1="0" x2="0" y2="-50" stroke-width="7" />
              <line id="mHand" x1="0" y1="0" x2="0" y2="-76" stroke-width="5" />
              <line id="sHand" x1="0" y1="0" x2="0" y2="-86" stroke="#aa3333" stroke-width="2" />
              <circle r="5" fill="#170d0a" />
            </g>
          </g>
        </svg>
      </div>

<div class="fog" aria-hidden="true"></div>
      <div class="redwash" aria-hidden="true"></div>
      <div class="scanlines" aria-hidden="true"></div>
      <div class="vignette" aria-hidden="true"></div>
    </section>
  </main>

CSS

/* ===== CSS Variables ===== */
:root {
    --jx: 0px;
    --jy: 0px;
    --jr: 0deg;
    --bg-red-dark: #1a0508;
    --bg-red-mid: #2d0a0f;
    --bg-red-light: #3d0f15;
    --blood-red: #8b0000;
    --blood-dark: #4a0404;
}

/* ===== Reset & Base ===== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    height: 100%;
    color: #e8e1d7;
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    /* Darker, more ominous base */
    background: 
        /* Blood splatter overlay */
        radial-gradient(ellipse 200px 300px at 15% 20%, 
            rgba(139, 0, 0, 0.3) 0%, 
            transparent 40%),
        radial-gradient(ellipse 150px 200px at 85% 70%, 
            rgba(74, 4, 4, 0.4) 0%, 
            transparent 35%),
        radial-gradient(ellipse 300px 150px at 50% 90%, 
            rgba(139, 0, 0, 0.2) 0%, 
            transparent 30%),
        /* Main gradient */
        radial-gradient(
            ellipse 140% 100% at 50% 50%,
            #1a0508 0%,
            #0d0204 40%,
            #000000 100%
        );
    background-attachment: fixed;
    overflow: hidden;
    position: relative;
    /* Add pixelation to entire page */
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ===== Creepy Background Layer ===== */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Organic noise texture */
        url('data:image/svg+xml,%3Csvg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="6" stitchTiles="stitch"/%3E%3CfeColorMatrix values="0 0 0 0 0.1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
    opacity: 0.4;
    mix-blend-mode: multiply;
    pointer-events: none;
    z-index: 1;
}

/* ===== Animated Blood Drips ===== */
@keyframes blood-drip {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(calc(100vh + 100%));
        opacity: 0;
    }
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Dripping blood effect */
        radial-gradient(ellipse 4px 20px at 10% 0%, var(--blood-dark) 0%, transparent 100%),
        radial-gradient(ellipse 3px 25px at 25% 0%, var(--blood-red) 0%, transparent 100%),
        radial-gradient(ellipse 5px 30px at 40% 0%, var(--blood-dark) 0%, transparent 100%),
        radial-gradient(ellipse 3px 15px at 60% 0%, rgba(139, 0, 0, 0.6) 0%, transparent 100%),
        radial-gradient(ellipse 4px 35px at 75% 0%, var(--blood-dark) 0%, transparent 100%),
        radial-gradient(ellipse 6px 25px at 90% 0%, var(--blood-red) 0%, transparent 100%);
    background-size: 100% 200px;
    background-repeat: repeat-x;
    animation: blood-drip 20s linear infinite;
    pointer-events: none;
    z-index: 2;
    opacity: 0.6;
}

/* ===== Main Scene Container ===== */
.scene {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    isolation: isolate;
    z-index: 3;
}

/* ===== Creepy Floating Eyes ===== */
.scene::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: 
        /* Floating eyes in darkness */
        radial-gradient(ellipse 8px 4px at 20% 30%, 
            rgba(255, 0, 0, 0.6) 0%, 
            rgba(255, 0, 0, 0.3) 30%,
            transparent 50%),
        radial-gradient(ellipse 8px 4px at 22% 30%, 
            rgba(255, 0, 0, 0.6) 0%, 
            rgba(255, 0, 0, 0.3) 30%,
            transparent 50%),
        radial-gradient(ellipse 6px 3px at 70% 60%, 
            rgba(255, 100, 0, 0.4) 0%, 
            transparent 50%),
        radial-gradient(ellipse 6px 3px at 72% 60%, 
            rgba(255, 100, 0, 0.4) 0%, 
            transparent 50%),
        radial-gradient(ellipse 5px 2px at 85% 20%, 
            rgba(200, 0, 0, 0.5) 0%, 
            transparent 40%),
        radial-gradient(ellipse 5px 2px at 87% 20%, 
            rgba(200, 0, 0, 0.5) 0%, 
            transparent 40%);
    animation: eyes-blink 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes eyes-blink {
    0%, 100% {
        opacity: 0.3;
    }
    45% {
        opacity: 0.3;
    }
    50% {
        opacity: 0;
    }
    55% {
        opacity: 0.3;
    }
    90% {
        opacity: 0.3;
    }
    92% {
        opacity: 0;
    }
    94% {
        opacity: 0.3;
    }
}

/* ===== HUD Display ===== */
.hud {
    position: absolute;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.chip {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid rgba(139, 0, 0, 0.3);
    background: linear-gradient(135deg, 
        rgba(15, 13, 12, 0.95), 
        rgba(10, 9, 8, 0.95)
    );
    backdrop-filter: blur(10px);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 0 30px rgba(139, 0, 0, 0.2);
}

.chip-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
}

.chip .sep {
    opacity: 0.4;
    color: #8b7a6a;
}

.countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.countdown-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #998570;
    opacity: 0.8;
    font-weight: 600;
    line-height: 1;
}

#localTime {
    font-size: 14px;
    color: #cdb9a0;
    font-variant-numeric: tabular-nums;
}

#toHalloween {
    font-size: 14px;
    color: #ff9966;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    text-shadow: 0 0 10px rgba(255, 153, 102, 0.3);
}

/* ===== Stage Container ===== */
.stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(var(--jx), var(--jy)) rotate(var(--jr)) scale(1.05);
    transition: transform 80ms steps(2, end);
}

/* ===== BIGGER, PIXELATED, OLD CLOCK ===== */
#clockhead {
    width: min(100vw, 95vh);
    max-width: none;
    height: auto;
    z-index: 5;
    
    /* Pixelation effect */
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    
    /* Multiple filters for old, degraded look */
    filter: 
        /* Heavy shadow */
        drop-shadow(0 40px 100px rgba(0, 0, 0, 1))
        drop-shadow(0 0 50px rgba(139, 0, 0, 0.4))
        /* Contrast and saturation for old look */
        contrast(1.3) 
        saturate(0.7)
        brightness(0.9)
        /* Blur then sharpen for pixel effect */
        blur(0.3px)
        contrast(1.5);
    
    /* Add chromatic aberration */
    animation: 
        shadow-pulse 4s ease-in-out infinite,
        chromatic-shift 0.5s ease-in-out infinite alternate,
        degrade-flicker 0.1s steps(2) infinite;
    
    /* Scale up for bigger appearance */
    transform: scale(1.3);
    transform-origin: center center;
}

/* ===== Pixelation Enhancement via SVG Filter ===== */
.stage::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120%;
    height: 120%;
    transform: translate(-50%, -50%);
    background: 
        /* Pixel grid overlay */
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.15) 2px,
            rgba(0, 0, 0, 0.15) 3px
        ),
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 0, 0, 0.15) 2px,
            rgba(0, 0, 0, 0.15) 3px
        );
    pointer-events: none;
    mix-blend-mode: multiply;
    z-index: 6;
}

/* ===== Old CRT Monitor Effects ===== */
@keyframes chromatic-shift {
    0% {
        text-shadow: 
            -2px 0 rgba(255, 0, 0, 0.5),
            2px 0 rgba(0, 255, 255, 0.5);
    }
    100% {
        text-shadow: 
            2px 0 rgba(255, 0, 0, 0.5),
            -2px 0 rgba(0, 255, 255, 0.5);
    }
}

@keyframes degrade-flicker {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.98;
    }
    100% {
        opacity: 0.96;
    }
}

/* ===== Visual Effects ===== */
.gore {
    filter: drop-shadow(0 8px 16px rgba(120, 0, 0, 0.4));
    image-rendering: pixelated;
}

/* ===== Overlay Container ===== */
.overlays {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ===== Enhanced Fog with Shadows ===== */
.fog {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
    z-index: 20;
    filter: blur(3px);
    background: 
        /* Moving shadows */
        radial-gradient(
            70% 40% at 20% 20%,
            rgba(0, 0, 0, 0.3),
            transparent 60%
        ),
        radial-gradient(
            60% 35% at 80% 30%,
            rgba(139, 0, 0, 0.1),
            transparent 60%
        ),
        radial-gradient(
            90% 50% at 50% 80%,
            rgba(0, 0, 0, 0.2),
            transparent 65%
        );
    mix-blend-mode: multiply;
    animation: fog-drift 40s linear infinite, fog-pulse 8s ease-in-out infinite;
}

@keyframes fog-drift {
    to {
        transform: translate(-5%, -3%) scale(1.1);
    }
}

@keyframes fog-pulse {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
}

/* ===== Heavy Retro Scanlines ===== */
.scanlines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 30;
    mix-blend-mode: overlay;
    background: 
        /* Thicker, more visible scanlines for retro feel */
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            rgba(255, 0, 0, 0.05) 1px,
            rgba(0, 0, 0, 0.1) 2px,
            rgba(0, 0, 0, 0.1) 4px,
            transparent 5px
        );
    animation: 
        crt-flicker 4s steps(60, end) infinite, 
        glitch 10s steps(1) infinite,
        scan-roll 8s linear infinite;
}

@keyframes scan-roll {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 10px;
    }
}

@keyframes glitch {
    92% {
        transform: translateX(0);
    }
    93% {
        transform: translateX(-3px);
        filter: hue-rotate(90deg);
    }
    94% {
        transform: translateX(3px);
    }
    95% {
        transform: translateX(0);
        filter: hue-rotate(0deg);
    }
}

@keyframes crt-flicker {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.4;
    }
    60% {
        opacity: 0.35;
    }
}

/* ===== Enhanced Vignette for Old Screen ===== */
.vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 40;
    background: 
        /* CRT screen curve effect */
        radial-gradient(circle at 0% 0%, rgba(0, 0, 0, 0.9) 0%, transparent 25%),
        radial-gradient(circle at 100% 0%, rgba(0, 0, 0, 0.9) 0%, transparent 25%),
        radial-gradient(circle at 0% 100%, rgba(0, 0, 0, 0.9) 0%, transparent 25%),
        radial-gradient(circle at 100% 100%, rgba(0, 0, 0, 0.9) 0%, transparent 25%),
        /* Main heavy vignette */
        radial-gradient(
            ellipse 110% 90% at 50% 50%,
            transparent 25%,
            rgba(0, 0, 0, 0.4) 45%,
            rgba(0, 0, 0, 0.8) 75%,
            rgba(0, 0, 0, 0.98) 100%
        );
}

/* ===== Screen Burn-in Effect ===== */
.vignette::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        /* Screen burn marks */
        radial-gradient(ellipse 200px 150px at 30% 40%, 
            rgba(100, 50, 0, 0.1) 0%, 
            transparent 50%),
        radial-gradient(ellipse 150px 200px at 70% 60%, 
            rgba(80, 40, 0, 0.08) 0%, 
            transparent 50%),
        /* Screen cracks */
        linear-gradient(105deg, transparent 40%, rgba(0, 0, 0, 0.1) 40.5%, transparent 41%),
        linear-gradient(-15deg, transparent 60%, rgba(139, 0, 0, 0.05) 60.5%, transparent 61%),
        linear-gradient(75deg, transparent 70%, rgba(0, 0, 0, 0.08) 70.5%, transparent 71%);
    opacity: 0.7;
}

/* ===== Bell Animation ===== */
#bells {
    transform-origin: 0 -90px;
}

.ring {
    animation: bell-wobble 240ms ease-in-out;
}

@keyframes bell-wobble {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-12deg);
    }
    50% {
        transform: rotate(12deg);
    }
    75% {
        transform: rotate(-6deg);
    }
}

/* ===== Pulsing Shadow for Clock ===== */
@keyframes shadow-pulse {
    0%, 100% {
        filter: 
            drop-shadow(0 40px 100px rgba(0, 0, 0, 1))
            drop-shadow(0 0 50px rgba(139, 0, 0, 0.4))
            contrast(1.3) 
            saturate(0.7)
            brightness(0.9)
            blur(0.3px)
            contrast(1.5);
    }
    50% {
        filter: 
            drop-shadow(0 45px 110px rgba(0, 0, 0, 1))
            drop-shadow(0 0 70px rgba(139, 0, 0, 0.6))
            contrast(1.4) 
            saturate(0.6)
            brightness(0.85)
            blur(0.4px)
            contrast(1.6);
    }
}

/* ===== Accessibility & Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .stage,
    .fog,
    .scanlines,
    .ring,
    #clockhead,
    body::after,
    .scene::before {
        animation: none !important;
        transition: none !important;
    }
}

/* ===== Responsive Adjustments ===== */
@media (max-width: 768px) {
    .hud {
        top: 20px;
    }
    
    .chip {
        padding: 8px 14px;
    }
    
    .chip-content {
        gap: 10px;
    }
    
    .countdown-label {
        font-size: 8px;
    }
    
    #localTime,
    #toHalloween {
        font-size: 12px;
    }
    
    #clockhead {
        width: 100vw;
        transform: scale(1.1);
    }
}

@media (max-height: 600px) {
    .hud {
        top: 20px;
    }
    
    .chip {
        padding: 6px 12px;
    }
    
    .countdown-label {
        font-size: 8px;
    }
    
    #localTime,
    #toHalloween {
        font-size: 11px;
    }
    
    #clockhead {
        width: 95vw;
        transform: scale(1.0);
    }
}

JS

// === Halloween Time Clock Monster ===
// Enhanced with better error handling and performance optimizations

Halloween-Matching-Spiel

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS