#weather-widget{
width:100%;
height:100%;
background:linear-gradient(180deg,#0d3f79,#164f95);
border-radius:18px;
padding:16px;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
color:#fff;
display:flex;
flex-direction:column;
justify-content:flex-start;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.weather-top{
display:flex;
.weather-item:nth-child(1){
border-left:4px solid #00d4ff;
}
.weather-item:nth-child(2){
border-left:4px solid #4dd0e1;
}
.weather-item:nth-child(3){
border-left:4px solid #66bb6a;
}
.weather-item:nth-child(4){
border-left:4px solid #ffb300;
}
.weather-item:nth-child(5){
border-left:4px solid #29b6f6;
}
.weather-item:nth-child(6){
border-left:4px solid #ab47bc;
}
.weather-item:nth-child(7){
border-left:4px solid #ef5350;
}
.weather-item:nth-child(8){
border-left:4px solid #90a4ae;
}
#updated{
font-size:14px;
}
@media(max-width:480px){
#weather-widget{
padding:12px;
border-radius:14px;
}
#weather-icon{
font-size:42px;
}
#temp{
font-size:42px;
}
#description{
font-size:15px;
}
.weather-item{
padding:8px 10px;
}
.weather-item span{
font-size:12px;
}
.weather-item strong{
font-size:14px;
}
}
const API_KEY = "97996ed357327cb73e1b942b80a7063e";
const LAT = -18.5433;
const LON = -53.1283;
const icon = document.getElementById("weather-icon");
const temp = document.getElementById("temp");
const description = document.getElementById("description");
const feels = document.getElementById("feels");
const humidity = document.getElementById("humidity");
const maxmin = document.getElementById("maxmin");
const wind = document.getElementById("wind");
const rain = document.getElementById("rain");
const pressure = document.getElementById("pressure");
const uv = document.getElementById("uv");
const updated = document.getElementById("updated");
const icons = {
"01d":"☀️",
"01n":"🌙",
"02d":"🌤️",
"02n":"☁️",
"03d":"☁️",
"03n":"☁️",
"04d":"☁️",
"04n":"☁️",
"09d":"🌧️",
"09n":"🌧️",
"10d":"🌦️",
"10n":"🌧️",
"11d":"⛈️",
"11n":"⛈️",
"13d":"❄️",
"13n":"❄️",
"50d":"🌫️",
"50n":"🌫️"
};
async function carregarTempo(){
try{
const resposta = await fetch(
`https://api.openweathermap.org/data/3.0/onecall?lat=${LAT}&lon=${LON}&units=metric&lang=pt_br&appid=${API_KEY}`
);
const dados = await resposta.json();
flex-direction:column;
align-items:center;
justify-content:center;
margin-bottom:16px;
}
#weather-icon{
font-size:52px;
line-height:1;
margin-bottom:8px;
}
.weather-temp{
text-align:center;
}
#temp{
display:block;
font-size:54px;
font-weight:700;
line-height:1;
}
#description{
display:block;
font-size:18px;
margin-top:6px;
text-transform:capitalize;
opacity:.95;
}
.weather-info{
display:grid;
grid-template-columns:1fr;
gap:10px;
flex:1;
}
.weather-item{
background:rgba(255,255,255,.12);
border-radius:10px;
padding:10px 12px;
display:flex;
justify-content:space-between;
align-items:center;
backdrop-filter:blur(6px);
transition:.25s;
}
.weather-item:hover{
background:rgba(255,255,255,.18);
}
.weather-item span{
font-size:13px;
opacity:.85;
}
.weather-item strong{
font-size:16px;
font-weight:700;
}
temp.textContent = Math.round(dados.current.temp) + "°";
description.textContent =
dados.current.weather[0].description;
feels.textContent =
Math.round(dados.current.feels_like) + "°";
humidity.textContent =
dados.current.humidity + "%";
maxmin.textContent =
Math.round(dados.daily[0].temp.max) +
"° / " +
Math.round(dados.daily[0].temp.min) +
"°";
wind.textContent =
Math.round(dados.current.wind_speed * 3.6) +
" km/h";
pressure.textContent =
dados.current.pressure + " hPa";
uv.textContent =
dados.current.uvi;
if(dados.daily[0].pop!=null){
rain.textContent =
Math.round(dados.daily[0].pop*100)+"%";
}else{
rain.textContent="0%";
}
const codigo =
dados.current.weather[0].icon;
icon.textContent =
icons[codigo] || "☀️";
const agora = new Date();
updated.textContent =
agora.toLocaleTimeString("pt-BR",{
hour:"2-digit",
minute:"2-digit"
});
}catch(erro){
console.error("Erro ao carregar o tempo:",erro);
temp.textContent="--°";
description.textContent="Não foi possível atualizar";
feels.textContent="--°";
humidity.textContent="--%";
maxmin.textContent="--° / --°";
wind.textContent="-- km/h";
rain.textContent="--%";
pressure.textContent="----";
uv.textContent="--";
updated.textContent="--:--";
icon.textContent="⚠️";
}
}
carregarTempo();
setInterval(() => {
carregarTempo();
},300000);
document.addEventListener("visibilitychange",()=>{
if(!document.hidden){
carregarTempo();
}
});
window.addEventListener("online",()=>{
carregarTempo();
});
window.addEventListener("focus",()=>{
carregarTempo();
});
Joel 