diff --git a/css/style.css b/css/style.css index eecbfb8..8cf7a3c 100644 --- a/css/style.css +++ b/css/style.css @@ -548,6 +548,332 @@ a:focus, button:focus, input:focus { } /* Responzivita */ +@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; + } +} +/* ========================================== + 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; diff --git a/img/jupiter.png b/img/jupiter.png new file mode 100644 index 0000000..be28759 Binary files /dev/null and b/img/jupiter.png differ diff --git a/img/mesic.png b/img/mesic.png new file mode 100644 index 0000000..5d9cb0d Binary files /dev/null and b/img/mesic.png differ diff --git a/img/neptun.png b/img/neptun.png new file mode 100644 index 0000000..d9dce67 Binary files /dev/null and b/img/neptun.png differ diff --git a/img/uran.png b/img/uran.png new file mode 100644 index 0000000..194dcaf Binary files /dev/null and b/img/uran.png differ diff --git a/img/venuse.png b/img/venuse.png new file mode 100644 index 0000000..1162164 Binary files /dev/null and b/img/venuse.png differ diff --git a/index.html b/index.html index 6a45350..35744da 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@
Vyberte si planetu a zjistěte o ní více informací.
- +Vyberte si těleso a zjistěte o něm více informací.
+
+ Druhá planeta od Slunce a nejžhavější těleso sluneční soustavy. Rotuje pozpátku.
+ +
+ Jediný přirozený satelit Země. Ovlivňuje příliv a odliv a je jediným mimozemským tělesem, kam vstoupil člověk.
+ +
+ Sedmá planeta od Slunce. Rotuje na boku a má nejchladnější atmosféru v celé soustavě.
+ +
+ Největší planeta sluneční soustavy. Jeho Velká rudá skvrna je bouře trvající stovky let.
+ +
+ Nejvzdálenější planeta sluneční soustavy. Vítr na Neptunu dosahuje rychlosti přes 2 000 km/h.
+ +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.
- ++
⚠️ Prosím, zadej platnou kladnou váhu v kilogramech. -
- `; + `; return; } let resultHTML = ` -${data.description}