Initial AI-generated site
This commit is contained in:
+489
@@ -0,0 +1,489 @@
|
||||
<!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'><circle cx='50' cy='50' r='45' fill='%23d4a574'/><path d='M30 70 Q50 20 70 70' stroke='%23fff' stroke-width='3' 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>
|
||||
<nav class="main-nav" role="navigation" aria-label="ניווט ראשי">
|
||||
<div class="nav-container">
|
||||
<a href="#hero" class="logo" aria-label="תוספות שיער ליאור - חזרה לראש העמוד">
|
||||
<svg width="40" height="40" viewBox="0 0 100 100" aria-hidden="true">
|
||||
<circle cx="50" cy="50" r="45" fill="var(--gold)"/>
|
||||
<path d="M30 70 Q50 20 70 70" stroke="var(--cream)" stroke-width="4" fill="none"/>
|
||||
</svg>
|
||||
<span>ליאור</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="תפריט ניווט">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul id="nav-menu" class="nav-links">
|
||||
<li><a href="#services">שירותים</a></li>
|
||||
<li><a href="#gallery">גלריה</a></li>
|
||||
<li><a href="#process">תהליך העבודה</a></li>
|
||||
<li><a href="#booking">קביעת תור</a></li>
|
||||
<li><a href="#contact">צרי קשר</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main>
|
||||
<section id="hero" class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<p class="hero-tagline">סטודיו לתוספות שיער בבת ים</p>
|
||||
<h1>השיער שתמיד<br>חלמת עליו</h1>
|
||||
<p class="hero-subtitle">תוספות שיער טבעי באיכות פרימיום, התאמה אישית מדויקת, ותוצאות שמדברות בעד עצמן. כבר 8 שנים שאנחנו הופכות חלומות למציאות.</p>
|
||||
<div class="hero-cta">
|
||||
<a href="#booking" class="btn btn-primary">קביעת תור</a>
|
||||
<a href="tel:052-7654321" class="btn btn-secondary">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<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>
|
||||
052-765-4321
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-image">
|
||||
<div class="hero-image-frame">
|
||||
<div class="hero-image-placeholder">
|
||||
<svg viewBox="0 0 400 500" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="hairGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#8b7355"/>
|
||||
<stop offset="100%" style="stop-color:#5a4a3a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="skinGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#e8c9a8"/>
|
||||
<stop offset="100%" style="stop-color:#d4a574"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<ellipse cx="200" cy="180" rx="85" ry="100" fill="url(#skinGrad)"/>
|
||||
<path d="M115 150 Q100 80 150 50 Q200 20 250 50 Q300 80 285 150 Q290 200 280 280 Q260 350 200 380 Q140 350 120 280 Q110 200 115 150" fill="url(#hairGrad)"/>
|
||||
<ellipse cx="200" cy="160" rx="70" ry="85" fill="url(#skinGrad)"/>
|
||||
<path d="M120 400 Q200 350 280 400 L300 500 L100 500 Z" fill="#d4a574" opacity="0.3"/>
|
||||
</svg>
|
||||
<span class="image-label">תמונה של ליאור</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-accent hero-accent-1"></div>
|
||||
<div class="hero-accent hero-accent-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="services">
|
||||
<div class="section-header reveal">
|
||||
<span class="section-number">01</span>
|
||||
<h2>השירותים שלנו</h2>
|
||||
<p class="section-intro">כל אישה ראויה לשיער שגורם לה להרגיש מדהים. אנחנו מתמחות במגוון טכניקות מתקדמות להארכה והעשרת שיער.</p>
|
||||
</div>
|
||||
|
||||
<div class="services-grid">
|
||||
<article class="service-card service-card-featured reveal" style="--delay: 0.1s">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<circle cx="40" cy="25" r="15" fill="none" stroke="var(--gold)" stroke-width="2"/>
|
||||
<path d="M25 40 Q40 80 55 40" stroke="var(--gold)" stroke-width="2" fill="none"/>
|
||||
<line x1="40" y1="40" x2="40" y2="70" stroke="var(--gold)" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>תוספות שיער טבעי</h3>
|
||||
<p>שיער אנושי באיכות הגבוהה ביותר, מראה טבעי לחלוטין שמשתלב בצורה מושלמת עם השיער שלך. אנחנו עובדות רק עם שיער רמי 100% — בלי פשרות.</p>
|
||||
<ul class="service-features">
|
||||
<li>שיער רמי 100%</li>
|
||||
<li>אורך 40-70 ס״מ לבחירה</li>
|
||||
<li>התאמת צבע מדויקת</li>
|
||||
<li>אחריות לשנה</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="service-card reveal" style="--delay: 0.2s">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<rect x="20" y="15" width="40" height="50" rx="5" fill="none" stroke="var(--gold)" stroke-width="2"/>
|
||||
<line x1="30" y1="30" x2="50" y2="30" stroke="var(--gold)" stroke-width="2"/>
|
||||
<line x1="30" y1="40" x2="50" y2="40" stroke="var(--gold)" stroke-width="2"/>
|
||||
<line x1="30" y1="50" x2="45" y2="50" stroke="var(--gold)" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>הדבקת שיער (טייפ)</h3>
|
||||
<p>טכניקת הדבקה מתקדמת וחדשנית — בטוחה לשיער, נוחה לשימוש יומיומי ומחזיקה 6-8 שבועות.</p>
|
||||
<ul class="service-features">
|
||||
<li>התקנה מהירה (שעה-שעתיים)</li>
|
||||
<li>ללא נזק לשיער הטבעי</li>
|
||||
<li>קלות להסרה ולהחלפה</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="service-card reveal" style="--delay: 0.3s">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<circle cx="40" cy="40" r="25" fill="none" stroke="var(--gold)" stroke-width="2"/>
|
||||
<path d="M40 20 L40 40 L55 50" stroke="var(--gold)" stroke-width="2" fill="none"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>תחזוקה והרמה</h3>
|
||||
<p>שירות תחזוקה שוטף להארכת חיי התוספות. מומלץ כל 6-8 שבועות לשמירה על מראה מושלם.</p>
|
||||
<ul class="service-features">
|
||||
<li>הרמה והדבקה מחדש</li>
|
||||
<li>בדיקת מצב השיער</li>
|
||||
<li>ייעוץ טיפוח אישי</li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="service-card service-card-cta reveal" style="--delay: 0.4s">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<path d="M40 10 L50 35 L75 35 L55 50 L62 75 L40 60 L18 75 L25 50 L5 35 L30 35 Z" fill="none" stroke="var(--gold)" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>ייעוץ ראשוני חינם</h3>
|
||||
<p>לא בטוחה מה מתאים לך? בואי לפגישת ייעוץ ללא התחייבות. נבדוק את השיער, נדבר על הציפיות, ונבנה יחד תוכנית.</p>
|
||||
<a href="#booking" class="service-cta">קביעת ייעוץ חינם</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="gallery" class="gallery">
|
||||
<div class="section-header reveal">
|
||||
<span class="section-number">02</span>
|
||||
<h2>לפני ואחרי</h2>
|
||||
<p class="section-intro">התוצאות מדברות בעד עצמן. הנה כמה מהטרנספורמציות האחרונות שלנו.</p>
|
||||
</div>
|
||||
|
||||
<div class="gallery-grid">
|
||||
<figure class="gallery-item gallery-item-large reveal" style="--delay: 0.1s">
|
||||
<div class="gallery-comparison">
|
||||
<div class="comparison-side comparison-before">
|
||||
<div class="comparison-image">
|
||||
<img src="https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=400&h=500&fit=crop&crop=top" alt="לפני - שיער קצר ודליל" loading="lazy">
|
||||
</div>
|
||||
<span class="comparison-label">לפני</span>
|
||||
</div>
|
||||
<div class="comparison-side comparison-after">
|
||||
<div class="comparison-image">
|
||||
<img src="https://images.unsplash.com/photo-1519699047748-de8e457a634e?w=400&h=500&fit=crop&crop=top" alt="אחרי - שיער ארוך ומלא" loading="lazy">
|
||||
</div>
|
||||
<span class="comparison-label">אחרי</span>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption>
|
||||
<strong>מיכל, 28</strong>
|
||||
<span>הארכה מ-20 ל-55 ס״מ + הוספת נפח</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="gallery-item reveal" style="--delay: 0.2s">
|
||||
<div class="gallery-comparison">
|
||||
<div class="comparison-side comparison-before">
|
||||
<div class="comparison-image">
|
||||
<img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=500&fit=crop&crop=top" alt="לפני - שיער דליל" loading="lazy">
|
||||
</div>
|
||||
<span class="comparison-label">לפני</span>
|
||||
</div>
|
||||
<div class="comparison-side comparison-after">
|
||||
<div class="comparison-image">
|
||||
<img src="https://images.unsplash.com/photo-1531746020798-e6953c6e8e04?w=400&h=500&fit=crop&crop=top" alt="אחרי - שיער סוחף" loading="lazy">
|
||||
</div>
|
||||
<span class="comparison-label">אחרי</span>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption>
|
||||
<strong>נועה, 34</strong>
|
||||
<span>העשרת נפח — 100 גרם תוספות</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<figure class="gallery-item reveal" style="--delay: 0.3s">
|
||||
<div class="gallery-comparison">
|
||||
<div class="comparison-side comparison-before">
|
||||
<div class="comparison-image">
|
||||
<img src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?w=400&h=500&fit=crop&crop=top" alt="לפני - שיער בינוני" loading="lazy">
|
||||
</div>
|
||||
<span class="comparison-label">לפני</span>
|
||||
</div>
|
||||
<div class="comparison-side comparison-after">
|
||||
<div class="comparison-image">
|
||||
<img src="https://images.unsplash.com/photo-1526047932273-341f2a7631f9?w=400&h=500&fit=crop&crop=top" alt="אחרי - שיער יוקרתי" loading="lazy">
|
||||
</div>
|
||||
<span class="comparison-label">אחרי</span>
|
||||
</div>
|
||||
</div>
|
||||
<figcaption>
|
||||
<strong>שירן, 31</strong>
|
||||
<span>הארכה + בלונד מושלם</span>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
|
||||
<div class="gallery-stats reveal">
|
||||
<div class="stat">
|
||||
<span class="stat-number" data-target="500">0</span>
|
||||
<span class="stat-plus">+</span>
|
||||
<span class="stat-label">לקוחות מרוצות</span>
|
||||
</div>
|
||||
<div class="stat-divider" aria-hidden="true"></div>
|
||||
<div class="stat">
|
||||
<span class="stat-number" data-target="8">0</span>
|
||||
<span class="stat-label">שנות ניסיון</span>
|
||||
</div>
|
||||
<div class="stat-divider" aria-hidden="true"></div>
|
||||
<div class="stat">
|
||||
<span class="stat-number" data-target="100">0</span>
|
||||
<span class="stat-percent">%</span>
|
||||
<span class="stat-label">שיער טבעי</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="process" class="process">
|
||||
<div class="section-header reveal">
|
||||
<span class="section-number">03</span>
|
||||
<h2>איך זה עובד</h2>
|
||||
<p class="section-intro">תהליך פשוט ונעים שמתחיל בייעוץ אישי ומסתיים בשיער החלומות שלך.</p>
|
||||
</div>
|
||||
|
||||
<div class="process-timeline">
|
||||
<div class="process-step reveal" style="--delay: 0.1s">
|
||||
<div class="step-marker">1</div>
|
||||
<div class="step-content">
|
||||
<h3>ייעוץ אישי</h3>
|
||||
<p>נפגש לשיחת היכרות, נבין את הצרכים שלך ונתאים את הפתרון המושלם — סוג השיער, האורך, הצבע והטכניקה.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step reveal" style="--delay: 0.2s">
|
||||
<div class="step-marker">2</div>
|
||||
<div class="step-content">
|
||||
<h3>בחירת השיער</h3>
|
||||
<p>נבחר יחד את השיער הטבעי באיכות הגבוהה ביותר, עם התאמת צבע מדויקת שתשתלב בצורה מושלמת.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step reveal" style="--delay: 0.3s">
|
||||
<div class="step-marker">3</div>
|
||||
<div class="step-content">
|
||||
<h3>התקנה מקצועית</h3>
|
||||
<p>ההתקנה מתבצעת בסטודיו הנעים שלנו, בתשומת לב לכל פרט, תוך שמירה על בריאות השיער הטבעי.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="process-step reveal" style="--delay: 0.4s">
|
||||
<div class="step-marker">4</div>
|
||||
<div class="step-content">
|
||||
<h3>ליווי ותחזוקה</h3>
|
||||
<p>אנחנו כאן בשבילך גם אחרי — הדרכה לטיפוח נכון ותחזוקה שוטפת לשמירה על מראה מושלם.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="booking" class="booking">
|
||||
<div class="booking-container">
|
||||
<div class="booking-info reveal">
|
||||
<span class="section-number">04</span>
|
||||
<h2>קביעת תור</h2>
|
||||
<p>מוכנה להתחיל? מלאי את הפרטים ואנחנו נחזור אליך תוך 24 שעות לתיאום.</p>
|
||||
|
||||
<div class="booking-features">
|
||||
<div class="booking-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="2" aria-hidden="true">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||||
</svg>
|
||||
<span>אישור תוך 24 שעות</span>
|
||||
</div>
|
||||
<div class="booking-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="2" aria-hidden="true">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||||
</svg>
|
||||
<span>ביטול חינם עד 24 שעות לפני</span>
|
||||
</div>
|
||||
<div class="booking-feature">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="var(--gold)" stroke-width="2" aria-hidden="true">
|
||||
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
|
||||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||||
</svg>
|
||||
<span>ייעוץ ראשוני ללא עלות</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="booking-contact">
|
||||
<p>מעדיפה לדבר? התקשרי עכשיו:</p>
|
||||
<a href="tel:052-7654321" class="booking-phone">052-765-4321</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="booking-form reveal" style="--delay: 0.2s" id="bookingForm">
|
||||
<div class="form-group">
|
||||
<label for="service-type">סוג פגישה</label>
|
||||
<select id="service-type" name="service-type" required>
|
||||
<option value="">בחרי סוג פגישה</option>
|
||||
<option value="consultation">ייעוץ ראשוני (חינם)</option>
|
||||
<option value="extensions">התקנת תוספות</option>
|
||||
<option value="tape">הדבקת שיער</option>
|
||||
<option value="maintenance">תחזוקה והרמה</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="booking-date">תאריך מבוקש</label>
|
||||
<input type="date" id="booking-date" name="date" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="booking-time">שעה מועדפת</label>
|
||||
<select id="booking-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="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>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="booking-name">שם מלא</label>
|
||||
<input type="text" id="booking-name" name="name" required autocomplete="name">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="booking-phone">טלפון</label>
|
||||
<input type="tel" id="booking-phone" name="phone" required placeholder="050-000-0000" dir="ltr" autocomplete="tel">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="booking-notes">הערות (אופציונלי)</label>
|
||||
<textarea id="booking-notes" name="notes" rows="3" placeholder="יש משהו שחשוב לך לציין?"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-full">שליחת בקשה</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<div class="contact-container">
|
||||
<div class="contact-main reveal">
|
||||
<span class="section-number">05</span>
|
||||
<h2>הסטודיו שלנו</h2>
|
||||
<p class="contact-intro">ממוקם בלב בת ים, באווירה נעימה ואינטימית. חניה חינם ברחוב.</p>
|
||||
|
||||
<div class="contact-details">
|
||||
<a href="https://maps.google.com/?q=רחוב+העצמאות+50+בת+ים" target="_blank" rel="noopener" class="contact-item contact-item-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
|
||||
<circle cx="12" cy="10" r="3"/>
|
||||
</svg>
|
||||
<div>
|
||||
<strong>כתובת</strong>
|
||||
<span>רחוב העצמאות 50, בת ים</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a href="tel:052-7654321" class="contact-item contact-item-link">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<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>
|
||||
<div>
|
||||
<strong>טלפון</strong>
|
||||
<span dir="ltr">052-765-4321</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="contact-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
<div>
|
||||
<strong>שעות פעילות</strong>
|
||||
<span>א׳-ה׳: 09:00-19:00<br>ו׳: 09:00-14:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form reveal" style="--delay: 0.2s" id="contactForm">
|
||||
<h3>שלחי הודעה</h3>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-name">שם</label>
|
||||
<input type="text" id="contact-name" name="name" required autocomplete="name">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-phone">טלפון</label>
|
||||
<input type="tel" id="contact-phone" name="phone" required placeholder="050-000-0000" dir="ltr" autocomplete="tel">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="contact-message">הודעה</label>
|
||||
<textarea id="contact-message" name="message" rows="4" required placeholder="במה נוכל לעזור?"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary btn-full">שליחה</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="main-footer">
|
||||
<div class="footer-container">
|
||||
<div class="footer-brand">
|
||||
<svg width="50" height="50" viewBox="0 0 100 100" aria-hidden="true">
|
||||
<circle cx="50" cy="50" r="45" fill="var(--gold)"/>
|
||||
<path d="M30 70 Q50 20 70 70" stroke="var(--cream)" stroke-width="4" fill="none"/>
|
||||
</svg>
|
||||
<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>
|
||||
|
||||
<div class="footer-contact">
|
||||
<a href="tel:052-7654321" dir="ltr">052-765-4321</a>
|
||||
<span>רחוב העצמאות 50, בת ים</span>
|
||||
</div>
|
||||
|
||||
<p class="footer-copy">© 2024 תוספות שיער ליאור. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="toast" id="toast" role="alert" aria-live="polite"></div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,206 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Navigation toggle
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (navToggle && navLinks) {
|
||||
navToggle.addEventListener('click', () => {
|
||||
const isOpen = navToggle.getAttribute('aria-expanded') === 'true';
|
||||
navToggle.setAttribute('aria-expanded', !isOpen);
|
||||
navLinks.classList.toggle('open');
|
||||
document.body.style.overflow = isOpen ? '' : 'hidden';
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Close on escape key
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && navLinks.classList.contains('open')) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
navToggle.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Reveal animations
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
if (!prefersReducedMotion) {
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
revealElements.forEach(el => revealObserver.observe(el));
|
||||
} else {
|
||||
document.querySelectorAll('.reveal').forEach(el => {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
}
|
||||
|
||||
// Stats counter animation
|
||||
const stats = document.querySelectorAll('.stat-number');
|
||||
|
||||
if (!prefersReducedMotion && stats.length) {
|
||||
const statsObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const target = parseInt(entry.target.getAttribute('data-target'), 10);
|
||||
animateCounter(entry.target, target);
|
||||
statsObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
|
||||
stats.forEach(stat => statsObserver.observe(stat));
|
||||
} else {
|
||||
stats.forEach(stat => {
|
||||
stat.textContent = stat.getAttribute('data-target');
|
||||
});
|
||||
}
|
||||
|
||||
function animateCounter(element, target) {
|
||||
let current = 0;
|
||||
const duration = 2000;
|
||||
const step = target / (duration / 16);
|
||||
|
||||
function update() {
|
||||
current += step;
|
||||
if (current < target) {
|
||||
element.textContent = Math.floor(current);
|
||||
requestAnimationFrame(update);
|
||||
} else {
|
||||
element.textContent = target;
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
// Set minimum date for booking form
|
||||
const dateInput = document.getElementById('booking-date');
|
||||
if (dateInput) {
|
||||
const today = new Date();
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
const minDate = tomorrow.toISOString().split('T')[0];
|
||||
dateInput.setAttribute('min', minDate);
|
||||
}
|
||||
|
||||
// Form handling
|
||||
const bookingForm = document.getElementById('bookingForm');
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
function showToast(message) {
|
||||
const toast = document.getElementById('toast');
|
||||
if (toast) {
|
||||
toast.textContent = message;
|
||||
toast.classList.add('show');
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
}, 4000);
|
||||
}
|
||||
}
|
||||
|
||||
function validatePhone(phone) {
|
||||
const cleaned = phone.replace(/[-\s]/g, '');
|
||||
return /^0[0-9]{9}$/.test(cleaned);
|
||||
}
|
||||
|
||||
if (bookingForm) {
|
||||
bookingForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const phone = bookingForm.querySelector('[name="phone"]').value;
|
||||
if (!validatePhone(phone)) {
|
||||
showToast('מספר הטלפון לא תקין. נא להזין מספר ישראלי.');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(bookingForm);
|
||||
const data = Object.fromEntries(formData);
|
||||
|
||||
// Simulate form submission
|
||||
console.log('Booking request:', data);
|
||||
|
||||
showToast('הבקשה נשלחה בהצלחה! נחזור אליך תוך 24 שעות.');
|
||||
bookingForm.reset();
|
||||
});
|
||||
}
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const phone = contactForm.querySelector('[name="phone"]').value;
|
||||
if (!validatePhone(phone)) {
|
||||
showToast('מספר הטלפון לא תקין. נא להזין מספר ישראלי.');
|
||||
return;
|
||||
}
|
||||
|
||||
const formData = new FormData(contactForm);
|
||||
const data = Object.fromEntries(formData);
|
||||
|
||||
// Simulate form submission
|
||||
console.log('Contact message:', data);
|
||||
|
||||
showToast('ההודעה נשלחה! נחזור אליך בהקדם.');
|
||||
contactForm.reset();
|
||||
});
|
||||
}
|
||||
|
||||
// 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();
|
||||
const nav = document.querySelector('.main-nav');
|
||||
const navHeight = nav ? nav.offsetHeight : 0;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Nav shadow on scroll
|
||||
const nav = document.querySelector('.main-nav');
|
||||
|
||||
if (nav) {
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.pageYOffset > 100) {
|
||||
nav.style.boxShadow = 'var(--shadow-sm)';
|
||||
} else {
|
||||
nav.style.boxShadow = 'none';
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user