Xing4.0 29B A4B (free)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Cards</title>
<style>
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  background: #0a0e27;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 960px;
  width: 100%;
}

@media (max-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; gap: 16px; }
}

.card {
  border-radius: 20px;
  padding: 32px 24px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.4s ease;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}

/* ===== Shared ===== */
.weather-name {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.description {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 12px;
  min-height: 42px;
}

.city-name {
  font-size: 18px;
  font-weight: 600;
  margin-top: 8px;
}

.temperature {
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -2px;
  margin-bottom: 12px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.forecast {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.day-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
}

.hint-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e27;
  transition: opacity 0.5s ease;
}

.hint-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.hint-overlay h1 {
  color: #fff;
  font-size: 2rem;
  margin-bottom: 16px;
}

.blink {
  color: #7ec8e3;
  font-size: 1.1rem;
  animation: blink 1.5s ease-in-out infinite;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ===== Start screen handled by focus/pointer on document ===== */
/* Since we can't use JS, we use :focus on a sentinel element */
.start-sentinel {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

/* We trigger hide via :focus-within on body when any interactive element is focused */
/* Actually, let's just make the cards themselves focusable and hide overlay on focus */
.card { outline: none; }
.card:focus { outline: none; }
/* Use :focus-visible on the whole document won't work without JS... */
/* Alternative: Make a transparent keycap area that captures focus */

/* Simplest CSS-only approach: the overlay itself becomes unfocusable, 
   but we use :focus-within on body which requires an element inside it.
   Instead, put a tabindex=-1 div inside overlay that focuses on mousemove/click. */
/* This needs JS... so alternative: don't use an overlay. Just show cards always.
   But requirement says keyboard events only after clicking. 
   Let's use a different approach: hide overlay after any element receives focus via :focus-within on container. */

/* Actually: The simplest way is no overlay at all, but then keyboard works from load.
   Requirement: "The iframe only receives keyboard events after the user clicks it"
   So we DO need the gate. Let's use :focus-within on a wrapper that contains a focusable element. */

.gate {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0e27;
}

.gate.hidden {
  display: none;
}

.gate .msg { text-align: center; }
.gate h1 { color: #fff; font-size: 2rem; margin-bottom: 16px; }
.gate p { color: #7ec8e3; font-size: 1.1rem; }

.gate .trap {
  position: absolute;
  inset: 0;
  cursor: pointer;
}

/* Clicking anywhere hides gate (via :focus-within if trap is focusable) */
/* But we also want click to work. We can make the whole gate clickable: */
/* Without JS, we can use :checked on a checkbox or :target. 
   Simplest: a checkbox + label pattern. */

input[type="checkbox"] { display: none; }

.gate input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.gate label {
  display: block;
  cursor: pointer;
  color: #fff;
  font-size: 1.1rem;
  user-select: none;
}

/* When checked, hide gate */
#gateCheck:checked ~ .gate {
  display: none;
}

/* Also hide on click of label (which triggers focus on input) */
.gate:has(input[type="checkbox"]:checked) {
  display: none;
}

/* ===== SUNNY ===== */
.sunny-bg { background: linear-gradient(135deg, #f6d365 0%, #fda085 50%, #fbc2eb 100%); }

.sun-sun {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 16px;
}

.sun-core {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff700 30%, #ffdd00 60%, #ffaa00 100%);
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  box-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,170,0,0.5);
  animation: sunPulse 3s ease-in-out infinite;
}

@keyframes sunPulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 30px rgba(255,215,0,0.8), 0 0 60px rgba(255,170,0,0.5); }
  50% { transform: translateX(-50%) scale(1.12); box-shadow: 0 0 45px rgba(255,215,0,1), 0 0 90px rgba(255,170,0,0.7); }
}

.sun-ray {
  position: absolute;
  width: 5px;
  height: 28px;
  background: linear-gradient(to top, #ffcc00, #ff9500);
  border-radius: 3px;
  top: 22px;
  left: 50%;
  transform-origin: bottom center;
}

.sun-ray:nth-child(2) { transform: translateX(-50%) rotate(0deg); }
.sun-ray:nth-child(3) { transform: translateX(-50%) rotate(45deg); }
.sun-ray:nth-child(4) { transform: translateX(-50%) rotate(90deg); }
.sun-ray:nth-child(5) { transform: translateX(-50%) rotate(135deg); }
.sun-ray:nth-child(6) { transform: translateX(-50%) rotate(180deg); }
.sun-ray:nth-child(7) { transform: translateX(-50%) rotate(225deg); }
.sun-ray:nth-child(8) { transform: translateX(-50%) rotate(270deg); }
.sun-ray:nth-child(9) { transform: translateX(-50%) rotate(315deg); }

/* ===== RAINY ===== */
.rainy-bg { background: linear-gradient(135deg, #3a1c71 0%, #5b2c6f 40%, #8e44ad 100%); }

.cloud-shape {
  position: relative;
  width: 90px;
  height: 36px;
  margin-bottom: 10px;
}

.cloud-shape::before,
.cloud-shape::after {
  content: '';
  position: absolute;
  background: #eef0f5;
  border-radius: 50%;
}

.cloud-shape::before {
  top: -18px;
  left: 12px;
  width: 42px;
  height: 42px;
}

.cloud-shape::after {
  top: -12px;
  right: 14px;
  width: 36px;
  height: 36px;
}

.rain-drop {
  position: absolute;
  width: 3px;
  height: 14px;
  background: linear-gradient(to bottom, transparent, #8ecae6);
  border-radius: 0;
  opacity: 0.85;
}

.rain-drop:nth-child(2) { left: 18%; animation: rainFall 1.3s linear infinite; animation-delay: 0s; }
.rain-drop:nth-child(3) { left: 38%; animation: rainFall 1.6s linear infinite; animation-delay: 0.3s; }
.rain-drop:nth-child(4) { left: 58%; animation: rainFall 1.1s linear infinite; animation-delay: 0.6s; }
.rain-drop:nth-child(5) { left: 72%; animation: rainFall 1.4s linear infinite; animation-delay: 0.15s; }
.rain-drop:nth-child(6) { left: 82%; animation: rainFall 1.7s linear infinite; animation-delay: 0.45s; }

@keyframes rainFall {
  0% { top: 90px; opacity: 0; }
  10% { opacity: 0.85; }
  90% { opacity: 0.85; }
  100% { top: 230px; opacity: 0; }
}

/* ===== SNOWY ===== */
.snowy-bg { background: linear-gradient(135deg, #6e8ec6 0%, #a8c4d4 50%, #d4e6f5 100%); }

.snow-flake {
  position: absolute;
  font-size: 16px;
  color: #fff;
  text-shadow: 0 0 4px rgba(255,255,255,0.8);
  opacity: 0.9;
}

.snow-flake:nth-child(1) { left: 12%; top: 15px; font-size: 20px; animation: snowDrift 4s linear infinite; animation-delay: 0s; }
.snow-flake:nth-child(2) { left: 32%; top: 65px; font-size: 14px; animation: snowDrift 5s linear infinite; animation-delay: 0.8s; color: #e8f4fd; }
.snow-flake:nth-child(3) { left: 52%; top: 25px; font-size: 22px; animation: snowDrift 4.5s linear infinite; animation-delay: 1.5s; }
.snow-flake:nth-child(4) { left: 70%; top: 85px; font-size: 16px; animation: snowDrift 6s linear infinite; animation-delay: 0.3s; color: #b8d4e8; }
.snow-flake:nth-child(5) { left: 82%; top: 20px; font-size: 18px; animation: snowDrift 3.5s linear infinite; animation-delay: 2.2s; }
.snow-flake:nth-child(6) { left: 22%; top: 100px; font-size: 12px; animation: snowDrift 5.5s linear infinite; animation-delay: 1.2s; color: #fff; }
.snow-flake:nth-child(7) { left: 45%; top: 50px; font-size: 16px; animation: snowDrift 4s linear infinite; animation-delay: 0.5s; }
.snow-flake:nth-child(8) { left: 62%; top: 120px; font-size: 14px; animation: snowDrift 5s linear infinite; animation-delay: 1.8s; color: #d0e4f0; }

@keyframes snowDrift {
  0% { top: 10px; opacity: 0; }
  10% { opacity: 0.9; }
  90% { opacity: 0.9; }
  100% { top: 210px; opacity: 0; }
}

.ski-marker {
  position: absolute;
  bottom: 30px;
  font-size: 28px;
  opacity: 0.7;
  z-index: 1;
}

.ski-marker:nth-child(9) { left: 8px; animation: skiScoot 3s linear infinite; animation-delay: 0s; }
.ski-marker:nth-child(10) { left: 65%; animation: skiScoot 2.5s linear infinite; animation-delay: 1s; }
.ski-marker:nth-child(11) { left: 30%; animation: skiScoot 3.2s linear infinite; animation-delay: 0.5s; }

@keyframes skiScoot {
  0% { left: 2px; }
  50% { left: calc(100% - 30px); }
  100% { left: 2px; }
}

/* ===== STORMY ===== */
.stormy-bg { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%); }

.lightning-bolt {
  position: relative;
  width: 32px;
  height: 36px;
  margin-top: 28px;
  animation: boltFlash 2.5s ease-in-out infinite;
}

.lightning-bolt::before {
  content: '▲';
  position: absolute;
  top: 0;
  left: 6px;
  color: #fff;
  font-size: 30px;
  text-shadow: 0 0 12px rgba(255,255,255,1);
  animation: boltFlashInner 2.5s ease-in-out infinite;
}

.lightning-bolt::after {
  content: '▼';
  position: absolute;
  top: 26px;
  left: 4px;
  color: #cce0ff;
  font-size: 18px;
  text-shadow: 0 0 6px rgba(255,255,255,0.6);
  animation: boltRecede 2s linear infinite;
}

@keyframes boltFlash {
  0%, 100% { opacity: 0; transform: scaleY(0.3); }
  15%, 85% { opacity: 1; transform: scaleY(1); }
}

@keyframes boltFlashInner {
  0%, 100% { opacity: 0; filter: brightness(0); }
  30%, 60% { opacity: 1; filter: brightness(1); }
}

@keyframes boltRecede {
  0% { opacity: 1; }
  100% { opacity: 0.3; }
}

.storm-glow {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.storm-glow.active {
  animation: stormGlow 5s ease-in-out infinite;
}

@keyframes stormGlow {
  0%, 100% { opacity: 0; }
  7%, 9% { opacity: 0.5; }
  12%, 13% { opacity: 0; }
}

/* ===== prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .sun-core { animation: none; }
  .rain-drop { animation: none; }
  .snow-flake { animation: none; }
  .lightning-bolt { animation: none; }
  .storm-glow.active { animation: none; }
  .ski-marker { animation: none; }
  .blink { animation: none; }
}

/* ===== Keyboard gate: the gate contains a focusable element so :focus-within works ===== */
/* We need: gate visible until user clicks or tabs into the page.
   Using a hidden checkbox+label inside the gate: clicking the label checks the box,
   which via CSS hides the gate. Tabbing to the label also checks it. */
/* Also handle mousedown on document to check it. Without JS that's hard...
   Actually :focus-within on the gate will fire when focus moves into the gate
   (from tabbing). For click, we can rely on the label being clicked.
   To make ANY click work, we add :focus on the label. A label with cursor:pointer
   will receive focus when clicked in some browsers... not reliably.
   
   Better approach: Make the overlay div itself clickable via a checkbox trick.
   Put a hidden checkbox, and label covers the entire overlay. Clicking anywhere
   on the overlay hits the label → checkbox checked → gate hidden. */
</style>
</head>
<body>

<div class="gate" id="gate">
  <label for="gateCheck" class="gate-label"></label>
</div>

<input type="checkbox" id="gateCheck" onclick="this.checked=true" onchange="this.checked=true">

<div class="grid">

  <!-- Sunny -->
  <div class="card sunny-bg">
    <div class="sun-sun">
      <div class="sun-core"></div>
      <div class="sun-ray"></div>
      <div class="sun-ray"></div>
      <div class="sun-ray"></div>
      <div class="sun-ray"></div>
      <div class="sun-ray"></div>
      <div class="sun-ray"></div>
      <div class="sun-ray"></div>
      <div class="sun-ray"></div>
    </div>
    <div class="weather-name">Sunny</div>
    <div class="description">Clear skies throughout the day. Warm temperatures with low humidity.</div>
    <div class="city-name">Miami</div>
    <div class="temperature">28°C</div>
    <div class="forecast"><div class="day-dot"></div><div class="day-dot"></div><div class="day-dot"></div></div>
  </div>

  <!-- Rainy -->
  <div class="card rainy-bg">
    <div class="cloud-shape"></div>
    <div class="rain-drop"></div>
    <div class="rain-drop"></div>
    <div class="rain-drop"></div>
    <div class="rain-drop"></div>
    <div class="rain-drop"></div>
    <div class="rain-drop"></div>
    <div class="weather-name">Rainy</div>
    <div class="description">Light showers expected. Bring an umbrella for the afternoon commute.</div>
    <div class="city-name">Austin</div>
    <div class="temperature">16°C</div>
    <div class="forecast"><div class="day-dot"></div><div class="day-dot"></div><div class="day-dot"></div></div>
  </div>

  <!-- Snowy -->
  <div class="card snowy-bg">
    <div class="ski-marker">⛷️</div>
    <div class="snow-flake">❄</div>
    <div class="snow-flake">❄</div>
    <div class="snow-flake">❄</div>
    <div class="snow-flake">❄</div>
    <div class="snow-flake">❄</div>
    <div class="snow-flake">❄</div>
    <div class="snow-flake">❄</div>
    <div class="snow-flake">❄</div>
    <div class="weather-name">Snowy</div>
    <div class="description">Snowfall overnight. Temperatures near freezing, perfect for skiing!</div>
    <div class="city-name">Denver</div>
    <div class="temperature">-2°C</div>
    <div class="forecast"><div class="day-dot"></div><div class="day-dot"></div><div class="day-dot"></div></div>
  </div>

  <!-- Stormy -->
  <div class="card stormy-bg">
    <div class="storm-glow active"></div>
    <div class="lightning-bolt"></div>
    <div class="weather-name">Stormy</div>
    <div class="description">Thunderstorms possible this evening. Stay indoors and keep devices charged.</div>
    <div class="city-name">Atlanta</div>
    <div class="temperature">22°C</div>
    <div class="forecast"><div class="day-dot"></div><div class="day-dot"></div><div class="day-dot"></div></div>
  </div>

</div>

</body>
</html>