mirror of
https://github.com/Tomisss1/Vesmir.git
synced 2026-07-23 14:46:49 +00:00
added
This commit is contained in:
@@ -1,16 +1,32 @@
|
|||||||
# Vesmir
|
# Vesmir
|
||||||
```
|
|
||||||
muj-vesmirny-web/
|
# Interaktivní průvodce vesmírem
|
||||||
|
|
||||||
|
**Autor:** Tomáš korolus
|
||||||
|
**Třída:** 2. ročník
|
||||||
|
**Předmět:** Webové technologie
|
||||||
|
**Živý web:** [Odkaz na GitHub Pages](https://Tomisss1.github.io/Vesmir/)
|
||||||
|
|
||||||
|
## Úvod
|
||||||
|
Tento projekt je moderní, plně optimalizovaná webová prezentace zaměřená na naši sluneční soustavu. Cílem projektu bylo vytvořit interaktivní prostředí za použití čistých webových technologií, bez použití externích CSS nebo JS frameworků.
|
||||||
|
|
||||||
|
## Použité technologie
|
||||||
|
* **HTML5** – Sémantické značení struktury.
|
||||||
|
* **CSS3** – Moderní layouty (Flexbox, CSS Grid), responzivita (Mobile First).
|
||||||
|
* **Vanilla JavaScript (ES6+)** – Logika vesmírné kalkulačky, manipulace s DOM.
|
||||||
|
* **IDE:** Visual Studio Code (v1.85+)
|
||||||
|
|
||||||
|
## Adresářová struktura
|
||||||
|
```text
|
||||||
├── css/
|
├── css/
|
||||||
│ └── style.css # Veškeré styly (layout, barvy, typografie)
|
│ └── style.css
|
||||||
├── js/
|
├── js/
|
||||||
│ └── main.js # JavaScript pro kalkulačku a interaktivitu
|
│ └── main.js
|
||||||
├── img/
|
├── img/
|
||||||
│ ├── mars.webp # Optimalizované obrázky planet ve formátu WebP
|
│ ├── mars.webp
|
||||||
│ ├── og-preview.jpg # Náhledový obrázek pro sociální sítě (1200x630px)
|
│ ├── og-preview.jpg
|
||||||
│ └── favicon.ico # Malá ikonka do záložky prohlížeče
|
│ └── favicon.ico
|
||||||
├── index.html # Hlavní soubor (kód výše)
|
├── index.html
|
||||||
├── robots.txt # Soubor pro vyhledávače (SEO)
|
├── robots.txt
|
||||||
├── sitemap.xml # Mapa webu pro vyhledávače (SEO)
|
├── sitemap.xml
|
||||||
└── README.md # Povinná vyčerpávající dokumentace
|
└── README.md
|
||||||
```
|
|
||||||
+332
@@ -0,0 +1,332 @@
|
|||||||
|
/* ==========================================================================
|
||||||
|
1. RESET A ZÁKLADNÍ NASTAVENÍ (Box-sizing podle zadání)
|
||||||
|
========================================================================== */
|
||||||
|
*, *::before, *::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Barevná paleta - Vesmírný temný režim s vysokým kontrastem */
|
||||||
|
--bg-space: #0b0d17;
|
||||||
|
--bg-card: #151926;
|
||||||
|
--text-main: #f0f2f5;
|
||||||
|
--text-muted: #b0b5c1;
|
||||||
|
--accent-blue: #4f46e5;
|
||||||
|
--accent-cyan: #06b6d4;
|
||||||
|
--white: #ffffff;
|
||||||
|
|
||||||
|
/* Typografie */
|
||||||
|
--font-primary: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-primary);
|
||||||
|
background-color: var(--bg-space);
|
||||||
|
color: var(--text-main);
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pomocný kontejner pro zarovnání obsahu */
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Přístupnost: Skrytí prvku pro běžné oči, ale čitelné pro čtečky obrazovky */
|
||||||
|
.sr-only-skip {
|
||||||
|
position: absolute;
|
||||||
|
left: -10000px;
|
||||||
|
top: auto;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.sr-only-skip:focus {
|
||||||
|
position: static;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
background: var(--accent-cyan);
|
||||||
|
color: var(--bg-space);
|
||||||
|
padding: 10px;
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Klávesnicový focus pro lepší přístupnost (WCAG) */
|
||||||
|
a:focus, button:focus, input:focus {
|
||||||
|
outline: 3px solid var(--accent-cyan);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
2. HLAVIČKA A NAVIGACE (Flexbox)
|
||||||
|
========================================================================== */
|
||||||
|
.main-header {
|
||||||
|
background-color: rgba(21, 25, 38, 0.9);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column; /* Mobile first: pod sebou */
|
||||||
|
align-items: center;
|
||||||
|
padding: 15px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo a {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--white);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav {
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav ul {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav a {
|
||||||
|
color: var(--text-muted);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.3s ease;
|
||||||
|
padding: 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav a:hover, .main-nav a.active {
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
3. HERO SEKCE (Úvodní banner)
|
||||||
|
========================================================================== */
|
||||||
|
.hero-section {
|
||||||
|
padding: 80px 0;
|
||||||
|
text-align: center;
|
||||||
|
background: radial-gradient(circle at center, #1e1b4b 0%, var(--bg-space) 70%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
color: var(--white);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content p {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto 30px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tlačítka */
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 12px 28px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background-color 0.3s ease, transform 0.2s ease;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--accent-blue);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background-color: #4338ca;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary {
|
||||||
|
background-color: transparent;
|
||||||
|
border: 2px solid var(--accent-cyan);
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-secondary:hover {
|
||||||
|
background-color: var(--accent-cyan);
|
||||||
|
color: var(--bg-space);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
4. ENCYKLOPEDIE PLANET (CSS Grid - Mobile First)
|
||||||
|
========================================================================== */
|
||||||
|
.planets-section {
|
||||||
|
padding: 60px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planets-section h2, .calculator-section h2 {
|
||||||
|
font-size: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
color: var(--white);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-subtitle {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* CSS Grid definice pro karty */
|
||||||
|
.planets-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr; /* Na mobilu 1 sloupec */
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planet-card {
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planet-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 10px 20px rgba(6, 182, 212, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.planet-card img {
|
||||||
|
width: 100%;
|
||||||
|
height: 250px;
|
||||||
|
object-fit: cover; /* Aby se obrázek nedeformoval */
|
||||||
|
background-color: #000; /* fallback než se načte obrázek */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: var(--white);
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body p {
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
5. KALKULAČKA (Flexbox / Form styling)
|
||||||
|
========================================================================== */
|
||||||
|
.calculator-section {
|
||||||
|
padding: 60px 0;
|
||||||
|
background-color: rgba(21, 25, 38, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.calculator-wrapper {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calc-form {
|
||||||
|
margin-top: 30px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--text-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 2px solid rgba(255, 255, 255, 0.1);
|
||||||
|
background-color: var(--bg-space);
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.calc-result {
|
||||||
|
margin-top: 30px;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: var(--bg-card);
|
||||||
|
border-left: 4px solid var(--accent-cyan);
|
||||||
|
min-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
6. PATIČKA
|
||||||
|
========================================================================== */
|
||||||
|
.main-footer {
|
||||||
|
padding: 40px 0;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
text-align: center;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-wrapper p + p {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
7. RESPONSIVE DESIGN (Média dotazy pro Tablet a Desktop)
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/* Tablet a širší (nad 600px) */
|
||||||
|
@media (min-width: 600px) {
|
||||||
|
.header-wrapper {
|
||||||
|
flex-direction: row; /* Navigace a logo vedle sebe */
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-nav {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.planets-grid {
|
||||||
|
grid-template-columns: repeat(2, 1fr); /* 2 karty vedle sebe */
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-content h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Velký desktop (nad 900px) */
|
||||||
|
@media (min-width: 900px) {
|
||||||
|
.planets-grid {
|
||||||
|
grid-template-columns: repeat(3, 1fr); /* 3 karty vedle sebe */
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
+116
@@ -0,0 +1,116 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cs">
|
||||||
|
<head>
|
||||||
|
<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">
|
||||||
|
<meta name="robots" content="index, follow">
|
||||||
|
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta property="og:url" content="https://Tomisss1.github.io/Vesmir/">
|
||||||
|
<meta property="og:title" content="Interaktivní průvodce vesmírem">
|
||||||
|
<meta property="og:description" content="Prozkoumejte tajemství vesmíru v moderní webové aplikaci postavené na čistých technologiích.">
|
||||||
|
<meta property="og:image" content="https://Tomisss1.github.io/Vesmir/img/og-preview.jpg">
|
||||||
|
|
||||||
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
|
<meta name="twitter:title" content="Interaktivní průvodce vesmírem">
|
||||||
|
<meta name="twitter:description" content="Prozkoumejte tajemství vesmíru v moderní webové aplikaci.">
|
||||||
|
<meta name="twitter:image" content="https://Tomisss1.github.io/Vesmir/img/og-preview.jpg">
|
||||||
|
|
||||||
|
<script type="application/ld+json">
|
||||||
|
{
|
||||||
|
"@context": "https://schema.org",
|
||||||
|
"@type": "WebApplication",
|
||||||
|
"name": "Interaktivní průvodce vesmírem",
|
||||||
|
"description": "Vzdělávací webová prezentace o sluneční soustavě.",
|
||||||
|
"applicationCategory": "EducationalApplication",
|
||||||
|
"browserRequirements": "Requires HTML5, CSS3, and JavaScript (ES6+)."
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<link rel="stylesheet" href="css/style.css">
|
||||||
|
|
||||||
|
<link rel="icon" href="img/favicon.ico" type="image/x-icon">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<a href="#hlavni-obsah" class="sr-only-skip">Preskočit na hlavní obsah</a>
|
||||||
|
|
||||||
|
<header class="main-header">
|
||||||
|
<div class="container header-wrapper">
|
||||||
|
<div class="logo">
|
||||||
|
<a href="index.html">🌌 VesmírnýPrůvodce</a>
|
||||||
|
</div>
|
||||||
|
<nav class="main-nav" aria-label="Hlavní navigace">
|
||||||
|
<ul>
|
||||||
|
<li><a href="#domov" class="nav-link active">Domů</a></li>
|
||||||
|
<li><a href="#encyklopedie" class="nav-link">Encyklopedie</a></li>
|
||||||
|
<li><a href="#kalkulacka" class="nav-link">Kalkulačka</a></li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main id="hlavni-obsah">
|
||||||
|
|
||||||
|
<section id="domov" class="hero-section">
|
||||||
|
<div class="container hero-content">
|
||||||
|
<h1>Objevte tajemství sluneční soustavy</h1>
|
||||||
|
<p>Cesta napříč prostorem a časem začíná právě zde. Poznejte planety, jak jste je ještě neviděli.</p>
|
||||||
|
<a href="#encyklopedie" class="btn btn-primary">Začít průzkum</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div class="planets-grid">
|
||||||
|
<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">
|
||||||
|
<h3>Mars</h3>
|
||||||
|
<p>Čtvrtá planeta naší soustavy, známá svým načervenalým povrchem plným oxidu železa.</p>
|
||||||
|
<button class="btn btn-secondary" aria-haspopup="dialog" data-planet="mars">Detail planety</button>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="kalkulacka" class="calculator-section">
|
||||||
|
<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>
|
||||||
|
<input type="number" id="weight-input" min="1" max="500" placeholder="Např. 75" required>
|
||||||
|
</div>
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="main-footer">
|
||||||
|
<div class="container footer-wrapper">
|
||||||
|
<p>© 2026 – Ročníková práce z Webových technologií. Všechna práva vyhrazena.</p>
|
||||||
|
<p>Vytvořil: Tomáš Korolus (2. ročník)</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
+100
@@ -0,0 +1,100 @@
|
|||||||
|
/**
|
||||||
|
* 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 (Oprava nefunkčního tlačítka)
|
||||||
|
// ==========================================
|
||||||
|
|
||||||
|
// Databáze podrobných informací o planetách
|
||||||
|
const planetDetails = {
|
||||||
|
mars: {
|
||||||
|
title: "Mars – Detailní průzkum",
|
||||||
|
text: "Mars je druhá nejmenší planeta sluneční soustavy. Má tenkou atmosféru složenou převážně z oxidu uhličitého. Nachází se zde Olympus Mons, nejvyšší známá hora sluneční soustavy (22 km), a hluboké údolí Valles Marineris. V současnosti planetu zkoumá několik roverů (např. Perseverance)."
|
||||||
|
}
|
||||||
|
// Sem můžeš v budoucnu přidat zeme: { ... }, jupiter: { ... }
|
||||||
|
};
|
||||||
|
|
||||||
|
// Najdeme všechna tlačítka, která mají atribut data-planet
|
||||||
|
const detailButtons = document.querySelectorAll('button[data-planet]');
|
||||||
|
|
||||||
|
detailButtons.forEach(button => {
|
||||||
|
button.addEventListener('click', () => {
|
||||||
|
// Zjistíme, o jakou planetu jde (např. "mars")
|
||||||
|
const planetKey = button.getAttribute('data-planet');
|
||||||
|
const data = planetDetails[planetKey];
|
||||||
|
|
||||||
|
if (data) {
|
||||||
|
// Jednoduché zobrazení detailu (prozatím přes nativní alert)
|
||||||
|
alert(`${data.title}\n\n${data.text}`);
|
||||||
|
} else {
|
||||||
|
alert("Informace o této planetě se teprve připravují.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
|
|
||||||
|
Sitemap: https://Tomisss1.github.io/Vesmir/sitemap.xml
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||||
|
<url>
|
||||||
|
<loc>https://Tomisss1.github.io/Vesmir/</loc>
|
||||||
|
<lastmod>2026-06-26</lastmod>
|
||||||
|
<changefreq>monthly</changefreq>
|
||||||
|
<priority>1.0</priority>
|
||||||
|
</url>
|
||||||
|
</urlset>
|
||||||
Reference in New Issue
Block a user