added vesmírný tělěsa

css/style.css

@@ -573,3 +573,329 @@ a:focus, button:focus, input:focus {
         right: 0.75rem;
     }
 }
+/* ==========================================
+   DOPLNĚK – Nové planety + modální dialog
+   Přidat na konec souboru css/style.css
+   ========================================== */
+
+/* Grid planet – 3 sloupce na desktopu, 2 na tabletu, 1 na mobilu */
+.planets-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    margin-top: 2.5rem;
+}
+
+@media (max-width: 900px) {
+    .planets-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (max-width: 560px) {
+    .planets-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+/* Karta planety */
+.planet-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.07);
+    border-radius: 16px;
+    overflow: hidden;
+    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+    display: flex;
+    flex-direction: column;
+}
+
+.planet-card:hover {
+    transform: translateY(-6px);
+    border-color: rgba(255, 255, 255, 0.18);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
+}
+
+.planet-card img {
+    width: 100%;
+    aspect-ratio: 1 / 1;
+    object-fit: cover;
+    display: block;
+    background: #0a0c14;
+}
+
+.card-body {
+    padding: 1.25rem;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 0.6rem;
+}
+
+.card-body h3 {
+    margin: 0;
+    font-size: 1.25rem;
+    color: #ffffff;
+}
+
+.card-body p {
+    margin: 0;
+    font-size: 0.875rem;
+    line-height: 1.6;
+    color: #9aa0b0;
+    flex: 1;
+}
+
+/* Tlačítko Detail planety */
+.btn-secondary {
+    margin-top: auto;
+    padding: 0.55rem 1.1rem;
+    border-radius: 8px;
+    border: 1px solid rgba(255, 255, 255, 0.15);
+    background: rgba(255, 255, 255, 0.05);
+    color: #e0e4f0;
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: background 0.2s, border-color 0.2s, transform 0.15s;
+    align-self: flex-start;
+}
+
+.btn-secondary:hover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.28);
+    transform: scale(1.03);
+}
+
+.btn-secondary:active {
+    transform: scale(0.97);
+}
+
+/* ==========================================
+   MODÁLNÍ DIALOG – Detail planety
+   ========================================== */
+
+#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);
+    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);
+}
+
+#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;
+}
+
+.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;
+}
+
+.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(100, 100, 255, 0.2),
+        0 0 60px rgba(100, 100, 255, 0.08);
+    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(255, 255, 255, 0.1);
+    pointer-events: none;
+}
+
+@keyframes planetFloat {
+    0%, 100% { transform: translateY(0px); }
+    50%       { transform: translateY(-6px); }
+}
+
+.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, #888);
+    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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+@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;
+    }
+}

index.html

@@ -33,7 +33,6 @@
     </script>
 
     <link rel="stylesheet" href="css/style.css">
-    
     <link rel="icon" href="img/favicon.ico" type="image/x-icon">
 </head>
 <body>
@@ -67,10 +66,12 @@
 
         <section id="encyklopedie" class="planets-section">
             <div class="container">
-                <h2>Encyklopedie planet</h2>
+                <h2>Encyklopedie vesmírných těles</h2>
-                <p class="section-subtitle">Vyberte si planetu a zjistěte o ní více informací.</p>
+                <p class="section-subtitle">Vyberte si těleso a zjistěte o něm více informací.</p>
 
                 <div class="planets-grid">
+
+                    <!-- MARS -->
                     <article class="planet-card">
                         <img src="img/mars.webp" alt="Rudá planeta Mars focená z oběžné dráhy" loading="lazy" width="300" height="300">
                         <div class="card-body">
@@ -80,7 +81,57 @@
                         </div>
                     </article>
 
-                    </div>
+                    <!-- VENUŠE -->
+                    <article class="planet-card">
+                        <img src="img/venuse.png" alt="Planeta Venuše obalená hustými mraky" loading="lazy" width="300" height="300">
+                        <div class="card-body">
+                            <h3>Venuše</h3>
+                            <p>Druhá planeta od Slunce a nejžhavější těleso sluneční soustavy. Rotuje pozpátku.</p>
+                            <button class="btn btn-secondary" aria-haspopup="dialog" data-planet="venuse">Detail planety</button>
+                        </div>
+                    </article>
+
+                    <!-- MĚSÍC -->
+                    <article class="planet-card">
+                        <img src="img/mesic.png" alt="Měsíc – přirozený satelit Země" loading="lazy" width="300" height="300">
+                        <div class="card-body">
+                            <h3>Měsíc</h3>
+                            <p>Jediný přirozený satelit Země. Ovlivňuje příliv a odliv a je jediným mimozemským tělesem, kam vstoupil člověk.</p>
+                            <button class="btn btn-secondary" aria-haspopup="dialog" data-planet="mesic">Detail planety</button>
+                        </div>
+                    </article>
+
+                    <!-- URAN -->
+                    <article class="planet-card">
+                        <img src="img/uran.png" alt="Planeta Uran s charakteristickým modrým nádechem" loading="lazy" width="300" height="300">
+                        <div class="card-body">
+                            <h3>Uran</h3>
+                            <p>Sedmá planeta od Slunce. Rotuje na boku a má nejchladnější atmosféru v celé soustavě.</p>
+                            <button class="btn btn-secondary" aria-haspopup="dialog" data-planet="uran">Detail planety</button>
+                        </div>
+                    </article>
+
+                    <!-- JUPITER -->
+                    <article class="planet-card">
+                        <img src="img/jupiter.png" alt="Největší planeta Jupiter s Velkým rudým skvrnou" loading="lazy" width="300" height="300">
+                        <div class="card-body">
+                            <h3>Jupiter</h3>
+                            <p>Největší planeta sluneční soustavy. Jeho Velká rudá skvrna je bouře trvající stovky let.</p>
+                            <button class="btn btn-secondary" aria-haspopup="dialog" data-planet="jupiter">Detail planety</button>
+                        </div>
+                    </article>
+
+                    <!-- NEPTUN -->
+                    <article class="planet-card">
+                        <img src="img/neptun.png" alt="Temně modrý Neptun – nejodlehlejší planeta" loading="lazy" width="300" height="300">
+                        <div class="card-body">
+                            <h3>Neptun</h3>
+                            <p>Nejvzdálenější planeta sluneční soustavy. Vítr na Neptunu dosahuje rychlosti přes 2 000 km/h.</p>
+                            <button class="btn btn-secondary" aria-haspopup="dialog" data-planet="neptun">Detail planety</button>
+                        </div>
+                    </article>
+
+                </div>
             </div>
         </section>
 
@@ -97,8 +148,7 @@
                     <button id="calc-btn" class="btn btn-primary">Spočítat gravitaci</button>
                 </div>
 
-                <div id="calc-result" class="calc-result" aria-live="polite">
+                <div id="calc-result" class="calc-result" aria-live="polite"></div>
-                    </div>
             </div>
         </section>
 

js/main.js

@@ -10,18 +10,18 @@ document.addEventListener('DOMContentLoaded', () => {
     // 1. SEKCE: VESMÍRNÁ KALKULAČKA
     // ==========================================
     const weightInput = document.getElementById('weight-input');
-    const calcButton = document.getElementById('calc-btn');
+    const calcButton  = document.getElementById('calc-btn');
-    const calcResult = document.getElementById('calc-result');
+    const calcResult  = document.getElementById('calc-result');
 
     const spaceGravity = {
-        merkur: { name: 'Merkur', factor: 0.38, icon: '🪐' },
+        merkur: { name: 'Merkur',  factor: 0.38,  icon: '🪐' },
-        venuse: { name: 'Venuše', factor: 0.91, icon: '🌍' },
+        venuse: { name: 'Venuše',  factor: 0.91,  icon: '🌍' },
-        mars: { name: 'Mars', factor: 0.38, icon: '🔴' },
+        mars:   { name: 'Mars',    factor: 0.38,  icon: '🔴' },
-        jupiter: { name: 'Jupiter', factor: 2.34, icon: '🟤' },
+        jupiter:{ name: 'Jupiter', factor: 2.34,  icon: '🟤' },
-        saturn: { name: 'Saturn', factor: 1.06, icon: '🪐' },
+        saturn: { name: 'Saturn',  factor: 1.06,  icon: '🪐' },
-        uran: { name: 'Uran', factor: 0.92, icon: '🔵' },
+        uran:   { name: 'Uran',    factor: 0.92,  icon: '🔵' },
-        neptun: { name: 'Neptun', factor: 1.19, icon: '🔵' },
+        neptun: { name: 'Neptun',  factor: 1.19,  icon: '🔵' },
-        mesic: { name: 'Měsíc', factor: 0.166, icon: '⚪' }
+        mesic:  { name: 'Měsíc',   factor: 0.166, icon: '⚪' }
     };
 
     const calculateSpaceWeight = () => {
@@ -29,71 +29,191 @@ document.addEventListener('DOMContentLoaded', () => {
 
         if (isNaN(earthWeight) || earthWeight <= 0) {
             calcResult.innerHTML = `
-                <p style="color: #ef4444; font-weight: bold;" role="alert">
+                <p style="color:#ef4444;font-weight:bold;" role="alert">
                     ⚠️ Prosím, zadej platnou kladnou váhu v kilogramech.
-                </p>
+                </p>`;
-            `;
             return;
         }
 
         let resultHTML = `
-            <h3 style="margin-bottom: 15px; color: #fff;">Tvoje váha ve vesmíru:</h3>
+            <h3 style="margin-bottom:15px;color:#fff;">Tvoje váha ve vesmíru:</h3>
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px;">
+            <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:15px;">`;
-        `;
 
         Object.keys(spaceGravity).forEach(key => {
-            const planet = spaceGravity[key];
+            const planet      = spaceGravity[key];
             const planetWeight = (earthWeight * planet.factor).toFixed(1);
-
             resultHTML += `
-                <div style="background: rgba(255,255,255,0.03); padding: 12px; border-radius: 8px; text-align: center; border: 1px solid rgba(255,255,255,0.05);">
+                <div style="background:rgba(255,255,255,0.03);padding:12px;border-radius:8px;text-align:center;border:1px solid rgba(255,255,255,0.05);">
-                    <span style="font-size: 1.5rem; display: block; margin-bottom: 5px;">${planet.icon}</span>
+                    <span style="font-size:1.5rem;display:block;margin-bottom:5px;">${planet.icon}</span>
-                    <strong style="display: block; color: #fff;">${planet.name}</strong>
+                    <strong style="display:block;color:#fff;">${planet.name}</strong>
-                    <span style="font-size: 1.1rem; color: #06b6d4; font-weight: bold;">${planetWeight} kg</span>
+                    <span style="font-size:1.1rem;color:#06b6d4;font-weight:bold;">${planetWeight} kg</span>
-                </div>
+                </div>`;
-            `;
         });
 
         resultHTML += `</div>`;
         calcResult.innerHTML = resultHTML;
     };
 
-    if (calcButton) {
+    if (calcButton)  calcButton.addEventListener('click', calculateSpaceWeight);
-        calcButton.addEventListener('click', calculateSpaceWeight);
+    if (weightInput) weightInput.addEventListener('keypress', e => {
-    }
+        if (e.key === 'Enter') calculateSpaceWeight();
-    if (weightInput) {
+    });
-        weightInput.addEventListener('keypress', (e) => {
+
-            if (e.key === 'Enter') calculateSpaceWeight();
-        });
-    }
 
     // ==========================================
     // 2. SEKCE: DETAIL PLANETY – modální dialog
     // ==========================================
 
     const planetDetails = {
+
         mars: {
-            title: 'Mars',
+            title:      'Mars',
-            subtitle: 'Rudá planeta',
+            subtitle:   'Rudá planeta',
-            color: '#c1440e',
+            color:      '#c1440e',
-            colorLight: 'rgba(193, 68, 14, 0.15)',
+            colorLight: 'rgba(193,68,14,0.15)',
+            orbStyle:   'radial-gradient(circle at 35% 35%, #e8855a, #c1440e 55%, #6b2000)',
             stats: [
                 { label: 'Vzdálenost od Slunce', value: '227,9 mil. km' },
-                { label: 'Průměr', value: '6 779 km' },
+                { label: 'Průměr',                value: '6 779 km'      },
-                { label: 'Délka dne', value: '24 h 37 min' },
+                { label: 'Délka dne',             value: '24 h 37 min'   },
-                { label: 'Délka roku', value: '687 pozemských dní' },
+                { label: 'Délka roku',            value: '687 poz. dní'  },
-                { label: 'Gravitace', value: '3,72 m/s² (38 % Země)' },
+                { label: 'Gravitace',             value: '3,72 m/s²'     },
-                { label: 'Měsíce', value: 'Phobos a Deimos' },
+                { label: 'Měsíce',                value: 'Phobos, 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: 'Rover Perseverance 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.'
+            description: 'Mars je čtvrtá planeta sluneční soustavy. Svůj načervenalý vzhled získal díky oxidu železitému na povrchu. Je cílem intenzivního vědeckého výzkumu zaměřeného na možnost minulého nebo současného života.'
+        },
+
+        venuse: {
+            title:      'Venuše',
+            subtitle:   'Žhavá sestra Země',
+            color:      '#e8a020',
+            colorLight: 'rgba(232,160,32,0.14)',
+            orbStyle:   'radial-gradient(circle at 35% 35%, #f5d08a, #e8a020 55%, #7a4a00)',
+            stats: [
+                { label: 'Vzdálenost od Slunce', value: '108,2 mil. km' },
+                { label: 'Průměr',                value: '12 104 km'    },
+                { label: 'Délka dne',             value: '243 poz. dní' },
+                { label: 'Délka roku',            value: '225 poz. dní' },
+                { label: 'Gravitace',             value: '8,87 m/s²'    },
+                { label: 'Měsíce',                value: 'Žádné'        },
+            ],
+            facts: [
+                { icon: '🌡️', text: 'Povrchová teplota dosahuje až 465 °C – nejteplejší planeta' },
+                { icon: '🔄', text: 'Rotuje pozpátku – Slunce na Venuši vychází na západě' },
+                { icon: '☁️', text: 'Hustá atmosféra z CO₂ způsobuje skleníkový efekt' },
+                { icon: '🌩️', text: 'Mraky jsou tvořeny kyselinou sírovou' },
+                { icon: '🚀', text: 'Sovětský Venera 7 byl první sondou na povrchu (1970)' },
+                { icon: '⏱️', text: 'Den na Venuši je delší než její rok' },
+            ],
+            description: 'Venuše je druhá planeta od Slunce a nejbližší soused Země. Přes podobnou velikost je její povrch zcela nehostinný – extrémní teploty, drtivý tlak atmosféry a kyselinové mraky.'
+        },
+
+        mesic: {
+            title:      'Měsíc',
+            subtitle:   'Přirozený satelit Země',
+            color:      '#a0a8b8',
+            colorLight: 'rgba(160,168,184,0.13)',
+            orbStyle:   'radial-gradient(circle at 35% 35%, #d8dce8, #a0a8b8 55%, #444860)',
+            stats: [
+                { label: 'Vzdálenost od Země', value: '384 400 km'   },
+                { label: 'Průměr',              value: '3 474 km'     },
+                { label: 'Délka dne',           value: '27,3 poz. dní'},
+                { label: 'Oběžná doba',         value: '27,3 dní'     },
+                { label: 'Gravitace',           value: '1,62 m/s²'    },
+                { label: 'Atmosféra',           value: 'Prakticky žádná'},
+            ],
+            facts: [
+                { icon: '👨‍🚀', text: 'Apollo 11 (1969) – první lidé na jiném světě' },
+                { icon: '🌊', text: 'Gravitace Měsíce způsobuje příliv a odliv na Zemi' },
+                { icon: '🌑', text: 'Vždy vidíme jen jednu stranu – synchronní rotace' },
+                { icon: '💧', text: 'Vědci potvrdili přítomnost ledu v polárních kráterech' },
+                { icon: '🛸', text: 'Plánovaný návrat lidí programem Artemis NASA' },
+                { icon: '🌕', text: 'Vznikl srážkou Země s tělesem velikosti Marsu' },
+            ],
+            description: 'Měsíc je jediný přirozený satelit Země a páté největší těleso sluneční soustavy. Je to jediné mimozemské těleso, které navštívil člověk. Jeho gravitace stabilizuje sklon zemské osy.'
+        },
+
+        uran: {
+            title:      'Uran',
+            subtitle:   'Ledový obr na boku',
+            color:      '#4fc4cf',
+            colorLight: 'rgba(79,196,207,0.13)',
+            orbStyle:   'radial-gradient(circle at 35% 35%, #a8e8f0, #4fc4cf 55%, #1a5a70)',
+            stats: [
+                { label: 'Vzdálenost od Slunce', value: '2,87 mld. km'  },
+                { label: 'Průměr',                value: '51 118 km'     },
+                { label: 'Délka dne',             value: '17 h 14 min'   },
+                { label: 'Délka roku',            value: '84 poz. let'   },
+                { label: 'Gravitace',             value: '8,69 m/s²'     },
+                { label: 'Měsíce',                value: '28 (Miranda…)' },
+            ],
+            facts: [
+                { icon: '↔️', text: 'Rotuje téměř "na boku" – osa náklonu je 98°' },
+                { icon: '🥶', text: 'Nejchladnější atmosféra v soustavě (−224 °C)' },
+                { icon: '💎', text: 'Uvnitř se možná nacházejí oceány diamantů' },
+                { icon: '💨', text: 'Atmosféra obsahuje methan, který dává modrý nádech' },
+                { icon: '🪐', text: 'Má 13 prstenců – mnohem slabších než Saturn' },
+                { icon: '🔭', text: 'Objeven Williamem Herschelem v roce 1781' },
+            ],
+            description: 'Uran je sedmá planeta sluneční soustavy a první objevená dalekohledem. Patří mezi ledové obry – jeho vnitřek tvoří led z vody, amoniaku a metanu. Díky metanu v atmosféře má charakteristický tyrkysový vzhled.'
+        },
+
+        jupiter: {
+            title:      'Jupiter',
+            subtitle:   'Král planet',
+            color:      '#c88040',
+            colorLight: 'rgba(200,128,64,0.14)',
+            orbStyle:   'radial-gradient(circle at 35% 35%, #f0c080, #c88040 50%, #7a4010)',
+            stats: [
+                { label: 'Vzdálenost od Slunce', value: '778,5 mil. km' },
+                { label: 'Průměr',                value: '142 984 km'    },
+                { label: 'Délka dne',             value: '9 h 56 min'    },
+                { label: 'Délka roku',            value: '11,9 poz. let' },
+                { label: 'Gravitace',             value: '24,79 m/s²'    },
+                { label: 'Měsíce',                value: '95 (Europa…)'  },
+            ],
+            facts: [
+                { icon: '🌀', text: 'Velká rudá skvrna – bouře trvající přes 350 let' },
+                { icon: '🏆', text: 'Největší planeta – pojme 1 300 Zemí' },
+                { icon: '🛡️', text: 'Gravitací chrání vnitřní planety před asteroidy' },
+                { icon: '🌊', text: 'Europa – měsíc s oceánem pod ledem, možný život' },
+                { icon: '⚡', text: 'Nejsilnější magnetické pole ze všech planet' },
+                { icon: '🚀', text: 'Sondy Voyager, Galileo a Juno zkoumaly Jupiter' },
+            ],
+            description: 'Jupiter je pátá a zároveň největší planeta sluneční soustavy – více než dvojnásobek hmotnosti všech ostatních planet dohromady. Je to plynný obr bez pevného povrchu, složený převážně z vodíku a helia.'
+        },
+
+        neptun: {
+            title:      'Neptun',
+            subtitle:   'Větrný obr hlubokého vesmíru',
+            color:      '#3060c8',
+            colorLight: 'rgba(48,96,200,0.14)',
+            orbStyle:   'radial-gradient(circle at 35% 35%, #80a8f8, #3060c8 55%, #0a1a60)',
+            stats: [
+                { label: 'Vzdálenost od Slunce', value: '4,49 mld. km'  },
+                { label: 'Průměr',                value: '49 528 km'     },
+                { label: 'Délka dne',             value: '16 h 6 min'    },
+                { label: 'Délka roku',            value: '164,8 poz. let'},
+                { label: 'Gravitace',             value: '11,15 m/s²'    },
+                { label: 'Měsíce',                value: '16 (Triton…)'  },
+            ],
+            facts: [
+                { icon: '💨', text: 'Nejsilnější větry v soustavě – přes 2 100 km/h' },
+                { icon: '🔭', text: 'Jediná planeta předpovězená matematicky před objevem (1846)' },
+                { icon: '🌀', text: 'Velká tmavá skvrna – obří bouře podobná Jupiterově' },
+                { icon: '🛸', text: 'Triton – jediný velký měsíc obíhající pozpátku' },
+                { icon: '❄️', text: 'Uvnitř možná existuje oceán velmi horkého vody pod tlakem' },
+                { icon: '🚀', text: 'Jediná návštěva sondou: Voyager 2 v roce 1989' },
+            ],
+            description: 'Neptun je osmá a nejvzdálenější planeta sluneční soustavy. Je to ledový obr s nejdivočejším počasím v celé soustavě. Od Slunce je tak vzdálený, že jeden rok trvá přes 164 pozemských let.'
         }
     };
 
@@ -105,13 +225,10 @@ document.addEventListener('DOMContentLoaded', () => {
     modal.innerHTML = `<div class="modal-inner" id="modal-content"></div>`;
     document.body.appendChild(modal);
 
-    // Zavření kliknutím na pozadí
+    modal.addEventListener('click', e => {
-    modal.addEventListener('click', (e) => {
         if (e.target === modal) closeModal();
     });
-
+    modal.addEventListener('cancel', e => {
-    // Zavření klávesou Escape
-    modal.addEventListener('cancel', (e) => {
         e.preventDefault();
         closeModal();
     });
@@ -129,20 +246,18 @@ document.addEventListener('DOMContentLoaded', () => {
             <div class="modal-stat">
                 <span class="modal-stat-label">${s.label}</span>
                 <span class="modal-stat-value">${s.value}</span>
-            </div>
+            </div>`).join('');
-        `).join('');
 
         const factsHTML = data.facts.map(f => `
             <div class="modal-fact">
                 <span class="modal-fact-icon">${f.icon}</span>
                 <span>${f.text}</span>
-            </div>
+            </div>`).join('');
-        `).join('');
 
         document.getElementById('modal-content').innerHTML = `
-            <div class="modal-header" style="--planet-color: ${data.color}; --planet-color-light: ${data.colorLight};">
+            <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-orb" style="background:${data.orbStyle};"></div>
                     <div class="modal-planet-ring"></div>
                 </div>
                 <div class="modal-header-text">
@@ -150,35 +265,27 @@ document.addEventListener('DOMContentLoaded', () => {
                     <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>
+                <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>
+            </div>`;
-        `;
 
         modal.showModal();
-        // Malé zpoždění pro CSS animaci
+        requestAnimationFrame(() => requestAnimationFrame(() => modal.classList.add('modal-open')));
-        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', () => {
+        button.addEventListener('click', () => openModal(button.getAttribute('data-planet')));
-            const planetKey = button.getAttribute('data-planet');
-            openModal(planetKey);
-        });
     });
+
 });