added vesmírný tělěsa

This commit is contained in:
2026-06-26 13:13:14 +02:00
parent 5d7a99b2f6
commit 4512dd4023
8 changed files with 561 additions and 78 deletions
+60 -10
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interaktivní průvodce vesmírem | Ročníková práce</title>
<meta name="description" content="Moderní interaktivní prezentace naší sluneční soustavy. Prozkoumejte planety a spočítejte si svou váhu ve vesmíru.">
<meta name="keywords" content="vesmír, planety, sluneční soustava, Mars, vesmírná kalkulačka">
<meta name="author" content="Tomáš Korolus">
@@ -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">
@@ -79,8 +80,58 @@
<button class="btn btn-secondary" aria-haspopup="dialog" data-planet="mars">Detail planety</button>
</div>
</article>
</div>
<!-- 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>
@@ -88,7 +139,7 @@
<div class="container calculator-wrapper">
<h2>Vesmírná váhová kalkulačka</h2>
<p>Zadejte svou váhu na Zemi a zjistěte, kolik byste vážili na jiných tělesech naší soustavy díky odlišné gravitaci.</p>
<div class="calc-form">
<div class="form-group">
<label for="weight-input">Vaše váha na Zemi (v kg):</label>
@@ -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>