Initial AI-generated site
This commit is contained in:
+334
@@ -0,0 +1,334 @@
|
||||
<!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="סטודיו לשיער ליאור בפתח תקווה - עיצוב שיער, צביעה מקצועית וטיפולי כלות. קבעו תור עוד היום.">
|
||||
<meta property="og:title" content="סטודיו לשיער ליאור | פתח תקווה">
|
||||
<meta property="og:description" content="עיצוב שיער, צביעה וטיפולי כלות בפתח תקווה.">
|
||||
<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'><text y='.9em' font-size='90'>✂️</text></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>
|
||||
<nav class="nav" role="navigation" aria-label="ניווט ראשי">
|
||||
<div class="nav__container">
|
||||
<a href="#hero" class="nav__logo">
|
||||
<span class="nav__logo-mark">ל</span>
|
||||
<span class="nav__logo-text">סטודיו ליאור</span>
|
||||
</a>
|
||||
<button class="nav__toggle" aria-label="פתח תפריט" aria-expanded="false" aria-controls="main-menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul class="nav__menu" id="main-menu">
|
||||
<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>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header id="hero" class="hero">
|
||||
<div class="hero__content">
|
||||
<p class="hero__tagline reveal">סטודיו לשיער בפתח תקווה</p>
|
||||
<h1 class="hero__title reveal">
|
||||
<span class="hero__title-line">היופי שלך,</span>
|
||||
<span class="hero__title-line hero__title-line--accent">האומנות שלנו</span>
|
||||
</h1>
|
||||
<p class="hero__description reveal">מקצועיות, תשוקה ותשומת לב לכל פרט. עיצוב שיער, צביעות ברמה הגבוהה ביותר וטיפולי כלות מושלמים.</p>
|
||||
<div class="hero__actions reveal">
|
||||
<a href="#booking" class="hero__cta">קביעת תור</a>
|
||||
<a href="tel:+972501234567" class="hero__phone" aria-label="התקשרו אלינו">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span dir="ltr">050-123-4567</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero__visual" aria-hidden="true">
|
||||
<div class="hero__shape hero__shape--1"></div>
|
||||
<div class="hero__shape hero__shape--2"></div>
|
||||
<div class="hero__shape hero__shape--3"></div>
|
||||
<div class="hero__icon">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<circle cx="20" cy="60" r="12" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="60" cy="60" r="12" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M20 48 L40 15 L60 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="40" cy="32" r="3" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section id="services" class="services">
|
||||
<div class="services__header reveal">
|
||||
<h2 class="section-title">השירותים שלנו</h2>
|
||||
<p class="section-subtitle">מגוון טיפולים מקצועיים בהתאמה אישית</p>
|
||||
</div>
|
||||
<div class="services__grid">
|
||||
<article class="service-card reveal">
|
||||
<div class="service-card__icon">
|
||||
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M24 4c-8 0-14 8-14 18s6 18 14 22c8-4 14-12 14-22S32 4 24 4" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M14 20c4-6 16-6 20 0" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-card__title">עיצוב שיער</h3>
|
||||
<p class="service-card__description">תספורות מעוצבות לנשים וגברים בהתאמה לצורת הפנים ולסגנון האישי.</p>
|
||||
<span class="service-card__price">החל מ-80 ₪</span>
|
||||
</article>
|
||||
<article class="service-card service-card--featured reveal">
|
||||
<div class="service-card__badge">הכי מבוקש</div>
|
||||
<div class="service-card__icon">
|
||||
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||
<circle cx="16" cy="16" r="6" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="32" cy="20" r="8" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="20" cy="32" r="10" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-card__title">צביעה וגוונים</h3>
|
||||
<p class="service-card__description">בלונד מושלם, אומברה, בלאיאז׳ וגוונים טבעיים עם צבעים איכותיים.</p>
|
||||
<span class="service-card__price">החל מ-200 ₪</span>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<div class="service-card__icon">
|
||||
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M24 6l4 12h12l-10 7 4 13-10-8-10 8 4-13-10-7h12z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-card__title">טיפולי כלות</h3>
|
||||
<p class="service-card__description">חבילות כלה מלאות: ניסוי מקדים, עיצוב ליום החתונה ותוספות שיער.</p>
|
||||
<span class="service-card__price">החל מ-800 ₪</span>
|
||||
</article>
|
||||
<article class="service-card reveal">
|
||||
<div class="service-card__icon">
|
||||
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||
<rect x="12" y="16" width="24" height="20" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M16 16v-4a8 8 0 0116 0v4" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<line x1="20" y1="26" x2="28" y2="26" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="service-card__title">טיפולי שיער</h3>
|
||||
<p class="service-card__description">החלקות, קרטין, שיקום שיער פגום ומסכות הזנה לברק ובריאות.</p>
|
||||
<span class="service-card__price">החל מ-150 ₪</span>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="gallery">
|
||||
<div class="gallery__header reveal">
|
||||
<h2 class="section-title">מהעבודות שלנו</h2>
|
||||
<p class="section-subtitle">תוצאות אמיתיות של לקוחות מרוצות</p>
|
||||
</div>
|
||||
<div class="gallery__grid">
|
||||
<figure class="gallery__item gallery__item--large reveal">
|
||||
<div class="gallery__visual" style="--hue: 35;">
|
||||
<svg viewBox="0 0 100 140" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="hsl(35, 60%, 50%)"/>
|
||||
<stop offset="100%" stop-color="hsl(25, 50%, 35%)"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<ellipse cx="50" cy="50" rx="30" ry="45" fill="url(#g1)" opacity="0.7"/>
|
||||
<path d="M20 40 Q50 5 80 40 Q85 80 50 110 Q15 80 20 40" fill="url(#g1)" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption class="gallery__caption">בלאיאז׳ זהוב</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item reveal">
|
||||
<div class="gallery__visual" style="--hue: 0;">
|
||||
<svg viewBox="0 0 100 100" aria-hidden="true">
|
||||
<circle cx="50" cy="50" r="35" fill="hsl(0, 50%, 40%)" opacity="0.6"/>
|
||||
<circle cx="35" cy="45" r="20" fill="hsl(15, 60%, 50%)" opacity="0.5"/>
|
||||
<circle cx="60" cy="55" r="25" fill="hsl(350, 45%, 55%)" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption class="gallery__caption">צבעי סתיו</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item reveal">
|
||||
<div class="gallery__visual" style="--hue: 45;">
|
||||
<svg viewBox="0 0 100 100" aria-hidden="true">
|
||||
<path d="M50 15l5 15h16l-13 10 5 15-13-10-13 10 5-15-13-10h16z" fill="hsl(45, 70%, 60%)" opacity="0.7"/>
|
||||
<ellipse cx="50" cy="70" rx="25" ry="15" fill="hsl(30, 40%, 45%)" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption class="gallery__caption">תסרוקת כלה</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item gallery__item--wide reveal">
|
||||
<div class="gallery__visual" style="--hue: 200;">
|
||||
<svg viewBox="0 0 200 100" aria-hidden="true">
|
||||
<ellipse cx="50" cy="50" rx="35" ry="30" fill="hsl(200, 30%, 35%)" opacity="0.6"/>
|
||||
<ellipse cx="100" cy="50" rx="30" ry="35" fill="hsl(210, 35%, 45%)" opacity="0.5"/>
|
||||
<ellipse cx="155" cy="50" rx="40" ry="30" fill="hsl(195, 25%, 55%)" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption class="gallery__caption">אומברה מודרני</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item reveal">
|
||||
<div class="gallery__visual" style="--hue: 220;">
|
||||
<svg viewBox="0 0 100 100" aria-hidden="true">
|
||||
<rect x="25" y="30" width="50" height="50" rx="4" fill="hsl(220, 20%, 30%)" opacity="0.6"/>
|
||||
<polygon points="50,15 65,35 35,35" fill="hsl(220, 25%, 45%)" opacity="0.7"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption class="gallery__caption">פייד קלאסי</figcaption>
|
||||
</figure>
|
||||
<figure class="gallery__item reveal">
|
||||
<div class="gallery__visual" style="--hue: 320;">
|
||||
<svg viewBox="0 0 100 100" aria-hidden="true">
|
||||
<line x1="15" y1="25" x2="85" y2="25" stroke="hsl(320, 40%, 50%)" stroke-width="6" stroke-linecap="round"/>
|
||||
<line x1="10" y1="45" x2="90" y2="45" stroke="hsl(330, 35%, 45%)" stroke-width="6" stroke-linecap="round"/>
|
||||
<line x1="15" y1="65" x2="85" y2="65" stroke="hsl(310, 30%, 55%)" stroke-width="6" stroke-linecap="round"/>
|
||||
<line x1="20" y1="85" x2="80" y2="85" stroke="hsl(325, 35%, 60%)" stroke-width="6" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<figcaption class="gallery__caption">החלקה יפנית</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="booking" class="booking">
|
||||
<div class="booking__container">
|
||||
<div class="booking__info reveal">
|
||||
<h2 class="section-title">קביעת תור</h2>
|
||||
<p class="booking__text">השאירו פרטים ונחזור אליכם תוך מספר שעות לאישור. מעדיפים לדבר? התקשרו ישירות.</p>
|
||||
<a href="tel:+972501234567" class="booking__phone">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
<span dir="ltr">050-123-4567</span>
|
||||
</a>
|
||||
<ul class="booking__features">
|
||||
<li class="booking__feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>אישור תוך שעות</span>
|
||||
</li>
|
||||
<li class="booking__feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>ללא התחייבות</span>
|
||||
</li>
|
||||
<li class="booking__feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M20 6L9 17l-5-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span>ייעוץ ראשוני חינם</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<form class="booking__form reveal" action="#" method="post">
|
||||
<div class="form-group">
|
||||
<label for="name">שם מלא <span class="form-required">*</span></label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name" aria-required="true">
|
||||
<span class="form-error" role="alert" aria-live="polite"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">טלפון <span class="form-required">*</span></label>
|
||||
<input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr" placeholder="050-000-0000" aria-required="true" pattern="[0-9\-\s]+">
|
||||
<span class="form-error" role="alert" aria-live="polite"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="service">סוג שירות <span class="form-required">*</span></label>
|
||||
<select id="service" name="service" required aria-required="true">
|
||||
<option value="">בחרו שירות</option>
|
||||
<option value="haircut">עיצוב שיער</option>
|
||||
<option value="color">צביעה וגוונים</option>
|
||||
<option value="bridal">טיפולי כלות</option>
|
||||
<option value="treatment">טיפולי שיער</option>
|
||||
<option value="other">אחר</option>
|
||||
</select>
|
||||
<span class="form-error" role="alert" aria-live="polite"></span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="date">תאריך מבוקש <span class="form-required">*</span></label>
|
||||
<input type="date" id="date" name="date" required aria-describedby="date-hint" aria-required="true">
|
||||
<span id="date-hint" class="form-hint">נתאם אתכם לשעה המדויקת</span>
|
||||
<span class="form-error" role="alert" aria-live="polite"></span>
|
||||
</div>
|
||||
<div class="form-group form-group--full">
|
||||
<label for="message">הערות נוספות <span class="form-optional">(לא חובה)</span></label>
|
||||
<textarea id="message" name="message" rows="3"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="form-submit">שליחת בקשה</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<div class="contact__container">
|
||||
<div class="contact__info reveal">
|
||||
<h2 class="section-title">בואו לבקר</h2>
|
||||
<p class="contact__text">הסטודיו שלנו ממוקם במרכז פתח תקווה, קרוב לכיכר המייסדים. חניה זמינה ברחובות הסמוכים.</p>
|
||||
<address class="contact__details">
|
||||
<div class="contact__item">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<circle cx="12" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<span>רחוב רוטשילד 42, פתח תקווה</span>
|
||||
</div>
|
||||
<div class="contact__item">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<a href="tel:+972501234567"><span dir="ltr">050-123-4567</span></a>
|
||||
</div>
|
||||
<div class="contact__item">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="1.5"/>
|
||||
<path d="M12 6v6l4 2" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<div class="contact__hours">
|
||||
<span>א׳–ה׳: 09:00–20:00</span>
|
||||
<span>ו׳: 08:00–14:00</span>
|
||||
<span>שבת: סגור</span>
|
||||
</div>
|
||||
</div>
|
||||
</address>
|
||||
</div>
|
||||
<div class="contact__map reveal">
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3380.8!2d34.8869!3d32.0892!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x151d4a0000000000%3A0x0!2zMzLCsDA1JzIxIk4gMzTCsDUzJzEzIkU!5e0!3m2!1siw!2sil!4v1"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style="border:0;"
|
||||
allowfullscreen=""
|
||||
loading="lazy"
|
||||
referrerpolicy="no-referrer-when-downgrade"
|
||||
title="מפת המיקום של סטודיו ליאור בפתח תקווה">
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="footer__container">
|
||||
<div class="footer__brand">
|
||||
<span class="footer__logo-mark">ל</span>
|
||||
<span>סטודיו ליאור</span>
|
||||
</div>
|
||||
<nav class="footer__nav" aria-label="ניווט תחתון">
|
||||
<a href="#services">שירותים</a>
|
||||
<a href="#gallery">גלריה</a>
|
||||
<a href="#booking">קביעת תור</a>
|
||||
<a href="#contact">צור קשר</a>
|
||||
</nav>
|
||||
<p class="footer__copyright">© 2025 סטודיו לשיער ליאור. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,195 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Navigation scroll effect
|
||||
const nav = document.querySelector('.nav');
|
||||
|
||||
function handleNavScroll() {
|
||||
if (window.scrollY > 50) {
|
||||
nav.classList.add('nav--scrolled');
|
||||
} else {
|
||||
nav.classList.remove('nav--scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleNavScroll, { passive: true });
|
||||
handleNavScroll();
|
||||
|
||||
// Mobile menu toggle
|
||||
const navToggle = document.querySelector('.nav__toggle');
|
||||
const navMenu = document.querySelector('.nav__menu');
|
||||
|
||||
if (navToggle && navMenu) {
|
||||
navToggle.addEventListener('click', function() {
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
this.setAttribute('aria-expanded', !isExpanded);
|
||||
navMenu.classList.toggle('nav__menu--open');
|
||||
});
|
||||
|
||||
navMenu.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', function() {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navMenu.classList.remove('nav__menu--open');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && navMenu.classList.contains('nav__menu--open')) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navMenu.classList.remove('nav__menu--open');
|
||||
navToggle.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll reveal animation
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
|
||||
if (prefersReducedMotion.matches) {
|
||||
revealElements.forEach(el => {
|
||||
el.classList.add('reveal--visible');
|
||||
});
|
||||
} else if ('IntersectionObserver' in window) {
|
||||
const revealObserver = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('reveal--visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -40px 0px'
|
||||
}
|
||||
);
|
||||
|
||||
revealElements.forEach(el => {
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
} else {
|
||||
revealElements.forEach(el => {
|
||||
el.classList.add('reveal--visible');
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
|
||||
if (targetId === '#') return;
|
||||
|
||||
const target = document.querySelector(targetId);
|
||||
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
target.scrollIntoView({
|
||||
behavior: prefersReducedMotion.matches ? 'auto' : 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
|
||||
target.setAttribute('tabindex', '-1');
|
||||
target.focus({ preventScroll: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Form validation and submission handling
|
||||
const bookingForm = document.querySelector('.booking__form');
|
||||
|
||||
if (bookingForm) {
|
||||
const fields = bookingForm.querySelectorAll('input[required], select[required]');
|
||||
|
||||
// Real-time validation
|
||||
fields.forEach(field => {
|
||||
field.addEventListener('blur', function() {
|
||||
validateField(this);
|
||||
});
|
||||
|
||||
field.addEventListener('input', function() {
|
||||
if (this.classList.contains('error')) {
|
||||
validateField(this);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function validateField(field) {
|
||||
const errorEl = field.parentElement.querySelector('.form-error');
|
||||
let message = '';
|
||||
|
||||
if (!field.value.trim()) {
|
||||
message = 'שדה חובה';
|
||||
} else if (field.type === 'tel' && !/^[0-9\-\s]{9,14}$/.test(field.value.replace(/\s/g, ''))) {
|
||||
message = 'מספר טלפון לא תקין';
|
||||
} else if (field.type === 'date') {
|
||||
const selectedDate = new Date(field.value);
|
||||
const today = new Date();
|
||||
today.setHours(0, 0, 0, 0);
|
||||
if (selectedDate < today) {
|
||||
message = 'יש לבחור תאריך עתידי';
|
||||
}
|
||||
}
|
||||
|
||||
if (message) {
|
||||
field.classList.add('error');
|
||||
if (errorEl) errorEl.textContent = message;
|
||||
return false;
|
||||
} else {
|
||||
field.classList.remove('error');
|
||||
if (errorEl) errorEl.textContent = '';
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
bookingForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
let isValid = true;
|
||||
fields.forEach(field => {
|
||||
if (!validateField(field)) {
|
||||
isValid = false;
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
const firstError = bookingForm.querySelector('.error');
|
||||
if (firstError) firstError.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const submitButton = this.querySelector('.form-submit');
|
||||
const originalText = submitButton.textContent;
|
||||
|
||||
submitButton.textContent = 'שולח...';
|
||||
submitButton.disabled = true;
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
submitButton.textContent = 'נשלח בהצלחה ✓';
|
||||
submitButton.style.background = 'hsl(145, 45%, 40%)';
|
||||
|
||||
this.reset();
|
||||
|
||||
setTimeout(() => {
|
||||
submitButton.textContent = originalText;
|
||||
submitButton.style.background = '';
|
||||
submitButton.disabled = false;
|
||||
}, 3000);
|
||||
}, 1200);
|
||||
});
|
||||
|
||||
// Set minimum date to today
|
||||
const dateInput = document.getElementById('date');
|
||||
if (dateInput) {
|
||||
const today = new Date();
|
||||
const yyyy = today.getFullYear();
|
||||
const mm = String(today.getMonth() + 1).padStart(2, '0');
|
||||
const dd = String(today.getDate()).padStart(2, '0');
|
||||
dateInput.setAttribute('min', `${yyyy}-${mm}-${dd}`);
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user