Initial AI-generated site

This commit is contained in:
2026-09-02 21:10:19 +00:00
parent 8e5c0b8c49
commit e42f388d76
3 changed files with 1669 additions and 0 deletions
+455
View File
@@ -0,0 +1,455 @@
<!doctype html>
<html lang="he" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>סטודיו מראה | עיצוב שיער בפתח תקווה</title>
<meta name="description" content="סטודיו מראה – סלון עיצוב שיער מוביל בפתח תקווה. תספורות, צביעה, טיפולים וייעוץ אישי. רחוב רוטשילד 45. קבעו תור: 054-9876543">
<meta property="og:title" content="סטודיו מראה | עיצוב שיער בפתח תקווה">
<meta property="og:description" content="תספורות מעוצבות, צביעה מקצועית וטיפולי שיער. רחוב רוטשילד 45, פתח תקווה.">
<meta property="og:type" content="website">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='50' r='45' fill='%231a1a1a'/><path d='M30 70 Q50 20 70 70' stroke='%23c9a961' stroke-width='4' fill='none'/></svg>">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="#main-content" class="skip-link">דלגו לתוכן הראשי</a>
<header class="site-header">
<nav class="nav-container">
<a href="#hero" class="logo">
<svg class="logo-icon" viewBox="0 0 50 50" aria-hidden="true">
<circle cx="25" cy="25" r="23" fill="none" stroke="currentColor" stroke-width="1.5"/>
<path d="M15 38 Q25 10 35 38" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
<span>סטודיו מראה</span>
</a>
<button class="nav-toggle" aria-label="פתיחת תפריט ניווט" aria-expanded="false" aria-controls="main-nav">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav-menu" id="main-nav">
<li><a href="#services">שירותים</a></li>
<li><a href="#gallery">גלריה</a></li>
<li><a href="#booking">תיאום תור</a></li>
<li><a href="#contact">צור קשר</a></li>
</ul>
</nav>
</header>
<main id="main-content">
<section id="hero" class="hero">
<div class="hero-bg">
<div class="hero-gradient"></div>
<svg class="hero-pattern" viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<defs>
<pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
<path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(201,169,97,0.08)" stroke-width="1"/>
</pattern>
</defs>
<rect width="100%" height="100%" fill="url(#grid)"/>
</svg>
</div>
<div class="hero-content">
<p class="hero-eyebrow">רחוב רוטשילד 45, פתח תקווה</p>
<h1 class="hero-title">
<span class="title-line">סטודיו</span>
<span class="title-line title-accent">מראה</span>
</h1>
<p class="hero-desc">לא רק תספורת — שיחה, התאמה אישית ותוצאה שמרגישה כמוכם. הצוות שלנו מקשיב לפני שגוזר.</p>
<div class="hero-actions">
<a href="#booking" class="btn btn-primary">קבעו תור</a>
<a href="tel:054-9876543" class="btn btn-secondary">
<svg aria-hidden="true" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
</svg>
054-9876543
</a>
</div>
</div>
<div class="hero-visual">
<svg class="hero-illustration" viewBox="0 0 300 400" aria-hidden="true">
<defs>
<linearGradient id="hair-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="var(--gold)"/>
<stop offset="100%" stop-color="var(--gold-dark)"/>
</linearGradient>
</defs>
<ellipse cx="150" cy="120" rx="70" ry="85" fill="var(--surface)"/>
<path d="M80 100 Q60 150 80 220 Q100 280 150 300 Q200 280 220 220 Q240 150 220 100 Q200 50 150 40 Q100 50 80 100" fill="url(#hair-gradient)" opacity="0.9"/>
<ellipse cx="150" cy="130" rx="50" ry="60" fill="var(--surface)"/>
<circle cx="130" cy="120" r="5" fill="var(--text)"/>
<circle cx="170" cy="120" r="5" fill="var(--text)"/>
<path d="M135 150 Q150 160 165 150" stroke="var(--text)" stroke-width="2" fill="none"/>
<path d="M70 90 Q50 60 80 40 Q120 20 150 30" stroke="var(--gold)" stroke-width="3" fill="none"/>
<path d="M230 90 Q250 60 220 40 Q180 20 150 30" stroke="var(--gold)" stroke-width="3" fill="none"/>
</svg>
</div>
</section>
<section id="services" class="services">
<div class="container">
<header class="section-header">
<span class="section-number">01</span>
<h2 class="section-title">מה אנחנו עושים</h2>
<p class="section-desc">כל שירות מתחיל בשיחת ייעוץ קצרה — בלי הפתעות, רק תוצאות</p>
</header>
<div class="services-grid">
<article class="service-card service-card--highlight">
<div class="service-icon">
<svg viewBox="0 0 60 60" aria-hidden="true">
<path d="M20 45 L20 20 Q30 10 40 20 L40 45" stroke="currentColor" stroke-width="2" fill="none"/>
<circle cx="30" cy="15" r="8" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
</div>
<h3>תספורות עיצוב</h3>
<p>גזירה מדויקת שמתאימה למבנה הפנים ולסגנון החיים שלכם. נשים, גברים וילדים.</p>
<span class="service-price">החל מ-120 ₪</span>
</article>
<article class="service-card">
<div class="service-icon">
<svg viewBox="0 0 60 60" aria-hidden="true">
<rect x="15" y="10" width="30" height="40" rx="4" stroke="currentColor" stroke-width="2" fill="none"/>
<line x1="22" y1="20" x2="38" y2="20" stroke="currentColor" stroke-width="2"/>
<line x1="22" y1="30" x2="38" y2="30" stroke="currentColor" stroke-width="2"/>
<circle cx="30" cy="42" r="4" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
</div>
<h3>צביעה וגוונים</h3>
<p>מבלונד סקנדינבי ועד שחור עמוק. צבעים איכותיים שנשארים חיים לאורך זמן.</p>
<span class="service-price">החל מ-250 ₪</span>
</article>
<article class="service-card">
<div class="service-icon">
<svg viewBox="0 0 60 60" aria-hidden="true">
<path d="M15 30 Q30 15 45 30 Q30 45 15 30" stroke="currentColor" stroke-width="2" fill="none"/>
<circle cx="30" cy="30" r="5" fill="currentColor"/>
</svg>
</div>
<h3>טיפולי שיקום</h3>
<p>קרטין, בוטוקס לשיער, טיפולי לחות עמוקים. להחזיר את הברק והבריאות.</p>
<span class="service-price">החל מ-180 ₪</span>
</article>
<article class="service-card">
<div class="service-icon">
<svg viewBox="0 0 60 60" aria-hidden="true">
<path d="M30 10 L30 50 M20 20 L40 20 M15 35 L45 35" stroke="currentColor" stroke-width="2"/>
<circle cx="30" cy="10" r="4" fill="currentColor"/>
</svg>
</div>
<h3>פן והחלקות</h3>
<p>עיצוב לאירוע או החלקה שנשארת חודשים. ברזילאית, יפנית או משי.</p>
<span class="service-price">החל מ-100 ₪</span>
</article>
<article class="service-card">
<div class="service-icon">
<svg viewBox="0 0 60 60" aria-hidden="true">
<path d="M20 15 Q30 25 40 15 M20 25 Q30 35 40 25 M20 35 Q30 45 40 35 M20 45 Q30 55 40 45" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
</div>
<h3>תוספות שיער</h3>
<p>אורך ונפח טבעיים. התקנה מקצועית שלא פוגעת בשיער המקורי.</p>
<span class="service-price">החל מ-400 ₪</span>
</article>
<article class="service-card service-card--accent">
<div class="service-icon">
<svg viewBox="0 0 60 60" aria-hidden="true">
<circle cx="30" cy="25" r="12" stroke="currentColor" stroke-width="2" fill="none"/>
<path d="M22 40 L30 50 L38 40" stroke="currentColor" stroke-width="2" fill="none"/>
<line x1="30" y1="37" x2="30" y2="50" stroke="currentColor" stroke-width="2"/>
</svg>
</div>
<h3>עיצוב כלות</h3>
<p>פגישת ניסיון + עיצוב ביום החתונה. ניסיון של 15 שנה באירועים.</p>
<span class="service-price">החל מ-600 ₪</span>
</article>
</div>
</div>
</section>
<section id="gallery" class="gallery">
<div class="container">
<header class="section-header">
<span class="section-number">02</span>
<h2 class="section-title">עבודות אחרונות</h2>
<p class="section-desc">לקוחות אמיתיות, תוצאות אמיתיות</p>
</header>
<div class="gallery-grid">
<figure class="gallery-item">
<div class="gallery-visual">
<svg viewBox="0 0 200 200" role="img" aria-label="צביעת אומברה זהובה">
<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#c9a961"/>
<stop offset="100%" stop-color="#8b7355"/>
</linearGradient>
</defs>
<rect width="200" height="200" fill="var(--surface-alt)"/>
<ellipse cx="100" cy="85" rx="45" ry="55" fill="#f5f0e8"/>
<path d="M55 75 Q40 110 55 160 Q70 195 100 200 Q130 195 145 160 Q160 110 145 75 Q130 50 100 45 Q70 50 55 75" fill="url(#g1)"/>
<ellipse cx="100" cy="90" rx="33" ry="40" fill="#f5f0e8"/>
</svg>
</div>
<figcaption>אומברה זהובה</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-visual">
<svg viewBox="0 0 200 200" role="img" aria-label="תספורת פיקסי מודרנית">
<rect width="200" height="200" fill="var(--surface-alt)"/>
<ellipse cx="100" cy="90" rx="45" ry="55" fill="#f5f0e8"/>
<path d="M55 70 Q40 50 60 35 Q100 15 140 35 Q160 50 145 70 Q130 60 100 55 Q70 60 55 70" fill="#2c2c2c"/>
<ellipse cx="100" cy="95" rx="35" ry="42" fill="#f5f0e8"/>
</svg>
</div>
<figcaption>פיקסי מודרנית</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-visual">
<svg viewBox="0 0 200 200" role="img" aria-label="צביעה בגווני סגול נועז">
<defs>
<linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#9b59b6"/>
<stop offset="100%" stop-color="#6c3483"/>
</linearGradient>
</defs>
<rect width="200" height="200" fill="var(--surface-alt)"/>
<ellipse cx="100" cy="85" rx="45" ry="55" fill="#f5f0e8"/>
<path d="M50 75 Q35 100 50 150 Q65 190 100 195 Q135 190 150 150 Q165 100 150 75 Q135 55 100 50 Q65 55 50 75" fill="url(#g2)"/>
<ellipse cx="100" cy="90" rx="33" ry="40" fill="#f5f0e8"/>
</svg>
</div>
<figcaption>סגול נועז</figcaption>
</figure>
<figure class="gallery-item gallery-item--wide">
<div class="gallery-visual">
<svg viewBox="0 0 400 200" role="img" aria-label="תסרוקת כלה רומנטית עם פרחים">
<defs>
<linearGradient id="g3" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#d4a574"/>
<stop offset="100%" stop-color="#a67c52"/>
</linearGradient>
</defs>
<rect width="400" height="200" fill="var(--surface-alt)"/>
<ellipse cx="200" cy="90" rx="55" ry="65" fill="#f5f0e8"/>
<path d="M140 70 Q120 40 150 25 Q200 5 250 25 Q280 40 260 70" fill="url(#g3)"/>
<ellipse cx="200" cy="95" rx="42" ry="50" fill="#f5f0e8"/>
<circle cx="170" cy="45" r="8" fill="#fff" opacity="0.6"/>
<circle cx="200" cy="35" r="6" fill="#fff" opacity="0.6"/>
<circle cx="230" cy="45" r="8" fill="#fff" opacity="0.6"/>
</svg>
</div>
<figcaption>תסרוקת כלה</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-visual">
<svg viewBox="0 0 200 200" role="img" aria-label="בלייאז׳ טבעי בגווני זהב">
<defs>
<linearGradient id="g4" x1="0%" y1="100%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#8b7355"/>
<stop offset="50%" stop-color="#c9a961"/>
<stop offset="100%" stop-color="#f4e4ba"/>
</linearGradient>
</defs>
<rect width="200" height="200" fill="var(--surface-alt)"/>
<ellipse cx="100" cy="85" rx="45" ry="55" fill="#f5f0e8"/>
<path d="M55 80 Q45 110 55 160 Q70 195 100 200 Q130 195 145 160 Q155 110 145 80 Q130 50 100 45 Q70 50 55 80" fill="url(#g4)"/>
<ellipse cx="100" cy="90" rx="32" ry="40" fill="#f5f0e8"/>
</svg>
</div>
<figcaption>בלייאז׳ טבעי</figcaption>
</figure>
<figure class="gallery-item">
<div class="gallery-visual">
<svg viewBox="0 0 200 200" role="img" aria-label="החלקה יפנית שיער חלק ומבריק">
<rect width="200" height="200" fill="var(--surface-alt)"/>
<ellipse cx="100" cy="85" rx="45" ry="55" fill="#f5f0e8"/>
<path d="M55 65 L55 180 Q77 195 100 195 Q123 195 145 180 L145 65 Q130 50 100 45 Q70 50 55 65" fill="#1a1a1a"/>
<ellipse cx="100" cy="90" rx="32" ry="40" fill="#f5f0e8"/>
</svg>
</div>
<figcaption>החלקה יפנית</figcaption>
</figure>
</div>
</div>
</section>
<section id="booking" class="booking">
<div class="container">
<div class="booking-layout">
<div class="booking-info">
<header class="section-header section-header--start">
<span class="section-number">03</span>
<h2 class="section-title">קביעת תור</h2>
<p class="section-desc">מלאו את הפרטים ונחזור אליכם תוך 3 שעות לאישור. או פשוט התקשרו.</p>
</header>
<div class="booking-features">
<div class="feature">
<svg viewBox="0 0 40 40" aria-hidden="true">
<circle cx="20" cy="20" r="18" stroke="currentColor" stroke-width="1.5" fill="none"/>
<path d="M20 10 L20 22 L28 26" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
<div>
<h4>שעות פעילות</h4>
<p>א׳-ה׳: 9:00-20:00<br>ו׳: 8:00-14:00</p>
</div>
</div>
<div class="feature">
<svg viewBox="0 0 40 40" aria-hidden="true">
<path d="M20 5 C10 5 5 12 5 20 C5 30 20 38 20 38 C20 38 35 30 35 20 C35 12 30 5 20 5Z" stroke="currentColor" stroke-width="1.5" fill="none"/>
<circle cx="20" cy="20" r="5" stroke="currentColor" stroke-width="1.5" fill="none"/>
</svg>
<div>
<h4>כתובת</h4>
<p>רחוב רוטשילד 45<br>פתח תקווה</p>
</div>
</div>
<div class="feature">
<svg viewBox="0 0 40 40" aria-hidden="true">
<path d="M35 28.5v3a2 2 0 0 1-2.18 2A18 18 0 0 1 5 11.18 2 2 0 0 1 7 9h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L11 17a14 14 0 0 0 6 6l1.36-1.36a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 25 24h3a2 2 0 0 1 2 1.72v2.78z" stroke="currentColor" stroke-width="1.5" fill="none"/>
</svg>
<div>
<h4>טלפון</h4>
<p><a href="tel:054-9876543" class="feature-link">054-9876543</a></p>
</div>
</div>
</div>
</div>
<form class="booking-form" id="bookingForm" novalidate>
<div class="form-group">
<label for="name">שם מלא <span class="required">*</span></label>
<input type="text" id="name" name="name" required autocomplete="name">
<span class="error-message" id="name-error"></span>
</div>
<div class="form-group">
<label for="phone">טלפון <span class="required">*</span></label>
<input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr" placeholder="050-0000000">
<span class="error-message" id="phone-error"></span>
</div>
<div class="form-group">
<label for="service">שירות מבוקש <span class="required">*</span></label>
<select id="service" name="service" required>
<option value="">בחרו שירות</option>
<option value="haircut">תספורת עיצוב</option>
<option value="color">צביעה וגוונים</option>
<option value="treatment">טיפולי שיקום</option>
<option value="styling">פן והחלקות</option>
<option value="extensions">תוספות שיער</option>
<option value="bridal">עיצוב כלות</option>
</select>
<span class="error-message" id="service-error"></span>
</div>
<div class="form-row">
<div class="form-group">
<label for="date">תאריך מבוקש <span class="required">*</span></label>
<input type="date" id="date" name="date" required>
<span class="error-message" id="date-error"></span>
</div>
<div class="form-group">
<label for="time">שעה מועדפת <span class="required">*</span></label>
<select id="time" name="time" required>
<option value="">בחרו שעה</option>
<option value="09:00">09:00</option>
<option value="10:00">10:00</option>
<option value="11:00">11:00</option>
<option value="12:00">12:00</option>
<option value="13:00">13:00</option>
<option value="14:00">14:00</option>
<option value="15:00">15:00</option>
<option value="16:00">16:00</option>
<option value="17:00">17:00</option>
<option value="18:00">18:00</option>
<option value="19:00">19:00</option>
</select>
<span class="error-message" id="time-error"></span>
</div>
</div>
<div class="form-group">
<label for="notes">הערות (לא חובה)</label>
<textarea id="notes" name="notes" rows="3" placeholder="ספרו לנו מה חשוב לכם..."></textarea>
</div>
<button type="submit" class="btn btn-primary btn-full">שליחת בקשה</button>
</form>
</div>
</div>
</section>
<section id="contact" class="contact">
<div class="container">
<div class="contact-layout">
<div class="contact-content">
<header class="section-header section-header--start">
<span class="section-number">04</span>
<h2 class="section-title">שאלות?</h2>
<p class="section-desc">שלחו הודעה ונחזור אליכם. או פשוט בואו לבקר — הקפה עלינו.</p>
</header>
<form class="contact-form" id="contactForm" novalidate>
<div class="form-group">
<label for="contactName">שם <span class="required">*</span></label>
<input type="text" id="contactName" name="name" required autocomplete="name">
<span class="error-message" id="contactName-error"></span>
</div>
<div class="form-group">
<label for="contactEmail">אימייל <span class="required">*</span></label>
<input type="email" id="contactEmail" name="email" required autocomplete="email" dir="ltr" placeholder="you@example.com">
<span class="error-message" id="contactEmail-error"></span>
</div>
<div class="form-group">
<label for="contactMessage">הודעה <span class="required">*</span></label>
<textarea id="contactMessage" name="message" rows="4" required placeholder="מה תרצו לשאול?"></textarea>
<span class="error-message" id="contactMessage-error"></span>
</div>
<button type="submit" class="btn btn-primary">שליחת הודעה</button>
</form>
</div>
<div class="contact-map">
<div class="map-embed">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3380.5!2d34.8869!3d32.0889!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzLCsDA1JzIwLjAiTiAzNMKwNTMnMTMuMCJF!5e0!3m2!1siw!2sil!4v1"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
title="מפת הגעה לסטודיו מראה, רחוב רוטשילד 45 פתח תקווה">
</iframe>
<p>רחוב רוטשילד 45, פתח תקווה</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer">
<div class="container">
<div class="footer-content">
<div class="footer-brand">
<a href="#hero" class="logo">
<svg class="logo-icon" viewBox="0 0 50 50" aria-hidden="true">
<circle cx="25" cy="25" r="23" fill="none" stroke="currentColor" stroke-width="1.5"/>
<path d="M15 38 Q25 10 35 38" stroke="currentColor" stroke-width="2" fill="none"/>
</svg>
<span>סטודיו מראה</span>
</a>
<p>רחוב רוטשילד 45, פתח תקווה</p>
<p><a href="tel:054-9876543" class="footer-phone">054-9876543</a></p>
</div>
<nav class="footer-nav" aria-label="ניווט תחתון">
<a href="#services">שירותים</a>
<a href="#gallery">גלריה</a>
<a href="#booking">תיאום תור</a>
<a href="#contact">צור קשר</a>
</nav>
</div>
<div class="footer-bottom">
<p>© <span id="currentYear"></span> סטודיו מראה. כל הזכויות שמורות.</p>
</div>
</div>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
<script src="script.js"></script>
</body>
</html>
+289
View File
@@ -0,0 +1,289 @@
(function() {
'use strict';
// Set current year in footer
const yearEl = document.getElementById('currentYear');
if (yearEl) {
yearEl.textContent = new Date().getFullYear();
}
// Check for reduced motion preference
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
// Mobile Navigation
const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');
if (navToggle && navMenu) {
navToggle.addEventListener('click', () => {
const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
navToggle.setAttribute('aria-expanded', !isExpanded);
navToggle.setAttribute('aria-label', isExpanded ? 'פתיחת תפריט ניווט' : 'סגירת תפריט ניווט');
navMenu.classList.toggle('active');
});
// Close menu when clicking a link
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navToggle.setAttribute('aria-expanded', 'false');
navToggle.setAttribute('aria-label', 'פתיחת תפריט ניווט');
navMenu.classList.remove('active');
});
});
// Close menu on escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && navMenu.classList.contains('active')) {
navToggle.setAttribute('aria-expanded', 'false');
navToggle.setAttribute('aria-label', 'פתיחת תפריט ניווט');
navMenu.classList.remove('active');
navToggle.focus();
}
});
}
// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
const href = this.getAttribute('href');
if (href === '#') return;
const target = document.querySelector(href);
if (target) {
e.preventDefault();
target.scrollIntoView({
behavior: prefersReducedMotion ? 'auto' : 'smooth',
block: 'start'
});
// Set focus to target for accessibility
target.setAttribute('tabindex', '-1');
target.focus({ preventScroll: true });
}
});
});
// Toast notification
function showToast(message, type = 'success') {
const toast = document.getElementById('toast');
if (!toast) return;
toast.textContent = message;
toast.className = 'toast show ' + type;
setTimeout(() => {
toast.classList.remove('show');
}, 4000);
}
// Form validation helpers
function showError(inputId, message) {
const input = document.getElementById(inputId);
const errorEl = document.getElementById(inputId + '-error');
if (input) {
input.classList.add('error');
input.setAttribute('aria-invalid', 'true');
input.setAttribute('aria-describedby', inputId + '-error');
}
if (errorEl) {
errorEl.textContent = message;
}
}
function clearError(inputId) {
const input = document.getElementById(inputId);
const errorEl = document.getElementById(inputId + '-error');
if (input) {
input.classList.remove('error');
input.removeAttribute('aria-invalid');
input.removeAttribute('aria-describedby');
}
if (errorEl) {
errorEl.textContent = '';
}
}
function clearAllErrors(form) {
form.querySelectorAll('.error').forEach(el => el.classList.remove('error'));
form.querySelectorAll('.error-message').forEach(el => el.textContent = '');
form.querySelectorAll('[aria-invalid]').forEach(el => {
el.removeAttribute('aria-invalid');
el.removeAttribute('aria-describedby');
});
}
// Set minimum date for booking
const dateInput = document.getElementById('date');
if (dateInput) {
const today = new Date();
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const year = tomorrow.getFullYear();
const month = String(tomorrow.getMonth() + 1).padStart(2, '0');
const day = String(tomorrow.getDate()).padStart(2, '0');
dateInput.setAttribute('min', `${year}-${month}-${day}`);
// Set max date to 3 months from now
const maxDate = new Date(today);
maxDate.setMonth(maxDate.getMonth() + 3);
const maxYear = maxDate.getFullYear();
const maxMonth = String(maxDate.getMonth() + 1).padStart(2, '0');
const maxDay = String(maxDate.getDate()).padStart(2, '0');
dateInput.setAttribute('max', `${maxYear}-${maxMonth}-${maxDay}`);
}
// Phone validation (Israeli format)
function isValidPhone(phone) {
const cleaned = phone.replace(/[\s\-]/g, '');
return /^0[2-9]\d{7,8}$/.test(cleaned);
}
// Booking Form
const bookingForm = document.getElementById('bookingForm');
if (bookingForm) {
bookingForm.addEventListener('submit', function(e) {
e.preventDefault();
clearAllErrors(this);
const formData = new FormData(this);
const data = Object.fromEntries(formData.entries());
let hasError = false;
// Validate required fields
if (!data.name.trim()) {
showError('name', 'נא להזין שם');
hasError = true;
}
if (!data.phone.trim()) {
showError('phone', 'נא להזין טלפון');
hasError = true;
} else if (!isValidPhone(data.phone)) {
showError('phone', 'נא להזין מספר טלפון תקין');
hasError = true;
}
if (!data.service) {
showError('service', 'נא לבחור שירות');
hasError = true;
}
if (!data.date) {
showError('date', 'נא לבחור תאריך');
hasError = true;
}
if (!data.time) {
showError('time', 'נא לבחור שעה');
hasError = true;
}
if (hasError) {
showToast('נא לתקן את השגיאות בטופס', 'error');
// Focus first error
const firstError = this.querySelector('.error');
if (firstError) firstError.focus();
return;
}
// Simulate form submission
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'שולח...';
submitBtn.disabled = true;
setTimeout(() => {
showToast('הבקשה נשלחה! נחזור אליכם תוך 3 שעות.', 'success');
this.reset();
submitBtn.textContent = originalText;
submitBtn.disabled = false;
}, 1200);
});
// Clear errors on input
bookingForm.querySelectorAll('input, select, textarea').forEach(input => {
input.addEventListener('input', () => {
clearError(input.id);
});
});
}
// Contact Form
const contactForm = document.getElementById('contactForm');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
clearAllErrors(this);
const formData = new FormData(this);
const data = Object.fromEntries(formData.entries());
let hasError = false;
if (!data.name.trim()) {
showError('contactName', 'נא להזין שם');
hasError = true;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!data.email.trim()) {
showError('contactEmail', 'נא להזין אימייל');
hasError = true;
} else if (!emailRegex.test(data.email)) {
showError('contactEmail', 'נא להזין אימייל תקין');
hasError = true;
}
if (!data.message.trim()) {
showError('contactMessage', 'נא להזין הודעה');
hasError = true;
}
if (hasError) {
showToast('נא לתקן את השגיאות בטופס', 'error');
const firstError = this.querySelector('.error');
if (firstError) firstError.focus();
return;
}
// Simulate form submission
const submitBtn = this.querySelector('button[type="submit"]');
const originalText = submitBtn.textContent;
submitBtn.textContent = 'שולח...';
submitBtn.disabled = true;
setTimeout(() => {
showToast('ההודעה נשלחה! תודה על פנייתכם.', 'success');
this.reset();
submitBtn.textContent = originalText;
submitBtn.disabled = false;
}, 1200);
});
// Clear errors on input
contactForm.querySelectorAll('input, textarea').forEach(input => {
input.addEventListener('input', () => {
clearError(input.id);
});
});
}
// Header background on scroll
const header = document.querySelector('.site-header');
let ticking = false;
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(() => {
if (window.pageYOffset > 50) {
header.style.background = 'rgba(15, 15, 15, 0.98)';
} else {
header.style.background = 'rgba(15, 15, 15, 0.92)';
}
ticking = false;
});
ticking = true;
}
}, { passive: true });
})();
+925
View File
@@ -0,0 +1,925 @@
:root {
--bg: #0f0f0f;
--surface: #1a1a1a;
--surface-alt: #242424;
--text: #f5f0e8;
--text-muted: #b5b0a8;
--gold: #c9a961;
--gold-dark: #8b7355;
--gold-light: #f4e4ba;
--accent: #c9a961;
--error: #ef4444;
--success: #22c55e;
--font-body: 'Heebo', sans-serif;
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 1.5rem;
--space-lg: 2rem;
--space-xl: 3rem;
--space-2xl: 5rem;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation: none !important;
transition: none !important;
}
}
body {
font-family: var(--font-body);
font-size: 1rem;
font-weight: 400;
line-height: 1.6;
color: var(--text);
background-color: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Skip link */
.skip-link {
position: absolute;
top: -100%;
inset-inline-start: var(--space-md);
background: var(--gold);
color: var(--bg);
padding: var(--space-sm) var(--space-md);
border-radius: var(--radius-sm);
font-weight: 500;
z-index: 9999;
transition: top var(--transition);
}
.skip-link:focus {
top: var(--space-sm);
}
.container {
width: 100%;
max-width: 1100px;
margin-inline: auto;
padding-inline: var(--space-md);
}
/* Typography */
h1, h2, h3, h4 {
font-family: var(--font-body);
font-weight: 600;
line-height: 1.2;
}
h1 {
font-size: clamp(2.5rem, 8vw, 4.5rem);
}
h2 {
font-size: clamp(1.75rem, 4vw, 2.5rem);
}
h3 {
font-size: clamp(1.125rem, 2.5vw, 1.375rem);
}
a {
color: inherit;
text-decoration: none;
}
img, svg {
display: block;
max-width: 100%;
}
/* Focus styles */
:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-xs);
padding: 0.875rem var(--space-md);
font-family: var(--font-body);
font-size: 1rem;
font-weight: 500;
border: 2px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
}
.btn-primary {
background: linear-gradient(135deg, var(--gold), var(--gold-dark));
color: var(--bg);
border-color: var(--gold);
}
.btn-primary:hover,
.btn-primary:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(201, 169, 97, 0.35);
}
.btn-primary:active {
transform: translateY(0);
}
.btn-secondary {
background: transparent;
color: var(--text);
border: 2px solid var(--text-muted);
}
.btn-secondary:hover,
.btn-secondary:focus-visible {
border-color: var(--gold);
color: var(--gold);
background: rgba(201, 169, 97, 0.08);
}
.btn-full {
width: 100%;
}
/* Header */
.site-header {
position: fixed;
top: 0;
inset-inline: 0;
z-index: 1000;
background: rgba(15, 15, 15, 0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(201, 169, 97, 0.1);
}
.nav-container {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 1100px;
margin-inline: auto;
padding: var(--space-sm) var(--space-md);
}
.logo {
display: flex;
align-items: center;
gap: var(--space-xs);
font-size: 1.125rem;
font-weight: 600;
color: var(--gold);
}
.logo-icon {
width: 36px;
height: 36px;
color: var(--gold);
}
.nav-toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: var(--space-xs);
background: transparent;
border: none;
cursor: pointer;
}
.nav-toggle span {
display: block;
width: 24px;
height: 2px;
background: var(--text);
transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
.nav-menu {
display: none;
list-style: none;
position: absolute;
top: 100%;
inset-inline: 0;
background: var(--surface);
padding: var(--space-md);
flex-direction: column;
gap: var(--space-xs);
}
.nav-menu.active {
display: flex;
}
.nav-menu a {
display: block;
padding: var(--space-sm);
font-weight: 400;
border-radius: var(--radius-sm);
transition: color var(--transition), background var(--transition);
}
.nav-menu a:hover,
.nav-menu a:focus-visible {
color: var(--gold);
background: rgba(201, 169, 97, 0.08);
}
@media (min-width: 768px) {
.nav-toggle {
display: none;
}
.nav-menu {
display: flex;
position: static;
flex-direction: row;
background: transparent;
padding: 0;
gap: var(--space-sm);
}
.nav-menu a {
padding: var(--space-xs) var(--space-sm);
}
}
/* Hero */
.hero {
position: relative;
min-height: 100vh;
min-height: 100dvh;
display: grid;
grid-template-columns: 1fr;
align-items: center;
padding-top: 80px;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-gradient {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 20%, rgba(201, 169, 97, 0.12) 0%, transparent 50%),
radial-gradient(ellipse at 70% 80%, rgba(139, 115, 85, 0.08) 0%, transparent 50%);
}
.hero-pattern {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0.6;
}
.hero-content {
position: relative;
z-index: 1;
padding: var(--space-xl) var(--space-md);
max-width: 600px;
margin-inline: auto;
text-align: center;
}
.hero-eyebrow {
font-size: 0.9375rem;
font-weight: 500;
color: var(--gold);
margin-bottom: var(--space-sm);
}
.hero-title {
margin-bottom: var(--space-md);
}
.title-line {
display: block;
}
.title-accent {
background: linear-gradient(135deg, var(--gold), var(--gold-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-desc {
font-size: 1.125rem;
color: var(--text-muted);
margin-bottom: var(--space-lg);
max-width: 480px;
margin-inline: auto;
line-height: 1.7;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
justify-content: center;
}
.hero-visual {
display: none;
}
@media (min-width: 1024px) {
.hero {
grid-template-columns: 1.2fr 0.8fr;
}
.hero-content {
text-align: start;
padding-inline-start: var(--space-xl);
padding-inline-end: var(--space-md);
margin-inline: 0;
max-width: 640px;
}
.hero-desc {
margin-inline: 0;
font-size: 1.25rem;
}
.hero-actions {
justify-content: flex-start;
}
.hero-visual {
display: flex;
justify-content: center;
align-items: center;
padding: var(--space-xl);
}
.hero-illustration {
width: 100%;
max-width: 260px;
}
}
/* Sections */
section {
padding: var(--space-2xl) 0;
}
.section-header {
text-align: center;
margin-bottom: var(--space-xl);
}
.section-header--start {
text-align: start;
}
.section-number {
display: inline-block;
font-size: 0.8125rem;
font-weight: 500;
color: var(--gold);
letter-spacing: 0.05em;
margin-bottom: var(--space-xs);
}
.section-title {
margin-bottom: var(--space-sm);
}
.section-desc {
color: var(--text-muted);
max-width: 520px;
line-height: 1.6;
}
.section-header:not(.section-header--start) .section-desc {
margin-inline: auto;
}
/* Services */
.services {
background: var(--surface);
}
.services-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
.service-card {
background: var(--bg);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-lg);
padding: var(--space-lg);
transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.service-card:hover,
.service-card:focus-within {
border-color: rgba(201, 169, 97, 0.3);
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.service-card--highlight {
background: linear-gradient(135deg, rgba(201, 169, 97, 0.1), rgba(139, 115, 85, 0.05));
border-color: rgba(201, 169, 97, 0.25);
}
.service-card--accent {
border-color: rgba(201, 169, 97, 0.25);
}
.service-icon {
width: 52px;
height: 52px;
margin-bottom: var(--space-md);
color: var(--gold);
}
.service-card h3 {
margin-bottom: var(--space-xs);
}
.service-card p {
color: var(--text-muted);
margin-bottom: var(--space-md);
font-size: 0.9375rem;
line-height: 1.6;
}
.service-price {
display: inline-block;
font-size: 0.875rem;
font-weight: 500;
color: var(--gold);
}
@media (min-width: 600px) {
.services-grid {
grid-template-columns: repeat(2, 1fr);
}
.service-card--highlight {
grid-column: span 2;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
gap: 0 var(--space-md);
align-items: start;
}
.service-card--highlight .service-icon {
grid-row: 1 / 4;
width: 64px;
height: 64px;
margin-bottom: 0;
}
.service-card--highlight h3 {
grid-column: 2;
}
.service-card--highlight p {
grid-column: 2;
}
.service-card--highlight .service-price {
grid-column: 2;
}
}
@media (min-width: 900px) {
.services-grid {
grid-template-columns: repeat(3, 1fr);
}
.service-card--highlight {
grid-column: span 2;
}
.service-card--accent {
grid-row: span 1;
}
}
/* Gallery */
.gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.gallery-item {
position: relative;
border-radius: var(--radius-md);
overflow: hidden;
}
.gallery-visual {
aspect-ratio: 1;
background: var(--surface);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--transition);
}
.gallery-visual svg {
width: 100%;
height: 100%;
}
.gallery-item:hover .gallery-visual,
.gallery-item:focus-within .gallery-visual {
transform: scale(1.03);
}
.gallery-item figcaption {
position: absolute;
bottom: 0;
inset-inline: 0;
padding: var(--space-sm) var(--space-md);
background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
font-size: 0.875rem;
font-weight: 500;
}
.gallery-item--wide {
grid-column: span 2;
}
.gallery-item--wide .gallery-visual {
aspect-ratio: 2/1;
}
@media (min-width: 768px) {
.gallery-grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--space-md);
}
.gallery-item--wide {
grid-column: span 2;
}
}
/* Booking */
.booking {
background: var(--surface);
}
.booking-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
}
.booking-features {
display: flex;
flex-direction: column;
gap: var(--space-md);
margin-top: var(--space-lg);
}
.feature {
display: flex;
gap: var(--space-md);
align-items: flex-start;
}
.feature svg {
flex-shrink: 0;
width: 40px;
height: 40px;
color: var(--gold);
}
.feature h4 {
font-size: 0.9375rem;
font-weight: 500;
margin-bottom: 2px;
}
.feature p {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.5;
}
.feature-link {
color: var(--gold);
transition: opacity var(--transition);
}
.feature-link:hover {
opacity: 0.8;
}
.booking-form {
background: var(--bg);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-lg);
padding: var(--space-lg);
}
.form-group {
margin-bottom: var(--space-md);
}
.form-group label {
display: block;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: var(--space-xs);
}
.required {
color: var(--gold);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.875rem var(--space-sm);
font-family: var(--font-body);
font-size: 1rem;
color: var(--text);
background: var(--surface);
border: 2px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-muted);
opacity: 0.6;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}
.form-group input.error,
.form-group select.error,
.form-group textarea.error {
border-color: var(--error);
}
.form-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b5b0a8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: left 12px center;
padding-inline-end: var(--space-sm);
padding-inline-start: 40px;
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
.error-message {
display: none;
font-size: 0.8125rem;
color: var(--error);
margin-top: var(--space-xs);
}
.error-message:not(:empty) {
display: block;
}
@media (min-width: 900px) {
.booking-layout {
grid-template-columns: 1fr 1.1fr;
align-items: start;
}
}
/* Contact */
.contact-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-xl);
align-items: start;
}
.contact-form {
background: var(--surface);
border-radius: var(--radius-lg);
padding: var(--space-lg);
}
.contact-map {
display: none;
}
.map-embed {
background: var(--surface-alt);
border-radius: var(--radius-lg);
overflow: hidden;
}
.map-embed iframe {
width: 100%;
height: 300px;
border: 0;
display: block;
}
.map-embed p {
padding: var(--space-sm) var(--space-md);
color: var(--text-muted);
font-size: 0.875rem;
text-align: center;
background: var(--surface);
}
@media (min-width: 900px) {
.contact-layout {
grid-template-columns: 1fr 1fr;
}
.contact-map {
display: block;
}
.map-embed iframe {
height: 100%;
min-height: 360px;
}
}
/* Footer */
.site-footer {
background: var(--surface);
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding: var(--space-xl) 0 var(--space-lg);
}
.footer-content {
display: flex;
flex-direction: column;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.footer-brand p {
margin-top: var(--space-xs);
font-size: 0.875rem;
color: var(--text-muted);
}
.footer-phone {
color: var(--gold);
transition: opacity var(--transition);
}
.footer-phone:hover {
opacity: 0.8;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
}
.footer-nav a {
font-size: 0.875rem;
color: var(--text-muted);
padding: var(--space-xs);
margin: calc(var(--space-xs) * -1);
border-radius: var(--radius-sm);
transition: color var(--transition);
}
.footer-nav a:hover,
.footer-nav a:focus-visible {
color: var(--gold);
}
.footer-bottom {
padding-top: var(--space-md);
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.footer-bottom p {
font-size: 0.75rem;
color: var(--text-muted);
}
@media (min-width: 768px) {
.footer-content {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
}
/* Toast */
.toast {
position: fixed;
bottom: var(--space-lg);
inset-inline-start: var(--space-md);
inset-inline-end: var(--space-md);
background: var(--surface);
border: 1px solid var(--gold);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
font-size: 0.9375rem;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity var(--transition), visibility var(--transition);
z-index: 2000;
text-align: center;
}
@media (min-width: 600px) {
.toast {
inset-inline-start: 50%;
inset-inline-end: auto;
transform: translateX(50%);
max-width: 400px;
}
}
.toast.show {
opacity: 1;
visibility: visible;
}
.toast.success {
border-color: var(--success);
color: var(--success);
}
.toast.error {
border-color: var(--error);
color: var(--error);
}