diff --git a/css/style.css b/css/style.css index eecbfb8..8cf7a3c 100644 --- a/css/style.css +++ b/css/style.css @@ -548,6 +548,332 @@ a:focus, button:focus, input:focus { } /* 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; + } +} +/* ========================================== + 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; diff --git a/img/jupiter.png b/img/jupiter.png new file mode 100644 index 0000000..be28759 Binary files /dev/null and b/img/jupiter.png differ diff --git a/img/mesic.png b/img/mesic.png new file mode 100644 index 0000000..5d9cb0d Binary files /dev/null and b/img/mesic.png differ diff --git a/img/neptun.png b/img/neptun.png new file mode 100644 index 0000000..d9dce67 Binary files /dev/null and b/img/neptun.png differ diff --git a/img/uran.png b/img/uran.png new file mode 100644 index 0000000..194dcaf Binary files /dev/null and b/img/uran.png differ diff --git a/img/venuse.png b/img/venuse.png new file mode 100644 index 0000000..1162164 Binary files /dev/null and b/img/venuse.png differ diff --git a/index.html b/index.html index 6a45350..35744da 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Interaktivní průvodce vesmírem | Ročníková práce - + @@ -33,7 +33,6 @@ - @@ -67,10 +66,12 @@
-

Encyklopedie planet

-

Vyberte si planetu a zjistěte o ní více informací.

- +

Encyklopedie vesmírných těles

+

Vyberte si těleso a zjistěte o něm více informací.

+
+ +
Rudá planeta Mars focená z oběžné dráhy
@@ -79,8 +80,58 @@
- -
+ + +
+ Planeta Venuše obalená hustými mraky +
+

Venuše

+

Druhá planeta od Slunce a nejžhavější těleso sluneční soustavy. Rotuje pozpátku.

+ +
+
+ + +
+ Měsíc – přirozený satelit Země +
+

Měsíc

+

Jediný přirozený satelit Země. Ovlivňuje příliv a odliv a je jediným mimozemským tělesem, kam vstoupil člověk.

+ +
+
+ + +
+ Planeta Uran s charakteristickým modrým nádechem +
+

Uran

+

Sedmá planeta od Slunce. Rotuje na boku a má nejchladnější atmosféru v celé soustavě.

+ +
+
+ + +
+ Největší planeta Jupiter s Velkým rudým skvrnou +
+

Jupiter

+

Největší planeta sluneční soustavy. Jeho Velká rudá skvrna je bouře trvající stovky let.

+ +
+
+ + +
+ Temně modrý Neptun – nejodlehlejší planeta +
+

Neptun

+

Nejvzdálenější planeta sluneční soustavy. Vítr na Neptunu dosahuje rychlosti přes 2 000 km/h.

+ +
+
+ +
@@ -88,7 +139,7 @@

Vesmírná váhová kalkulačka

Zadejte svou váhu na Zemi a zjistěte, kolik byste vážili na jiných tělesech naší soustavy díky odlišné gravitaci.

- +
@@ -97,8 +148,7 @@
-
-
+
diff --git a/js/main.js b/js/main.js index 4521bbf..336e8c1 100644 --- a/js/main.js +++ b/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 calcResult = document.getElementById('calc-result'); + const calcButton = document.getElementById('calc-btn'); + const calcResult = document.getElementById('calc-result'); const spaceGravity = { - merkur: { name: 'Merkur', factor: 0.38, icon: '🪐' }, - venuse: { name: 'Venuše', factor: 0.91, icon: '🌍' }, - mars: { name: 'Mars', factor: 0.38, icon: '🔴' }, - jupiter: { name: 'Jupiter', factor: 2.34, icon: '🟤' }, - saturn: { name: 'Saturn', factor: 1.06, icon: '🪐' }, - uran: { name: 'Uran', factor: 0.92, icon: '🔵' }, - neptun: { name: 'Neptun', factor: 1.19, icon: '🔵' }, - mesic: { name: 'Měsíc', factor: 0.166, icon: '⚪' } + merkur: { name: 'Merkur', factor: 0.38, icon: '🪐' }, + venuse: { name: 'Venuše', factor: 0.91, icon: '🌍' }, + mars: { name: 'Mars', factor: 0.38, icon: '🔴' }, + jupiter:{ name: 'Jupiter', factor: 2.34, icon: '🟤' }, + saturn: { name: 'Saturn', factor: 1.06, icon: '🪐' }, + uran: { name: 'Uran', factor: 0.92, icon: '🔵' }, + neptun: { name: 'Neptun', factor: 1.19, 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 = ` -

+

⚠️ Prosím, zadej platnou kladnou váhu v kilogramech. -

- `; +

`; return; } let resultHTML = ` -

Tvoje váha ve vesmíru:

-
- `; +

Tvoje váha ve vesmíru:

+
`; Object.keys(spaceGravity).forEach(key => { - const planet = spaceGravity[key]; + const planet = spaceGravity[key]; const planetWeight = (earthWeight * planet.factor).toFixed(1); - resultHTML += ` -
- ${planet.icon} - ${planet.name} - ${planetWeight} kg -
- `; +
+ ${planet.icon} + ${planet.name} + ${planetWeight} kg +
`; }); resultHTML += `
`; calcResult.innerHTML = resultHTML; }; - if (calcButton) { - calcButton.addEventListener('click', calculateSpaceWeight); - } - if (weightInput) { - weightInput.addEventListener('keypress', (e) => { - if (e.key === 'Enter') calculateSpaceWeight(); - }); - } + if (calcButton) calcButton.addEventListener('click', calculateSpaceWeight); + if (weightInput) weightInput.addEventListener('keypress', e => { + if (e.key === 'Enter') calculateSpaceWeight(); + }); + // ========================================== // 2. SEKCE: DETAIL PLANETY – modální dialog // ========================================== const planetDetails = { + mars: { - title: 'Mars', - subtitle: 'Rudá planeta', - color: '#c1440e', - colorLight: 'rgba(193, 68, 14, 0.15)', + title: 'Mars', + subtitle: 'Rudá planeta', + color: '#c1440e', + 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: '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' }, + { label: 'Průměr', value: '6 779 km' }, + { label: 'Délka dne', value: '24 h 37 min' }, + { label: 'Délka roku', value: '687 poz. dní' }, + { label: 'Gravitace', value: '3,72 m/s²' }, + { 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 = ``; document.body.appendChild(modal); - // Zavření kliknutím na pozadí - modal.addEventListener('click', (e) => { + modal.addEventListener('click', e => { if (e.target === modal) closeModal(); }); - - // Zavření klávesou Escape - modal.addEventListener('cancel', (e) => { + modal.addEventListener('cancel', e => { e.preventDefault(); closeModal(); }); @@ -129,20 +246,18 @@ document.addEventListener('DOMContentLoaded', () => { - `).join(''); +
`).join(''); const factsHTML = data.facts.map(f => ` - `).join(''); +
`).join(''); document.getElementById('modal-content').innerHTML = ` - `; 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', () => { - const planetKey = button.getAttribute('data-planet'); - openModal(planetKey); - }); + button.addEventListener('click', () => openModal(button.getAttribute('data-planet'))); }); + }); \ No newline at end of file