How to Display Local Weather with an Adaptive Background in Webflow

(function() {
  var el = document.getElementById('weather-widget');
  if (!el) return;

  var weatherConfig = {
    sunny:  { icon: '☀️', label: 'Sunny',    bg: 'linear-gradient(135deg,#ffd700,#ff8c00)', color: '#111' },
    cloudy: { icon: '⛅', label: 'Cloudy',        bg: 'linear-gradient(135deg,#b0bec5,#78909c)', color: '#fff' },
    rainy:  { icon: '🌧️', label: 'Rainy',       bg: 'linear-gradient(135deg,#4169e1,#1e3a8a)', color: '#fff' },
    snowy:  { icon: '❄️', label: 'Snowy',         bg: 'linear-gradient(135deg,#e3f2fd,#90caf9)', color: '#111' },
    stormy: { icon: '⛈️', label: 'Stormy',        bg: 'linear-gradient(135deg,#37474f,#1a1a2e)', color: '#fff' },
    foggy:  { icon: '🌫️', label: 'Foggy',        bg: 'linear-gradient(135deg,#cfd8dc,#90a4ae)', color: '#111' },
  };

  function getCondition(code) {
    if (code === 0) return 'sunny';
    if (code <= 3) return 'cloudy';
    if (code <= 48) return 'foggy';
    if (code <= 67) return 'rainy';
    if (code <= 77) return 'snowy';
    return 'stormy';
  }

  function render(condition, temp, city) {
    var cfg = weatherConfig[condition] || weatherConfig.sunny;
    el.style.cssText = 'background:' + cfg.bg + ';border-radius:16px;padding:1.5rem;' +
      'display:flex;align-items:center;gap:1rem;transition:all 0.5s;';
    el.innerHTML = '' + cfg.icon + '' +
      '
' +
      temp + '°C — ' + cfg.label + '
' +
      '
' + (city || 'Your location') + '
';
  }

  render('cloudy', '...', 'Location in progress...');

  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(pos) {
      var lat = pos.coords.latitude, lon = pos.coords.longitude;
      fetch('https://api.open-meteo.com/v1/forecast?latitude=' + lat + '&longitude=' + lon + '¤t_weather=true&timezone=auto')
        .then(function(r) { return r.json(); })
        .then(function(d) {
          var w = d.current_weather;
          render(getCondition(w.weathercode), Math.round(w.temperature), 'Your location');
        });
    }, function() {
      render('sunny', '22', 'Dubai (demo)');
    });
  } else {
    render('sunny', '22', 'Dubai (demo)');
  }
})();