diff --git a/www/IMG/IMP_Gen_logo-removebg-preview.png b/www/IMG/IMP_Gen_logo-removebg-preview.png deleted file mode 100644 index c66ba42..0000000 Binary files a/www/IMG/IMP_Gen_logo-removebg-preview.png and /dev/null differ diff --git a/www/admin.php b/www/admin.php deleted file mode 100755 index 1c4cb60..0000000 --- a/www/admin.php +++ /dev/null @@ -1,109 +0,0 @@ - "SET NAMES utf8", PDO::ATTR_EMULATE_PREPARES => false]; - $pdo = new PDO("mysql:host=$host;port=3306;dbname=$dbname;charset=utf8;protocol=tcp", $db_user, $db_pass, $options); - $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); - - $planete = $_POST['planete']; - $nom = $_POST['nom']; - $date = $_POST['date']; - $url = $_POST['url']; - $description = $_POST['description']; - - $allowedTables = [ - 'mercury' => 'MERCURY', 'venus' => 'VENUS', 'earth' => 'EARTH', - 'mars' => 'MARS', 'jupiter' => 'JUPITER', 'saturn' => 'SATURN', - 'uranus' => 'URANUS', 'neptune' => 'NEPTUNE' - ]; - - if (array_key_exists($planete, $allowedTables)) { - $nomTable = $allowedTables[$planete]; - $stmt = $pdo->prepare("INSERT INTO $nomTable (title, date, url, explanation) VALUES (?, ?, ?, ?)"); - $stmt->execute([$nom, $date, $url, $description]); - - $message = "

Row successfully added to the $nomTable table!

"; - } - } catch (PDOException $e) { - $message = "

SQL Error: " . $e->getMessage() . "

"; - } -} -?> - - - - - Admin Panel - OpenPlanetsMaps - - - - -
- -

Admin Login

-

-
- -
-
- -
-
← Back to site
- -

Add a row

- -
- -
-
-
-
-
- -
-
Logout← Back to site
- -
- - \ No newline at end of file diff --git a/www/api.php b/www/api.php deleted file mode 100755 index 1cfc38a..0000000 --- a/www/api.php +++ /dev/null @@ -1,82 +0,0 @@ - "SET NAMES utf8", PDO::ATTR_EMULATE_PREPARES => false]; - $pdo = new PDO("mysql:host=$host;port=3306;dbname=$dbname;charset=utf8;protocol=tcp", $username, $password, $options); - $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); - - $planetId = isset($_GET['planet']) ? $_GET['planet'] : ''; - - $allowedTables = [ - 'mercury' => 'MERCURY', - 'venus' => 'VENUS', - 'earth' => 'EARTH', - 'mars' => 'MARS', - 'jupiter' => 'JUPITER', - 'saturn' => 'SATURN', - 'uranus' => 'URANUS', - 'neptune' => 'NEPTUNE', - 'sun' => 'SUN', - 'moon' => 'MOON', - ]; - - if ($planetId === 'quiz') { - $queries = []; - $seed = date('Ymd'); - foreach ($allowedTables as $key => $table) { - $planetName = ucfirst($key); - $queries[] = "(SELECT explanation, '$planetName' AS planete_nom, url FROM $table WHERE explanation IS NOT NULL AND explanation != '' ORDER BY RAND($seed) LIMIT 3)"; - } - $unionQuery = implode(' UNION ALL ', $queries); - - $stmt = $pdo->prepare("SELECT * FROM ($unionQuery) as all_data ORDER BY RAND($seed) LIMIT 10"); - $stmt->execute(); - $results = $stmt->fetchAll(PDO::FETCH_ASSOC); - - $questions = []; - $allPlanets = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune','Sun' , 'Moon']; - - foreach ($results as $row) { - $correctEn = $row['planete_nom']; - - $optionsEn = [$correctEn]; - $others = array_diff($allPlanets, [$correctEn]); - shuffle($others); - $optionsEn = array_merge($optionsEn, array_slice($others, 0, 3)); - shuffle($optionsEn); - - $text = substr($row['explanation'], 0, 200) . '...'; - - $questions[] = [ - 'q' => "Which celestial body does this description refer to? « " . $text . " »", - 'options' => $optionsEn, - 'a' => $correctEn, - 'img' => isset($row['url']) ? $row['url'] : '' - ]; - } - - echo json_encode($questions); - exit; - } - - if (!array_key_exists($planetId, $allowedTables)) { - echo json_encode([]); - exit; - } - - $tableName = $allowedTables[$planetId]; - $stmt = $pdo->prepare("SELECT * FROM $tableName"); - $stmt->execute(); - - $data = $stmt->fetchAll(PDO::FETCH_ASSOC); - echo json_encode($data); -} catch (PDOException $e) { - http_response_code(500); - echo json_encode(['error' => 'Database error: ' . $e->getMessage()]); -} \ No newline at end of file diff --git a/www/contact.php b/www/contact.php deleted file mode 100644 index 132052d..0000000 --- a/www/contact.php +++ /dev/null @@ -1,88 +0,0 @@ -Format non autorisé. Seuls les fichiers JPG, PNG et PDF sont acceptés.

"; - $has_error = true; - } elseif ($file_size > $max_size) { - $message_status = "

Le fichier est trop volumineux (maximum 5 Mo).

"; - $has_error = true; - } else { - $upload_dir = 'UPLOADS/'; - if (!is_dir($upload_dir)) { - mkdir($upload_dir, 0777, true); - } - - $safe_file_name = time() . '_' . preg_replace('/[^a-zA-Z0-9.\-_]/', '', $file_name); - $target_path = $upload_dir . $safe_file_name; - - if (move_uploaded_file($file_tmp_name, $target_path)) { - $file_path = $target_path; - } else { - $message_status = "

Erreur lors de la sauvegarde du fichier.

"; - $has_error = true; - } - } - } - - if (!$has_error) { - try { - $host = '172.22.0.4'; - $dbname = 'OpenPlanetsMaps'; - $db_user = 'root'; - $db_pass = 'admin123'; - - $options = [PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES utf8", PDO::ATTR_EMULATE_PREPARES => false]; - $pdo = new PDO("mysql:host=$host;port=3306;dbname=$dbname;charset=utf8;protocol=tcp", $db_user, $db_pass, $options); - $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); - - $stmt = $pdo->prepare("INSERT INTO CONTACT (email, objet, demande, fichier, date_demande) VALUES (?, ?, ?, ?, NOW())"); - $stmt->execute([$email, $subject, $message, $file_path]); - - $message_status = "

Votre demande a été enregistrée avec succès dans la base de données !

"; - } catch (PDOException $e) { - $message_status = "

Erreur de base de données : " . htmlspecialchars($e->getMessage()) . "

"; - } - } -} -?> - - - - - Contact - OpenPlanetsMaps - - - -
-

Contact

- -
-
-
-
-
- -
-
← Retour au site
-
- - \ No newline at end of file diff --git a/www/index.html b/www/index.html deleted file mode 100755 index 67876d9..0000000 --- a/www/index.html +++ /dev/null @@ -1,395 +0,0 @@ - - - - - - - OpenPlanetsMaps - - - - -
- -
-
☰
-

Open Planets Maps

-
- - -
-
- - - -
-
-
- -
-
-
-

Space Exploration

-

Navigate through the solar system and discover the unique characteristics of each planet with our interactive maps.

-
-
-

Open Data

-

Access a topographic database from space agencies, centralized in an open source tool.

-
-
-
-
Solar System - 8 Planets - Open Source Mapping - Topographic Data - Interactive Exploration...
-
-
Ready for launch? Open the side menu (☰) and select a destination to begin your journey.
-
- -
-
-
- -
-
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.
-
-
Distance from the Sun: 58 million km  •  Temperature: -180°C to 430°C  •  Surface area: 74.8 million km²  •  Length of day: 59 Earth days
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
- -
-
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.
-
-
Distance from the Sun: 108 million km  •  Average temperature: 462°C  •  Surface area: 460 million km²  •  Length of day: 243 Earth days
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
- -
-
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.
-
-
Distance from the Sun: 150 million km (1 AU)  •  Average temperature: 15°C  •  Surface area: 510 million km²  •  Natural satellites: 1 (The Moon)
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
- -
-
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).
-
-
Distance from the Sun: 227.9 million km  •  Average temperature: -63°C  •  Surface area: 144.8 million km²  •  Gravity: 3.72 m/s²
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
- -
-
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.
-
-
Distance from the Sun: 778 million km  •  Average temperature: -110°C  •  Surface area: 61.4 billion km²  •  Natural satellites: 95 known
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
- -
-
Instantly recognizable by its spectacular system of rings composed of ice and rock particles, Saturn is a vast gas giant with extremely violent winds.
-
-
Distance from the Sun: 1.43 billion km  •  Average temperature: -140°C  •  Surface area: 42.7 billion km²  •  Natural satellites: 146 known
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
- -
-
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.
-
-
Distance from the Sun: 2.87 billion km  •  Average temperature: -195°C  •  Surface area: 8.1 billion km²  •  Length of year: 84 Earth years
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
- -
-
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.
-
-
Distance from the Sun: 4.5 billion km  •  Average temperature: -200°C  •  Surface area: 7.6 billion km²  •  Wind speed: up to 2,100 km/h
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
-
- -

Photorealistic Sun by Cesar Salcedo CG on Sketchfab

-
-
-
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.
-
-
Type: Yellow dwarf  •  Surface temperature: 5,500°C  •  Distance to Earth: 150 million km (1 AU)  •  Age: 4.6 billion years
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
-
-
- -

Moon by Mieke Roth on Sketchfab

-
-
-
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.
-
-
Distance to Earth: 384,400 km  •  Temperature: -173°C to 127°C  •  Gravity: 1.62 m/s²  •  Orbit duration: 27.3 days
-
-
- - - - - - - - - - - -
NameImageDate
Waiting for data...
-
-
- -
-
Test your knowledge of the solar system! Answer the questions below to see if you are a true space expert.
- -
- ◈ DAILY CHALLENGE -

Every day at midnight, the onboard computer compiles our archives to generate a new unique 10-question Quiz. Practice daily to perfect your knowledge!

-
- -
-

Loading the Quiz...

-
-
-
◈ SOURCE — MISSION IMAGE
- -
-
-

- -
-
-
- - - -
-
- -
- ◈ SYSTEM / ABOUT -

OpenPlanetsMaps

-

v1.0 — 2026

-
-
-
-

Project

-

OpenPlanetsMaps is an open source tool for interactive mapping of the solar system. Topographic data comes from the main global space agencies.

-
-
-

Data & Sources

-
    -
  • NASA — National Aeronautics and Space Administration
    • -
  • ESA — European Space Agency
    • -
  • JAXA — Japan Aerospace Exploration Agency
    • -
  • USGS — Astrogeology Science Center
    • -
-
-
-

3D Models

-
    -
  • Sketchfab — Hosting & rendering of interactive models
    • -
  • Models under Creative Commons licenses
    • -
-
-
-

Technologies

-
    -
  • HTML / CSS / JS — Front-end
    • -
  • PHP + MySQL — Back-end & database
    • -
  • Orbitron, Space Grotesk, Space Mono — Google Fonts
    • -
-
-
-

License

-

This project is freely distributed. Scientific data remains the property of their respective organizations.

-
-
-
- ◈ OpenPlanetsMaps — Royalty-free — 2026 -
-
- - - - \ No newline at end of file diff --git a/www/main.js b/www/main.js deleted file mode 100755 index 24dde25..0000000 --- a/www/main.js +++ /dev/null @@ -1,383 +0,0 @@ -function toggleSidebar() { - document.getElementById('sidebar').classList.toggle('open'); -} - -function showLayer(layerId) { - document.querySelectorAll('.layer').forEach(layer => { - layer.classList.remove('active'); - }); - - document.getElementById('layer-' + layerId).classList.add('active'); - - document.body.className = ''; - document.body.classList.add('theme-' + layerId); - - if (layerId === 'Quiz') { - initQuiz(); - } else if (layerId !== 'home') { - fetchData(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 === 'name' || c.includes('title')) { - 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') { - wireSearch(planetId); - return; - } - - tbody.innerHTML = 'Loading data from the database...'; - - try { - const response = await fetch(`api.php?planet=${planetId}`); - - if (!response.ok) { - const errorData = await response.json().catch(() => ({})); - throw new Error(errorData.error || `HTTP Error: ${response.status}`); - } - - const data = await response.json(); - - tbody.innerHTML = ''; - - if (data.length === 0) { - tbody.innerHTML = 'No data available at the moment.'; - return; - } - - 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 = '' + columns.map(col => { - const colLower = col.toLowerCase(); - const isDesc = colLower.includes('desc') || colLower.includes('expl'); - const isUrl = colLower.includes('url') || colLower === 'image' || colLower === 'img'; - - let className = ''; - if (isDesc) className = ' class="col-desc"'; - else if (isUrl) className = ' class="col-url"'; - return `${col.toUpperCase()}`; - }).join('') + ''; - - data.forEach((row, index) => { - const tr = document.createElement('tr'); - - if (index >= 10) tr.classList.add('hidden-row'); - - let rowHtml = ''; - columns.forEach(col => { - const colLower = col.toLowerCase(); - const colLabel = col.toUpperCase(); - if (colLower.includes('url') || colLower === 'image' || colLower === 'img') { - const url = row[col]; - if (url && url.trim() !== '') { - rowHtml += ` - - ${url} - - `; - } else { - rowHtml += `N/A`; - } - } else if (colLower.includes('desc') || colLower.includes('expl')) { - const text = row[col] || ''; - let fontSizeStyle = ''; - if (text.length > 200) fontSizeStyle = ' font-size: 0.75rem;'; - else if (text.length > 100) fontSizeStyle = ' font-size: 0.85rem;'; - rowHtml += `${text}`; - } else { - rowHtml += `${row[col]}`; - } - }); - - tr.innerHTML = rowHtml; - tbody.appendChild(tr); - }); - - const tableContainer = tbody.closest('.table-container'); - if (tableContainer) { - tableContainer.style.overflowX = 'auto'; - tableContainer.style.maxWidth = '100%'; - tableContainer.style.WebkitOverflowScrolling = 'touch'; - } - const existingBtn = tableContainer.querySelector('.show-more-btn'); - if (existingBtn) existingBtn.remove(); - - if (data.length > 10) { - const btn = document.createElement('button'); - btn.innerHTML = 'Show more ⬇'; - btn.className = 'show-more-btn'; - btn.onclick = () => { - tbody.querySelectorAll('.hidden-row').forEach(row => row.classList.remove('hidden-row')); - btn.remove(); - }; - tableContainer.appendChild(btn); - } - - tbody.setAttribute('data-loaded', 'true'); - - wireSearch(planetId); - - } catch (error) { - console.error("Database connection error:", error); - tbody.innerHTML = `Technical error: ${error.message}`; - } -} - -let quizQuestions = []; -let currentQuizIndex = 0; -let quizScore = 0; - -async function initQuiz() { - currentQuizIndex = 0; - quizScore = 0; - document.getElementById('quiz-restart-btn').style.display = 'none'; - document.getElementById('quiz-score').textContent = ''; - - if (quizQuestions.length === 0) { - document.getElementById('quiz-question').textContent = "Loading today's Quiz..."; - document.getElementById('quiz-options').innerHTML = ''; - - try { - const response = await fetch(`api.php?planet=quiz`); - if (!response.ok) { - let errMsg = "Network error"; - try { - const errData = await response.json(); - if (errData.error) errMsg = errData.error; - } catch (e) {} - throw new Error(errMsg); - } - quizQuestions = await response.json(); - - if (quizQuestions.length === 0) { - document.getElementById('quiz-question').textContent = "Not enough data in the database to generate a quiz."; - return; - } - } catch (error) { - console.error("Quiz Error:", error); - document.getElementById('quiz-question').textContent = "Error: " + error.message; - return; - } - } - - showQuizQuestion(); -} - -function showQuizQuestion() { - const preview = document.getElementById('quiz-img-preview'); - - if (currentQuizIndex >= quizQuestions.length) { - document.getElementById('quiz-question').textContent = "Today's Quiz finished!"; - document.getElementById('quiz-options').innerHTML = ""; - document.getElementById('quiz-score').textContent = `Your score: ${quizScore} / ${quizQuestions.length}`; - document.getElementById('quiz-restart-btn').style.display = 'inline-block'; - if (preview) preview.classList.remove('visible'); - return; - } - - const qObj = quizQuestions[currentQuizIndex]; - document.getElementById('quiz-question').innerText = `Question ${currentQuizIndex + 1}/${quizQuestions.length}:\n\n${qObj.q}`; - - const optionsContainer = document.getElementById('quiz-options'); - optionsContainer.innerHTML = ''; - - qObj.options.forEach(opt => { - const btn = document.createElement('button'); - btn.className = 'quiz-btn'; - btn.textContent = opt; - btn.onclick = () => checkAnswer(opt, qObj.a, btn); - optionsContainer.appendChild(btn); - }); - - if (preview) { - preview.classList.remove('visible'); - const oldImg = preview.querySelector('img'); - const oldVid = preview.querySelector('video'); - if (oldImg) { oldImg.src = ''; oldImg.style.display = 'none'; } - if (oldVid) { oldVid.pause(); oldVid.src = ''; oldVid.style.display = 'none'; } - - if (qObj.img && qObj.img.trim() !== '') { - const url = qObj.img.trim(); - const isVideo = /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(url); - const caption = preview.querySelector('.quiz-img-caption'); - - requestAnimationFrame(() => { - if (isVideo) { - let vid = preview.querySelector('video'); - if (!vid) { - vid = document.createElement('video'); - vid.controls = true; - vid.preload = 'metadata'; - vid.style.display = 'none'; - preview.querySelector('.quiz-img-label').insertAdjacentElement('afterend', vid); - } - vid.src = url; - vid.style.display = 'block'; - if (oldImg) oldImg.style.display = 'none'; - } else { - if (oldImg) { - oldImg.src = url; - oldImg.alt = 'Image associated with the question'; - oldImg.style.display = 'block'; - } - if (oldVid) oldVid.style.display = 'none'; - } - caption.textContent = url; - preview.classList.add('visible'); - }); - } - } -} - -function checkAnswer(selected, correct, btn) { - const optionsContainer = document.getElementById('quiz-options'); - const buttons = optionsContainer.querySelectorAll('.quiz-btn'); - - buttons.forEach(b => { - b.disabled = true; - b.style.cursor = 'default'; - }); - - if (selected === correct) { - btn.classList.add('correct'); - quizScore++; - } else { - btn.classList.add('wrong'); - buttons.forEach(b => { - if (b.textContent === correct) b.classList.add('correct'); - }); - } - - setTimeout(() => { - currentQuizIndex++; - showQuizQuestion(); - }, 1800); -} - -function openCredits() { - document.getElementById('credits-panel').classList.add('open'); - document.getElementById('credits-overlay').classList.add('open'); - document.body.style.overflow = 'hidden'; -} - -function closeCredits() { - document.getElementById('credits-panel').classList.remove('open'); - document.getElementById('credits-overlay').classList.remove('open'); - document.body.style.overflow = ''; -} - -document.addEventListener('DOMContentLoaded', () => { - const overlay = document.getElementById('credits-overlay'); - if (overlay) overlay.addEventListener('click', closeCredits); - - document.addEventListener('keydown', e => { - if (e.key === 'Escape') closeCredits(); - }); - - const isMobile = window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); - - if (isMobile) { - const iframes = document.querySelectorAll('iframe'); - iframes.forEach(iframe => { - const fallback = document.createElement('div'); - fallback.textContent = "functionality not available on mobile devices"; - fallback.style.display = "flex"; - fallback.style.alignItems = "center"; - fallback.style.justifyContent = "center"; - fallback.style.minHeight = "200px"; - fallback.style.backgroundColor = "#1e293b"; - fallback.style.color = "#f87171"; - fallback.style.border = "1px solid #334155"; - fallback.style.borderRadius = "8px"; - fallback.style.padding = "20px"; - fallback.style.textAlign = "center"; - - iframe.parentNode.replaceChild(fallback, iframe); - }); - } -}); \ No newline at end of file diff --git a/www/style.css b/www/style.css deleted file mode 100755 index c6e009c..0000000 --- a/www/style.css +++ /dev/null @@ -1,578 +0,0 @@ -@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:wght@400;700&display=swap'); - -:root { - --theme-color: #4f8eff; - --theme-glow: rgba(79,142,255,.35); - --theme-subtle:rgba(79,142,255,.08); - --bg-deep: #020408; --bg-mid: #060d18; - --text-primary: #e8f0ff; --text-secondary: #7a9bc4; --text-muted: #3d5478; - --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-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-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-jupiter { --theme-color:#ffb347; --theme-glow:rgba(255,179,71,.4); --bg-deep:#0d0800; --bg-mid:#1e1200; } -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-neptune { --theme-color:#2060ff; --theme-glow:rgba(32,96,255,.4); --bg-deep:#000208; --bg-mid:#000510; } -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-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-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; } - -html, body { max-width:100vw; overflow-x:hidden; } -body { - background:var(--bg-deep); color:var(--text-primary); - font-family:'Space Grotesk',sans-serif; - display:flex; flex-direction:column; min-height:100vh; overflow-x:hidden; - transition:background-color .8s ease, color .3s ease; -} - -.bg-animated { - position:fixed; inset:0; z-index:-2; - background:radial-gradient(ellipse at 20% 10%, var(--bg-mid) 0%, var(--bg-deep) 60%); - transition:background 1s ease; -} -.bg-animated::before, .bg-animated::after { - content:''; position:absolute; inset:0; -} -.bg-animated::before { - background-image: - radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.8) 0%,transparent 100%), - radial-gradient(1px 1px at 25% 40%,rgba(255,255,255,.5) 0%,transparent 100%), - radial-gradient(1.5px 1.5px at 40% 8%,rgba(255,255,255,.9) 0%,transparent 100%), - radial-gradient(1px 1px at 55% 60%,rgba(255,255,255,.4) 0%,transparent 100%), - radial-gradient(1px 1px at 70% 25%,rgba(255,255,255,.7) 0%,transparent 100%), - radial-gradient(1.5px 1.5px at 80% 70%,rgba(255,255,255,.6) 0%,transparent 100%), - radial-gradient(1px 1px at 90% 45%,rgba(255,255,255,.5) 0%,transparent 100%), - radial-gradient(1px 1px at 15% 80%,rgba(255,255,255,.6) 0%,transparent 100%), - radial-gradient(1px 1px at 35% 90%,rgba(255,255,255,.4) 0%,transparent 100%), - radial-gradient(1.5px 1.5px at 60% 85%,rgba(255,255,255,.7) 0%,transparent 100%), - radial-gradient(1px 1px at 82% 15%,rgba(255,255,255,.8) 0%,transparent 100%), - radial-gradient(1px 1px at 5% 55%,rgba(255,255,255,.5) 0%,transparent 100%), - radial-gradient(1.5px 1.5px at 92% 88%,rgba(255,255,255,.6) 0%,transparent 100%), - radial-gradient(1px 1px at 67% 5%,rgba(255,255,255,.9) 0%,transparent 100%); - animation:starTwinkle 8s ease-in-out infinite alternate; -} -.bg-animated::after { - background-image: - radial-gradient(1px 1px at 18% 30%,rgba(255,255,255,.6) 0%,transparent 100%), - radial-gradient(1px 1px at 33% 65%,rgba(255,255,255,.4) 0%,transparent 100%), - radial-gradient(1.5px 1.5px at 48% 22%,rgba(255,255,255,.7) 0%,transparent 100%), - radial-gradient(1px 1px at 63% 75%,rgba(255,255,255,.5) 0%,transparent 100%), - radial-gradient(1px 1px at 75% 48%,rgba(255,255,255,.8) 0%,transparent 100%), - radial-gradient(1px 1px at 88% 30%,rgba(255,255,255,.4) 0%,transparent 100%), - radial-gradient(1.5px 1.5px at 12% 68%,rgba(255,255,255,.6) 0%,transparent 100%), - radial-gradient(1px 1px at 96% 60%,rgba(255,255,255,.5) 0%,transparent 100%), - radial-gradient(1px 1px at 52% 38%,rgba(255,255,255,.3) 0%,transparent 100%); - animation:starTwinkle 12s ease-in-out infinite alternate-reverse; -} -body::before { - content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; - background: - radial-gradient(ellipse 40% 30% at 15% 20%, var(--theme-glow), transparent), - radial-gradient(ellipse 25% 35% at 85% 75%, var(--theme-glow), transparent); - transition:background 1s ease; -} -body.theme-sun::before { - background: - 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); -} -body.theme-moon::before { - background: - 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); -} -@keyframes starTwinkle { - 0% { opacity:.5; } - 50% { opacity:1; } - 100% { opacity:.65; } -} - -header { - display:flex; justify-content:space-between; align-items:center; - padding:0 2rem; height:64px; - background:rgba(2,4,8,.75); backdrop-filter:blur(20px); - border-bottom:1px solid var(--border); - position:sticky; top:0; z-index:100; - transition:border-color .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:.6; transition:background .6s ease; -} -header h1 { - font-family:'Orbitron',monospace; font-size:1.1rem; font-weight:700; - letter-spacing:.15em; text-transform:uppercase; - color:var(--theme-color); text-shadow:0 0 20px var(--theme-glow); - transition:color .6s ease, text-shadow .6s ease; -} -header h1:hover { animation:glitch .4s steps(1) forwards; } - -.menu-icon, .help-btn { - cursor:pointer; background:transparent; - border:1px solid var(--border); border-radius:6px; padding:.45rem 1rem; - color:var(--text-secondary); font-family:'Space Mono',monospace; - font-size:.8rem; letter-spacing:.08em; - transition:all .2s ease; position:relative; overflow:hidden; -} -.menu-icon::before, .help-btn::before { - content:''; position:absolute; inset:0; - background:var(--theme-subtle); opacity:0; transition:opacity .2s ease; -} -.menu-icon:hover::before, .help-btn:hover::before { opacity:1; } -.menu-icon:hover, .help-btn:hover { - border-color:var(--theme-color); color:var(--theme-color); - box-shadow:0 0 12px var(--theme-glow); -} - -.sidebar { - position:fixed; top:0; left:-300px; width:280px; height:100vh; - background:rgba(2,6,14,.96); backdrop-filter:blur(24px); - border-right:1px solid var(--border); - transition:left .35s cubic-bezier(.4,0,.2,1), border-color .6s ease; - z-index:1000; padding-top:5rem; overflow-y:auto; -} -.sidebar::before { - content:'NAVIGATION'; position:absolute; top:1.5rem; left:1.5rem; - font-family:'Space Mono',monospace; font-size:.65rem; letter-spacing:.25em; - color:var(--text-muted); -} -.sidebar.open { left:0; } -.sidebar ul { list-style:none; } -.sidebar li { - padding:.9rem 1.75rem; cursor:pointer; - font-family:'Orbitron',monospace; font-size:.7rem; font-weight:600; - letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); - transition:all .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 .2s ease; font-family:monospace; -} -.sidebar li:hover { - color:var(--theme-color); 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); } -.sidebar li.menu-category { - font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.3em; - color:var(--text-muted); cursor:default; border-left:none; - padding:1.2rem 1.75rem .4rem; pointer-events:none; -} -.sidebar li.menu-category::after { display:none; } -.sidebar li.menu-category:hover { background:none; padding-left:1.75rem; text-shadow:none; color:var(--text-muted); } - -#content-area { - flex:1; padding:2.5rem; display:flex; - max-width:1400px; margin:0 auto; width:100%; -} -.layer { - display:none; width:100%; flex-direction:column; flex:1; text-align:center; - animation:layerReveal .5s cubic-bezier(.4,0,.2,1) both; -} -.layer.active { display:flex; } - -.main-img { - margin-bottom:2.5rem; position:relative; - border-radius:12px; overflow:hidden; border:1px solid var(--border); - box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 60px var(--theme-glow); - transition:box-shadow .6s ease, border-color .6s ease, transform .4s ease; -} -.main-img:hover { transform:perspective(1200px) rotateX(1deg) scale(1.005); } -.main-img::before { - content:''; position:absolute; inset:0; border-radius:12px; - box-shadow:inset 0 0 30px rgba(0,0,0,.3); z-index:1; pointer-events:none; -} -.main-img iframe, .main-img img { width:100%; height:70vh; border:none; display:block; } -.main-img img { object-fit:cover; } -.sketchfab-embed-wrapper p { font-family:'Space Mono',monospace; font-size:.65rem; color:var(--text-muted); padding:.4rem .75rem; text-align:right; } -.sketchfab-embed-wrapper a { color:var(--theme-color); text-decoration:none; } - -.flex-row { - display:flex; flex-wrap:wrap; justify-content:center; - gap:1.5rem; margin:0 auto 2.5rem; max-width:900px; -} -.flex-row .box { flex:1; min-width:280px; } -.box { - padding:1.75rem; background:rgba(255,255,255,.02); - border:1px solid var(--border); border-radius:10px; - text-align:left; position:relative; overflow:hidden; - transition:border-color .3s, box-shadow .3s, transform .3s; -} -.box::before { - content:''; position:absolute; top:0; left:-100%; right:100%; height:2px; - background:linear-gradient(90deg,transparent,var(--theme-color),transparent); - transition:left .4s ease, right .4s ease; -} -.box:hover::before { left:0; right:0; } -.box:hover { border-color:var(--theme-color); box-shadow:0 8px 30px var(--theme-glow); transform:translateY(-2px); } -.box h2 { - font-family:'Orbitron',monospace; font-size:.75rem; font-weight:700; - letter-spacing:.2em; text-transform:uppercase; - color:var(--theme-color); margin-bottom:.85rem; text-shadow:0 0 15px var(--theme-glow); -} -.box p { line-height:1.7; color:var(--text-secondary); font-size:.9rem; } - -.desc-box { - max-width:780px; margin:0 auto 2.5rem; line-height:1.75; - color:var(--text-secondary); font-size:.95rem; padding:1.25rem 1.75rem; - background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:8px; - border-left:3px solid var(--theme-color); text-align:left; - transition:border-color .6s ease; -} -#layer-home .desc-box { - font-family:'Space Mono',monospace; font-size:.85rem; - color:var(--theme-color); text-align:center; - background:var(--theme-subtle); border:1px solid var(--theme-color); - letter-spacing:.05em; opacity:.8; -} - -.ticker-wrap { - width:100%; overflow:hidden; padding:.65rem 0; margin-bottom:2.5rem; - border-top:1px solid var(--border); border-bottom:1px solid var(--border); - position:relative; transition:border-color .6s ease; -} -.ticker-wrap::before { - content:'◈ TELEMETRY'; position:absolute; left:0; top:50%; transform:translateY(-50%); - font-family:'Space Mono',monospace; font-size:.6rem; letter-spacing:.2em; - color:var(--theme-color); background:var(--bg-deep); padding:0 .75rem; z-index:1; - transition:color .6s, background .6s; -} -.ticker-wrap::after { - content:''; position:absolute; right:0; top:0; bottom:0; width:80px; - background:linear-gradient(90deg,transparent,var(--bg-deep)); z-index:1; - transition:background .6s; -} -.ticker { - display:inline-block; white-space:nowrap; - animation:marquee 20s linear infinite; - font-family:'Space Mono',monospace; font-size:.75rem; - letter-spacing:.08em; color:var(--text-secondary); padding-left:7rem; -} -.ticker:hover { animation-play-state:paused; } - -.search-bar { margin-bottom:2rem; position:relative; display:flex; justify-content:center; } -.search-bar::before { - content:'⌕'; position:absolute; left:calc(50% - 210px); top:50%; - transform:translateY(-50%); font-size:1.1rem; color:var(--text-muted); - pointer-events:none; z-index:1; transition:color .2s; -} -.search-bar:focus-within::before { color:var(--theme-color); } -.search-bar input { - width:100%; max-width:460px; padding:.7rem 1.25rem .7rem 2.5rem; - background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:6px; - color:var(--text-primary); font-family:'Space Mono',monospace; - font-size:.8rem; letter-spacing:.05em; outline:none; - transition:border-color .2s, box-shadow .2s, background .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 20px var(--theme-glow); -} - -.table-container { margin-bottom:3rem; } -.data-table { width:100%; max-width:1300px; margin:0 auto; border-collapse:collapse; font-size:.88rem; } -.data-table thead tr { background:rgba(255,255,255,.03); } -.data-table th { - padding:.85rem 1.1rem; text-align:center; - font-family:'Space Mono',monospace; font-size:.65rem; font-weight:700; - letter-spacing:.2em; text-transform:uppercase; color:var(--theme-color); - border-bottom:1px solid var(--theme-color); border-right:1px solid var(--border); - position:relative; transition:color .6s, border-color .6s; -} -.data-table th::after { - content:''; position:absolute; bottom:-1px; left:0; right:0; height:2px; - background:var(--theme-color); transform:scaleX(0); transition:transform .3s; - box-shadow:0 0 8px var(--theme-glow); -} -.data-table th:hover::after { transform:scaleX(1); } -.data-table th:last-child, .data-table td:last-child { border-right:none; } -.data-table td { - padding:.85rem 1.1rem; border-bottom:1px solid var(--border); - border-right:1px solid var(--border); color:var(--text-secondary); - transition:all .2s ease; vertical-align:middle; -} -.data-table tbody tr { transition:background .2s; animation:rowFadeIn .4s both; } -.data-table tbody tr:nth-child(1) { animation-delay:.05s; } -.data-table tbody tr:nth-child(2) { animation-delay:.10s; } -.data-table tbody tr:nth-child(3) { animation-delay:.15s; } -.data-table tbody tr:nth-child(4) { animation-delay:.20s; } -.data-table tbody tr:nth-child(5) { animation-delay:.25s; } -.data-table tbody tr:nth-child(6) { animation-delay:.30s; } -.data-table tbody tr:nth-child(7) { animation-delay:.35s; } -.data-table tbody tr:nth-child(8) { animation-delay:.40s; } -.data-table tbody tr:nth-child(9) { animation-delay:.45s; } -.data-table tbody tr:nth-child(10) { animation-delay:.50s; } -.data-table tbody tr:hover td { background:var(--theme-subtle); color:var(--text-primary); } -.data-table tbody tr:hover td:first-child { border-left:2px solid var(--theme-color); padding-left:calc(1.1rem - 2px); } -.col-desc { width:40%; min-width:280px; text-align:left !important; font-size:.85rem; line-height:1.55; } -.col-url { width:15%; max-width:320px; word-break:break-all; font-family:'Space Mono',monospace; font-size:.72rem; } -.col-url a { color:var(--theme-color) !important; text-decoration:none !important; opacity:.85; transition:opacity .2s, text-shadow .2s; } -.col-url a:hover { opacity:1; text-shadow:0 0 10px var(--theme-glow); text-decoration:underline !important; } -.hidden-row { display:none !important; } - -.show-more-btn { - display:inline-flex; align-items:center; gap:.5rem; - margin:1.5rem auto 0; padding:.6rem 1.75rem; - background:transparent; color:var(--theme-color); - border:1px solid var(--theme-color); border-radius:4px; cursor:pointer; - font-family:'Space Mono',monospace; font-size:.75rem; - letter-spacing:.15em; text-transform:uppercase; - position:relative; overflow:hidden; transition:all .25s ease; -} -.show-more-btn::before { - content:''; position:absolute; inset:0; - background:var(--theme-subtle); transform:scaleX(0); transform-origin:left; transition:transform .3s; -} -.show-more-btn:hover::before { transform:scaleX(1); } -.show-more-btn:hover { box-shadow:0 0 24px var(--theme-glow); transform:translateY(1px); } - -.site-footer { - text-align:center; padding:1.25rem 2rem; - background:rgba(2,4,8,.7); backdrop-filter:blur(10px); - color:var(--text-muted); font-family:'Space Mono',monospace; - font-size:.7rem; letter-spacing:.15em; - border-top:1px solid var(--border); - cursor:pointer; user-select:none; - transition:border-color .6s, background .2s; -} -.site-footer::before { content:'◈ '; color:var(--theme-color); transition:color .6s; } -.site-footer:hover { background:rgba(255,255,255,.03); } -.footer-credits-hint { opacity:.5; font-style:italic; transition:opacity .2s; } -.site-footer:hover .footer-credits-hint { opacity:1; color:var(--theme-color); } - -.daily-challenge-box { - margin:0 auto 2rem; max-width:680px; padding:1rem 1.5rem; - background:var(--theme-subtle); border:1px solid var(--border); - border-left:3px solid var(--theme-color); border-radius:8px; text-align:left; -} -.daily-challenge-title { - display:block; font-family:'Orbitron',monospace; font-size:.7rem; font-weight:700; - letter-spacing:.25em; text-transform:uppercase; - color:var(--theme-color); text-shadow:0 0 12px var(--theme-glow); margin-bottom:.5rem; -} -.daily-challenge-desc { font-size:.85rem; line-height:1.6; color:var(--text-secondary); } - -#quiz-container { - margin:0 auto 3rem; max-width:680px; padding:2.25rem 2.5rem; - background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:12px; - text-align:center; position:relative; overflow:hidden; - box-shadow:0 0 40px var(--theme-glow), inset 0 0 60px rgba(0,0,0,.3); - display:flex; flex-direction:column; min-height:400px; -} -#quiz-container::before { - content:''; position:absolute; top:0; left:0; right:0; height:2px; - background:linear-gradient(90deg,transparent,var(--theme-color),transparent); -} -#quiz-question { - font-size:.95rem; font-weight:500; line-height:1.6; - color:var(--text-primary); margin-bottom:1.5rem; - white-space:pre-line; text-align:left; flex-grow:1; - display:flex; align-items:center; min-height:120px; -} -#quiz-options { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1rem; width:100%; } - -.quiz-btn { - background:rgba(255,255,255,.03); color:var(--text-primary); - border:1px solid var(--border); border-radius:8px; padding:.9rem 1.1rem; - font-family:'Space Grotesk',sans-serif; font-size:.9rem; font-weight:500; - cursor:pointer; text-align:left; position:relative; overflow:hidden; - transition:all .2s ease; - display:flex; align-items:center; min-height:54px; -} -.quiz-btn::before { - content:''; position:absolute; inset:0; - background:var(--theme-subtle); opacity:0; transition:opacity .2s; -} -.quiz-btn:hover:not(:disabled) { - border-color:var(--theme-color); box-shadow:0 0 16px var(--theme-glow); transform:translateY(-1px); -} -.quiz-btn:hover:not(:disabled)::before { opacity:1; } -.quiz-btn.correct { - background:rgba(74,222,128,.15) !important; border-color:#4ade80 !important; - color:#86efac !important; box-shadow:0 0 20px rgba(74,222,128,.3) !important; - animation:correctPulse .35s ease forwards; -} -.quiz-btn.correct::after { content:'✓'; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:#4ade80; pointer-events:none; } -.quiz-btn.wrong { - background:rgba(248,113,113,.15) !important; border-color:#f87171 !important; - color:#fca5a5 !important; box-shadow:0 0 20px rgba(248,113,113,.25) !important; - animation:shake .3s ease forwards; -} -.quiz-btn.wrong::after { content:'✗'; position:absolute; right:1rem; top:50%; transform:translateY(-50%); color:#f87171; pointer-events:none; } - -#quiz-score { - margin-top:1.5rem; font-family:'Orbitron',monospace; font-size:1.1rem; font-weight:700; - letter-spacing:.1em; color:var(--theme-color); text-shadow:0 0 20px var(--theme-glow); -} -#quiz-restart-btn { - display:none; margin-top:1.25rem; padding:.65rem 2rem; - background:transparent; color:var(--theme-color); - border:1px solid var(--theme-color); border-radius:6px; cursor:pointer; - font-family:'Space Mono',monospace; font-size:.75rem; - letter-spacing:.15em; text-transform:uppercase; transition:all .25s; -} -#quiz-restart-btn:hover { background:var(--theme-subtle); box-shadow:0 0 20px var(--theme-glow); transform:translateY(-1px); } - -#quiz-img-preview { - max-width:640px; margin:1.5rem auto 0; - border:1px solid var(--border); border-radius:10px; overflow:hidden; - background:rgba(0,0,0,.3); opacity:0; max-height:0; text-align:left; - transition:opacity .5s, max-height .5s, border-color .6s; -} -#quiz-img-preview.visible { opacity:1; max-height:480px; } -.quiz-img-label { - padding:.5rem 1rem; font-family:'Space Mono',monospace; font-size:.6rem; - letter-spacing:.2em; color:var(--theme-color); - border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); -} -#quiz-img-preview img, #quiz-img-preview video { - display:block; width:100%; max-height:320px; background:#000; -} -#quiz-img-preview img { object-fit:contain; } -#quiz-img-preview video { outline:none; } -#quiz-img-preview img[src=""], #quiz-img-preview video[src=""] { display:none; } -.quiz-img-caption { - padding:.5rem 1rem; font-family:'Space Mono',monospace; font-size:.65rem; - color:var(--text-muted); word-break:break-all; border-top:1px solid var(--border); - white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -} - -#credits-overlay { - position:fixed; inset:0; z-index:2000; - background:rgba(0,0,0,.7); backdrop-filter:blur(6px); - opacity:0; pointer-events:none; transition:opacity .35s; -} -#credits-overlay.open { opacity:1; pointer-events:all; } - -#credits-panel { - position:fixed; top:0; right:-480px; z-index:2001; - width:min(460px,95vw); height:100vh; - background:rgba(4,8,18,.97); backdrop-filter:blur(24px); - border-left:1px solid var(--border); - display:flex; flex-direction:column; - transition:right .4s cubic-bezier(.4,0,.2,1), border-color .6s; - overflow:hidden; -} -#credits-panel::before { - content:''; position:absolute; top:0; left:0; bottom:0; width:2px; - background:linear-gradient(180deg,transparent,var(--theme-color),transparent); - opacity:.6; -} -#credits-panel.open { right:0; } - -.credits-close { - position:absolute; top:1rem; right:1rem; - background:transparent; border:1px solid var(--border); border-radius:6px; - color:var(--text-muted); width:32px; height:32px; font-size:.8rem; cursor:pointer; - display:flex; align-items:center; justify-content:center; - transition:all .2s; z-index:1; -} -.credits-close:hover { border-color:var(--theme-color); color:var(--theme-color); box-shadow:0 0 10px var(--theme-glow); } - -.credits-header { padding:2.5rem 2rem 1.5rem; border-bottom:1px solid var(--border); flex-shrink:0; } -.credits-tag { - display:block; font-family:'Space Mono',monospace; font-size:.6rem; - letter-spacing:.25em; color:var(--theme-color); margin-bottom:.75rem; - text-shadow:0 0 10px var(--theme-glow); -} -.credits-title { - font-family:'Orbitron',monospace; font-size:1.4rem; font-weight:900; - letter-spacing:.1em; color:var(--text-primary); - text-shadow:0 0 30px var(--theme-glow); margin-bottom:.25rem; -} -.credits-version { font-family:'Space Mono',monospace; font-size:.7rem; color:var(--text-muted); letter-spacing:.1em; } - -.credits-body { flex:1; overflow-y:auto; padding:1.5rem 2rem; scrollbar-width:thin; scrollbar-color:var(--theme-color) transparent; } -.credits-section { margin-bottom:2rem; } -.credits-section h3 { - font-family:'Space Mono',monospace; font-size:.65rem; font-weight:700; - letter-spacing:.2em; text-transform:uppercase; color:var(--theme-color); - margin-bottom:.75rem; padding-bottom:.4rem; border-bottom:1px solid var(--border); -} -.credits-section p { font-size:.88rem; line-height:1.7; color:var(--text-secondary); } -.credits-section ul { list-style:none; display:flex; flex-direction:column; gap:.4rem; } -.credits-section ul li { - font-size:.85rem; color:var(--text-secondary); padding:.35rem .6rem; - border-left:1px solid var(--border); transition:border-color .2s, background .2s; -} -.credits-section ul li:hover { border-left-color:var(--theme-color); background:var(--theme-subtle); } -.credits-section ul li span { font-family:'Space Mono',monospace; font-size:.75rem; color:var(--theme-color); margin-right:.5rem; text-shadow:0 0 8px var(--theme-glow); } - -.credits-footer { padding:1rem 2rem; border-top:1px solid var(--border); font-family:'Space Mono',monospace; font-size:.62rem; letter-spacing:.15em; color:var(--text-muted); flex-shrink:0; } - -::-webkit-scrollbar { width:6px; } -::-webkit-scrollbar-track { background:var(--bg-deep); } -::-webkit-scrollbar-thumb { background:var(--theme-color); border-radius:3px; } -::selection { background:var(--theme-glow); color:#fff; } - -@keyframes layerReveal { - from { opacity:0; transform:translateY(16px); filter:blur(4px); } - to { opacity:1; transform:translateY(0); filter:blur(0); } -} -@keyframes rowFadeIn { - from { opacity:0; transform:translateX(-8px); } - to { opacity:1; transform:translateX(0); } -} -@keyframes marquee { - from { transform:translateX(100vw); } - to { transform:translateX(-100%); } -} -@keyframes glitch { - 0%,30%,50%,100% { text-shadow:0 0 20px var(--theme-glow); transform:translate(0); } - 10% { text-shadow:-2px 0 var(--theme-color),2px 0 rgba(255,0,100,.6); transform:translate(-1px,0); } - 20% { text-shadow:2px 0 var(--theme-color),-2px 0 rgba(0,200,255,.6); transform:translate(1px,0); } - 40% { text-shadow:-3px 0 rgba(255,0,100,.5),3px 0 var(--theme-color); transform:translate(2px,-1px); } - 60% { text-shadow:2px 0 rgba(0,200,255,.6),-1px 0 var(--theme-color); transform:translate(-1px,1px); } -} -@keyframes correctPulse { - 0%,100% { transform:scale(1); } - 40% { transform:scale(1.025); } -} -@keyframes shake { - 0%,100% { transform:translateX(0); } - 25% { transform:translateX(-5px); } - 50% { transform:translateX(5px); } - 75% { transform:translateX(-3px); } -} -@media (max-width:768px) { - #layer-Quiz .desc-box, #layer-Quiz .daily-challenge-box { display:none; } -} -@media (max-width:520px) { - header { padding:0 1rem; } - header h1 { font-size:.85rem; letter-spacing:.05em; text-align:center; } - .menu-icon, .help-btn { padding:.4rem .6rem; font-size:.7rem; } - #content-area { padding:1.5rem 1rem; } - .flex-row .box { min-width:100%; } - .desc-box { padding:1.25rem 1rem; font-size:.85rem; } - #quiz-options { grid-template-columns:1fr; gap:0.6rem; } - #quiz-container { padding:1.25rem 1rem; height:auto; min-height:auto; justify-content:center; overflow:visible; margin-bottom:1rem; } - #quiz-question { min-height:auto; font-size:.88rem; align-items:center; justify-content:center; text-align:center; margin-top:0; margin-bottom:1rem; } - .quiz-btn { min-height:44px; font-size:.8rem; padding:.6rem .75rem; justify-content:center; text-align:center; } - #quiz-img-preview.visible { max-height:none; margin-bottom:1rem; text-align:center; } - #quiz-img-preview img, #quiz-img-preview video { max-height:160px; width:auto; max-width:100%; margin:0 auto; } -} - -body.page-form { background-color: #0f172a; color: #e0e0e0; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 2rem; min-height: 100vh; overflow-x: auto; } -.admin-box { background-color: #1e293b; padding: 2rem; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); width: 100%; max-width: 500px; border: 1px solid #334155; } -.admin-box h1 { color: #00bfff; text-align: center; margin-bottom: 1.5rem; } -.form-group { margin-bottom: 1rem; } -.form-group label { display: block; margin-bottom: 0.5rem; color: #b9bbbe; font-size: 0.9rem; } -.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 0.75rem; background: #0f172a; border: 1px solid #334155; border-radius: 4px; color: white; font-family: inherit; } -.btn-submit { width: 100%; padding: 0.75rem; background-color: #00bfff; color: white; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; margin-top: 1rem; transition: background 0.2s; } -.btn-submit:hover { background-color: #009acd; } -.links { text-align: center; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; } -.links a { color: #94a3b8; text-decoration: none; font-size: 0.9rem; transition: color 0.2s; } -.links a:hover { color: #ffffff; } -input[type="file"] { cursor: pointer; padding: 0.6rem; } -input[type="file"]::file-selector-button { background: #334155; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; margin-right: 1rem; transition: background 0.2s; } -input[type="file"]::file-selector-button:hover { background: #475569; } \ No newline at end of file