added

2026-07-23 14:46:49 +00:00 · 2026-06-26 12:08:13 +02:00
parent fd447944e9
commit cdb89b5f73
7 changed files with 589 additions and 12 deletions
@@ -0,0 +1,100 @@
+/**
+ * Ročníková práce: Interaktivní průvodce vesmírem
+ * Předmět: Webové technologie (2. ročník)
+ * Modul: Kompletní interaktivita (Vanilla JS ES6+)
+ */
+
+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 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: '⚪' }
+    };
+
+    const calculateSpaceWeight = () => {
+        const earthWeight = parseFloat(weightInput.value);
+
+        if (isNaN(earthWeight) || earthWeight <= 0) {
+            calcResult.innerHTML = `
+                <p style="color: #ef4444; font-weight: bold;" role="alert">
+                    ⚠️ Prosím, zadej platnou kladnou váhu v kilogramech.
+                </p>
+            `;
+            return;
+        }
+
+        let resultHTML = `
+            <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;">
+        `;
+
+        Object.keys(spaceGravity).forEach(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);">
+                    <span style="font-size: 1.5rem; display: block; margin-bottom: 5px;">${planet.icon}</span>
+                    <strong style="display: block; color: #fff;">${planet.name}</strong>
+                    <span style="font-size: 1.1rem; color: #06b6d4; font-weight: bold;">${planetWeight} kg</span>
+                </div>
+            `;
+        });
+
+        resultHTML += `</div>`;
+        calcResult.innerHTML = resultHTML;
+    };
+
+    if (calcButton) {
+        calcButton.addEventListener('click', calculateSpaceWeight);
+    }
+    if (weightInput) {
+        weightInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') calculateSpaceWeight();
+        });
+    }
+
+    // ==========================================
+    // 2. SEKCE: DETAIL PLANETY (Oprava nefunkčního tlačítka)
+    // ==========================================
+    
+    // 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)."
+        }
+        // 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]');
+
+    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í.");
+            }
+        });
+    });
+});