44 lines
1.4 KiB
HTML
44 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Horloge Suisse</title>
|
|
<!-- 1. NE PAS OUBLIER TAILWIND CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body
|
|
class="bg-slate-900 text-slate-100 p-10 flex flex-col items-center justify-center min-h-screen"
|
|
>
|
|
<h1 class="text-2xl font-bold mb-6">Horloge</h1>
|
|
|
|
<div id="monHorlogeLocal" class="w-48 h-48"></div>
|
|
|
|
<div class="flex gap-8">
|
|
<!-- 2. DONNER UNE TAILLE AUX CONTENEURS (ex: w-24 h-24 ou w-32 h-32) -->
|
|
<div class="text-center">
|
|
<div id="monHorlogeLocale" class="w-48 h-48"></div>
|
|
<span class="text-xs text-slate-400 mt-2 block">Locale</span>
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<div id="monHorlogeUTC" class="w-48 h-48"></div>
|
|
<span class="text-xs text-slate-400 mt-2 block">UTC</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. CHARGEMENT DU SCRIPT -->
|
|
<script src="./horloge.js"></script>
|
|
|
|
<!-- 4. INITIALISATION -->
|
|
<script>
|
|
// Attendre que le DOM soit chargé pour s'assurer que les div existent
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
new SwissClock("monHorlogeLocal", false); // Locale
|
|
new SwissClock("monHorlogeLocale", false); // Locale
|
|
new SwissClock("monHorlogeUTC", true); // UTC
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|