Initial AI-generated site
This commit is contained in:
+396
@@ -0,0 +1,396 @@
|
||||
<!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="theme-color" content="#0a0a0f">
|
||||
<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'><text y='.9em' font-size='90'>✂️</text></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=Secular+One&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<nav class="nav-container">
|
||||
<a href="#" class="logo">
|
||||
<svg class="logo-icon" viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M12 8c-2 0-4 1-4 3v26c0 2 2 4 4 4 1 0 2-.5 2.5-1.5L24 24l-9.5-15.5C14 8.5 13 8 12 8z" fill="currentColor"/>
|
||||
<path d="M36 8c2 0 4 1 4 3v26c0 2-2 4-4 4-1 0-2-.5-2.5-1.5L24 24l9.5-15.5C34 8.5 35 8 36 8z" fill="currentColor" opacity="0.6"/>
|
||||
<circle cx="12" cy="11" r="2" fill="var(--accent)"/>
|
||||
<circle cx="36" cy="11" r="2" fill="var(--accent)"/>
|
||||
</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-menu">
|
||||
<li><a href="#catalog">קטלוג</a></li>
|
||||
<li><a href="#about">אודות</a></li>
|
||||
<li><a href="#contact" class="btn-nav">צרו קשר</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<p class="hero-eyebrow">מאז 2012 בפתח תקווה</p>
|
||||
<h1 class="hero-title">
|
||||
<span class="hero-line">הציוד המקצועי</span>
|
||||
<span class="hero-line hero-accent">למספרה שלך</span>
|
||||
</h1>
|
||||
<p class="hero-subtitle">אביזרים, תכשירי טיפוח וצבעי שיער ממיטב המותגים העולמיים. הכל במקום אחד.</p>
|
||||
<div class="hero-actions">
|
||||
<a href="#catalog" class="btn btn-primary">לקטלוג המוצרים</a>
|
||||
<a href="tel:03-9876543" class="btn btn-secondary">
|
||||
<svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.55.57 1 1 0 011 1v3.49a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.24 1.01l-2.2 2.2z" fill="currentColor"/>
|
||||
</svg>
|
||||
03-987-6543
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-visual" aria-hidden="true">
|
||||
<div class="hero-pattern"></div>
|
||||
<div class="hero-tools">
|
||||
<div class="hero-tool-item">
|
||||
<svg class="hero-scissors" viewBox="0 0 120 120">
|
||||
<ellipse cx="30" cy="95" rx="18" ry="20" fill="none" stroke="var(--text)" stroke-width="3"/>
|
||||
<ellipse cx="90" cy="95" rx="18" ry="20" fill="none" stroke="var(--text)" stroke-width="3"/>
|
||||
<path d="M30 75 L55 35 L60 40 L38 78" fill="var(--text)"/>
|
||||
<path d="M90 75 L65 35 L60 40 L82 78" fill="var(--text)"/>
|
||||
<circle cx="60" cy="40" r="5" fill="var(--accent)"/>
|
||||
</svg>
|
||||
<span class="hero-tool-label">מספריים מקצועיים</span>
|
||||
</div>
|
||||
<div class="hero-tool-item">
|
||||
<svg class="hero-comb" viewBox="0 0 80 120">
|
||||
<rect x="10" y="10" width="60" height="100" rx="8" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<rect x="10" y="10" width="60" height="25" rx="8" fill="var(--accent)" opacity="0.3"/>
|
||||
<line x1="20" y1="45" x2="20" y2="100" stroke="var(--text)" stroke-width="2" opacity="0.6"/>
|
||||
<line x1="30" y1="45" x2="30" y2="100" stroke="var(--text)" stroke-width="2" opacity="0.6"/>
|
||||
<line x1="40" y1="45" x2="40" y2="100" stroke="var(--text)" stroke-width="2" opacity="0.6"/>
|
||||
<line x1="50" y1="45" x2="50" y2="100" stroke="var(--text)" stroke-width="2" opacity="0.6"/>
|
||||
<line x1="60" y1="45" x2="60" y2="100" stroke="var(--text)" stroke-width="2" opacity="0.6"/>
|
||||
</svg>
|
||||
<span class="hero-tool-label">מסרקים</span>
|
||||
</div>
|
||||
<div class="hero-tool-item">
|
||||
<svg class="hero-clipper" viewBox="0 0 80 100">
|
||||
<rect x="25" y="8" width="30" height="60" rx="4" fill="var(--text)" opacity="0.9"/>
|
||||
<rect x="20" y="62" width="40" height="30" rx="6" fill="var(--accent)"/>
|
||||
<rect x="27" y="12" width="26" height="10" rx="2" fill="var(--accent)" opacity="0.4"/>
|
||||
<line x1="30" y1="68" x2="50" y2="68" stroke="var(--bg)" stroke-width="2"/>
|
||||
<line x1="30" y1="74" x2="50" y2="74" stroke="var(--bg)" stroke-width="2"/>
|
||||
<line x1="30" y1="80" x2="50" y2="80" stroke="var(--bg)" stroke-width="2"/>
|
||||
</svg>
|
||||
<span class="hero-tool-label">מכונות תספורת</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-brands">
|
||||
<span>Wella</span>
|
||||
<span>Schwarzkopf</span>
|
||||
<span>L'Oréal</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="features">
|
||||
<div class="features-grid">
|
||||
<article class="feature-card feature-card-main reveal">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M24 4L4 14v20l20 10 20-10V14L24 4z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M4 14l20 10 20-10M24 44V24" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>מוצרים מקוריים</h3>
|
||||
<p>רק מוצרים מקוריים ממותגים מובילים כמו Wella, Schwarzkopf ו-L'Oréal. אחריות מלאה על כל פריט.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||
<circle cx="24" cy="24" r="20" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M24 12v12l8 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>משלוח מהיר</h3>
|
||||
<p>הזמנות נשלחות תוך 24 שעות. איסוף עצמי מהחנות ללא עלות.</p>
|
||||
</article>
|
||||
<article class="feature-card reveal">
|
||||
<div class="feature-icon">
|
||||
<svg viewBox="0 0 48 48" aria-hidden="true">
|
||||
<path d="M24 4C12 4 4 12 4 24s8 20 20 20 20-8 20-20S36 4 24 4z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M16 24l6 6 12-12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>ייעוץ מקצועי</h3>
|
||||
<p>צוות מנוסה שמכיר את התחום. נשמח לייעץ ולהתאים מוצרים.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="catalog" class="catalog">
|
||||
<header class="section-header reveal">
|
||||
<h2>קטלוג מוצרים</h2>
|
||||
<p>מגוון רחב של ציוד מקצועי למספרות</p>
|
||||
</header>
|
||||
|
||||
<div class="catalog-filters reveal" role="group" aria-label="סינון מוצרים">
|
||||
<button class="filter-btn active" data-filter="all" aria-pressed="true">הכל</button>
|
||||
<button class="filter-btn" data-filter="tools" aria-pressed="false">כלי עבודה</button>
|
||||
<button class="filter-btn" data-filter="color" aria-pressed="false">צבעי שיער</button>
|
||||
<button class="filter-btn" data-filter="care" aria-pressed="false">טיפוח</button>
|
||||
<button class="filter-btn" data-filter="furniture" aria-pressed="false">ריהוט</button>
|
||||
</div>
|
||||
|
||||
<div class="catalog-grid">
|
||||
<article class="product-card reveal" data-category="tools">
|
||||
<div class="product-image" style="--gradient: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%)">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<rect x="35" y="10" width="10" height="50" rx="2" fill="var(--accent)" opacity="0.9"/>
|
||||
<rect x="30" y="55" width="20" height="15" rx="3" fill="var(--accent)"/>
|
||||
<rect x="33" y="12" width="14" height="8" fill="var(--accent)" opacity="0.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span class="product-category">כלי עבודה</span>
|
||||
<h3>מכונת תספורת מקצועית</h3>
|
||||
<p>מכונה חזקה עם להבים מיוחדים לכל סוגי השיער</p>
|
||||
<span class="product-cta">לפרטים ומחיר צרו קשר</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal" data-category="tools">
|
||||
<div class="product-image" style="--gradient: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%)">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<path d="M25 60 L35 20 L40 22 L32 60Z" fill="var(--accent)" opacity="0.9"/>
|
||||
<path d="M55 60 L45 20 L40 22 L48 60Z" fill="var(--accent)" opacity="0.9"/>
|
||||
<circle cx="40" cy="20" r="4" fill="var(--accent)"/>
|
||||
<ellipse cx="25" cy="65" rx="8" ry="10" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
<ellipse cx="55" cy="65" rx="8" ry="10" fill="none" stroke="var(--accent)" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span class="product-category">כלי עבודה</span>
|
||||
<h3>מספריים יפניים</h3>
|
||||
<p>מספריים מקצועיים מפלדה יפנית איכותית</p>
|
||||
<span class="product-cta">לפרטים ומחיר צרו קשר</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal" data-category="color">
|
||||
<div class="product-image" style="--gradient: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%)">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<rect x="25" y="20" width="12" height="40" rx="3" fill="var(--accent)" opacity="0.9"/>
|
||||
<rect x="42" y="25" width="12" height="35" rx="3" fill="var(--accent)" opacity="0.7"/>
|
||||
<rect x="34" y="15" width="12" height="45" rx="3" fill="var(--accent)" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span class="product-category">צבעי שיער</span>
|
||||
<h3>צבע שיער מקצועי</h3>
|
||||
<p>מגוון גוונים רחב עם כיסוי שיער שיבה מושלם</p>
|
||||
<span class="product-cta">לפרטים ומחיר צרו קשר</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal" data-category="care">
|
||||
<div class="product-image" style="--gradient: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%)">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<path d="M40 15 C40 15 25 25 25 40 C25 55 35 65 40 65 C45 65 55 55 55 40 C55 25 40 15 40 15Z" fill="var(--accent)" opacity="0.9"/>
|
||||
<ellipse cx="40" cy="12" rx="6" ry="4" fill="var(--accent)"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span class="product-category">טיפוח</span>
|
||||
<h3>שמפו מקצועי</h3>
|
||||
<p>שמפו לשימוש יומיומי במספרות, כמויות גדולות</p>
|
||||
<span class="product-cta">לפרטים ומחיר צרו קשר</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal" data-category="care">
|
||||
<div class="product-image" style="--gradient: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%)">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<rect x="28" y="25" width="24" height="35" rx="5" fill="var(--accent)" opacity="0.9"/>
|
||||
<rect x="32" y="18" width="16" height="10" rx="3" fill="var(--accent)" opacity="0.7"/>
|
||||
<rect x="35" y="60" width="10" height="5" rx="2" fill="var(--accent)" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span class="product-category">טיפוח</span>
|
||||
<h3>מסכת שיער</h3>
|
||||
<p>מסכה מזינה לשיקום שיער פגום ויבש</p>
|
||||
<span class="product-cta">לפרטים ומחיר צרו קשר</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal" data-category="tools">
|
||||
<div class="product-image" style="--gradient: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%)">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<ellipse cx="40" cy="40" rx="20" ry="8" fill="var(--accent)" opacity="0.9"/>
|
||||
<path d="M25 40 L25 55 Q40 65 55 55 L55 40" fill="var(--accent)" opacity="0.7"/>
|
||||
<rect x="37" y="20" width="6" height="20" rx="3" fill="var(--accent)" opacity="0.8"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span class="product-category">כלי עבודה</span>
|
||||
<h3>פן מקצועי</h3>
|
||||
<p>פן עוצמתי עם טכנולוגיה מתקדמת להגנה על השיער</p>
|
||||
<span class="product-cta">לפרטים ומחיר צרו קשר</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal" data-category="color">
|
||||
<div class="product-image" style="--gradient: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%)">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<rect x="20" y="30" width="40" height="30" rx="4" fill="var(--accent)" opacity="0.9"/>
|
||||
<rect x="25" y="25" width="30" height="8" rx="2" fill="var(--accent)" opacity="0.7"/>
|
||||
<circle cx="30" cy="45" r="5" fill="none" stroke="var(--bg)" stroke-width="2"/>
|
||||
<circle cx="50" cy="45" r="5" fill="none" stroke="var(--bg)" stroke-width="2"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span class="product-category">צבעי שיער</span>
|
||||
<h3>ערכת אוקסי</h3>
|
||||
<p>מי חמצן באחוזים שונים לצביעה מקצועית</p>
|
||||
<span class="product-cta">לפרטים ומחיר צרו קשר</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="product-card reveal" data-category="furniture">
|
||||
<div class="product-image" style="--gradient: linear-gradient(135deg, #1a1a24 0%, #2a2a3a 100%)">
|
||||
<svg viewBox="0 0 80 80" aria-hidden="true">
|
||||
<rect x="25" y="35" width="30" height="25" rx="3" fill="var(--accent)" opacity="0.9"/>
|
||||
<rect x="20" y="25" width="40" height="12" rx="5" fill="var(--accent)" opacity="0.7"/>
|
||||
<rect x="28" y="60" width="4" height="10" fill="var(--accent)" opacity="0.6"/>
|
||||
<rect x="48" y="60" width="4" height="10" fill="var(--accent)" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<span class="product-category">ריהוט</span>
|
||||
<h3>כיסא מספרה</h3>
|
||||
<p>כיסא הידראולי מקצועי עם ריפוד איכותי</p>
|
||||
<span class="product-cta">לפרטים ומחיר צרו קשר</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="catalog-cta reveal">
|
||||
<p>מחפשים מוצר ספציפי? יש לנו הרבה יותר במלאי!</p>
|
||||
<a href="#contact" class="btn btn-primary">דברו איתנו</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="about" class="about">
|
||||
<div class="about-content reveal">
|
||||
<h2>למה לבחור בנו?</h2>
|
||||
<div class="about-text">
|
||||
<p>כבר למעלה מעשור אנחנו מספקים ציוד מקצועי למספרות ומכוני יופי בכל הארץ. החנות שלנו בפתח תקווה היא מרכז ידע וניסיון בתחום.</p>
|
||||
<p>אנחנו מאמינים שציוד איכותי הוא הבסיס לעבודה מקצועית. לכן, אנחנו בוחרים בקפידה כל מוצר ועובדים רק עם יבואנים מורשים.</p>
|
||||
</div>
|
||||
<ul class="about-stats">
|
||||
<li>
|
||||
<span class="stat-number">10+</span>
|
||||
<span class="stat-label">שנות ניסיון</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="stat-number">500+</span>
|
||||
<span class="stat-label">מוצרים במלאי</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="stat-number">1000+</span>
|
||||
<span class="stat-label">לקוחות מרוצים</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="about-visual reveal" aria-hidden="true">
|
||||
<div class="about-shape"></div>
|
||||
<div class="about-badge">
|
||||
<span class="about-badge-number">12</span>
|
||||
<span class="about-badge-text">שנים בתחום</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact">
|
||||
<div class="contact-info reveal">
|
||||
<h2>צרו קשר</h2>
|
||||
<p>נשמח לעזור לכם למצוא את הציוד המתאים. מלאו את הטופס או בואו לבקר אותנו בחנות.</p>
|
||||
|
||||
<address class="contact-details">
|
||||
<a href="https://maps.google.com/?q=פתח+תקווה" target="_blank" rel="noopener" class="contact-item">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7z" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<circle cx="12" cy="9" r="2.5" fill="currentColor"/>
|
||||
</svg>
|
||||
<span>פתח תקווה (הכתובת המדויקת בתיאום טלפוני)</span>
|
||||
</a>
|
||||
<a href="tel:03-9876543" class="contact-item">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<path d="M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24 11.36 11.36 0 003.55.57 1 1 0 011 1v3.49a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1 11.36 11.36 0 00.57 3.55 1 1 0 01-.24 1.01l-2.2 2.2z" fill="currentColor"/>
|
||||
</svg>
|
||||
<span>03-987-6543</span>
|
||||
</a>
|
||||
<div class="contact-item">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true">
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 6v6l4 2" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>א׳-ה׳ 9:00-19:00 | ו׳ 9:00-14:00</span>
|
||||
</div>
|
||||
</address>
|
||||
</div>
|
||||
|
||||
<form class="contact-form reveal" id="contactForm" action="#" method="POST">
|
||||
<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="phone">טלפון</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 form-group-full">
|
||||
<label for="message">הודעה / פירוט הזמנה</label>
|
||||
<textarea id="message" name="message" rows="4" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary btn-submit">שליחת הודעה</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-brand">
|
||||
<span class="footer-logo">ציוד למספרות</span>
|
||||
<p>אביזרים ותכשירים מקצועיים</p>
|
||||
</div>
|
||||
<nav class="footer-nav" aria-label="ניווט תחתון">
|
||||
<a href="#catalog">קטלוג</a>
|
||||
<a href="#about">אודות</a>
|
||||
<a href="#contact">צרו קשר</a>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2024 ציוד למספרות. כל הזכויות שמורות.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,152 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Mobile Navigation Toggle
|
||||
const navToggle = document.querySelector('.nav-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
if (navToggle && navMenu) {
|
||||
navToggle.addEventListener('click', function() {
|
||||
const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
|
||||
navToggle.setAttribute('aria-expanded', !isExpanded);
|
||||
navMenu.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
navMenu.querySelectorAll('a').forEach(function(link) {
|
||||
link.addEventListener('click', function() {
|
||||
navMenu.classList.remove('active');
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
});
|
||||
|
||||
// Close menu on escape key
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape' && navMenu.classList.contains('active')) {
|
||||
navMenu.classList.remove('active');
|
||||
navToggle.setAttribute('aria-expanded', 'false');
|
||||
navToggle.focus();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Catalog Filtering
|
||||
const filterButtons = document.querySelectorAll('.filter-btn');
|
||||
const productCards = document.querySelectorAll('.product-card');
|
||||
|
||||
filterButtons.forEach(function(button) {
|
||||
button.addEventListener('click', function() {
|
||||
const filter = this.dataset.filter;
|
||||
|
||||
// Update active button
|
||||
filterButtons.forEach(function(btn) {
|
||||
btn.classList.remove('active');
|
||||
btn.setAttribute('aria-pressed', 'false');
|
||||
});
|
||||
this.classList.add('active');
|
||||
this.setAttribute('aria-pressed', 'true');
|
||||
|
||||
// Filter products
|
||||
productCards.forEach(function(card) {
|
||||
if (filter === 'all' || card.dataset.category === filter) {
|
||||
card.classList.remove('hidden');
|
||||
} else {
|
||||
card.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Form Handling
|
||||
const contactForm = document.getElementById('contactForm');
|
||||
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(contactForm);
|
||||
const data = {};
|
||||
formData.forEach(function(value, key) {
|
||||
data[key] = value;
|
||||
});
|
||||
|
||||
// Simulate form submission
|
||||
const submitBtn = contactForm.querySelector('.btn-submit');
|
||||
const originalText = submitBtn.textContent;
|
||||
submitBtn.textContent = 'שולח...';
|
||||
submitBtn.disabled = true;
|
||||
submitBtn.style.opacity = '0.7';
|
||||
|
||||
setTimeout(function() {
|
||||
submitBtn.textContent = 'נשלח בהצלחה!';
|
||||
submitBtn.style.background = '#38a169';
|
||||
submitBtn.style.opacity = '1';
|
||||
|
||||
setTimeout(function() {
|
||||
contactForm.reset();
|
||||
submitBtn.textContent = originalText;
|
||||
submitBtn.style.background = '';
|
||||
submitBtn.disabled = false;
|
||||
}, 2500);
|
||||
}, 1200);
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll Reveal Animation
|
||||
const revealElements = document.querySelectorAll('.reveal');
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
|
||||
if (prefersReducedMotion.matches) {
|
||||
// Immediately show all elements if user prefers reduced motion
|
||||
revealElements.forEach(function(el) {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
} else if ('IntersectionObserver' in window) {
|
||||
const revealObserver = new IntersectionObserver(function(entries) {
|
||||
entries.forEach(function(entry) {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
revealObserver.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -40px 0px'
|
||||
});
|
||||
|
||||
revealElements.forEach(function(el) {
|
||||
revealObserver.observe(el);
|
||||
});
|
||||
} else {
|
||||
// Fallback for browsers without IntersectionObserver
|
||||
revealElements.forEach(function(el) {
|
||||
el.classList.add('visible');
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scroll offset for fixed header
|
||||
document.querySelectorAll('a[href^="#"]').forEach(function(anchor) {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const target = document.querySelector(targetId);
|
||||
if (target) {
|
||||
e.preventDefault();
|
||||
const headerOffset = 80;
|
||||
const elementPosition = target.getBoundingClientRect().top;
|
||||
const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
|
||||
|
||||
if (prefersReducedMotion.matches) {
|
||||
window.scrollTo(0, offsetPosition);
|
||||
} else {
|
||||
window.scrollTo({
|
||||
top: offsetPosition,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user