Initial AI-generated site
This commit is contained in:
+348
@@ -0,0 +1,348 @@
|
||||
<!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='none' stroke='%23c41e3a' stroke-width='4'/><path d='M50 15 L50 85 M25 50 Q50 30 75 50 Q50 70 25 50' stroke='%23c41e3a' 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=Noto+Sans+Hebrew:wght@300;400;600;700&family=Noto+Serif+Hebrew:wght@400;700&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="main-nav" role="navigation" aria-label="ניווט ראשי">
|
||||
<div class="nav-inner">
|
||||
<a href="#hero" class="nav-logo">
|
||||
<svg viewBox="0 0 50 50" class="logo-icon" aria-hidden="true">
|
||||
<circle cx="25" cy="25" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M25 8 L25 42 M12 25 Q25 15 38 25 Q25 35 12 25" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
<span>מרכז האיקידו</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="פתח תפריט ניווט" aria-expanded="false" aria-controls="nav-menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul class="nav-links" id="nav-menu">
|
||||
<li><a href="#about">אודות</a></li>
|
||||
<li><a href="#philosophy">פילוסופיה</a></li>
|
||||
<li><a href="#classes">אימונים</a></li>
|
||||
<li><a href="#dojo">הדוג׳ו</a></li>
|
||||
<li><a href="#contact" class="nav-cta">הצטרפו אלינו</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<header id="hero" class="hero">
|
||||
<div class="hero-bg">
|
||||
<svg class="hero-enso" viewBox="0 0 400 400" aria-hidden="true">
|
||||
<circle class="enso-circle" cx="200" cy="200" r="150" fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" pathLength="1"/>
|
||||
</svg>
|
||||
<div class="hero-lines" aria-hidden="true">
|
||||
<span></span><span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-subtitle reveal-text">כפר סבא • מתחם אימונים חדש</p>
|
||||
<h1 class="hero-title">
|
||||
<span class="title-line reveal-text">מרכז האיקידו</span>
|
||||
<span class="title-line title-accent reveal-text">הישראלי</span>
|
||||
</h1>
|
||||
<p class="hero-tagline reveal-text">גלו את הדרך להרמוניה<br>בין גוף לנפש</p>
|
||||
<a href="#contact" class="hero-cta reveal-text">
|
||||
<span>שיעור ניסיון חינם</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<a href="#about" class="scroll-indicator" aria-label="גללו למטה לתוכן">
|
||||
<span aria-hidden="true">גללו למטה</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12l7 7 7-7" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="about" class="section section-about">
|
||||
<div class="section-grid">
|
||||
<div class="about-visual">
|
||||
<svg class="kanji-ai" viewBox="0 0 200 200" aria-hidden="true">
|
||||
<text x="100" y="150" text-anchor="middle" class="kanji-text">合</text>
|
||||
</svg>
|
||||
<div class="visual-circle"></div>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<h2 class="section-title reveal-up">
|
||||
<span class="title-jp">合気道</span>
|
||||
אמנות ההרמוניה
|
||||
</h2>
|
||||
<p class="section-text reveal-up">
|
||||
איקידו היא אמנות לחימה יפנית מודרנית שפותחה במאה ה־20 על ידי מוריהיי אואשיבה. בניגוד לאמנויות לחימה אחרות, האיקידו מתמקדת בהגנה ללא תוקפנות — בניצול אנרגיית היריב להשגת שליטה והרמוניה.
|
||||
</p>
|
||||
<p class="section-text reveal-up">
|
||||
במרכז האיקידו הישראלי בכפר סבא אנו מלמדים את הדרך המסורתית תוך התאמה לעולם המודרני. כאן תמצאו קהילה תומכת, מאמנים מוסמכים בינלאומית, ומרחב אימונים חדש ומאובזר.
|
||||
</p>
|
||||
<div class="features-list reveal-up">
|
||||
<div class="feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>מאמנים בעלי הסמכה בינלאומית</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>מתחם אימונים חדש ומאובזר</span>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>קבוצות לכל הגילאים והרמות</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="philosophy" class="section section-philosophy">
|
||||
<div class="philosophy-bg" aria-hidden="true">
|
||||
<svg viewBox="0 0 100 100" class="tomoe">
|
||||
<circle cx="50" cy="50" r="48" fill="none" stroke="currentColor" stroke-width="0.5"/>
|
||||
<path d="M50 2 A48 48 0 0 1 50 98 A24 24 0 0 0 50 50 A24 24 0 0 1 50 2" fill="currentColor" opacity="0.1"/>
|
||||
<circle cx="50" cy="26" r="8" fill="currentColor" opacity="0.2"/>
|
||||
<circle cx="50" cy="74" r="8" fill="none" stroke="currentColor" stroke-width="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="section-inner">
|
||||
<h2 class="section-title section-title-center reveal-up">עקרונות הדרך</h2>
|
||||
<p class="section-intro reveal-up">שלושת היסודות המנחים את תרגול האיקידו</p>
|
||||
<div class="principles">
|
||||
<article class="principle principle-featured reveal-up">
|
||||
<div class="principle-icon">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<circle cx="40" cy="40" r="35" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M40 15 Q60 40 40 65 Q20 40 40 15" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>אי — 合</h3>
|
||||
<p>הרמוניה ואיחוד. להתמזג עם האנרגיה של היריב במקום להתנגד לה — עקרון היסוד של האיקידו.</p>
|
||||
</article>
|
||||
<article class="principle reveal-up">
|
||||
<div class="principle-icon">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<circle cx="40" cy="40" r="35" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="40" cy="40" r="8" fill="currentColor"/>
|
||||
<path d="M40 5 L40 20 M40 60 L40 75 M5 40 L20 40 M60 40 L75 40" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>קי — 気</h3>
|
||||
<p>אנרגיה פנימית. פיתוח וזרימה של כוח החיים דרך הגוף והנפש.</p>
|
||||
</article>
|
||||
<article class="principle reveal-up">
|
||||
<div class="principle-icon">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<circle cx="40" cy="40" r="35" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M20 55 L40 25 L60 55" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<line x1="40" y1="25" x2="40" y2="70" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>דו — 道</h3>
|
||||
<p>הדרך. מסע מתמשך של למידה, צמיחה ושיפור עצמי.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="classes" class="section section-classes">
|
||||
<div class="section-inner">
|
||||
<h2 class="section-title section-title-center reveal-up">אימונים ושיעורים</h2>
|
||||
<p class="section-intro reveal-up">
|
||||
תכנית אימונים מגוונת לכל הרמות — ממתחילים ועד מתקדמים
|
||||
</p>
|
||||
<div class="classes-grid">
|
||||
<article class="class-card reveal-up">
|
||||
<div class="class-header">
|
||||
<span class="class-level">מתחילים</span>
|
||||
<span class="class-age">גילאי 16+</span>
|
||||
</div>
|
||||
<h3>קבוצת יסודות</h3>
|
||||
<p>הכירו את עקרונות היסוד של האיקידו: נפילות בטוחות, תנועה במעגלים, וטכניקות בסיסיות. אין צורך בניסיון קודם.</p>
|
||||
<ul class="class-schedule">
|
||||
<li><span>ראשון + רביעי</span><time datetime="19:00">19:00–20:30</time></li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="class-card class-card-featured reveal-up">
|
||||
<div class="class-badge">הכי פופולרי</div>
|
||||
<div class="class-header">
|
||||
<span class="class-level">כל הרמות</span>
|
||||
<span class="class-age">גילאי 16+</span>
|
||||
</div>
|
||||
<h3>אימון מרכזי</h3>
|
||||
<p>האימון המרכזי של הדוג׳ו. עבודה על טכניקות מתקדמות, רנדורי (אימון חופשי), ואימון עם נשק מסורתי.</p>
|
||||
<ul class="class-schedule">
|
||||
<li><span>שני + חמישי</span><time datetime="19:00">19:00–21:00</time></li>
|
||||
<li><span>שישי בוקר</span><time datetime="10:00">10:00–12:00</time></li>
|
||||
</ul>
|
||||
</article>
|
||||
<article class="class-card reveal-up">
|
||||
<div class="class-header">
|
||||
<span class="class-level">ילדים ונוער</span>
|
||||
<span class="class-age">גילאי 7–15</span>
|
||||
</div>
|
||||
<h3>איקידו לילדים</h3>
|
||||
<p>אימוני איקידו מותאמים לילדים ונוער. פיתוח ביטחון עצמי, משמעת, וכושר גופני דרך משחק ותנועה.</p>
|
||||
<ul class="class-schedule">
|
||||
<li><span>ראשון + רביעי</span><time datetime="17:00">17:00–18:30</time></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="dojo" class="section section-dojo">
|
||||
<div class="dojo-visual">
|
||||
<div class="dojo-grid" aria-hidden="true">
|
||||
<div class="tatami-grid">
|
||||
<span></span><span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span>
|
||||
<span></span><span></span><span></span><span></span>
|
||||
</div>
|
||||
</div>
|
||||
<svg class="dojo-torii" viewBox="0 0 200 150" aria-hidden="true">
|
||||
<path d="M30 140 L30 50 M170 140 L170 50" stroke="currentColor" stroke-width="8" stroke-linecap="round"/>
|
||||
<path d="M20 55 L180 55" stroke="currentColor" stroke-width="10" stroke-linecap="round"/>
|
||||
<path d="M10 45 Q100 20 190 45" stroke="currentColor" stroke-width="8" fill="none" stroke-linecap="round"/>
|
||||
<path d="M50 55 L50 80 M150 55 L150 80" stroke="currentColor" stroke-width="4"/>
|
||||
<path d="M50 75 L150 75" stroke="currentColor" stroke-width="4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="dojo-content">
|
||||
<h2 class="section-title reveal-up">הדוג׳ו שלנו</h2>
|
||||
<p class="section-text reveal-up">
|
||||
מתחם האימונים החדש בכפר סבא תוכנן במיוחד עבור אימוני איקידו ברמה הגבוהה ביותר.
|
||||
</p>
|
||||
<ul class="dojo-features reveal-up">
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>120 מ״ר משטח טאטאמי מקצועי</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>מלתחות מרווחות עם מקלחות</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>ציוד אימונים מסורתי — בוקן, ג׳ו, טנטו</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>חנייה חינם צמוד למתחם</span>
|
||||
</li>
|
||||
<li>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<span>נגישות מלאה לבעלי מוגבלויות</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="section section-contact">
|
||||
<div class="contact-bg" aria-hidden="true">
|
||||
<svg viewBox="0 0 400 400" class="contact-enso">
|
||||
<circle cx="200" cy="200" r="180" fill="none" stroke="currentColor" stroke-width="1" opacity="0.2"/>
|
||||
<circle cx="200" cy="200" r="140" fill="none" stroke="currentColor" stroke-width="1" opacity="0.15"/>
|
||||
<circle cx="200" cy="200" r="100" fill="none" stroke="currentColor" stroke-width="1" opacity="0.1"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="section-inner">
|
||||
<h2 class="section-title section-title-center reveal-up">הצטרפו אלינו</h2>
|
||||
<p class="section-intro reveal-up">
|
||||
מוזמנים לשיעור ניסיון חינם. מלאו את הפרטים ונחזור אליכם תוך 24 שעות.
|
||||
</p>
|
||||
<div class="contact-wrapper">
|
||||
<form class="contact-form reveal-up" action="#" method="post" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="name">שם מלא <span class="required" aria-label="שדה חובה">*</span></label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">טלפון <span class="required" aria-label="שדה חובה">*</span></label>
|
||||
<input type="tel" id="phone" name="phone" required autocomplete="tel" dir="ltr">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">דוא״ל</label>
|
||||
<input type="email" id="email" name="email" autocomplete="email" dir="ltr">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="interest">מתעניינים ב...</label>
|
||||
<select id="interest" name="interest">
|
||||
<option value="">בחרו קבוצה</option>
|
||||
<option value="beginners">קבוצת יסודות (מתחילים)</option>
|
||||
<option value="main">אימון מרכזי (כל הרמות)</option>
|
||||
<option value="kids">איקידו לילדים</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group form-group-full">
|
||||
<label for="message">הודעה (אופציונלי)</label>
|
||||
<textarea id="message" name="message" rows="3"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">
|
||||
<span>שלחו פרטים</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M5 12h14M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
<aside class="contact-info reveal-up">
|
||||
<h3>פרטי התקשרות</h3>
|
||||
<address>
|
||||
<div class="info-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="2"/><circle cx="12" cy="10" r="3" fill="none" stroke="currentColor" stroke-width="2"/></svg>
|
||||
<span>כפר סבא (הכתובת תפורסם בקרוב)</span>
|
||||
</div>
|
||||
<div class="info-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="2"/></svg>
|
||||
<a href="tel:+972000000000" dir="ltr">יש ליצור קשר בטופס</a>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2" fill="none" stroke="currentColor" stroke-width="2"/><path d="M22 6l-10 7L2 6" fill="none" stroke="currentColor" stroke-width="2"/></svg>
|
||||
<span>יש ליצור קשר בטופס</span>
|
||||
</div>
|
||||
<p class="placeholder-notice">* פרטי התקשרות מלאים יפורסמו בעת פתיחת המתחם</p>
|
||||
</address>
|
||||
<div class="hours">
|
||||
<h4>שעות פעילות</h4>
|
||||
<p>ראשון–חמישי: 16:00–21:30<br>שישי: 09:00–13:00<br>שבת: סגור</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="main-footer">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-brand">
|
||||
<svg viewBox="0 0 50 50" class="footer-logo" aria-hidden="true">
|
||||
<circle cx="25" cy="25" r="22" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M25 8 L25 42 M12 25 Q25 15 38 25 Q25 35 12 25" stroke="currentColor" stroke-width="1.5" fill="none"/>
|
||||
</svg>
|
||||
<div class="footer-brand-text">
|
||||
<span class="brand-name">מרכז האיקידו הישראלי</span>
|
||||
<span class="brand-location">כפר סבא</span>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<a href="#about">אודות</a>
|
||||
<a href="#philosophy">פילוסופיה</a>
|
||||
<a href="#classes">אימונים</a>
|
||||
<a href="#dojo">הדוג׳ו</a>
|
||||
<a href="#contact">צור קשר</a>
|
||||
</nav>
|
||||
<p class="footer-copy">© 2024 מרכז האיקידו הישראלי. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,199 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Check for reduced motion preference
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Navigation
|
||||
const nav = document.querySelector('.main-nav');
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
// Scroll behavior for nav
|
||||
let lastScrollY = 0;
|
||||
let ticking = false;
|
||||
|
||||
function updateNav() {
|
||||
const scrollY = window.scrollY;
|
||||
if (scrollY > 50) {
|
||||
nav.classList.add('scrolled');
|
||||
} else {
|
||||
nav.classList.remove('scrolled');
|
||||
}
|
||||
lastScrollY = scrollY;
|
||||
ticking = false;
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(updateNav);
|
||||
ticking = true;
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
// Mobile nav toggle
|
||||
navToggle.addEventListener('click', () => {
|
||||
const isOpen = navToggle.getAttribute('aria-expanded') === 'true';
|
||||
navToggle.setAttribute('aria-expanded', !isOpen);
|
||||
navToggle.setAttribute('aria-label', isOpen ? 'פתח תפריט ניווט' : 'סגור תפריט ניווט');
|
||||
navLinks.classList.toggle('open');
|
||||
document.body.style.overflow = isOpen ? '' : 'hidden';
|
||||
});
|
||||
|
||||
// Close mobile nav on link click
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navToggle.setAttribute('aria-label', 'פתח תפריט ניווט');
|
||||
navLinks.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
|
||||
// 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',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Reveal on scroll
|
||||
const revealElements = document.querySelectorAll('.reveal-text, .reveal-up');
|
||||
|
||||
if (!prefersReducedMotion && revealElements.length > 0) {
|
||||
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 -40px 0px'
|
||||
});
|
||||
|
||||
revealElements.forEach(el => revealObserver.observe(el));
|
||||
} else {
|
||||
// Show all elements immediately if reduced motion is preferred
|
||||
revealElements.forEach(el => {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
}
|
||||
|
||||
// Active section highlighting
|
||||
const sections = document.querySelectorAll('section[id]');
|
||||
const navItems = document.querySelectorAll('.nav-links a:not(.nav-cta)');
|
||||
|
||||
if (sections.length > 0 && navItems.length > 0) {
|
||||
const sectionObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const id = entry.target.getAttribute('id');
|
||||
navItems.forEach(item => {
|
||||
item.classList.remove('active');
|
||||
if (item.getAttribute('href') === `#${id}`) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.2,
|
||||
rootMargin: '-80px 0px -50% 0px'
|
||||
});
|
||||
|
||||
sections.forEach(section => sectionObserver.observe(section));
|
||||
}
|
||||
|
||||
// Form handling
|
||||
const form = document.querySelector('.contact-form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const btn = form.querySelector('.submit-btn');
|
||||
const originalText = btn.querySelector('span').textContent;
|
||||
const requiredFields = form.querySelectorAll('[required]');
|
||||
let isValid = true;
|
||||
|
||||
// Basic validation
|
||||
requiredFields.forEach(field => {
|
||||
if (!field.value.trim()) {
|
||||
isValid = false;
|
||||
field.style.borderColor = 'var(--color-accent)';
|
||||
} else {
|
||||
field.style.borderColor = '';
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
return;
|
||||
}
|
||||
|
||||
btn.querySelector('span').textContent = 'שולח...';
|
||||
btn.disabled = true;
|
||||
|
||||
// Simulate submission (replace with actual form handling)
|
||||
setTimeout(() => {
|
||||
btn.querySelector('span').textContent = 'נשלח בהצלחה!';
|
||||
btn.style.background = '#2e7d32';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.querySelector('span').textContent = originalText;
|
||||
btn.style.background = '';
|
||||
btn.disabled = false;
|
||||
form.reset();
|
||||
}, 2500);
|
||||
}, 1200);
|
||||
});
|
||||
|
||||
// Clear error styling on input
|
||||
form.querySelectorAll('input, textarea, select').forEach(field => {
|
||||
field.addEventListener('input', () => {
|
||||
field.style.borderColor = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Keyboard navigation enhancement
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && navLinks.classList.contains('open')) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navToggle.setAttribute('aria-label', 'פתח תפריט ניווט');
|
||||
navLinks.classList.remove('open');
|
||||
document.body.style.overflow = '';
|
||||
navToggle.focus();
|
||||
}
|
||||
});
|
||||
|
||||
// Trap focus in mobile menu when open
|
||||
navLinks.addEventListener('keydown', (e) => {
|
||||
if (!navLinks.classList.contains('open')) return;
|
||||
|
||||
const focusableElements = navLinks.querySelectorAll('a');
|
||||
const firstElement = focusableElements[0];
|
||||
const lastElement = focusableElements[focusableElements.length - 1];
|
||||
|
||||
if (e.key === 'Tab') {
|
||||
if (e.shiftKey && document.activeElement === firstElement) {
|
||||
e.preventDefault();
|
||||
navToggle.focus();
|
||||
} else if (!e.shiftKey && document.activeElement === lastElement) {
|
||||
e.preventDefault();
|
||||
navToggle.focus();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user