333 lines
19 KiB
HTML
Executable File
333 lines
19 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OpenPlanetsMaps</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body class="theme-home">
|
|
<div class="bg-animated"></div>
|
|
|
|
<header>
|
|
<div class="menu-icon" onclick="toggleSidebar()">☰</div>
|
|
<h1>Open Planets Maps</h1>
|
|
<button class="help-btn" onclick="window.location.href='admin.php'">Admin</button>
|
|
</header>
|
|
|
|
<nav id="sidebar" class="sidebar">
|
|
<ul>
|
|
<li onclick="showLayer('home')">Accueil</li>
|
|
<li class="menu-category">Planètes</li>
|
|
<li onclick="showLayer('mercure')">Mercure</li>
|
|
<li onclick="showLayer('venus')">Vénus</li>
|
|
<li onclick="showLayer('terre')">Terre</li>
|
|
<li onclick="showLayer('mars')">Mars</li>
|
|
<li onclick="showLayer('jupiter')">Jupiter</li>
|
|
<li onclick="showLayer('saturne')">Saturne</li>
|
|
<li onclick="showLayer('uranus')">Uranus</li>
|
|
<li onclick="showLayer('neptune')">Neptune</li>
|
|
<li class="menu-category">Astres</li>
|
|
<li onclick="showLayer('soleil')">Soleil</li>
|
|
<li onclick="showLayer('lune')">Lune</li>
|
|
<li class="menu-category">Notions</li>
|
|
<li onclick="showLayer('Quizz')">Quizz</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<main id="content-area">
|
|
<section id="layer-home" class="layer active">
|
|
<div class="main-img">
|
|
<iframe title="Solar System animation" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/b7c69a6b655b47c99f871d5ec5aee854/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="flex-row">
|
|
<div class="box">
|
|
<h2>Exploration Spatiale</h2>
|
|
<p>Naviguez à travers le système solaire et découvrez les caractéristiques uniques de chaque planète grâce à nos cartes interactives.</p>
|
|
</div>
|
|
<div class="box">
|
|
<h2>Données Ouvertes</h2>
|
|
<p>Accédez à une base de données topographiques issue des agences spatiales, centralisée dans un outil open source.</p>
|
|
</div>
|
|
</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Système Solaire - 8 Planètes - Cartographie Open Source - Données Topographiques - Exploration Interactive...</div>
|
|
</div>
|
|
<div class="desc-box">Prêt pour le lancement ? Ouvrez le menu latéral (☰) et sélectionnez une destination pour commencer votre voyage.</div>
|
|
</section>
|
|
|
|
<section id="layer-mercure" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Mercury" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/0930a4f0405243f6a9f93a4da79c66b6/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">Mercure est la planète la plus proche du Soleil et la plus petite du système solaire. Sa surface est parsemée de cratères, ressemblant à celle de notre Lune, et elle subit des variations de température extrêmes.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance au Soleil : 58 millions de km • Température : de -180°C à 430°C • Superficie : 74,8 millions de km² • Durée du jour : 59 jours terrestres</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-mercure">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-venus" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Venus" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/d497ce25553447f3b7b679110c85cfa1/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">Vénus est la deuxième planète du système solaire et la plus chaude. Son atmosphère très dense provoque un effet de serre extrême, et sa surface est masquée par d'épais nuages d'acide sulfurique.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance au Soleil : 108 millions de km • Température moyenne : 462°C • Superficie : 460 millions de km² • Durée du jour : 243 jours terrestres</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-venus">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-terre" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Earth : Planets / Solar System" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/cb636fdd7f124125a3b7d194da9942e1/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">Notre planète natale, la Terre, est la troisième planète du système solaire et la seule connue pour abriter la vie. Elle se distingue par ses vastes océans d'eau liquide qui recouvrent plus de 70% de sa surface.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance au Soleil : 150 millions de km (1 UA) • Température moyenne : 15°C • Superficie : 510 millions de km² • Satellites naturels : 1 (La Lune)</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-terre">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-mars" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Mars: InSight Lander and Volcanic Regions" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/50bb6eb0d1104d43bf684d2b0f70de1d/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">Surnommée la « planète rouge » en raison de l'oxyde de fer à sa surface, Mars possède des calottes polaires, le plus grand volcan du système solaire (Olympus Mons) et un immense canyon (Valles Marineris).</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance au Soleil : 227,9 millions de km • Température moyenne : -63°C • Superficie : 144,8 millions de km² • Gravité : 3,72 m/s²</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-mars">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-jupiter" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="jupiter" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/c5275eb96af245e4a8453837ac728a62/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">Jupiter est la plus grande planète de notre système solaire. Cette géante gazeuse est célèbre pour sa Grande Tache Rouge, une tempête anticyclonique gigantesque, et possède des dizaines de lunes fascinantes.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance au Soleil : 778 millions de km • Température moyenne : -110°C • Superficie : 61,4 milliards de km² • Satellites naturels : 95 connus</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-jupiter">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-saturne" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Saturn" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/c09a1970148c43ad99db134a9d6d00b5/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">Reconnaissable entre toutes grâce à son spectaculaire système d'anneaux composés de particules de glace et de roche, Saturne est une vaste géante gazeuse aux vents extrêmement violents.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance au Soleil : 1,43 milliard de km • Température moyenne : -140°C • Superficie : 42,7 milliards de km² • Satellites naturels : 146 connus</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-saturne">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-uranus" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Uranus" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/0009a69dbace44608c0bd09af9ba20db/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">Uranus est une géante de glaces dont l'axe de rotation est fortement incliné, ce qui donne l'impression qu'elle « roule » sur son orbite. Sa belle teinte cyan est due à la présence de méthane.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance au Soleil : 2,87 milliards de km • Température moyenne : -195°C • Superficie : 8,1 milliards de km² • Durée de l'année : 84 ans terrestres</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-uranus">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-neptune" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Neptune" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/2a6f9ccc5c724a709912774caa197b77/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">La planète la plus éloignée du Soleil est une autre géante de glaces, Neptune. Elle est connue pour sa couleur bleu azur profond et ses vents supersoniques, les plus rapides de tout le système solaire.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance au Soleil : 4,5 milliards de km • Température moyenne : -200°C • Superficie : 7,6 milliards de km² • Vitesse des vents : jusqu'à 2 100 km/h</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-neptune">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-soleil" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Soleil" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/19ebc57385f543ad8856cb04c000bece/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">Le Soleil est l'étoile au centre de notre système solaire. Il représente à lui seul environ 99,8 % de la masse du système solaire et fournit l'énergie nécessaire au maintien de la vie sur Terre.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Type : Naine jaune • Température de surface : 5 500°C • Distance à la Terre : 150 millions de km (1 UA) • Âge : 4,6 milliards d'années</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-soleil">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-lune" class="layer">
|
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
|
<div class="main-img">
|
|
<iframe title="Lune" frameborder="0" allow="autoplay; fullscreen; xr-spatial-tracking" src="https://sketchfab.com/models/78da6bf9c10444ce9cc8aa7d969ecfb4/embed?autostart=1&ui_infos=0&ui_watermark=0&ui_controls=0"></iframe>
|
|
</div>
|
|
<div class="desc-box">La Lune est l'unique satellite naturel de la Terre. Elle est le cinquième plus grand satellite du système solaire et le seul astre non terrestre à avoir été visité par des êtres humains.</div>
|
|
<div class="ticker-wrap">
|
|
<div class="ticker">Distance à la Terre : 384 400 km • Température : de -173°C à 127°C • Gravité : 1,62 m/s² • Durée de l'orbite : 27,3 jours</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table class="data-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Nom</th>
|
|
<th>Image</th>
|
|
<th>Date</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tbody-lune">
|
|
<tr><td colspan="3">En attente des données...</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="layer-Quizz" class="layer">
|
|
<div class="desc-box">Testez vos connaissances sur le système solaire ! Répondez aux questions ci-dessous pour voir si vous êtes un véritable expert de l'espace.</div>
|
|
|
|
<div class="daily-challenge-box">
|
|
<strong class="daily-challenge-title">◈ DÉFI QUOTIDIEN</strong>
|
|
<p class="daily-challenge-desc">Chaque jour à minuit, l'ordinateur de bord compile nos archives pour générer un nouveau Quizz unique de 10 questions. Entraînez-vous quotidiennement pour parfaire vos connaissances !</p>
|
|
</div>
|
|
|
|
<div id="quiz-container" class="box">
|
|
<h2 id="quiz-question">Chargement du Quizz...</h2>
|
|
<div id="quiz-options">
|
|
</div>
|
|
<p id="quiz-score"></p>
|
|
<button id="quiz-restart-btn" onclick="initQuiz()">Recommencer le Quizz</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="site-footer">
|
|
© 2026 OpenPlanetsMaps. Libre de droits.
|
|
</footer>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |