mirror of
https://github.com/Tomisss1/Vesmir.git
synced 2026-07-23 14:46:49 +00:00
added vesmírný tělěsa
This commit is contained in:
+175
-68
@@ -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 = `
|
||||
<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>
|
||||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px;">
|
||||
`;
|
||||
<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 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>
|
||||
`;
|
||||
<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();
|
||||
});
|
||||
}
|
||||
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 = `<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();
|
||||
});
|
||||
|
||||
// Zavření klávesou Escape
|
||||
modal.addEventListener('cancel', (e) => {
|
||||
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>
|
||||
`).join('');
|
||||
</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('');
|
||||
</div>`).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', () => {
|
||||
const planetKey = button.getAttribute('data-planet');
|
||||
openModal(planetKey);
|
||||
});
|
||||
button.addEventListener('click', () => openModal(button.getAttribute('data-planet')));
|
||||
});
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user