Un código de Metehan

1,652 Metehan

Abrir en el editor Publica tu código

Recomendado

21 July 2025

Portafolio de desarrolladores: web, aplicaciones, diseño - Dawid Wróbel

1 September 2025

Fragmento de código de animación de corazón CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Weather App</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style id="app-style">
    body {
      font-family: 'Inter', sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }
    
    .dark {
      background-color: #121212;
      color: #f5f5f5;
    }
    
    .light {
      background-color: #f5f5f5;
      color: #121212;
    }
    
    .app-container {
      max-width: 420px;
      margin: 0 auto;
      height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
    
    .main-content {
      flex: 1;
      overflow-y: auto;
      padding-bottom: 70px;
    }
    
    .tab-bar {
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 420px;
      height: 60px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-top: 1px solid rgba(128, 128, 128, 0.2);
      z-index: 10;
    }
    
    .tab-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 25%;
      height: 100%;
      opacity: 0.6;
      transition: opacity 0.2s;
    }
    
    .tab-item.active {
      opacity: 1;
    }
    
    .tab-icon {
      font-size: 1.2rem;
      margin-bottom: 4px;
    }
    
    .tab-label {
      font-size: 0.7rem;
      font-weight: 500;
    }
    
    .forecast-day {
      flex: 0 0 auto;
      width: 70px;
      text-align: center;
      padding: 12px 8px;
      border-radius: 12px;
    }
    
    .forecast-day:hover {
      background-color: rgba(128, 128, 128, 0.1);
    }
    
    .weather-icon {
      font-size: 1.8rem;
      margin: 8px 0;
    }
    
    .temp-high {
      font-weight: 600;
    }
    
    .temp-low {
      opacity: 0.7;
      font-size: 0.9rem;
    }
    
    .chat-button {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 56px;
      height: 56px;
      border-radius: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      z-index: 5;
    }
    
    .chart-container {
      height: 200px;
      position: relative;
      margin: 20px 0;
    }
    
    .chatbot-container {
      display: none;
      height: 100%;
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-color: inherit;
      z-index: 20;
      flex-direction: column;
    }
    
    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 16px;
    }
    
    .chat-input-container {
      padding: 12px;
      border-top: 1px solid rgba(128, 128, 128, 0.2);
      display: flex;
    }
    
    .chat-input {
      flex: 1;
      border-radius: 20px;
      padding: 12px 16px;
      outline: none;
    }
    
    .chat-send {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-left: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .settings-option {
      padding: 16px;
      border-bottom: 1px solid rgba(128, 128, 128, 0.2);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .loading-skeleton {
      background: linear-gradient(90deg, rgba(190, 190, 190, 0.2) 25%, rgba(129, 129, 129, 0.24) 37%, rgba(190, 190, 190, 0.2) 63%);
      background-size: 400% 100%;
      animation: skeleton-loading 1.4s ease infinite;
    }
    
    @keyframes skeleton-loading {
      0% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0 50%;
      }
    }
    
    .screen {
      display: none;
      height: 100%;
    }
    
    .screen.active {
      display: block;
    }
    
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 50px;
      height: 24px;
    }
    
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: .4s;
      border-radius: 24px;
    }
    
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 16px;
      width: 16px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .toggle-slider {
      background-color: #3b82f6;
    }
    
    input:checked + .toggle-slider:before {
      transform: translateX(26px);
    }
    
    .message {
      max-width: 80%;
      margin-bottom: 12px;
      padding: 10px 14px;
      border-radius: 18px;
    }
    
    .message-ai {
      background-color: rgba(128, 128, 128, 0.1);
      align-self: flex-start;
      border-bottom-left-radius: 4px;
    }
    
    .message-user {
      background-color: #3b82f6;
      color: white;
      align-self: flex-end;
      border-bottom-right-radius: 4px;
    }
  </style>
</head>
<body class="dark">
  <div class="app-container">
    
    <div id="home-screen" class="screen active">
      <div class="main-content p-4">
        <div class="flex justify-between items-center">
          <div>
            <h2 class="text-xl font-semibold" id="location">Loading location...</h2>
            <p class="text-sm opacity-70">Updated just now</p>
          </div>
          <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
            <i class="fas fa-map-marker-alt text-white"></i>
          </div>
        </div>
        
        <div class="mt-6 flex items-center">
          <div class="mr-4">
            <i class="fas fa-cloud-sun text-5xl text-blue-400"></i>
          </div>
          <div>
            <h1 class="text-5xl font-light" id="current-temp">--°</h1>
            <p class="text-lg" id="weather-condition">Loading weather...</p>
          </div>
        </div>
        
        <div class="mt-6 grid grid-cols-3 gap-4">
          <div class="bg-blue-400 bg-opacity-10 rounded-xl p-3">
            <p class="text-sm opacity-70">Feels like</p>
            <p class="text-lg font-semibold" id="feels-like">--°</p>
          </div>
          <div class="bg-blue-400 bg-opacity-10 rounded-xl p-3">
            <p class="text-sm opacity-70">Humidity</p>
            <p class="text-lg font-semibold" id="humidity">--%</p>
          </div>
          <div class="bg-blue-400 bg-opacity-10 rounded-xl p-3">
            <p class="text-sm opacity-70">Wind</p>
            <p class="text-lg font-semibold" id="wind-speed">-- km/h</p>
          </div>
        </div>
        
        <div class="mt-6">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold">7-Day Forecast</h3>
            <a href="javascript:void(0)" class="text-sm text-blue-500">See more</a>
          </div>
          
          <div class="flex overflow-x-auto space-x-2 pb-2">
            <div class="forecast-day">
              <p class="text-sm font-medium">Today</p>
              <i class="fas fa-sun weather-icon text-yellow-400"></i>
              <p class="temp-high">24°</p>
              <p class="temp-low">18°</p>
            </div>
            <div class="forecast-day">
              <p class="text-sm font-medium">Tue</p>
              <i class="fas fa-cloud weather-icon text-gray-400"></i>
              <p class="temp-high">22°</p>
              <p class="temp-low">17°</p>
            </div>
            <div class="forecast-day">
              <p class="text-sm font-medium">Wed</p>
              <i class="fas fa-cloud-rain weather-icon text-blue-400"></i>
              <p class="temp-high">20°</p>
              <p class="temp-low">16°</p>
            </div>
            <div class="forecast-day">
              <p class="text-sm font-medium">Thu</p>
              <i class="fas fa-cloud-showers-heavy weather-icon text-blue-500"></i>
              <p class="temp-high">19°</p>
              <p class="temp-low">15°</p>
            </div>
            <div class="forecast-day">
              <p class="text-sm font-medium">Fri</p>
              <i class="fas fa-cloud weather-icon text-gray-400"></i>
              <p class="temp-high">21°</p>
              <p class="temp-low">16°</p>
            </div>
            <div class="forecast-day">
              <p class="text-sm font-medium">Sat</p>
              <i class="fas fa-sun weather-icon text-yellow-400"></i>
              <p class="temp-high">23°</p>
              <p class="temp-low">18°</p>
            </div>
            <div class="forecast-day">
              <p class="text-sm font-medium">Sun</p>
              <i class="fas fa-sun weather-icon text-yellow-400"></i>
              <p class="temp-high">25°</p>
              <p class="temp-low">19°</p>
            </div>
          </div>
        </div>
        
        <div class="mt-6">
          <div class="flex justify-between items-center mb-3">
            <h3 class="font-semibold">Today's Forecast</h3>
            <div class="flex space-x-2">
              <button id="temp-chart-btn" class="text-xs px-3 py-1 rounded-full bg-blue-500 text-white">Temp</button>
              <button id="precip-chart-btn" class="text-xs px-3 py-1 rounded-full bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200">Rain</button>
              <button id="wind-chart-btn" class="text-xs px-3 py-1 rounded-full bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200">Wind</button>
            </div>
          </div>
          
          <div class="chart-container">
            <canvas id="hourly-chart"></canvas>
          </div>
        </div>
      </div>
      
      <button id="chat-button" class="chat-button bg-blue-500 text-white">
        <i class="fas fa-comment-alt"></i>
      </button>
    </div>
    
    
    <div id="forecast-screen" class="screen">
      <div class="main-content p-4">
        <h2 class="text-xl font-semibold mb-4">Detailed Forecast</h2>
        
        <div class="mb-6">
          <h3 class="font-medium mb-3">Temperature</h3>
          <div class="chart-container">
            <canvas id="temp-chart"></canvas>
          </div>
        </div>
        
        <div class="mb-6">
          <h3 class="font-medium mb-3">Precipitation Chance</h3>
          <div class="chart-container">
            <canvas id="precip-chart"></canvas>
          </div>
        </div>
        
        <div class="mb-6">
          <h3 class="font-medium mb-3">Wind Speed</h3>
          <div class="chart-container">
            <canvas id="wind-chart"></canvas>
          </div>
        </div>
      </div>
    </div>
    
    
    <div id="chatbot-screen" class="screen">
      <div class="main-content p-4">
        <h2 class="text-xl font-semibold mb-4">Weather Assistant</h2>
        
        <div class="flex flex-col chat-messages">
          <div class="message message-ai">
            Hello! I'm your weather assistant. Ask me anything about the weather or forecasts!
          </div>
          
          <div class="message message-user">
            Will it rain tomorrow?
          </div>
          
          <div class="message message-ai">
            Based on the forecast, there's a 30% chance of rain tomorrow afternoon in your area. You might want to have an umbrella handy just in case!
          </div>
        </div>
        
        <div class="chat-input-container">
          <input type="text" placeholder="Ask about weather..." class="chat-input bg-gray-100 dark:bg-gray-800">
          <button class="chat-send bg-blue-500 text-white">
            <i class="fas fa-paper-plane"></i>
          </button>
        </div>
      </div>
    </div>
    
    
    <div id="settings-screen" class="screen">
      <div class="main-content p-4">
        <h2 class="text-xl font-semibold mb-4">Settings</h2>
        
        <div class="settings-option">
          <span>Temperature Units</span>
          <select class="bg-transparent border rounded px-2 py-1">
            <option value="celsius">Celsius (°C)</option>
            <option value="fahrenheit">Fahrenheit (°F)</option>
          </select>
        </div>
        
        <div class="settings-option">
          <span>Notification Frequency</span>
          <select class="bg-transparent border rounded px-2 py-1">
            <option value="never">Never</option>
            <option value="daily">Daily</option>
            <option value="severe">Severe Weather Only</option>
          </select>
        </div>
        
        <div class="settings-option">
          <span>Theme</span>
          <select id="theme-select" class="bg-transparent border rounded px-2 py-1">
            <option value="dark">Dark</option>
            <option value="light">Light</option>
            <option value="auto">Auto (System)</option>
          </select>
        </div>
        
        <div class="settings-option">
          <span>Location Permission</span>
          <label class="toggle-switch">
            <input type="checkbox" checked>
            <span class="toggle-slider"></span>
          </label>
        </div>
        
        <div class="settings-option">
          <span>Notification Permission</span>
          <label class="toggle-switch">
            <input type="checkbox" checked>
            <span class="toggle-slider"></span>
          </label>
        </div>
        
        <div class="mt-6">
          <p class="text-sm opacity-70 text-center">Weather App v1.0</p>
          <p class="text-xs opacity-50 text-center mt-1">© 2025 Weather App</p>
        </div>
      </div>
    </div>
    
    
    <div id="chatbot-dialog" class="chatbot-container">
      <div class="p-4 flex justify-between items-center border-b border-gray-200 dark:border-gray-700">
        <h2 class="text-xl font-semibold">Weather Assistant</h2>
        <button id="close-chat" class="w-8 h-8 flex items-center justify-center rounded-full bg-gray-200 dark:bg-gray-700">
          <i class="fas fa-times"></i>
        </button>
      </div>
      
      <div class="flex flex-col chat-messages">
        <div class="message message-ai">
          Hello! I'm your weather assistant. Ask me anything about the weather or forecasts!
        </div>
      </div>
      
      <div class="chat-input-container">
        <input type="text" placeholder="Ask about weather..." class="chat-input bg-gray-100 dark:bg-gray-800">
        <button class="chat-send bg-blue-500 text-white">
          <i class="fas fa-paper-plane"></i>
        </button>
      </div>
    </div>
    
    
    <div class="tab-bar bg-white dark:bg-gray-900">
      <div class="tab-item active" data-screen="home-screen">
        <i class="tab-icon fas fa-home"></i>
        <span class="tab-label">Home</span>
      </div>
      <div class="tab-item" data-screen="forecast-screen">
        <i class="tab-icon fas fa-chart-line"></i>
        <span class="tab-label">Forecast</span>
      </div>
      <div class="tab-item" data-screen="chatbot-screen">
        <i class="tab-icon fas fa-comment-dots"></i>
        <span class="tab-label">Chat</span>
      </div>
      <div class="tab-item" data-screen="settings-screen">
        <i class="tab-icon fas fa-cog"></i>
        <span class="tab-label">Settings</span>
      </div>
    </div>
  </div>
  
  <script id="app-script">
    document.addEventListener('DOMContentLoaded', function() {
      // Tab navigation
      const tabItems = document.querySelectorAll('.tab-item');
      const screens = document.querySelectorAll('.screen');
      
      tabItems.forEach(tab => {
        tab.addEventListener('click', () => {
          const targetScreen = tab.getAttribute('data-screen');
          
          // Update active tab
          tabItems.forEach(t => t.classList.remove('active'));
          tab.classList.add('active');
          
          // Show target screen
          screens.forEach(screen => {
            screen.classList.remove('active');
            if (screen.id === targetScreen) {
              screen.classList.add('active');
            }
          });
        });
      });
      
      // Chat button toggle
      const chatButton = document.getElementById('chat-button');
      const chatbotDialog = document.getElementById('chatbot-dialog');
      const closeChat = document.getElementById('close-chat');
      
      chatButton.addEventListener('click', () => {
        chatbotDialog.style.display = 'flex';
      });
      
      closeChat.addEventListener('click', () => {
        chatbotDialog.style.display = 'none';
      });
      
      // Theme toggle
      const themeSelect = document.getElementById('theme-select');
      const body = document.body;
      
      themeSelect.addEventListener('change', () => {
        const theme = themeSelect.value;
        if (theme === 'dark') {
          body.classList.add('dark');
          body.classList.remove('light');
        } else if (theme === 'light') {
          body.classList.add('light');
          body.classList.remove('dark');
        } else {
          // Auto theme would check system preference
          // This is simplified for the prototype
          body.classList.add('dark');
          body.classList.remove('light');
        }
      });
      
      // Chart toggles
      const tempChartBtn = document.getElementById('temp-chart-btn');
      const precipChartBtn = document.getElementById('precip-chart-btn');
      const windChartBtn = document.getElementById('wind-chart-btn');
      
      tempChartBtn.addEventListener('click', () => {
        updateButtonStyles(tempChartBtn);
        updateHourlyChart('temperature');
      });
      
      precipChartBtn.addEventListener('click', () => {
        updateButtonStyles(precipChartBtn);
        updateHourlyChart('precipitation');
      });
      
      windChartBtn.addEventListener('click', () => {
        updateButtonStyles(windChartBtn);
        updateHourlyChart('wind');
      });
      
      function updateButtonStyles(activeBtn) {
        [tempChartBtn, precipChartBtn, windChartBtn].forEach(btn => {
          if (btn === activeBtn) {
            btn.classList.add('bg-blue-500', 'text-white');
            btn.classList.remove('bg-gray-200', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-200');
          } else {
            btn.classList.remove('bg-blue-500', 'text-white');
            btn.classList.add('bg-gray-200', 'text-gray-800', 'dark:bg-gray-700', 'dark:text-gray-200');
          }
        });
      }
      
      // Initialize charts
      const hourlyChartCtx = document.getElementById('hourly-chart').getContext('2d');
      const tempChartCtx = document.getElementById('temp-chart').getContext('2d');
      const precipChartCtx = document.getElementById('precip-chart').getContext('2d');
      const windChartCtx = document.getElementById('wind-chart').getContext('2d');
      
      let hourlyChart = null;
      
      function updateHourlyChart(dataType) {
        const labels = ['Now', '1PM', '2PM', '3PM', '4PM', '5PM', '6PM', '7PM', '8PM'];
        
        let data, label, color, yAxisMax;
        
        if (dataType === 'temperature') {
          data = [24, 25, 25, 24, 22, 21, 20, 19, 18];
          label = 'Temperature (°C)';
          color = '#3B82F6';
          yAxisMax = 30;
        } else if (dataType === 'precipitation') {
          data = [10, 20, 40, 30, 25, 15, 10, 5, 5];
          label = 'Precipitation (%)';
          color = '#60A5FA';
          yAxisMax = 100;
        } else { // wind
          data = [12, 14, 15, 17, 16, 13, 11, 10, 9];
          label = 'Wind (km/h)';
          color = '#78350F';
          yAxisMax = 20;
        }
        
        // Destroy previous chart if exists
        if (hourlyChart) {
          hourlyChart.destroy();
        }
        
        hourlyChart = new Chart(hourlyChartCtx, {
          type: 'line',
          data: {
            labels: labels,
            datasets: [{
              label: label,
              data: data,
              borderColor: color,
              backgroundColor: color + '20',
              tension: 0.4,
              fill: true
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false
              }
            },
            scales: {
              y: {
                beginAtZero: true,
                max: yAxisMax,
                grid: {
                  color: 'rgba(200, 200, 200, 0.1)'
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
          }
        });
      }
      
      // Initialize detailed charts
      function initDetailedCharts() {
        new Chart(tempChartCtx, {
          type: 'line',
          data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
              label: 'High',
              data: [24, 22, 20, 19, 21, 23, 25],
              borderColor: '#F59E0B',
              backgroundColor: 'transparent',
              tension: 0.4
            }, {
              label: 'Low',
              data: [18, 17, 16, 15, 16, 18, 19],
              borderColor: '#3B82F6',
              backgroundColor: 'transparent',
              tension: 0.4
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                grid: {
                  color: 'rgba(200, 200, 200, 0.1)'
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
          }
        });
        
        new Chart(precipChartCtx, {
          type: 'bar',
          data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
              label: 'Precipitation (%)',
              data: [10, 30, 80, 60, 40, 10, 5],
              backgroundColor: '#60A5FA'
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                beginAtZero: true,
                max: 100,
                grid: {
                  color: 'rgba(200, 200, 200, 0.1)'
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
          }
        });
        
        new Chart(windChartCtx, {
          type: 'line',
          data: {
            labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            datasets: [{
              label: 'Wind (km/h)',
              data: [12, 15, 18, 20, 16, 14, 10],
              borderColor: '#78350F',
              backgroundColor: '#78350F20',
              tension: 0.4,
              fill: true
            }]
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                beginAtZero: true,
                grid: {
                  color: 'rgba(200, 200, 200, 0.1)'
                }
              },
              x: {
                grid: {
                  display: false
                }
              }
            }
          }
        });
      }
      
      // Mock location permission request
      setTimeout(() => {
        const mockLocation = "San Francisco, CA";
        document.getElementById('location').textContent = mockLocation;
        document.getElementById('current-temp').textContent = "24°";
        document.getElementById('weather-condition').textContent = "Partly Cloudy";
        document.getElementById('feels-like').textContent = "26°";
        document.getElementById('humidity').textContent = "65%";
        document.getElementById('wind-speed').textContent = "12 km/h";
        
        // Initialize charts after loading data
        updateHourlyChart('temperature');
        initDetailedCharts();
      }, 1500);
      
      // Mock notification permission request
      setTimeout(() => {
        if (!("Notification" in window)) {
          console.log("This browser does not support notifications");
        } else {
          // This would normally trigger a real permission dialog
          console.log("Notification permission would be requested here");
        }
      }, 2000);
      
      // Add time-triggered loops for background updates and notifications
      function setupBackgroundUpdates() {
        // Weather data update loop - runs every 30 minutes
        const weatherUpdateInterval = 30 * 60 * 1000; // 30 minutes in milliseconds
        setInterval(() => {
          console.log("Background weather data update triggered");
          // This would call the weather API and update the data
          updateWeatherData();
        }, weatherUpdateInterval);
        
        // Notification check loop - runs hourly
        const notificationInterval = 60 * 60 * 1000; // 60 minutes in milliseconds
        setInterval(() => {
          console.log("Hourly notification check triggered");
          // Check user notification settings and send if enabled
          checkAndSendNotifications();
        }, notificationInterval);
        
        // Location refresh loop - runs every 15 minutes when app is active
        const locationRefreshInterval = 15 * 60 * 1000; // 15 minutes in milliseconds
        setInterval(() => {
          console.log("Location refresh triggered");
          // Update user location if permission granted
          refreshUserLocation();
        }, locationRefreshInterval);
      }
      
      // Mock functions that would be implemented with real API calls
      function updateWeatherData() {
        console.log("Fetching latest weather data from API");
        
        // Get user's location coordinates
        navigator.geolocation.getCurrentPosition(async (position) => {
          const latitude = position.coords.latitude;
          const longitude = position.coords.longitude;
          
          try {
            // Call the WeatherForecast Loop
            const response = await fetch('https://magicloops.dev/api/loop/873caf46-6bf8-4810-8cad-81384ef85331/run', {
              method: 'POST',
              body: JSON.stringify({ latitude, longitude }),
            });
            
            const weatherData = await response.json();
            
            // Update UI with the received weather data
            updateWeatherUI(weatherData);
          } catch (error) {
            console.error("Error fetching weather data:", error);
          }
        }, (error) => {
          console.error("Geolocation error:", error);
        });
      }
      
      function sendChatMessage(message) {
        const chatMessages = document.querySelector('#chatbot-dialog .chat-messages');
        
        // Add user message to UI
        const userMessageEl = document.createElement('div');
        userMessageEl.className = 'message message-user';
        userMessageEl.textContent = message;
        chatMessages.appendChild(userMessageEl);
        
        // Get user's location coordinates
        navigator.geolocation.getCurrentPosition(async (position) => {
          const latitude = position.coords.latitude;
          const longitude = position.coords.longitude;
          
          try {
            // Call the WeatherResponder Loop
            const response = await fetch('https://magicloops.dev/api/loop/ffec329f-5cb1-40be-a1fa-46a4e746ada2/run', {
              method: 'POST',
              body: JSON.stringify({ 
                userId: "user-" + Math.floor(Math.random() * 10000), // Generate random user ID for demo
                question: message,
                context: { latitude, longitude }
              }),
            });
            
            const responseData = await response.json();
            
            // Add AI response to UI
            const aiMessageEl = document.createElement('div');
            aiMessageEl.className = 'message message-ai';
            aiMessageEl.textContent = responseData.answer || "Sorry, I couldn't process that request.";
            chatMessages.appendChild(aiMessageEl);
            
            // Scroll to bottom of chat
            chatMessages.scrollTop = chatMessages.scrollHeight;
          } catch (error) {
            console.error("Error sending chat message:", error);
            
            // Show error message
            const errorMessageEl = document.createElement('div');
            errorMessageEl.className = 'message message-ai';
            errorMessageEl.textContent = "Sorry, there was an error processing your request.";
            chatMessages.appendChild(errorMessageEl);
          }
        });
      }
      
      function updateWeatherUI(weatherData) {
        if (!weatherData) return;
        
        // Update current conditions
        document.getElementById('location').textContent = weatherData.location || "Unknown Location";
        document.getElementById('current-temp').textContent = `${Math.round(weatherData.current.temperature)}°`;
        document.getElementById('weather-condition').textContent = weatherData.current.condition || "Unknown";
        document.getElementById('feels-like').textContent = `${Math.round(weatherData.current.feelsLike)}°`;
        document.getElementById('humidity').textContent = `${weatherData.current.humidity}%`;
        document.getElementById('wind-speed').textContent = `${weatherData.current.windSpeed} km/h`;
        
        // Update forecast data and charts if available
        if (weatherData.forecast) {
          updateForecastUI(weatherData.forecast);
        }
      }
      
      // Add event listener for chat functionality
      const chatInput = document.querySelector('#chatbot-dialog .chat-input');
      const chatSendButton = document.querySelector('#chatbot-dialog .chat-send');
      
      function handleSendMessage() {
        const message = chatInput.value.trim();
        if (message) {
          sendChatMessage(message);
          chatInput.value = '';
        }
      }
      
      chatSendButton.addEventListener('click', handleSendMessage);
      
      chatInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
          handleSendMessage();
        }
      });
      
      // Initial weather data load
      setTimeout(() => {
        updateWeatherData();
      }, 1000);
      
      // Add time-triggered loops for background updates and notifications
      setupBackgroundUpdates();
    });
  </script>
</body>
</html>

CSS