<!DOCTYPE html> <html lang="pt-PT"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Contador de Tempo - Cidade e Táxi</title> <style> /* Definir o estilo da página */ body, html { margin: 0; padding: 0; height: 100%; display: flex; justify-content: center; align-items: center; font-family: Arial, sans-serif; background-image: url('https://example.com/cidade.jpg'); /* Substituir com URL da imagem da cidade */ background-size: cover; background-position: center; color: #fff; text-align: center; } /* Estilo do contador no topo */ #contador { position: absolute; top: 20px; width: 100%; font-size: 2em; font-weight: bold; } /* Estilo do táxi */ #taxi { width: 200px; height: auto; margin-top: 100px; /* Ajuste conforme necessário */ } </style> </head> <body> <!-- Contador de Tempo --> <div id="contador">00:00</div> <!-- Imagem do Táxi no Centro --> <img id="taxi" src="https://example.com/taxi.png" alt="Táxi"> <!-- Substituir com URL da imagem do táxi --> <script> let segundos = 0; function atualizarContador() { segundos++; let minutos = Math.floor(segundos / 60); let seg = segundos % 60; document.getElementById('contador').textContent = `${String(minutos).padStart(2, '0')}:${String(seg).padStart(2, '0')}`; } setInterval(atualizarContador, 1000); </script> </body> </html>