added planeta mars a detail

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;
+    }
 }

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);
         });
     });
 });