A Code by Metehan

Open In Editor Video Publish Your Code

<!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>

A Code by Metehan

Recommended

Responsive CSS Navbar

The Circle Game Code

CSS Loading Animation Snippet

HTML

CSS

JS

Recommended

Responsive CSS Navbar

The Circle Game Code

CSS Loading Animation Snippet

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS