From bda9fbf7cba43a5d5020a9ec0db7e12c61f1088e Mon Sep 17 00:00:00 2001 From: Kyllian Auguste Date: Mon, 4 May 2026 19:52:56 +0200 Subject: [PATCH] add img & descr & iframe --- SRC/index.html | 231 ++++++++++++++++++++++++++++++++++++++++++++--- SRC/main.js | 46 +++++++++- SRC/style.css | 239 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 495 insertions(+), 21 deletions(-) diff --git a/SRC/index.html b/SRC/index.html index d64d070..9557df0 100644 --- a/SRC/index.html +++ b/SRC/index.html @@ -6,43 +6,248 @@ OpenPlanetsMaps - +
☰
-

Title

+

Open Planets Maps

-
IMG/LOGO
+
+ +
-
jsp
-
txt
+
+

Exploration Spatiale

+

Naviguez à travers le système solaire et découvrez les caractéristiques uniques de chaque planète grâce à nos cartes interactives.

+
+
+

Données Ouvertes

+

Accédez à une base de données topographiques issue des agences spatiales, centralisée dans un outil open source.

+
-
Texte qui défile vers la droite...
+
Système Solaire - 8 Planètes - Cartographie Open Source - Données Topographiques - Exploration Interactive...
-
TXT desc / Potentiellement un form
+
Prêt pour le lancement ? Ouvrez le menu latéral (☰) et sélectionnez une destination pour commencer votre voyage.
-
+
-
IMG THEME (Ptet anim)
-
DESCR THEME
+
+ +
+
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.
-
Autre texte défilant différent...
+
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
+
+
+ + + + + + + + + + + +
NomImageDate
En attente des données...
+
+
+ +
+
+
+ +
+
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.
+
+
Distance au Soleil : 108 millions de km  •  Température moyenne : 462°C  •  Superficie : 460 millions de km²  •  Durée du jour : 243 jours terrestres
+
+
+ + + + + + + + + + + +
NomImageDate
En attente des données...
+
+
+ +
+
+
+ +
+
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.
+
+
Distance au Soleil : 150 millions de km (1 UA)  •  Température moyenne : 15°C  •  Superficie : 510 millions de km²  •  Satellites naturels : 1 (La Lune)
+
+
+ + + + + + + + + + + +
NomImageDate
En attente des données...
+
+
+ +
+
+
+ +
+
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).
+
+
Distance au Soleil : 227,9 millions de km  •  Température moyenne : -63°C  •  Superficie : 144,8 millions de km²  •  Gravité : 3,72 m/s²
+
+
+ + + + + + + + + + + +
NomImageDate
En attente des données...
+
+
+ +
+
+
+ +
+
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.
+
+
Distance au Soleil : 778 millions de km  •  Température moyenne : -110°C  •  Superficie : 61,4 milliards de km²  •  Satellites naturels : 95 connus
+
+
+ + + + + + + + + + + +
NomImageDate
En attente des données...
+
+
+ +
+
+
+ +
+
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.
+
+
Distance au Soleil : 1,43 milliard de km  •  Température moyenne : -140°C  •  Superficie : 42,7 milliards de km²  •  Satellites naturels : 146 connus
+
+
+ + + + + + + + + + + +
NomImageDate
En attente des données...
+
+
+ +
+
+
+ +
+
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.
+
+
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
+
+
+ + + + + + + + + + + +
NomImageDate
En attente des données...
+
+
+ +
+
+
+ +
+
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.
+
+
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
+
+
+ + + + + + + + + + + +
NomImageDate
En attente des données...
-
Tableau dates & data
diff --git a/SRC/main.js b/SRC/main.js index 0a2e7cc..606f52f 100644 --- a/SRC/main.js +++ b/SRC/main.js @@ -9,8 +9,52 @@ function showLayer(layerId) { document.getElementById('layer-' + layerId).classList.add('active'); + document.body.className = ''; + document.body.classList.add('theme-' + layerId); + + if (layerId !== 'home') { + fetchData(layerId); + } + toggleSidebar(); } -async function fetchData() { +async function fetchData(planetId) { + const tbody = document.getElementById('tbody-' + planetId); + if (!tbody) return; + + if (tbody.getAttribute('data-loaded') === 'true') return; + + tbody.innerHTML = 'Chargement des données depuis la BDD...'; + + try { + const mockDB = { + }; + + await new Promise(resolve => setTimeout(resolve, 500)); + const data = mockDB[planetId] || []; + + tbody.innerHTML = ''; + + if (data.length === 0) { + tbody.innerHTML = 'Aucune donnée disponible pour le moment.'; + return; + } + + data.forEach(row => { + const tr = document.createElement('tr'); + tr.innerHTML = ` + ${row.nom} +
${row.image}
+ ${row.date} + `; + tbody.appendChild(tr); + }); + + tbody.setAttribute('data-loaded', 'true'); + + } catch (error) { + console.error("Erreur de connexion à la BDD :", error); + tbody.innerHTML = 'Erreur lors de la récupération des données.'; + } } \ No newline at end of file diff --git a/SRC/style.css b/SRC/style.css index 687a555..ae18be5 100644 --- a/SRC/style.css +++ b/SRC/style.css @@ -1,3 +1,31 @@ +:root { + --theme-color: #007bff; + --bg-gradient-1: #ffffff; + --bg-gradient-2: #f4f5f7; +} + +body.theme-home { + --theme-color: #007bff; + --bg-gradient-1: #1e293b; + --bg-gradient-2: #0f172a; +} +body.theme-mercure { + --theme-color: #888888; + --bg-gradient-1: #2b2b2b; + --bg-gradient-2: #141414; +} +body.theme-venus { + --theme-color: #ff8c00; + --bg-gradient-1: #2b2b2b; + --bg-gradient-2: #141414; +} +body.theme-terre { --theme-color: #00bfff; --bg-gradient-2: #f0faff; } +body.theme-mars { --theme-color: #ff3b30; --bg-gradient-2: #fff0f0; } +body.theme-jupiter { --theme-color: #ff9800; --bg-gradient-2: #fff7eb; } +body.theme-saturne { --theme-color: #ffc107; --bg-gradient-2: #fffbeb; } +body.theme-uranus { --theme-color: #00e5ff; --bg-gradient-2: #e6ffff; } +body.theme-neptune { --theme-color: #1a56ff; --bg-gradient-2: #ebf0ff; } + * { margin: 0; padding: 0; @@ -6,7 +34,7 @@ } body { - background-color: #f4f5f7; + background-color: var(--bg-gradient-2); color: #2c3e50; display: flex; flex-direction: column; @@ -20,9 +48,8 @@ body { left: 0; width: 100%; height: 100%; - background: radial-gradient(circle at top right, #ffffff, #f4f5f7); + background: radial-gradient(circle at top right, var(--bg-gradient-1), var(--bg-gradient-2)); z-index: -1; - filter: blur(8px); } header { @@ -94,7 +121,7 @@ header h1 { .sidebar li:hover { background-color: #f8fafc; color: #0f172a; - border-left-color: #3b82f6; + border-left-color: var(--theme-color); } #content-area { @@ -123,7 +150,6 @@ header h1 { .main-img { min-height: 25vh; - display: flex; align-items: center; justify-content: center; font-size: 1.25rem; @@ -131,6 +157,19 @@ header h1 { margin-bottom: 2rem; } +.main-img iframe, +.main-img img { + width: 100%; + max-width: 1200px; + height: 70vh; + border: none; + border-radius: 8px; +} + +.main-img img { + object-fit: cover; +} + .box, .desc-box, .search-bar, .table-container { padding: 0.5rem 0; margin-bottom: 2.5rem; @@ -138,14 +177,77 @@ header h1 { text-align: center; } +.data-table { + width: 100%; + max-width: 900px; + margin: 0 auto; + border-collapse: collapse; +} + +.data-table th, .data-table td { + border: 1px solid; + border-color: inherit; + opacity: 0.85; + padding: 1rem; + text-align: center; + vertical-align: middle; +} + +.data-table th { + font-weight: 600; + background-color: rgba(150, 150, 150, 0.1); +} + +.img-placeholder { + width: 100px; + height: 60px; + background-color: rgba(150, 150, 150, 0.2); + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 4px; + font-size: 0.85rem; + border: 1px dashed currentColor; + margin: 0 auto; +} + +.desc-box { + max-width: 800px; + margin-left: auto; + margin-right: auto; + line-height: 1.6; +} + +#layer-home .desc-box { + white-space: nowrap; +} + +.box h2 { + font-size: 1.35rem; + font-weight: 600; + margin-bottom: 0.75rem; + color: #1a1a1a; +} + +.box p { + line-height: 1.6; + color: #475569; +} + .flex-row { display: flex; + flex-wrap: wrap; + justify-content: center; gap: 2rem; margin-bottom: 3.5rem; + max-width: 1000px; + margin-left: auto; + margin-right: auto; } .flex-row .box { flex: 1; + min-width: 280px; margin-bottom: 0; } @@ -162,7 +264,7 @@ header h1 { } .search-bar input:focus { - border-color: #3b82f6; + border-color: var(--theme-color); } .ticker-wrap { @@ -195,4 +297,127 @@ header h1 { font-size: 0.85rem; border-top: 1px solid #f1f5f9; margin-top: auto; -} \ No newline at end of file +} + +body.theme-home { + color: #e0e0e0; +} + +body.theme-home header, +body.theme-home .site-footer { + background-color: rgba(15, 23, 42, 0.85); + border-color: #334155; +} + +body.theme-home header h1 { + color: #ffffff; +} + +body.theme-home .menu-icon, +body.theme-home .help-btn { + background-color: #1e293b; + border-color: #334155; + color: #b9bbbe; +} + +body.theme-home .menu-icon:hover, +body.theme-home .help-btn:hover { + background-color: #334155; + color: #ffffff; +} + +body.theme-mercure { + color: #e0e0e0; +} + +body.theme-mercure header, +body.theme-mercure .site-footer { + background-color: rgba(20, 20, 20, 0.85); + border-color: #333333; +} + +body.theme-mercure header h1, +body.theme-mercure .box h2 { + color: #ffffff; +} + +body.theme-mercure .menu-icon, +body.theme-mercure .help-btn { + background-color: #2b2b2b; + border-color: #333333; + color: #a3a3a3; +} + +body.theme-mercure .menu-icon:hover, +body.theme-mercure .help-btn:hover { + background-color: #444444; + color: #ffffff; +} + +body.theme-mercure .ticker-wrap { color: #a3a3a3; border-color: #333333; } +body.theme-mercure .box p, body.theme-mercure .desc-box { color: #a3a3a3; } +body.theme-mercure .site-footer { color: #777777; } + +body.theme-mercure .sidebar { background-color: #141414; box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5); } +body.theme-mercure .sidebar li { color: #a3a3a3; } +body.theme-mercure .sidebar li:hover { background-color: #2b2b2b; color: #ffffff; } + +body.theme-venus { + color: #e0e0e0; +} + +body.theme-venus header, +body.theme-venus .site-footer { + background-color: rgba(20, 20, 20, 0.85); + border-color: #333333; +} + +body.theme-venus header h1, +body.theme-venus .box h2 { color: #ffffff; } + +body.theme-venus .menu-icon, +body.theme-venus .help-btn { background-color: #2b2b2b; border-color: #333333; color: #a3a3a3; } + +body.theme-venus .menu-icon:hover, +body.theme-venus .help-btn:hover { background-color: #444444; color: #ffffff; } + +body.theme-venus .ticker-wrap { color: #a3a3a3; border-color: #333333; } +body.theme-venus .box p, body.theme-venus .desc-box { color: #a3a3a3; } +body.theme-venus .site-footer { color: #777777; } + +body.theme-venus .sidebar { background-color: #141414; box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5); } +body.theme-venus .sidebar li { color: #a3a3a3; } +body.theme-venus .sidebar li:hover { background-color: #2b2b2b; color: #ffffff; } + +body.theme-home .ticker-wrap { + color: #b9bbbe; + border-color: #00bfff; + box-shadow: 0 -2px 10px rgba(0, 191, 255, 0.2), 0 2px 10px rgba(0, 191, 255, 0.2); +} + +body.theme-home .box h2 { + color: #00bfff; +} + +body.theme-home .box p, +body.theme-home .desc-box { + color: #b9bbbe; +} + +body.theme-home .site-footer { + color: #8e9297; +} + +body.theme-home .sidebar { + background-color: #1e293b; + box-shadow: 4px 0 15px rgba(0, 0, 0, 0.5); +} + +body.theme-home .sidebar li { + color: #b9bbbe; +} + +body.theme-home .sidebar li:hover { + background-color: #334155; + color: #ffffff; +}