From d2ecf10c332d9c0043b9539ba515bdad62bf1acc Mon Sep 17 00:00:00 2001 From: Raitraut Date: Fri, 13 Mar 2026 11:20:16 +0100 Subject: [PATCH] init --- .claude/settings.local.json | 7 + css/style.css | 735 ++++++++++++++++++++++++++++++++++++ index.html | 334 ++++++++++++++++ js/main.js | 98 +++++ 4 files changed, 1174 insertions(+) create mode 100644 .claude/settings.local.json create mode 100644 css/style.css create mode 100644 index.html create mode 100644 js/main.js diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 0000000..74c4583 --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,7 @@ +{ + "permissions": { + "allow": [ + "WebFetch(domain:www.raricenter.com)" + ] + } +} diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..e06ebf9 --- /dev/null +++ b/css/style.css @@ -0,0 +1,735 @@ +/* ===== Reset & Base ===== */ +*, *::before, *::after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + +body { + font-family: 'Inter', sans-serif; + color: #2D2D2D; + background-color: #F4EFE8; + line-height: 1.6; +} + +a { + text-decoration: none; + color: inherit; +} + +ul { + list-style: none; +} + +img { + max-width: 100%; + display: block; +} + +.container { + max-width: 1140px; + margin: 0 auto; + padding: 0 20px; +} + +section { + padding: 80px 0; +} + +.section-title { + text-align: center; + font-size: 2rem; + margin-bottom: 12px; + color: #0E756F; +} + +.section-subtitle { + text-align: center; + color: #666; + margin-bottom: 48px; + max-width: 560px; + margin-left: auto; + margin-right: auto; +} + +.btn { + display: inline-block; + padding: 14px 32px; + border-radius: 8px; + font-weight: 600; + font-size: 1rem; + cursor: pointer; + border: none; + transition: background-color .2s, transform .15s; +} + +.btn:hover { + transform: translateY(-2px); +} + +.btn-primary { + background-color: #0E756F; + color: #fff; +} + +.btn-primary:hover { + background-color: #0a5e59; +} + +.btn-outline { + background: transparent; + border: 2px solid #0E756F; + color: #0E756F; +} + +.btn-outline:hover { + background-color: #0E756F; + color: #fff; +} + +/* ===== Header ===== */ +.header { + position: fixed; + top: 0; + left: 0; + width: 100%; + background: rgba(244, 239, 232, .95); + backdrop-filter: blur(8px); + z-index: 1000; + border-bottom: 1px solid rgba(0,0,0,.06); +} + +.header .container { + display: flex; + align-items: center; + justify-content: space-between; + height: 72px; +} + +.logo { + font-size: 1.4rem; + font-weight: 700; + color: #0E756F; +} + +.nav-links { + display: flex; + align-items: center; + gap: 32px; +} + +.nav-links a { + font-size: .95rem; + font-weight: 500; + transition: color .2s; +} + +.nav-links a:hover { + color: #0E756F; +} + +.nav-cta { + margin-left: 8px; +} + +.hamburger { + display: none; + flex-direction: column; + gap: 5px; + cursor: pointer; + background: none; + border: none; + padding: 4px; +} + +.hamburger span { + display: block; + width: 26px; + height: 3px; + background: #2D2D2D; + border-radius: 2px; + transition: transform .3s, opacity .3s; +} + +/* ===== Hero ===== */ +.hero { + padding-top: 140px; + padding-bottom: 80px; + text-align: center; +} + +.hero h1 { + font-size: 2.8rem; + line-height: 1.2; + margin-bottom: 20px; + color: #2D2D2D; +} + +.hero h1 span { + color: #0E756F; +} + +.hero p { + font-size: 1.15rem; + color: #555; + max-width: 600px; + margin: 0 auto 36px; +} + +.hero-stats { + display: flex; + justify-content: center; + gap: 48px; + margin-top: 48px; +} + +.hero-stats .stat { + text-align: center; +} + +.hero-stats .stat-number { + font-size: 2rem; + font-weight: 700; + color: #0E756F; +} + +.hero-stats .stat-label { + font-size: .9rem; + color: #777; +} + +/* ===== Services ===== */ +.services { + background: #fff; +} + +.services-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +.service-card { + background: #F4EFE8; + border-radius: 12px; + padding: 32px 24px; + text-align: center; + transition: transform .2s, box-shadow .2s; +} + +.service-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0,0,0,.08); +} + +.service-icon { + font-size: 2.4rem; + margin-bottom: 16px; +} + +.service-card h3 { + font-size: 1.1rem; + margin-bottom: 8px; + color: #0E756F; +} + +.service-card p { + font-size: .9rem; + color: #666; +} + +/* ===== Psychologists ===== */ +.psychologists-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 32px; +} + +.psychologist-card { + background: #fff; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 16px rgba(0,0,0,.06); + display: flex; + flex-direction: column; +} + +.psychologist-card img { + width: 100%; + height: 280px; + object-fit: cover; +} + +.psychologist-info { + padding: 24px; + flex: 1; + display: flex; + flex-direction: column; +} + +.psychologist-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 12px; +} + +.psychologist-header h3 { + font-size: 1.2rem; +} + +.badge { + display: inline-block; + background: #e0f2f1; + color: #0E756F; + font-size: .75rem; + font-weight: 600; + padding: 4px 10px; + border-radius: 20px; +} + +.psychologist-tags { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin-bottom: 12px; +} + +.tag { + background: #F4EFE8; + font-size: .8rem; + padding: 4px 12px; + border-radius: 20px; + color: #555; +} + +.psychologist-exp { + font-size: .85rem; + color: #888; + margin-bottom: 8px; +} + +.psychologist-bio { + font-size: .9rem; + color: #555; + margin-bottom: 20px; + flex: 1; +} + +.psychologist-info .btn { + align-self: flex-start; +} + +/* ===== Pricing ===== */ +.pricing { + background: #fff; +} + +.pricing-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; + align-items: start; +} + +.pricing-card { + background: #F4EFE8; + border-radius: 12px; + padding: 36px 28px; + text-align: center; + position: relative; + transition: transform .2s, box-shadow .2s; +} + +.pricing-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0,0,0,.08); +} + +.pricing-card.featured { + background: #0E756F; + color: #fff; + transform: scale(1.04); + box-shadow: 0 12px 32px rgba(14,117,111,.25); +} + +.pricing-card.featured:hover { + transform: scale(1.04) translateY(-4px); +} + +.pricing-card.featured .pricing-price { + color: #fff; +} + +.pricing-card.featured .pricing-features li { + color: rgba(255,255,255,.9); +} + +.pricing-card.featured .btn { + background: #fff; + color: #0E756F; +} + +.pricing-card.featured .btn:hover { + background: #e0f2f1; +} + +.pricing-label { + font-size: .8rem; + font-weight: 600; + letter-spacing: 1px; + text-transform: uppercase; + margin-bottom: 8px; + color: #888; +} + +.pricing-card.featured .pricing-label { + color: rgba(255,255,255,.7); +} + +.recommended-badge { + position: absolute; + top: -14px; + left: 50%; + transform: translateX(-50%); + background: #F4A261; + color: #fff; + font-size: .75rem; + font-weight: 700; + padding: 4px 16px; + border-radius: 20px; +} + +.pricing-name { + font-size: 1.4rem; + font-weight: 700; + margin-bottom: 4px; +} + +.pricing-price { + font-size: 2.2rem; + font-weight: 700; + color: #0E756F; + margin-bottom: 4px; +} + +.pricing-period { + font-size: .85rem; + color: #888; + margin-bottom: 24px; +} + +.pricing-card.featured .pricing-period { + color: rgba(255,255,255,.6); +} + +.pricing-features { + text-align: left; + margin-bottom: 28px; +} + +.pricing-features li { + padding: 6px 0; + font-size: .9rem; + color: #555; +} + +.pricing-features li::before { + content: '✓'; + color: #0E756F; + font-weight: 700; + margin-right: 8px; +} + +.pricing-card.featured .pricing-features li::before { + color: #a7f3d0; +} + +/* ===== Contact ===== */ +.contact-wrapper { + max-width: 640px; + margin: 0 auto; + background: #fff; + padding: 40px; + border-radius: 12px; + box-shadow: 0 4px 16px rgba(0,0,0,.06); +} + +.form-group { + margin-bottom: 20px; +} + +.form-group label { + display: block; + margin-bottom: 6px; + font-weight: 500; + font-size: .9rem; +} + +.form-group input, +.form-group select, +.form-group textarea { + width: 100%; + padding: 12px 14px; + border: 1px solid #ddd; + border-radius: 8px; + font-family: inherit; + font-size: .95rem; + transition: border-color .2s; + background: #fafaf8; +} + +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: #0E756F; +} + +.form-group textarea { + resize: vertical; + min-height: 120px; +} + +.form-row { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px; +} + +.form-submit { + text-align: center; + margin-top: 8px; +} + +.form-submit .btn { + width: 100%; +} + +.form-success { + display: none; + text-align: center; + padding: 32px; +} + +.form-success .checkmark { + font-size: 3rem; + margin-bottom: 12px; +} + +.form-success h3 { + color: #0E756F; + margin-bottom: 8px; +} + +.form-success p { + color: #666; +} + +.form-error { + color: #d32f2f; + font-size: .8rem; + margin-top: 4px; + display: none; +} + +/* ===== Footer ===== */ +.footer { + background: #2D2D2D; + color: #ccc; + padding: 60px 0 24px; +} + +.footer-grid { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + gap: 40px; + margin-bottom: 40px; +} + +.footer-brand .logo { + color: #fff; + margin-bottom: 12px; + display: inline-block; +} + +.footer-brand p { + font-size: .9rem; + color: #999; + max-width: 300px; +} + +.footer h4 { + color: #fff; + margin-bottom: 16px; + font-size: 1rem; +} + +.footer-links a { + display: block; + color: #999; + font-size: .9rem; + padding: 4px 0; + transition: color .2s; +} + +.footer-links a:hover { + color: #0E756F; +} + +.footer-contact p { + font-size: .9rem; + color: #999; + padding: 4px 0; +} + +.footer-social { + display: flex; + gap: 12px; + margin-top: 12px; +} + +.footer-social a { + display: flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + background: #3a3a3a; + border-radius: 50%; + color: #ccc; + font-size: .85rem; + transition: background .2s; +} + +.footer-social a:hover { + background: #0E756F; + color: #fff; +} + +.footer-bottom { + border-top: 1px solid #3a3a3a; + padding-top: 20px; + text-align: center; + font-size: .8rem; + color: #666; +} + +/* ===== Mobile Nav Overlay ===== */ +.mobile-nav { + display: none; + position: fixed; + inset: 0; + background: rgba(244,239,232,.98); + z-index: 999; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 32px; +} + +.mobile-nav.active { + display: flex; +} + +.mobile-nav a { + font-size: 1.4rem; + font-weight: 600; +} + +.mobile-nav a:hover { + color: #0E756F; +} + +.mobile-nav-close { + position: absolute; + top: 24px; + right: 24px; + background: none; + border: none; + font-size: 2rem; + cursor: pointer; + color: #2D2D2D; +} + +/* ===== Responsive ===== */ +@media (max-width: 960px) { + .nav-links { + display: none; + } + + .hamburger { + display: flex; + } + + .hero h1 { + font-size: 2.2rem; + } + + .services-grid { + grid-template-columns: repeat(2, 1fr); + } + + .psychologists-grid { + grid-template-columns: 1fr; + } + + .pricing-grid { + grid-template-columns: 1fr; + max-width: 400px; + margin-left: auto; + margin-right: auto; + } + + .pricing-card.featured { + transform: none; + } + + .pricing-card.featured:hover { + transform: translateY(-4px); + } + + .footer-grid { + grid-template-columns: 1fr; + gap: 32px; + } +} + +@media (max-width: 600px) { + section { + padding: 56px 0; + } + + .hero { + padding-top: 110px; + } + + .hero h1 { + font-size: 1.8rem; + } + + .hero-stats { + flex-direction: column; + gap: 20px; + } + + .services-grid { + grid-template-columns: 1fr; + } + + .form-row { + grid-template-columns: 1fr; + } + + .contact-wrapper { + padding: 24px; + } + + .section-title { + font-size: 1.6rem; + } +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..f4dc373 --- /dev/null +++ b/index.html @@ -0,0 +1,334 @@ + + + + + + Rari Center — Psychologická péče online + + + + + + + + + +
+
+ + + +
+
+ + +
+ + Služby + Psychologové + Ceník + Kontakt + Vybrat psychologa +
+ + +
+
+

Vaše cesta k lepšímu
duševnímu zdraví

+

Profesionální psychologická péče online. Spojíme vás s odborníkem, který vám pomůže překonat životní výzvy z pohodlí domova.

+ Najít svého psychologa +
+
+
500+
+
spokojených klientů
+
+
+
97%
+
pozitivních recenzí
+
+
+
4
+
odborníci
+
+
+
+
+ + +
+
+

Naše služby

+

Nabízíme komplexní psychologickou podporu přizpůsobenou vašim potřebám.

+
+
+
🧠
+

Individuální terapie

+

Osobní sezení zaměřená na vaše konkrétní potřeby a cíle v bezpečném prostředí.

+
+
+
💑
+

Párová terapie

+

Pomozte svému vztahu překonat krizi a zlepšit vzájemnou komunikaci.

+
+
+
🍽️
+

Poruchy příjmu potravy

+

Specializovaná péče pro ty, kteří bojují s anorexií, bulimií či přejídáním.

+
+
+
🌧️
+

Deprese a úzkost

+

Efektivní strategie pro zvládání depresivních stavů a úzkostných poruch.

+
+
+
🪞
+

Sebehodnocení

+

Budujte zdravé sebevědomí a naučte se vnímat svou hodnotu.

+
+
+
⚡
+

Panické ataky

+

Naučte se rozpoznat spouštěče a získejte nástroje pro zvládání paniky.

+
+
+
+
+ + +
+
+

Naši psychologové

+

Tým zkušených odborníků připravených vám pomoci na vaší cestě.

+
+ +
+ Mgr. Tereza Nováková +
+
+

Mgr. Tereza Nováková

+ Senior psycholog +
+
+ Deprese + Úzkosti + Sebehodnocení +
+

12 let praxe

+

Specializuji se na kognitivně-behaviorální terapii. Pomáhám klientům najít cestu z depresí a úzkostných stavů. Věřím, že každý si zaslouží žít plnohodnotný život.

+ Objednat se +
+
+ +
+ PhDr. Martin Dvořák +
+
+

PhDr. Martin Dvořák

+ Vedoucí terapeut +
+
+ Párová terapie + Komunikace + Krize +
+

15 let praxe

+

Věnuji se párové a rodinné terapii. Pomáhám párům obnovit důvěru a zlepšit komunikaci. Každý vztah stojí za to, aby o něj člověk bojoval.

+ Objednat se +
+
+ +
+ Mgr. Karolína Procházková +
+
+

Mgr. Karolína Procházková

+ Specialistka +
+
+ Poruchy příjmu potravy + Sebepojetí +
+

8 let praxe

+

Zaměřuji se na poruchy příjmu potravy a problémy se sebepojetím. Společně najdeme zdravý vztah k jídlu i k sobě samé. Pracuji s empatií a bez odsuzování.

+ Objednat se +
+
+ +
+ PhDr. Jan Svoboda, Ph.D. +
+
+

PhDr. Jan Svoboda, Ph.D.

+ Klinický psycholog +
+
+ Panické ataky + PTSD + Stres +
+

18 let praxe

+

Jako klinický psycholog se zaměřuji na panické poruchy a posttraumatický stres. Využívám kombinaci osvědčených terapeutických přístupů pro dosažení trvalých výsledků.

+ Objednat se +
+
+ +
+
+
+ + +
+
+

Ceník

+

Vyberte si plán, který nejlépe vyhovuje vašim potřebám.

+
+ +
+

Základ

+

Základní

+
2 500 Kč
+

měsíčně

+
    +
  • 4 online konzultace
    • +
  • Délka sezení 50 minut
    • +
  • Rezervace přes formulář
    • +
  • E-mailová podpora
    • +
+ Vybrat plán +
+ +
+
Doporučujeme
+

Nejoblíbenější

+

Standard

+
3 200 Kč
+

měsíčně

+
    +
  • 4 online konzultace
    • +
  • Délka sezení 50 minut
    • +
  • Denní textová podpora
    • +
  • Prioritní rezervace
    • +
  • Pracovní listy a cvičení
    • +
+ Vybrat plán +
+ +
+

Pro náročné

+

Premium

+
4 100 Kč
+

měsíčně

+
    +
  • Neomezené konzultace
    • +
  • Neomezená textová podpora
    • +
  • Exkluzivní materiály
    • +
  • Prioritní terapeut
    • +
  • Krizová linka 24/7
    • +
+ Vybrat plán +
+ +
+
+
+ + +
+
+

Kontaktujte nás

+

Vyplňte formulář a ozveme se vám do 24 hodin.

+
+
+
+
+ + +
+
+
+ + +
+
+
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ +
+
+
+
✅
+

Děkujeme za vaši zprávu!

+

Ozveme se vám co nejdříve. Obvykle do 24 hodin.

+
+
+
+
+ + + + + + + diff --git a/js/main.js b/js/main.js new file mode 100644 index 0000000..17837da --- /dev/null +++ b/js/main.js @@ -0,0 +1,98 @@ +// ===== Mobile Menu ===== +const hamburger = document.getElementById('hamburger'); +const mobileNav = document.getElementById('mobileNav'); +const mobileNavClose = document.getElementById('mobileNavClose'); +const mobileNavLinks = mobileNav.querySelectorAll('a'); + +hamburger.addEventListener('click', () => { + mobileNav.classList.add('active'); + document.body.style.overflow = 'hidden'; +}); + +mobileNavClose.addEventListener('click', closeMobileNav); + +mobileNavLinks.forEach(link => { + link.addEventListener('click', closeMobileNav); +}); + +function closeMobileNav() { + mobileNav.classList.remove('active'); + document.body.style.overflow = ''; +} + +// ===== Contact Form ===== +const contactForm = document.getElementById('contactForm'); +const formSuccess = document.getElementById('formSuccess'); + +contactForm.addEventListener('submit', (e) => { + e.preventDefault(); + + // Clear previous errors + document.querySelectorAll('.form-error').forEach(el => el.style.display = 'none'); + + const name = document.getElementById('formName'); + const email = document.getElementById('formEmail'); + const phone = document.getElementById('formPhone'); + const message = document.getElementById('formMessage'); + + let valid = true; + + if (!name.value.trim()) { + showError(name, 'Prosím vyplňte své jméno'); + valid = false; + } + + if (!email.value.trim() || !isValidEmail(email.value)) { + showError(email, 'Prosím zadejte platný e-mail'); + valid = false; + } + + if (!phone.value.trim()) { + showError(phone, 'Prosím zadejte telefonní číslo'); + valid = false; + } + + if (!message.value.trim()) { + showError(message, 'Prosím napište zprávu'); + valid = false; + } + + if (!valid) return; + + // Hide form, show success + contactForm.style.display = 'none'; + formSuccess.style.display = 'block'; +}); + +function showError(input, msg) { + const errorEl = input.parentElement.querySelector('.form-error'); + if (errorEl) { + errorEl.textContent = msg; + errorEl.style.display = 'block'; + } +} + +function isValidEmail(email) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); +} + +// ===== Smooth Scroll for "Objednat se" buttons ===== +document.querySelectorAll('a[href^="#"]').forEach(anchor => { + anchor.addEventListener('click', (e) => { + const target = document.querySelector(anchor.getAttribute('href')); + if (target) { + e.preventDefault(); + target.scrollIntoView({ behavior: 'smooth' }); + } + }); +}); + +// ===== Header shadow on scroll ===== +const header = document.querySelector('.header'); +window.addEventListener('scroll', () => { + if (window.scrollY > 10) { + header.style.boxShadow = '0 2px 12px rgba(0,0,0,.08)'; + } else { + header.style.boxShadow = 'none'; + } +});