Previsão do Tempo - Voltar

$apiKey = "COLE_SUA_API_AQUI";
$cidade = urlencode("Sao Paulo,BR");
$url = "https://api.openweathermap.org/data/2.5/forecast?q=$cidade&appid=$apiKey&units=metric&lang=pt_br";
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);

$resposta = curl_exec($ch);

$dados = json_decode($resposta, true);

if ($dados['cod'] != "200") {
	echo "Erro: " . $dados['message'];
	exit;
}

echo "<div class='row g-4'>";

$datas_mostradas = [];

foreach ($dados['list'] as $item) {
	$condicao = $item['weather'][0]['main'];

	$cor = "#4facfe"; // padrão
	if ($condicao == "Rain") $cor = "#6a11cb";
	if ($condicao == "Clear") $cor = "#f7971e";
	if ($condicao == "Clouds") $cor = "#757f9a";

	$dias = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];
	$diaSemana = $dias[date('w', strtotime($item['dt_txt']))];

	$data = date('Y-m-d', strtotime($item['dt_txt']));

	if (!in_array($data, $datas_mostradas)) {
		$datas_mostradas[] = $data;
		$icone = $item['weather'][0]['icon'];
		$descricao = $item['weather'][0]['description'];
		$temp = round($item['main']['temp']);

		echo "<div class='col-12 col-sm-6 col-md-4 col-lg-3'>";
			echo "<div class='card-clima' style='background: $cor'>";			
				echo "<div class='data'>$diaSemana - ".date('d/m', strtotime($item['dt_txt']))."</div>";
				echo "<img src='https://openweathermap.org/img/wn/".$icone."@2x.png'>";
				echo "<div class='temp'>".$temp."°C</div>";
				echo "<div>".ucfirst($descricao)."</div>";
			echo "</div>";
		echo "</div>";
	}
}

echo "</div>";

.card-clima {
	border: none;
	border-radius: 20px;
	background: linear-gradient(135deg, #4facfe, #00f2fe);
	color: #fff;
	text-align: center;
	padding: 20px;
	margin: 10px;
	box-shadow: 0 8px 20px rgba(0,0,0,0.2);
	transition: transform 0.2s;
}

.card-clima:hover {
	transform: scale(1.05);
}

.card-clima img {
	width: 80px;
}

.temp {
	font-size: 2rem;
	font-weight: bold;
}

.data {
	font-size: 1.1rem;
	opacity: 0.9;
}