Vesmir/js/main.js

/**
 * 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 – modální dialog
    // ==========================================

    const planetDetails = {
        mars: {
            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.'
        }
    };

    // 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', () => {
            const planetKey = button.getAttribute('data-planet');
            openModal(planetKey);
        });
    });
});