318 lines
17 KiB
HTML
318 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="fr">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Infographie : Le Lever Héliaque de Sirius en Guadeloupe</title>
|
||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></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;700;900&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||
|
|
<!-- Chosen Palette: Brilliant Blues -->
|
||
|
|
<!-- Application Structure Plan: The infographic follows a narrative scroll format. 1. Hook: Large title and key stats (Magnitude, Invisibility Period). 2. Science: Simplified explanation of the celestial mechanics with a custom HTML/CSS diagram for Arcus Visionis and cards for influencing factors. 3. Core Data: A central section with a Chart.js bar chart to visually compare the slight variations in observation times across Guadeloupe for a specific year, emphasizing the main date. 4. Practical Guide: A simple 3-step flowchart (HTML/CSS) for observation. 5. Cultural Depth: A two-column layout highlighting the stories from Egypt and the Dogon people, using a conceptual Donut chart to visualize the 50-year orbit of Sirius B. This tells a coherent story from what it is, to how to see it, to why it matters. -->
|
||
|
|
<!-- Visualization & Content Choices: Big Number (Magnitude) -> Goal: Inform -> Viz: Large Text -> Justification: High impact for a key stat. Arcus Visionis -> Goal: Organize/Inform -> Viz: HTML/CSS Diagram -> Justification: Clear, custom visual without SVG. Observation Times -> Goal: Compare -> Viz: Bar Chart (Chart.js) -> Justification: Visually shows the minor time differences between locations, label wrapping handles long names. Dogon Orbit -> Goal: Inform/Organize -> Viz: Donut Chart (Chart.js) -> Justification: A strong visual hook for a key cultural concept. Flowchart -> Goal: Organize -> Viz: HTML/CSS -> Justification: Simple, clear process visualization without Mermaid JS. -->
|
||
|
|
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: 'Inter', sans-serif;
|
||
|
|
background-color: #0B2447; /* Deep Blue */
|
||
|
|
color: #A5D7E8; /* Light Blue */
|
||
|
|
}
|
||
|
|
h1, h2, h3, .stat-number {
|
||
|
|
font-family: 'Playfair Display', serif;
|
||
|
|
}
|
||
|
|
.card {
|
||
|
|
background-color: #19376D; /* Medium Blue */
|
||
|
|
border: 1px solid #576CBC;
|
||
|
|
}
|
||
|
|
.highlight {
|
||
|
|
color: #FFFFFF;
|
||
|
|
text-shadow: 0 0 8px rgba(165, 215, 232, 0.7);
|
||
|
|
}
|
||
|
|
.chart-container {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
max-width: 600px;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
height: 350px;
|
||
|
|
max-height: 400px;
|
||
|
|
}
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.chart-container {
|
||
|
|
height: 400px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body class="antialiased">
|
||
|
|
|
||
|
|
<div class="max-w-4xl mx-auto p-4 md:p-8">
|
||
|
|
|
||
|
|
<header class="text-center my-12">
|
||
|
|
<h1 class="text-4xl md:text-6xl font-bold text-white tracking-wider">LE LEVER HÉLIAQUE DE SIRIUS</h1>
|
||
|
|
<p class="text-xl md:text-2xl mt-4 text-gray-300">Un rendez-vous cosmique entre Ciel, Science et Culture</p>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section class="grid grid-cols-1 md:grid-cols-2 gap-8 text-center my-16">
|
||
|
|
<div class="card rounded-lg p-6">
|
||
|
|
<p class="text-lg">Magnitude Apparente</p>
|
||
|
|
<p class="stat-number text-6xl font-bold my-2 highlight">-1.46</p>
|
||
|
|
<p class="text-sm">L'astre le plus brillant de notre ciel nocturne.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card rounded-lg p-6">
|
||
|
|
<p class="text-lg">Invisibilité Annuelle</p>
|
||
|
|
<p class="stat-number text-6xl font-bold my-2 highlight">~70</p>
|
||
|
|
<p class="text-sm">Jours où l'étoile est masquée par le Soleil (contexte égyptien).</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="science" class="my-16">
|
||
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-8 text-white">La Danse Céleste</h2>
|
||
|
|
<div class="card rounded-lg p-6 md:p-8">
|
||
|
|
<p class="text-lg mb-6">Le lever héliaque est la première réapparition de Sirius à l'aube après sa "disparition". Sa visibilité dépend d'un angle précis, l'<strong class="highlight">Arcus Visionis</strong> : le Soleil doit être assez bas sous l'horizon pour que la lumière de l'étoile perce le crépuscule.</p>
|
||
|
|
|
||
|
|
<div class="border-2 border-dashed border-blue-400 rounded-lg p-4 text-center my-6">
|
||
|
|
<div class="text-lg font-bold highlight">Arcus Visionis pour Sirius ≈ 9-10°</div>
|
||
|
|
<div class="relative h-24 mt-4 flex items-end justify-center">
|
||
|
|
<div class="absolute bottom-0 w-full h-px bg-cyan-200"></div>
|
||
|
|
<div class="absolute bottom-0 text-cyan-200 font-bold">HORIZON</div>
|
||
|
|
<div class="absolute" style="bottom: 20px; left: 25%;">
|
||
|
|
<span class="text-4xl">★</span>
|
||
|
|
<span class="block text-xs highlight">SIRIUS</span>
|
||
|
|
</div>
|
||
|
|
<div class="absolute" style="bottom: -25px; right: 25%;">
|
||
|
|
<span class="text-4xl text-yellow-300">☀️</span>
|
||
|
|
<span class="block text-xs text-yellow-300">SOLEIL</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="text-xs mt-8 text-gray-400">Le Soleil doit être à 9-10° sous l'horizon pour que Sirius devienne visible.</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-8 text-center">
|
||
|
|
<div>
|
||
|
|
<span class="text-4xl">✨</span>
|
||
|
|
<h3 class="font-bold text-white mt-2">Magnitude</h3>
|
||
|
|
<p class="text-sm">Plus une étoile est brillante, plus elle est facile à voir dans la lueur de l'aube.</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="text-4xl">🌍</span>
|
||
|
|
<h3 class="font-bold text-white mt-2">Latitude</h3>
|
||
|
|
<p class="text-sm">La position sur Terre change l'angle du lever et la durée du crépuscule.</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<span class="text-4xl">🌫️</span>
|
||
|
|
<h3 class="font-bold text-white mt-2">Atmosphère</h3>
|
||
|
|
<p class="text-sm">L'humidité ou la brume peuvent "éteindre" l'étoile et retarder sa visibilité.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="predictions" class="my-16">
|
||
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-2 text-white">L'Agenda Céleste 2025</h2>
|
||
|
|
<p class="text-center mb-8 text-gray-300">La date clé pour le lever héliaque en Guadeloupe est le <strong class="highlight">22 Juillet</strong>. L'heure précise varie légèrement selon le site.</p>
|
||
|
|
<div class="card rounded-lg p-6 md:p-8">
|
||
|
|
<div class="chart-container">
|
||
|
|
<canvas id="predictionsChart"></canvas>
|
||
|
|
</div>
|
||
|
|
<p class="text-xs text-center mt-4 text-gray-400">Ce graphique montre les variations de l'heure du lever pour chaque site en 2025. Notez comme les différences sont minimes, de l'ordre de quelques minutes seulement.</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="culture" class="my-16">
|
||
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-8 text-white">Miroir des Cultures</h2>
|
||
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||
|
|
<div class="card rounded-lg p-6">
|
||
|
|
<h3 class="text-2xl font-bold text-white mb-4">Égypte : Sothis, Source de Vie</h3>
|
||
|
|
<p>Pour les anciens Égyptiens, le lever héliaque de Sirius (Sothis) était l'événement majeur de l'année. Il annonçait la crue vitale du Nil, qui fertilisait les terres. Ce "retour" de l'étoile marquait le Nouvel An et symbolisait la renaissance, associée à la déesse Isis.</p>
|
||
|
|
</div>
|
||
|
|
<div class="card rounded-lg p-6 flex flex-col">
|
||
|
|
<h3 class="text-2xl font-bold text-white mb-4">Dogon : La Science des Étoiles</h3>
|
||
|
|
<p class="mb-4">Le peuple Dogon du Mali possède un savoir ancestral stupéfiant sur Sirius, décrivant une compagne invisible, "Po Tolo" (Sirius B), qui tourne autour de l'étoile principale en 50 ans.</p>
|
||
|
|
<div class="flex-grow flex items-center justify-center h-48 md:h-auto">
|
||
|
|
<div class="relative w-40 h-40">
|
||
|
|
<canvas id="dogonChart"></canvas>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="text-xs text-center mt-2 text-gray-400">Visualisation du cycle orbital de 50 ans de Sirius B.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section id="howto" class="my-16">
|
||
|
|
<h2 class="text-3xl md:text-4xl font-bold text-center mb-8 text-white">Votre Guide d'Observation</h2>
|
||
|
|
<div class="flex flex-col md:flex-row items-center justify-center gap-4 md:gap-0 text-center">
|
||
|
|
<div class="card p-6 rounded-lg w-full md:w-1/3">
|
||
|
|
<div class="text-4xl font-bold highlight">1</div>
|
||
|
|
<h3 class="font-bold text-white mt-2">Choisissez un Site</h3>
|
||
|
|
<p class="text-sm mt-1">Trouvez un lieu avec un horizon Est dégagé, loin des lumières de la ville.</p>
|
||
|
|
</div>
|
||
|
|
<div class="h-8 md:h-auto w-px md:w-16 bg-blue-400 border-dashed border-l-2 md:border-l-0 md:border-b-2 border-blue-400"></div>
|
||
|
|
<div class="card p-6 rounded-lg w-full md:w-1/3">
|
||
|
|
<div class="text-4xl font-bold highlight">2</div>
|
||
|
|
<h3 class="font-bold text-white mt-2">Préparez-vous</h3>
|
||
|
|
<p class="text-sm mt-1">Utilisez un planétarium (Stellarium) pour repérer Sirius et arrivez 20 min en avance.</p>
|
||
|
|
</div>
|
||
|
|
<div class="h-8 md:h-auto w-px md:w-16 bg-blue-400 border-dashed border-l-2 md:border-l-0 md:border-b-2 border-blue-400"></div>
|
||
|
|
<div class="card p-6 rounded-lg w-full md:w-1/3">
|
||
|
|
<div class="text-4xl font-bold highlight">3</div>
|
||
|
|
<h3 class="font-bold text-white mt-2">Soyez Patient</h3>
|
||
|
|
<p class="text-sm mt-1">La météo peut changer la donne. Observez sur plusieurs jours.</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="mt-8 border-2 border-amber-400 bg-amber-500 bg-opacity-10 rounded-lg p-6 text-center text-amber-300">
|
||
|
|
<h3 class="font-bold text-lg text-white">CONSEIL D'EXPERT : LA FENÊTRE D'OBSERVATION</h3>
|
||
|
|
<p class="mt-2">Les dates calculées sont idéales. Pour maximiser vos chances, observez du <strong class="text-white">20 au 25 Juillet</strong>. La météo est le facteur clé !</p>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<footer class="text-center text-gray-400 text-sm mt-16 py-8 border-t border-gray-700">
|
||
|
|
<p>Infographie inspirée du "Guide Astronomique et Culturel du Lever Héliaque de Sirius".</p>
|
||
|
|
<p>Levez les yeux.</p>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const wrapLabel = (label) => {
|
||
|
|
const maxLen = 16;
|
||
|
|
if (label.length <= maxLen) return label;
|
||
|
|
const words = label.replace(/ *\([^)]*\) */g, "").trim().split(' ');
|
||
|
|
let currentLine = '';
|
||
|
|
const lines = [];
|
||
|
|
words.forEach(word => {
|
||
|
|
if ((currentLine + ' ' + word).trim().length > maxLen) {
|
||
|
|
lines.push(currentLine.trim());
|
||
|
|
currentLine = word;
|
||
|
|
} else {
|
||
|
|
currentLine = (currentLine + ' ' + word).trim();
|
||
|
|
}
|
||
|
|
});
|
||
|
|
lines.push(currentLine.trim());
|
||
|
|
return lines;
|
||
|
|
};
|
||
|
|
|
||
|
|
const tooltipTitleCallback = (tooltipItems) => {
|
||
|
|
const item = tooltipItems[0];
|
||
|
|
let label = item.chart.data.labels[item.dataIndex];
|
||
|
|
if (Array.isArray(label)) {
|
||
|
|
return label.join(' ');
|
||
|
|
}
|
||
|
|
return label;
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderPredictionsChart = () => {
|
||
|
|
const ctx = document.getElementById('predictionsChart').getContext('2d');
|
||
|
|
const locations = [
|
||
|
|
"Pointe de la Grande Vigie", "Pointe des Châteaux", "Saint-Félix (Le Gosier)",
|
||
|
|
"Duzer (Sainte-Rose)", "Grande Pointe (Trois-Rivières)", "Petit-Pérou", "Pointe du Vieux-Fort"
|
||
|
|
];
|
||
|
|
const times2025 = ["05:11", "05:12", "05:13", "05:13", "05:13", "05:14", "05:14"];
|
||
|
|
|
||
|
|
const dataInMinutes = times2025.map(t => {
|
||
|
|
const [h, m] = t.split(':').map(Number);
|
||
|
|
return (h * 60 + m) - (5 * 60 + 10);
|
||
|
|
});
|
||
|
|
|
||
|
|
new Chart(ctx, {
|
||
|
|
type: 'bar',
|
||
|
|
data: {
|
||
|
|
labels: locations.map(l => wrapLabel(l)),
|
||
|
|
datasets: [{
|
||
|
|
label: 'Heure du lever héliaque (2025)',
|
||
|
|
data: dataInMinutes,
|
||
|
|
backgroundColor: '#576CBC',
|
||
|
|
borderColor: '#A5D7E8',
|
||
|
|
borderWidth: 1
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
responsive: true,
|
||
|
|
indexAxis: 'y',
|
||
|
|
scales: {
|
||
|
|
x: {
|
||
|
|
beginAtZero: true,
|
||
|
|
ticks: {
|
||
|
|
color: '#A5D7E8',
|
||
|
|
callback: function(value, index, values) {
|
||
|
|
const totalMinutes = value + (5 * 60 + 10);
|
||
|
|
const hours = Math.floor(totalMinutes / 60);
|
||
|
|
const minutes = totalMinutes % 60;
|
||
|
|
return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
grid: { color: 'rgba(87, 108, 188, 0.3)' }
|
||
|
|
},
|
||
|
|
y: {
|
||
|
|
ticks: { color: '#A5D7E8', font: { size: 10 } },
|
||
|
|
grid: { display: false }
|
||
|
|
}
|
||
|
|
},
|
||
|
|
plugins: {
|
||
|
|
legend: { display: false },
|
||
|
|
tooltip: {
|
||
|
|
callbacks: {
|
||
|
|
title: tooltipTitleCallback,
|
||
|
|
label: function(context) {
|
||
|
|
const totalMinutes = context.raw + (5 * 60 + 10);
|
||
|
|
const hours = Math.floor(totalMinutes / 60);
|
||
|
|
const minutes = totalMinutes % 60;
|
||
|
|
return `Heure: ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
const renderDogonChart = () => {
|
||
|
|
const ctx = document.getElementById('dogonChart').getContext('2d');
|
||
|
|
new Chart(ctx, {
|
||
|
|
type: 'doughnut',
|
||
|
|
data: {
|
||
|
|
labels: ['Cycle Orbital de Po Tolo (Sirius B)'],
|
||
|
|
datasets: [{
|
||
|
|
data: [50],
|
||
|
|
backgroundColor: ['#A5D7E8'],
|
||
|
|
borderColor: ['#19376D'],
|
||
|
|
borderWidth: 2,
|
||
|
|
hoverOffset: 4
|
||
|
|
}]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
maintainAspectRatio: false,
|
||
|
|
responsive: true,
|
||
|
|
cutout: '70%',
|
||
|
|
plugins: {
|
||
|
|
legend: { display: false },
|
||
|
|
tooltip: {
|
||
|
|
callbacks: {
|
||
|
|
label: function(context) {
|
||
|
|
return `Période: ${context.raw} ans`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
display: true,
|
||
|
|
text: '50 ANS',
|
||
|
|
color: '#FFFFFF',
|
||
|
|
font: { size: 24, family: "'Playfair Display', serif" },
|
||
|
|
position: 'bottom'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
renderPredictionsChart();
|
||
|
|
renderDogonChart();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|