deepseek-v4-flash-0731 @ low · dsh

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather Card</title>
<style>
  :root {
    --bg-1: #0f2027;
    --bg-2: #203a43;
    --bg-3: #2c5364;
    --card-bg: rgba(255, 255, 255, 0.08);
    --card-border: rgba(255, 255, 255, 0.16);
    --text: #f3f7fb;
    --muted: #aebcc9;
    --accent: #7fd4ff;
    --warm: #ffcf7f;
    --shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body { height: 100%; }

  body {
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 32px;
    background: radial-gradient(1200px 800px at 20% 10%, var(--bg-3), transparent 60%),
                radial-gradient(1000px 700px at 85% 90%, #1c4a5c, transparent 55%),
                linear-gradient(135deg, var(--bg-1), var(--bg-2));
    background-attachment: fixed;
  }

  .card {
    width: 560px;
    max-width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 26px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    position: relative;
  }

  .card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 40%);
    pointer-events: none;
    border-radius: 26px;
  }

  .card-inner {
    position: relative;
    padding: 34px 36px 30px;
  }

  .head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px;
  }

  .loc-label { color: var(--muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
  .loc-name { font-size: 26px; font-weight: 700; line-height: 1.15; }

  .date-badge {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
    background: rgba(127, 212, 255, 0.12);
    border: 1px solid rgba(127, 212, 255, 0.28);
    padding: 7px 13px;
    border-radius: 999px;
    white-space: nowrap;
  }

  .temps {
    display: flex;
    align-items: center;
    gap: 34px;
    margin-bottom: 26px;
  }

  .temp-big {
    font-size: 84px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: -2px;
  }
  .temp-big sup { font-size: 34px; font-weight: 400; vertical-align: super; }

  .cond { font-size: 17px; font-weight: 600; color: var(--warm); margin-bottom: 10px; }

  .hi-lo {
    display: flex;
    gap: 18px;
    color: var(--muted);
    font-size: 15px;
  }
  .hi-lo .hi { color: #ff9d8a; font-weight: 600; }
  .hi-lo .lo { color: #8ac8ff; font-weight: 600; }
  .hi-lo .num { color: var(--text); font-weight: 700; }

  .hr-title {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }

  .hourly {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 4px 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) transparent;
  }
  .hourly::-webkit-scrollbar { height: 5px; }
  .hourly::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 4px; }

  .hslot {
    flex: 1 0 52px;
    text-align: center;
    padding: 10px 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .hslot:hover { transform: translateY(-3px); background: rgba(255,255,255,0.10); }
  .hslot .htime { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .hslot .htemp { font-size: 16px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; }
  .hslot .htemp .u { font-size: 10px; font-weight: 500; color: var(--muted); }

  .foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    justify-content: space-between;
    color: var(--muted);
    font-size: 12px;
  }
  .foot .src { letter-spacing: 1px; text-transform: uppercase; }
  .foot .tz { font-variant-numeric: tabular-nums; }

  /* Error + loading states */
  .state {
    text-align: center;
    padding: 44px 20px;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.6;
  }
  .state .emoji { font-size: 40px; display: block; margin-bottom: 14px; }
  .state h2 { color: var(--text); font-size: 19px; margin-bottom: 6px; font-weight: 600; }
  .spinner {
    width: 34px; height: 34px;
    border: 3px solid rgba(255,255,255,0.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: spin 0.9s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
</style>
</head>
<body>
  <div class="card">
    <div class="card-inner" id="content"></div>
  </div>

<script>
(function () {
  "use strict";

  // ---- Condition mapping (WMO weather code) ----
  var CONDITIONS = {
    0: ["Clear sky", "\u2600\ufe0f", "#ffd166"],
    1: ["Mainly clear", "\U0001F31E", "#ffd166"],
    2: ["Partly cloudy", "\u26c5", "#e5c07b"],
    3: ["Overcast", "\u2601\ufe0f", "#b8c0c8"],
    45: ["Fog", "\U0001F32B\ufe0f", "#cfd8dd"],
    48: ["Depositing rime fog", "\U0001F32B\ufe0f", "#cfd8dd"],
    51: ["Light drizzle", "\U0001F327\ufe0f", "#8ac8ff"],
    53: ["Drizzle", "\U0001F327\ufe0f", "#7fb8e8"],
    55: ["Dense drizzle", "\U0001F327\ufe0f", "#6fa8d8"],
    56: ["Freezing drizzle", "\U0001F327\ufe0f", "#6fa8d8"],
    57: ["Dense freezing drizzle", "\U0001F327\ufe0f", "#6fa8d8"],
    61: ["Light rain", "\U0001F327\ufe0f", "#8ac8ff"],
    63: ["Rain", "\U0001F326\ufe0f", "#7fb8e8"],
    65: ["Heavy rain", "\u26c8\ufe0f", "#6fa8d8"],
    66: ["Freezing rain", "\U0001F327\ufe0f", "#6fa8d8"],
    67: ["Heavy freezing rain", "\u26c8\ufe0f", "#6fa8d8"],
    71: ["Light snow", "\U0001F328\ufe0f", "#e8f1f6"],
    73: ["Snow", "\U0001F328\ufe0f", "#dcebf5"],
    75: ["Heavy snow", "\u2744\ufe0f", "#cfe4f0"],
    77: ["Snow grains", "\u2744\ufe0f", "#e8f1f6"],
    80: ["Light showers", "\U0001F327\ufe0f", "#8ac8ff"],
    81: ["Showers", "\U0001F327\ufe0f", "#7fb8e8"],
    82: ["Violent showers", "\u26c8\ufe0f", "#6fa8d8"],
    85: ["Snow showers", "\U0001F328\ufe0f", "#e8f1f6"],
    86: ["Heavy snow showers", "\u2744\ufe0f", "#cfe4f0"],
    95: ["Thunderstorm", "\u26a1", "#f6c86a"],
    96: ["Thunderstorm with hail", "\U0001F329\ufe0f", "#f6c86a"],
    99: ["Thunderstorm with heavy hail", "\U0001F329\ufe0f", "#f6c86a"]
  };

  function condition(code) {
    return CONDITIONS[code] || ["Unknown", "\U0001F300", "#cfd8dd"];
  }

  function esc(s) {
    return String(s).replace(/[&<>"']/g, function (c) {
      return { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  function pad2(n) { return String(n).padStart(2, "0"); }

  function fmtDateUTC(d) {
    return d.getUTCFullYear() + "-" + pad2(d.getUTCMonth() + 1) + "-" + pad2(d.getUTCDate());
  }

  function fmtDateLabel(iso) {
    var p = iso.split("-");
    var d = new Date(Date.UTC(+p[0], +p[1] - 1, +p[2]));
    var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    return days[d.getUTCDay()] + ", " + months[d.getUTCMonth()] + " " + d.getUTCDate();
  }

  function tempDisplay(v) {
    return Math.round(v) + "\u00B0";
  }

  // ---- Read query params ----
  var params = new URLSearchParams(window.location.search);
  var lat = params.has("lat") ? parseFloat(params.get("lat")) : 52.52;
  var lon = params.has("lon") ? parseFloat(params.get("lon")) : 13.405;
  var name = params.has("name") && params.get("name").trim() ? params.get("name").trim() : "Berlin";
  var date = params.has("date") && /^\d{4}-\d{2}-\d{2}$/.test(params.get("date"))
    ? params.get("date")
    : fmtDateUTC(new Date());

  if (isNaN(lat)) lat = 52.52;
  if (isNaN(lon)) lon = 13.405;

  // ---- Decide forecast vs archive ----
  var todayUTC = fmtDateUTC(new Date());
  var isPast = date < todayUTC;
  var path = isPast ? "/api/om/archive" : "/api/om/forecast";

  var q = new URLSearchParams({
    latitude: String(lat),
    longitude: String(lon),
    daily: "temperature_2m_max,temperature_2m_min,weather_code",
    hourly: "temperature_2m",
    timezone: "UTC",
    temperature_unit: "celsius",
    start_date: date,
    end_date: date
  });

  var content = document.getElementById("content");

  function showLoading() {
    content.innerHTML =
      '<div class="state"><div class="spinner"></div><h2>Fetching weather</h2>Loading hourly conditions for this date\u2026</div>';
  }

  function showError(msg) {
    content.innerHTML =
      '<div class="state"><span class="emoji">\u26A0\uFE0F</span><h2>Weather unavailable</h2>' +
      esc(msg || "The weather data could not be loaded right now. Please try again shortly.") + "</div>";
  }

  function showCard(data) {
    var daily = data.daily || {};
    var hourly = data.hourly || {};
    var tMax = daily.temperature_2m_max && daily.temperature_2m_max[0];
    var tMin = daily.temperature_2m_min && daily.temperature_2m_min[0];
    var wCode = daily.weather_code && daily.weather_code[0];
    var times = hourly.time || [];
    var temps = hourly.temperature_2m || [];
    var hours = times.map(function (t, i) { return { h: t, v: temps[i] }; })
                      .filter(function (h) { return h.h && h.h.slice(0, 10) === date; });

    var cond = condition(wCode);
    var dayLabel = fmtDateLabel(date);

    var slots = "";
    if (hours.length) {
      slots = hours.map(function (h) {
        var hh = h.h.slice(11, 13);
        var isNow = isPast ? false : h.h.slice(0, 13) === fmtDateUTC(new Date()) + "T" + hh;
        var val = (typeof h.v === "number" && !isNaN(h.v)) ? tempDisplay(h.v) : "\u2014";
        var bg = isNow ? " style=\"background:rgba(255,255,255,0.13);border-color:rgba(127,212,255,0.4);\"" : "";
        return '<div class="hslot"' + bg + '><div class="htime">' + hh + ":00</div>" +
               '<div class="htemp">' + val + '<span class="u">\u00B0</span></div></div>';
      }).join("");
    } else {
      slots = '<div class="state" style="padding:18px 10px;">No hourly temperature data for this date.</div>';
    }

    var hiLo = "";
    if (typeof tMax === "number" && typeof tMin === "number") {
      hiLo = '<div class="hi-lo">' +
             '<span class="hi">\u2191 High <span class="num">' + tempDisplay(tMax) + "</span></span>" +
             '<span class="lo">\u2193 Low <span class="num">' + tempDisplay(tMin) + "</span></span></div>";
    } else if (typeof tMax === "number") {
      hiLo = '<div class="hi-lo"><span class="hi">\u2191 High <span class="num">' + tempDisplay(tMax) + "</span></span></div>";
    } else if (typeof tMin === "number") {
      hiLo = '<div class="hi-lo"><span class="lo">\u2193 Low <span class="num">' + tempDisplay(tMin) + "</span></span></div>";
    }

    var bigTemp = typeof tMax === "number" ? tempDisplay(tMax) + "<sup>\u00B0</sup>" : "\u2014";

    content.innerHTML =
      '<div class="head">' +
        '<div><div class="loc-label">Location</div><div class="loc-name">' + esc(name) + "</div></div>" +
        '<div class="date-badge">' + dayLabel + "</div>" +
      "</div>" +
      '<div class="temps">' +
        '<div class="temp-big">' + bigTemp + "</div>" +
        "<div>" +
          '<div class="cond">' + cond[1] + " " + esc(cond[0]) + "</div>" +
          hiLo +
        "</div>" +
      "</div>" +
      '<div class="hr-title">Hourly temperatures (\u00B0C, UTC)</div>' +
      '<div class="hourly">' + slots + "</div>" +
      '<div class="foot">' +
        '<span class="src">Open-Meteo</span>' +
        '<span class="tz">' + fmtDateLabel(date) + " \u00B7 " + (isPast ? "archive" : "forecast") + "</span>" +
      "</div>";
  }

  showLoading();

  fetch(path + "?" + q.toString(), { headers: { "Accept": "application/json" } })
    .then(function (res) {
      if (!res.ok) {
        throw new Error("Request failed with status " + res.status);
      }
      return res.json();
    })
    .then(function (json) {
      if (!json || !json.daily) {
        throw new Error("The response did not contain expected weather data.");
      }
      showCard(json);
    })
    .catch(function (err) {
      console.error(err);
      showError();
    });
})();
</script>
</body>
</html>