mirror of
https://github.com/Tomisss1/Vesmir.git
synced 2026-07-23 14:46:49 +00:00
291 lines
15 KiB
JavaScript
291 lines
15 KiB
JavaScript
/**
|
||
* 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)',
|
||
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 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 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. 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.'
|
||
}
|
||
};
|
||
|
||
// 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);
|
||
|
||
modal.addEventListener('click', e => {
|
||
if (e.target === modal) closeModal();
|
||
});
|
||
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:${data.orbStyle};"></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();
|
||
requestAnimationFrame(() => requestAnimationFrame(() => modal.classList.add('modal-open')));
|
||
}
|
||
|
||
const detailButtons = document.querySelectorAll('button[data-planet]');
|
||
detailButtons.forEach(button => {
|
||
button.addEventListener('click', () => openModal(button.getAttribute('data-planet')));
|
||
});
|
||
|
||
}); |