Initial AI-generated site
This commit is contained in:
+393
@@ -0,0 +1,393 @@
|
||||
<!doctype html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>בניית אתרים עם AI | אימייליון</title>
|
||||
<meta name="description" content="אימייליון - סטודיו לבניית אתרים מעוצבים עם בינה מלאכותית. עיצוב ייחודי, חוויות דיגיטליות מרהיבות.">
|
||||
<meta property="og:title" content="בניית אתרים עם AI | אימייליון">
|
||||
<meta property="og:description" content="סטודיו לבניית אתרים מעוצבים עם טכנולוגיות AI מתקדמות">
|
||||
<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='%236C5CE7'/><circle cx='50' cy='50' r='20' fill='%2300F5D4'/></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;700;900&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
<div class="cursor-glow" aria-hidden="true"></div>
|
||||
|
||||
<header class="site-header">
|
||||
<nav class="nav" aria-label="ניווט ראשי">
|
||||
<a href="#" class="logo">
|
||||
<svg class="logo-mark" viewBox="0 0 50 50" aria-hidden="true">
|
||||
<circle cx="25" cy="25" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="25" cy="25" r="8" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="logo-text">אימייליון</span>
|
||||
</a>
|
||||
<ul class="nav-links" id="nav-links">
|
||||
<li><a href="#work">עבודות</a></li>
|
||||
<li><a href="#services">שירותים</a></li>
|
||||
<li><a href="#about">אודות</a></li>
|
||||
<li><a href="#contact" class="nav-cta">בואו נדבר</a></li>
|
||||
</ul>
|
||||
<button class="nav-toggle" aria-label="פתיחת תפריט ניווט" aria-expanded="false" aria-controls="nav-links">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section class="hero" aria-labelledby="hero-title">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge reveal">
|
||||
<span class="badge-dot" aria-hidden="true"></span>
|
||||
סטודיו דיגיטלי
|
||||
</div>
|
||||
<h1 id="hero-title" class="hero-title">
|
||||
<span class="reveal">בונים חוויות</span>
|
||||
<span class="hero-highlight reveal">
|
||||
<span class="highlight-text">דיגיטליות</span>
|
||||
<svg class="highlight-wave" viewBox="0 0 200 20" preserveAspectRatio="none" aria-hidden="true">
|
||||
<path d="M0,10 Q50,0 100,10 T200,10" fill="none" stroke="currentColor" stroke-width="3"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="reveal">מונעות AI</span>
|
||||
</h1>
|
||||
<p class="hero-sub reveal">
|
||||
אנחנו משלבים עיצוב קריאטיבי עם טכנולוגיית בינה מלאכותית ליצירת אתרים שלא רק נראים מדהים — אלא גם עובדים חכם.
|
||||
</p>
|
||||
<div class="hero-actions reveal">
|
||||
<a href="#work" class="btn btn-primary">
|
||||
<span>צפו בעבודות</span>
|
||||
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12H19M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#contact" class="btn btn-ghost">צרו קשר</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual" aria-hidden="true">
|
||||
<div class="orb orb-1"></div>
|
||||
<div class="orb orb-2"></div>
|
||||
<div class="orb orb-3"></div>
|
||||
<div class="grid-bg"></div>
|
||||
</div>
|
||||
<div class="scroll-hint reveal" aria-hidden="true">
|
||||
<span>גללו למטה</span>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 5v14M19 12l-7 7-7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="marquee-section" aria-hidden="true">
|
||||
<div class="marquee">
|
||||
<div class="marquee-content">
|
||||
<span>עיצוב אתרים</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>חנויות אונליין</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>חוויות אינטראקטיביות</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>מיתוג דיגיטלי</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>בינה מלאכותית</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>עיצוב אתרים</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>חנויות אונליין</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>חוויות אינטראקטיביות</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>מיתוג דיגיטלי</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
<span>בינה מלאכותית</span>
|
||||
<span class="marquee-dot">◆</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="work" class="work-section" aria-labelledby="work-title">
|
||||
<header class="section-header">
|
||||
<span class="section-label reveal">תיק עבודות</span>
|
||||
<h2 id="work-title" class="section-title reveal">פרויקטים נבחרים</h2>
|
||||
</header>
|
||||
|
||||
<div class="work-grid">
|
||||
<article class="work-card work-card-featured reveal" tabindex="0">
|
||||
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%)"></div>
|
||||
<div class="work-card-content">
|
||||
<span class="work-category">חנות אונליין</span>
|
||||
<h3 class="work-title"><span lang="en">LUXE</span> — אופנה פרימיום</h3>
|
||||
<p class="work-desc">חנות דיגיטלית עם המלצות מוצרים מבוססות AI והתאמה אישית לכל לקוח</p>
|
||||
</div>
|
||||
<div class="work-card-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 300 200">
|
||||
<rect x="20" y="20" width="120" height="160" rx="8" fill="rgba(255,255,255,0.1)"/>
|
||||
<rect x="160" y="20" width="120" height="75" rx="8" fill="rgba(255,255,255,0.15)"/>
|
||||
<rect x="160" y="105" width="120" height="75" rx="8" fill="rgba(255,255,255,0.08)"/>
|
||||
<circle cx="80" cy="60" r="25" fill="rgba(255,255,255,0.2)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card reveal" tabindex="0">
|
||||
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #2d3436 0%, #636e72 100%)"></div>
|
||||
<div class="work-card-content">
|
||||
<span class="work-category">אתר תדמית</span>
|
||||
<h3 class="work-title">פיננסיה — פינטק</h3>
|
||||
<p class="work-desc">עמוד נחיתה דינמי עם ויזואליזציה של נתונים בזמן אמת</p>
|
||||
</div>
|
||||
<div class="work-card-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 200 150">
|
||||
<path d="M20,120 Q60,80 100,90 T180,60" fill="none" stroke="rgba(255,255,255,0.3)" stroke-width="3"/>
|
||||
<circle cx="100" cy="90" r="8" fill="rgba(255,255,255,0.5)"/>
|
||||
<circle cx="180" cy="60" r="8" fill="rgba(255,255,255,0.5)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card reveal" tabindex="0">
|
||||
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #0984e3 0%, #74b9ff 100%)"></div>
|
||||
<div class="work-card-content">
|
||||
<span class="work-category">פלטפורמה</span>
|
||||
<h3 class="work-title"><span lang="en">DataFlow</span> — אנליטיקס</h3>
|
||||
<p class="work-desc">דשבורד ניהול עם תחזיות מבוססות למידת מכונה</p>
|
||||
</div>
|
||||
<div class="work-card-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 200 150">
|
||||
<rect x="20" y="30" width="50" height="80" rx="4" fill="rgba(255,255,255,0.15)"/>
|
||||
<rect x="80" y="50" width="50" height="60" rx="4" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="140" y="20" width="50" height="90" rx="4" fill="rgba(255,255,255,0.25)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card work-card-wide reveal" tabindex="0">
|
||||
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #d63031 0%, #e17055 100%)"></div>
|
||||
<div class="work-card-content">
|
||||
<span class="work-category">מיתוג דיגיטלי</span>
|
||||
<h3 class="work-title">טעמים — רשת מסעדות</h3>
|
||||
<p class="work-desc">זהות דיגיטלית מלאה כולל אפליקציית הזמנות עם צ׳אטבוט חכם</p>
|
||||
</div>
|
||||
<div class="work-card-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 400 150">
|
||||
<circle cx="80" cy="75" r="40" fill="rgba(255,255,255,0.15)"/>
|
||||
<circle cx="200" cy="75" r="50" fill="rgba(255,255,255,0.1)"/>
|
||||
<circle cx="320" cy="75" r="35" fill="rgba(255,255,255,0.2)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card reveal" tabindex="0">
|
||||
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #00b894 0%, #55efc4 100%)"></div>
|
||||
<div class="work-card-content">
|
||||
<span class="work-category">אתר קטלוג</span>
|
||||
<h3 class="work-title">אומנות ישראלית</h3>
|
||||
<p class="work-desc">גלריה אינטראקטיבית עם חיפוש חכם וניווט ויזואלי</p>
|
||||
</div>
|
||||
<div class="work-card-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 200 150">
|
||||
<rect x="30" y="30" width="60" height="90" rx="4" fill="rgba(0,0,0,0.15)"/>
|
||||
<rect x="110" y="40" width="60" height="70" rx="4" fill="rgba(0,0,0,0.2)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="work-card reveal" tabindex="0">
|
||||
<div class="work-card-bg" style="--gradient: linear-gradient(135deg, #6C5CE7 0%, #a29bfe 100%)"></div>
|
||||
<div class="work-card-content">
|
||||
<span class="work-category">אתר תוכן</span>
|
||||
<h3 class="work-title"><span lang="en">TechPulse</span> — מגזין</h3>
|
||||
<p class="work-desc">פלטפורמת תוכן עם המלצות קריאה מותאמות אישית</p>
|
||||
</div>
|
||||
<div class="work-card-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 200 150">
|
||||
<rect x="20" y="20" width="160" height="20" rx="4" fill="rgba(255,255,255,0.2)"/>
|
||||
<rect x="20" y="50" width="120" height="10" rx="2" fill="rgba(255,255,255,0.15)"/>
|
||||
<rect x="20" y="70" width="140" height="10" rx="2" fill="rgba(255,255,255,0.15)"/>
|
||||
<rect x="20" y="90" width="100" height="10" rx="2" fill="rgba(255,255,255,0.15)"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="services-section" aria-labelledby="services-title">
|
||||
<div class="services-bg" aria-hidden="true">
|
||||
<div class="service-orb"></div>
|
||||
</div>
|
||||
<header class="section-header">
|
||||
<span class="section-label reveal">מה אנחנו עושים</span>
|
||||
<h2 id="services-title" class="section-title reveal">שירותים</h2>
|
||||
</header>
|
||||
|
||||
<div class="services-list">
|
||||
<article class="service-item reveal">
|
||||
<div class="service-number" aria-hidden="true">01</div>
|
||||
<div class="service-content">
|
||||
<h3 class="service-title">עיצוב ופיתוח אתרים</h3>
|
||||
<p class="service-desc">
|
||||
אתרים מעוצבים בקפידה עם קוד נקי, ביצועים גבוהים וחוויית משתמש מושלמת. כל פיקסל במקום.
|
||||
</p>
|
||||
</div>
|
||||
<div class="service-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<rect x="10" y="10" width="80" height="80" rx="8" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<line x1="10" y1="30" x2="90" y2="30" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="25" cy="20" r="4" fill="currentColor"/>
|
||||
<circle cx="40" cy="20" r="4" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="service-item service-item-highlight reveal">
|
||||
<div class="service-number" aria-hidden="true">02</div>
|
||||
<div class="service-content">
|
||||
<h3 class="service-title">חנויות אונליין</h3>
|
||||
<p class="service-desc">
|
||||
פתרונות eCommerce מתקדמים עם אינטגרציית AI להמלצות מוצרים, התאמה אישית וייעול המרות.
|
||||
</p>
|
||||
</div>
|
||||
<div class="service-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<path d="M20,30 L30,30 L40,70 L80,70 L85,40 L35,40" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="45" cy="82" r="6" fill="currentColor"/>
|
||||
<circle cx="72" cy="82" r="6" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="service-item reveal">
|
||||
<div class="service-number" aria-hidden="true">03</div>
|
||||
<div class="service-content">
|
||||
<h3 class="service-title">מיתוג דיגיטלי</h3>
|
||||
<p class="service-desc">
|
||||
בניית זהות מותגית שלמה לעולם הדיגיטלי — מלוגו ועד שפה עיצובית אחידה בכל נקודות המגע.
|
||||
</p>
|
||||
</div>
|
||||
<div class="service-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="50" r="35" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="50" cy="50" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="50" cy="50" r="5" fill="currentColor"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="service-item reveal">
|
||||
<div class="service-number" aria-hidden="true">04</div>
|
||||
<div class="service-content">
|
||||
<h3 class="service-title">פתרונות AI מותאמים</h3>
|
||||
<p class="service-desc">
|
||||
צ׳אטבוטים חכמים, ניתוח התנהגות משתמשים, אוטומציה של תוכן וכלים מבוססי בינה מלאכותית.
|
||||
</p>
|
||||
</div>
|
||||
<div class="service-visual" aria-hidden="true">
|
||||
<svg viewBox="0 0 100 100">
|
||||
<circle cx="50" cy="35" r="15" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M30,90 L30,65 Q30,55 40,55 L60,55 Q70,55 70,65 L70,90" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="45" cy="32" r="3" fill="currentColor"/>
|
||||
<circle cx="55" cy="32" r="3" fill="currentColor"/>
|
||||
<path d="M42,40 Q50,46 58,40" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about-section" aria-labelledby="about-title">
|
||||
<div class="about-grid">
|
||||
<div class="about-content reveal">
|
||||
<span class="section-label">מי אנחנו</span>
|
||||
<h2 id="about-title" class="about-title">סטודיו שמאמין<br>בכוח של עיצוב</h2>
|
||||
<p class="about-text">
|
||||
אימייליון הוקמה מתוך אמונה שעיצוב דיגיטלי צריך להיות יותר מיפה — הוא צריך לעבוד. אנחנו משלבים חשיבה אסטרטגית, עיצוב פורץ דרך וטכנולוגיית AI מתקדמת כדי ליצור חוויות שמניעות תוצאות.
|
||||
</p>
|
||||
<p class="about-text">
|
||||
הצוות שלנו מורכב ממעצבים, מפתחים ומומחי AI שעובדים יחד כדי להפוך כל פרויקט למשהו ייחודי ובלתי נשכח.
|
||||
</p>
|
||||
</div>
|
||||
<div class="about-visual reveal" aria-hidden="true">
|
||||
<div class="visual-grid">
|
||||
<div class="visual-cell"></div>
|
||||
<div class="visual-cell"></div>
|
||||
<div class="visual-cell"></div>
|
||||
<div class="visual-cell"></div>
|
||||
<div class="visual-cell accent"></div>
|
||||
<div class="visual-cell"></div>
|
||||
<div class="visual-cell"></div>
|
||||
<div class="visual-cell"></div>
|
||||
<div class="visual-cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact-section" aria-labelledby="contact-title">
|
||||
<div class="contact-bg" aria-hidden="true">
|
||||
<div class="contact-gradient"></div>
|
||||
</div>
|
||||
<div class="contact-content">
|
||||
<header class="section-header">
|
||||
<span class="section-label reveal">יצירת קשר</span>
|
||||
<h2 id="contact-title" class="contact-title reveal">יש לכם פרויקט?<br>בואו נדבר</h2>
|
||||
</header>
|
||||
|
||||
<form class="contact-form reveal" action="#" method="POST" novalidate>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label for="name" class="form-label">שם מלא</label>
|
||||
<input type="text" id="name" name="name" class="form-input" autocomplete="name" placeholder=" " required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" class="form-label">אימייל</label>
|
||||
<input type="email" id="email" name="email" class="form-input" autocomplete="email" placeholder=" " required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="project" class="form-label">ספרו לנו על הפרויקט</label>
|
||||
<textarea id="project" name="project" class="form-input form-textarea" rows="4" placeholder=" "></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-large">
|
||||
<span>שליחת הודעה</span>
|
||||
<svg class="btn-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<path d="M5 12H19M12 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<a href="#" class="logo">
|
||||
<svg class="logo-mark" viewBox="0 0 50 50" aria-hidden="true">
|
||||
<circle cx="25" cy="25" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="25" cy="25" r="8" fill="currentColor"/>
|
||||
</svg>
|
||||
<span class="logo-text">אימייליון</span>
|
||||
</a>
|
||||
<p class="footer-tagline">בונים חוויות דיגיטליות עם AI</p>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<a href="#work">עבודות</a>
|
||||
<a href="#services">שירותים</a>
|
||||
<a href="#about">אודות</a>
|
||||
<a href="#contact">צור קשר</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 אימייליון — בניית אתרים עם AI. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,180 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Respect reduced motion preference
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Cursor glow effect (only on devices with fine pointer)
|
||||
const cursorGlow = document.querySelector('.cursor-glow');
|
||||
const hasFinePointer = window.matchMedia('(pointer: fine)').matches;
|
||||
|
||||
if (cursorGlow && !prefersReducedMotion && hasFinePointer) {
|
||||
let mouseX = 0, mouseY = 0;
|
||||
let glowX = 0, glowY = 0;
|
||||
let rafId = null;
|
||||
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
mouseX = e.clientX;
|
||||
mouseY = e.clientY;
|
||||
});
|
||||
|
||||
function animateCursor() {
|
||||
glowX += (mouseX - glowX) * 0.1;
|
||||
glowY += (mouseY - glowY) * 0.1;
|
||||
cursorGlow.style.left = glowX + 'px';
|
||||
cursorGlow.style.top = glowY + 'px';
|
||||
rafId = requestAnimationFrame(animateCursor);
|
||||
}
|
||||
animateCursor();
|
||||
|
||||
// Cleanup on page hide
|
||||
document.addEventListener('visibilitychange', () => {
|
||||
if (document.hidden && rafId) {
|
||||
cancelAnimationFrame(rafId);
|
||||
} else if (!document.hidden) {
|
||||
animateCursor();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Header scroll effect
|
||||
const header = document.querySelector('.site-header');
|
||||
let ticking = false;
|
||||
|
||||
function handleScroll() {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(() => {
|
||||
const currentScrollY = window.scrollY;
|
||||
|
||||
if (currentScrollY > 50) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true });
|
||||
|
||||
// Mobile navigation
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (navToggle && navLinks) {
|
||||
navToggle.addEventListener('click', () => {
|
||||
const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
|
||||
navToggle.setAttribute('aria-expanded', !isExpanded);
|
||||
navLinks.classList.toggle('active');
|
||||
document.body.style.overflow = isExpanded ? '' : 'hidden';
|
||||
|
||||
// Update label
|
||||
navToggle.setAttribute('aria-label', isExpanded ? 'פתיחת תפריט ניווט' : 'סגירת תפריט ניווט');
|
||||
});
|
||||
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navToggle.setAttribute('aria-label', 'פתיחת תפריט ניווט');
|
||||
navLinks.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
|
||||
// Close on escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && navLinks.classList.contains('active')) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navToggle.setAttribute('aria-label', 'פתיחת תפריט ניווט');
|
||||
navLinks.classList.remove('active');
|
||||
document.body.style.overflow = '';
|
||||
navToggle.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Reveal on scroll
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
|
||||
if (!prefersReducedMotion && revealElements.length > 0) {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -80px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
revealElements.forEach(el => revealObserver.observe(el));
|
||||
} else {
|
||||
revealElements.forEach(el => el.classList.add('visible'));
|
||||
}
|
||||
|
||||
// Form submission
|
||||
const contactForm = document.querySelector('.contact-form');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const btn = contactForm.querySelector('.btn');
|
||||
const btnText = btn.querySelector('span');
|
||||
const originalText = btnText.textContent;
|
||||
|
||||
// Basic validation
|
||||
const name = contactForm.querySelector('#name');
|
||||
const email = contactForm.querySelector('#email');
|
||||
|
||||
if (!name.value.trim() || !email.value.trim()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Disable button
|
||||
btn.disabled = true;
|
||||
btnText.textContent = 'שולח...';
|
||||
|
||||
// Simulate send (replace with actual form handling)
|
||||
setTimeout(() => {
|
||||
btnText.textContent = 'נשלח בהצלחה! ✓';
|
||||
btn.style.background = 'linear-gradient(135deg, #00b894 0%, #55efc4 100%)';
|
||||
|
||||
setTimeout(() => {
|
||||
btnText.textContent = originalText;
|
||||
btn.style.background = '';
|
||||
btn.disabled = false;
|
||||
contactForm.reset();
|
||||
}, 3000);
|
||||
}, 1000);
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', (e) => {
|
||||
const href = anchor.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
target.scrollIntoView({
|
||||
behavior: prefersReducedMotion ? 'auto' : 'smooth'
|
||||
});
|
||||
|
||||
// Set focus for accessibility
|
||||
target.setAttribute('tabindex', '-1');
|
||||
target.focus({ preventScroll: true });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user