---
layout: default
title: Weather - Shivering
description: Check current weather conditions and forecasts with beautiful animated weather icons.
app_name: Shivering Weather
theme_color: "#667eea"
---

<link rel="stylesheet" href="/playground/weather/style.css">
<link rel="stylesheet" href="/playground/weather/weather-page.css">

<div class="weather-page">
  <div class="weather-container">
    <a href="/playground/" class="back-link">← Back to Playground</a>

    <h1>Weather</h1>

    <!-- Search Section -->
    <div class="search-section">
      <div class="search-box">
        <input
          type="text"
          id="location-search"
          placeholder="Search for a city or location..."
          autocomplete="off"
        >
        <button id="search-btn" class="search-btn" aria-label="Search">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8"></circle>
            <path d="m21 21-4.35-4.35"></path>
          </svg>
        </button>
      </div>
      <div id="search-results" class="search-results"></div>
    </div>

    <!-- Favorites Section -->
    <div id="favorites-section" class="favorites-section" style="display: none;">
      <h2>Favorite Locations</h2>
      <div id="favorites-grid" class="favorites-grid"></div>
    </div>

    <!-- Current Weather Section -->
    <div id="current-weather" class="current-weather">
      <div class="weather-header">
        <div class="location-info">
          <h2 id="current-location">Loading...</h2>
          <button id="favorite-btn" class="favorite-btn" aria-label="Add to favorites" style="display: none;">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
              <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
          </button>
        </div>
        <div id="current-icon-container" class="current-icon-container"></div>
        <div class="current-temp">
          <span id="current-temp">--°</span>
          <div class="temp-unit-toggle">
            <button id="unit-celsius" class="unit-btn active">°C</button>
            <button id="unit-fahrenheit" class="unit-btn">°F</button>
          </div>
        </div>
        <p id="current-condition">--</p>
      </div>

      <div class="weather-details">
        <div class="detail-item">
          <span class="detail-label">Feels Like</span>
          <span id="feels-like" class="detail-value">--°</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">Humidity</span>
          <span id="humidity" class="detail-value">--%</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">Wind</span>
          <span id="wind" class="detail-value">-- km/h</span>
        </div>
        <div class="detail-item">
          <span class="detail-label">Precipitation</span>
          <span id="precipitation" class="detail-value">-- mm</span>
        </div>
      </div>
    </div>

    <!-- 7-Day Forecast -->
    <div class="forecast-section">
      <h2>7-Day Forecast</h2>
      <div id="forecast-grid" class="forecast-grid"></div>
    </div>

    <!-- Icon Showcase (for demonstration) -->
    <div class="icon-showcase">
      <h2>Weather Icon Gallery</h2>
      <p class="subtitle">Animated weather icons used in forecasts</p>

      <div class="icons-grid">
        <div class="showcase-item">
          <div class="icon sun-shower">
            <div class="cloud"></div>
            <div class="sun">
              <div class="rays"></div>
            </div>
            <div class="rain"></div>
          </div>
          <p>Sun Shower</p>
        </div>

        <div class="showcase-item">
          <div class="icon thunder-storm">
            <div class="cloud"></div>
            <div class="lightning">
              <div class="bolt"></div>
              <div class="bolt"></div>
            </div>
          </div>
          <p>Thunder Storm</p>
        </div>

        <div class="showcase-item">
          <div class="icon cloudy">
            <div class="cloud"></div>
            <div class="cloud"></div>
          </div>
          <p>Cloudy</p>
        </div>

        <div class="showcase-item">
          <div class="icon flurries">
            <div class="cloud"></div>
            <div class="snow">
              <div class="flake"></div>
              <div class="flake"></div>
            </div>
          </div>
          <p>Flurries</p>
        </div>

        <div class="showcase-item">
          <div class="icon">
            <div class="sun">
              <div class="rays"></div>
            </div>
          </div>
          <p>Sunny</p>
        </div>

        <div class="showcase-item">
          <div class="icon rainy">
            <div class="cloud">
              <div class="rain"></div>
            </div>
          </div>
          <p>Rainy</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="/scripts/weather.js"></script>
<script src="/playground/weather/weather-detail.js"></script>