Add Data.sql & Structure.sql & Finalizing CSS

SRC/DATA/Structure.sql

@@ -0,0 +1,283 @@
+-- phpMyAdmin SQL Dump
+-- version 5.2.3-1.fc43
+-- https://www.phpmyadmin.net/
+--
+-- Hôte : localhost
+-- Généré le : lun. 04 mai 2026 à 21:24
+-- Version du serveur : 10.11.16-MariaDB
+-- Version de PHP : 8.4.20
+
+SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
+START TRANSACTION;
+SET time_zone = "+00:00";
+
+
+/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
+/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
+/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
+/*!40101 SET NAMES utf8mb4 */;
+
+--
+-- Base de données : `OpenPlanetsMaps`
+--
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `EARTH`
+--
+
+CREATE TABLE `EARTH` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Earth'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `JUPITER`
+--
+
+CREATE TABLE `JUPITER` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Jupiter'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `MARS`
+--
+
+CREATE TABLE `MARS` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Mars'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `MERCURY`
+--
+
+CREATE TABLE `MERCURY` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Mercury'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `NEPTUNE`
+--
+
+CREATE TABLE `NEPTUNE` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Neptune'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `SATURN`
+--
+
+CREATE TABLE `SATURN` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Saturn'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `URANUS`
+--
+
+CREATE TABLE `URANUS` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Uranus'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+-- --------------------------------------------------------
+
+--
+-- Structure de la table `VENUS`
+--
+
+CREATE TABLE `VENUS` (
+  `id` int(11) NOT NULL,
+  `date` date DEFAULT NULL,
+  `explanation` text DEFAULT NULL,
+  `hdurl` varchar(255) DEFAULT NULL,
+  `media_type` varchar(50) DEFAULT NULL,
+  `service_version` varchar(10) DEFAULT NULL,
+  `title` varchar(255) DEFAULT NULL,
+  `url` varchar(255) DEFAULT NULL,
+  `copyright` varchar(255) DEFAULT NULL,
+  `planete_nom` varchar(20) DEFAULT 'Venus'
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
+
+--
+-- Index pour les tables déchargées
+--
+
+--
+-- Index pour la table `EARTH`
+--
+ALTER TABLE `EARTH`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Index pour la table `JUPITER`
+--
+ALTER TABLE `JUPITER`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Index pour la table `MARS`
+--
+ALTER TABLE `MARS`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Index pour la table `MERCURY`
+--
+ALTER TABLE `MERCURY`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Index pour la table `NEPTUNE`
+--
+ALTER TABLE `NEPTUNE`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Index pour la table `SATURN`
+--
+ALTER TABLE `SATURN`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Index pour la table `URANUS`
+--
+ALTER TABLE `URANUS`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- Index pour la table `VENUS`
+--
+ALTER TABLE `VENUS`
+  ADD PRIMARY KEY (`id`);
+
+--
+-- AUTO_INCREMENT pour les tables déchargées
+--
+
+--
+-- AUTO_INCREMENT pour la table `EARTH`
+--
+ALTER TABLE `EARTH`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT pour la table `JUPITER`
+--
+ALTER TABLE `JUPITER`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT pour la table `MARS`
+--
+ALTER TABLE `MARS`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT pour la table `MERCURY`
+--
+ALTER TABLE `MERCURY`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT pour la table `NEPTUNE`
+--
+ALTER TABLE `NEPTUNE`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT pour la table `SATURN`
+--
+ALTER TABLE `SATURN`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT pour la table `URANUS`
+--
+ALTER TABLE `URANUS`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+
+--
+-- AUTO_INCREMENT pour la table `VENUS`
+--
+ALTER TABLE `VENUS`
+  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
+COMMIT;
+
+/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
+/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
+/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

SRC/main.js

@@ -6,12 +6,12 @@ function showLayer(layerId) {
     document.querySelectorAll('.layer').forEach(layer => {
         layer.classList.remove('active');
     });
-    
+
     document.getElementById('layer-' + layerId).classList.add('active');
-    
+
-    document.body.className = ''; 
+    document.body.className = '';
     document.body.classList.add('theme-' + layerId);
-    
+
     if (layerId !== 'home') {
         fetchData(layerId);
     }
@@ -19,22 +19,102 @@ function showLayer(layerId) {
     toggleSidebar();
 }
 
+const planetData = {};
+const planetCols = {};
+
+function wireSearch(planetId) {
+    const layer = document.getElementById('layer-' + planetId);
+    if (!layer) return;
+    const input = layer.querySelector('.search-bar input');
+    if (!input) return;
+
+    const fresh = input.cloneNode(true);
+    input.parentNode.replaceChild(fresh, input);
+
+    fresh.addEventListener('input', () => {
+        filterTable(planetId, fresh.value.trim());
+    });
+}
+
+function filterTable(planetId, query) {
+    const tbody = document.getElementById('tbody-' + planetId);
+    if (!tbody) return;
+
+    const rows   = Array.from(tbody.querySelectorAll('tr'));
+    const cols   = planetCols[planetId] || [];
+    const data   = planetData[planetId] || [];
+
+    const titleIndices = cols.reduce((acc, col, i) => {
+        const c = col.toLowerCase();
+        if (c === 'nom' || c === 'name' || c.includes('title') || c.includes('titre')) {
+            acc.push(i);
+        }
+        return acc;
+    }, []);
+
+    const searchIndices = titleIndices.length > 0
+        ? titleIndices
+        : cols.reduce((acc, col, i) => {
+            const c = col.toLowerCase();
+            if (!c.includes('url') && !c.includes('desc') && !c.includes('expl') && c !== 'image' && c !== 'img') {
+                acc.push(i);
+            }
+            return acc;
+        }, []);
+
+    const tokens = query.toLowerCase().split(/\s+/).filter(Boolean);
+
+    const tableContainer = tbody.closest('.table-container');
+    const showMoreBtn    = tableContainer ? tableContainer.querySelector('.show-more-btn') : null;
+
+    if (tokens.length === 0) {
+        rows.forEach((tr, index) => {
+            tr.style.display = '';
+            if (data.length > 10) {
+                if (index >= 10) tr.classList.add('hidden-row');
+                else             tr.classList.remove('hidden-row');
+            }
+        });
+        if (showMoreBtn) showMoreBtn.style.display = '';
+        return;
+    }
+
+    if (showMoreBtn) showMoreBtn.style.display = 'none';
+
+    rows.forEach((tr, index) => {
+        const rowObj = data[index];
+        if (!rowObj) { tr.style.display = 'none'; return; }
+
+        const haystack = searchIndices
+            .map(i => String(rowObj[cols[i]] || '').toLowerCase())
+            .join(' ');
+
+        const matches = tokens.every(token => haystack.includes(token));
+
+        tr.classList.remove('hidden-row');
+        tr.style.display = matches ? '' : 'none';
+    });
+}
+
 async function fetchData(planetId) {
     const tbody = document.getElementById('tbody-' + planetId);
     if (!tbody) return;
 
-    if (tbody.getAttribute('data-loaded') === 'true') return;
+    if (tbody.getAttribute('data-loaded') === 'true') {
+        wireSearch(planetId);
+        return;
+    }
 
     tbody.innerHTML = '<tr><td colspan="3">Chargement des données depuis la BDD...</td></tr>';
 
     try {
         const response = await fetch(`api.php?planet=${planetId}`);
-        
+
         if (!response.ok) {
             const errorData = await response.json().catch(() => ({}));
             throw new Error(errorData.error || `Erreur HTTP: ${response.status}`);
         }
-        
+
         const data = await response.json();
 
         tbody.innerHTML = '';
@@ -45,26 +125,27 @@ async function fetchData(planetId) {
         }
 
         const columns = Object.keys(data[0]).filter(col => col.toLowerCase() !== 'copyright');
-        
+
+        planetData[planetId] = data;
+        planetCols[planetId] = columns;
+
         const thead = tbody.parentElement.querySelector('thead');
         thead.innerHTML = '<tr>' + columns.map(col => {
             const colLower = col.toLowerCase();
             const isDesc = colLower.includes('desc') || colLower.includes('expl');
-            const isUrl = colLower.includes('url') || colLower === 'image' || colLower === 'img';
+            const isUrl  = colLower.includes('url')  || colLower === 'image' || colLower === 'img';
-            
+
             let className = '';
-            if (isDesc) className = ' class="col-desc"';
+            if (isDesc)     className = ' class="col-desc"';
             else if (isUrl) className = ' class="col-url"';
             return `<th${className}>${col.toUpperCase()}</th>`;
         }).join('') + '</tr>';
 
         data.forEach((row, index) => {
             const tr = document.createElement('tr');
-            
+
-            if (index >= 10) {
+            if (index >= 10) tr.classList.add('hidden-row');
-                tr.classList.add('hidden-row');
+
-            }
-            
             let rowHtml = '';
             columns.forEach(col => {
                 const colLower = col.toLowerCase();
@@ -72,7 +153,7 @@ async function fetchData(planetId) {
                     const url = row[col];
                     if (url && url.trim() !== '') {
                         rowHtml += `<td class="col-url">
-                            <a href="${url}" target="_blank" rel="noopener noreferrer" style="color: inherit; text-decoration: underline; font-weight: 500;">
+                            <a href="${url}" target="_blank" rel="noopener noreferrer">
                                 ${url}
                             </a>
                         </td>`;
@@ -82,19 +163,19 @@ async function fetchData(planetId) {
                 } else if (colLower.includes('desc') || colLower.includes('expl')) {
                     const text = row[col] || '';
                     let fontSizeStyle = '';
-                    if (text.length > 200) fontSizeStyle = ' font-size: 0.75rem;';
+                    if (text.length > 200)      fontSizeStyle = ' font-size: 0.75rem;';
                     else if (text.length > 100) fontSizeStyle = ' font-size: 0.85rem;';
                     rowHtml += `<td class="col-desc" style="${fontSizeStyle}">${text}</td>`;
                 } else {
                     rowHtml += `<td>${row[col]}</td>`;
                 }
             });
+
             tr.innerHTML = rowHtml;
             tbody.appendChild(tr);
         });
 
         const tableContainer = tbody.closest('.table-container');
-        
         const existingBtn = tableContainer.querySelector('.show-more-btn');
         if (existingBtn) existingBtn.remove();
 
@@ -111,6 +192,8 @@ async function fetchData(planetId) {
 
         tbody.setAttribute('data-loaded', 'true');
 
+        wireSearch(planetId);
+
     } catch (error) {
         console.error("Erreur de connexion à la BDD :", error);
         tbody.innerHTML = `<tr><td colspan="3" style="color: #ff4444;">Erreur technique : ${error.message}</td></tr>`;

SRC/style.css

@@ -1,133 +1,258 @@
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Orbitron:wght@400;600;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');
+
 :root {
-    --theme-color: #007bff;
+    --theme-color: #4f8eff;
-    --bg-gradient-1: #ffffff;
+    --theme-glow: rgba(79, 142, 255, 0.35);
-    --bg-gradient-2: #f4f5f7;
+    --theme-subtle: rgba(79, 142, 255, 0.08);
+    --bg-deep: #020408;
+    --bg-mid: #060d18;
+    --bg-surface: #0a1628;
+    --text-primary: #e8f0ff;
+    --text-secondary: #7a9bc4;
+    --text-muted: #3d5478;
+    --border: rgba(79, 142, 255, 0.15);
+    --star-color: #ffffff;
 }
 
-body.theme-home {
+body.theme-home    { --theme-color: #4f8eff; --theme-glow: rgba(79,142,255,0.4);  --bg-deep: #020408; --bg-mid: #060d18; }
-    --theme-color: #007bff;
+body.theme-mercure { --theme-color: #c0a080; --theme-glow: rgba(192,160,128,0.4); --bg-deep: #0c0906; --bg-mid: #1a1008; }
-    --bg-gradient-1: #1e293b;
+body.theme-venus   { --theme-color: #ff9230; --theme-glow: rgba(255,146,48,0.4);  --bg-deep: #0d0600; --bg-mid: #1e0e00; }
-    --bg-gradient-2: #0f172a;
+body.theme-terre   { --theme-color: #00cfff; --theme-glow: rgba(0,207,255,0.4);   --bg-deep: #010b10; --bg-mid: #031520; }
-}
+body.theme-mars    { --theme-color: #ff5040; --theme-glow: rgba(255,80,64,0.4);   --bg-deep: #0d0200; --bg-mid: #1e0600; }
-body.theme-mercure {
+body.theme-jupiter { --theme-color: #ffb347; --theme-glow: rgba(255,179,71,0.4);  --bg-deep: #0d0800; --bg-mid: #1e1200; }
-    --theme-color: #888888;
+body.theme-saturne { --theme-color: #f5d060; --theme-glow: rgba(245,208,96,0.4);  --bg-deep: #0c0900; --bg-mid: #1c1500; }
-    --bg-gradient-1: #2b2b2b;
+body.theme-uranus  { --theme-color: #40e8d0; --theme-glow: rgba(64,232,208,0.4);  --bg-deep: #000c0b; --bg-mid: #001a18; }
-    --bg-gradient-2: #141414;
+body.theme-neptune { --theme-color: #2060ff; --theme-glow: rgba(32,96,255,0.4);   --bg-deep: #000208; --bg-mid: #000510; }
-}
-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; }
 
-* {
+*, *::before, *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
-    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
 }
 
 body {
-    background-color: var(--bg-gradient-2);
+    background-color: var(--bg-deep);
-    color: #2c3e50;
+    color: var(--text-primary);
+    font-family: 'Space Grotesk', sans-serif;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
     overflow-x: hidden;
+    transition: background-color 0.8s ease, color 0.3s ease;
 }
 
 .bg-animated {
     position: fixed;
-    top: 0; 
+    inset: 0;
-    left: 0; 
+    z-index: -2;
-    width: 100%; 
+    background: radial-gradient(ellipse at 20% 10%, var(--bg-mid) 0%, var(--bg-deep) 60%);
-    height: 100%;
+    transition: background 1s ease;
-    background: radial-gradient(circle at top right, var(--bg-gradient-1), var(--bg-gradient-2));
+}
+
+.bg-animated::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+        radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
+        radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
+        radial-gradient(1.5px 1.5px at 40% 8%, rgba(255,255,255,0.9) 0%, transparent 100%),
+        radial-gradient(1px 1px at 55% 60%, rgba(255,255,255,0.4) 0%, transparent 100%),
+        radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.7) 0%, transparent 100%),
+        radial-gradient(1.5px 1.5px at 80% 70%, rgba(255,255,255,0.6) 0%, transparent 100%),
+        radial-gradient(1px 1px at 90% 45%, rgba(255,255,255,0.5) 0%, transparent 100%),
+        radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.6) 0%, transparent 100%),
+        radial-gradient(1px 1px at 35% 90%, rgba(255,255,255,0.4) 0%, transparent 100%),
+        radial-gradient(1.5px 1.5px at 60% 85%, rgba(255,255,255,0.7) 0%, transparent 100%),
+        radial-gradient(1px 1px at 45% 50%, rgba(255,255,255,0.3) 0%, transparent 100%),
+        radial-gradient(1px 1px at 82% 15%, rgba(255,255,255,0.8) 0%, transparent 100%),
+        radial-gradient(1px 1px at 5% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
+        radial-gradient(1.5px 1.5px at 92% 88%, rgba(255,255,255,0.6) 0%, transparent 100%),
+        radial-gradient(1px 1px at 67% 5%, rgba(255,255,255,0.9) 0%, transparent 100%);
+    animation: starTwinkle 8s ease-in-out infinite alternate;
+}
+
+.bg-animated::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+        radial-gradient(1px 1px at 18% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
+        radial-gradient(1px 1px at 33% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
+        radial-gradient(1.5px 1.5px at 48% 22%, rgba(255,255,255,0.7) 0%, transparent 100%),
+        radial-gradient(1px 1px at 63% 75%, rgba(255,255,255,0.5) 0%, transparent 100%),
+        radial-gradient(1px 1px at 75% 48%, rgba(255,255,255,0.8) 0%, transparent 100%),
+        radial-gradient(1px 1px at 88% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
+        radial-gradient(1.5px 1.5px at 12% 68%, rgba(255,255,255,0.6) 0%, transparent 100%),
+        radial-gradient(1px 1px at 96% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
+        radial-gradient(1px 1px at 52% 38%, rgba(255,255,255,0.3) 0%, transparent 100%);
+    animation: starTwinkle 12s ease-in-out infinite alternate-reverse;
+}
+
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
     z-index: -1;
+    background:
+        radial-gradient(ellipse 40% 30% at 15% 20%, var(--theme-glow), transparent),
+        radial-gradient(ellipse 30% 40% at 85% 75%, rgba(0,0,0,0) 0%, transparent 100%);
+    transition: background 1s ease;
+    pointer-events: none;
+}
+
+@keyframes starTwinkle {
+    0%   { opacity: 0.6; }
+    50%  { opacity: 1; }
+    100% { opacity: 0.7; }
 }
 
 header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 1rem 2rem;
+    padding: 0 2rem;
-    background-color: rgba(255, 255, 255, 0.85);
+    height: 64px;
-    backdrop-filter: blur(10px);
+    background: rgba(2, 4, 8, 0.7);
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
+    backdrop-filter: blur(20px);
-    z-index: 10;
+    border-bottom: 1px solid var(--border);
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    transition: border-color 0.6s ease;
+}
+
+header::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
+    opacity: 0.6;
+    transition: background 0.6s ease;
 }
 
 header h1 {
-    font-size: 1.5rem;
+    font-family: 'Orbitron', monospace;
-    font-weight: 600;
+    font-size: 1.1rem;
-    color: #1a1a1a;
+    font-weight: 700;
-    letter-spacing: -0.5px;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    color: var(--theme-color);
+    text-shadow: 0 0 20px var(--theme-glow);
+    transition: color 0.6s ease, text-shadow 0.6s ease;
 }
 
 .menu-icon, .help-btn {
     cursor: pointer;
-    background: #ffffff;
+    background: transparent;
-    border: 1px solid #e2e8f0;
+    border: 1px solid var(--border);
-    border-radius: 8px;
+    border-radius: 6px;
-    padding: 0.5rem 1rem;
+    padding: 0.45rem 1rem;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
+    color: var(--text-secondary);
+    font-family: 'Space Mono', monospace;
+    font-size: 0.8rem;
+    letter-spacing: 0.08em;
     transition: all 0.2s ease;
-    font-size: 1rem;
+    position: relative;
-    color: #475569;
+    overflow: hidden;
 }
 
+.menu-icon::before, .help-btn::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--theme-subtle);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.menu-icon:hover::before, .help-btn:hover::before { opacity: 1; }
+
 .menu-icon:hover, .help-btn:hover {
-    background: #f8fafc;
+    border-color: var(--theme-color);
-    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
+    color: var(--theme-color);
-    color: #0f172a;
+    box-shadow: 0 0 12px var(--theme-glow);
 }
 
 .sidebar {
     position: fixed;
     top: 0;
-    left: -320px;
+    left: -300px;
-    width: 320px;
+    width: 280px;
     height: 100vh;
-    background-color: #ffffff;
+    background: rgba(2, 6, 14, 0.96);
-    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.05);
+    backdrop-filter: blur(24px);
-    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border-right: 1px solid var(--border);
+    transition: left 0.35s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s ease;
     z-index: 1000;
-    padding: 2rem 0;
+    padding-top: 5rem;
+    overflow: hidden;
 }
 
-.sidebar.open {
+.sidebar::before {
-    left: 0;
+    content: 'NAVIGATION';
+    position: absolute;
+    top: 1.5rem;
+    left: 1.5rem;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.65rem;
+    letter-spacing: 0.25em;
+    color: var(--text-muted);
 }
 
-.sidebar ul {
+.sidebar.open { left: 0; }
-    list-style: none;
+
-}
+.sidebar ul { list-style: none; }
 
 .sidebar li {
-    padding: 1rem 2rem;
+    padding: 0.9rem 1.75rem;
     cursor: pointer;
-    font-weight: 500;
+    font-family: 'Orbitron', monospace;
-    color: #475569;
+    font-size: 0.7rem;
-    transition: background-color 0.2s, color 0.2s;
+    font-weight: 600;
-    border-left: 3px solid transparent;
+    letter-spacing: 0.12em;
+    text-transform: uppercase;
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
+    border-left: 2px solid transparent;
+    position: relative;
+}
+
+.sidebar li::after {
+    content: '→';
+    position: absolute;
+    right: 1.5rem;
+    top: 50%;
+    transform: translateY(-50%) translateX(-4px);
+    opacity: 0;
+    transition: all 0.2s ease;
+    font-family: monospace;
+    font-size: 0.85rem;
 }
 
 .sidebar li:hover {
-    background-color: #f8fafc;
+    color: var(--theme-color);
-    color: #0f172a;
     border-left-color: var(--theme-color);
+    background: var(--theme-subtle);
+    padding-left: 2.25rem;
+    text-shadow: 0 0 10px var(--theme-glow);
+}
+
+.sidebar li:hover::after {
+    opacity: 1;
+    transform: translateY(-50%) translateX(0);
 }
 
 #content-area {
     flex: 1;
-    padding: 2rem;
+    padding: 2.5rem 2.5rem;
     display: flex;
+    max-width: 1400px;
+    margin: 0 auto;
+    width: 100%;
 }
 
 .layer {
@@ -136,45 +261,215 @@ header h1 {
     flex-direction: column;
     flex: 1;
     text-align: center;
-    animation: fadeIn 0.4s ease-out;
+    animation: layerReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
 }
 
-.layer.active {
+.layer.active { display: flex; }
-    display: flex;
-}
 
-@keyframes fadeIn {
+@keyframes layerReveal {
-    from { opacity: 0; transform: translateY(10px); }
+    from {
-    to { opacity: 1; transform: translateY(0); }
+        opacity: 0;
+        transform: translateY(16px);
+        filter: blur(4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+        filter: blur(0);
+    }
 }
 
 .main-img {
-    min-height: 25vh;
+    margin-bottom: 2.5rem;
-    align-items: center;
+    position: relative;
-    justify-content: center;
+    border-radius: 12px;
-    font-size: 1.25rem;
+    overflow: hidden;
-    color: #94a3b8;
+    border: 1px solid var(--border);
-    margin-bottom: 2rem;
+    box-shadow:
+        0 0 0 1px rgba(255,255,255,0.03),
+        0 20px 60px rgba(0,0,0,0.5),
+        0 0 40px var(--theme-glow);
+    transition: box-shadow 0.6s ease, border-color 0.6s ease;
+}
+
+.main-img::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: 12px;
+    box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
+    z-index: 1;
+    pointer-events: none;
 }
 
 .main-img iframe,
 .main-img img {
     width: 100%;
-    max-width: 1200px;
+    max-width: 100%;
     height: 70vh;
     border: none;
-    border-radius: 8px;
+    display: block;
 }
 
-.main-img img {
+.main-img img { object-fit: cover; }
-    object-fit: cover;
-}
 
-.box, .desc-box, .search-bar, .table-container {
+.flex-row {
-    padding: 0.5rem 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 1.5rem;
     margin-bottom: 2.5rem;
-    font-size: 1.05rem;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.flex-row .box { flex: 1; min-width: 280px; margin-bottom: 0; }
+
+.box {
+    padding: 1.75rem;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    text-align: left;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.3s, box-shadow 0.3s;
+}
+
+.box::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, var(--theme-color), transparent);
+    opacity: 0.5;
+}
+
+.box:hover {
+    border-color: var(--theme-color);
+    box-shadow: 0 8px 30px var(--theme-glow);
+}
+
+.box h2 {
+    font-family: 'Orbitron', monospace;
+    font-size: 0.75rem;
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--theme-color);
+    margin-bottom: 0.85rem;
+    text-shadow: 0 0 15px var(--theme-glow);
+}
+
+.box p {
+    line-height: 1.7;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.desc-box {
+    max-width: 780px;
+    margin: 0 auto 2.5rem;
+    line-height: 1.75;
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    padding: 1.25rem 1.75rem;
+    background: rgba(255,255,255,0.02);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    border-left: 3px solid var(--theme-color);
+    text-align: left;
+    transition: border-color 0.6s ease;
+}
+
+#layer-home .desc-box {
+    white-space: nowrap;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.85rem;
+    color: var(--theme-color);
     text-align: center;
+    background: var(--theme-subtle);
+    border: 1px solid var(--theme-color);
+    border-left: 1px solid var(--theme-color);
+    letter-spacing: 0.05em;
+    opacity: 0.8;
+}
+
+.ticker-wrap {
+    width: 100%;
+    overflow: hidden;
+    padding: 0.65rem 0;
+    margin-bottom: 2.5rem;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    position: relative;
+    transition: border-color 0.6s ease;
+}
+
+.ticker-wrap::before {
+    content: '◈ TELEMETRY';
+    position: absolute;
+    left: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    font-family: 'Space Mono', monospace;
+    font-size: 0.6rem;
+    letter-spacing: 0.2em;
+    color: var(--theme-color);
+    background: var(--bg-deep);
+    padding: 0 0.75rem;
+    z-index: 1;
+    transition: color 0.6s ease;
+}
+
+.ticker {
+    display: inline-block;
+    white-space: nowrap;
+    animation: marquee 18s linear infinite;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.75rem;
+    letter-spacing: 0.08em;
+    color: var(--text-secondary);
+    padding-left: 7rem;
+}
+
+@keyframes marquee {
+    from { transform: translateX(100vw); }
+    to   { transform: translateX(-100%); }
+}
+
+.search-bar {
+    margin-bottom: 2rem;
+}
+
+.search-bar input {
+    width: 100%;
+    max-width: 460px;
+    padding: 0.7rem 1.25rem;
+    background: rgba(255,255,255,0.03);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-family: 'Space Mono', monospace;
+    font-size: 0.8rem;
+    letter-spacing: 0.05em;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
+}
+
+.search-bar input::placeholder { color: var(--text-muted); }
+
+.search-bar input:focus {
+    border-color: var(--theme-color);
+    background: var(--theme-subtle);
+    box-shadow: 0 0 16px var(--theme-glow);
+}
+
+.table-container {
+    margin-bottom: 3rem;
 }
 
 .data-table {
@@ -182,273 +477,137 @@ header h1 {
     max-width: 1300px;
     margin: 0 auto;
     border-collapse: collapse;
+    font-size: 0.88rem;
 }
 
-.data-table th, .data-table td {
+.data-table thead tr {
-    border: 1px solid;
+    background: rgba(255,255,255,0.03);
-    border-color: inherit;
+}
-    opacity: 0.85;
+
-    padding: 1rem;
+.data-table th {
+    padding: 0.85rem 1.1rem;
     text-align: center;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.65rem;
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    text-transform: uppercase;
+    color: var(--theme-color);
+    border-bottom: 1px solid var(--theme-color);
+    border-right: 1px solid var(--border);
+    transition: color 0.6s ease, border-color 0.6s ease;
+}
+
+.data-table th:last-child { border-right: none; }
+
+.data-table td {
+    padding: 0.85rem 1.1rem;
+    border-bottom: 1px solid var(--border);
+    border-right: 1px solid var(--border);
+    color: var(--text-secondary);
+    transition: all 0.2s ease;
     vertical-align: middle;
 }
 
+.data-table td:last-child { border-right: none; }
+
+.data-table tbody tr {
+    transition: background 0.2s ease;
+}
+
+.data-table tbody tr:hover td {
+    background: var(--theme-subtle);
+    color: var(--text-primary);
+}
+
 .col-desc {
     width: 40%;
-    min-width: 300px;
+    min-width: 280px;
-    text-align: justify !important;
+    text-align: left !important;
-    font-size: 0.9rem;
+    font-size: 0.85rem;
-    line-height: 1.4;
+    line-height: 1.55;
-    padding: 0.8rem !important;
+    padding: 0.85rem 1.1rem !important;
 }
 
 .col-url {
     width: 15%;
-    max-width: 350px;
+    max-width: 320px;
     word-wrap: break-word;
     word-break: break-all;
-    font-size: 0.8rem;
+    font-family: 'Space Mono', monospace;
+    font-size: 0.72rem;
     line-height: 1.4;
 }
 
-.data-table th {
+.col-url a {
-    font-weight: 600;
+    color: var(--theme-color) !important;
-    background-color: rgba(150, 150, 150, 0.1);
+    text-decoration: none !important;
+    font-weight: 400 !important;
+    opacity: 0.85;
+    transition: opacity 0.2s ease, text-shadow 0.2s ease;
 }
 
-.hidden-row {
+.col-url a:hover {
-    display: none !important;
+    opacity: 1;
+    text-shadow: 0 0 10px var(--theme-glow);
+    text-decoration: underline !important;
 }
 
+.hidden-row { display: none !important; }
+
 .show-more-btn {
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
     margin: 1.5rem auto 0;
-    padding: 0.6rem 1.5rem;
+    padding: 0.6rem 1.75rem;
-    background-color: rgba(150, 150, 150, 0.1);
+    background: transparent;
-    color: inherit;
+    color: var(--theme-color);
-    border: 1px solid currentColor;
+    border: 1px solid var(--theme-color);
-    border-radius: 20px;
+    border-radius: 4px;
     cursor: pointer;
-    font-family: inherit;
+    font-family: 'Space Mono', monospace;
-    font-size: 0.95rem;
+    font-size: 0.75rem;
-    font-weight: 500;
+    letter-spacing: 0.15em;
-    transition: all 0.2s ease;
+    text-transform: uppercase;
-    opacity: 0.85;
+    transition: all 0.25s ease;
 }
 
 .show-more-btn:hover {
-    opacity: 1;
+    background: var(--theme-subtle);
-    background-color: rgba(150, 150, 150, 0.2);
+    box-shadow: 0 0 20px var(--theme-glow);
-    transform: translateY(2px);
+    transform: translateY(1px);
-}
-
-.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;
-}
-
-.search-bar input {
-    width: 100%;
-    max-width: 500px;
-    padding: 0.75rem 1rem;
-    border: 1px solid #cbd5e1;
-    border-radius: 6px;
-    outline: none;
-    font-size: 0.95rem;
-    text-align: center;
-    transition: border-color 0.2s;
-}
-
-.search-bar input:focus {
-    border-color: var(--theme-color);
-}
-
-.ticker-wrap {
-    width: 100%;
-    overflow: hidden;
-    color: #475569;
-    padding: 0.75rem 0;
-    margin-bottom: 3.5rem;
-    border-top: 1px solid #e2e8f0;
-    border-bottom: 1px solid #e2e8f0;
-}
-
-.ticker {
-    display: inline-block;
-    white-space: nowrap;
-    animation: marquee 15s linear infinite;
-    font-weight: 500;
-}
-
-@keyframes marquee {
-    0% { transform: translateX(100%); }
-    100% { transform: translateX(-100%); }
 }
 
 .site-footer {
     text-align: center;
-    padding: 1.5rem;
+    padding: 1.25rem 2rem;
-    background-color: #ffffff;
+    background: rgba(2, 4, 8, 0.7);
-    color: #94a3b8;
+    backdrop-filter: blur(10px);
-    font-size: 0.85rem;
+    color: var(--text-muted);
-    border-top: 1px solid #f1f5f9;
+    font-family: 'Space Mono', monospace;
-    margin-top: auto;
+    font-size: 0.7rem;
+    letter-spacing: 0.15em;
+    border-top: 1px solid var(--border);
+    transition: border-color 0.6s ease;
 }
 
-body.theme-home {
+.site-footer::before {
-    color: #e0e0e0;
+    content: '◈ ';
+    color: var(--theme-color);
+    transition: color 0.6s ease;
 }
 
-body.theme-home header,
+::-webkit-scrollbar { width: 6px; }
-body.theme-home .site-footer {
+::-webkit-scrollbar-track { background: var(--bg-deep); }
-    background-color: rgba(15, 23, 42, 0.85);
+::-webkit-scrollbar-thumb {
-    border-color: #334155;
+    background: var(--theme-color);
+    border-radius: 3px;
+    opacity: 0.5;
 }
+::-webkit-scrollbar-thumb:hover { opacity: 1; }
 
-body.theme-home header h1 {
+::selection {
+    background: var(--theme-glow);
     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;
-}