Spaces:

yaspred
/

iss

Running

App Files Files Community

iss / index.html

yaspred

Add 2 files

75a16b7 verified about 1 year ago

raw

history blame contribute delete

14.3 kB

	<!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>
	// Configuration initiale
	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;

	// Initialiser le globe
	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);

	// Ajuster la taille du globe lors du redimensionnement
	window.addEventListener('resize', () => {
	world.width(globeContainer.clientWidth);
	world.height(globeContainer.clientHeight);
	});

	// Fonction pour convertir les coordonnées géographiques en position 3D
	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 };
	}

	// Fonction pour mettre à jour la position de l'ISS
	function updateISSPosition(latitude, longitude) {
	// Mettre à jour l'historique des positions
	issPositionHistory.push({ lat: latitude, lng: longitude });
	if (issPositionHistory.length > maxHistoryPoints) {
	issPositionHistory.shift();
	}

	// Mettre à jour le marqueur de l'ISS
	const issMarker = document.getElementById('iss-marker');
	const { x, y, z } = getPositionOnGlobe(latitude, longitude);

	// Convertir les coordonnées 3D en coordonnées d'écran
	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');

	// Mettre à jour les données affichées
	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`;

	// Mettre à jour l'heure de la dernière mise à jour
	const now = new Date();
	lastUpdateTime = now;
	document.getElementById('last-updated').textContent = `Mis à jour: ${now.toLocaleTimeString()}`;

	// Calculer le prochain passage (simulation)
	const nextPassTime = new Date(now.getTime() + 90 * 60 * 1000);
	document.getElementById('next-pass').textContent = `${nextPassTime.toLocaleTimeString()} (${Math.round(90 - (now.getMinutes() % 90))} min)`;

	// Mettre à jour l'orbite sur le globe
	updateOrbitPath();
	}

	// Fonction pour mettre à jour le chemin de l'orbite
	function updateOrbitPath() {
	if (issPositionHistory.length < 2) return;

	// Créer un tableau de points pour l'orbite
	const orbitPoints = issPositionHistory.map(pos => [pos.lat, pos.lng]);

	// Mettre à jour le globe avec le nouveau chemin d'orbite
	world.pathsData([{
	points: orbitPoints,
	color: 'rgba(255, 215, 0, 0.3)',
	dashLength: 0.2,
	dashGap: 0.01,
	dashAnimateTime: 1000
	}]);
	}

	// Fonction pour récupérer les données de l'ISS
	async function fetchISSData() {
	try {
	// Récupérer la position actuelle
	const positionResponse = await fetch('https://api.wheretheiss.at/v1/satellites/25544');
	const positionData = await positionResponse.json();

	// Mettre à jour la position
	updateISSPosition(positionData.latitude, positionData.longitude);

	// Récupérer les informations sur l'équipage (simulé)
	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";
	}
	}

	// Charger les données initiales
	fetchISSData();

	// Mettre à jour les données toutes les 5 secondes
	setInterval(fetchISSData, 5000);

	// Animation du globe
	(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>