|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Suivi en temps réel de l'ISS</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/globe.gl@2.24.0/dist/globe.gl.min.js"></script> |
|
|
<style> |
|
|
.globe-container { |
|
|
position: relative; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
} |
|
|
.iss-marker { |
|
|
position: absolute; |
|
|
width: 12px; |
|
|
height: 12px; |
|
|
background-color: #FFD700; |
|
|
border-radius: 50%; |
|
|
box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.7); |
|
|
transform: translate(-50%, -50%); |
|
|
z-index: 10; |
|
|
} |
|
|
.pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
@keyframes pulse { |
|
|
0% { |
|
|
transform: translate(-50%, -50%) scale(1); |
|
|
opacity: 1; |
|
|
} |
|
|
70% { |
|
|
transform: translate(-50%, -50%) scale(1.5); |
|
|
opacity: 0.7; |
|
|
} |
|
|
100% { |
|
|
transform: translate(-50%, -50%) scale(1); |
|
|
opacity: 0; |
|
|
} |
|
|
} |
|
|
.info-panel { |
|
|
backdrop-filter: blur(10px); |
|
|
background-color: rgba(15, 23, 42, 0.7); |
|
|
} |
|
|
.orbit-path { |
|
|
stroke: rgba(255, 215, 0, 0.3); |
|
|
stroke-width: 1px; |
|
|
fill: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-slate-900 text-white min-h-screen flex flex-col"> |
|
|
<header class="py-6 px-4 sm:px-6 lg:px-8 border-b border-slate-800"> |
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center"> |
|
|
<h1 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-500"> |
|
|
Suivi de l'ISS en temps réel |
|
|
</h1> |
|
|
<div class="flex items-center space-x-4"> |
|
|
<div id="last-updated" class="text-sm text-slate-400"></div> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-3 h-3 rounded-full bg-green-500 animate-pulse mr-2"></div> |
|
|
<span class="text-sm">En ligne</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="flex-1 flex flex-col lg:flex-row gap-6 p-4 sm:p-6 lg:p-8 max-w-7xl mx-auto w-full"> |
|
|
<div class="flex-1 h-96 lg:h-auto rounded-xl overflow-hidden shadow-2xl relative"> |
|
|
<div id="globe" class="globe-container w-full h-full"></div> |
|
|
<div id="iss-marker" class="iss-marker pulse hidden"></div> |
|
|
</div> |
|
|
|
|
|
<div class="w-full lg:w-80 space-y-6"> |
|
|
<div class="info-panel rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 text-cyan-400">Informations de l'ISS</h2> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<p class="text-sm text-slate-400">Position actuelle</p> |
|
|
<p id="iss-position" class="font-medium">Chargement...</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-slate-400">Altitude</p> |
|
|
<p id="iss-altitude" class="font-medium">Chargement...</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-slate-400">Vitesse</p> |
|
|
<p id="iss-velocity" class="font-medium">Chargement...</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-slate-400">Prochain passage</p> |
|
|
<p id="next-pass" class="font-medium">Chargement...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="info-panel rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 text-cyan-400">Statistiques</h2> |
|
|
<div class="space-y-3"> |
|
|
<div> |
|
|
<p class="text-sm text-slate-400">Temps en orbite</p> |
|
|
<p id="orbital-time" class="font-medium">22 ans, 10 mois, 3 jours</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-slate-400">Tours de Terre</p> |
|
|
<p id="orbits-count" class="font-medium">~133,500</p> |
|
|
</div> |
|
|
<div> |
|
|
<p class="text-sm text-slate-400">Distance parcourue</p> |
|
|
<p id="distance-traveled" class="font-medium">~3.7 milliards km</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="info-panel rounded-xl p-6 shadow-lg"> |
|
|
<h2 class="text-lg font-semibold mb-4 text-cyan-400">Équipage actuel</h2> |
|
|
<div id="crew-members" class="space-y-3"> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-slate-700"></div> |
|
|
<p class="text-sm">Chargement des données d'équipage...</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="py-4 px-4 sm:px-6 lg:px-8 border-t border-slate-800 text-center text-sm text-slate-500"> |
|
|
<p>Données fournies par l'API Where the ISS at? • Mise à jour toutes les 5 secondes</p> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const EARTH_RADIUS_KM = 6371; |
|
|
const ISS_ALTITUDE_KM = 408; |
|
|
const ISS_SPEED_KM_S = 7.66; |
|
|
|
|
|
let issPositionHistory = []; |
|
|
const maxHistoryPoints = 100; |
|
|
let lastUpdateTime = null; |
|
|
|
|
|
|
|
|
const globeContainer = document.getElementById('globe'); |
|
|
const world = Globe() |
|
|
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg') |
|
|
.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png') |
|
|
.backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png') |
|
|
.showAtmosphere(true) |
|
|
.atmosphereColor('rgba(63, 201, 255, 0.2)') |
|
|
.atmosphereAltitude(0.25) |
|
|
(globeContainer); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
world.width(globeContainer.clientWidth); |
|
|
world.height(globeContainer.clientHeight); |
|
|
}); |
|
|
|
|
|
|
|
|
function getPositionOnGlobe(lat, lng) { |
|
|
const phi = (90 - lat) * (Math.PI / 180); |
|
|
const theta = (lng + 180) * (Math.PI / 180); |
|
|
|
|
|
const radius = EARTH_RADIUS_KM + ISS_ALTITUDE_KM; |
|
|
|
|
|
const x = -(radius * Math.sin(phi) * Math.cos(theta)); |
|
|
const y = radius * Math.cos(phi); |
|
|
const z = radius * Math.sin(phi) * Math.sin(theta); |
|
|
|
|
|
return { x, y, z }; |
|
|
} |
|
|
|
|
|
|
|
|
function updateISSPosition(latitude, longitude) { |
|
|
|
|
|
issPositionHistory.push({ lat: latitude, lng: longitude }); |
|
|
if (issPositionHistory.length > maxHistoryPoints) { |
|
|
issPositionHistory.shift(); |
|
|
} |
|
|
|
|
|
|
|
|
const issMarker = document.getElementById('iss-marker'); |
|
|
const { x, y, z } = getPositionOnGlobe(latitude, longitude); |
|
|
|
|
|
|
|
|
const widthHalf = globeContainer.clientWidth / 2; |
|
|
const heightHalf = globeContainer.clientHeight / 2; |
|
|
|
|
|
const vector = new THREE.Vector3(x, y, z); |
|
|
vector.project(world.camera()); |
|
|
|
|
|
const screenX = Math.round((vector.x * widthHalf) + widthHalf); |
|
|
const screenY = Math.round(-(vector.y * heightHalf) + heightHalf); |
|
|
|
|
|
issMarker.style.left = `${screenX}px`; |
|
|
issMarker.style.top = `${screenY}px`; |
|
|
issMarker.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
document.getElementById('iss-position').textContent = `${latitude.toFixed(4)}° N, ${longitude.toFixed(4)}° E`; |
|
|
document.getElementById('iss-altitude').textContent = `${ISS_ALTITUDE_KM} km`; |
|
|
document.getElementById('iss-velocity').textContent = `${(ISS_SPEED_KM_S * 3600).toLocaleString()} km/h`; |
|
|
|
|
|
|
|
|
const now = new Date(); |
|
|
lastUpdateTime = now; |
|
|
document.getElementById('last-updated').textContent = `Mis à jour: ${now.toLocaleTimeString()}`; |
|
|
|
|
|
|
|
|
const nextPassTime = new Date(now.getTime() + 90 * 60 * 1000); |
|
|
document.getElementById('next-pass').textContent = `${nextPassTime.toLocaleTimeString()} (${Math.round(90 - (now.getMinutes() % 90))} min)`; |
|
|
|
|
|
|
|
|
updateOrbitPath(); |
|
|
} |
|
|
|
|
|
|
|
|
function updateOrbitPath() { |
|
|
if (issPositionHistory.length < 2) return; |
|
|
|
|
|
|
|
|
const orbitPoints = issPositionHistory.map(pos => [pos.lat, pos.lng]); |
|
|
|
|
|
|
|
|
world.pathsData([{ |
|
|
points: orbitPoints, |
|
|
color: 'rgba(255, 215, 0, 0.3)', |
|
|
dashLength: 0.2, |
|
|
dashGap: 0.01, |
|
|
dashAnimateTime: 1000 |
|
|
}]); |
|
|
} |
|
|
|
|
|
|
|
|
async function fetchISSData() { |
|
|
try { |
|
|
|
|
|
const positionResponse = await fetch('https://api.wheretheiss.at/v1/satellites/25544'); |
|
|
const positionData = await positionResponse.json(); |
|
|
|
|
|
|
|
|
updateISSPosition(positionData.latitude, positionData.longitude); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
const crewContainer = document.getElementById('crew-members'); |
|
|
crewContainer.innerHTML = ` |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-slate-700"></div> |
|
|
<div> |
|
|
<p class="font-medium">Jasmin Moghbeli</p> |
|
|
<p class="text-xs text-slate-400">Commandant (NASA)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-slate-700"></div> |
|
|
<div> |
|
|
<p class="font-medium">Andreas Mogensen</p> |
|
|
<p class="text-xs text-slate-400">Ingénieur de vol (ESA)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-slate-700"></div> |
|
|
<div> |
|
|
<p class="font-medium">Satoshi Furukawa</p> |
|
|
<p class="text-xs text-slate-400">Médecin (JAXA)</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center space-x-3"> |
|
|
<div class="w-8 h-8 rounded-full bg-slate-700"></div> |
|
|
<div> |
|
|
<p class="font-medium">Konstantin Borisov</p> |
|
|
<p class="text-xs text-slate-400">Spécialiste (Roscosmos)</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
}, 1000); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Erreur lors de la récupération des données ISS:', error); |
|
|
document.getElementById('iss-position').textContent = "Erreur de chargement"; |
|
|
document.getElementById('last-updated').textContent = "Erreur de connexion"; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
fetchISSData(); |
|
|
|
|
|
|
|
|
setInterval(fetchISSData, 5000); |
|
|
|
|
|
|
|
|
(function animate() { |
|
|
world.controls().autoRotate = true; |
|
|
world.controls().autoRotateSpeed = 0.3; |
|
|
world.controls().enableZoom = true; |
|
|
world.controls().enablePan = false; |
|
|
world.controls().minDistance = 200; |
|
|
world.controls().maxDistance = 1000; |
|
|
|
|
|
requestAnimationFrame(animate); |
|
|
})(); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=yaspred/iss" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
