sucupira
333 lines
22 KiB
HTML
333 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Sirius en Guadeloupe : Guide du Lever Héliaque</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<!-- Chosen Palette: Celestial Harmony (Deep Navy, Gold, Cream/Light Gray) -->
|
|
<!-- Application Structure Plan: A user-centric, single-page application featuring a prominent interactive prediction tool as the main element. Users select a location and year to get an immediate result. Below this tool, a tab-based navigation allows non-linear exploration of other key content from the report: 1) "Prédictions" (the tool and full data table), 2) "Comprendre" (celestial mechanics explained in digestible cards), 3) "Observer" (a practical guide with a Stellarium tutorial and tips), and 4) "Histoires" (the cultural significance of Sirius). This structure prioritizes the user's primary task (finding a date) while making the rich contextual information easily accessible and not overwhelming. -->
|
|
<!-- Visualization & Content Choices: The primary interactive element is a "Prediction Calculator" (HTML selects + JS), not a chart, as the core data is a lookup table. Goal: Inform/Interact. Method: Dropdowns update a dynamic result card. Justification: Most direct way to answer the user's key question. The full data is presented in a standard HTML table for comparison. Goal: Compare. Method: Table. Justification: Standard and effective. Explanatory content (mechanics, culture) is organized into themed cards and sections toggled by JS. Goal: Organize/Inform. Method: HTML/CSS cards. Justification: Prevents walls of text, improves readability. Icons are Unicode characters. -->
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f3f4f6; /* bg-gray-100 */
|
|
}
|
|
h1, h2, h3 {
|
|
font-family: 'Playfair Display', serif;
|
|
}
|
|
.tab-button.active {
|
|
border-color: #fbbf24; /* border-amber-400 */
|
|
color: #1e3a8a; /* text-blue-900 */
|
|
font-weight: 600;
|
|
}
|
|
.celestial-card {
|
|
background-color: #ffffff;
|
|
border-radius: 0.75rem;
|
|
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
.celestial-header {
|
|
background-color: #1e3a8a; /* bg-blue-900 */
|
|
color: #ffffff;
|
|
}
|
|
.highlight-text {
|
|
color: #fbbf24; /* text-amber-400 */
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="text-gray-800">
|
|
|
|
<header class="celestial-header text-center p-6 sm:p-8 shadow-lg">
|
|
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight">Sirius en Guadeloupe</h1>
|
|
<p class="text-lg sm:text-xl text-gray-200 mt-2">Votre guide interactif du lever héliaque</p>
|
|
</header>
|
|
|
|
<main class="max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
|
|
|
|
<div id="interactive-predictor" class="celestial-card p-6 md:p-8 mb-8">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-center mb-2 text-blue-900">Quand observer Sirius ?</h2>
|
|
<p class="text-center text-gray-600 mb-6">Sélectionnez un site et une année pour trouver la date et l'heure du premier lever visible de Sirius à l'aube.</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
|
|
<div>
|
|
<label for="location-select" class="block text-sm font-medium text-gray-700 mb-1">Choisissez un site d'observation :</label>
|
|
<select id="location-select" class="w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-amber-400 focus:border-amber-400">
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label for="year-select" class="block text-sm font-medium text-gray-700 mb-1">Choisissez une année :</label>
|
|
<select id="year-select" class="w-full p-3 border border-gray-300 rounded-md shadow-sm focus:ring-amber-400 focus:border-amber-400">
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="result-display" class="bg-blue-900 text-white rounded-lg p-6 text-center transition-all duration-500 transform scale-100">
|
|
<h3 id="result-location" class="text-2xl font-bold">Pointe des Châteaux</h3>
|
|
<p class="text-5xl font-bold my-3 highlight-text" id="result-date">22 juillet</p>
|
|
<p class="text-3xl" id="result-time">vers 05:12</p>
|
|
<div class="mt-4 pt-4 border-t border-blue-700">
|
|
<p class="text-sm text-blue-200">Fenêtre d'observation recommandée :</p>
|
|
<p class="font-semibold text-lg" id="result-window">20 au 24 Juillet</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="w-full">
|
|
<div class="border-b border-gray-300 mb-6">
|
|
<nav class="-mb-px flex flex-wrap justify-center gap-x-4 gap-y-2 sm:gap-x-6" aria-label="Tabs">
|
|
<button data-tab="predictions" class="tab-button active whitespace-nowrap py-3 px-1 border-b-2 font-medium text-base text-gray-500 border-transparent hover:border-gray-400">
|
|
Prédictions
|
|
</button>
|
|
<button data-tab="understand" class="tab-button whitespace-nowrap py-3 px-1 border-b-2 font-medium text-base text-gray-500 border-transparent hover:border-gray-400">
|
|
Comprendre
|
|
</button>
|
|
<button data-tab="observe" class="tab-button whitespace-nowrap py-3 px-1 border-b-2 font-medium text-base text-gray-500 border-transparent hover:border-gray-400">
|
|
Observer
|
|
</button>
|
|
<button data-tab="stories" class="tab-button whitespace-nowrap py-3 px-1 border-b-2 font-medium text-base text-gray-500 border-transparent hover:border-gray-400">
|
|
Histoires
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
|
|
<div id="tab-content">
|
|
<div id="predictions-content" class="tab-pane">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-blue-900 mb-4">Tableau des Prédictions</h2>
|
|
<p class="mb-6 text-gray-600">Retrouvez ici l'ensemble des dates et heures estimées du lever héliaque de Sirius pour tous les sites en Guadeloupe, de 2025 à 2029. Ces données sont des estimations pour des conditions idéales et constituent la meilleure base pour planifier vos observations.</p>
|
|
<div class="overflow-x-auto celestial-card p-4">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Lieu d'Observation</th>
|
|
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">2025</th>
|
|
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">2026</th>
|
|
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">2027</th>
|
|
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">2028</th>
|
|
<th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider">2029</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="predictions-table-body" class="bg-white divide-y divide-gray-200">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="understand-content" class="tab-pane hidden">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-blue-900 mb-4">Comprendre le Phénomène</h2>
|
|
<p class="mb-6 text-gray-600">Le lever héliaque n'est pas qu'un simple lever d'étoile. C'est un événement astronomique précis, fruit d'une danse cosmique entre la Terre, le Soleil et Sirius. Cette section vous donne les clés pour comprendre la science qui se cache derrière la poésie de ce "premier regard" annuel.</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
<div class="celestial-card p-6">
|
|
<h3 class="font-bold text-xl mb-2 text-blue-900">Définition</h3>
|
|
<p class="text-gray-600">Le lever héliaque est la première réapparition d'une étoile à l'aube après sa période d'invisibilité due à la proximité du Soleil. C'est un marqueur de temps naturel utilisé par de nombreuses civilisations anciennes.</p>
|
|
</div>
|
|
<div class="celestial-card p-6">
|
|
<h3 class="font-bold text-xl mb-2 text-blue-900">Arcus Visionis</h3>
|
|
<p class="text-gray-600">C'est l'angle clé ! Il s'agit de la hauteur négative du Soleil sous l'horizon, nécessaire pour que l'étoile devienne tout juste visible dans le ciel de l'aube. Pour la brillante Sirius, cet angle est d'environ 9° à 10°.</p>
|
|
</div>
|
|
<div class="celestial-card p-6">
|
|
<h3 class="font-bold text-xl mb-2 text-blue-900">Facteurs d'Influence</h3>
|
|
<p class="text-gray-600">La date exacte dépend de la brillance de l'étoile, de la latitude du lieu (qui change la géométrie du lever), et surtout de l'extinction atmosphérique (humidité, brume de sable) qui peut affaiblir la lumière de l'étoile.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="observe-content" class="tab-pane hidden">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-blue-900 mb-4">Guide Pratique d'Observation</h2>
|
|
<p class="mb-6 text-gray-600">Passer de la théorie à la pratique demande un peu de préparation. Cette section vous guide pour mettre toutes les chances de votre côté : choisir le bon équipement (le plus simple qui soit), utiliser un outil de simulation comme Stellarium et, surtout, comprendre les marges d'erreur pour ne pas manquer le spectacle.</p>
|
|
<div class="space-y-6">
|
|
<div class="celestial-card p-6">
|
|
<h3 class="font-bold text-xl mb-2 text-blue-900">Votre Équipement</h3>
|
|
<ul class="list-disc list-inside space-y-2 text-gray-600">
|
|
<li><span class="font-semibold">Vos yeux :</span> Le plus important ! Arrivez 20 minutes en avance pour les habituer à l'obscurité.</li>
|
|
<li><span class="font-semibold">Des jumelles (optionnel) :</span> Elles peuvent aider à repérer l'étoile dans les lueurs de l'aube.</li>
|
|
<li><span class="font-semibold">Une boussole ou une app smartphone :</span> Pour être certain de regarder vers l'Est-Sud-Est.</li>
|
|
<li><span class="font-semibold">Patience et vêtements chauds :</span> Les nuits peuvent être fraîches, même en juillet.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="celestial-card p-6">
|
|
<h3 class="font-bold text-xl mb-2 text-blue-900">Utiliser Stellarium (Logiciel Gratuit)</h3>
|
|
<ol class="list-decimal list-inside space-y-2 text-gray-600">
|
|
<li><span class="font-semibold">Configurez votre lieu (F6) :</span> Entrez la latitude et longitude du site choisi.</li>
|
|
<li><span class="font-semibold">Réglez la date (F5) :</span> Choisissez une date autour de celle prédite (ex: 22 juillet 2025) et une heure vers 5h00.</li>
|
|
<li><span class="font-semibold">Cherchez "Sirius" (F3) :</span> Le logiciel pointera vers l'étoile.</li>
|
|
<li><span class="font-semibold">Simulez :</span> Avancez le temps minute par minute pour voir Sirius se lever à l'Est avant que le ciel ne devienne trop clair.</li>
|
|
</ol>
|
|
</div>
|
|
<div class="celestial-card p-6 bg-amber-50 border border-amber-300">
|
|
<h3 class="font-bold text-xl mb-2 text-amber-800">Conseil Crucial : La Fenêtre d'Observation</h3>
|
|
<p class="text-amber-700">Les dates calculées sont pour un ciel parfait. La météo (nuages, brume) peut retarder la visibilité. <strong class="font-semibold">Commencez vos observations 2 jours AVANT la date prédite et continuez 2 à 3 jours APRÈS.</strong> Cette fenêtre de 4-5 jours maximise vos chances de succès !</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="stories-content" class="tab-pane hidden">
|
|
<h2 class="text-2xl md:text-3xl font-bold text-blue-900 mb-4">Sirius, Miroir des Cultures</h2>
|
|
<p class="mb-6 text-gray-600">Observer Sirius, c'est se connecter à une histoire millénaire. Pour de nombreuses cultures, en particulier africaines, son lever héliaque n'était pas un simple fait astronomique mais un événement spirituel et culturel majeur, annonciateur de renouveau et de vie. Découvrez ici quelques-unes de ces histoires fascinantes.</p>
|
|
<div class="space-y-6">
|
|
<div class="celestial-card p-6">
|
|
<h3 class="font-bold text-xl mb-2 text-blue-900">Égypte Antique : Sothis, l'Annonciatrice de Vie</h3>
|
|
<p class="text-gray-600">Pour les Égyptiens, le lever héliaque de Sirius (nommée Sothis) était l'événement le plus important de l'année. Il annonçait la crue du Nil, qui fertilisait les terres et assurait la survie du royaume. Ce phénomène marquait le Nouvel An et était associé à la déesse Isis, symbole de renaissance. C'était le véritable début du cycle de la vie.</p>
|
|
</div>
|
|
<div class="celestial-card p-6">
|
|
<h3 class="font-bold text-xl mb-2 text-blue-900">L'Énigme des Dogon du Mali</h3>
|
|
<p class="text-gray-600">Le peuple Dogon possède un savoir astronomique sur Sirius qui stupéfie les chercheurs. Leur tradition orale décrit Sirius comme un système double, avec une compagne invisible, très petite et très lourde (Sirius B), tournant autour de l'étoile principale en 50 ans. Des connaissances qui correspondent précisément aux découvertes modernes, et dont l'origine reste un fascinant mystère scientifique et culturel.</p>
|
|
</div>
|
|
<div class="celestial-card p-6">
|
|
<h3 class="font-bold text-xl mb-2 text-blue-900">Échos Stellaires Mondiaux</h3>
|
|
<p class="text-gray-600">Sirius a captivé le monde entier. Les Grecs l'appelaient "l'ardente" et son lever annonçait les chaleurs de la "canicule". Pour les navigateurs polynésiens, c'était une étoile guide essentielle pour leurs voyages dans le Pacifique. Elle est même mentionnée dans le Coran sous le nom d'al-Shi'ra. Observer Sirius, c'est partager un regard avec toute l'humanité.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<footer class="text-center py-6 mt-8 text-gray-500 text-sm">
|
|
<p>Application créée à partir du rapport "Sirius en Guadeloupe : Guide Astronomique et Culturel".</p>
|
|
<p>© 2025 - Levez les yeux vers le ciel.</p>
|
|
</footer>
|
|
|
|
<script>
|
|
const predictionsData = {
|
|
"Pointe des Châteaux": {"2025": "22 juillet, 05:12", "2026": "22 juillet, 05:12", "2027": "22 juillet, 05:13", "2028": "21 juillet, 05:13", "2029": "22 juillet, 05:14"},
|
|
"Pointe de la Grande Vigie": {"2025": "22 juillet, 05:11", "2026": "22 juillet, 05:12", "2027": "22 juillet, 05:12", "2028": "21 juillet, 05:12", "2029": "22 juillet, 05:13"},
|
|
"Duzer (Sainte-Rose)": {"2025": "22 juillet, 05:13", "2026": "22 juillet, 05:14", "2027": "22 juillet, 05:14", "2028": "21 juillet, 05:14", "2029": "22 juillet, 05:15"},
|
|
"Pointe du Vieux-Fort": {"2025": "22 juillet, 05:14", "2026": "22 juillet, 05:14", "2027": "22 juillet, 05:15", "2028": "21 juillet, 05:15", "2029": "22 juillet, 05:16"},
|
|
"Grande Pointe (Trois-Rivières)": {"2025": "22 juillet, 05:13", "2026": "22 juillet, 05:14", "2027": "22 juillet, 05:14", "2028": "21 juillet, 05:15", "2029": "22 juillet, 05:15"},
|
|
"Petit-Pérou": {"2025": "22 juillet, 05:14", "2026": "22 juillet, 05:14", "2027": "22 juillet, 05:15", "2028": "21 juillet, 05:15", "2029": "22 juillet, 05:16"},
|
|
"Saint-Félix (Le Gosier)": {"2025": "22 juillet, 05:13", "2026": "22 juillet, 05:13", "2027": "22 juillet, 05:14", "2028": "21 juillet, 05:14", "2029": "22 juillet, 05:15"}
|
|
};
|
|
|
|
const locations = Object.keys(predictionsData);
|
|
const years = ["2025", "2026", "2027", "2028", "2029"];
|
|
|
|
const locationSelect = document.getElementById('location-select');
|
|
const yearSelect = document.getElementById('year-select');
|
|
const resultLocation = document.getElementById('result-location');
|
|
const resultDate = document.getElementById('result-date');
|
|
const resultTime = document.getElementById('result-time');
|
|
const resultWindow = document.getElementById('result-window');
|
|
const predictionsTableBody = document.getElementById('predictions-table-body');
|
|
const tabs = document.querySelectorAll('.tab-button');
|
|
const tabPanes = document.querySelectorAll('.tab-pane');
|
|
|
|
function populateSelectors() {
|
|
locations.forEach(location => {
|
|
const option = document.createElement('option');
|
|
option.value = location;
|
|
option.textContent = location;
|
|
locationSelect.appendChild(option);
|
|
});
|
|
years.forEach(year => {
|
|
const option = document.createElement('option');
|
|
option.value = year;
|
|
option.textContent = year;
|
|
yearSelect.appendChild(option);
|
|
});
|
|
}
|
|
|
|
function updateDisplay() {
|
|
const selectedLocation = locationSelect.value;
|
|
const selectedYear = yearSelect.value;
|
|
const prediction = predictionsData[selectedLocation][selectedYear];
|
|
|
|
const [datePart, timePart] = prediction.split(', ');
|
|
|
|
resultLocation.textContent = selectedLocation;
|
|
resultDate.textContent = datePart;
|
|
resultTime.textContent = `vers ${timePart}`;
|
|
|
|
const day = parseInt(datePart.split(' ')[0]);
|
|
const month = datePart.split(' ')[1];
|
|
const windowStart = day - 2;
|
|
const windowEnd = day + 2;
|
|
resultWindow.textContent = `${windowStart} au ${windowEnd} ${month}`;
|
|
|
|
document.getElementById('result-display').classList.remove('scale-95');
|
|
document.getElementById('result-display').classList.add('scale-100');
|
|
|
|
updateTableHighlight(selectedLocation);
|
|
}
|
|
|
|
function populateTable() {
|
|
locations.forEach(location => {
|
|
const row = document.createElement('tr');
|
|
row.id = `row-${location.replace(/[^a-zA-Z0-9]/g, '-')}`;
|
|
row.className = 'transition-colors duration-300';
|
|
|
|
const locationCell = document.createElement('td');
|
|
locationCell.className = "px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900";
|
|
locationCell.textContent = location;
|
|
row.appendChild(locationCell);
|
|
|
|
years.forEach(year => {
|
|
const cell = document.createElement('td');
|
|
cell.className = "px-6 py-4 whitespace-nowrap text-sm text-gray-500 text-center";
|
|
const [datePart, timePart] = predictionsData[location][year].split(', ');
|
|
cell.innerHTML = `${datePart}<br><span class="text-xs">${timePart}</span>`;
|
|
row.appendChild(cell);
|
|
});
|
|
|
|
predictionsTableBody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
function updateTableHighlight(selectedLocation) {
|
|
document.querySelectorAll('#predictions-table-body tr').forEach(row => {
|
|
row.classList.remove('bg-amber-100');
|
|
});
|
|
const rowId = `row-${selectedLocation.replace(/[^a-zA-Z0-9]/g, '-')}`;
|
|
const activeRow = document.getElementById(rowId);
|
|
if (activeRow) {
|
|
activeRow.classList.add('bg-amber-100');
|
|
}
|
|
}
|
|
|
|
|
|
function handleTabClick(event) {
|
|
tabs.forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
event.currentTarget.classList.add('active');
|
|
|
|
tabPanes.forEach(pane => {
|
|
pane.classList.add('hidden');
|
|
});
|
|
|
|
const tabId = event.currentTarget.dataset.tab;
|
|
document.getElementById(`${tabId}-content`).classList.remove('hidden');
|
|
}
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
populateSelectors();
|
|
populateTable();
|
|
updateDisplay();
|
|
|
|
locationSelect.addEventListener('change', () => {
|
|
document.getElementById('result-display').classList.add('scale-95');
|
|
setTimeout(updateDisplay, 200);
|
|
});
|
|
yearSelect.addEventListener('change', () => {
|
|
document.getElementById('result-display').classList.add('scale-95');
|
|
setTimeout(updateDisplay, 200);
|
|
});
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', handleTabClick);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|