tezcat/OpenPlanetsMaps
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Switch Languages To English

Browse Source 
The Code of all files used has been changed from French to English
This commit is contained in:
tezcat
2026-05-06 10:53:00 +02:00
parent 8cbb76d2f3
commit e07f604e4f
4 changed files with 140 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SRC/api.php
+14 -25
View File
@@ -12,21 +12,21 @@ try {
$planetId = isset($_GET['planet']) ? $_GET['planet'] : ''; $planetId = isset($_GET['planet']) ? $_GET['planet'] : '';
$tablesAutorisees = [ $allowedTables = [
'mercure' => 'MERCURY', 'mercury' => 'MERCURY',
'venus' => 'VENUS', 'venus' => 'VENUS',
'terre' => 'EARTH', 'earth' => 'EARTH',
'mars' => 'MARS', 'mars' => 'MARS',
'jupiter' => 'JUPITER', 'jupiter' => 'JUPITER',
'saturne' => 'SATURN', 'saturn' => 'SATURN',
'uranus' => 'URANUS', 'uranus' => 'URANUS',
'neptune' => 'NEPTUNE' 'neptune' => 'NEPTUNE'
]; ];
if ($planetId === 'quizz') { if ($planetId === 'quiz') {
$queries = []; $queries = [];
$seed = date('Ymd'); $seed = date('Ymd');
foreach ($tablesAutorisees as $key => $table) { foreach ($allowedTables as $key => $table) {
$queries[] = "(SELECT explanation, planete_nom, url FROM $table WHERE explanation IS NOT NULL AND explanation != '' ORDER BY RAND($seed) LIMIT 3)"; $queries[] = "(SELECT explanation, planete_nom, url FROM $table WHERE explanation IS NOT NULL AND explanation != '' ORDER BY RAND($seed) LIMIT 3)";
} }
$unionQuery = implode(' UNION ALL ', $queries); $unionQuery = implode(' UNION ALL ', $queries);
@@ -38,32 +38,21 @@ try {
$questions = []; $questions = [];
$allPlanets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune']; $allPlanets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
$traductions = [
'Mercury' => 'Mercure', 'Venus' => 'Vénus', 'Earth' => 'Terre',
'Mars' => 'Mars', 'Jupiter' => 'Jupiter', 'Saturn' => 'Saturne',
'Uranus' => 'Uranus', 'Neptune' => 'Neptune'
];
foreach ($results as $row) { foreach ($results as $row) {
$correctEn = $row['planete_nom']; $correctEn = $row['planete_nom'];
$correctFr = isset($traductions[$correctEn]) ? $traductions[$correctEn] : $correctEn;
$optionsEn = [$correctEn]; $optionsEn = [$correctEn];
$others = array_diff($allPlanets, [$correctEn]); $others = array_diff($allPlanets, [$correctEn]);
shuffle($others); shuffle($others);
$optionsEn = array_merge($optionsEn, array_slice($others, 0, 3)); $optionsEn = array_merge($optionsEn, array_slice($others, 0, 3));
shuffle($optionsEn);
$optionsFr = array_map(function($p) use ($traductions) {
return isset($traductions[$p]) ? $traductions[$p] : $p;
}, $optionsEn);
shuffle($optionsFr);
$text = substr($row['explanation'], 0, 200) . '...'; $text = substr($row['explanation'], 0, 200) . '...';
$questions[] = [ $questions[] = [
'q' => "De quel astre parle cette description ? « " . $text . " »", 'q' => "Which celestial body does this description refer to? « " . $text . " »",
'options' => $optionsFr, 'options' => $optionsEn,
'a' => $correctFr, 'a' => $correctEn,
'img' => isset($row['url']) ? $row['url'] : '' 'img' => isset($row['url']) ? $row['url'] : ''
]; ];
} }
@@ -72,18 +61,18 @@ try {
exit; exit;
} }
if (!array_key_exists($planetId, $tablesAutorisees)) { if (!array_key_exists($planetId, $allowedTables)) {
echo json_encode([]); echo json_encode([]);
exit; exit;
} }
$nomTable = $tablesAutorisees[$planetId]; $tableName = $allowedTables[$planetId];
$stmt = $pdo->prepare("SELECT * FROM $nomTable"); $stmt = $pdo->prepare("SELECT * FROM $tableName");
$stmt->execute(); $stmt->execute();
$data = $stmt->fetchAll(PDO::FETCH_ASSOC); $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($data); echo json_encode($data);
} catch (PDOException $e) { } catch (PDOException $e) {
http_response_code(500); http_response_code(500);
echo json_encode(['error' => 'Erreur de base de données : ' . $e->getMessage()]); echo json_encode(['error' => 'Database error: ' . $e->getMessage()]);
} }
SRC/index.html
+100 -100
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -17,21 +17,21 @@
<nav id="sidebar" class="sidebar"> <nav id="sidebar" class="sidebar">
<ul> <ul>
<li onclick="showLayer('home')">Accueil</li> <li onclick="showLayer('home')">Home</li>
<li class="menu-category">Planètes</li> <li class="menu-category">Planets</li>
<li onclick="showLayer('mercure')">Mercure</li> <li onclick="showLayer('mercury')">Mercury</li>
<li onclick="showLayer('venus')">Vénus</li> <li onclick="showLayer('venus')">Venus</li>
<li onclick="showLayer('terre')">Terre</li> <li onclick="showLayer('earth')">Earth</li>
<li onclick="showLayer('mars')">Mars</li> <li onclick="showLayer('mars')">Mars</li>
<li onclick="showLayer('jupiter')">Jupiter</li> <li onclick="showLayer('jupiter')">Jupiter</li>
<li onclick="showLayer('saturne')">Saturne</li> <li onclick="showLayer('saturn')">Saturn</li>
<li onclick="showLayer('uranus')">Uranus</li> <li onclick="showLayer('uranus')">Uranus</li>
<li onclick="showLayer('neptune')">Neptune</li> <li onclick="showLayer('neptune')">Neptune</li>
<li class="menu-category">Astres</li> <li class="menu-category">Celestial Bodies</li>
<li onclick="showLayer('soleil')">Soleil</li> <li onclick="showLayer('sun')">Sun</li>
<li onclick="showLayer('lune')">Lune</li> <li onclick="showLayer('moon')">Moon</li>
<li class="menu-category">Notions</li> <li class="menu-category">Activities</li>
<li onclick="showLayer('Quizz')">Quizz</li> <li onclick="showLayer('Quiz')">Quiz</li>
</ul> </ul>
</nav> </nav>
@@ -42,300 +42,300 @@
</div> </div>
<div class="flex-row"> <div class="flex-row">
<div class="box"> <div class="box">
<h2>Exploration Spatiale</h2> <h2>Space Exploration</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> <p>Navigate through the solar system and discover the unique characteristics of each planet with our interactive maps.</p>
</div> </div>
<div class="box"> <div class="box">
<h2>Données Ouvertes</h2> <h2>Open Data</h2>
<p>Accédez à une base de données topographiques issue des agences spatiales, centralisée dans un outil open source.</p> <p>Access a topographic database from space agencies, centralized in an open source tool.</p>
</div> </div>
</div> </div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Système Solaire - 8 Planètes - Cartographie Open Source - Données Topographiques - Exploration Interactive...</div> <div class="ticker">Solar System - 8 Planets - Open Source Mapping - Topographic Data - Interactive Exploration...</div>
</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> <div class="desc-box">Ready for launch? Open the side menu (☰) and select a destination to begin your journey.</div>
</section> </section>
<section id="layer-mercure" class="layer"> <section id="layer-mercury" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <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> <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>
<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="desc-box">Mercury is the closest planet to the Sun and the smallest in the solar system. Its surface is heavily cratered, resembling our Moon, and it experiences extreme temperature variations.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance au Soleil : 58 millions de km &nbsp;&bull;&nbsp; Température : de -180°C à 430°C &nbsp;&bull;&nbsp; Superficie : 74,8 millions de km² &nbsp;&bull;&nbsp; Durée du jour : 59 jours terrestres</div> <div class="ticker">Distance from the Sun: 58 million km &nbsp;&bull;&nbsp; Temperature: -180°C to 430°C &nbsp;&bull;&nbsp; Surface area: 74.8 million km² &nbsp;&bull;&nbsp; Length of day: 59 Earth days</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-mercure"> <tbody id="tbody-mercury">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-venus" class="layer"> <section id="layer-venus" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <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> <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>
<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="desc-box">Venus is the second planet in the solar system and the hottest. Its highly dense atmosphere causes an extreme greenhouse effect, and its surface is masked by thick clouds of sulfuric acid.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance au Soleil : 108 millions de km &nbsp;&bull;&nbsp; Température moyenne : 462°C &nbsp;&bull;&nbsp; Superficie : 460 millions de km² &nbsp;&bull;&nbsp; Durée du jour : 243 jours terrestres</div> <div class="ticker">Distance from the Sun: 108 million km &nbsp;&bull;&nbsp; Average temperature: 462°C &nbsp;&bull;&nbsp; Surface area: 460 million km² &nbsp;&bull;&nbsp; Length of day: 243 Earth days</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-venus"> <tbody id="tbody-venus">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-terre" class="layer"> <section id="layer-earth" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <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> <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>
<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="desc-box">Our home planet, Earth, is the third planet in the solar system and the only one known to harbor life. It is distinguished by its vast oceans of liquid water that cover more than 70% of its surface.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance au Soleil : 150 millions de km (1 UA) &nbsp;&bull;&nbsp; Température moyenne : 15°C &nbsp;&bull;&nbsp; Superficie : 510 millions de km² &nbsp;&bull;&nbsp; Satellites naturels : 1 (La Lune)</div> <div class="ticker">Distance from the Sun: 150 million km (1 AU) &nbsp;&bull;&nbsp; Average temperature: 15°C &nbsp;&bull;&nbsp; Surface area: 510 million km² &nbsp;&bull;&nbsp; Natural satellites: 1 (The Moon)</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-terre"> <tbody id="tbody-earth">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-mars" class="layer"> <section id="layer-mars" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <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> <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>
<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="desc-box">Nicknamed the « Red Planet » due to the iron oxide on its surface, Mars has polar ice caps, the largest volcano in the solar system (Olympus Mons), and an immense canyon (Valles Marineris).</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance au Soleil : 227,9 millions de km &nbsp;&bull;&nbsp; Température moyenne : -63°C &nbsp;&bull;&nbsp; Superficie : 144,8 millions de km² &nbsp;&bull;&nbsp; Gravité : 3,72 m/s²</div> <div class="ticker">Distance from the Sun: 227.9 million km &nbsp;&bull;&nbsp; Average temperature: -63°C &nbsp;&bull;&nbsp; Surface area: 144.8 million km² &nbsp;&bull;&nbsp; Gravity: 3.72 m/s²</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-mars"> <tbody id="tbody-mars">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-jupiter" class="layer"> <section id="layer-jupiter" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <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> <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>
<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="desc-box">Jupiter is the largest planet in our solar system. This gas giant is famous for its Great Red Spot, a gigantic anticyclonic storm, and possesses dozens of fascinating moons.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance au Soleil : 778 millions de km &nbsp;&bull;&nbsp; Température moyenne : -110°C &nbsp;&bull;&nbsp; Superficie : 61,4 milliards de km² &nbsp;&bull;&nbsp; Satellites naturels : 95 connus</div> <div class="ticker">Distance from the Sun: 778 million km &nbsp;&bull;&nbsp; Average temperature: -110°C &nbsp;&bull;&nbsp; Surface area: 61.4 billion km² &nbsp;&bull;&nbsp; Natural satellites: 95 known</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-jupiter"> <tbody id="tbody-jupiter">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-saturne" class="layer"> <section id="layer-saturn" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <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> <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>
<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="desc-box">Instantly recognizable by its spectacular system of rings composed of ice and rock particles, Saturn is a vast gas giant with extremely violent winds.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance au Soleil : 1,43 milliard de km &nbsp;&bull;&nbsp; Température moyenne : -140°C &nbsp;&bull;&nbsp; Superficie : 42,7 milliards de km² &nbsp;&bull;&nbsp; Satellites naturels : 146 connus</div> <div class="ticker">Distance from the Sun: 1.43 billion km &nbsp;&bull;&nbsp; Average temperature: -140°C &nbsp;&bull;&nbsp; Surface area: 42.7 billion km² &nbsp;&bull;&nbsp; Natural satellites: 146 known</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-saturne"> <tbody id="tbody-saturn">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-uranus" class="layer"> <section id="layer-uranus" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <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> <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>
<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="desc-box">Uranus is an ice giant whose axis of rotation is highly tilted, making it appear to « roll » along its orbit. Its beautiful cyan tint is due to the presence of methane.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance au Soleil : 2,87 milliards de km &nbsp;&bull;&nbsp; Température moyenne : -195°C &nbsp;&bull;&nbsp; Superficie : 8,1 milliards de km² &nbsp;&bull;&nbsp; Durée de l'année : 84 ans terrestres</div> <div class="ticker">Distance from the Sun: 2.87 billion km &nbsp;&bull;&nbsp; Average temperature: -195°C &nbsp;&bull;&nbsp; Surface area: 8.1 billion km² &nbsp;&bull;&nbsp; Length of year: 84 Earth years</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-uranus"> <tbody id="tbody-uranus">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-neptune" class="layer"> <section id="layer-neptune" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <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> <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>
<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="desc-box">The farthest planet from the Sun is another ice giant, Neptune. It is known for its deep azure blue color and its supersonic winds, the fastest in the entire solar system.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance au Soleil : 4,5 milliards de km &nbsp;&bull;&nbsp; Température moyenne : -200°C &nbsp;&bull;&nbsp; Superficie : 7,6 milliards de km² &nbsp;&bull;&nbsp; Vitesse des vents : jusqu'à 2 100 km/h</div> <div class="ticker">Distance from the Sun: 4.5 billion km &nbsp;&bull;&nbsp; Average temperature: -200°C &nbsp;&bull;&nbsp; Surface area: 7.6 billion km² &nbsp;&bull;&nbsp; Wind speed: up to 2,100 km/h</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-neptune"> <tbody id="tbody-neptune">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-soleil" class="layer"> <section id="layer-sun" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
<div class="sketchfab-embed-wrapper"> <div class="sketchfab-embed-wrapper">
<iframe title="Photorealistic Sun" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/7556485516804d0db3960b834e4b3f98/embed"> </iframe> <iframe title="Photorealistic Sun" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/7556485516804d0db3960b834e4b3f98/embed"> </iframe>
<p> <a href="https://sketchfab.com/3d-models/photorealistic-sun-7556485516804d0db3960b834e4b3f98?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow"> Photorealistic Sun </a> by <a href="https://sketchfab.com/cesar_salcedo?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow"> Cesar Salcedo CG </a> on <a href="https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow">Sketchfab</a></p> <p> <a href="https://sketchfab.com/3d-models/photorealistic-sun-7556485516804d0db3960b834e4b3f98?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow"> Photorealistic Sun </a> by <a href="https://sketchfab.com/cesar_salcedo?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow"> Cesar Salcedo CG </a> on <a href="https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=7556485516804d0db3960b834e4b3f98" target="_blank" rel="nofollow">Sketchfab</a></p>
</div> </div>
</div> </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="desc-box">The Sun is the star at the center of our solar system. It alone accounts for about 99.8% of the solar system's mass and provides the energy necessary to sustain life on Earth.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Type : Naine jaune &nbsp;&bull;&nbsp; Température de surface : 5 500°C &nbsp;&bull;&nbsp; Distance à la Terre : 150 millions de km (1 UA) &nbsp;&bull;&nbsp; Âge : 4,6 milliards d'années</div> <div class="ticker">Type: Yellow dwarf &nbsp;&bull;&nbsp; Surface temperature: 5,500°C &nbsp;&bull;&nbsp; Distance to Earth: 150 million km (1 AU) &nbsp;&bull;&nbsp; Age: 4.6 billion years</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-soleil"> <tbody id="tbody-sun">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-lune" class="layer"> <section id="layer-moon" class="layer">
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div> <div class="search-bar"><input type="text" placeholder="Multi-criteria search..."></div>
<div class="main-img"> <div class="main-img">
<div class="sketchfab-embed-wrapper"> <div class="sketchfab-embed-wrapper">
<iframe title="Moon" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/870de693475d436c8e925ab0bcda4ca4/embed"> </iframe> <iframe title="Moon" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/870de693475d436c8e925ab0bcda4ca4/embed"> </iframe>
<p> <a href="https://sketchfab.com/3d-models/moon-870de693475d436c8e925ab0bcda4ca4?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow"> Moon </a> by <a href="https://sketchfab.com/miekeroth?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow"> Mieke Roth </a> on <a href="https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow">Sketchfab</a></p> <p> <a href="https://sketchfab.com/3d-models/moon-870de693475d436c8e925ab0bcda4ca4?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow"> Moon </a> by <a href="https://sketchfab.com/miekeroth?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow"> Mieke Roth </a> on <a href="https://sketchfab.com?utm_medium=embed&amp;utm_campaign=share-popup&amp;utm_content=870de693475d436c8e925ab0bcda4ca4" target="_blank" rel="nofollow">Sketchfab</a></p>
</div> </div>
</div> </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="desc-box">The Moon is Earth's only natural satellite. It is the fifth largest satellite in the solar system and the only non-terrestrial celestial body to have been visited by humans.</div>
<div class="ticker-wrap"> <div class="ticker-wrap">
<div class="ticker">Distance à la Terre : 384 400 km &nbsp;&bull;&nbsp; Température : de -173°C à 127°C &nbsp;&bull;&nbsp; Gravité : 1,62 m/s² &nbsp;&bull;&nbsp; Durée de l'orbite : 27,3 jours</div> <div class="ticker">Distance to Earth: 384,400 km &nbsp;&bull;&nbsp; Temperature: -173°C to 127°C &nbsp;&bull;&nbsp; Gravity: 1.62 m/s² &nbsp;&bull;&nbsp; Orbit duration: 27.3 days</div>
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="data-table"> <table class="data-table">
<thead> <thead>
<tr> <tr>
<th>Nom</th> <th>Name</th>
<th>Image</th> <th>Image</th>
<th>Date</th> <th>Date</th>
</tr> </tr>
</thead> </thead>
<tbody id="tbody-lune"> <tbody id="tbody-moon">
<tr><td colspan="3">En attente des données...</td></tr> <tr><td colspan="3">Waiting for data...</td></tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</section> </section>
<section id="layer-Quizz" class="layer"> <section id="layer-Quiz" 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="desc-box">Test your knowledge of the solar system! Answer the questions below to see if you are a true space expert.</div>
<div class="daily-challenge-box"> <div class="daily-challenge-box">
<strong class="daily-challenge-title">◈ DÉFI QUOTIDIEN</strong> <strong class="daily-challenge-title">◈ DAILY CHALLENGE</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> <p class="daily-challenge-desc">Every day at midnight, the onboard computer compiles our archives to generate a new unique 10-question Quiz. Practice daily to perfect your knowledge!</p>
</div> </div>
<div id="quiz-container" class="box"> <div id="quiz-container" class="box">
<h2 id="quiz-question">Chargement du Quizz...</h2> <h2 id="quiz-question">Loading the Quiz...</h2>
<div id="quiz-options"></div> <div id="quiz-options"></div>
<div id="quiz-img-preview"> <div id="quiz-img-preview">
<div class="quiz-img-label">◈ SOURCE — IMAGE DE LA MISSION</div> <div class="quiz-img-label">◈ SOURCE — MISSION IMAGE</div>
<img src="" alt="" /> <img src="" alt="" />
<div class="quiz-img-caption"></div> <div class="quiz-img-caption"></div>
</div> </div>
<p id="quiz-score"></p> <p id="quiz-score"></p>
<button id="quiz-restart-btn" onclick="initQuiz()">Recommencer le Quizz</button> <button id="quiz-restart-btn" onclick="initQuiz()">Restart the Quiz</button>
</div> </div>
</section> </section>
</main> </main>
<footer class="site-footer" onclick="openCredits()" title="Crédits & à propos"> <footer class="site-footer" onclick="openCredits()" title="Credits & About">
&copy; 2026 OpenPlanetsMaps. Libre de droits. <span class="footer-credits-hint">— Crédits ↗</span> &copy; 2026 OpenPlanetsMaps. Royalty-free. <span class="footer-credits-hint">— Credits ↗</span>
</footer> </footer>
<!-- Overlay crédits --> <!-- Overlay crédits -->
@@ -343,46 +343,46 @@
<div id="credits-panel"> <div id="credits-panel">
<button class="credits-close" onclick="closeCredits()">✕</button> <button class="credits-close" onclick="closeCredits()">✕</button>
<div class="credits-header"> <div class="credits-header">
<span class="credits-tag">◈ SYSTÈME / À PROPOS</span> <span class="credits-tag">◈ SYSTEM / ABOUT</span>
<h2 class="credits-title">OpenPlanetsMaps</h2> <h2 class="credits-title">OpenPlanetsMaps</h2>
<p class="credits-version">v1.0 — 2026</p> <p class="credits-version">v1.0 — 2026</p>
</div> </div>
<div class="credits-body"> <div class="credits-body">
<div class="credits-section"> <div class="credits-section">
<h3>Projet</h3> <h3>Project</h3>
<p>OpenPlanetsMaps est un outil open source de cartographie interactive du système solaire. Les données topographiques proviennent des principales agences spatiales mondiales.</p> <p>OpenPlanetsMaps is an open source tool for interactive mapping of the solar system. Topographic data comes from the main global space agencies.</p>
</div> </div>
<div class="credits-section"> <div class="credits-section">
<h3>Données & Sources</h3> <h3>Data & Sources</h3>
<ul> <ul>
<li><span>NASA</span> — National Aeronautics and Space Administration</li> <li><span>NASA</span> — National Aeronautics and Space Administration</li>
<li><span>ESA</span> — European Space Agency</li> <li><span>ESA</span> — European Space Agency</li>
<li><span>JAXA</span> — Japan Aerospace Exploration Agency</li> <li><span>JAXA</span> — Japan Aerospace Exploration Agency</li>
<li><span>USGS</span> — Planetary Science Data</li> <li><span>USGS</span> — Astrogeology Science Center</li>
</ul> </ul>
</div> </div>
<div class="credits-section"> <div class="credits-section">
<h3>Modèles 3D</h3> <h3>3D Models</h3>
<ul> <ul>
<li><span>Sketchfab</span> — Hébergement & rendu des modèles interactifs</li> <li><span>Sketchfab</span> — Hosting & rendering of interactive models</li>
<li>Modèles sous licences Creative Commons</li> <li>Models under Creative Commons licenses</li>
</ul> </ul>
</div> </div>
<div class="credits-section"> <div class="credits-section">
<h3>Technologies</h3> <h3>Technologies</h3>
<ul> <ul>
<li><span>HTML / CSS / JS</span> — Frontend</li> <li><span>HTML / CSS / JS</span> — Front-end</li>
<li><span>PHP + MySQL</span> — Backend & base de données</li> <li><span>PHP + MySQL</span> — Back-end & database</li>
<li><span>Orbitron, Space Grotesk, Space Mono</span> — Google Fonts</li> <li><span>Orbitron, Space Grotesk, Space Mono</span> — Google Fonts</li>
</ul> </ul>
</div> </div>
<div class="credits-section"> <div class="credits-section">
<h3>Licence</h3> <h3>License</h3>
<p>Ce projet est distribué librement. Les données scientifiques restent la propriété de leurs organismes respectifs.</p> <p>This project is freely distributed. Scientific data remains the property of their respective organizations.</p>
</div> </div>
</div> </div>
<div class="credits-footer"> <div class="credits-footer">
<span>◈ OpenPlanetsMaps — Libre de droits — 2026</span> <span>◈ OpenPlanetsMaps — Royalty-free — 2026</span>
</div> </div>
</div> </div>
SRC/main.js
+17 -17
View File
@@ -12,7 +12,7 @@ function showLayer(layerId) {
document.body.className = ''; document.body.className = '';
document.body.classList.add('theme-' + layerId); document.body.classList.add('theme-' + layerId);
if (layerId === 'Quizz') { if (layerId === 'Quiz') {
initQuiz(); initQuiz();
} else if (layerId !== 'home') { } else if (layerId !== 'home') {
fetchData(layerId); fetchData(layerId);
@@ -48,7 +48,7 @@ function filterTable(planetId, query) {
const titleIndices = cols.reduce((acc, col, i) => { const titleIndices = cols.reduce((acc, col, i) => {
const c = col.toLowerCase(); const c = col.toLowerCase();
if (c === 'nom' || c === 'name' || c.includes('title') || c.includes('titre')) { if (c === 'name' || c.includes('title')) {
acc.push(i); acc.push(i);
} }
return acc; return acc;
@@ -107,14 +107,14 @@ async function fetchData(planetId) {
return; return;
} }
tbody.innerHTML = '<tr><td colspan="3">Chargement des données depuis la BDD...</td></tr>'; tbody.innerHTML = '<tr><td colspan="3">Loading data from the database...</td></tr>';
try { try {
const response = await fetch(`api.php?planet=${planetId}`); const response = await fetch(`api.php?planet=${planetId}`);
if (!response.ok) { if (!response.ok) {
const errorData = await response.json().catch(() => ({})); const errorData = await response.json().catch(() => ({}));
throw new Error(errorData.error || `Erreur HTTP: ${response.status}`); throw new Error(errorData.error || `HTTP Error: ${response.status}`);
} }
const data = await response.json(); const data = await response.json();
@@ -122,7 +122,7 @@ async function fetchData(planetId) {
tbody.innerHTML = ''; tbody.innerHTML = '';
if (data.length === 0) { if (data.length === 0) {
tbody.innerHTML = '<tr><td colspan="3">Aucune donnée disponible pour le moment.</td></tr>'; tbody.innerHTML = '<tr><td colspan="3">No data available at the moment.</td></tr>';
return; return;
} }
@@ -183,7 +183,7 @@ async function fetchData(planetId) {
if (data.length > 10) { if (data.length > 10) {
const btn = document.createElement('button'); const btn = document.createElement('button');
btn.innerHTML = 'Voir la suite ⬇'; btn.innerHTML = 'Show more ⬇';
btn.className = 'show-more-btn'; btn.className = 'show-more-btn';
btn.onclick = () => { btn.onclick = () => {
tbody.querySelectorAll('.hidden-row').forEach(row => row.classList.remove('hidden-row')); tbody.querySelectorAll('.hidden-row').forEach(row => row.classList.remove('hidden-row'));
@@ -197,8 +197,8 @@ async function fetchData(planetId) {
wireSearch(planetId); wireSearch(planetId);
} catch (error) { } catch (error) {
console.error("Erreur de connexion à la BDD :", error); console.error("Database connection error:", error);
tbody.innerHTML = `<tr><td colspan="3" style="color: #ff4444;">Erreur technique : ${error.message}</td></tr>`; tbody.innerHTML = `<tr><td colspan="3" style="color: #ff4444;">Technical error: ${error.message}</td></tr>`;
} }
} }
@@ -213,13 +213,13 @@ async function initQuiz() {
document.getElementById('quiz-score').textContent = ''; document.getElementById('quiz-score').textContent = '';
if (quizQuestions.length === 0) { if (quizQuestions.length === 0) {
document.getElementById('quiz-question').textContent = "Chargement du Quizz du jour..."; document.getElementById('quiz-question').textContent = "Loading today's Quiz...";
document.getElementById('quiz-options').innerHTML = ''; document.getElementById('quiz-options').innerHTML = '';
try { try {
const response = await fetch(`api.php?planet=quizz`); const response = await fetch(`api.php?planet=quiz`);
if (!response.ok) { if (!response.ok) {
let errMsg = "Erreur réseau"; let errMsg = "Network error";
try { try {
const errData = await response.json(); const errData = await response.json();
if (errData.error) errMsg = errData.error; if (errData.error) errMsg = errData.error;
@@ -229,12 +229,12 @@ async function initQuiz() {
quizQuestions = await response.json(); quizQuestions = await response.json();
if (quizQuestions.length === 0) { if (quizQuestions.length === 0) {
document.getElementById('quiz-question').textContent = "Pas assez de données dans la base pour générer un quizz."; document.getElementById('quiz-question').textContent = "Not enough data in the database to generate a quiz.";
return; return;
} }
} catch (error) { } catch (error) {
console.error("Erreur Quizz:", error); console.error("Quiz Error:", error);
document.getElementById('quiz-question').textContent = "Erreur : " + error.message; document.getElementById('quiz-question').textContent = "Error: " + error.message;
return; return;
} }
} }
@@ -246,9 +246,9 @@ function showQuizQuestion() {
const preview = document.getElementById('quiz-img-preview'); const preview = document.getElementById('quiz-img-preview');
if (currentQuizIndex >= quizQuestions.length) { if (currentQuizIndex >= quizQuestions.length) {
document.getElementById('quiz-question').textContent = "Quizz du jour terminé !"; document.getElementById('quiz-question').textContent = "Today's Quiz finished!";
document.getElementById('quiz-options').innerHTML = ""; document.getElementById('quiz-options').innerHTML = "";
document.getElementById('quiz-score').textContent = `Votre score : ${quizScore} / ${quizQuestions.length}`; document.getElementById('quiz-score').textContent = `Your score: ${quizScore} / ${quizQuestions.length}`;
document.getElementById('quiz-restart-btn').style.display = 'inline-block'; document.getElementById('quiz-restart-btn').style.display = 'inline-block';
if (preview) preview.classList.remove('visible'); if (preview) preview.classList.remove('visible');
return; return;
@@ -296,7 +296,7 @@ function showQuizQuestion() {
} else { } else {
if (oldImg) { if (oldImg) {
oldImg.src = url; oldImg.src = url;
oldImg.alt = 'Image associée à la question'; oldImg.alt = 'Image associated with the question';
oldImg.style.display = 'block'; oldImg.style.display = 'block';
} }
if (oldVid) oldVid.style.display = 'none'; if (oldVid) oldVid.style.display = 'none';
SRC/style.css
+8 -8
View File
@@ -9,17 +9,17 @@
--border: rgba(79,142,255,.15); --border: rgba(79,142,255,.15);
} }
body.theme-home { --theme-color:#4f8eff; --theme-glow:rgba(79,142,255,.4); --bg-deep:#020408; --bg-mid:#060d18; } body.theme-home { --theme-color:#4f8eff; --theme-glow:rgba(79,142,255,.4); --bg-deep:#020408; --bg-mid:#060d18; }
body.theme-mercure { --theme-color:#c0a080; --theme-glow:rgba(192,160,128,.4); --bg-deep:#0c0906; --bg-mid:#1a1008; } body.theme-mercury { --theme-color:#c0a080; --theme-glow:rgba(192,160,128,.4); --bg-deep:#0c0906; --bg-mid:#1a1008; }
body.theme-venus { --theme-color:#ff9230; --theme-glow:rgba(255,146,48,.4); --bg-deep:#0d0600; --bg-mid:#1e0e00; } body.theme-venus { --theme-color:#ff9230; --theme-glow:rgba(255,146,48,.4); --bg-deep:#0d0600; --bg-mid:#1e0e00; }
body.theme-terre { --theme-color:#00cfff; --theme-glow:rgba(0,207,255,.4); --bg-deep:#010b10; --bg-mid:#031520; } body.theme-earth { --theme-color:#00cfff; --theme-glow:rgba(0,207,255,.4); --bg-deep:#010b10; --bg-mid:#031520; }
body.theme-mars { --theme-color:#ff5040; --theme-glow:rgba(255,80,64,.4); --bg-deep:#0d0200; --bg-mid:#1e0600; } body.theme-mars { --theme-color:#ff5040; --theme-glow:rgba(255,80,64,.4); --bg-deep:#0d0200; --bg-mid:#1e0600; }
body.theme-jupiter { --theme-color:#ffb347; --theme-glow:rgba(255,179,71,.4); --bg-deep:#0d0800; --bg-mid:#1e1200; } body.theme-jupiter { --theme-color:#ffb347; --theme-glow:rgba(255,179,71,.4); --bg-deep:#0d0800; --bg-mid:#1e1200; }
body.theme-saturne { --theme-color:#f5d060; --theme-glow:rgba(245,208,96,.4); --bg-deep:#0c0900; --bg-mid:#1c1500; } body.theme-saturn { --theme-color:#f5d060; --theme-glow:rgba(245,208,96,.4); --bg-deep:#0c0900; --bg-mid:#1c1500; }
body.theme-uranus { --theme-color:#40e8d0; --theme-glow:rgba(64,232,208,.4); --bg-deep:#000c0b; --bg-mid:#001a18; } body.theme-uranus { --theme-color:#40e8d0; --theme-glow:rgba(64,232,208,.4); --bg-deep:#000c0b; --bg-mid:#001a18; }
body.theme-neptune { --theme-color:#2060ff; --theme-glow:rgba(32,96,255,.4); --bg-deep:#000208; --bg-mid:#000510; } body.theme-neptune { --theme-color:#2060ff; --theme-glow:rgba(32,96,255,.4); --bg-deep:#000208; --bg-mid:#000510; }
body.theme-soleil { --theme-color:#ffcc44; --theme-glow:rgba(255,180,40,.55); --theme-subtle:rgba(255,180,40,.09); --bg-deep:#0d0500; --bg-mid:#200c00; --border:rgba(255,180,40,.2); --text-primary:#fff5dc; --text-secondary:#c4923a; --text-muted:#6b4010; } body.theme-sun { --theme-color:#ffcc44; --theme-glow:rgba(255,180,40,.55); --theme-subtle:rgba(255,180,40,.09); --bg-deep:#0d0500; --bg-mid:#200c00; --border:rgba(255,180,40,.2); --text-primary:#fff5dc; --text-secondary:#c4923a; --text-muted:#6b4010; }
body.theme-lune { --theme-color:#c8cfe8; --theme-glow:rgba(200,207,232,.35); --theme-subtle:rgba(200,207,232,.06); --bg-deep:#060608; --bg-mid:#0e0f14; --border:rgba(200,207,232,.12); --text-primary:#dde2f0; --text-secondary:#7e8ba8; --text-muted:#3c4258; } body.theme-moon { --theme-color:#c8cfe8; --theme-glow:rgba(200,207,232,.35); --theme-subtle:rgba(200,207,232,.06); --bg-deep:#060608; --bg-mid:#0e0f14; --border:rgba(200,207,232,.12); --text-primary:#dde2f0; --text-secondary:#7e8ba8; --text-muted:#3c4258; }
body.theme-Quizz { --theme-color:#7eb8f7; --theme-glow:rgba(126,184,247,.35); --theme-subtle:rgba(126,184,247,.07); --bg-deep:#020510; --bg-mid:#060e24; --border:rgba(126,184,247,.13); --text-primary:#ddeeff; --text-secondary:#6a90b8; --text-muted:#2e4a6a; } body.theme-Quiz { --theme-color:#7eb8f7; --theme-glow:rgba(126,184,247,.35); --theme-subtle:rgba(126,184,247,.07); --bg-deep:#020510; --bg-mid:#060e24; --border:rgba(126,184,247,.13); --text-primary:#ddeeff; --text-secondary:#6a90b8; --text-muted:#2e4a6a; }
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; } *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
@@ -76,12 +76,12 @@ body::before {
radial-gradient(ellipse 25% 35% at 85% 75%, var(--theme-glow), transparent); radial-gradient(ellipse 25% 35% at 85% 75%, var(--theme-glow), transparent);
transition:background 1s ease; transition:background 1s ease;
} }
body.theme-soleil::before { body.theme-sun::before {
background: background:
radial-gradient(ellipse 50% 35% at 80% 15%,rgba(255,150,20,.3),transparent), radial-gradient(ellipse 50% 35% at 80% 15%,rgba(255,150,20,.3),transparent),
radial-gradient(ellipse 35% 50% at 10% 80%,rgba(255,100,0,.2),transparent); radial-gradient(ellipse 35% 50% at 10% 80%,rgba(255,100,0,.2),transparent);
} }
body.theme-lune::before { body.theme-moon::before {
background: background:
radial-gradient(ellipse 45% 30% at 85% 10%,rgba(200,207,232,.18),transparent), radial-gradient(ellipse 45% 30% at 85% 10%,rgba(200,207,232,.18),transparent),
radial-gradient(ellipse 30% 45% at 5% 90%,rgba(150,160,200,.12),transparent); radial-gradient(ellipse 30% 45% at 5% 90%,rgba(150,160,200,.12),transparent);