Initial commit: Sirius en Guadeloupe - One page Svelte app
This commit is contained in:
sucupira
@@ -0,0 +1,167 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let visible = false;
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const section = document.getElementById('about');
|
||||
if (section) observer.observe(section);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
const features = [
|
||||
{
|
||||
icon: '🌟',
|
||||
title: 'L\'Étoile la Plus Brillante',
|
||||
description: 'Sirius brille avec une magnitude de -1.46, dominant notre ciel nocturne.'
|
||||
},
|
||||
{
|
||||
icon: '🌅',
|
||||
title: 'Le Lever Héliaque',
|
||||
description: 'Sa première apparition à l\'aube après 70 jours d\'invisibilité marque un événement cosmique.'
|
||||
},
|
||||
{
|
||||
icon: '🗿',
|
||||
title: 'Héritage Ancestral',
|
||||
description: 'De l\'Égypte ancienne aux Dogons du Mali, Sirius guide l\'humanité depuis des millénaires.'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<section id="about" class="about">
|
||||
<div class="pattern-kente"></div>
|
||||
|
||||
<div class="container">
|
||||
<div class="section-header" class:visible>
|
||||
<h2>Sirius, Wep Ronpet</h2>
|
||||
<p class="section-subtitle">
|
||||
Le Nouvel An Cosmique des Anciens
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="about-content" class:visible>
|
||||
<div class="about-text">
|
||||
<p>
|
||||
Le lever héliaque de Sirius n'est pas qu'un simple phénomène astronomique.
|
||||
C'est un rendez-vous millénaire entre l'humanité et le cosmos, un moment où
|
||||
science et spiritualité se rencontrent dans la lumière de l'aube.
|
||||
</p>
|
||||
<p>
|
||||
En Guadeloupe, observer ce phénomène nous connecte directement aux racines
|
||||
africaines, où Sirius était vénérée comme l'annonciatrice de la vie et du renouveau.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="features-grid">
|
||||
{#each features as feature, i}
|
||||
<div class="feature-card card" style="animation-delay: {i * 0.2}s">
|
||||
<div class="feature-icon">{feature.icon}</div>
|
||||
<h3>{feature.title}</h3>
|
||||
<p>{feature.description}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.about {
|
||||
position: relative;
|
||||
padding: var(--spacing-xl) 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pattern-kente {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.05;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out;
|
||||
}
|
||||
|
||||
.section-header.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: var(--color-primary);
|
||||
font-family: var(--font-heading);
|
||||
}
|
||||
|
||||
.about-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.3s;
|
||||
}
|
||||
|
||||
.about-content.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.about-text {
|
||||
max-width: 800px;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
text-align: center;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.about-text p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,241 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let visible = false;
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const section = document.getElementById('culture');
|
||||
if (section) observer.observe(section);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
const cultures = [
|
||||
{
|
||||
id: 'egypt',
|
||||
title: 'Égypte : Sothis, la Déesse du Nil',
|
||||
icon: '🏺',
|
||||
content: `Pour les anciens Égyptiens, le lever héliaque de Sirius (Sothis)
|
||||
était l'événement le plus important de l'année. Il annonçait la crue du Nil,
|
||||
source de vie et de fertilité. Ce "retour" de l'étoile marquait le Nouvel An
|
||||
et symbolisait la renaissance, associée à la déesse Isis.`
|
||||
},
|
||||
{
|
||||
id: 'dogon',
|
||||
title: 'Dogon : Les Gardiens du Savoir Stellaire',
|
||||
icon: '🌍',
|
||||
content: `Le peuple Dogon du Mali possède un savoir stupéfiant sur Sirius.
|
||||
Ils connaissaient l'existence de Sirius B, une naine blanche invisible à l'œil nu,
|
||||
bien avant sa découverte scientifique. Leur cycle rituel de 60 ans, le Sigui,
|
||||
est directement lié à leur compréhension du système de Sirius.`
|
||||
},
|
||||
{
|
||||
id: 'caribbean',
|
||||
title: 'Caraïbes : La Navigation Stellaire',
|
||||
icon: '⛵',
|
||||
content: `Dans les Caraïbes, Sirius a guidé les navigateurs depuis des siècles.
|
||||
Les peuples autochtones et les marins africains utilisaient son lever pour
|
||||
marquer les saisons et naviguer entre les îles. Aujourd'hui encore, elle reste
|
||||
un repère fondamental pour les pêcheurs traditionnels.`
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<section id="culture" class="culture">
|
||||
<div class="pattern-adinkra"></div>
|
||||
|
||||
<div class="container">
|
||||
<div class="section-header" class:visible>
|
||||
<h2>Sirius, Miroir des Cultures</h2>
|
||||
<p class="section-subtitle">
|
||||
Un héritage millénaire qui unit l'Afrique et les Caraïbes
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="cultures-grid" class:visible>
|
||||
{#each cultures as culture, i}
|
||||
<div class="culture-card card" style="animation-delay: {i * 0.2}s">
|
||||
<div class="culture-icon">{culture.icon}</div>
|
||||
<h3>{culture.title}</h3>
|
||||
<p>{culture.content}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="timeline" class:visible>
|
||||
<h3>Chronologie du Savoir</h3>
|
||||
<div class="timeline-items">
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">3000 BCE</div>
|
||||
<div class="timeline-content">
|
||||
<h4>Égypte Ancienne</h4>
|
||||
<p>Premier calendrier basé sur Sirius</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">XIIIe siècle</div>
|
||||
<div class="timeline-content">
|
||||
<h4>Migration Dogon</h4>
|
||||
<p>Préservation du savoir astronomique</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">XVe-XVIIe siècle</div>
|
||||
<div class="timeline-content">
|
||||
<h4>Traversée Atlantique</h4>
|
||||
<p>Le savoir africain voyage vers les Caraïbes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="timeline-item">
|
||||
<div class="timeline-date">2025</div>
|
||||
<div class="timeline-content">
|
||||
<h4>Renaissance</h4>
|
||||
<p>Redécouverte et célébration en Guadeloupe</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.culture {
|
||||
position: relative;
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: var(--gradient-dawn);
|
||||
}
|
||||
|
||||
.pattern-adinkra {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.cultures-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.3s;
|
||||
}
|
||||
|
||||
.cultures-grid.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.culture-card {
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.culture-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.5));
|
||||
}
|
||||
|
||||
.culture-card h3 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.timeline {
|
||||
position: relative;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.6s;
|
||||
}
|
||||
|
||||
.timeline.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.timeline h3 {
|
||||
text-align: center;
|
||||
color: var(--color-primary);
|
||||
font-size: 2rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.timeline-items {
|
||||
position: relative;
|
||||
padding-left: 40px;
|
||||
}
|
||||
|
||||
.timeline-items::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--gradient-sunrise);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing-md);
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -34px;
|
||||
top: 8px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
|
||||
}
|
||||
|
||||
.timeline-date {
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.timeline-content h4 {
|
||||
color: var(--color-light);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.timeline-content p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.timeline-items {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
left: -24px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<script>
|
||||
const currentYear = new Date().getFullYear();
|
||||
</script>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer-pattern pattern-kente"></div>
|
||||
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h3>Sirius en Guadeloupe</h3>
|
||||
<p>
|
||||
Un projet célébrant le patrimoine astronomique africain
|
||||
et caribéen à travers l'observation du lever héliaque de Sirius.
|
||||
</p>
|
||||
<div class="social-links">
|
||||
<a href="#" aria-label="Facebook">📘</a>
|
||||
<a href="#" aria-label="Twitter">🐦</a>
|
||||
<a href="#" aria-label="Instagram">📷</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>Liens Rapides</h4>
|
||||
<ul>
|
||||
<li><a href="#predictions">Calculateur</a></li>
|
||||
<li><a href="#science">Science</a></li>
|
||||
<li><a href="#culture">Culture</a></li>
|
||||
<li><a href="#observatory">Observer</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>Ressources</h4>
|
||||
<ul>
|
||||
<li><a href="https://stellarium.org" target="_blank" rel="noopener">Stellarium</a></li>
|
||||
<li><a href="#">Guide PDF</a></li>
|
||||
<li><a href="#">Références</a></li>
|
||||
<li><a href="#">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="footer-section">
|
||||
<h4>Prochaine Observation</h4>
|
||||
<div class="countdown">
|
||||
<div class="countdown-item">
|
||||
<div class="countdown-value">22</div>
|
||||
<div class="countdown-label">Juillet</div>
|
||||
</div>
|
||||
<div class="countdown-item">
|
||||
<div class="countdown-value">2025</div>
|
||||
<div class="countdown-label">05:12</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer-bottom">
|
||||
<p>© {currentYear} Sirius Gwada. Levez les yeux vers le ciel.</p>
|
||||
<p class="footer-quote">
|
||||
"Les étoiles sont les ancêtres qui veillent sur nous" - Proverbe africain
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.footer {
|
||||
position: relative;
|
||||
background: var(--color-dark);
|
||||
padding: var(--spacing-xl) 0 var(--spacing-md);
|
||||
border-top: 2px solid rgba(255, 215, 0, 0.3);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.footer-pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.03;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-lg);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.countdown {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.countdown-item {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
padding: 1rem;
|
||||
border-radius: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.countdown-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.countdown-label {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
text-align: center;
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
.footer-quote {
|
||||
margin-top: 0.5rem;
|
||||
font-style: italic;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.footer-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-links {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,190 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let canvas;
|
||||
let visible = false;
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
if (!canvas.hasAttribute('data-initialized')) {
|
||||
initGlobe();
|
||||
canvas.setAttribute('data-initialized', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const section = document.getElementById('globe-section');
|
||||
if (section) observer.observe(section);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
function initGlobe() {
|
||||
// Version simplifiée avec Canvas 2D au lieu de Three.js pour la performance
|
||||
const ctx = canvas.getContext('2d');
|
||||
const width = canvas.width = canvas.offsetWidth;
|
||||
const height = canvas.height = canvas.offsetHeight;
|
||||
|
||||
const centerX = width / 2;
|
||||
const centerY = height / 2;
|
||||
const radius = Math.min(width, height) * 0.35;
|
||||
|
||||
let rotation = 0;
|
||||
|
||||
const locations = [
|
||||
{ name: 'Guadeloupe', lat: 16.2650, lon: -61.5510, date: '22 Juillet' },
|
||||
{ name: 'Martinique', lat: 14.6415, lon: -61.0242, date: '23 Juillet' },
|
||||
{ name: 'Dakar', lat: 14.7167, lon: -17.4677, date: '23 Juillet' },
|
||||
{ name: 'Le Caire', lat: 30.0444, lon: 31.2357, date: '3 Août' },
|
||||
{ name: 'Kinshasa', lat: -4.4419, lon: 15.2663, date: '16 Juillet' }
|
||||
];
|
||||
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// Globe
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = 'rgba(255, 215, 0, 0.3)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
// Méridiens et parallèles
|
||||
ctx.strokeStyle = 'rgba(255, 215, 0, 0.1)';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
for (let i = 0; i < 6; i++) {
|
||||
const angle = (i / 6) * Math.PI;
|
||||
ctx.beginPath();
|
||||
ctx.ellipse(centerX, centerY, radius * Math.cos(angle), radius, 0, 0, Math.PI * 2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Points des villes
|
||||
locations.forEach((loc, i) => {
|
||||
const phi = (90 - loc.lat) * Math.PI / 180;
|
||||
const theta = (loc.lon + rotation) * Math.PI / 180;
|
||||
|
||||
const x = radius * Math.sin(phi) * Math.cos(theta);
|
||||
const y = radius * Math.cos(phi);
|
||||
const z = radius * Math.sin(phi) * Math.sin(theta);
|
||||
|
||||
// Ne dessiner que si visible (z > 0)
|
||||
if (z > 0) {
|
||||
const screenX = centerX + x;
|
||||
const screenY = centerY - y;
|
||||
|
||||
// Point
|
||||
ctx.beginPath();
|
||||
ctx.arc(screenX, screenY, 5, 0, Math.PI * 2);
|
||||
ctx.fillStyle = '#FFD700';
|
||||
ctx.fill();
|
||||
|
||||
// Glow
|
||||
const gradient = ctx.createRadialGradient(screenX, screenY, 0, screenX, screenY, 20);
|
||||
gradient.addColorStop(0, 'rgba(255, 215, 0, 0.8)');
|
||||
gradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(screenX - 20, screenY - 20, 40, 40);
|
||||
|
||||
// Label
|
||||
ctx.fillStyle = '#FFD700';
|
||||
ctx.font = '12px Inter';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(loc.name, screenX, screenY - 15);
|
||||
ctx.fillText(loc.date, screenX, screenY + 25);
|
||||
}
|
||||
});
|
||||
|
||||
rotation += 0.005;
|
||||
requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
draw();
|
||||
}
|
||||
</script>
|
||||
|
||||
<section id="globe-section" class="globe-section">
|
||||
<div class="container">
|
||||
<div class="section-header" class:visible>
|
||||
<h2>La Vague Planétaire de Sirius</h2>
|
||||
<p class="section-subtitle">
|
||||
Le lever héliaque progresse d'Est en Ouest à travers le monde
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="globe-container" class:visible>
|
||||
<canvas bind:this={canvas} class="globe-canvas"></canvas>
|
||||
|
||||
<div class="globe-info">
|
||||
<div class="info-card card">
|
||||
<h3>Le Phénomène Global</h3>
|
||||
<p>
|
||||
Le lever héliaque de Sirius n'est pas simultané sur Terre.
|
||||
Il progresse comme une vague, commençant dans l'hémisphère sud
|
||||
pour remonter vers le nord. Cette progression suit la géométrie
|
||||
céleste et dépend de la latitude de chaque lieu.
|
||||
</p>
|
||||
<p>
|
||||
En Guadeloupe, nous sommes privilégiés : le phénomène se produit
|
||||
fin juillet, dans des conditions météorologiques généralement favorables.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.globe-section {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: var(--gradient-dawn);
|
||||
}
|
||||
|
||||
.globe-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-lg);
|
||||
align-items: center;
|
||||
margin-top: var(--spacing-lg);
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.3s;
|
||||
}
|
||||
|
||||
.globe-container.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.globe-canvas {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
border-radius: 20px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-card p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.globe-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.globe-canvas {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,278 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let starsCanvas;
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
|
||||
onMount(() => {
|
||||
const ctx = starsCanvas.getContext('2d');
|
||||
const stars = [];
|
||||
|
||||
// Créer les étoiles
|
||||
for (let i = 0; i < 200; i++) {
|
||||
stars.push({
|
||||
x: Math.random() * starsCanvas.width,
|
||||
y: Math.random() * starsCanvas.height,
|
||||
size: Math.random() * 2,
|
||||
speed: Math.random() * 0.5 + 0.1,
|
||||
brightness: Math.random()
|
||||
});
|
||||
}
|
||||
|
||||
// Animation des étoiles
|
||||
const animate = () => {
|
||||
ctx.clearRect(0, 0, starsCanvas.width, starsCanvas.height);
|
||||
|
||||
stars.forEach(star => {
|
||||
// Effet parallaxe avec la souris
|
||||
const offsetX = (mouseX - 0.5) * star.speed * 20;
|
||||
const offsetY = (mouseY - 0.5) * star.speed * 20;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
star.x + offsetX,
|
||||
star.y + offsetY,
|
||||
star.size,
|
||||
0,
|
||||
Math.PI * 2
|
||||
);
|
||||
ctx.fillStyle = `rgba(255, 215, 0, ${star.brightness})`;
|
||||
ctx.fill();
|
||||
|
||||
// Animer la brillance
|
||||
star.brightness += (Math.random() - 0.5) * 0.05;
|
||||
star.brightness = Math.max(0.1, Math.min(1, star.brightness));
|
||||
});
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
// Redimensionner le canvas
|
||||
const resize = () => {
|
||||
starsCanvas.width = window.innerWidth;
|
||||
starsCanvas.height = window.innerHeight;
|
||||
};
|
||||
|
||||
resize();
|
||||
animate();
|
||||
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', resize);
|
||||
};
|
||||
});
|
||||
|
||||
const handleMouseMove = (e) => {
|
||||
mouseX = e.clientX / window.innerWidth;
|
||||
mouseY = e.clientY / window.innerHeight;
|
||||
};
|
||||
</script>
|
||||
|
||||
<section id="home" class="hero" on:mousemove={handleMouseMove}>
|
||||
<canvas bind:this={starsCanvas} class="stars-canvas"></canvas>
|
||||
|
||||
<div class="hero-pattern pattern-adinkra"></div>
|
||||
|
||||
<div class="hero-content">
|
||||
<div class="container">
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line">Sirius</span>
|
||||
<span class="title-line">en Guadeloupe</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
Le rendez-vous cosmique entre Ciel, Science et Culture
|
||||
</p>
|
||||
<p class="hero-date">
|
||||
Lever héliaque : <strong>22 Juillet 2025</strong>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#predictions" class="btn btn-primary">
|
||||
Découvrir les Prédictions
|
||||
</a>
|
||||
<a href="#about" class="btn btn-outline">
|
||||
En Savoir Plus
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<div class="sirius-glow"></div>
|
||||
<div class="ankh-symbol">☥</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scroll-indicator">
|
||||
<span>Défiler pour explorer</span>
|
||||
<div class="scroll-arrow">↓</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stars-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero-pattern {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0.1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-content .container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(3rem, 10vw, 6rem);
|
||||
line-height: 1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title-line {
|
||||
display: block;
|
||||
animation: fadeInUp 1s ease-out;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.title-line:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: clamp(1.2rem, 3vw, 1.5rem);
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1rem;
|
||||
animation: fadeInUp 1s ease-out 0.4s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.hero-date {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 1s ease-out 0.6s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
animation: fadeInUp 1s ease-out 0.8s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 2px solid var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.sirius-glow {
|
||||
position: absolute;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
|
||||
opacity: 0.5;
|
||||
animation: glow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.ankh-symbol {
|
||||
font-size: 15rem;
|
||||
color: var(--color-primary);
|
||||
animation: float 6s ease-in-out infinite;
|
||||
filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.5));
|
||||
}
|
||||
|
||||
.scroll-indicator {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
animation: fadeInUp 1s ease-out 1s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.scroll-arrow {
|
||||
font-size: 2rem;
|
||||
animation: bounce 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(10px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.hero-content .container {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.hero-cta {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,222 @@
|
||||
<script>
|
||||
export let activeSection = 'home';
|
||||
|
||||
let isMenuOpen = false;
|
||||
|
||||
const toggleMenu = () => {
|
||||
isMenuOpen = !isMenuOpen;
|
||||
};
|
||||
|
||||
const menuItems = [
|
||||
{ id: 'home', label: 'Accueil', icon: '🌟' },
|
||||
{ id: 'about', label: 'Découvrir', icon: '✨' },
|
||||
{ id: 'predictions', label: 'Prédictions', icon: '📅' },
|
||||
{ id: 'science', label: 'Science', icon: '🔭' },
|
||||
{ id: 'culture', label: 'Culture', icon: '🌍' },
|
||||
{ id: 'observatory', label: 'Observer', icon: '👁️' }
|
||||
];
|
||||
|
||||
const scrollToSection = (id) => {
|
||||
document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
|
||||
isMenuOpen = false;
|
||||
};
|
||||
</script>
|
||||
|
||||
<nav class="navbar" class:scrolled={activeSection !== 'home'}>
|
||||
<div class="container">
|
||||
<div class="nav-content">
|
||||
<a href="#home" class="logo" on:click|preventDefault={() => scrollToSection('home')}>
|
||||
<span class="logo-icon">☥</span>
|
||||
<span class="logo-text">Sirius Gwada</span>
|
||||
</a>
|
||||
|
||||
<button class="menu-toggle" on:click={toggleMenu} aria-label="Menu">
|
||||
<span class="hamburger" class:active={isMenuOpen}></span>
|
||||
</button>
|
||||
|
||||
<ul class="nav-menu" class:open={isMenuOpen}>
|
||||
{#each menuItems as item}
|
||||
<li>
|
||||
<a
|
||||
href="#{item.id}"
|
||||
class:active={activeSection === item.id}
|
||||
on:click|preventDefault={() => scrollToSection(item.id)}
|
||||
>
|
||||
<span class="nav-icon">{item.icon}</span>
|
||||
<span class="nav-label">{item.label}</span>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(26, 26, 46, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
transition: var(--transition-base);
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.navbar.scrolled {
|
||||
border-bottom-color: rgba(255, 215, 0, 0.2);
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: var(--color-primary);
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.5rem;
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.logo:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
font-size: 2rem;
|
||||
animation: rotate 20s linear infinite;
|
||||
}
|
||||
|
||||
.menu-toggle {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: block;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
position: relative;
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.hamburger::before,
|
||||
.hamburger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.hamburger::before {
|
||||
top: -8px;
|
||||
}
|
||||
|
||||
.hamburger::after {
|
||||
bottom: -8px;
|
||||
}
|
||||
|
||||
.hamburger.active {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.hamburger.active::before {
|
||||
transform: rotate(45deg);
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.hamburger.active::after {
|
||||
transform: rotate(-45deg);
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
gap: 2rem;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
text-decoration: none;
|
||||
color: var(--color-light);
|
||||
transition: var(--transition-base);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-menu a:hover,
|
||||
.nav-menu a.active {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-menu a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
transform: scaleX(0);
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.nav-menu a.active::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Mobile */
|
||||
@media (max-width: 768px) {
|
||||
.menu-toggle {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-menu {
|
||||
position: fixed;
|
||||
top: 70px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: rgba(26, 26, 46, 0.98);
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
transition: var(--transition-base);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.nav-menu.open {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,292 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let visible = false;
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const section = document.getElementById('observatory');
|
||||
if (section) observer.observe(section);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
const steps = [
|
||||
{
|
||||
number: 1,
|
||||
title: 'Choisir le Site',
|
||||
description: 'Trouvez un lieu avec un horizon Est dégagé, loin des lumières urbaines.',
|
||||
icon: '🏖️'
|
||||
},
|
||||
{
|
||||
number: 2,
|
||||
title: 'Se Préparer',
|
||||
description: 'Utilisez Stellarium pour repérer Sirius. Arrivez 20 minutes en avance.',
|
||||
icon: '🔭'
|
||||
},
|
||||
{
|
||||
number: 3,
|
||||
title: 'Observer',
|
||||
description: 'Regardez vers l\'Est-Sud-Est. Sirius apparaîtra brillante et scintillante.',
|
||||
icon: '👁️'
|
||||
},
|
||||
{
|
||||
number: 4,
|
||||
title: 'Être Patient',
|
||||
description: 'La météo peut changer. Observez sur plusieurs jours pour maximiser vos chances.',
|
||||
icon: '⏳'
|
||||
}
|
||||
];
|
||||
|
||||
const equipment = [
|
||||
{ item: 'Vos yeux', essential: true, description: 'L\'outil le plus important!' },
|
||||
{ item: 'Jumelles', essential: false, description: 'Utiles mais optionnelles' },
|
||||
{ item: 'Boussole/App', essential: true, description: 'Pour trouver l\'Est' },
|
||||
{ item: 'Vêtements chauds', essential: true, description: 'Les matins sont frais' },
|
||||
{ item: 'Lampe rouge', essential: false, description: 'Préserve la vision nocturne' },
|
||||
{ item: 'Carnet de notes', essential: false, description: 'Pour documenter l\'observation' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<section id="observatory" class="observatory">
|
||||
<div class="container">
|
||||
<div class="section-header" class:visible>
|
||||
<h2>Guide d'Observation</h2>
|
||||
<p class="section-subtitle">
|
||||
Votre manuel pratique pour réussir l'observation du lever héliaque
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="guide-content" class:visible>
|
||||
<div class="steps-section">
|
||||
<h3>Les Étapes Clés</h3>
|
||||
<div class="steps-grid">
|
||||
{#each steps as step}
|
||||
<div class="step-card card">
|
||||
<div class="step-number">{step.number}</div>
|
||||
<div class="step-icon">{step.icon}</div>
|
||||
<h4>{step.title}</h4>
|
||||
<p>{step.description}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="equipment-section">
|
||||
<h3>Équipement Recommandé</h3>
|
||||
<div class="equipment-grid">
|
||||
{#each equipment as equip}
|
||||
<div class="equipment-item" class:essential={equip.essential}>
|
||||
<div class="equipment-icon">
|
||||
{equip.essential ? '⭐' : '○'}
|
||||
</div>
|
||||
<div class="equipment-info">
|
||||
<h5>{equip.item}</h5>
|
||||
<p>{equip.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stellarium-guide card">
|
||||
<h3>Mini-Guide Stellarium</h3>
|
||||
<ol>
|
||||
<li><strong>Télécharger :</strong> stellarium.org (gratuit)</li>
|
||||
<li><strong>Configurer le lieu (F6) :</strong> Entrez les coordonnées de votre site</li>
|
||||
<li><strong>Régler la date (F5) :</strong> Choisissez le 22 juillet 2025, 5h00</li>
|
||||
<li><strong>Chercher Sirius (F3) :</strong> Le logiciel pointera l'étoile</li>
|
||||
<li><strong>Simuler :</strong> Avancez le temps pour voir le lever</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div class="tips-section">
|
||||
<h3>Conseils d'Expert</h3>
|
||||
<div class="tips-grid">
|
||||
<div class="tip-card card">
|
||||
<div class="tip-icon">🌤️</div>
|
||||
<h4>Météo</h4>
|
||||
<p>Surveillez les prévisions. Un ciel dégagé et sec est idéal.</p>
|
||||
</div>
|
||||
<div class="tip-card card">
|
||||
<div class="tip-icon">📍</div>
|
||||
<h4>Position</h4>
|
||||
<p>Sirius se lève à environ 105° (Est-Sud-Est) en Guadeloupe.</p>
|
||||
</div>
|
||||
<div class="tip-card card">
|
||||
<div class="tip-icon">👥</div>
|
||||
<h4>Groupe</h4>
|
||||
<p>Observez à plusieurs pour confirmer la première visibilité.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.observatory {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
|
||||
}
|
||||
|
||||
.guide-content {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.3s;
|
||||
}
|
||||
|
||||
.guide-content.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.guide-content h3 {
|
||||
color: var(--color-primary);
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* Steps */
|
||||
.steps-section {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.steps-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.step-card {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--gradient-sunrise);
|
||||
color: var(--color-dark);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.step-card h4 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Equipment */
|
||||
.equipment-section {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.equipment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.equipment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.equipment-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.equipment-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.equipment-item.essential .equipment-icon {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.equipment-info h5 {
|
||||
color: var(--color-light);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.equipment-info p {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
/* Stellarium Guide */
|
||||
.stellarium-guide {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.stellarium-guide h3 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.stellarium-guide ol {
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.stellarium-guide li {
|
||||
margin-bottom: 0.75rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Tips */
|
||||
.tips-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tip-card h4 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.steps-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,382 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let selectedLocation = 'Pointe des Châteaux';
|
||||
let selectedYear = '2025';
|
||||
let visible = false;
|
||||
|
||||
const predictionsData = {
|
||||
"Pointe des Châteaux": {
|
||||
coords: "16.2476°N, 61.1771°O",
|
||||
"2025": { date: "22 juillet", time: "05:12" },
|
||||
"2026": { date: "22 juillet", time: "05:12" },
|
||||
"2027": { date: "22 juillet", time: "05:13" },
|
||||
"2028": { date: "21 juillet", time: "05:13" },
|
||||
"2029": { date: "22 juillet", time: "05:14" }
|
||||
},
|
||||
"Pointe de la Grande Vigie": {
|
||||
coords: "16.5098°N, 61.4666°O",
|
||||
"2025": { date: "22 juillet", time: "05:11" },
|
||||
"2026": { date: "22 juillet", time: "05:12" },
|
||||
"2027": { date: "22 juillet", time: "05:12" },
|
||||
"2028": { date: "21 juillet", time: "05:12" },
|
||||
"2029": { date: "22 juillet", time: "05:13" }
|
||||
},
|
||||
"Duzer (Sainte-Rose)": {
|
||||
coords: "16.3361°N, 61.7430°O",
|
||||
"2025": { date: "22 juillet", time: "05:13" },
|
||||
"2026": { date: "22 juillet", time: "05:14" },
|
||||
"2027": { date: "22 juillet", time: "05:14" },
|
||||
"2028": { date: "21 juillet", time: "05:14" },
|
||||
"2029": { date: "22 juillet", time: "05:15" }
|
||||
},
|
||||
"Saint-Félix (Le Gosier)": {
|
||||
coords: "16.2005°N, 61.4605°O",
|
||||
"2025": { date: "22 juillet", time: "05:13" },
|
||||
"2026": { date: "22 juillet", time: "05:13" },
|
||||
"2027": { date: "22 juillet", time: "05:14" },
|
||||
"2028": { date: "21 juillet", time: "05:14" },
|
||||
"2029": { date: "22 juillet", time: "05:15" }
|
||||
},
|
||||
"Grande Pointe (Trois-Rivières)": {
|
||||
coords: "15.9696°N, 61.6308°O",
|
||||
"2025": { date: "22 juillet", time: "05:13" },
|
||||
"2026": { date: "22 juillet", time: "05:14" },
|
||||
"2027": { date: "22 juillet", time: "05:14" },
|
||||
"2028": { date: "21 juillet", time: "05:15" },
|
||||
"2029": { date: "22 juillet", time: "05:15" }
|
||||
},
|
||||
"Petit-Pérou": {
|
||||
coords: "16.0517°N, 61.5567°O",
|
||||
"2025": { date: "22 juillet", time: "05:14" },
|
||||
"2026": { date: "22 juillet", time: "05:14" },
|
||||
"2027": { date: "22 juillet", time: "05:15" },
|
||||
"2028": { date: "21 juillet", time: "05:15" },
|
||||
"2029": { date: "22 juillet", time: "05:16" }
|
||||
},
|
||||
"Pointe du Vieux-Fort": {
|
||||
coords: "15.9483°N, 61.7072°O",
|
||||
"2025": { date: "22 juillet", time: "05:14" },
|
||||
"2026": { date: "22 juillet", time: "05:14" },
|
||||
"2027": { date: "22 juillet", time: "05:15" },
|
||||
"2028": { date: "21 juillet", time: "05:15" },
|
||||
"2029": { date: "22 juillet", time: "05:16" }
|
||||
}
|
||||
};
|
||||
|
||||
$: currentPrediction = predictionsData[selectedLocation][selectedYear];
|
||||
$: observationWindow = calculateWindow(currentPrediction.date);
|
||||
|
||||
function calculateWindow(dateStr) {
|
||||
const day = parseInt(dateStr.split(' ')[0]);
|
||||
const month = dateStr.split(' ')[1];
|
||||
return `${day - 2} au ${day + 2} ${month}`;
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const section = document.getElementById('predictions');
|
||||
if (section) observer.observe(section);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
</script>
|
||||
|
||||
<section id="predictions" class="predictions">
|
||||
<div class="pattern-bogolan"></div>
|
||||
|
||||
<div class="container">
|
||||
<div class="section-header" class:visible>
|
||||
<h2>Calculateur de Lever Héliaque</h2>
|
||||
<p class="section-subtitle">
|
||||
Trouvez la date précise pour votre site d'observation
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="calculator-container" class:visible>
|
||||
<div class="calculator-inputs">
|
||||
<div class="input-group">
|
||||
<label for="location-select">Site d'observation</label>
|
||||
<select id="location-select" bind:value={selectedLocation}>
|
||||
{#each Object.keys(predictionsData) as location}
|
||||
<option value={location}>{location}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<small class="coords">{predictionsData[selectedLocation].coords}</small>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<label for="year-select">Année</label>
|
||||
<select id="year-select" bind:value={selectedYear}>
|
||||
{#each ['2025', '2026', '2027', '2028', '2029'] as year}
|
||||
<option value={year}>{year}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prediction-result card">
|
||||
<div class="result-header">
|
||||
<h3>{selectedLocation}</h3>
|
||||
<span class="year-badge">{selectedYear}</span>
|
||||
</div>
|
||||
|
||||
<div class="result-content">
|
||||
<div class="date-display">
|
||||
<div class="date-icon">📅</div>
|
||||
<div class="date-text">
|
||||
<div class="date-value">{currentPrediction.date}</div>
|
||||
<div class="date-label">Date du lever héliaque</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="time-display">
|
||||
<div class="time-icon">⏰</div>
|
||||
<div class="time-text">
|
||||
<div class="time-value">{currentPrediction.time}</div>
|
||||
<div class="time-label">Heure locale (UTC-4)</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="window-display">
|
||||
<div class="window-icon">👁️</div>
|
||||
<div class="window-text">
|
||||
<div class="window-value">{observationWindow}</div>
|
||||
<div class="window-label">Fenêtre d'observation recommandée</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-tip">
|
||||
<p>💡 <strong>Conseil :</strong> Arrivez 20 minutes avant l'heure indiquée et observez vers l'Est-Sud-Est</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="info-cards" class:visible>
|
||||
<div class="info-card card">
|
||||
<h4>Conditions Idéales</h4>
|
||||
<ul>
|
||||
<li>Horizon Est dégagé</li>
|
||||
<li>Ciel clair sans nuages</li>
|
||||
<li>Faible pollution lumineuse</li>
|
||||
<li>Temps sec (peu d'humidité)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-card card">
|
||||
<h4>Équipement Recommandé</h4>
|
||||
<ul>
|
||||
<li>Jumelles (optionnel)</li>
|
||||
<li>Application de boussole</li>
|
||||
<li>Vêtements chauds</li>
|
||||
<li>Stellarium (préparation)</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="info-card card">
|
||||
<h4>Météo & Visibilité</h4>
|
||||
<p>La brume de sable sahélienne peut retarder la visibilité.
|
||||
Surveillez les prévisions météo et privilégiez les matins secs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.predictions {
|
||||
position: relative;
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: var(--gradient-dawn);
|
||||
}
|
||||
|
||||
.pattern-bogolan {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.calculator-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
max-width: 800px;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.3s;
|
||||
}
|
||||
|
||||
.calculator-container.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.calculator-inputs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.input-group select {
|
||||
padding: 0.75rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border: 2px solid rgba(255, 215, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
color: var(--color-light);
|
||||
font-size: 1rem;
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.input-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.coords {
|
||||
font-size: 0.85rem;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.prediction-result {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-color: var(--color-primary);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.result-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.result-header h3 {
|
||||
color: var(--color-primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.year-badge {
|
||||
background: var(--gradient-sunrise);
|
||||
color: var(--color-dark);
|
||||
padding: 0.25rem 1rem;
|
||||
border-radius: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.result-content {
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.date-display,
|
||||
.time-display,
|
||||
.window-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.date-icon,
|
||||
.time-icon,
|
||||
.window-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.date-value,
|
||||
.time-value,
|
||||
.window-value {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.date-label,
|
||||
.time-label,
|
||||
.window-label {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.result-tip {
|
||||
margin-top: var(--spacing-sm);
|
||||
padding: 1rem;
|
||||
background: rgba(255, 107, 53, 0.2);
|
||||
border-radius: 10px;
|
||||
border-left: 4px solid var(--color-accent);
|
||||
}
|
||||
|
||||
.info-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.6s;
|
||||
}
|
||||
|
||||
.info-cards.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.info-card h4 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-card ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info-card li {
|
||||
padding: 0.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-card li::before {
|
||||
content: '✦';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.calculator-inputs {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,375 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let visible = false;
|
||||
let activeTab = 'mechanics';
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const section = document.getElementById('science');
|
||||
if (section) observer.observe(section);
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
const tabs = [
|
||||
{ id: 'mechanics', label: 'Mécanique Céleste', icon: '🌌' },
|
||||
{ id: 'arcus', label: 'Arcus Visionis', icon: '📐' },
|
||||
{ id: 'factors', label: 'Facteurs d\'Influence', icon: '🌡️' }
|
||||
];
|
||||
</script>
|
||||
|
||||
<section id="science" class="science">
|
||||
<div class="container">
|
||||
<div class="section-header" class:visible>
|
||||
<h2>La Science du Lever Héliaque</h2>
|
||||
<p class="section-subtitle">
|
||||
Comprendre la danse cosmique entre Terre, Soleil et Sirius
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="science-content" class:visible>
|
||||
<div class="tabs">
|
||||
{#each tabs as tab}
|
||||
<button
|
||||
class="tab-button"
|
||||
class:active={activeTab === tab.id}
|
||||
on:click={() => activeTab = tab.id}
|
||||
>
|
||||
<span class="tab-icon">{tab.icon}</span>
|
||||
<span class="tab-label">{tab.label}</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="tab-content">
|
||||
{#if activeTab === 'mechanics'}
|
||||
<div class="content-section">
|
||||
<h3>Le Ballet Cosmique</h3>
|
||||
<p>
|
||||
Le lever héliaque est le fruit d'une chorégraphie céleste précise.
|
||||
Pendant environ 70 jours, Sirius reste invisible, cachée par l'éclat du Soleil.
|
||||
Son retour à l'aube marque un moment unique où l'étoile se lève juste avant
|
||||
le Soleil, visible quelques instants dans les lueurs du crépuscule matinal.
|
||||
</p>
|
||||
|
||||
<div class="diagram card">
|
||||
<div class="celestial-body sun">
|
||||
<span>☀️</span>
|
||||
<label>Soleil</label>
|
||||
</div>
|
||||
<div class="orbit-path"></div>
|
||||
<div class="celestial-body earth">
|
||||
<span>🌍</span>
|
||||
<label>Terre</label>
|
||||
</div>
|
||||
<div class="celestial-body sirius">
|
||||
<span>⭐</span>
|
||||
<label>Sirius</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
La Terre, dans son mouvement orbital annuel, modifie notre perspective
|
||||
sur les étoiles. Quand le Soleil se trouve entre nous et Sirius,
|
||||
l'étoile devient invisible. C'est seulement quand l'angle devient
|
||||
favorable que Sirius réapparaît.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if activeTab === 'arcus'}
|
||||
<div class="content-section">
|
||||
<h3>L'Arc de Visibilité</h3>
|
||||
<p>
|
||||
L'Arcus Visionis est l'angle critique : le Soleil doit être à environ
|
||||
9-10° sous l'horizon pour que Sirius devienne visible. C'est un équilibre
|
||||
délicat entre la brillance de l'étoile et la luminosité du ciel.
|
||||
</p>
|
||||
|
||||
<div class="arcus-diagram card">
|
||||
<div class="horizon-line">
|
||||
<span>Horizon</span>
|
||||
</div>
|
||||
<div class="angle-indicator">
|
||||
<div class="angle-arc"></div>
|
||||
<span class="angle-value">9-10°</span>
|
||||
</div>
|
||||
<div class="sirius-position">
|
||||
<span>⭐ Sirius</span>
|
||||
</div>
|
||||
<div class="sun-position">
|
||||
<span>☀️ Soleil</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Pour Sirius, avec sa magnitude exceptionnelle de -1.46, cet angle
|
||||
est relativement faible comparé à d'autres étoiles moins brillantes.
|
||||
C'est pourquoi elle est l'une des premières à être visible à l'aube.
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if activeTab === 'factors'}
|
||||
<div class="content-section">
|
||||
<h3>Les Variables en Jeu</h3>
|
||||
|
||||
<div class="factors-grid">
|
||||
<div class="factor-card card">
|
||||
<div class="factor-icon">🌟</div>
|
||||
<h4>Magnitude</h4>
|
||||
<p>
|
||||
Sirius brille à -1.46, la rendant visible même dans des conditions
|
||||
difficiles. Plus une étoile est brillante, plus tôt elle perce
|
||||
les lueurs de l'aube.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="factor-card card">
|
||||
<div class="factor-icon">🗺️</div>
|
||||
<h4>Latitude</h4>
|
||||
<p>
|
||||
À 16°N en Guadeloupe, les astres se lèvent presque verticalement.
|
||||
Cette géométrie tropicale influence la durée du crépuscule et
|
||||
la visibilité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="factor-card card">
|
||||
<div class="factor-icon">💨</div>
|
||||
<h4>Atmosphère</h4>
|
||||
<p>
|
||||
L'humidité caribéenne et les brumes de sable peuvent retarder
|
||||
la visibilité de plusieurs jours. Un ciel sec et clair est idéal.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.science {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: linear-gradient(135deg, #0a0e27 0%, #1a1a2e 100%);
|
||||
}
|
||||
|
||||
.science-content {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.3s;
|
||||
}
|
||||
|
||||
.science-content.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: var(--spacing-lg);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid rgba(255, 215, 0, 0.3);
|
||||
border-radius: 50px;
|
||||
color: var(--color-light);
|
||||
cursor: pointer;
|
||||
transition: var(--transition-base);
|
||||
}
|
||||
|
||||
.tab-button:hover,
|
||||
.tab-button.active {
|
||||
background: rgba(255, 215, 0, 0.2);
|
||||
border-color: var(--color-primary);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.content-section h3 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.content-section p {
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* Diagramme orbital */
|
||||
.diagram {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
margin: 2rem 0;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.celestial-body {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.celestial-body span {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.celestial-body label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.sun {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.earth {
|
||||
top: 20%;
|
||||
left: 20%;
|
||||
}
|
||||
|
||||
.sirius {
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
}
|
||||
|
||||
.orbit-path {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 2px dashed rgba(255, 215, 0, 0.3);
|
||||
border-radius: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* Diagramme Arcus */
|
||||
.arcus-diagram {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
margin: 2rem 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.horizon-line {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 2px;
|
||||
background: var(--color-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.horizon-line span {
|
||||
background: var(--color-dark);
|
||||
padding: 0 1rem;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.sirius-position {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
.sun-position {
|
||||
position: absolute;
|
||||
bottom: 20%;
|
||||
right: 30%;
|
||||
}
|
||||
|
||||
.angle-indicator {
|
||||
position: absolute;
|
||||
bottom: 50%;
|
||||
right: 40%;
|
||||
}
|
||||
|
||||
.angle-arc {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 2px solid var(--color-accent);
|
||||
border-radius: 50%;
|
||||
border-bottom: none;
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.angle-value {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: -30px;
|
||||
color: var(--color-accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Grille des facteurs */
|
||||
.factors-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.factor-card {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.factor-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.factor-card h4 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tabs {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.diagram {
|
||||
height: 250px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user