Initial AI-generated site
This commit is contained in:
+376
@@ -0,0 +1,376 @@
|
||||
<!doctype html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Lotus Real | השקעות נדל"ן בתל אביב</title>
|
||||
<meta name="description" content="LOTUS S.I INVESTMENTS LTD - חברת נדל"ן והשקעות מובילה בתל אביב. ליווי מקצועי, פרויקטים איכותיים, והזדמנויות השקעה מניבות.">
|
||||
<meta property="og:title" content="Lotus Real | השקעות נדל"ן בתל אביב">
|
||||
<meta property="og:description" content="חברת נדל"ן והשקעות מובילה בתל אביב - LOTUS S.I INVESTMENTS LTD">
|
||||
<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='%23c9a962'/><path d='M50 20 C30 35 25 55 50 80 C75 55 70 35 50 20' fill='%231a1a1a'/></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=Playfair+Display:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<a href="#main-content" class="skip-link">דלג לתוכן הראשי</a>
|
||||
|
||||
<header class="site-header">
|
||||
<nav class="nav-container">
|
||||
<a href="#hero" class="logo">
|
||||
<svg class="logo-icon" viewBox="0 0 60 60" aria-hidden="true">
|
||||
<path d="M30 8 C15 20 10 38 30 56 C50 38 45 20 30 8" fill="var(--gold)" opacity="0.9"/>
|
||||
<path d="M30 14 C20 24 17 38 30 50 C43 38 40 24 30 14" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.5"/>
|
||||
</svg>
|
||||
<span class="logo-text">Lotus Real</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="תפריט ניווט" aria-expanded="false" aria-controls="main-nav">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul class="nav-links" id="main-nav">
|
||||
<li><a href="#about">אודות</a></li>
|
||||
<li><a href="#areas">אזורי פעילות</a></li>
|
||||
<li><a href="#projects">פרויקטים</a></li>
|
||||
<li><a href="#contact" class="nav-cta">צור קשר</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main id="main-content">
|
||||
<section id="hero" class="hero">
|
||||
<div class="hero-bg" aria-hidden="true">
|
||||
<div class="hero-lotus"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<p class="hero-label">LOTUS S.I INVESTMENTS LTD</p>
|
||||
<h1 class="hero-title">השקעות נדל"ן<br><span class="gold-text">בלב תל אביב</span></h1>
|
||||
<p class="hero-subtitle">מומחיות, ניסיון ואמינות בעולם הנדל"ן הישראלי</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#projects" class="btn btn-primary">לפרויקטים שלנו</a>
|
||||
<a href="#contact" class="btn btn-secondary">דברו איתנו</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-scroll" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M12 5v14M5 12l7 7 7-7"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<div class="about-grid">
|
||||
<div class="about-visual" aria-hidden="true">
|
||||
<svg class="about-lotus" viewBox="0 0 200 200">
|
||||
<path d="M100 20 C50 50 35 100 100 180 C165 100 150 50 100 20" fill="var(--gold)" opacity="0.08"/>
|
||||
<path d="M100 40 C60 65 50 105 100 160 C150 105 140 65 100 40" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.3"/>
|
||||
<path d="M100 60 C75 78 68 108 100 145 C132 108 125 78 100 60" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.2"/>
|
||||
<path d="M60 90 C80 70 100 80 100 100 C100 80 120 70 140 90" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.25"/>
|
||||
<path d="M50 110 C75 85 100 95 100 100 C100 95 125 85 150 110" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="about-content">
|
||||
<span class="section-label">אודות החברה</span>
|
||||
<h2 class="section-title">בונים עתיד,<br>משקיעים בהווה</h2>
|
||||
<p class="about-text">
|
||||
LOTUS S.I INVESTMENTS LTD, בניהולו של שניר עובדיה, היא חברת נדל"ן והשקעות מובילה הפועלת בלב המטרופולין הישראלי. אנו מתמחים באיתור הזדמנויות השקעה, פיתוח פרויקטים וליווי משקיעים לאורך כל הדרך.
|
||||
</p>
|
||||
<p class="about-text">
|
||||
הגישה שלנו משלבת ראייה אסטרטגית ארוכת טווח עם ביצוע מקצועי ומדויק, תוך שמירה על יחסים אישיים ושקיפות מלאה מול לקוחותינו ושותפינו.
|
||||
</p>
|
||||
<div class="about-values">
|
||||
<div class="value-item">
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true">
|
||||
<circle cx="16" cy="16" r="14" fill="none" stroke="var(--gold)" stroke-width="1.5"/>
|
||||
<path d="M10 16 L14 20 L22 12" fill="none" stroke="var(--gold)" stroke-width="2"/>
|
||||
</svg>
|
||||
<span>שקיפות מלאה</span>
|
||||
</div>
|
||||
<div class="value-item">
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true">
|
||||
<path d="M16 4 L20 12 L28 14 L22 20 L24 28 L16 24 L8 28 L10 20 L4 14 L12 12 Z" fill="none" stroke="var(--gold)" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<span>מקצועיות</span>
|
||||
</div>
|
||||
<div class="value-item">
|
||||
<svg viewBox="0 0 32 32" aria-hidden="true">
|
||||
<path d="M16 6 C10 10 8 18 16 28 C24 18 22 10 16 6" fill="none" stroke="var(--gold)" stroke-width="1.5"/>
|
||||
</svg>
|
||||
<span>יחס אישי</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="areas" class="areas">
|
||||
<div class="container">
|
||||
<div class="areas-header">
|
||||
<span class="section-label">היכן אנחנו פועלים</span>
|
||||
<h2 class="section-title">אזורי פעילות</h2>
|
||||
</div>
|
||||
<div class="areas-grid">
|
||||
<article class="area-card area-featured">
|
||||
<div class="area-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<rect x="8" y="20" width="48" height="36" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<rect x="16" y="28" width="8" height="8" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="28" y="28" width="8" height="8" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="40" y="28" width="8" height="8" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="16" y="40" width="8" height="8" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="28" y="40" width="8" height="8" fill="currentColor" opacity="0.4"/>
|
||||
<rect x="40" y="40" width="8" height="8" fill="currentColor" opacity="0.4"/>
|
||||
<polygon points="32,6 4,20 60,20" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="area-content">
|
||||
<h3>תל אביב</h3>
|
||||
<p>מרכז העסקים והתרבות של ישראל. פרויקטי מגורים יוקרתיים, משרדים ונכסים מסחריים באזורים המבוקשים ביותר.</p>
|
||||
<span class="area-tag">אזור פעילות מרכזי</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="area-card">
|
||||
<div class="area-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<rect x="4" y="20" width="18" height="36" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<rect x="23" y="12" width="18" height="44" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<rect x="42" y="28" width="18" height="28" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="area-content">
|
||||
<h3>גוש דן</h3>
|
||||
<p>רמת גן, גבעתיים, בני ברק והרצליה — ערי הלוויין עם פוטנציאל צמיחה משמעותי.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="area-card">
|
||||
<div class="area-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="32" cy="24" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M32 34 L32 54" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M24 46 L32 54 L40 46" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="area-content">
|
||||
<h3>השרון</h3>
|
||||
<p>נתניה, רעננה, כפר סבא והוד השרון — אזור מתפתח במהירות.</p>
|
||||
</div>
|
||||
</article>
|
||||
<article class="area-card">
|
||||
<div class="area-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<path d="M8 56 Q24 24 32 40 Q40 24 56 56" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="32" cy="18" r="6" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="area-content">
|
||||
<h3>ירושלים</h3>
|
||||
<p>הזדמנויות ייחודיות בנדל"ן למגורים ומסחר, עם ביקוש יציב.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="projects" class="projects">
|
||||
<div class="container">
|
||||
<span class="section-label">הפרויקטים שלנו</span>
|
||||
<h2 class="section-title">נכסים נבחרים</h2>
|
||||
<div class="projects-grid">
|
||||
<article class="project-card project-large">
|
||||
<div class="project-visual" style="--accent: #2a3d4f;">
|
||||
<div class="project-bg"></div>
|
||||
<svg class="project-icon" viewBox="0 0 80 80" aria-hidden="true">
|
||||
<rect x="15" y="20" width="50" height="50" fill="none" stroke="currentColor" stroke-width="1" opacity="0.4"/>
|
||||
<rect x="20" y="25" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="35" y="25" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="50" y="25" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="20" y="40" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="35" y="40" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="50" y="40" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="20" y="55" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="35" y="55" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<rect x="50" y="55" width="10" height="10" fill="currentColor" opacity="0.2"/>
|
||||
<polygon points="40,5 10,20 70,20" fill="none" stroke="currentColor" stroke-width="1" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<span class="project-tag">מגורי יוקרה</span>
|
||||
<h3>מגדל רוטשילד</h3>
|
||||
<p>פרויקט דירות יוקרה בשדרות רוטשילד, 24 קומות, נוף לים</p>
|
||||
<span class="project-status status-active">בשיווק</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="project-card">
|
||||
<div class="project-visual" style="--accent: #3d4f2a;">
|
||||
<div class="project-bg"></div>
|
||||
<svg class="project-icon" viewBox="0 0 80 80" aria-hidden="true">
|
||||
<rect x="10" y="30" width="25" height="40" fill="none" stroke="currentColor" stroke-width="1" opacity="0.4"/>
|
||||
<rect x="45" y="15" width="25" height="55" fill="none" stroke="currentColor" stroke-width="1" opacity="0.4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<span class="project-tag">מסחרי</span>
|
||||
<h3>קומפלקס הבורסה</h3>
|
||||
<p>מרכז משרדים ומסחר ברמת גן</p>
|
||||
<span class="project-status status-complete">הושלם</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="project-card">
|
||||
<div class="project-visual" style="--accent: #4f3d2a;">
|
||||
<div class="project-bg"></div>
|
||||
<svg class="project-icon" viewBox="0 0 80 80" aria-hidden="true">
|
||||
<circle cx="40" cy="40" r="25" fill="none" stroke="currentColor" stroke-width="1" opacity="0.4"/>
|
||||
<circle cx="40" cy="40" r="15" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
<circle cx="40" cy="40" r="5" fill="currentColor" opacity="0.3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<span class="project-tag">התחדשות עירונית</span>
|
||||
<h3>פינוי בינוי פלורנטין</h3>
|
||||
<p>120 יחידות דיור חדשות</p>
|
||||
<span class="project-status status-planning">בתכנון</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="project-card">
|
||||
<div class="project-visual" style="--accent: #2a4f4a;">
|
||||
<div class="project-bg"></div>
|
||||
<svg class="project-icon" viewBox="0 0 80 80" aria-hidden="true">
|
||||
<path d="M20 60 L20 30 L40 15 L60 30 L60 60 Z" fill="none" stroke="currentColor" stroke-width="1" opacity="0.4"/>
|
||||
<rect x="32" y="40" width="16" height="20" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<span class="project-tag">מגורים</span>
|
||||
<h3>גני הרצליה</h3>
|
||||
<p>פרויקט בוטיק בהרצליה פיתוח</p>
|
||||
<span class="project-status status-progress">בביצוע</span>
|
||||
</div>
|
||||
</article>
|
||||
<article class="project-card project-wide">
|
||||
<div class="project-visual" style="--accent: #4a2a4f;">
|
||||
<div class="project-bg"></div>
|
||||
<svg class="project-icon" viewBox="0 0 120 80" aria-hidden="true">
|
||||
<path d="M20 60 Q40 30 60 50 Q80 30 100 60" fill="none" stroke="currentColor" stroke-width="1" opacity="0.4"/>
|
||||
<rect x="25" y="35" width="20" height="25" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
<rect x="75" y="35" width="20" height="25" fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="project-info">
|
||||
<span class="project-tag">מיזם משותף</span>
|
||||
<h3>מתחם יפו העתיקה</h3>
|
||||
<p>שימור ופיתוח מבנים היסטוריים למגורים ומסחר, 45 יחידות</p>
|
||||
<span class="project-status status-planning">בתכנון</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<div class="contact-grid">
|
||||
<div class="contact-info">
|
||||
<span class="section-label">בואו נדבר</span>
|
||||
<h2 class="section-title">יצירת קשר</h2>
|
||||
<p class="contact-text">
|
||||
מעוניינים לשמוע על הזדמנויות השקעה? מחפשים שותפות עסקית? אנחנו כאן בשבילכם.
|
||||
</p>
|
||||
<address class="contact-details">
|
||||
<div class="contact-item">
|
||||
<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>
|
||||
<span>תל אביב, ישראל</span>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<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>
|
||||
<!-- Replace with real phone -->
|
||||
<a href="tel:+972-3-1234567" aria-label="התקשרו אלינו">03-123-4567</a>
|
||||
</div>
|
||||
<div class="contact-item">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
|
||||
<rect x="2" y="4" width="20" height="16" rx="2"/>
|
||||
<path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/>
|
||||
</svg>
|
||||
<!-- Replace with real email -->
|
||||
<a href="mailto:info@lotus-real.com" aria-label="שלחו לנו מייל">info@lotus-real.com</a>
|
||||
</div>
|
||||
</address>
|
||||
<div class="contact-decoration" aria-hidden="true">
|
||||
<svg viewBox="0 0 200 200">
|
||||
<path d="M100 30 C55 60 40 110 100 180 C160 110 145 60 100 30" fill="var(--gold)" opacity="0.06"/>
|
||||
<path d="M100 50 C65 75 55 115 100 165 C145 115 135 75 100 50" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.15"/>
|
||||
<path d="M100 70 C80 88 73 118 100 150 C127 118 120 88 100 70" fill="none" stroke="var(--gold)" stroke-width="1" opacity="0.1"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<form class="contact-form" action="#" method="POST" novalidate>
|
||||
<div class="form-group">
|
||||
<label for="name">שם מלא</label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">דוא"ל</label>
|
||||
<input type="email" id="email" name="email" required autocomplete="email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">טלפון</label>
|
||||
<input type="tel" id="phone" name="phone" autocomplete="tel">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="subject">נושא</label>
|
||||
<select id="subject" name="subject">
|
||||
<option value="">בחרו נושא</option>
|
||||
<option value="investment">הזדמנויות השקעה</option>
|
||||
<option value="partnership">שיתוף פעולה</option>
|
||||
<option value="purchase">רכישת נכס</option>
|
||||
<option value="other">אחר</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group form-group-full">
|
||||
<label for="message">הודעה</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-submit">שליחת הודעה</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<svg class="footer-logo" viewBox="0 0 60 60" aria-hidden="true">
|
||||
<path d="M30 8 C15 20 10 38 30 56 C50 38 45 20 30 8" fill="var(--gold)" opacity="0.9"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="footer-name">LOTUS S.I INVESTMENTS LTD</p>
|
||||
<p class="footer-tagline">השקעות נדל"ן בתל אביב</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav class="footer-links" aria-label="ניווט תחתון">
|
||||
<a href="#about">אודות</a>
|
||||
<a href="#areas">אזורי פעילות</a>
|
||||
<a href="#projects">פרויקטים</a>
|
||||
<a href="#contact">צור קשר</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 LOTUS S.I INVESTMENTS LTD. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,188 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Intersection Observer for scroll animations
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px 0px -50px 0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const animateOnScroll = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const delay = entry.target.dataset.delay || 0;
|
||||
setTimeout(() => {
|
||||
entry.target.classList.add('visible');
|
||||
}, delay * 100);
|
||||
animateOnScroll.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// Observe elements
|
||||
document.querySelectorAll('.about-content, .area-card, .project-card, .contact-form').forEach((el, index) => {
|
||||
el.dataset.delay = index % 4;
|
||||
animateOnScroll.observe(el);
|
||||
});
|
||||
|
||||
// Header scroll effect
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
const currentScroll = window.pageYOffset;
|
||||
|
||||
if (currentScroll > 100) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
}, { passive: true });
|
||||
|
||||
// Mobile navigation
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
if (navToggle && navLinks) {
|
||||
navToggle.addEventListener('click', () => {
|
||||
const isActive = navToggle.classList.toggle('active');
|
||||
navLinks.classList.toggle('active');
|
||||
navToggle.setAttribute('aria-expanded', isActive);
|
||||
document.body.style.overflow = isActive ? 'hidden' : '';
|
||||
});
|
||||
|
||||
// Close mobile nav on link click
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navToggle.classList.remove('active');
|
||||
navLinks.classList.remove('active');
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
document.body.style.overflow = '';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
const headerHeight = header ? header.offsetHeight : 0;
|
||||
const targetPosition = target.getBoundingClientRect().top + window.pageYOffset - headerHeight;
|
||||
|
||||
window.scrollTo({
|
||||
top: targetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Form handling with validation and accessibility
|
||||
const contactForm = document.querySelector('.contact-form');
|
||||
|
||||
if (contactForm) {
|
||||
// Create live region for form announcements
|
||||
const liveRegion = document.createElement('div');
|
||||
liveRegion.setAttribute('aria-live', 'polite');
|
||||
liveRegion.setAttribute('aria-atomic', 'true');
|
||||
liveRegion.className = 'sr-only';
|
||||
contactForm.appendChild(liveRegion);
|
||||
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Basic validation
|
||||
const name = this.querySelector('#name');
|
||||
const email = this.querySelector('#email');
|
||||
const message = this.querySelector('#message');
|
||||
|
||||
let isValid = true;
|
||||
const errors = [];
|
||||
|
||||
// Clear previous errors
|
||||
this.querySelectorAll('.form-error').forEach(el => el.remove());
|
||||
[name, email, message].forEach(field => {
|
||||
if (field) {
|
||||
field.removeAttribute('aria-invalid');
|
||||
field.removeAttribute('aria-describedby');
|
||||
}
|
||||
});
|
||||
|
||||
// Validate required fields
|
||||
if (name && !name.value.trim()) {
|
||||
showFieldError(name, 'נא למלא שם מלא');
|
||||
isValid = false;
|
||||
errors.push('שם מלא');
|
||||
}
|
||||
|
||||
if (email && !email.value.trim()) {
|
||||
showFieldError(email, 'נא למלא כתובת דוא"ל');
|
||||
isValid = false;
|
||||
errors.push('דוא"ל');
|
||||
} else if (email && email.value && !isValidEmail(email.value)) {
|
||||
showFieldError(email, 'נא להזין כתובת דוא"ל תקינה');
|
||||
isValid = false;
|
||||
errors.push('דוא"ל תקין');
|
||||
}
|
||||
|
||||
if (message && !message.value.trim()) {
|
||||
showFieldError(message, 'נא למלא הודעה');
|
||||
isValid = false;
|
||||
errors.push('הודעה');
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
liveRegion.textContent = 'יש לתקן את השדות הבאים: ' + errors.join(', ');
|
||||
return;
|
||||
}
|
||||
|
||||
const submitBtn = this.querySelector('.btn-submit');
|
||||
const originalText = submitBtn.textContent;
|
||||
|
||||
submitBtn.textContent = 'שולח...';
|
||||
submitBtn.disabled = true;
|
||||
liveRegion.textContent = 'שולח את הטופס...';
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
submitBtn.textContent = 'נשלח בהצלחה!';
|
||||
submitBtn.style.background = '#4a9c6d';
|
||||
liveRegion.textContent = 'ההודעה נשלחה בהצלחה!';
|
||||
|
||||
this.reset();
|
||||
|
||||
setTimeout(() => {
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.style.background = '';
|
||||
submitBtn.disabled = false;
|
||||
}, 3000);
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
function showFieldError(field, message) {
|
||||
const errorId = field.id + '-error';
|
||||
const errorEl = document.createElement('span');
|
||||
errorEl.className = 'form-error';
|
||||
errorEl.id = errorId;
|
||||
errorEl.textContent = message;
|
||||
field.parentNode.appendChild(errorEl);
|
||||
field.setAttribute('aria-invalid', 'true');
|
||||
field.setAttribute('aria-describedby', errorId);
|
||||
}
|
||||
}
|
||||
|
||||
function isValidEmail(email) {
|
||||
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
|
||||
}
|
||||
|
||||
// Add loaded class
|
||||
window.addEventListener('load', () => {
|
||||
document.body.classList.add('loaded');
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user