From cdb89b5f73fc960469696fab86c2c73d154f0c2a Mon Sep 17 00:00:00 2001 From: Tomisss1 Date: Fri, 26 Jun 2026 12:08:13 +0200 Subject: [PATCH] added --- README.md | 40 ++++-- css/style.css | 332 ++++++++++++++++++++++++++++++++++++++++++++++++++ img/mars.webp | Bin 0 -> 12862 bytes index.html | 116 ++++++++++++++++++ js/main.js | 100 +++++++++++++++ robots.txt | 4 + sitemap.xml | 9 ++ 7 files changed, 589 insertions(+), 12 deletions(-) create mode 100644 css/style.css create mode 100644 img/mars.webp create mode 100644 index.html create mode 100644 js/main.js create mode 100644 robots.txt create mode 100644 sitemap.xml 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 0000000000000000000000000000000000000000..fe482e9913b2309de6e0468a1ceb81d7d70080f2 GIT binary patch literal 12862 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 literal 0 HcmV?d00001 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.

+ +
+
+ + +
+ +
+ +
+
+
+
+ +
+ +
+
+

© 2026 – Ročníková práce z Webových technologií. Všechna práva vyhrazena.

+

Vytvořil: Tomáš Korolus (2. ročník)

+
+
+ + + + \ 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