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:
+326
@@ -573,3 +573,329 @@ a:focus, button:focus, input:focus {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 494 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 343 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 502 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 149 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 MiB |
+55
-5
@@ -33,7 +33,6 @@
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" href="css/style.css">
|
||||
|
||||
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
@@ -67,10 +66,12 @@
|
||||
|
||||
<section id="encyklopedie" class="planets-section">
|
||||
<div class="container">
|
||||
<h2>Encyklopedie planet</h2>
|
||||
<p class="section-subtitle">Vyberte si planetu a zjistěte o ní více informací.</p>
|
||||
<h2>Encyklopedie vesmírných těles</h2>
|
||||
<p class="section-subtitle">Vyberte si těleso a zjistěte o něm více informací.</p>
|
||||
|
||||
<div class="planets-grid">
|
||||
|
||||
<!-- MARS -->
|
||||
<article class="planet-card">
|
||||
<img src="img/mars.webp" alt="Rudá planeta Mars focená z oběžné dráhy" loading="lazy" width="300" height="300">
|
||||
<div class="card-body">
|
||||
@@ -80,6 +81,56 @@
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- VENUŠE -->
|
||||
<article class="planet-card">
|
||||
<img src="img/venuse.png" alt="Planeta Venuše obalená hustými mraky" loading="lazy" width="300" height="300">
|
||||
<div class="card-body">
|
||||
<h3>Venuše</h3>
|
||||
<p>Druhá planeta od Slunce a nejžhavější těleso sluneční soustavy. Rotuje pozpátku.</p>
|
||||
<button class="btn btn-secondary" aria-haspopup="dialog" data-planet="venuse">Detail planety</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- MĚSÍC -->
|
||||
<article class="planet-card">
|
||||
<img src="img/mesic.png" alt="Měsíc – přirozený satelit Země" loading="lazy" width="300" height="300">
|
||||
<div class="card-body">
|
||||
<h3>Měsíc</h3>
|
||||
<p>Jediný přirozený satelit Země. Ovlivňuje příliv a odliv a je jediným mimozemským tělesem, kam vstoupil člověk.</p>
|
||||
<button class="btn btn-secondary" aria-haspopup="dialog" data-planet="mesic">Detail planety</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- URAN -->
|
||||
<article class="planet-card">
|
||||
<img src="img/uran.png" alt="Planeta Uran s charakteristickým modrým nádechem" loading="lazy" width="300" height="300">
|
||||
<div class="card-body">
|
||||
<h3>Uran</h3>
|
||||
<p>Sedmá planeta od Slunce. Rotuje na boku a má nejchladnější atmosféru v celé soustavě.</p>
|
||||
<button class="btn btn-secondary" aria-haspopup="dialog" data-planet="uran">Detail planety</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- JUPITER -->
|
||||
<article class="planet-card">
|
||||
<img src="img/jupiter.png" alt="Největší planeta Jupiter s Velkým rudým skvrnou" loading="lazy" width="300" height="300">
|
||||
<div class="card-body">
|
||||
<h3>Jupiter</h3>
|
||||
<p>Největší planeta sluneční soustavy. Jeho Velká rudá skvrna je bouře trvající stovky let.</p>
|
||||
<button class="btn btn-secondary" aria-haspopup="dialog" data-planet="jupiter">Detail planety</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- NEPTUN -->
|
||||
<article class="planet-card">
|
||||
<img src="img/neptun.png" alt="Temně modrý Neptun – nejodlehlejší planeta" loading="lazy" width="300" height="300">
|
||||
<div class="card-body">
|
||||
<h3>Neptun</h3>
|
||||
<p>Nejvzdálenější planeta sluneční soustavy. Vítr na Neptunu dosahuje rychlosti přes 2 000 km/h.</p>
|
||||
<button class="btn btn-secondary" aria-haspopup="dialog" data-planet="neptun">Detail planety</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -97,8 +148,7 @@
|
||||
<button id="calc-btn" class="btn btn-primary">Spočítat gravitaci</button>
|
||||
</div>
|
||||
|
||||
<div id="calc-result" class="calc-result" aria-live="polite">
|
||||
</div>
|
||||
<div id="calc-result" class="calc-result" aria-live="polite"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
+149
-42
@@ -31,69 +31,189 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
calcResult.innerHTML = `
|
||||
<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;">
|
||||
`;
|
||||
<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>
|
||||
`;
|
||||
</div>`;
|
||||
});
|
||||
|
||||
resultHTML += `</div>`;
|
||||
calcResult.innerHTML = resultHTML;
|
||||
};
|
||||
|
||||
if (calcButton) {
|
||||
calcButton.addEventListener('click', calculateSpaceWeight);
|
||||
}
|
||||
if (weightInput) {
|
||||
weightInput.addEventListener('keypress', (e) => {
|
||||
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 pozemských dní' },
|
||||
{ label: 'Gravitace', value: '3,72 m/s² (38 % Země)' },
|
||||
{ label: 'Měsíce', value: 'Phobos a Deimos' },
|
||||
{ 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-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