add img & descr & iframe
This commit is contained in:
+218
-13
@@ -6,43 +6,248 @@
|
|||||||
<title>OpenPlanetsMaps</title>
|
<title>OpenPlanetsMaps</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<link rel="stylesheet" href="style.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body class="theme-home">
|
||||||
<div class="bg-animated"></div>
|
<div class="bg-animated"></div>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<div class="menu-icon" onclick="toggleSidebar()">☰</div>
|
<div class="menu-icon" onclick="toggleSidebar()">☰</div>
|
||||||
<h1>Title</h1>
|
<h1>Open Planets Maps</h1>
|
||||||
<button class="help-btn">?</button>
|
<button class="help-btn">?</button>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar">
|
<nav id="sidebar" class="sidebar">
|
||||||
<ul>
|
<ul>
|
||||||
<li onclick="showLayer('home')">Accueil</li>
|
<li onclick="showLayer('home')">Accueil</li>
|
||||||
<li onclick="showLayer('theme')">Thème</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>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main id="content-area">
|
<main id="content-area">
|
||||||
<section id="layer-home" class="layer active">
|
<section id="layer-home" class="layer active">
|
||||||
<div class="main-img">IMG/LOGO</div>
|
<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="flex-row">
|
||||||
<div class="box">jsp</div>
|
<div class="box">
|
||||||
<div class="box">txt</div>
|
<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>
|
||||||
<div class="ticker-wrap">
|
<div class="ticker-wrap">
|
||||||
<div class="ticker">Texte qui défile vers la droite...</div>
|
<div class="ticker">Système Solaire - 8 Planètes - Cartographie Open Source - Données Topographiques - Exploration Interactive...</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="desc-box">TXT desc / Potentiellement un form</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>
|
||||||
|
|
||||||
<section id="layer-theme" class="layer">
|
<section id="layer-mercure" class="layer">
|
||||||
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
<div class="search-bar"><input type="text" placeholder="Recherche multi-critères..."></div>
|
||||||
<div class="main-img">IMG THEME (Ptet anim)</div>
|
<div class="main-img">
|
||||||
<div class="desc-box">DESCR THEME</div>
|
<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-wrap">
|
||||||
<div class="ticker">Autre texte défilant différent...</div>
|
<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>
|
</div>
|
||||||
<div class="table-container">Tableau dates & data</div>
|
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
|||||||
+45
-1
@@ -9,8 +9,52 @@ function showLayer(layerId) {
|
|||||||
|
|
||||||
document.getElementById('layer-' + layerId).classList.add('active');
|
document.getElementById('layer-' + layerId).classList.add('active');
|
||||||
|
|
||||||
|
document.body.className = '';
|
||||||
|
document.body.classList.add('theme-' + layerId);
|
||||||
|
|
||||||
|
if (layerId !== 'home') {
|
||||||
|
fetchData(layerId);
|
||||||
|
}
|
||||||
|
|
||||||
toggleSidebar();
|
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 = '<tr><td colspan="3">Chargement des données depuis la BDD...</td></tr>';
|
||||||
|
|
||||||
|
try {
|
||||||
|
const mockDB = {
|
||||||
|
};
|
||||||
|
|
||||||
|
await new Promise(resolve => setTimeout(resolve, 500));
|
||||||
|
const data = mockDB[planetId] || [];
|
||||||
|
|
||||||
|
tbody.innerHTML = '';
|
||||||
|
|
||||||
|
if (data.length === 0) {
|
||||||
|
tbody.innerHTML = '<tr><td colspan="3">Aucune donnée disponible pour le moment.</td></tr>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
data.forEach(row => {
|
||||||
|
const tr = document.createElement('tr');
|
||||||
|
tr.innerHTML = `
|
||||||
|
<td>${row.nom}</td>
|
||||||
|
<td><div class="img-placeholder">${row.image}</div></td>
|
||||||
|
<td>${row.date}</td>
|
||||||
|
`;
|
||||||
|
tbody.appendChild(tr);
|
||||||
|
});
|
||||||
|
|
||||||
|
tbody.setAttribute('data-loaded', 'true');
|
||||||
|
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur de connexion à la BDD :", error);
|
||||||
|
tbody.innerHTML = '<tr><td colspan="3">Erreur lors de la récupération des données.</td></tr>';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
+231
-6
@@ -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;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@@ -6,7 +34,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: #f4f5f7;
|
background-color: var(--bg-gradient-2);
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@@ -20,9 +48,8 @@ body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 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;
|
z-index: -1;
|
||||||
filter: blur(8px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
@@ -94,7 +121,7 @@ header h1 {
|
|||||||
.sidebar li:hover {
|
.sidebar li:hover {
|
||||||
background-color: #f8fafc;
|
background-color: #f8fafc;
|
||||||
color: #0f172a;
|
color: #0f172a;
|
||||||
border-left-color: #3b82f6;
|
border-left-color: var(--theme-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
#content-area {
|
#content-area {
|
||||||
@@ -123,7 +150,6 @@ header h1 {
|
|||||||
|
|
||||||
.main-img {
|
.main-img {
|
||||||
min-height: 25vh;
|
min-height: 25vh;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
@@ -131,6 +157,19 @@ header h1 {
|
|||||||
margin-bottom: 2rem;
|
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 {
|
.box, .desc-box, .search-bar, .table-container {
|
||||||
padding: 0.5rem 0;
|
padding: 0.5rem 0;
|
||||||
margin-bottom: 2.5rem;
|
margin-bottom: 2.5rem;
|
||||||
@@ -138,14 +177,77 @@ header h1 {
|
|||||||
text-align: center;
|
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 {
|
.flex-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
margin-bottom: 3.5rem;
|
margin-bottom: 3.5rem;
|
||||||
|
max-width: 1000px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flex-row .box {
|
.flex-row .box {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
min-width: 280px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -162,7 +264,7 @@ header h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.search-bar input:focus {
|
.search-bar input:focus {
|
||||||
border-color: #3b82f6;
|
border-color: var(--theme-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ticker-wrap {
|
.ticker-wrap {
|
||||||
@@ -196,3 +298,126 @@ header h1 {
|
|||||||
border-top: 1px solid #f1f5f9;
|
border-top: 1px solid #f1f5f9;
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user