Win11 Native Like Clock&Weather #5

sametcn99 · 2026-02-27T11:14:21Z

sametcn99
Feb 27, 2026
Maintainer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Windows 11 Widget</title>
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Segoe+UI:wght@300;400;500;600;700&display=swap');

    /* ─── Reset & Base ─── */
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg-primary:       #1c1c1e;
      --bg-card:          rgba(36, 36, 40, 0.92);
      --bg-card-hover:    rgba(44, 44, 50, 0.96);
      --bg-inner:         rgba(255, 255, 255, 0.05);
      --bg-inner-hover:   rgba(255, 255, 255, 0.08);
      --border:           rgba(255, 255, 255, 0.08);
      --border-bright:    rgba(255, 255, 255, 0.14);
      --accent:           #60a5fa;
      --accent-dim:       rgba(96, 165, 250, 0.18);
      --accent-glow:      rgba(96, 165, 250, 0.08);
      --text-primary:     rgba(255, 255, 255, 0.94);
      --text-secondary:   rgba(255, 255, 255, 0.55);
      --text-tertiary:    rgba(255, 255, 255, 0.32);
      --shadow:           0 8px 32px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.3);
      --radius-lg:        18px;
      --radius-md:        12px;
      --radius-sm:        8px;
      --font:             'Segoe UI', system-ui, -apple-system, sans-serif;
    }

    html, body {
      height: 100%;
      background: transparent;
      font-family: var(--font);
      -webkit-font-smoothing: antialiased;
      color: var(--text-primary);
    }

    body {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
    }

    /* ─── Widget Card ─── */
    .widget {
      width: 340px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: var(--radius-lg);
      overflow: hidden;
      transition: background 0.3s ease, box-shadow 0.3s ease;
      user-select: none;
    }

    /* ─── Top accent line ─── */
    .widget::before {
      content: '';
      display: block;
      height: 1px;
      background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.18) 30%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0.18) 70%,
        transparent 100%);
    }

    /* ─── Clock Section ─── */
    .clock-section {
      padding: 24px 24px 16px;
      position: relative;
    }

    .date-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }

    .clock-time {
      font-size: 56px;
      font-weight: 200;
      letter-spacing: -2px;
      line-height: 1;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
      transition: opacity 0.15s ease;
    }

    .clock-time .colon {
      display: inline-block;
      animation: blink 1s step-end infinite;
      color: var(--accent);
      margin: 0 1px;
    }

    .clock-seconds {
      font-size: 22px;
      font-weight: 300;
      color: var(--text-secondary);
      margin-left: 4px;
      vertical-align: baseline;
      position: relative;
      top: -4px;
    }

    .clock-date {
      font-size: 14px;
      font-weight: 400;
      color: var(--text-secondary);
      margin-top: 8px;
      letter-spacing: 0.01em;
    }

    .clock-ampm {
      font-size: 13px;
      font-weight: 500;
      color: var(--accent);
      margin-left: 6px;
      letter-spacing: 0.06em;
    }

    /* ─── Divider ─── */
    .divider {
      height: 1px;
      background: var(--border);
      margin: 0 16px;
    }

    /* ─── Weather Section ─── */
    .weather-section {
      padding: 16px 24px 20px;
    }

    .weather-location {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-secondary);
      margin-bottom: 12px;
    }

    .weather-location svg {
      flex-shrink: 0;
    }

    /* Main weather row */
    .weather-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }

    .weather-left {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .weather-icon-wrap {
      width: 64px;
      height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--accent-dim);
      border-radius: var(--radius-md);
      border: 1px solid rgba(96,165,250,0.22);
      flex-shrink: 0;
      position: relative;
      overflow: hidden;
    }

    .weather-icon-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 30% 30%, rgba(96,165,250,0.1), transparent 60%);
    }

    .weather-icon {
      font-size: 36px;
      line-height: 1;
      position: relative;
      z-index: 1;
      transition: transform 0.4s ease;
    }

    .weather-icon-wrap:hover .weather-icon {
      transform: scale(1.12);
    }

    .weather-temp-wrap {}

    .weather-temp {
      font-size: 38px;
      font-weight: 300;
      line-height: 1;
      color: var(--text-primary);
      font-variant-numeric: tabular-nums;
    }

    .weather-temp sup {
      font-size: 16px;
      font-weight: 400;
      vertical-align: super;
      color: var(--text-secondary);
      margin-left: 2px;
    }

    .weather-desc {
      font-size: 13px;
      font-weight: 400;
      color: var(--text-secondary);
      margin-top: 4px;
    }

    /* Stats chips */
    .weather-stats {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 6px;
    }

    .stat-chip {
      display: flex;
      align-items: center;
      gap: 5px;
      background: var(--bg-inner);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 4px 10px;
      font-size: 12px;
      color: var(--text-secondary);
      white-space: nowrap;
      transition: background 0.2s;
    }

    .stat-chip:hover {
      background: var(--bg-inner-hover);
    }

    .stat-chip svg {
      flex-shrink: 0;
    }

    /* ─── Forecast Strip ─── */
    .forecast-strip {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 6px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }

    .forecast-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      background: var(--bg-inner);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 4px;
      transition: background 0.2s, border-color 0.2s;
      cursor: default;
    }

    .forecast-item:hover {
      background: var(--bg-inner-hover);
      border-color: var(--border-bright);
    }

    .forecast-item.today {
      background: var(--accent-glow);
      border-color: rgba(96,165,250,0.2);
    }

    .forecast-day {
      font-size: 10px;
      font-weight: 600;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }

    .forecast-item.today .forecast-day {
      color: var(--accent);
    }

    .forecast-emoji {
      font-size: 18px;
      line-height: 1;
    }

    .forecast-hi {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .forecast-lo {
      font-size: 11px;
      color: var(--text-tertiary);
    }

    /* ─── Footer ─── */
    .widget-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px;
      border-top: 1px solid var(--border);
      background: rgba(0,0,0,0.12);
    }

    .footer-updated {
      font-size: 10px;
      color: var(--text-tertiary);
      letter-spacing: 0.03em;
    }

    .refresh-btn {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 10px;
      font-weight: 500;
      color: var(--text-tertiary);
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px 8px;
      border-radius: 6px;
      font-family: var(--font);
      transition: color 0.2s, background 0.2s;
    }

    .refresh-btn:hover {
      color: var(--accent);
      background: var(--accent-dim);
    }

    .refresh-btn svg {
      transition: transform 0.4s ease;
    }

    .refresh-btn:hover svg {
      transform: rotate(180deg);
    }

    /* ─── Loading / Error states ─── */
    .weather-loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100px;
      gap: 10px;
      color: var(--text-secondary);
      font-size: 13px;
    }

    .spinner {
      width: 18px;
      height: 18px;
      border: 2px solid var(--border);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    .weather-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100px;
      gap: 6px;
      color: var(--text-secondary);
      font-size: 12px;
      text-align: center;
    }

    /* ─── Animations ─── */
    @keyframes blink {
      0%, 100% { opacity: 1; }
      50%       { opacity: 0.25; }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .anim-in {
      animation: fadeIn 0.35s ease forwards;
    }

    /* ─── Responsive ─── */
    @media (max-width: 360px) {
      .widget { width: 100%; min-width: 280px; }
      .clock-time { font-size: 44px; }
      .weather-temp { font-size: 30px; }
    }

    @media (min-width: 480px) {
      .widget { width: 380px; }
    }
  </style>
</head>
<body>

<div class="widget" id="widget">

  <!-- ── Clock ── -->
  <section class="clock-section">
    <div class="date-label" id="dayLabel">Loading…</div>
    <div class="clock-time" id="clockTime">
      <span id="hh">00</span><span class="colon">:</span><span id="mm">00</span><span class="clock-seconds" id="ss">00</span><span class="clock-ampm" id="ampm"></span>
    </div>
    <div class="clock-date" id="clockDate">…</div>
  </section>

  <div class="divider"></div>

  <!-- ── Weather ── -->
  <section class="weather-section" id="weatherSection">
    <div class="weather-loading" id="weatherLoading">
      <div class="spinner"></div>
      <span>Fetching weather…</span>
    </div>
    <div id="weatherContent" style="display:none"></div>
  </section>

  <!-- ── Footer ── -->
  <div class="widget-footer">
    <span class="footer-updated" id="footerTime">—</span>
    <button class="refresh-btn" id="refreshBtn" onclick="loadWeather()">
      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/>
        <path d="M21 3v5h-5"/>
        <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/>
        <path d="M8 16H3v5"/>
      </svg>
      Refresh
    </button>
  </div>

</div>

<script>
  /* ──────────────────────────────
     1. CLOCK
  ────────────────────────────── */
  const DAYS   = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
  const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];

  function pad(n) { return String(n).padStart(2, '0'); }

  function updateClock() {
    const now = new Date();
    const h   = now.getHours();
    const m   = now.getMinutes();
    const s   = now.getSeconds();

    document.getElementById('hh').textContent = pad(h);
    document.getElementById('mm').textContent = pad(m);
    document.getElementById('ss').textContent = pad(s);
    document.getElementById('ampm').textContent = h < 12 ? 'AM' : 'PM';

    document.getElementById('dayLabel').textContent  = DAYS[now.getDay()];
    document.getElementById('clockDate').textContent =
      `${now.getDate()} ${MONTHS[now.getMonth()]} ${now.getFullYear()}`;
  }

  updateClock();
  setInterval(updateClock, 1000);

  /* ──────────────────────────────
     2. WEATHER CODES → ICON + DESC
  ────────────────────────────── */
  function weatherInfo(code, isDay) {
    const d = isDay !== 0;
    const map = {
      0:  { icon: d ? '☀️' : '🌙',  desc: 'Clear sky'            },
      1:  { icon: d ? '🌤️' : '🌙',  desc: 'Mainly clear'         },
      2:  { icon: '⛅',              desc: 'Partly cloudy'         },
      3:  { icon: '☁️',              desc: 'Overcast'              },
      45: { icon: '🌫️',              desc: 'Foggy'                 },
      48: { icon: '🌫️',              desc: 'Freezing fog'          },
      51: { icon: '🌦️',              desc: 'Light drizzle'         },
      53: { icon: '🌦️',              desc: 'Drizzle'               },
      55: { icon: '🌧️',              desc: 'Dense drizzle'         },
      61: { icon: '🌧️',              desc: 'Light rain'            },
      63: { icon: '🌧️',              desc: 'Rain'                  },
      65: { icon: '🌧️',              desc: 'Heavy rain'            },
      66: { icon: '🌨️',              desc: 'Freezing rain'         },
      67: { icon: '🌨️',              desc: 'Heavy freezing rain'   },
      71: { icon: '🌨️',              desc: 'Light snow'            },
      73: { icon: '❄️',              desc: 'Snow'                  },
      75: { icon: '❄️',              desc: 'Heavy snow'            },
      77: { icon: '🌨️',              desc: 'Snow grains'           },
      80: { icon: '🌦️',              desc: 'Light showers'         },
      81: { icon: '🌧️',              desc: 'Showers'               },
      82: { icon: '⛈️',              desc: 'Violent showers'       },
      85: { icon: '🌨️',              desc: 'Snow showers'          },
      86: { icon: '🌨️',              desc: 'Heavy snow showers'    },
      95: { icon: '⛈️',              desc: 'Thunderstorm'          },
      96: { icon: '⛈️',              desc: 'Thunderstorm w/ hail'  },
      99: { icon: '⛈️',              desc: 'Heavy hail storm'      },
    };
    return map[code] || { icon: '🌡️', desc: 'Unknown' };
  }

  function forecastDayName(dateStr) {
    const d  = new Date(dateStr);
    const today = new Date();
    if (d.toDateString() === today.toDateString()) return 'Today';
    return DAYS[d.getDay()].slice(0, 3);
  }

  /* ──────────────────────────────
     3. REVERSE GEOCODING (city)
  ────────────────────────────── */
  async function getCity(lat, lon) {
    try {
      const r = await fetch(
        `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lon}&format=json`,
        { headers: { 'Accept-Language': 'en' } }
      );
      const d = await r.json();
      return d.address?.city || d.address?.town || d.address?.village || d.address?.county || 'Unknown';
    } catch { return 'Your Location'; }
  }

  /* ──────────────────────────────
     4. WEATHER FETCH
  ────────────────────────────── */
  let lastLat = null, lastLon = null, cityName = 'Locating…';

  async function loadWeather() {
    const section  = document.getElementById('weatherContent');
    const loading  = document.getElementById('weatherLoading');
    section.style.display  = 'none';
    loading.style.display  = 'flex';

    try {
      // Get location
      const pos = await new Promise((res, rej) =>
        navigator.geolocation.getCurrentPosition(res, rej, { timeout: 8000 })
      );
      const { latitude: lat, longitude: lon } = pos.coords;

      if (lat !== lastLat || lon !== lastLon) {
        lastLat = lat; lastLon = lon;
        cityName = await getCity(lat, lon);
      }

      // Fetch weather
      const url = [
        'https://api.open-meteo.com/v1/forecast',
        `?latitude=${lat}&longitude=${lon}`,
        '&current=temperature_2m,apparent_temperature,relative_humidity_2m,wind_speed_10m,weather_code,is_day',
        '&daily=weather_code,temperature_2m_max,temperature_2m_min',
        '&timezone=auto&forecast_days=5'
      ].join('');

      const resp = await fetch(url);
      const data = await resp.json();

      const cur  = data.current;
      const daily = data.daily;
      const info  = weatherInfo(cur.weather_code, cur.is_day);

      // Build 5-day forecast
      let forecastHTML = '';
      for (let i = 0; i < 5; i++) {
        const fi   = weatherInfo(daily.weather_code[i], 1);
        const dName = forecastDayName(daily.time[i]);
        const isToday = dName === 'Today';
        forecastHTML += `
          <div class="forecast-item ${isToday ? 'today' : ''}">
            <span class="forecast-day">${dName}</span>
            <span class="forecast-emoji">${fi.icon}</span>
            <span class="forecast-hi">${Math.round(daily.temperature_2m_max[i])}°</span>
            <span class="forecast-lo">${Math.round(daily.temperature_2m_min[i])}°</span>
          </div>`;
      }

      const now = new Date();
      document.getElementById('footerTime').textContent =
        `Updated: ${pad(now.getHours())}:${pad(now.getMinutes())}`;

      section.innerHTML = `
        <div class="weather-location anim-in">
          <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/>
          </svg>
          ${cityName}
        </div>

        <div class="weather-main anim-in">
          <div class="weather-left">
            <div class="weather-icon-wrap">
              <span class="weather-icon">${info.icon}</span>
            </div>
            <div class="weather-temp-wrap">
              <div class="weather-temp">${Math.round(cur.temperature_2m)}<sup>°C</sup></div>
              <div class="weather-desc">${info.desc}</div>
            </div>
          </div>

          <div class="weather-stats">
            <div class="stat-chip">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M14 14.76V3.5a2.5 2.5 0 0 0-5 0v11.26a4.5 4.5 0 1 0 5 0z"/>
              </svg>
              Feels like ${Math.round(cur.apparent_temperature)}°
            </div>
            <div class="stat-chip">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2v6m0 0a4 4 0 1 0 4 4H8a4 4 0 0 0 4-4z"/><path d="M12 2c0 0-3 2.5-3 5"/>
              </svg>
              Humidity ${cur.relative_humidity_2m}%
            </div>
            <div class="stat-chip">
              <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                <path d="M17.7 7.7a2.5 2.5 0 1 1 1.8 4.3H2"/><path d="M9.6 4.6A2 2 0 1 1 11 8H2"/><path d="M12.6 19.4A2 2 0 1 0 14 16H2"/>
              </svg>
              ${Math.round(cur.wind_speed_10m)} km/h
            </div>
          </div>
        </div>

        <div class="forecast-strip anim-in">
          ${forecastHTML}
        </div>
      `;

      loading.style.display = 'none';
      section.style.display = 'block';

    } catch (err) {
      console.warn('[Widget] Weather error:', err);
      const msg = err.code === 1
        ? 'Location permission denied.'
        : err.code === 2
          ? 'Location unavailable.'
          : 'Could not load weather.';

      loading.innerHTML = `
        <div class="weather-error">
          <span style="font-size:28px">🌐</span>
          <span>${msg}</span>
          <button class="refresh-btn" onclick="loadWeather()" style="margin-top:4px; color: var(--accent);">
            Try Again
          </button>
        </div>`;
    }
  }

  // Auto-refresh every 10 minutes
  loadWeather();
  setInterval(loadWeather, 10 * 60 * 1000);
</script>
</body>
</html>

sametcn99 · 2026-02-27T11:18:54Z

sametcn99
Feb 27, 2026
Maintainer Author

https://www.reddit.com/r/HTWind/comments/1rg3zp8/win11_native_like_clockweather/

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Win11 Native Like Clock&Weather #5

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Win11 Native Like Clock&Weather #5

Uh oh!

sametcn99 Feb 27, 2026 Maintainer

Replies: 1 comment

Uh oh!

sametcn99 Feb 27, 2026 Maintainer Author

sametcn99
Feb 27, 2026
Maintainer

sametcn99
Feb 27, 2026
Maintainer Author