Initial AI-generated site
This commit is contained in:
+442
@@ -0,0 +1,442 @@
|
||||
<!doctype html>
|
||||
<html lang="he" dir="rtl">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="googlebot" content="noindex, nofollow">
|
||||
<title>פורטל לימודים | המדריך האישי שלך ללימודים אקדמיים</title>
|
||||
<meta name="description" content="פורטל לימודים - מידע מקיף על לימודים אקדמיים, תארים, מבחני מיון, פסיכומטרי ואמיר״ם. חוויות אמיתיות של סטודנטים ובוגרים.">
|
||||
<meta property="og:title" content="פורטל לימודים | המדריך האישי שלך ללימודים אקדמיים">
|
||||
<meta property="og:description" content="מידע מקיף על לימודים אקדמיים, תארים, מבחני מיון וחוויות אמיתיות של סטודנטים ובוגרים.">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://limoodim.co.il">
|
||||
<meta property="og:locale" content="he_IL">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><linearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'><stop offset='0%25' stop-color='%23FF6B6B'/><stop offset='100%25' stop-color='%234ECDC4'/></linearGradient></defs><circle cx='50' cy='50' r='45' fill='url(%23g)'/><path d='M30 70 L50 25 L70 70 M36 55 H64' stroke='white' stroke-width='6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></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>
|
||||
<header class="site-header">
|
||||
<nav class="nav-container">
|
||||
<a href="#hero" class="logo">
|
||||
<svg class="logo-icon" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="logoGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="var(--coral)"/>
|
||||
<stop offset="50%" stop-color="var(--purple)"/>
|
||||
<stop offset="100%" stop-color="var(--teal)"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="24" cy="24" r="22" fill="url(#logoGrad)"/>
|
||||
<path d="M14 32 L24 12 L34 32 M17 26 H31" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="logo-text">פורטל לימודים</span>
|
||||
</a>
|
||||
<button class="nav-toggle" aria-label="תפריט ניווט" aria-expanded="false">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#services">שירותים</a></li>
|
||||
<li><a href="#about">אודות</a></li>
|
||||
<li><a href="#faq">שאלות נפוצות</a></li>
|
||||
<li><a href="#contact" class="nav-cta">צור קשר</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section id="hero" class="hero">
|
||||
<div class="hero-bg" aria-hidden="true">
|
||||
<div class="blob blob-1"></div>
|
||||
<div class="blob blob-2"></div>
|
||||
<div class="blob blob-3"></div>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title reveal">
|
||||
<span class="title-line">המסע האקדמי</span>
|
||||
<span class="title-line accent">מתחיל כאן</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle reveal">
|
||||
מידע מקיף על לימודים אקדמיים, מבחני מיון, וחוויות אמיתיות של סטודנטים ובוגרים — הכל במקום אחד
|
||||
</p>
|
||||
<div class="hero-actions reveal">
|
||||
<a href="#services" class="btn btn-primary">גלה את השירותים שלנו</a>
|
||||
<a href="#about" class="btn btn-secondary">למד עוד</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="scroll-indicator" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24">
|
||||
<path d="M12 5v14M5 12l7 7 7-7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
<header class="section-header reveal">
|
||||
<span class="section-tag">מה אנחנו מציעים</span>
|
||||
<h2 class="section-title">השירותים שלנו</h2>
|
||||
<p class="section-desc">כל המידע שתצטרכו כדי לקבל החלטה מושכלת על העתיד האקדמי שלכם</p>
|
||||
</header>
|
||||
|
||||
<div class="services-grid">
|
||||
<article class="service-card service-card--featured reveal" style="--delay: 0">
|
||||
<div class="service-icon">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" fill="url(#warmGrad)"/>
|
||||
<path d="M20 44 L32 20 L44 44 M24 36 H40" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<defs>
|
||||
<linearGradient id="warmGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FF6B6B"/>
|
||||
<stop offset="100%" stop-color="#FFA94D"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>מידע על תארים אקדמיים</h3>
|
||||
<p>סקירה מקיפה של תכניות לימודים לתואר ראשון בכל התחומים — מדעי המחשב, משפטים, פסיכולוגיה, הנדסה ועוד. השוואה בין מסלולים ומוסדות.</p>
|
||||
<a href="#" class="service-link">
|
||||
לפרטים נוספים
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12H19M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article class="service-card reveal" style="--delay: 1">
|
||||
<div class="service-icon service-icon--purple">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" fill="url(#coolGrad)"/>
|
||||
<rect x="18" y="20" width="28" height="24" rx="3" stroke="white" stroke-width="3" fill="none"/>
|
||||
<path d="M18 28H46 M26 20V28 M38 20V28" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<defs>
|
||||
<linearGradient id="coolGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#A855F7"/>
|
||||
<stop offset="100%" stop-color="#4ECDC4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>מבחני מיון והכנה</h3>
|
||||
<p>מידע מפורט על מבחן הפסיכומטרי, אמיר״ם, ומבחני כניסה נוספים. טיפים להכנה, המלצות על קורסים, וחוויות של נבחנים.</p>
|
||||
<a href="#" class="service-link">
|
||||
לפרטים נוספים
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12H19M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article class="service-card reveal" style="--delay: 2">
|
||||
<div class="service-icon service-icon--teal">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" fill="url(#tealGrad)"/>
|
||||
<circle cx="24" cy="28" r="6" stroke="white" stroke-width="3" fill="none"/>
|
||||
<circle cx="40" cy="28" r="6" stroke="white" stroke-width="3" fill="none"/>
|
||||
<path d="M20 42c0-6 24-6 24 0" stroke="white" stroke-width="3" fill="none" stroke-linecap="round"/>
|
||||
<defs>
|
||||
<linearGradient id="tealGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#4ECDC4"/>
|
||||
<stop offset="100%" stop-color="#06B6D4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>חוות דעת אישיות</h3>
|
||||
<p>קראו מה סטודנטים ובוגרים אמיתיים חושבים על המוסד והמסלול שלהם. נקודת מבט אותנטית שתעזור לכם לבחור נכון.</p>
|
||||
<a href="#" class="service-link">
|
||||
לפרטים נוספים
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12H19M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<article class="service-card reveal" style="--delay: 3">
|
||||
<div class="service-icon service-icon--orange">
|
||||
<svg viewBox="0 0 64 64" aria-hidden="true">
|
||||
<circle cx="32" cy="32" r="28" fill="url(#orangeGrad)"/>
|
||||
<path d="M22 42V26L32 18L42 26V42" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<rect x="28" y="32" width="8" height="10" stroke="white" stroke-width="2" fill="none"/>
|
||||
<defs>
|
||||
<linearGradient id="orangeGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FFA94D"/>
|
||||
<stop offset="100%" stop-color="#FFE066"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>השוואת מוסדות לימוד</h3>
|
||||
<p>אוניברסיטאות, מכללות ומוסדות נוספים — כל המידע על תנאי קבלה, מלגות, חיי קמפוס ויוקרה אקדמית במקום אחד.</p>
|
||||
<a href="#" class="service-link">
|
||||
לפרטים נוספים
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12H19M12 5l7 7-7 7" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<div class="about-layout">
|
||||
<div class="about-content">
|
||||
<header class="section-header reveal">
|
||||
<span class="section-tag">מי אנחנו</span>
|
||||
<h2 class="section-title">אודות פורטל לימודים</h2>
|
||||
</header>
|
||||
<div class="about-text reveal">
|
||||
<p>
|
||||
פורטל לימודים נולד מתוך הבנה פשוטה: הבחירה היכן ומה ללמוד היא אחת ההחלטות המשמעותיות בחיים, ומגיע לכם מידע אמיתי ומקיף כדי לקבל אותה.
|
||||
</p>
|
||||
<p>
|
||||
אנחנו מאמינים שהקול החשוב ביותר הוא של מי שכבר עברו את הדרך — סטודנטים ובוגרים שחוו את המסלול על בשרם. לכן, לצד המידע האובייקטיבי, אנחנו מביאים את הסיפורים האישיים שלהם.
|
||||
</p>
|
||||
<p>
|
||||
הפורטל שלנו מכסה את כל מוסדות הלימוד המוכרים בישראל, מאות תכניות לימוד, ומספק מידע מעודכן על כל סוגי מבחני הקבלה — כי אתם צריכים לראות את התמונה המלאה.
|
||||
</p>
|
||||
</div>
|
||||
<ul class="about-features reveal">
|
||||
<li class="feature">
|
||||
<span class="feature-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/></svg>
|
||||
</span>
|
||||
<span class="feature-text">מידע מדויק ומעודכן</span>
|
||||
</li>
|
||||
<li class="feature">
|
||||
<span class="feature-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/><circle cx="9" cy="7" r="4" stroke="currentColor" stroke-width="2" fill="none"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/></svg>
|
||||
</span>
|
||||
<span class="feature-text">חוות דעת אותנטיות</span>
|
||||
</li>
|
||||
<li class="feature">
|
||||
<span class="feature-icon" aria-hidden="true">
|
||||
<svg viewBox="0 0 24 24"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
</span>
|
||||
<span class="feature-text">חינם לחלוטין</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<aside class="about-visual reveal" aria-hidden="true">
|
||||
<div class="visual-illustration">
|
||||
<svg viewBox="0 0 300 300" class="illustration-svg">
|
||||
<defs>
|
||||
<linearGradient id="illustGrad1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#FF6B6B" stop-opacity="0.2"/>
|
||||
<stop offset="100%" stop-color="#4ECDC4" stop-opacity="0.2"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="illustGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#A855F7"/>
|
||||
<stop offset="100%" stop-color="#4ECDC4"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="150" cy="150" r="120" fill="url(#illustGrad1)"/>
|
||||
<rect x="80" y="100" width="140" height="100" rx="12" fill="white" stroke="url(#illustGrad2)" stroke-width="3"/>
|
||||
<line x1="100" y1="130" x2="200" y2="130" stroke="#E5E5E5" stroke-width="2"/>
|
||||
<line x1="100" y1="150" x2="180" y2="150" stroke="#E5E5E5" stroke-width="2"/>
|
||||
<line x1="100" y1="170" x2="160" y2="170" stroke="#E5E5E5" stroke-width="2"/>
|
||||
<circle cx="220" cy="80" r="30" fill="#FF6B6B" opacity="0.8"/>
|
||||
<path d="M210 80 L218 88 L232 72" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<circle cx="70" cy="200" r="25" fill="#4ECDC4" opacity="0.8"/>
|
||||
<path d="M60 200 L70 190 L80 200 L70 210 Z" fill="white"/>
|
||||
<circle cx="240" cy="220" r="20" fill="#A855F7" opacity="0.8"/>
|
||||
<path d="M232 220 L240 212 L248 220 M240 212 V228" stroke="white" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="faq" class="faq">
|
||||
<div class="container">
|
||||
<header class="section-header reveal">
|
||||
<span class="section-tag">יש שאלות?</span>
|
||||
<h2 class="section-title">שאלות נפוצות</h2>
|
||||
<p class="section-desc">התשובות לשאלות שהכי מעניינות אתכם</p>
|
||||
</header>
|
||||
|
||||
<div class="faq-list">
|
||||
<details class="faq-item reveal" style="--delay: 0">
|
||||
<summary class="faq-question">
|
||||
<span>מה ההבדל בין אוניברסיטה למכללה?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="faq-answer">
|
||||
<p>אוניברסיטאות הן מוסדות מחקריים גדולים המציעים מגוון רחב של תארים בכל הרמות (תואר ראשון, שני ושלישי). הן בדרך כלל בעלות דרישות קבלה גבוהות יותר ומתמקדות גם במחקר אקדמי.</p>
|
||||
<p>מכללות אקדמיות מציעות בעיקר תארים ראשונים ולעיתים גם שניים, עם דגש על הוראה מעשית יותר. חלקן מתמחות בתחומים ספציפיים כמו הנדסה, עיצוב או חינוך.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq-item reveal" style="--delay: 1">
|
||||
<summary class="faq-question">
|
||||
<span>מה זה מבחן פסיכומטרי ולמה הוא חשוב?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="faq-answer">
|
||||
<p>המבחן הפסיכומטרי הוא מבחן סטנדרטי שנועד לחזות הצלחה בלימודים אקדמיים. הוא בודק חשיבה כמותית, חשיבה מילולית ואנגלית.</p>
|
||||
<p>הציון הפסיכומטרי, יחד עם ציוני הבגרות, משמש כקריטריון קבלה למרבית מוסדות הלימוד בישראל. ניתן להיבחן מספר פעמים, והציון הגבוה ביותר הוא שנלקח בחשבון.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq-item reveal" style="--delay: 2">
|
||||
<summary class="faq-question">
|
||||
<span>מה זה מבחן אמיר״ם ומתי משתמשים בו?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="faq-answer">
|
||||
<p>אמיר״ם (אבחון מיון ראשוני ממוחשב) הוא מבחן כניסה לאוניברסיטה הפתוחה ולחלק מהמכללות. הוא קצר יותר מהפסיכומטרי ובודק יכולות דומות.</p>
|
||||
<p>המבחן מתאים במיוחד למי שרוצה להתחיל ללמוד באופן מיידי או למי שמחפש אלטרנטיבה לפסיכומטרי. חשוב לבדוק אילו מוסדות מכירים בו.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq-item reveal" style="--delay: 3">
|
||||
<summary class="faq-question">
|
||||
<span>איך אני יודע איזה תחום לימודים מתאים לי?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="faq-answer">
|
||||
<p>הבחירה בתחום לימודים היא אישית ותלויה בשילוב של תחומי עניין, יכולות, ושיקולי קריירה. מומלץ לחשוב על מה מרתק אתכם, במה אתם טובים, ואיפה אתם רואים את עצמכם בעתיד.</p>
|
||||
<p>בפורטל שלנו תוכלו לקרוא על מגוון רחב של תחומים, להכיר את תכנית הלימודים, ולשמוע מסטודנטים ובוגרים על החוויה שלהם — זה יכול לעזור לכם להתחבר לבחירה הנכונה.</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details class="faq-item reveal" style="--delay: 4">
|
||||
<summary class="faq-question">
|
||||
<span>האם חוות הדעת באתר אמיתיות?</span>
|
||||
<svg class="faq-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 5v14M5 12h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</summary>
|
||||
<div class="faq-answer">
|
||||
<p>בהחלט! כל חוות הדעת בפורטל נכתבות על ידי סטודנטים ובוגרים אמיתיים. אנחנו מקפידים על אימות ומוודאים שהכותבים אכן למדו במוסד ובמסלול עליו הם כותבים.</p>
|
||||
<p>אנחנו מאמינים שמידע אותנטי הוא המפתח לקבלת החלטות טובות, ולכן לא מאפשרים תוכן ממומן או חוות דעת מטעם המוסדות עצמם.</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<div class="contact-wrapper">
|
||||
<div class="contact-info reveal">
|
||||
<header class="section-header">
|
||||
<span class="section-tag">דברו איתנו</span>
|
||||
<h2 class="section-title">יצירת קשר</h2>
|
||||
</header>
|
||||
<p class="contact-desc">
|
||||
יש לכם שאלה? הצעה לשיפור? רוצים לשתף את החוויה שלכם? נשמח לשמוע מכם!
|
||||
</p>
|
||||
<div class="contact-methods">
|
||||
<div class="contact-method">
|
||||
<div class="method-icon">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||
<path d="M22 6l-10 7L2 6" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="method-text">
|
||||
<span class="method-label">אימייל</span>
|
||||
<a href="mailto:info@limoodim.co.il">info@limoodim.co.il</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-method">
|
||||
<div class="method-icon">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/>
|
||||
<path d="M12 6v6l4 2" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="method-text">
|
||||
<span class="method-label">זמני מענה</span>
|
||||
<span>ימים א׳-ה׳, 9:00-17:00</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="contact-form reveal" action="#" method="post" novalidate>
|
||||
<div class="form-status" role="alert" aria-live="polite"></div>
|
||||
<div class="form-group">
|
||||
<label for="name">שם מלא</label>
|
||||
<input type="text" id="name" name="name" required autocomplete="name">
|
||||
<span class="form-error">נא להזין שם מלא</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">כתובת אימייל</label>
|
||||
<input type="email" id="email" name="email" required autocomplete="email">
|
||||
<span class="form-error">נא להזין כתובת אימייל תקינה</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="subject">נושא הפנייה</label>
|
||||
<select id="subject" name="subject" required>
|
||||
<option value="">בחרו נושא</option>
|
||||
<option value="question">שאלה כללית</option>
|
||||
<option value="suggestion">הצעה לשיפור</option>
|
||||
<option value="review">רוצה לכתוב חוות דעת</option>
|
||||
<option value="bug">דיווח על תקלה</option>
|
||||
<option value="other">אחר</option>
|
||||
</select>
|
||||
<span class="form-error">נא לבחור נושא</span>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">תוכן ההודעה</label>
|
||||
<textarea id="message" name="message" rows="5" required></textarea>
|
||||
<span class="form-error">נא להזין את תוכן ההודעה</span>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-full">
|
||||
<span>שלח הודעה</span>
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<a href="#hero" class="logo">
|
||||
<svg class="logo-icon" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<defs>
|
||||
<linearGradient id="logoGradFooter" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="var(--coral)"/>
|
||||
<stop offset="50%" stop-color="var(--purple)"/>
|
||||
<stop offset="100%" stop-color="var(--teal)"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<circle cx="24" cy="24" r="22" fill="url(#logoGradFooter)"/>
|
||||
<path d="M14 32 L24 12 L34 32 M17 26 H31" stroke="white" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<span class="logo-text">פורטל לימודים</span>
|
||||
</a>
|
||||
<p class="footer-tagline">המדריך האישי שלך ללימודים אקדמיים</p>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<a href="#services">שירותים</a>
|
||||
<a href="#about">אודות</a>
|
||||
<a href="#faq">שאלות נפוצות</a>
|
||||
<a href="#contact">יצירת קשר</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 פורטל לימודים. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,213 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
// Mobile Navigation Toggle
|
||||
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');
|
||||
});
|
||||
|
||||
navLinks.querySelectorAll('a').forEach(link => {
|
||||
link.addEventListener('click', () => {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
if (!navToggle.contains(e.target) && !navLinks.contains(e.target)) {
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navLinks.classList.remove('active');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Reveal on Scroll
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
|
||||
if (!prefersReducedMotion && revealElements.length > 0) {
|
||||
const revealObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('revealed');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
});
|
||||
|
||||
revealElements.forEach(el => revealObserver.observe(el));
|
||||
} else {
|
||||
revealElements.forEach(el => el.classList.add('revealed'));
|
||||
}
|
||||
|
||||
// Pause blob animations when hero is out of view
|
||||
const heroBg = document.querySelector('.hero-bg');
|
||||
if (heroBg && !prefersReducedMotion) {
|
||||
const heroObserver = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('in-view');
|
||||
} else {
|
||||
entry.target.classList.remove('in-view');
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0
|
||||
});
|
||||
|
||||
heroObserver.observe(heroBg);
|
||||
} else if (heroBg) {
|
||||
heroBg.classList.add('in-view');
|
||||
}
|
||||
|
||||
// Smooth scroll for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const href = this.getAttribute('href');
|
||||
if (href === '#') return;
|
||||
|
||||
const target = document.querySelector(href);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
|
||||
const headerOffset = 80;
|
||||
const elementPosition = target.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
window.scrollTo(0, offsetPosition);
|
||||
} else {
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Header shadow on scroll
|
||||
const header = document.querySelector('.site-header');
|
||||
|
||||
if (header) {
|
||||
let ticking = false;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(() => {
|
||||
if (window.pageYOffset > 100) {
|
||||
header.style.boxShadow = '0 4px 20px rgba(0, 0, 0, 0.08)';
|
||||
} else {
|
||||
header.style.boxShadow = 'none';
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
}, { passive: true });
|
||||
}
|
||||
|
||||
// Form validation and submission
|
||||
const contactForm = document.querySelector('.contact-form');
|
||||
|
||||
if (contactForm) {
|
||||
const formStatus = contactForm.querySelector('.form-status');
|
||||
|
||||
// Email validation regex
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
// Clear error state on input
|
||||
contactForm.querySelectorAll('input, select, textarea').forEach(field => {
|
||||
field.addEventListener('input', () => {
|
||||
const group = field.closest('.form-group');
|
||||
if (group) {
|
||||
group.classList.remove('has-error');
|
||||
field.classList.remove('error');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
// Reset status
|
||||
formStatus.className = 'form-status';
|
||||
formStatus.textContent = '';
|
||||
|
||||
// Validate fields
|
||||
const fields = {
|
||||
name: { el: this.querySelector('#name'), validate: v => v.trim().length > 0 },
|
||||
email: { el: this.querySelector('#email'), validate: v => emailRegex.test(v.trim()) },
|
||||
subject: { el: this.querySelector('#subject'), validate: v => v.trim().length > 0 },
|
||||
message: { el: this.querySelector('#message'), validate: v => v.trim().length > 0 }
|
||||
};
|
||||
|
||||
let isValid = true;
|
||||
let firstError = null;
|
||||
|
||||
Object.values(fields).forEach(({ el, validate }) => {
|
||||
const group = el.closest('.form-group');
|
||||
const valid = validate(el.value);
|
||||
|
||||
if (!valid) {
|
||||
isValid = false;
|
||||
group.classList.add('has-error');
|
||||
el.classList.add('error');
|
||||
if (!firstError) firstError = el;
|
||||
} else {
|
||||
group.classList.remove('has-error');
|
||||
el.classList.remove('error');
|
||||
}
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
formStatus.className = 'form-status error';
|
||||
formStatus.textContent = 'נא למלא את כל השדות הנדרשים';
|
||||
if (firstError) firstError.focus();
|
||||
return;
|
||||
}
|
||||
|
||||
const submitBtn = this.querySelector('button[type="submit"]');
|
||||
const originalHTML = submitBtn.innerHTML;
|
||||
|
||||
submitBtn.innerHTML = '<span>שולח...</span>';
|
||||
submitBtn.disabled = true;
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
formStatus.className = 'form-status success';
|
||||
formStatus.textContent = 'ההודעה נשלחה בהצלחה! נחזור אליך בהקדם.';
|
||||
|
||||
submitBtn.innerHTML = '<span>נשלח בהצלחה ✓</span>';
|
||||
submitBtn.style.background = 'var(--teal)';
|
||||
|
||||
setTimeout(() => {
|
||||
submitBtn.innerHTML = originalHTML;
|
||||
submitBtn.style.background = '';
|
||||
submitBtn.disabled = false;
|
||||
contactForm.reset();
|
||||
|
||||
// Clear success message after a bit
|
||||
setTimeout(() => {
|
||||
formStatus.className = 'form-status';
|
||||
formStatus.textContent = '';
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
}, 1500);
|
||||
});
|
||||
}
|
||||
|
||||
// FAQ - native details/summary, no custom animation that fights browser
|
||||
// The CSS handles the icon rotation; no JS override needed
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user