added planeta mars a detail

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 = `<div class="modal-inner" id="modal-content"></div>`;
+    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 => `
+            <div class="modal-stat">
+                <span class="modal-stat-label">${s.label}</span>
+                <span class="modal-stat-value">${s.value}</span>
+            </div>
+        `).join('');
+
+        const factsHTML = data.facts.map(f => `
+            <div class="modal-fact">
+                <span class="modal-fact-icon">${f.icon}</span>
+                <span>${f.text}</span>
+            </div>
+        `).join('');
+
+        document.getElementById('modal-content').innerHTML = `
+            <div class="modal-header" style="--planet-color: ${data.color}; --planet-color-light: ${data.colorLight};">
+                <div class="modal-planet-visual">
+                    <div class="modal-planet-orb" style="background: radial-gradient(circle at 35% 35%, #e8855a, ${data.color} 55%, #6b2000);"></div>
+                    <div class="modal-planet-ring"></div>
+                </div>
+                <div class="modal-header-text">
+                    <p class="modal-subtitle">${data.subtitle}</p>
+                    <h2 id="modal-title">${data.title}</h2>
+                    <p class="modal-description">${data.description}</p>
+                </div>
+                <button class="modal-close" aria-label="Zavřít detail planety" onclick="document.getElementById('planet-modal').dispatchEvent(new Event('cancel'))">✕</button>
+            </div>
+
+            <div class="modal-body">
+                <section class="modal-section">
+                    <h3 class="modal-section-title">Základní údaje</h3>
+                    <div class="modal-stats-grid">${statsHTML}</div>
+                </section>
+
+                <section class="modal-section">
+                    <h3 class="modal-section-title">Zajímavosti</h3>
+                    <div class="modal-facts-list">${factsHTML}</div>
+                </section>
+            </div>
+        `;
+
+        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);
         });
     });
 });