From 5d7a99b2f63e95aed713d11f96ca4402af5e82dd Mon Sep 17 00:00:00 2001 From: Tomisss1 Date: Fri, 26 Jun 2026 12:56:48 +0200 Subject: [PATCH] added planeta mars a detail --- css/style.css | 243 ++++++++++++++++++++++++++++++++++++++++++++++++++ js/main.js | 120 +++++++++++++++++++++---- 2 files changed, 345 insertions(+), 18 deletions(-) diff --git a/css/style.css b/css/style.css index 880ceb4..eecbfb8 100644 --- a/css/style.css +++ b/css/style.css @@ -329,4 +329,247 @@ a:focus, button:focus, input:focus { .planets-grid { grid-template-columns: repeat(3, 1fr); /* 3 karty vedle sebe */ } +} + +/* ========================================== + MODÁLNÍ DIALOG – Detail planety + Přidat na konec souboru css/style.css + ========================================== */ + +/* Základní dialog element */ +#planet-modal { + border: none; + border-radius: 20px; + padding: 0; + background: #0f1117; + color: #e8eaf0; + max-width: 680px; + width: calc(100% - 2rem); + max-height: 90vh; + overflow: hidden; + box-shadow: 0 25px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06); + + /* Animace otevření */ + opacity: 0; + transform: translateY(24px) scale(0.97); + transition: opacity 0.28s ease, transform 0.28s ease; +} + +#planet-modal.modal-open { + opacity: 1; + transform: translateY(0) scale(1); +} + +/* Backdrop */ +#planet-modal::backdrop { + background: rgba(0, 0, 0, 0.75); + backdrop-filter: blur(4px); +} + +.modal-inner { + display: flex; + flex-direction: column; + max-height: 90vh; + overflow-y: auto; + scrollbar-width: thin; + scrollbar-color: rgba(255,255,255,0.1) transparent; +} + +/* HLAVIČKA modálu */ +.modal-header { + display: flex; + align-items: flex-start; + gap: 1.5rem; + padding: 2rem; + background: var(--planet-color-light, rgba(193, 68, 14, 0.12)); + border-bottom: 1px solid rgba(255, 255, 255, 0.07); + position: relative; +} + +/* Vizuální koule planety */ +.modal-planet-visual { + position: relative; + flex-shrink: 0; +} + +.modal-planet-orb { + width: 90px; + height: 90px; + border-radius: 50%; + box-shadow: + inset -12px -12px 24px rgba(0,0,0,0.5), + 0 0 30px rgba(193, 68, 14, 0.35), + 0 0 60px rgba(193, 68, 14, 0.1); + animation: planetFloat 4s ease-in-out infinite; +} + +.modal-planet-ring { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) rotateX(75deg); + width: 120px; + height: 120px; + border-radius: 50%; + border: 2px solid rgba(193, 68, 14, 0.3); + pointer-events: none; +} + +@keyframes planetFloat { + 0%, 100% { transform: translateY(0px); } + 50% { transform: translateY(-6px); } +} + +/* Text v hlavičce */ +.modal-header-text { + flex: 1; + min-width: 0; +} + +.modal-subtitle { + font-size: 0.75rem; + font-weight: 600; + letter-spacing: 0.12em; + text-transform: uppercase; + color: var(--planet-color, #c1440e); + margin: 0 0 0.25rem; +} + +.modal-header-text h2 { + font-size: 2rem; + font-weight: 700; + margin: 0 0 0.75rem; + color: #ffffff; + line-height: 1.1; +} + +.modal-description { + font-size: 0.9rem; + line-height: 1.6; + color: #9aa0b0; + margin: 0; +} + +/* Tlačítko zavřít */ +.modal-close { + position: absolute; + top: 1rem; + right: 1rem; + background: rgba(255, 255, 255, 0.06); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 50%; + width: 32px; + height: 32px; + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + color: #9aa0b0; + font-size: 0.85rem; + transition: background 0.2s, color 0.2s; + flex-shrink: 0; +} + +.modal-close:hover { + background: rgba(255, 255, 255, 0.12); + color: #ffffff; +} + +/* TĚLO modálu */ +.modal-body { + padding: 1.75rem 2rem 2rem; + display: flex; + flex-direction: column; + gap: 1.75rem; +} + +.modal-section-title { + font-size: 0.7rem; + font-weight: 700; + letter-spacing: 0.1em; + text-transform: uppercase; + color: #5a6075; + margin: 0 0 1rem; +} + +/* Mřížka statistik */ +.modal-stats-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); + gap: 0.5rem; +} + +.modal-stat { + background: rgba(255, 255, 255, 0.03); + border: 1px solid rgba(255, 255, 255, 0.06); + border-radius: 10px; + padding: 0.75rem 1rem; + display: flex; + flex-direction: column; + gap: 0.2rem; +} + +.modal-stat-label { + font-size: 0.72rem; + color: #5a6075; + font-weight: 500; +} + +.modal-stat-value { + font-size: 0.95rem; + color: #e8eaf0; + font-weight: 600; +} + +/* Seznam zajímavostí */ +.modal-facts-list { + display: flex; + flex-direction: column; + gap: 0.6rem; +} + +.modal-fact { + display: flex; + align-items: flex-start; + gap: 0.75rem; + padding: 0.65rem 0.9rem; + background: rgba(255, 255, 255, 0.02); + border: 1px solid rgba(255, 255, 255, 0.05); + border-radius: 8px; + font-size: 0.875rem; + color: #b0b8cc; + line-height: 1.5; +} + +.modal-fact-icon { + font-size: 1.1rem; + flex-shrink: 0; + margin-top: 0.05rem; +} + +/* Responzivita */ +@media (max-width: 600px) { + .modal-header { + flex-direction: column; + align-items: center; + text-align: center; + padding: 1.5rem; + } + + .modal-header-text h2 { + font-size: 1.6rem; + } + + .modal-body { + padding: 1.25rem; + } + + .modal-stats-grid { + grid-template-columns: 1fr 1fr; + } + + .modal-close { + top: 0.75rem; + right: 0.75rem; + } } \ No newline at end of file diff --git a/js/main.js b/js/main.js index c33915b..4521bbf 100644 --- a/js/main.js +++ b/js/main.js @@ -5,7 +5,7 @@ */ document.addEventListener('DOMContentLoaded', () => { - + // ========================================== // 1. SEKCE: VESMÍRNÁ KALKULAČKA // ========================================== @@ -68,33 +68,117 @@ document.addEventListener('DOMContentLoaded', () => { } // ========================================== - // 2. SEKCE: DETAIL PLANETY (Oprava nefunkčního tlačítka) + // 2. SEKCE: DETAIL PLANETY – modální dialog // ========================================== - - // Databáze podrobných informací o planetách + const planetDetails = { mars: { - title: "Mars – Detailní průzkum", - text: "Mars je druhá nejmenší planeta sluneční soustavy. Má tenkou atmosféru složenou převážně z oxidu uhličitého. Nachází se zde Olympus Mons, nejvyšší známá hora sluneční soustavy (22 km), a hluboké údolí Valles Marineris. V současnosti planetu zkoumá několik roverů (např. Perseverance)." + title: 'Mars', + subtitle: 'Rudá planeta', + color: '#c1440e', + colorLight: 'rgba(193, 68, 14, 0.15)', + stats: [ + { label: 'Vzdálenost od Slunce', value: '227,9 mil. km' }, + { label: 'Průměr', value: '6 779 km' }, + { label: 'Délka dne', value: '24 h 37 min' }, + { label: 'Délka roku', value: '687 pozemských dní' }, + { label: 'Gravitace', value: '3,72 m/s² (38 % Země)' }, + { label: 'Měsíce', value: 'Phobos a Deimos' }, + ], + facts: [ + { icon: '🏔️', text: 'Olympus Mons – nejvyšší hora sluneční soustavy (22 km)' }, + { icon: '🌋', text: 'Valles Marineris – kaňon dlouhý přes 4 000 km' }, + { icon: '🤖', text: 'Rover Perseverance aktivně zkoumá povrch od roku 2021' }, + { icon: '💧', text: 'Stopy dávného kapalného vody v geologických vrstvách' }, + { icon: '🌡️', text: 'Teploty od −125 °C v zimě až po +20 °C v létě' }, + { icon: '🌬️', text: 'Atmosféra tvoří z 95 % oxid uhličitý' }, + ], + description: 'Mars je čtvrtá planeta sluneční soustavy a druhá nejmenší po Merkuru. Svůj charakteristický načervenalý vzhled získal díky oxidu železitému (rzi) na svém povrchu. V současnosti je cílem intenzivního vědeckého výzkumu zaměřeného na možnost minulého nebo současného života.' } - // Sem můžeš v budoucnu přidat zeme: { ... }, jupiter: { ... } }; - // Najdeme všechna tlačítka, která mají atribut data-planet - const detailButtons = document.querySelectorAll('button[data-planet]'); + // Vytvoříme modální dialog a přidáme ho do dokumentu + const modal = document.createElement('dialog'); + modal.id = 'planet-modal'; + modal.setAttribute('aria-modal', 'true'); + modal.setAttribute('aria-labelledby', 'modal-title'); + modal.innerHTML = `
`; + document.body.appendChild(modal); + // Zavření kliknutím na pozadí + modal.addEventListener('click', (e) => { + if (e.target === modal) closeModal(); + }); + + // Zavření klávesou Escape + modal.addEventListener('cancel', (e) => { + e.preventDefault(); + closeModal(); + }); + + function closeModal() { + modal.classList.remove('modal-open'); + setTimeout(() => modal.close(), 280); + } + + function openModal(planetKey) { + const data = planetDetails[planetKey]; + if (!data) return; + + const statsHTML = data.stats.map(s => ` +
+ ${s.label} + ${s.value} +
+ `).join(''); + + const factsHTML = data.facts.map(f => ` +
+ ${f.icon} + ${f.text} +
+ `).join(''); + + document.getElementById('modal-content').innerHTML = ` +
+
+
+
+
+
+

${data.subtitle}

+ +

${data.description}

+
+ +
+ +
+
+

Základní údaje

+
${statsHTML}
+
+ +
+

Zajímavosti

+
${factsHTML}
+
+
+ `; + + modal.showModal(); + // Malé zpoždění pro CSS animaci + requestAnimationFrame(() => { + requestAnimationFrame(() => modal.classList.add('modal-open')); + }); + } + + // Event listenery na všechna tlačítka Detail planety + const detailButtons = document.querySelectorAll('button[data-planet]'); detailButtons.forEach(button => { button.addEventListener('click', () => { - // Zjistíme, o jakou planetu jde (např. "mars") const planetKey = button.getAttribute('data-planet'); - const data = planetDetails[planetKey]; - - if (data) { - // Jednoduché zobrazení detailu (prozatím přes nativní alert) - alert(`${data.title}\n\n${data.text}`); - } else { - alert("Informace o této planetě se teprve připravují."); - } + openModal(planetKey); }); }); }); \ No newline at end of file