diff --git a/README.md b/README.md index 32b8761..0db020d 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,32 @@ # 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/ -│ └── style.css # Veškeré styly (layout, barvy, typografie) +│ └── style.css ├── js/ -│ └── main.js # JavaScript pro kalkulačku a interaktivitu +│ └── main.js ├── img/ -│ ├── mars.webp # Optimalizované obrázky planet ve formátu WebP -│ ├── og-preview.jpg # Náhledový obrázek pro sociální sítě (1200x630px) -│ └── favicon.ico # Malá ikonka do záložky prohlížeče -├── index.html # Hlavní soubor (kód výše) -├── robots.txt # Soubor pro vyhledávače (SEO) -├── sitemap.xml # Mapa webu pro vyhledávače (SEO) -└── README.md # Povinná vyčerpávající dokumentace -``` \ No newline at end of file +│ ├── mars.webp +│ ├── og-preview.jpg +│ └── favicon.ico +├── index.html +├── robots.txt +├── sitemap.xml +└── README.md \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..880ceb4 --- /dev/null +++ b/css/style.css @@ -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 */ + } +} \ No newline at end of file diff --git a/img/mars.webp b/img/mars.webp new file mode 100644 index 0000000..fe482e9 Binary files /dev/null and b/img/mars.webp differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..6a45350 --- /dev/null +++ b/index.html @@ -0,0 +1,116 @@ + + + + + + Interaktivní průvodce vesmírem | Ročníková práce + + + + + + + + + + + + + + + + + + + + + + + + + + Preskočit na hlavní obsah + +
+
+ + +
+
+ +
+ +
+
+

Objevte tajemství sluneční soustavy

+

Cesta napříč prostorem a časem začíná právě zde. Poznejte planety, jak jste je ještě neviděli.

+ Začít průzkum +
+
+ +
+
+

Encyklopedie planet

+

Vyberte si planetu a zjistěte o ní více informací.

+ +
+
+ Rudá planeta Mars focená z oběžné dráhy +
+

Mars

+

Čtvrtá planeta naší soustavy, známá svým načervenalým povrchem plným oxidu železa.

+ +
+
+ +
+
+
+ +
+
+

Vesmírná váhová kalkulačka

+

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.

+ +
+
+ + +
+ +
+ +
+
+
+
+ +
+ + + + + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..c33915b --- /dev/null +++ b/js/main.js @@ -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 = ` +

+ ⚠️ Prosím, zadej platnou kladnou váhu v kilogramech. +

+ `; + return; + } + + let resultHTML = ` +

Tvoje váha ve vesmíru:

+
+ `; + + Object.keys(spaceGravity).forEach(key => { + const planet = spaceGravity[key]; + const planetWeight = (earthWeight * planet.factor).toFixed(1); + + resultHTML += ` +
+ ${planet.icon} + ${planet.name} + ${planetWeight} kg +
+ `; + }); + + resultHTML += `
`; + 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í."); + } + }); + }); +}); \ No newline at end of file diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..704ceda --- /dev/null +++ b/robots.txt @@ -0,0 +1,4 @@ +User-agent: * +Allow: / + +Sitemap: https://Tomisss1.github.io/Vesmir/sitemap.xml \ No newline at end of file diff --git a/sitemap.xml b/sitemap.xml new file mode 100644 index 0000000..4972260 --- /dev/null +++ b/sitemap.xml @@ -0,0 +1,9 @@ + + + + https://Tomisss1.github.io/Vesmir/ + 2026-06-26 + monthly + 1.0 + + \ No newline at end of file