✨ Version 1.5.0 - AnimeJS intégration complète
- Loader animé avec progression - Hero: étoiles filantes, patterns animés, entrée progressive - Navigation: transitions fluides, menu mobile amélioré - Prédictions: animations de calcul et résultats - Globe: vague planétaire animée, particules, progression temporelle - Observatory: timeline automatique, animations d'équipement - Performance: GPU acceleration, lazy loading - Mobile-first: toutes animations optimisées
This commit is contained in:
sucupira
@@ -0,0 +1,39 @@
|
||||
# Changelog
|
||||
|
||||
## [1.5.0] - 2024-01-07
|
||||
|
||||
### 🚀 Nouvelles fonctionnalités
|
||||
- **Intégration d'AnimeJS** pour des animations fluides et performantes
|
||||
- **Loader animé** au chargement de l'application avec barre de progression
|
||||
- **Animations avancées** :
|
||||
- Hero : Entrée progressive des éléments, étoiles filantes, patterns africains animés
|
||||
- Navigation : Transitions fluides, menu mobile amélioré
|
||||
- Prédictions : Calculateur avec animations de sélection et résultats
|
||||
- Globe : Vague planétaire animée avec particules et progression temporelle
|
||||
- **Effets visuels** :
|
||||
- Effet parallaxe amélioré sur le ciel étoilé
|
||||
- Hover animations sur les boutons avec effet élastique
|
||||
- Shimmer effect sur la timeline
|
||||
- Pulsation des marqueurs actifs sur le globe
|
||||
|
||||
### 🎨 Améliorations design
|
||||
- **Mobile-first** : Toutes les animations optimisées pour mobile
|
||||
- **Performance** : Animations GPU-accelerated avec transform et opacity
|
||||
- **Interactivité** : Feedback visuel immédiat sur toutes les interactions
|
||||
- **Accessibilité** : Respect de prefers-reduced-motion
|
||||
|
||||
### 🛠️ Technique
|
||||
- AnimeJS 3.2.1 intégré
|
||||
- Timeline orchestration pour les animations complexes
|
||||
- Optimisation des animations Canvas
|
||||
- Lazy loading des animations lourdes
|
||||
|
||||
## [1.0.0] - 2024-01-07
|
||||
|
||||
### Version initiale
|
||||
- Application Svelte avec design panafricain/caribéen
|
||||
- Calculateur de prédictions pour 7 sites en Guadeloupe
|
||||
- Globe interactif avec GeoJSON
|
||||
- Support multilingue (FR, EN, HT)
|
||||
- Sections : Science, Culture, Dogons, Observatoire
|
||||
- Déploiement GitHub Pages
|
||||
@@ -1,6 +1,7 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { initLanguage } from './lib/i18n.js';
|
||||
import Loader from './components/Loader.svelte';
|
||||
import Hero from './components/Hero.svelte';
|
||||
import Navigation from './components/Navigation.svelte';
|
||||
import About from './components/About.svelte';
|
||||
@@ -43,6 +44,7 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<Loader />
|
||||
<Navigation {activeSection} />
|
||||
|
||||
<main>
|
||||
|
||||
+268
-160
@@ -1,18 +1,18 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import anime from 'animejs/lib/anime.es.js';
|
||||
|
||||
let canvas;
|
||||
let visible = false;
|
||||
let ctx;
|
||||
let animationId;
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
if (entry.isIntersecting && !ctx) {
|
||||
visible = true;
|
||||
if (!canvas.hasAttribute('data-initialized')) {
|
||||
initGlobe();
|
||||
canvas.setAttribute('data-initialized', 'true');
|
||||
}
|
||||
initGlobe();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -20,14 +20,17 @@
|
||||
const section = document.getElementById('geojson-section');
|
||||
if (section) observer.observe(section);
|
||||
|
||||
return () => observer.disconnect();
|
||||
return () => {
|
||||
observer.disconnect();
|
||||
if (animationId) cancelAnimationFrame(animationId);
|
||||
};
|
||||
});
|
||||
|
||||
async function initGlobe() {
|
||||
const ctx = canvas.getContext('2d');
|
||||
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;
|
||||
@@ -37,6 +40,23 @@
|
||||
let isDragging = false;
|
||||
let lastMouseX = 0;
|
||||
let waveAnimation = 0;
|
||||
let waveProgress = 0;
|
||||
// Animation d'entrée
|
||||
anime.timeline({
|
||||
easing: 'easeOutQuad'
|
||||
})
|
||||
.add({
|
||||
targets: canvas,
|
||||
scale: [0.8, 1],
|
||||
opacity: [0, 1],
|
||||
duration: 1200
|
||||
})
|
||||
.add({
|
||||
targets: '.globe-info',
|
||||
translateX: [50, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 1000
|
||||
}, '-=600');
|
||||
|
||||
// Charger les données GeoJSON des continents
|
||||
let worldData = null;
|
||||
@@ -47,31 +67,61 @@
|
||||
console.error('Erreur chargement GeoJSON:', error);
|
||||
}
|
||||
|
||||
// Données des lieux
|
||||
// Données des lieux avec animation de vague
|
||||
const locations = [
|
||||
{ name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', day: 178 },
|
||||
{ name: 'Kinshasa', lat: -4.4419, lon: 15.2663, date: '16 Juillet', day: 197 },
|
||||
{ name: 'Guadeloupe', lat: 16.2650, lon: -61.5510, date: '22 Juillet', day: 203 },
|
||||
{ name: 'Martinique', lat: 14.6415, lon: -61.0242, date: '23 Juillet', day: 204 },
|
||||
{ name: 'Dakar', lat: 14.7167, lon: -17.4677, date: '23 Juillet', day: 204 },
|
||||
{ name: 'Abidjan', lat: 5.3600, lon: -4.0083, date: '28 Juillet', day: 209 },
|
||||
{ name: 'Le Caire', lat: 30.0444, lon: 31.2357, date: '3 Août', day: 215 },
|
||||
{ name: 'Paris', lat: 48.8566, lon: 2.3522, date: '12 Août', day: 224 }
|
||||
{ name: 'La Réunion', lat: -21.1151, lon: 55.5364, date: '27 Juin', color: '#FF6B35', day: 178 },
|
||||
{ name: 'Kinshasa', lat: -4.4419, lon: 15.2663, date: '16 Juillet', color: '#FFA500', day: 197 },
|
||||
{ name: 'Guadeloupe', lat: 16.2650, lon: -61.5510, date: '22 Juillet', color: '#FFD700', day: 203 },
|
||||
{ name: 'Martinique', lat: 14.6415, lon: -61.0242, date: '23 Juillet', color: '#FFD700', day: 204 },
|
||||
{ name: 'Dakar', lat: 14.7167, lon: -17.4677, date: '23 Juillet', color: '#FFE44D', day: 204 },
|
||||
{ name: 'Le Caire', lat: 30.0444, lon: 31.2357, date: '3 Août', color: '#FFFACD', day: 215 }
|
||||
];
|
||||
|
||||
// Gérer les interactions
|
||||
canvas.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
zoom += e.deltaY * -0.001;
|
||||
zoom = Math.min(Math.max(0.5, zoom), 2);
|
||||
// Animation de la progression de la vague
|
||||
anime({
|
||||
targets: { progress: 0 },
|
||||
progress: 365,
|
||||
duration: 30000,
|
||||
easing: 'linear',
|
||||
loop: true,
|
||||
update: function(anim) {
|
||||
waveProgress = anim.animations[0].currentValue;
|
||||
}
|
||||
});
|
||||
|
||||
// Particules pour l'effet de vague
|
||||
const particles = [];
|
||||
for (let i = 0; i < 50; i++) {
|
||||
particles.push({
|
||||
angle: Math.random() * Math.PI * 2,
|
||||
radius: radius + Math.random() * 50,
|
||||
size: Math.random() * 3 + 1,
|
||||
speed: Math.random() * 0.02 + 0.01,
|
||||
opacity: 0
|
||||
});
|
||||
}
|
||||
|
||||
// Animation des particules
|
||||
particles.forEach((particle, i) => {
|
||||
anime({
|
||||
targets: particle,
|
||||
opacity: [0, 0.8, 0],
|
||||
radius: [radius, radius + 100],
|
||||
duration: 3000,
|
||||
delay: i * 60,
|
||||
easing: 'easeOutQuad',
|
||||
loop: true
|
||||
});
|
||||
});
|
||||
|
||||
// Gestion de la souris
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
isDragging = true;
|
||||
lastMouseX = e.clientX;
|
||||
canvas.style.cursor = 'grabbing';
|
||||
});
|
||||
|
||||
window.addEventListener('mousemove', (e) => {
|
||||
canvas.addEventListener('mousemove', (e) => {
|
||||
if (isDragging) {
|
||||
const deltaX = e.clientX - lastMouseX;
|
||||
rotation -= deltaX * 0.01;
|
||||
@@ -81,199 +131,232 @@
|
||||
|
||||
window.addEventListener('mouseup', () => {
|
||||
isDragging = false;
|
||||
canvas.style.cursor = 'grab';
|
||||
});
|
||||
|
||||
// Fonction pour projeter les coordonnées
|
||||
// Zoom avec la molette
|
||||
canvas.addEventListener('wheel', (e) => {
|
||||
e.preventDefault();
|
||||
const zoomDelta = e.deltaY > 0 ? 0.9 : 1.1;
|
||||
const newZoom = zoom * zoomDelta;
|
||||
|
||||
anime({
|
||||
targets: { zoom },
|
||||
zoom: Math.max(0.5, Math.min(3, newZoom)),
|
||||
duration: 300,
|
||||
easing: 'easeOutQuad',
|
||||
update: function(anim) {
|
||||
zoom = anim.animations[0].currentValue;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Projection 3D
|
||||
function project(lon, lat, r) {
|
||||
const phi = (90 - lat) * Math.PI / 180;
|
||||
const theta = (-lon - rotation * 57.3) * Math.PI / 180;
|
||||
const theta = (lon + rotation) * Math.PI / 180;
|
||||
|
||||
const x = r * Math.sin(phi) * Math.cos(theta);
|
||||
const y = r * Math.cos(phi);
|
||||
const z = r * Math.sin(phi) * Math.sin(theta);
|
||||
|
||||
return { x: centerX + x, y: centerY - y, z: z };
|
||||
}
|
||||
|
||||
// Dessiner un chemin GeoJSON
|
||||
function drawPath(coordinates, ctx, radius) {
|
||||
ctx.beginPath();
|
||||
let started = false;
|
||||
|
||||
coordinates.forEach(([lon, lat], i) => {
|
||||
const p = project(lon, lat, radius);
|
||||
if (p.z > -radius * 0.3) {
|
||||
if (!started) {
|
||||
ctx.moveTo(p.x, p.y);
|
||||
started = true;
|
||||
} else {
|
||||
ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return started;
|
||||
return {
|
||||
x: centerX + x * zoom,
|
||||
y: centerY - y * zoom,
|
||||
z: z,
|
||||
visible: z > 0
|
||||
};
|
||||
}
|
||||
|
||||
// Dessiner le globe
|
||||
function draw() {
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
const currentRadius = radius * zoom;
|
||||
// Fond avec dégradé
|
||||
const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, radius * zoom);
|
||||
gradient.addColorStop(0, 'rgba(10, 22, 40, 0.2)');
|
||||
gradient.addColorStop(1, 'rgba(10, 22, 40, 0.8)');
|
||||
ctx.fillStyle = gradient;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// Ombre du globe
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX + 5, centerY + 5, currentRadius, 0, Math.PI * 2);
|
||||
ctx.arc(centerX + 10, centerY + 10, radius * zoom, 0, Math.PI * 2);
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
|
||||
ctx.filter = 'blur(10px)';
|
||||
ctx.fill();
|
||||
ctx.restore();
|
||||
|
||||
// Océan
|
||||
// Globe principal
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = '#4A90E2';
|
||||
ctx.fill();
|
||||
|
||||
// Gradient pour l'effet 3D
|
||||
const gradient = ctx.createRadialGradient(
|
||||
centerX - currentRadius * 0.3,
|
||||
centerY - currentRadius * 0.3,
|
||||
ctx.arc(centerX, centerY, radius * zoom, 0, Math.PI * 2);
|
||||
const globeGradient = ctx.createRadialGradient(
|
||||
centerX - radius * 0.3 * zoom,
|
||||
centerY - radius * 0.3 * zoom,
|
||||
0,
|
||||
centerX,
|
||||
centerY,
|
||||
currentRadius
|
||||
centerX, centerY, radius * zoom
|
||||
);
|
||||
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.3)');
|
||||
gradient.addColorStop(1, 'rgba(0, 0, 0, 0.2)');
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
|
||||
ctx.fillStyle = gradient;
|
||||
globeGradient.addColorStop(0, '#1a3a5a');
|
||||
globeGradient.addColorStop(0.5, '#0f2847');
|
||||
globeGradient.addColorStop(1, '#0a1628');
|
||||
ctx.fillStyle = globeGradient;
|
||||
ctx.fill();
|
||||
|
||||
// Dessiner les continents depuis GeoJSON
|
||||
if (worldData && worldData.features) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = '#228B22';
|
||||
ctx.strokeStyle = '#1F5F1F';
|
||||
ctx.lineWidth = 0.5;
|
||||
// Grille de latitude/longitude avec animation
|
||||
ctx.strokeStyle = 'rgba(255, 215, 0, 0.1)';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
// Lignes de latitude
|
||||
for (let lat = -80; lat <= 80; lat += 20) {
|
||||
ctx.beginPath();
|
||||
for (let lon = -180; lon <= 180; lon += 5) {
|
||||
const p = project(lon, lat, radius);
|
||||
if (p.visible) {
|
||||
if (lon === -180) {
|
||||
ctx.moveTo(p.x, p.y);
|
||||
} else {
|
||||
ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Lignes de longitude
|
||||
for (let lon = -180; lon <= 180; lon += 30) {
|
||||
ctx.beginPath();
|
||||
for (let lat = -90; lat <= 90; lat += 5) {
|
||||
const p = project(lon, lat, radius);
|
||||
if (p.visible) {
|
||||
if (lat === -90) {
|
||||
ctx.moveTo(p.x, p.y);
|
||||
} else {
|
||||
ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Dessiner les continents
|
||||
if (worldData) {
|
||||
ctx.strokeStyle = '#4CAF50';
|
||||
ctx.fillStyle = 'rgba(76, 175, 80, 0.3)';
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
worldData.features.forEach(feature => {
|
||||
if (feature.geometry.type === 'Polygon') {
|
||||
feature.geometry.coordinates.forEach(ring => {
|
||||
if (drawPath(ring, ctx, currentRadius)) {
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
});
|
||||
drawPolygon(feature.geometry.coordinates[0]);
|
||||
} else if (feature.geometry.type === 'MultiPolygon') {
|
||||
feature.geometry.coordinates.forEach(polygon => {
|
||||
polygon.forEach(ring => {
|
||||
if (drawPath(ring, ctx, currentRadius)) {
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
});
|
||||
drawPolygon(polygon[0]);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
// Grille
|
||||
ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// Méridiens
|
||||
for (let lon = -180; lon <= 180; lon += 30) {
|
||||
const coords = [];
|
||||
for (let lat = -90; lat <= 90; lat += 5) {
|
||||
coords.push([lon, lat]);
|
||||
}
|
||||
drawPath(coords, ctx, currentRadius);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Parallèles
|
||||
for (let lat = -60; lat <= 60; lat += 30) {
|
||||
const coords = [];
|
||||
for (let lon = -180; lon <= 180; lon += 5) {
|
||||
coords.push([lon, lat]);
|
||||
}
|
||||
drawPath(coords, ctx, currentRadius);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Bordure
|
||||
ctx.beginPath();
|
||||
ctx.arc(centerX, centerY, currentRadius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
// Animation de la vague
|
||||
waveAnimation += 0.02;
|
||||
const waveDay = ((Math.sin(waveAnimation) + 1) / 2) * 46 + 178;
|
||||
|
||||
// Dessiner les points
|
||||
locations.forEach((loc, i) => {
|
||||
const p = project(loc.lon, loc.lat, currentRadius);
|
||||
|
||||
if (p.z > -currentRadius * 0.3) {
|
||||
const isActive = waveDay >= loc.day;
|
||||
const isNear = Math.abs(waveDay - loc.day) < 5;
|
||||
|
||||
// Effet de vague
|
||||
if (isNear && p.z > 0) {
|
||||
const waveSize = 40 * (1 - Math.abs(waveDay - loc.day) / 5);
|
||||
const waveGradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, waveSize);
|
||||
waveGradient.addColorStop(0, 'rgba(255, 215, 0, 0.8)');
|
||||
waveGradient.addColorStop(0.5, 'rgba(255, 215, 0, 0.3)');
|
||||
waveGradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
|
||||
ctx.fillStyle = waveGradient;
|
||||
ctx.fillRect(p.x - waveSize, p.y - waveSize, waveSize * 2, waveSize * 2);
|
||||
}
|
||||
|
||||
// Point
|
||||
const opacity = p.z > 0 ? 1 : 0.3;
|
||||
ctx.globalAlpha = opacity;
|
||||
// Dessiner les particules de la vague
|
||||
particles.forEach(particle => {
|
||||
const p = project(
|
||||
particle.angle * 180 / Math.PI - 180,
|
||||
Math.sin(Date.now() * 0.001 * particle.speed) * 30,
|
||||
particle.radius
|
||||
);
|
||||
|
||||
if (p.visible && particle.opacity > 0) {
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, isActive ? 6 : 4, 0, Math.PI * 2);
|
||||
ctx.fillStyle = isActive ? '#FFD700' : '#666666';
|
||||
ctx.arc(p.x, p.y, particle.size, 0, Math.PI * 2);
|
||||
ctx.fillStyle = `rgba(255, 215, 0, ${particle.opacity})`;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = isActive ? '#FFFFFF' : '#999999';
|
||||
}
|
||||
});
|
||||
|
||||
// Dessiner les marqueurs avec effet de pulsation
|
||||
locations.forEach((location, index) => {
|
||||
const p = project(location.lon, location.lat, radius);
|
||||
|
||||
if (p.visible) {
|
||||
// Vérifier si la vague est passée
|
||||
const isActive = waveProgress >= location.day && waveProgress <= location.day + 10;
|
||||
const scale = isActive ? 1 + Math.sin(Date.now() * 0.005) * 0.3 : 1;
|
||||
|
||||
// Cercle de base
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, 8 * scale, 0, Math.PI * 2);
|
||||
ctx.fillStyle = location.color;
|
||||
ctx.fill();
|
||||
ctx.strokeStyle = '#fff';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
|
||||
// Label
|
||||
if (p.z > 0) {
|
||||
ctx.fillStyle = isActive ? '#FFD700' : '#999999';
|
||||
ctx.font = `${12 * zoom}px Inter`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(loc.name, p.x, p.y - 12);
|
||||
ctx.font = `${10 * zoom}px Inter`;
|
||||
ctx.fillText(loc.date, p.x, p.y + 22);
|
||||
// Onde de propagation si actif
|
||||
if (isActive) {
|
||||
const waveRadius = 20 + (Date.now() * 0.02) % 30;
|
||||
const waveOpacity = 1 - (waveRadius - 20) / 30;
|
||||
ctx.beginPath();
|
||||
ctx.arc(p.x, p.y, waveRadius, 0, Math.PI * 2);
|
||||
ctx.strokeStyle = `rgba(255, 215, 0, ${waveOpacity * 0.5})`;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
ctx.globalAlpha = 1;
|
||||
// Label
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = 'bold 12px Inter';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(location.name, p.x, p.y - 15);
|
||||
|
||||
// Date si proche
|
||||
if (Math.abs(waveProgress - location.day) < 20) {
|
||||
ctx.font = '10px Inter';
|
||||
ctx.fillStyle = location.color;
|
||||
ctx.fillText(location.date, p.x, p.y + 25);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Indicateur de progression de la vague
|
||||
const currentDate = new Date(2025, 0, 1);
|
||||
currentDate.setDate(currentDate.getDate() + Math.floor(waveProgress));
|
||||
|
||||
ctx.fillStyle = 'rgba(255, 215, 0, 0.8)';
|
||||
ctx.font = 'bold 16px Inter';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(
|
||||
`Progression de la vague : ${currentDate.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long' })}`,
|
||||
centerX, height - 30
|
||||
);
|
||||
|
||||
// Rotation automatique
|
||||
if (!isDragging) {
|
||||
rotation -= 0.002;
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw);
|
||||
animationId = requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function drawPolygon(coordinates) {
|
||||
ctx.beginPath();
|
||||
let firstPoint = true;
|
||||
|
||||
coordinates.forEach(coord => {
|
||||
const p = project(coord[0], coord[1], radius);
|
||||
if (p.visible) {
|
||||
if (firstPoint) {
|
||||
ctx.moveTo(p.x, p.y);
|
||||
firstPoint = false;
|
||||
} else {
|
||||
ctx.lineTo(p.x, p.y);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
draw();
|
||||
}
|
||||
</script>
|
||||
|
||||
<section id="geojson-section" class="globe-section">
|
||||
<div class="container">
|
||||
<div class="section-header" class:visible>
|
||||
@@ -357,6 +440,8 @@
|
||||
background: radial-gradient(circle at center, #0a192f 0%, #020c1b 100%);
|
||||
cursor: grab;
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.globe-canvas:active {
|
||||
@@ -371,6 +456,11 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.globe-info {
|
||||
opacity: 0;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
.info-card h3 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1rem;
|
||||
@@ -396,6 +486,24 @@
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-radius: 8px;
|
||||
border-left: 3px solid var(--color-primary);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.timeline-entry::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -100%;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.3), transparent);
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { left: -100%; }
|
||||
100% { left: 100%; }
|
||||
}
|
||||
|
||||
.timeline-entry .date {
|
||||
|
||||
+158
-47
@@ -1,15 +1,81 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from '../lib/i18n.js';
|
||||
import anime from 'animejs/lib/anime.es.js';
|
||||
|
||||
let starsCanvas;
|
||||
let mouseX = 0.5;
|
||||
let mouseY = 0.5;
|
||||
let heroSection;
|
||||
|
||||
onMount(() => {
|
||||
const ctx = starsCanvas.getContext('2d');
|
||||
const stars = [];
|
||||
const starCount = 150;
|
||||
const shootingStars = [];
|
||||
|
||||
// Animation d'entrée avec AnimeJS
|
||||
anime.timeline({
|
||||
easing: 'easeOutQuad'
|
||||
})
|
||||
.add({
|
||||
targets: '.title-line',
|
||||
translateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 1200,
|
||||
delay: anime.stagger(200)
|
||||
})
|
||||
.add({
|
||||
targets: '.hero-subtitle',
|
||||
translateY: [30, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 800
|
||||
}, '-=600')
|
||||
.add({
|
||||
targets: '.hero-description',
|
||||
translateY: [30, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 800
|
||||
}, '-=400')
|
||||
.add({
|
||||
targets: '.hero-date',
|
||||
translateY: [30, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 800
|
||||
}, '-=400')
|
||||
.add({
|
||||
targets: '.hero-cta .btn',
|
||||
scale: [0.8, 1],
|
||||
opacity: [0, 1],
|
||||
duration: 600,
|
||||
delay: anime.stagger(100)
|
||||
}, '-=400');
|
||||
|
||||
// Animation des patterns africains
|
||||
anime({
|
||||
targets: '.pattern-kente',
|
||||
translateX: [0, 200],
|
||||
duration: 30000,
|
||||
easing: 'linear',
|
||||
loop: true
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '.pattern-adinkra',
|
||||
rotate: 360,
|
||||
duration: 40000,
|
||||
easing: 'linear',
|
||||
loop: true
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '.pattern-bogolan',
|
||||
scale: [1, 1.2, 1],
|
||||
opacity: [0.05, 0.15, 0.05],
|
||||
duration: 20000,
|
||||
easing: 'easeInOutSine',
|
||||
loop: true
|
||||
});
|
||||
|
||||
// Attendre que le DOM soit prêt
|
||||
setTimeout(() => {
|
||||
@@ -27,9 +93,22 @@
|
||||
y: Math.random() * starsCanvas.height,
|
||||
size: Math.random() * 2,
|
||||
brightness: Math.random(),
|
||||
speed: 0.1 + Math.random() * 0.5
|
||||
speed: 0.1 + Math.random() * 0.5,
|
||||
pulseSpeed: 2000 + Math.random() * 3000
|
||||
});
|
||||
}
|
||||
|
||||
// Animer les étoiles avec AnimeJS
|
||||
stars.forEach((star, i) => {
|
||||
anime({
|
||||
targets: star,
|
||||
brightness: [0.1, 1, 0.1],
|
||||
duration: star.pulseSpeed,
|
||||
easing: 'easeInOutSine',
|
||||
loop: true,
|
||||
delay: i * 20
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
@@ -44,11 +123,18 @@
|
||||
const offsetX = (mouseX - 0.5) * 20;
|
||||
const offsetY = (mouseY - 0.5) * 20;
|
||||
|
||||
// Dessiner les étoiles
|
||||
stars.forEach(star => {
|
||||
// Mouvement subtil
|
||||
star.x += Math.sin(Date.now() * 0.0001 * star.speed) * 0.5;
|
||||
star.y += Math.cos(Date.now() * 0.0001 * star.speed) * 0.3;
|
||||
|
||||
// Garder dans les limites
|
||||
if (star.x < 0) star.x = starsCanvas.width;
|
||||
if (star.x > starsCanvas.width) star.x = 0;
|
||||
if (star.y < 0) star.y = starsCanvas.height;
|
||||
if (star.y > starsCanvas.height) star.y = 0;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(
|
||||
star.x + offsetX,
|
||||
@@ -59,12 +145,39 @@
|
||||
);
|
||||
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));
|
||||
});
|
||||
|
||||
// Dessiner les étoiles filantes
|
||||
shootingStars.forEach((star, index) => {
|
||||
if (star.opacity <= 0) {
|
||||
shootingStars.splice(index, 1);
|
||||
return;
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(star.x, star.y);
|
||||
ctx.lineTo(star.x - star.vx * 20, star.y - star.vy * 20);
|
||||
ctx.strokeStyle = `rgba(255, 215, 0, ${star.opacity})`;
|
||||
ctx.lineWidth = star.size;
|
||||
ctx.stroke();
|
||||
|
||||
star.x += star.vx;
|
||||
star.y += star.vy;
|
||||
star.opacity -= 0.02;
|
||||
});
|
||||
|
||||
// Créer occasionnellement une étoile filante
|
||||
if (Math.random() < 0.01 && shootingStars.length < 3) {
|
||||
shootingStars.push({
|
||||
x: Math.random() * starsCanvas.width,
|
||||
y: Math.random() * starsCanvas.height * 0.5,
|
||||
vx: 5 + Math.random() * 10,
|
||||
vy: 2 + Math.random() * 5,
|
||||
size: 1 + Math.random() * 2,
|
||||
opacity: 1
|
||||
});
|
||||
}
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
};
|
||||
|
||||
@@ -81,9 +194,28 @@
|
||||
mouseX = (e.clientX - rect.left) / rect.width;
|
||||
mouseY = (e.clientY - rect.top) / rect.height;
|
||||
};
|
||||
|
||||
// Animation du bouton au survol
|
||||
function handleButtonHover(e) {
|
||||
anime({
|
||||
targets: e.currentTarget,
|
||||
scale: 1.05,
|
||||
duration: 300,
|
||||
easing: 'easeOutElastic(1, .5)'
|
||||
});
|
||||
}
|
||||
|
||||
function handleButtonLeave(e) {
|
||||
anime({
|
||||
targets: e.currentTarget,
|
||||
scale: 1,
|
||||
duration: 300,
|
||||
easing: 'easeOutElastic(1, .5)'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<section id="home" class="hero" on:mousemove={handleMouseMove}>
|
||||
<section id="home" class="hero" on:mousemove={handleMouseMove} bind:this={heroSection}>
|
||||
<canvas bind:this={starsCanvas} class="stars-canvas"></canvas>
|
||||
|
||||
<div class="hero-pattern">
|
||||
@@ -110,10 +242,20 @@
|
||||
{$t('hero_date')}<strong>{$t('hero_date_value')}</strong>
|
||||
</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#predictions" class="btn btn-primary">
|
||||
<a
|
||||
href="#predictions"
|
||||
class="btn btn-primary"
|
||||
on:mouseenter={handleButtonHover}
|
||||
on:mouseleave={handleButtonLeave}
|
||||
>
|
||||
{$t('hero_cta_predictions')}
|
||||
</a>
|
||||
<a href="#about" class="btn btn-outline">
|
||||
<a
|
||||
href="#about"
|
||||
class="btn btn-outline"
|
||||
on:mouseenter={handleButtonHover}
|
||||
on:mouseleave={handleButtonLeave}
|
||||
>
|
||||
{$t('hero_cta_learn')}
|
||||
</a>
|
||||
</div>
|
||||
@@ -181,7 +323,6 @@
|
||||
transparent 10px,
|
||||
transparent 20px
|
||||
);
|
||||
animation: slidePattern 30s linear infinite;
|
||||
}
|
||||
|
||||
.pattern-adinkra {
|
||||
@@ -190,7 +331,6 @@
|
||||
radial-gradient(circle at 80% 80%, var(--color-secondary) 2px, transparent 2px),
|
||||
radial-gradient(circle at 50% 50%, var(--color-accent) 3px, transparent 3px);
|
||||
background-size: 50px 50px;
|
||||
animation: rotatePattern 40s linear infinite;
|
||||
}
|
||||
|
||||
.pattern-bogolan {
|
||||
@@ -202,22 +342,6 @@
|
||||
);
|
||||
background-size: 100px 100px;
|
||||
opacity: 0.05;
|
||||
animation: pulsePattern 20s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes slidePattern {
|
||||
from { transform: translateX(0); }
|
||||
to { transform: translateX(200px); }
|
||||
}
|
||||
|
||||
@keyframes rotatePattern {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes pulsePattern {
|
||||
0%, 100% { opacity: 0.05; }
|
||||
50% { opacity: 0.15; }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
@@ -244,12 +368,10 @@
|
||||
.title-line {
|
||||
display: block;
|
||||
opacity: 0;
|
||||
animation: fadeInUp 1s ease-out forwards;
|
||||
}
|
||||
|
||||
.title-line:nth-child(2) {
|
||||
color: var(--color-primary);
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
@@ -257,23 +379,20 @@
|
||||
color: var(--color-primary);
|
||||
font-family: var(--font-heading);
|
||||
margin-bottom: 0.5rem;
|
||||
animation: fadeInUp 1s ease-out 0.4s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: clamp(1rem, 2.5vw, 1.2rem);
|
||||
color: var(--color-light);
|
||||
margin-bottom: 1rem;
|
||||
animation: fadeInUp 1s ease-out 0.5s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hero-date {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
animation: fadeInUp 1s ease-out 0.6s;
|
||||
animation-fill-mode: both;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.hero-date strong {
|
||||
@@ -286,8 +405,11 @@
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
animation: fadeInUp 1s ease-out 0.8s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.btn {
|
||||
opacity: 0;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
@@ -301,17 +423,6 @@
|
||||
color: var(--color-dark);
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 10vw, 4rem);
|
||||
|
||||
@@ -0,0 +1,141 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import anime from 'animejs/lib/anime.es.js';
|
||||
|
||||
let loading = true;
|
||||
let progress = 0;
|
||||
|
||||
onMount(() => {
|
||||
// Animation de la barre de progression
|
||||
anime({
|
||||
targets: { value: 0 },
|
||||
value: 100,
|
||||
duration: 2000,
|
||||
easing: 'easeInOutQuad',
|
||||
update: function(anim) {
|
||||
progress = Math.round(anim.animations[0].currentValue);
|
||||
},
|
||||
complete: function() {
|
||||
setTimeout(() => {
|
||||
loading = false;
|
||||
// Animation de sortie
|
||||
anime({
|
||||
targets: '.loader',
|
||||
opacity: [1, 0],
|
||||
duration: 600,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
|
||||
// Animation des étoiles du loader
|
||||
anime({
|
||||
targets: '.loader-star',
|
||||
rotate: 360,
|
||||
duration: 2000,
|
||||
easing: 'linear',
|
||||
loop: true
|
||||
});
|
||||
|
||||
// Animation du texte
|
||||
anime({
|
||||
targets: '.loader-text span',
|
||||
translateY: [-20, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 800,
|
||||
delay: anime.stagger(100),
|
||||
easing: 'easeOutElastic(1, .5)'
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if loading}
|
||||
<div class="loader">
|
||||
<div class="loader-content">
|
||||
<div class="loader-star">⭐</div>
|
||||
<div class="loader-text">
|
||||
<span>S</span>
|
||||
<span>i</span>
|
||||
<span>r</span>
|
||||
<span>i</span>
|
||||
<span>u</span>
|
||||
<span>s</span>
|
||||
</div>
|
||||
<div class="progress-bar">
|
||||
<div class="progress-fill" style="width: {progress}%"></div>
|
||||
</div>
|
||||
<div class="progress-text">{progress}%</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--color-dark);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loader-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.loader-star {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 1rem;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.loader-text {
|
||||
font-size: 3rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 2rem;
|
||||
letter-spacing: 0.5rem;
|
||||
}
|
||||
|
||||
.loader-text span {
|
||||
display: inline-block;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
width: 200px;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto 1rem;
|
||||
}
|
||||
|
||||
.progress-fill {
|
||||
height: 100%;
|
||||
background: var(--color-primary);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.progress-text {
|
||||
color: var(--color-light);
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.loader-text {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.loader-star {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,15 +1,57 @@
|
||||
<script>
|
||||
import { t } from '../lib/i18n.js';
|
||||
import LanguageSelector from './LanguageSelector.svelte';
|
||||
import anime from 'animejs/lib/anime.es.js';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let activeSection = 'home';
|
||||
|
||||
let isMenuOpen = false;
|
||||
let navbar;
|
||||
|
||||
const toggleMenu = () => {
|
||||
isMenuOpen = !isMenuOpen;
|
||||
|
||||
if (isMenuOpen) {
|
||||
anime({
|
||||
targets: '.nav-menu',
|
||||
translateX: [300, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 400,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: '.nav-menu li',
|
||||
translateX: [50, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 600,
|
||||
delay: anime.stagger(50),
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
// Animation d'entrée de la navbar
|
||||
anime({
|
||||
targets: navbar,
|
||||
translateY: [-100, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 800,
|
||||
easing: 'easeOutQuad'
|
||||
});
|
||||
|
||||
// Animation du logo
|
||||
anime({
|
||||
targets: '.logo-icon',
|
||||
rotate: [0, 360],
|
||||
duration: 2000,
|
||||
delay: 500,
|
||||
easing: 'easeInOutQuad'
|
||||
});
|
||||
});
|
||||
|
||||
const menuItems = [
|
||||
{ id: 'home', label: 'nav_home', icon: '🌟' },
|
||||
{ id: 'about', label: 'nav_about', icon: '✨' },
|
||||
@@ -25,7 +67,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<nav class="navbar" class:scrolled={activeSection !== 'home'}>
|
||||
<nav class="navbar" class:scrolled={activeSection !== 'home'} bind:this={navbar}>
|
||||
<div class="container">
|
||||
<div class="nav-content">
|
||||
<a href="#home" class="logo" on:click|preventDefault={() => scrollToSection('home')}>
|
||||
|
||||
+309
-166
@@ -1,13 +1,83 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import anime from 'animejs/lib/anime.es.js';
|
||||
|
||||
let visible = false;
|
||||
let activePhase = 0;
|
||||
|
||||
const observationPhases = [
|
||||
{
|
||||
time: '04h30',
|
||||
title: 'Préparation',
|
||||
description: 'Arrivez sur site, laissez vos yeux s\'adapter',
|
||||
icon: '🌙'
|
||||
},
|
||||
{
|
||||
time: '05h00',
|
||||
title: 'Recherche',
|
||||
description: 'Cherchez vers l\'Est-Sud-Est, près de l\'horizon',
|
||||
icon: '🔭'
|
||||
},
|
||||
{
|
||||
time: '05h15',
|
||||
title: 'Apparition',
|
||||
description: 'Sirius émerge de la lueur de l\'aube',
|
||||
icon: '⭐'
|
||||
},
|
||||
{
|
||||
time: '05h30',
|
||||
title: 'Observation',
|
||||
description: 'Moment optimal pour contempler',
|
||||
icon: '✨'
|
||||
}
|
||||
];
|
||||
|
||||
const equipment = [
|
||||
{ item: 'Jumelles', essential: false, description: '7x50 ou 10x50 recommandées' },
|
||||
{ item: 'Lampe rouge', essential: true, description: 'Préserve la vision nocturne' },
|
||||
{ item: 'Boussole', essential: true, description: 'Pour trouver l\'Est' },
|
||||
{ item: 'Vêtements chauds', essential: true, description: 'Les matins sont frais' },
|
||||
{ item: 'Carnet de notes', essential: false, description: 'Pour documenter l\'observation' }
|
||||
];
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
|
||||
// Animation d'entrée
|
||||
anime.timeline({
|
||||
easing: 'easeOutQuad'
|
||||
})
|
||||
.add({
|
||||
targets: '.section-header',
|
||||
translateY: [30, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 800
|
||||
})
|
||||
.add({
|
||||
targets: '.timeline-container',
|
||||
translateX: [-50, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 1000
|
||||
}, '-=400')
|
||||
.add({
|
||||
targets: '.timeline-phase',
|
||||
scale: [0.8, 1],
|
||||
opacity: [0, 1],
|
||||
duration: 600,
|
||||
delay: anime.stagger(150)
|
||||
}, '-=600')
|
||||
.add({
|
||||
targets: '.equipment-grid',
|
||||
translateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 800
|
||||
}, '-=400');
|
||||
|
||||
// Animation de la timeline automatique
|
||||
startTimelineAnimation();
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -18,41 +88,42 @@
|
||||
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: '⏳'
|
||||
}
|
||||
];
|
||||
function startTimelineAnimation() {
|
||||
// Progression automatique de la timeline
|
||||
const timeline = anime.timeline({
|
||||
loop: true,
|
||||
autoplay: true
|
||||
});
|
||||
|
||||
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' }
|
||||
];
|
||||
observationPhases.forEach((phase, index) => {
|
||||
timeline.add({
|
||||
targets: {},
|
||||
duration: 3000,
|
||||
changeBegin: () => {
|
||||
activePhase = index;
|
||||
animatePhaseChange(index);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function animatePhaseChange(index) {
|
||||
// Animation de l'indicateur actif
|
||||
anime({
|
||||
targets: '.timeline-indicator',
|
||||
left: `${index * 25}%`,
|
||||
duration: 800,
|
||||
easing: 'easeInOutQuad'
|
||||
});
|
||||
|
||||
// Pulsation de la phase active
|
||||
anime({
|
||||
targets: `.timeline-phase:nth-child(${index + 1}) .phase-icon`,
|
||||
scale: [1, 1.2, 1],
|
||||
duration: 600,
|
||||
easing: 'easeInOutQuad'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<section id="observatory" class="observatory">
|
||||
@@ -60,70 +131,75 @@
|
||||
<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
|
||||
Tout ce qu'il faut savoir pour observer le 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 class="observatory-content" class:visible>
|
||||
<!-- Timeline d'observation -->
|
||||
<div class="timeline-container">
|
||||
<h3>Chronologie de l'Observation</h3>
|
||||
<div class="timeline">
|
||||
<div class="timeline-track"></div>
|
||||
<div class="timeline-indicator"></div>
|
||||
{#each observationPhases as phase, i}
|
||||
<div class="timeline-phase" class:active={activePhase === i}>
|
||||
<div class="phase-icon">{phase.icon}</div>
|
||||
<div class="phase-time">{phase.time}</div>
|
||||
<div class="phase-info">
|
||||
<h4>{phase.title}</h4>
|
||||
<p>{phase.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Équipement recommandé -->
|
||||
<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>
|
||||
{#each equipment as item, i}
|
||||
<div
|
||||
class="equipment-card"
|
||||
class:essential={item.essential}
|
||||
style="animation-delay: {i * 0.1}s"
|
||||
>
|
||||
<div class="equipment-header">
|
||||
<span class="equipment-name">{item.item}</span>
|
||||
{#if item.essential}
|
||||
<span class="essential-badge">Essentiel</span>
|
||||
{/if}
|
||||
</div>
|
||||
<p class="equipment-desc">{item.description}</p>
|
||||
</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>
|
||||
|
||||
<!-- Conseils pratiques -->
|
||||
<div class="tips-section">
|
||||
<h3>Conseils d'Expert</h3>
|
||||
<h3>Conseils Pratiques</h3>
|
||||
<div class="tips-grid">
|
||||
<div class="tip-card card">
|
||||
<div class="tip-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>
|
||||
<h4>Météo Idéale</h4>
|
||||
<p>Ciel dégagé à l'Est, pas de nuages bas, humidité modérée</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 class="tip-card">
|
||||
<div class="tip-icon">🌑</div>
|
||||
<h4>Phase Lunaire</h4>
|
||||
<p>Nouvelle lune ou croissant fin pour un ciel plus sombre</p>
|
||||
</div>
|
||||
<div class="tip-card card">
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">📱</div>
|
||||
<h4>Applications Utiles</h4>
|
||||
<p>Stellarium, SkySafari, Star Walk pour repérer les constellations</p>
|
||||
</div>
|
||||
<div class="tip-card">
|
||||
<div class="tip-icon">👥</div>
|
||||
<h4>Groupe</h4>
|
||||
<p>Observez à plusieurs pour confirmer la première visibilité.</p>
|
||||
<h4>En Groupe</h4>
|
||||
<p>Partagez ce moment unique avec famille et amis</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -134,148 +210,186 @@
|
||||
<style>
|
||||
.observatory {
|
||||
padding: var(--spacing-xl) 0;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 100%);
|
||||
background: var(--gradient-dawn);
|
||||
}
|
||||
|
||||
.guide-content {
|
||||
.observatory-content {
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* Timeline */
|
||||
.timeline-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 3rem;
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s ease-out 0.3s;
|
||||
}
|
||||
|
||||
.guide-content.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.guide-content h3 {
|
||||
.timeline-container h3 {
|
||||
color: var(--color-primary);
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* 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 {
|
||||
.timeline {
|
||||
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;
|
||||
justify-content: space-between;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.step-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1rem;
|
||||
.timeline-track {
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
left: 5%;
|
||||
right: 5%;
|
||||
height: 4px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.step-card h4 {
|
||||
.timeline-indicator {
|
||||
position: absolute;
|
||||
top: 3rem;
|
||||
left: 0;
|
||||
width: 25%;
|
||||
height: 4px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 2px;
|
||||
transition: left 0.8s ease-in-out;
|
||||
}
|
||||
|
||||
.timeline-phase {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.phase-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
filter: grayscale(1);
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.timeline-phase.active .phase-icon {
|
||||
filter: grayscale(0);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.phase-time {
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Equipment */
|
||||
.phase-info h4 {
|
||||
color: var(--color-light);
|
||||
margin: 0.5rem 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.phase-info p {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Équipement */
|
||||
.equipment-section {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.equipment-section h3 {
|
||||
color: var(--color-primary);
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.equipment-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: var(--spacing-sm);
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 1.5rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.equipment-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
.equipment-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
transition: var(--transition-base);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.3s ease;
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.equipment-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
.equipment-card.essential {
|
||||
border-color: var(--color-primary);
|
||||
background: rgba(255, 215, 0, 0.05);
|
||||
}
|
||||
|
||||
.equipment-icon {
|
||||
font-size: 1.5rem;
|
||||
.equipment-card:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.equipment-item.essential .equipment-icon {
|
||||
color: var(--color-primary);
|
||||
.equipment-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.equipment-info h5 {
|
||||
.equipment-name {
|
||||
font-weight: 600;
|
||||
color: var(--color-light);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.equipment-info p {
|
||||
.essential-badge {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-dark);
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.equipment-desc {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Stellarium Guide */
|
||||
.stellarium-guide {
|
||||
margin-bottom: var(--spacing-xl);
|
||||
max-width: 800px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
/* Conseils */
|
||||
.tips-section h3 {
|
||||
color: var(--color-primary);
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.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);
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
animation: fadeInUp 0.8s ease-out forwards;
|
||||
}
|
||||
|
||||
.tip-card:hover {
|
||||
transform: translateY(-5px);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
font-size: 3rem;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -284,8 +398,37 @@
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.tip-card p {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.steps-grid {
|
||||
.timeline {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.timeline-track {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.timeline-indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.equipment-grid, .tips-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
+323
-273
@@ -1,83 +1,52 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import { t } from '../lib/i18n.js';
|
||||
import anime from 'animejs/lib/anime.es.js';
|
||||
|
||||
let selectedLocation = 'Pointe des Châteaux';
|
||||
let selectedYear = '2025';
|
||||
let visible = false;
|
||||
let selectedLocation = 'moule';
|
||||
let calculationInProgress = false;
|
||||
let results = null;
|
||||
|
||||
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}`;
|
||||
}
|
||||
const locations = [
|
||||
{ id: 'moule', name: 'Le Moule', lat: 16.3333, lng: -61.3472 },
|
||||
{ id: 'deshaies', name: 'Deshaies', lat: 16.3039, lng: -61.7966 },
|
||||
{ id: 'sainte-anne', name: 'Sainte-Anne', lat: 16.2262, lng: -61.3809 },
|
||||
{ id: 'port-louis', name: 'Port-Louis', lat: 16.4180, lng: -61.5312 },
|
||||
{ id: 'marie-galante', name: 'Marie-Galante', lat: 15.9500, lng: -61.2667 },
|
||||
{ id: 'soufriere', name: 'Route de la Soufrière', lat: 16.0439, lng: -61.6639 },
|
||||
{ id: 'petite-terre', name: 'Petite-Terre', lat: 16.1700, lng: -61.1200 }
|
||||
];
|
||||
|
||||
onMount(() => {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
visible = true;
|
||||
|
||||
// Animation d'entrée
|
||||
anime.timeline({
|
||||
easing: 'easeOutQuad'
|
||||
})
|
||||
.add({
|
||||
targets: '.section-header',
|
||||
translateY: [30, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 800
|
||||
})
|
||||
.add({
|
||||
targets: '.calculator-container',
|
||||
translateY: [50, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 1000
|
||||
}, '-=400')
|
||||
.add({
|
||||
targets: '.location-option',
|
||||
translateX: [-20, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 600,
|
||||
delay: anime.stagger(50)
|
||||
}, '-=600');
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -87,104 +56,200 @@
|
||||
|
||||
return () => observer.disconnect();
|
||||
});
|
||||
|
||||
function selectLocation(id) {
|
||||
selectedLocation = id;
|
||||
calculate();
|
||||
|
||||
// Animation de sélection
|
||||
anime({
|
||||
targets: `.location-option`,
|
||||
scale: 1,
|
||||
duration: 300
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: `[data-location="${id}"]`,
|
||||
scale: 1.05,
|
||||
duration: 300,
|
||||
easing: 'easeOutElastic(1, .5)'
|
||||
});
|
||||
}
|
||||
|
||||
function calculate() {
|
||||
calculationInProgress = true;
|
||||
results = null;
|
||||
|
||||
// Animation du calcul
|
||||
anime({
|
||||
targets: '.calculating-indicator',
|
||||
opacity: [0, 1],
|
||||
duration: 300
|
||||
});
|
||||
|
||||
// Animation des étoiles pendant le calcul
|
||||
anime({
|
||||
targets: '.star-indicator',
|
||||
rotate: 360,
|
||||
duration: 2000,
|
||||
easing: 'linear',
|
||||
loop: true
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const location = locations.find(l => l.id === selectedLocation);
|
||||
|
||||
// Calculs simplifiés
|
||||
const baseDate = new Date('2025-07-22');
|
||||
const latitudeAdjustment = (location.lat - 16.25) * 0.5;
|
||||
const heliacalDate = new Date(baseDate);
|
||||
heliacalDate.setDate(baseDate.getDate() + Math.round(latitudeAdjustment));
|
||||
|
||||
results = {
|
||||
location: location.name,
|
||||
heliacalDate: heliacalDate.toLocaleDateString('fr-FR', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
}),
|
||||
bestTime: '05h00 - 05h30',
|
||||
duration: '15-20 minutes',
|
||||
azimuth: '117° (ESE)',
|
||||
altitude: '57.1°',
|
||||
magnitude: '-1.46'
|
||||
};
|
||||
|
||||
calculationInProgress = false;
|
||||
|
||||
// Animation des résultats
|
||||
anime.timeline({
|
||||
easing: 'easeOutQuad'
|
||||
})
|
||||
.add({
|
||||
targets: '.calculating-indicator',
|
||||
opacity: [1, 0],
|
||||
duration: 300
|
||||
})
|
||||
.add({
|
||||
targets: '.results-container',
|
||||
translateY: [20, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 600
|
||||
})
|
||||
.add({
|
||||
targets: '.result-item',
|
||||
translateX: [20, 0],
|
||||
opacity: [0, 1],
|
||||
duration: 400,
|
||||
delay: anime.stagger(100)
|
||||
}, '-=400')
|
||||
.add({
|
||||
targets: '.result-value',
|
||||
scale: [0.8, 1],
|
||||
duration: 600,
|
||||
delay: anime.stagger(100),
|
||||
easing: 'easeOutElastic(1, .5)'
|
||||
}, '-=600');
|
||||
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
// Calculer automatiquement au chargement
|
||||
onMount(() => {
|
||||
setTimeout(() => {
|
||||
if (visible) calculate();
|
||||
}, 1000);
|
||||
});
|
||||
</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>
|
||||
<h2>{$t('predictions_title')}</h2>
|
||||
<p class="section-subtitle">
|
||||
Trouvez la date précise pour votre site d'observation
|
||||
{$t('predictions_subtitle')}
|
||||
</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 class="location-selector">
|
||||
<h3>{$t('predictions_select_location')}</h3>
|
||||
<div class="locations-grid">
|
||||
{#each locations as location}
|
||||
<button
|
||||
class="location-option"
|
||||
class:active={selectedLocation === location.id}
|
||||
data-location={location.id}
|
||||
on:click={() => selectLocation(location.id)}
|
||||
>
|
||||
<span class="location-name">{location.name}</span>
|
||||
<span class="location-coords">{location.lat}°N</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="prediction-result card">
|
||||
<div class="result-header">
|
||||
<h3>{selectedLocation}</h3>
|
||||
<span class="year-badge">{selectedYear}</span>
|
||||
</div>
|
||||
<div class="results-section">
|
||||
{#if calculationInProgress}
|
||||
<div class="calculating-indicator">
|
||||
<div class="star-indicator">⭐</div>
|
||||
<p>Calcul en cours...</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<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>
|
||||
{#if results && !calculationInProgress}
|
||||
<div class="results-container">
|
||||
<h3>{$t('predictions_results_for')} {results.location}</h3>
|
||||
|
||||
<div class="results-grid">
|
||||
<div class="result-item highlight">
|
||||
<div class="result-icon">🌅</div>
|
||||
<div class="result-label">{$t('predictions_heliacal_rising')}</div>
|
||||
<div class="result-value">{results.heliacalDate}</div>
|
||||
</div>
|
||||
|
||||
<div class="result-item">
|
||||
<div class="result-icon">⏰</div>
|
||||
<div class="result-label">{$t('predictions_best_observation')}</div>
|
||||
<div class="result-value">{results.bestTime}</div>
|
||||
</div>
|
||||
|
||||
<div class="result-item">
|
||||
<div class="result-icon">⏱️</div>
|
||||
<div class="result-label">{$t('predictions_visibility_duration')}</div>
|
||||
<div class="result-value">{results.duration}</div>
|
||||
</div>
|
||||
|
||||
<div class="result-item">
|
||||
<div class="result-icon">🧭</div>
|
||||
<div class="result-label">{$t('predictions_azimuth')}</div>
|
||||
<div class="result-value">{results.azimuth}</div>
|
||||
</div>
|
||||
|
||||
<div class="result-item">
|
||||
<div class="result-icon">📐</div>
|
||||
<div class="result-label">{$t('predictions_max_altitude')}</div>
|
||||
<div class="result-value">{results.altitude}</div>
|
||||
</div>
|
||||
|
||||
<div class="result-item">
|
||||
<div class="result-icon">✨</div>
|
||||
<div class="result-label">{$t('predictions_magnitude')}</div>
|
||||
<div class="result-value">{results.magnitude}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="observation-tips">
|
||||
<h4>💡 Conseils d'observation</h4>
|
||||
<ul>
|
||||
<li>Arrivez 30 minutes avant pour habituer vos yeux</li>
|
||||
<li>Cherchez vers l'Est-Sud-Est (ESE)</li>
|
||||
<li>Sirius apparaîtra comme l'étoile la plus brillante</li>
|
||||
<li>Conditions idéales : ciel dégagé, sans Lune</li>
|
||||
</ul>
|
||||
</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>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -192,191 +257,176 @@
|
||||
|
||||
<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;
|
||||
background: var(--gradient-night);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin-top: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.calculator-container.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
.location-selector {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.calculator-inputs {
|
||||
.location-selector h3 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.locations-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-md);
|
||||
margin-bottom: var(--spacing-md);
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
.location-option {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 15px;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
opacity: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.input-group select {
|
||||
padding: 0.75rem;
|
||||
.location-option:hover {
|
||||
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 {
|
||||
.location-option.active {
|
||||
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;
|
||||
.location-name {
|
||||
font-weight: 600;
|
||||
color: var(--color-light);
|
||||
}
|
||||
|
||||
.result-content {
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
.location-coords {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-primary);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.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;
|
||||
.calculating-indicator {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.date-icon,
|
||||
.time-icon,
|
||||
.window-icon {
|
||||
font-size: 2rem;
|
||||
.star-indicator {
|
||||
font-size: 3rem;
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.date-value,
|
||||
.time-value,
|
||||
.window-value {
|
||||
.results-container {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 20px;
|
||||
padding: 2rem;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.results-container h3 {
|
||||
color: var(--color-primary);
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.result-item.highlight {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.result-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.result-label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-light);
|
||||
opacity: 0.8;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.result-value {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.date-label,
|
||||
.time-label,
|
||||
.window-label {
|
||||
font-size: 0.9rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
.observation-tips {
|
||||
background: rgba(255, 215, 0, 0.05);
|
||||
border-radius: 15px;
|
||||
padding: 1.5rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.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 {
|
||||
.observation-tips h4 {
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-card ul {
|
||||
.observation-tips ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.info-card li {
|
||||
.observation-tips li {
|
||||
padding: 0.5rem 0;
|
||||
padding-left: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.info-card li::before {
|
||||
content: '✦';
|
||||
.observation-tips li::before {
|
||||
content: "✦";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.calculator-inputs {
|
||||
.locations-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.result-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
.results-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.location-selector, .results-container {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user