\<\!DOCTYPE html\>

\<html\>
\<head\>
\<title\>Previsão do Tempo - Rio de Janeiro\</title\>
\<meta charset="UTF-8"\>
\<style\>
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: Arial, sans-serif;
background-color: \#f0f0f0;
}

```
.fullscreen-container {
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(calc(100vw / 1920px));
  transform-origin: top left;
  background: url('[https://i.imgur.com/v8n3a2V.jpeg](https://i.imgur.com/v8n3a2V.jpeg)') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
}

.weather-info {
  background: rgba(0, 0, 0, 0.5);
  padding: 40px;
  border-radius: 15px;
}

#city {
  font-size: 80px;
  font-weight: bold;
  text-shadow: 2px 2px 4px #000000;
}

#temperature {
  font-size: 120px;
  font-weight: bold;
  margin: 20px 0;
  text-shadow: 3px 3px 6px #000000;
}

#description {
  font-size: 50px;
  text-transform: capitalize;
  text-shadow: 2px 2px 4px #000000;
}

#forecast {
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
}

.forecast-day {
  background: rgba(0, 0, 0, 0.4);
  padding: 20px;
  border-radius: 10px;
  margin: 0 10px;
  width: 200px;
}

.forecast-day h3 {
  font-size: 30px;
  margin-bottom: 10px;
}

.forecast-day p {
  font-size: 24px;
  margin: 5px 0;
}
```

\</style\>
\</head\>
\<body\>

\<div class="fullscreen-container"\>
\<div class="weather-info"\>
\<h1 id="city"\>Rio de Janeiro\</h1\>
\<p id="temperature"\>--°C\</p\>
\<p id="description"\>Carregando...\</p\>
\<div id="forecast"\>\</div\>
\</div\>
\</div\>

\<script\>
document.addEventListener('DOMContentLoaded', () =\> {
// Coordenadas do Rio de Janeiro
const latitude = -22.9068;
const longitude = -43.1729;

```
  const apiUrl = `https://api.open-meteo.com/v1/forecast?latitude=${latitude}&amp;longitude=${longitude}&amp;current_weather=true&amp;hourly=temperature_2m,weathercode&amp;daily=weathercode,temperature_2m_max,temperature_2m_min&amp;timezone=America%2FSao_Paulo`;

  fetch(apiUrl)
    .then(response =&gt; response.json())
    .then(data =&gt; {
      // Atualiza a temperatura atual
      document.getElementById(&#39;temperature&#39;).textContent = `${Math.round(data.current_weather.temperature)}°C`;

      // Atualiza a descrição do tempo atual
      document.getElementById(&#39;description&#39;).textContent = getWeatherDescription(data.current_weather.weathercode);

      // Atualiza a previsão para os próximos dias
      const forecastContainer = document.getElementById(&#39;forecast&#39;);
      for (let i = 0; i &lt; 5; i++) {
        const day = new Date(data.daily.time[i]);
        const dayName = day.toLocaleDateString(&#39;pt-BR&#39;, { weekday: &#39;short&#39; });

        const forecastDay = document.createElement(&#39;div&#39;);
        forecastDay.classList.add(&#39;forecast-day&#39;);

        const dayTitle = document.createElement(&#39;h3&#39;);
        dayTitle.textContent = dayName;

        const maxTemp = document.createElement(&#39;p&#39;);
        maxTemp.textContent = `Máx: ${Math.round(data.daily.temperature_2m_max[i])}°C`;

        const minTemp = document.createElement(&#39;p&#39;);
        minTemp.textContent = `Mín: ${Math.round(data.daily.temperature_2m_min[i])}°C`;

        const weatherIcon = document.createElement(&#39;p&#39;);
        weatherIcon.textContent = getWeatherDescription(data.daily.weathercode[i]);

        forecastDay.appendChild(dayTitle);
        forecastDay.appendChild(maxTemp);
        forecastDay.appendChild(minTemp);
        forecastDay.appendChild(weatherIcon);

        forecastContainer.appendChild(forecastDay);
      }
    })
    .catch(error =&gt; {
      console.error(&#39;Erro ao buscar dados da previsão do tempo:&#39;, error);
      document.getElementById(&#39;description&#39;).textContent = &#39;Erro ao carregar dados.&#39;;
    });
});

function getWeatherDescription(code) {
    const descriptions = {
        0: &#39;Céu limpo&#39;,
        1: &#39;Principalmente limpo&#39;,
        2: &#39;Parcialmente nublado&#39;,
        3: &#39;Nublado&#39;,
        45: &#39;Nevoeiro&#39;,
        48: &#39;Nevoeiro com geada&#39;,
        51: &#39;Chuvisco leve&#39;,
        53: &#39;Chuvisco moderado&#39;,
        55: &#39;Chuvisco intenso&#39;,
        56: &#39;Chuvisco gelado leve&#39;,
        57: &#39;Chuvisco gelado intenso&#39;,
        61: &#39;Chuva fraca&#39;,
        63: &#39;Chuva moderada&#39;,
        65: &#39;Chuva forte&#39;,
        66: &#39;Chuva gelada fraca&#39;,
        67: &#39;Chuva gelada forte&#39;,
        71: &#39;Neve fraca&#39;,
        73: &#39;Neve moderada&#39;,
        75: &#39;Neve forte&#39;,
        77: &#39;Grãos de neve&#39;,
        80: &#39;Pancadas de chuva fracas&#39;,
        81: &#39;Pancadas de chuva moderadas&#39;,
        82: &#39;Pancadas de chuva violentas&#39;,
        85: &#39;Pancadas de neve fracas&#39;,
        86: &#39;Pancadas de neve fortes&#39;,
        95: &#39;Trovoada&#39;,
        96: &#39;Trovoada com granizo fraco&#39;,
        99: &#39;Trovoada com granizo forte&#39;
    };
    return descriptions[code] || &#39;Condição desconhecida&#39;;
}
```

\</script\>

\</body\>
\</html\>