Initial AI-generated site
This commit is contained in:
+383
@@ -0,0 +1,383 @@
|
||||
<!doctype html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>אינסטלטור בפתח תקווה | שירותי אינסטלציה 24/7 | צלול</title>
|
||||
<meta name="description" content="שירותי אינסטלציה מקצועיים בפתח תקווה. תיקוני צנרת דחופים, התקנות, ושירות 24 שעות ביממה. התקשרו עכשיו: 052-555-1234">
|
||||
<meta property="og:title" content="צלול | אינסטלטור בפתח תקווה 24/7">
|
||||
<meta property="og:description" content="שירותי אינסטלציה מקצועיים בפתח תקווה. זמינים 24/7 לכל תקלה.">
|
||||
<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='%230a2540'/><path d='M50 20 Q50 50 50 60 Q40 70 50 80 Q60 70 50 60' fill='%2300d4ff'/></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&family=Rubik:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="grain-overlay" aria-hidden="true"></div>
|
||||
|
||||
<header class="site-header">
|
||||
<nav class="nav-container">
|
||||
<a href="#hero" class="logo">
|
||||
<svg class="logo-icon" viewBox="0 0 40 40" aria-hidden="true">
|
||||
<circle cx="20" cy="20" r="18" fill="var(--accent)"/>
|
||||
<path d="M20 8 Q20 20 20 26 Q14 32 20 38 Q26 32 20 26" fill="var(--bg-dark)"/>
|
||||
</svg>
|
||||
<span>צלול אינסטלציה</span>
|
||||
</a>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#services">שירותים</a></li>
|
||||
<li><a href="#areas">אזורי שירות</a></li>
|
||||
<li><a href="#contact">צור קשר</a></li>
|
||||
<li class="mobile-cta"><a href="tel:052-555-1234">052-555-1234</a></li>
|
||||
</ul>
|
||||
<a href="tel:052-555-1234" class="nav-cta nav-phone desktop-only">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true" width="18" height="18">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="currentColor"/>
|
||||
</svg>
|
||||
052-555-1234
|
||||
</a>
|
||||
<button class="mobile-toggle" aria-label="תפריט" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="hero" class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">
|
||||
<span class="pulse"></span>
|
||||
זמינים 24/7
|
||||
</div>
|
||||
<h1>
|
||||
<span class="hero-line">תקלת אינסטלציה?</span>
|
||||
<span class="hero-line hero-accent">אנחנו בדרך.</span>
|
||||
</h1>
|
||||
<p class="hero-sub">שירותי אינסטלציה מקצועיים בפתח תקווה והסביבה. תיקונים דחופים, התקנות, ושירות אמין — בכל שעה.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="tel:052-555-1234" class="btn btn-primary">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="currentColor"/></svg>
|
||||
התקשרו עכשיו
|
||||
</a>
|
||||
<a href="#contact" class="btn btn-ghost">השאירו פרטים</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual" aria-hidden="true">
|
||||
<div class="pipe-system">
|
||||
<svg viewBox="0 0 400 400" class="pipes-svg">
|
||||
<defs>
|
||||
<linearGradient id="pipeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:var(--accent);stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:var(--accent-dim);stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path class="pipe pipe-1" d="M50 200 L150 200 L150 100 L250 100" stroke="url(#pipeGrad)" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="pipe pipe-2" d="M250 100 L250 200 L350 200" stroke="url(#pipeGrad)" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path class="pipe pipe-3" d="M150 200 L150 300 L300 300" stroke="url(#pipeGrad)" stroke-width="12" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle class="joint" cx="150" cy="200" r="8" fill="var(--accent)"/>
|
||||
<circle class="joint" cx="250" cy="100" r="8" fill="var(--accent)"/>
|
||||
<circle class="joint" cx="150" cy="300" r="8" fill="var(--accent)"/>
|
||||
<circle class="drop drop-1" cx="0" cy="0" r="6" fill="var(--water)"/>
|
||||
<circle class="drop drop-2" cx="0" cy="0" r="5" fill="var(--water)"/>
|
||||
<circle class="drop drop-3" cx="0" cy="0" r="4" fill="var(--water)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="services">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">מה אנחנו עושים</span>
|
||||
<h2>שירותים מקצועיים</h2>
|
||||
</div>
|
||||
<div class="services-grid">
|
||||
<article class="service-card service-urgent">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M32 18 L32 34 L44 40" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
|
||||
<circle cx="32" cy="32" r="4" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>תיקונים דחופים 24/7</h3>
|
||||
<p>צינור פרץ בשלוש בלילה? סתימה קשה בשבת? אנחנו זמינים תמיד. צוות מקצועי יגיע אליכם תוך זמן קצר לכל מקרה דחוף.</p>
|
||||
<ul class="service-list">
|
||||
<li><span>פריצת צנרת</span></li>
|
||||
<li><span>סתימות קשות</span></li>
|
||||
<li><span>הצפות</span></li>
|
||||
<li><span>תקלות דוד שמש</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<rect x="16" y="24" width="32" height="24" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M24 24 L24 16 L40 16 L40 24" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="32" cy="36" r="6" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M32 32 L32 40 M28 36 L36 36" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>התקנות אינסטלציה</h3>
|
||||
<p>התקנה מקצועית של כל מערכות האינסטלציה בבית או בעסק. עבודה נקייה, מדויקת, ועם אחריות מלאה.</p>
|
||||
<ul class="service-list">
|
||||
<li><span>כיורים וברזים</span></li>
|
||||
<li><span>אסלות ומקלחונים</span></li>
|
||||
<li><span>מכונות כביסה</span></li>
|
||||
<li><span>מדיחי כלים</span></li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<path d="M12 48 L12 24 L32 8 L52 24 L52 48 L12 48 Z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<rect x="24" y="32" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M32 32 L32 48" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>שיפוצים ושדרוגים</h3>
|
||||
<p>משדרגים את האמבטיה? מחדשים את המטבח? אנחנו נטפל בכל עבודות האינסטלציה במסגרת השיפוץ.</p>
|
||||
<ul class="service-list">
|
||||
<li><span>הנחת צנרת חדשה</span></li>
|
||||
<li><span>העברת נקודות מים</span></li>
|
||||
<li><span>שדרוג מערכות ישנות</span></li>
|
||||
<li><span>אטימה ובידוד</span></li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="32" cy="20" r="12" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M32 32 L32 56" stroke="currentColor" stroke-width="3"/>
|
||||
<path d="M24 44 L40 44" stroke="currentColor" stroke-width="3"/>
|
||||
<path d="M20 56 L44 56" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>איתור נזילות</h3>
|
||||
<p>חשד לנזילה סמויה? בעזרת ציוד מתקדם נאתר את מקור הבעיה במדויק, בלי לפרק את כל הבית.</p>
|
||||
<ul class="service-list">
|
||||
<li><span>מכשירי האזנה</span></li>
|
||||
<li><span>מצלמות תרמיות</span></li>
|
||||
<li><span>בדיקת לחץ</span></li>
|
||||
<li><span>דוח מפורט</span></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats">
|
||||
<div class="stats-inner">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" data-target="15">0</span>
|
||||
<span class="stat-label">שנות ניסיון</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" data-target="2500">0</span>
|
||||
<span class="stat-suffix">+</span>
|
||||
<span class="stat-label">קריאות שירות</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">24/7</span>
|
||||
<span class="stat-label">זמינות מלאה</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-number" data-target="45">0</span>
|
||||
<span class="stat-suffix">דק׳</span>
|
||||
<span class="stat-label">זמן הגעה ממוצע</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="areas" class="areas">
|
||||
<div class="areas-content">
|
||||
<div class="section-header">
|
||||
<span class="section-tag">היכן אנחנו פועלים</span>
|
||||
<h2>אזורי השירות</h2>
|
||||
<p>אנחנו גאים לשרת את תושבי פתח תקווה וכל השכונות והאזורים הסמוכים. בכל מקום שתצטרכו אותנו — נהיה שם.</p>
|
||||
</div>
|
||||
<div class="areas-map" aria-label="מפת אזורי שירות בפתח תקווה">
|
||||
<svg viewBox="0 0 500 400" class="map-svg">
|
||||
<defs>
|
||||
<radialGradient id="mapGlow" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" style="stop-color:var(--accent);stop-opacity:0.3"/>
|
||||
<stop offset="100%" style="stop-color:var(--accent);stop-opacity:0"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle cx="250" cy="200" r="180" fill="url(#mapGlow)"/>
|
||||
<circle cx="250" cy="200" r="120" fill="none" stroke="var(--accent)" stroke-width="1" stroke-dasharray="8 4" class="pulse-ring"/>
|
||||
<circle cx="250" cy="200" r="80" fill="none" stroke="var(--accent)" stroke-width="1" stroke-dasharray="8 4" class="pulse-ring" style="animation-delay: 0.5s"/>
|
||||
<circle cx="250" cy="200" r="40" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<circle cx="250" cy="200" r="12" fill="var(--accent)"/>
|
||||
<text x="250" y="170" text-anchor="middle" fill="var(--accent)" class="map-label map-center">פתח תקווה</text>
|
||||
|
||||
<g class="map-point" style="--delay: 0.1s">
|
||||
<circle cx="320" cy="140" r="6" fill="var(--text-mid)"/>
|
||||
<text x="330" y="145" fill="var(--text-mid)" class="map-label">כפר גנים</text>
|
||||
</g>
|
||||
<g class="map-point" style="--delay: 0.2s">
|
||||
<circle cx="180" cy="130" r="6" fill="var(--text-mid)"/>
|
||||
<text x="140" y="135" fill="var(--text-mid)" class="map-label">אם המושבות</text>
|
||||
</g>
|
||||
<g class="map-point" style="--delay: 0.3s">
|
||||
<circle cx="350" cy="220" r="6" fill="var(--text-mid)"/>
|
||||
<text x="360" y="225" fill="var(--text-mid)" class="map-label">קרית אריה</text>
|
||||
</g>
|
||||
<g class="map-point" style="--delay: 0.4s">
|
||||
<circle cx="150" cy="240" r="6" fill="var(--text-mid)"/>
|
||||
<text x="100" y="245" fill="var(--text-mid)" class="map-label">הדר גנים</text>
|
||||
</g>
|
||||
<g class="map-point" style="--delay: 0.5s">
|
||||
<circle cx="280" cy="300" r="6" fill="var(--text-mid)"/>
|
||||
<text x="290" y="305" fill="var(--text-mid)" class="map-label">כפר אברהם</text>
|
||||
</g>
|
||||
<g class="map-point" style="--delay: 0.6s">
|
||||
<circle cx="200" cy="280" r="6" fill="var(--text-mid)"/>
|
||||
<text x="150" y="285" fill="var(--text-mid)" class="map-label">שיפר</text>
|
||||
</g>
|
||||
<g class="map-point" style="--delay: 0.7s">
|
||||
<circle cx="380" cy="280" r="6" fill="var(--text-mid)"/>
|
||||
<text x="390" y="285" fill="var(--text-mid)" class="map-label">סגולה</text>
|
||||
</g>
|
||||
<g class="map-point" style="--delay: 0.8s">
|
||||
<circle cx="120" cy="180" r="6" fill="var(--text-mid)"/>
|
||||
<text x="70" y="185" fill="var(--text-mid)" class="map-label">נווה עוז</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="areas-list">
|
||||
<h3>שכונות נוספות באזור השירות:</h3>
|
||||
<ul>
|
||||
<li>מרכז העיר</li>
|
||||
<li>עמישב</li>
|
||||
<li>גני הדר</li>
|
||||
<li>רמת ורבר</li>
|
||||
<li>כפר גנים ב׳</li>
|
||||
<li>כפר גנים ג׳</li>
|
||||
<li>ביהח״ר</li>
|
||||
<li>קרול</li>
|
||||
<li>מחנה יהודה</li>
|
||||
<li>בן גוריון</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<div class="contact-inner">
|
||||
<div class="contact-info">
|
||||
<span class="section-tag">בואו נדבר</span>
|
||||
<h2>זקוקים לאינסטלטור?</h2>
|
||||
<p>השאירו פרטים ונחזור אליכם בהקדם, או התקשרו ישירות לקבלת מענה מיידי.</p>
|
||||
|
||||
<a href="tel:052-555-1234" class="contact-phone">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span>052-555-1234</span>
|
||||
</a>
|
||||
|
||||
<div class="contact-features">
|
||||
<div class="feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span>הצעת מחיר ללא התחייבות</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span>מענה תוך שעה בימי עבודה</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span>אחריות על כל העבודות</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form" id="contactForm" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="name">שם מלא</label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
<span class="error-msg" role="alert">
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 4v5M8 11v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
נא להזין שם
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">טלפון</label>
|
||||
<input type="tel" id="phone" name="phone" required autocomplete="tel" pattern="[0-9\-\+\s]{9,}">
|
||||
<span class="error-msg" role="alert">
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 4v5M8 11v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
נא להזין מספר טלפון תקין
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="address">כתובת (אופציונלי)</label>
|
||||
<input type="text" id="address" name="address" autocomplete="street-address">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="service">סוג השירות</label>
|
||||
<select id="service" name="service" required>
|
||||
<option value="">בחרו שירות</option>
|
||||
<option value="urgent">תיקון דחוף</option>
|
||||
<option value="installation">התקנה</option>
|
||||
<option value="leak">איתור נזילה</option>
|
||||
<option value="renovation">שיפוץ</option>
|
||||
<option value="other">אחר</option>
|
||||
</select>
|
||||
<span class="error-msg" role="alert">
|
||||
<svg viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M8 4v5M8 11v1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
|
||||
נא לבחור סוג שירות
|
||||
</span>
|
||||
</div>
|
||||
<div class="form-group form-group-full">
|
||||
<label for="message">תיאור הבעיה</label>
|
||||
<textarea id="message" name="message" rows="4" placeholder="ספרו לנו בקצרה על הבעיה או השירות הנדרש..."></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-submit">
|
||||
<span class="btn-text">שליחת פנייה</span>
|
||||
<span class="btn-loading">שולח...</span>
|
||||
<svg class="btn-success" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="currentColor"/>
|
||||
</svg>
|
||||
</button>
|
||||
<p class="form-note">* זהו אתר לדוגמה. בפועל הפרטים לא נשלחים לשום מקום.</p>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand">
|
||||
<svg class="footer-logo" viewBox="0 0 40 40" aria-hidden="true">
|
||||
<circle cx="20" cy="20" r="18" fill="var(--accent)"/>
|
||||
<path d="M20 8 Q20 20 20 26 Q14 32 20 38 Q26 32 20 26" fill="var(--bg-dark)"/>
|
||||
</svg>
|
||||
<span>צלול אינסטלציה</span>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<a href="#services">שירותים</a>
|
||||
<a href="#areas">אזורי שירות</a>
|
||||
<a href="#contact">צור קשר</a>
|
||||
</nav>
|
||||
<div class="footer-contact">
|
||||
<a href="tel:052-555-1234">052-555-1234</a>
|
||||
<span>פתח תקווה והסביבה</span>
|
||||
</div>
|
||||
<p class="footer-copy">© 2024 צלול אינסטלציה. כל הזכויות שמורות. אתר לדוגמה בלבד.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,221 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Reduced motion check
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Header scroll effect
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
function handleScroll() {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 50) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
|
||||
// Mobile menu toggle
|
||||
const mobileToggle = document.querySelector('.mobile-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
const navCta = document.querySelector('.nav-cta');
|
||||
|
||||
if (mobileToggle && navLinks) {
|
||||
mobileToggle.addEventListener('click', function() {
|
||||
const isExpanded = this.getAttribute('aria-expanded') === 'true';
|
||||
this.setAttribute('aria-expanded', !isExpanded);
|
||||
navLinks.classList.toggle('active');
|
||||
if (navCta) {
|
||||
navCta.classList.toggle('active');
|
||||
}
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
mobileToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('active');
|
||||
if (navCta) {
|
||||
navCta.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Intersection Observer for animations
|
||||
if (!prefersReducedMotion) {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -80px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const animateOnScroll = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
|
||||
// Stagger children if it's a grid
|
||||
if (entry.target.classList.contains('services-grid')) {
|
||||
const cards = entry.target.querySelectorAll('.service-card');
|
||||
cards.forEach((card, index) => {
|
||||
setTimeout(() => {
|
||||
card.classList.add('visible');
|
||||
}, index * 100);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Elements to animate
|
||||
document.querySelectorAll('.service-card, .areas-map, .contact-info, .contact-form').forEach(el => {
|
||||
animateOnScroll.observe(el);
|
||||
});
|
||||
|
||||
// Services grid
|
||||
const servicesGrid = document.querySelector('.services-grid');
|
||||
if (servicesGrid) {
|
||||
animateOnScroll.observe(servicesGrid);
|
||||
}
|
||||
} else {
|
||||
// Show everything immediately if reduced motion is preferred
|
||||
document.querySelectorAll('.service-card, .areas-map, .contact-info, .contact-form').forEach(el => {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
}
|
||||
|
||||
// Counter animation for stats
|
||||
function animateCounter(element, target, duration = 2000) {
|
||||
if (prefersReducedMotion) {
|
||||
element.textContent = target.toLocaleString('he-IL');
|
||||
return;
|
||||
}
|
||||
|
||||
const start = 0;
|
||||
const startTime = performance.now();
|
||||
|
||||
function update(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
const easeOut = 1 - Math.pow(1 - progress, 3);
|
||||
const current = Math.floor(start + (target - start) * easeOut);
|
||||
|
||||
element.textContent = current.toLocaleString('he-IL');
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
// Observe stats section
|
||||
const statsSection = document.querySelector('.stats');
|
||||
if (statsSection) {
|
||||
const statsObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const counters = entry.target.querySelectorAll('.stat-number[data-target]');
|
||||
counters.forEach(counter => {
|
||||
const target = parseInt(counter.dataset.target, 10);
|
||||
animateCounter(counter, target);
|
||||
});
|
||||
statsObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, { threshold: 0.5 });
|
||||
|
||||
statsObserver.observe(statsSection);
|
||||
}
|
||||
|
||||
// Form handling
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Reset errors
|
||||
this.querySelectorAll('.form-group').forEach(group => {
|
||||
group.classList.remove('error');
|
||||
});
|
||||
|
||||
// Validate
|
||||
let isValid = true;
|
||||
const name = this.querySelector('#name');
|
||||
const phone = this.querySelector('#phone');
|
||||
const service = this.querySelector('#service');
|
||||
|
||||
if (!name.value.trim()) {
|
||||
name.closest('.form-group').classList.add('error');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!phone.value.trim() || !/^[0-9\-\+\s]{9,}$/.test(phone.value)) {
|
||||
phone.closest('.form-group').classList.add('error');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!service.value) {
|
||||
service.closest('.form-group').classList.add('error');
|
||||
isValid = false;
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
// Focus first error field
|
||||
const firstError = this.querySelector('.form-group.error input, .form-group.error select');
|
||||
if (firstError) {
|
||||
firstError.focus();
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Submit animation
|
||||
const submitBtn = this.querySelector('.btn-submit');
|
||||
submitBtn.classList.add('loading');
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Simulate submission (demo only)
|
||||
setTimeout(() => {
|
||||
submitBtn.classList.remove('loading');
|
||||
submitBtn.classList.add('success');
|
||||
|
||||
// Reset form after delay
|
||||
setTimeout(() => {
|
||||
contactForm.reset();
|
||||
submitBtn.classList.remove('success');
|
||||
submitBtn.disabled = false;
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
// Remove error state on input
|
||||
contactForm.querySelectorAll('input, select, textarea').forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
this.closest('.form-group').classList.remove('error');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 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 ? 'auto' : 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user