meteo-fe/src/app/components/home/home.html

<div class="weather-app">
  <!-- Menú hamburguesa -->
  <div class="menu-button" (click)="toggleMenu()">
    <span></span>
    <span></span>
    <span></span>
  </div>

  <!-- Panel del menú deslizante -->
  <div class="menu-panel" [class.open]="menuOpen()">
    <div class="menu-overlay" (click)="closeMenu()"></div>
    
    <div class="menu-content">
      <div class="menu-header">
        <h2>Menú</h2>
        <button class="close-button" (click)="closeMenu()">✕</button>
      </div>
      
      <!-- Última actualización -->
      @if (getLastUpdateDate()) {
        <div class="menu-item last-update">
          <span class="label">Última actualització:</span>
          <span class="value">{{ getLastUpdateDate() }}</span>
        </div>
      }
      
      <!-- Botón de actualizar -->
      <button class="menu-action" (click)="refresh(); closeMenu()">
        🔄 Actualitzar dades
      </button>
      
      <!-- Buscador de población -->
      <div class="menu-item search-section">
        <label for="search-municipi">Cerca una població:</label>
        <input 
          type="text" 
          id="search-municipi"
          placeholder="Escriu el nom..."
          [value]="searchQuery()"
          (input)="onSearchInput($event)"
          class="search-input"
        />
        
        @if (searching()) {
          <div class="search-loading">Cercant...</div>
        }
        
        @if (searchResults().length > 0) {
          <div class="search-results">
            @for (result of searchResults(); track result.codi) {
              <div class="search-result" (click)="selectMunicipi(result)">
                <span class="result-name">{{ result.nom }}</span>
                @if (result.latitud && result.longitud) {
                  <span class="result-coords">{{ result.latitud.toFixed(2) }}, {{ result.longitud.toFixed(2) }}</span>
                }
              </div>
            }
          </div>
        }
        
        @if (searchQuery().length >= 2 && searchResults().length === 0 && !searching()) {
          <div class="no-results">No s'han trobat resultats</div>
        }
      </div>
      
      <!-- Botón de ubicación GPS -->
      <button class="menu-action secondary" (click)="requestLocation(); closeMenu()">
        📍 Usar la meva ubicació
      </button>
      
      <!-- Botón de mapa de estaciones -->
      <button class="menu-action secondary" (click)="openMap(); closeMenu()">
        🗺️ Mapa d'estacions
      </button>
    </div>
  </div>
  
  <!-- Modal GPS -->
  @if (showGpsModal()) {
    <div class="modal-overlay" (click)="rejectGpsModal()">
      <div class="modal-content" (click)="$event.stopPropagation()">
        <div class="modal-icon">📍</div>
        <h2>Ubicació GPS</h2>
        <p>Vols que l'aplicació utilitzi la teva ubicació per mostrar el temps de la teva zona?</p>
        <div class="modal-actions">
          <button class="modal-button secondary" (click)="rejectGpsModal()">
            No, gràcies
          </button>
          <button class="modal-button primary" (click)="acceptGpsModal()">
            Sí, activar GPS
          </button>
        </div>
      </div>
    </div>
  }
  
  @if (gettingLocation()) {
    <div class="loading">
      <div class="spinner"></div>
      <p>📍 Obtenint la teva ubicació...</p>
    </div>
  }
  
  @if (locationDenied() && !loading() && !gpsPermissionAsked()) {
    <div class="location-denied">
      <p>⚠️ Permisos d'ubicació denegats. Mostrant el temps de Lliçà d'Amunt.</p>
      <button class="location-button" (click)="requestLocation()">
        📍 Activar ubicació GPS
      </button>
    </div>
  }
  
  @if (loading() && !gettingLocation()) {
    <div class="loading">
      <div class="spinner"></div>
      <p>Carregant informació meteorològica...</p>
    </div>
  }
  
  @if (error()) {
    <div class="error">
      <p>{{ error() }}</p>
      <button (click)="refresh()">Tornar a intentar</button>
    </div>
  }
  
  @if (!loading() && !error()) {
    <div class="weather-container">
      <!-- Header con ubicación y temperatura actual -->
      <div class="header">
        <div class="location">
          <h1>{{ municipi()?.nom }}</h1>
          @if (estacioInfo() && estacioInfo()!.estacio) {
            <p class="station-info">
              Estació: {{ estacioInfo()!.estacio.nom }} 
              <span class="distance">({{ estacioInfo()!.distancia }} km)</span>
            </p>
          }
        </div>
        
        @if (getCurrentTemperature() !== null) {
          <div class="current-temp">
            <span class="temperature">{{ getCurrentTemperature()?.toFixed(1) }}°</span>
          </div>
        }
        
        @if (getTodayMinMax()) {
          <div class="min-max">
            <span>Màx: {{ getTodayMinMax()?.max?.toFixed(1) }}°</span>
            <span>Mín: {{ getTodayMinMax()?.min?.toFixed(1) }}°</span>
          </div>
        }
      </div>

      <!-- Predicción horaria (scroll horizontal) -->
      @if (prediccioHoraria().length > 0) {
        <div class="section">
          <h2>Previsió horària (48 hores)</h2>
          <app-prediccio-horaria [prediccions]="prediccioHoraria()" />
        </div>
      }

      <!-- Predicción diaria (8 días) -->
      @if (prediccioDiaria().length > 0) {
        <div class="section">
          <h2>Previsió 8 dies</h2>
          <app-prediccio-diaria [prediccions]="prediccioDiaria()" />
        </div>
      }
    </div>
  }
</div>