Initial AI-generated site
This commit is contained in:
+897
@@ -0,0 +1,897 @@
|
||||
<!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'><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=Assistant:wght@300;400;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Announcement Bar -->
|
||||
<div class="announcement-bar">
|
||||
<p>משלוח חינם בהזמנות מעל ₪200 | שירות לקוחות זמין בטלפון ובוואטסאפ</p>
|
||||
</div>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-inner">
|
||||
<button class="menu-toggle" aria-label="תפריט" aria-expanded="false">
|
||||
<span class="hamburger"></span>
|
||||
</button>
|
||||
|
||||
<a href="/" class="logo">המדריך ציוד משרדי</a>
|
||||
|
||||
<nav class="main-nav" aria-label="תפריט ראשי">
|
||||
<ul class="nav-list">
|
||||
<li class="nav-item has-dropdown">
|
||||
<a href="#" class="nav-link">משרד</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-inner">
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">חדש במשרד</h3>
|
||||
<ul>
|
||||
<li><a href="#">יומנים 2025</a></li>
|
||||
<li><a href="#">חזרה ללימודים</a></li>
|
||||
<li><a href="#">חזרה לעבודה</a></li>
|
||||
<li><a href="#">מותגים מובילים</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">יומנים ולוחות שנה</h3>
|
||||
<ul>
|
||||
<li><a href="#">יומנים יומיים</a></li>
|
||||
<li><a href="#">יומנים שבועיים</a></li>
|
||||
<li><a href="#">יומנים חודשיים</a></li>
|
||||
<li><a href="#">לוחות שנה</a></li>
|
||||
<li><a href="#">מילויים ליומנים</a></li>
|
||||
<li><a href="#">פלנרים ללא תאריך</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">מחברות</h3>
|
||||
<ul>
|
||||
<li><a href="#">כל המחברות</a></li>
|
||||
<li><a href="#">מחברות חלקות</a></li>
|
||||
<li><a href="#">מחברות שורות</a></li>
|
||||
<li><a href="#">מחברות משבצות</a></li>
|
||||
<li><a href="#">מחברות נקודות</a></li>
|
||||
<li><a href="#">יומני מסע</a></li>
|
||||
<li><a href="#">מחברות ספירלה</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">כלי כתיבה</h3>
|
||||
<ul>
|
||||
<li><a href="#">כל כלי הכתיבה</a></li>
|
||||
<li><a href="#">עטים כדוריים</a></li>
|
||||
<li><a href="#">עטי נובע</a></li>
|
||||
<li><a href="#">עטי רולר</a></li>
|
||||
<li><a href="#">עטי ג׳ל</a></li>
|
||||
<li><a href="#">עפרונות עץ</a></li>
|
||||
<li><a href="#">עפרונות מכניים</a></li>
|
||||
<li><a href="#">טושים ומרקרים</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item has-dropdown">
|
||||
<a href="#" class="nav-link">ציוד שולחני</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-inner">
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">כלי שולחן</h3>
|
||||
<ul>
|
||||
<li><a href="#">אטבים</a></li>
|
||||
<li><a href="#">חותכנים</a></li>
|
||||
<li><a href="#">מחקים</a></li>
|
||||
<li><a href="#">דבקים</a></li>
|
||||
<li><a href="#">מגנטים</a></li>
|
||||
<li><a href="#">סרטי הדבקה</a></li>
|
||||
<li><a href="#">מחדדים</a></li>
|
||||
<li><a href="#">סרגלים</a></li>
|
||||
<li><a href="#">מספריים</a></li>
|
||||
<li><a href="#">חותמות</a></li>
|
||||
<li><a href="#">שדכנים</a></li>
|
||||
<li><a href="#">מדבקות</a></li>
|
||||
<li><a href="#">פתקיות דביקות</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">ארגון</h3>
|
||||
<ul>
|
||||
<li><a href="#">תיקיות וקלסרים</a></li>
|
||||
<li><a href="#">מארגני ניירות</a></li>
|
||||
<li><a href="#">משקולות נייר</a></li>
|
||||
<li><a href="#">קלמרים</a></li>
|
||||
<li><a href="#">כוסות עטים</a></li>
|
||||
<li><a href="#">נרתיקים</a></li>
|
||||
<li><a href="#">קופסאות אחסון</a></li>
|
||||
<li><a href="#">מגשים</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item has-dropdown">
|
||||
<a href="#" class="nav-link">מחשבים וטכנולוגיה</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-inner">
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">מחשבים</h3>
|
||||
<ul>
|
||||
<li><a href="#">מחשבים נייחים</a></li>
|
||||
<li><a href="#">מחשבים ניידים</a></li>
|
||||
<li><a href="#">מסכים</a></li>
|
||||
<li><a href="#">מקלדות</a></li>
|
||||
<li><a href="#">עכברים</a></li>
|
||||
<li><a href="#">אביזרי מחשב</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">הדפסה</h3>
|
||||
<ul>
|
||||
<li><a href="#">מדפסות</a></li>
|
||||
<li><a href="#">סורקים</a></li>
|
||||
<li><a href="#">טונרים ודיו</a></li>
|
||||
<li><a href="#">נייר הדפסה</a></li>
|
||||
<li><a href="#">מדפסות תלת מימד</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">אחסון</h3>
|
||||
<ul>
|
||||
<li><a href="#">כונני USB</a></li>
|
||||
<li><a href="#">כוננים חיצוניים</a></li>
|
||||
<li><a href="#">כרטיסי זיכרון</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item has-dropdown">
|
||||
<a href="#" class="nav-link">ריהוט משרדי</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-inner">
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">ישיבה</h3>
|
||||
<ul>
|
||||
<li><a href="#">כיסאות משרדיים</a></li>
|
||||
<li><a href="#">כיסאות מנהלים</a></li>
|
||||
<li><a href="#">כיסאות אורחים</a></li>
|
||||
<li><a href="#">הדומים</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">שולחנות</h3>
|
||||
<ul>
|
||||
<li><a href="#">שולחנות עבודה</a></li>
|
||||
<li><a href="#">שולחנות מנהלים</a></li>
|
||||
<li><a href="#">שולחנות ישיבות</a></li>
|
||||
<li><a href="#">שולחנות עמידה</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">אחסון</h3>
|
||||
<ul>
|
||||
<li><a href="#">ארונות</a></li>
|
||||
<li><a href="#">כוננויות</a></li>
|
||||
<li><a href="#">מדפים</a></li>
|
||||
<li><a href="#">עגלות</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item has-dropdown">
|
||||
<a href="#" class="nav-link">מתנות</a>
|
||||
<div class="dropdown-menu">
|
||||
<div class="dropdown-inner">
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">רעיונות למתנות</h3>
|
||||
<ul>
|
||||
<li><a href="#">פריטים לשמור או לתת</a></li>
|
||||
<li><a href="#">מתנות למשרד</a></li>
|
||||
<li><a href="#">מתנות לבית</a></li>
|
||||
<li><a href="#">מתנות לילדים</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">לפי מחיר</h3>
|
||||
<ul>
|
||||
<li><a href="#">מתנות עד ₪50</a></li>
|
||||
<li><a href="#">מתנות עד ₪100</a></li>
|
||||
<li><a href="#">מתנות עד ₪200</a></li>
|
||||
<li><a href="#">מתנות עד ₪500</a></li>
|
||||
<li><a href="#">מתנות מעל ₪500</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">לפי צבע</h3>
|
||||
<ul>
|
||||
<li><a href="#">מתנות שחורות</a></li>
|
||||
<li><a href="#">מתנות כחולות</a></li>
|
||||
<li><a href="#">מתנות ירוקות</a></li>
|
||||
<li><a href="#">מתנות לבנות</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<h3 class="dropdown-title">כרטיסי מתנה</h3>
|
||||
<ul>
|
||||
<li><a href="#">כרטיס מתנה</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item has-dropdown">
|
||||
<a href="#" class="nav-link">מותגים</a>
|
||||
<div class="dropdown-menu dropdown-menu-brands">
|
||||
<div class="dropdown-inner">
|
||||
<div class="dropdown-column">
|
||||
<ul>
|
||||
<li><a href="#">Pilot</a></li>
|
||||
<li><a href="#">Pentel</a></li>
|
||||
<li><a href="#">Stabilo</a></li>
|
||||
<li><a href="#">Faber-Castell</a></li>
|
||||
<li><a href="#">Schneider</a></li>
|
||||
<li><a href="#">Zebra</a></li>
|
||||
<li><a href="#">Uni-ball</a></li>
|
||||
<li><a href="#">Bic</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<ul>
|
||||
<li><a href="#">HP</a></li>
|
||||
<li><a href="#">Canon</a></li>
|
||||
<li><a href="#">Epson</a></li>
|
||||
<li><a href="#">Brother</a></li>
|
||||
<li><a href="#">Xerox</a></li>
|
||||
<li><a href="#">Samsung</a></li>
|
||||
<li><a href="#">Logitech</a></li>
|
||||
<li><a href="#">Microsoft</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="dropdown-column">
|
||||
<ul>
|
||||
<li><a href="#">Kores</a></li>
|
||||
<li><a href="#">Scotch</a></li>
|
||||
<li><a href="#">Post-it</a></li>
|
||||
<li><a href="#">Leitz</a></li>
|
||||
<li><a href="#">Esselte</a></li>
|
||||
<li><a href="#">Fellowes</a></li>
|
||||
<li><a href="#">Rexel</a></li>
|
||||
<li><a href="#">כל המותגים</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<div class="header-actions">
|
||||
<button class="search-toggle" aria-label="חיפוש">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
</button>
|
||||
<a href="#" class="account-link" aria-label="חשבון">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
|
||||
<circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
</a>
|
||||
<button class="cart-toggle" aria-label="עגלת קניות">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"/>
|
||||
<line x1="3" y1="6" x2="21" y2="6"/>
|
||||
<path d="M16 10a4 4 0 0 1-8 0"/>
|
||||
</svg>
|
||||
<span class="cart-count">0</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Search Overlay -->
|
||||
<div class="search-overlay" aria-hidden="true">
|
||||
<div class="search-container">
|
||||
<form class="search-form" role="search">
|
||||
<label for="search-input" class="visually-hidden">חיפוש</label>
|
||||
<input type="search" id="search-input" placeholder="חיפוש מוצרים..." autocomplete="off">
|
||||
<button type="submit" aria-label="חפש">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
<button class="search-close" aria-label="סגור חיפוש">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu -->
|
||||
<div class="mobile-menu" aria-hidden="true">
|
||||
<div class="mobile-menu-header">
|
||||
<span class="mobile-menu-title">תפריט</span>
|
||||
<button class="mobile-menu-close" aria-label="סגור תפריט">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<nav class="mobile-nav">
|
||||
<ul class="mobile-nav-list">
|
||||
<li class="mobile-nav-item">
|
||||
<button class="mobile-nav-link" aria-expanded="false">
|
||||
משרד
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="mobile-submenu">
|
||||
<li><a href="#">יומנים 2025</a></li>
|
||||
<li><a href="#">חזרה ללימודים</a></li>
|
||||
<li><a href="#">חזרה לעבודה</a></li>
|
||||
<li><a href="#">כל המחברות</a></li>
|
||||
<li><a href="#">כל כלי הכתיבה</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mobile-nav-item">
|
||||
<button class="mobile-nav-link" aria-expanded="false">
|
||||
ציוד שולחני
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="mobile-submenu">
|
||||
<li><a href="#">אטבים</a></li>
|
||||
<li><a href="#">מספריים</a></li>
|
||||
<li><a href="#">שדכנים</a></li>
|
||||
<li><a href="#">תיקיות וקלסרים</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mobile-nav-item">
|
||||
<button class="mobile-nav-link" aria-expanded="false">
|
||||
מחשבים וטכנולוגיה
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="mobile-submenu">
|
||||
<li><a href="#">מחשבים נייחים</a></li>
|
||||
<li><a href="#">מחשבים ניידים</a></li>
|
||||
<li><a href="#">מדפסות</a></li>
|
||||
<li><a href="#">טונרים ודיו</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mobile-nav-item">
|
||||
<button class="mobile-nav-link" aria-expanded="false">
|
||||
ריהוט משרדי
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<ul class="mobile-submenu">
|
||||
<li><a href="#">כיסאות משרדיים</a></li>
|
||||
<li><a href="#">שולחנות עבודה</a></li>
|
||||
<li><a href="#">ארונות</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mobile-nav-item">
|
||||
<a href="#" class="mobile-nav-link">מתנות</a>
|
||||
</li>
|
||||
<li class="mobile-nav-item">
|
||||
<a href="#" class="mobile-nav-link">מותגים</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div class="mobile-menu-footer">
|
||||
<a href="#">התחברות</a>
|
||||
<a href="#">יצירת חשבון</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cart Drawer -->
|
||||
<div class="cart-drawer" aria-hidden="true">
|
||||
<div class="cart-drawer-header">
|
||||
<h2>העגלה שלך</h2>
|
||||
<button class="cart-drawer-close" aria-label="סגור עגלה">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="cart-drawer-content">
|
||||
<div class="cart-empty">
|
||||
<p>העגלה שלך ריקה</p>
|
||||
<a href="#" class="btn btn-primary">המשך בקניות</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-drawer-footer">
|
||||
<div class="cart-notes">
|
||||
<label for="cart-notes">הערות להזמנה</label>
|
||||
<textarea id="cart-notes" placeholder="הוסף הערה להזמנה שלך"></textarea>
|
||||
</div>
|
||||
<div class="cart-subtotal">
|
||||
<span>סה״כ ביניים</span>
|
||||
<span>₪0.00</span>
|
||||
</div>
|
||||
<p class="cart-shipping-note">מיסים ומשלוח יחושבו בקופה.</p>
|
||||
<button class="btn btn-primary btn-full" disabled>לתשלום</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cart-overlay"></div>
|
||||
|
||||
<main>
|
||||
<!-- Hero Section -->
|
||||
<section class="hero">
|
||||
<div class="hero-slide active">
|
||||
<div class="hero-bg hero-bg-1"></div>
|
||||
<div class="hero-content">
|
||||
<span class="hero-label">חדש בחנות</span>
|
||||
<h1>יומנים 2025</h1>
|
||||
<p>קולקציית היומנים והפלנרים החדשה הגיעה. מגוון סגנונות, גדלים ופורמטים לתכנון השנה החדשה.</p>
|
||||
<a href="#" class="btn btn-primary">לצפייה בקולקציה</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-slide">
|
||||
<div class="hero-bg hero-bg-2"></div>
|
||||
<div class="hero-content">
|
||||
<span class="hero-label">מבצע מיוחד</span>
|
||||
<h1>חזרה לעבודה</h1>
|
||||
<p>כל מה שצריך להתחלה טובה של השנה. ציוד משרדי איכותי במחירים מיוחדים.</p>
|
||||
<a href="#" class="btn btn-primary">לקניות</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-slide">
|
||||
<div class="hero-bg hero-bg-3"></div>
|
||||
<div class="hero-content">
|
||||
<span class="hero-label">קולקציה חדשה</span>
|
||||
<h1>ריהוט משרדי</h1>
|
||||
<p>כיסאות ארגונומיים, שולחנות עבודה ופתרונות אחסון לסביבת עבודה מושלמת.</p>
|
||||
<a href="#" class="btn btn-primary">גלו עוד</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero-nav">
|
||||
<button class="hero-nav-btn active" aria-label="שקופית 1"></button>
|
||||
<button class="hero-nav-btn" aria-label="שקופית 2"></button>
|
||||
<button class="hero-nav-btn" aria-label="שקופית 3"></button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Categories -->
|
||||
<section class="featured-categories">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>קטגוריות מובילות</h2>
|
||||
</div>
|
||||
<div class="categories-grid">
|
||||
<a href="#" class="category-card category-card-large">
|
||||
<div class="category-bg category-bg-office"></div>
|
||||
<div class="category-content">
|
||||
<h3>ציוד משרדי</h3>
|
||||
<span class="category-link">צפייה בכל המוצרים</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-bg category-bg-writing"></div>
|
||||
<div class="category-content">
|
||||
<h3>כלי כתיבה</h3>
|
||||
<span class="category-link">לקניות</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-bg category-bg-computers"></div>
|
||||
<div class="category-content">
|
||||
<h3>מחשבים</h3>
|
||||
<span class="category-link">לקניות</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-bg category-bg-furniture"></div>
|
||||
<div class="category-content">
|
||||
<h3>ריהוט</h3>
|
||||
<span class="category-link">לקניות</span>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="category-card">
|
||||
<div class="category-bg category-bg-printers"></div>
|
||||
<div class="category-content">
|
||||
<h3>מדפסות</h3>
|
||||
<span class="category-link">לקניות</span>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- New Arrivals -->
|
||||
<section class="products-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>חדש בחנות</h2>
|
||||
<a href="#" class="section-link">צפייה בכל</a>
|
||||
</div>
|
||||
<div class="products-grid">
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image">
|
||||
<div class="product-image-placeholder product-placeholder-1"></div>
|
||||
<span class="product-badge">חדש</span>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">יומן שבועי 2025 - A5</h3>
|
||||
<p class="product-brand">לויכטורם</p>
|
||||
<p class="product-price">₪89.00</p>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image">
|
||||
<div class="product-image-placeholder product-placeholder-2"></div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">עט כדורי פיילוט G2 - שחור</h3>
|
||||
<p class="product-brand">פיילוט</p>
|
||||
<p class="product-price">₪12.00</p>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image">
|
||||
<div class="product-image-placeholder product-placeholder-3"></div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">מחברת משבצות A4 - 100 דף</h3>
|
||||
<p class="product-brand">מידורי</p>
|
||||
<p class="product-price">₪45.00</p>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image">
|
||||
<div class="product-image-placeholder product-placeholder-4"></div>
|
||||
<span class="product-badge badge-sale">מבצע</span>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">סט מרקרים 6 צבעים</h3>
|
||||
<p class="product-brand">סטבילו</p>
|
||||
<p class="product-price">
|
||||
<span class="price-sale">₪35.00</span>
|
||||
<span class="price-original">₪45.00</span>
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Banner -->
|
||||
<section class="promo-banner">
|
||||
<div class="promo-bg"></div>
|
||||
<div class="promo-content">
|
||||
<span class="promo-label">השראה</span>
|
||||
<h2>פריטים לשמור או לתת</h2>
|
||||
<p>מבחר מתנות מיוחדות לעמיתים, לקוחות וחברים. כי מתנה טובה היא לא רק מתנה - היא חוויה.</p>
|
||||
<a href="#" class="btn btn-secondary">לגלות מתנות</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Best Sellers -->
|
||||
<section class="products-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>רבי מכר</h2>
|
||||
<a href="#" class="section-link">צפייה בכל</a>
|
||||
</div>
|
||||
<div class="products-grid">
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image">
|
||||
<div class="product-image-placeholder product-placeholder-5"></div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">כיסא משרדי ארגונומי</h3>
|
||||
<p class="product-brand">ארגופלקס</p>
|
||||
<p class="product-price">₪890.00</p>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image">
|
||||
<div class="product-image-placeholder product-placeholder-6"></div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">מדפסת לייזר HP</h3>
|
||||
<p class="product-brand">HP</p>
|
||||
<p class="product-price">₪450.00</p>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image">
|
||||
<div class="product-image-placeholder product-placeholder-7"></div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">שולחן עבודה 140 ס״מ</h3>
|
||||
<p class="product-brand">המדריך</p>
|
||||
<p class="product-price">₪650.00</p>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
<article class="product-card">
|
||||
<a href="#" class="product-link">
|
||||
<div class="product-image">
|
||||
<div class="product-image-placeholder product-placeholder-8"></div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-title">חבילת נייר A4 - 500 דף</h3>
|
||||
<p class="product-brand">המדריך</p>
|
||||
<p class="product-price">₪25.00</p>
|
||||
</div>
|
||||
</a>
|
||||
<button class="product-quick-add" aria-label="הוספה מהירה לעגלה">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Collections Grid -->
|
||||
<section class="collections-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2>קולקציות נבחרות</h2>
|
||||
</div>
|
||||
<div class="collections-grid">
|
||||
<a href="#" class="collection-card">
|
||||
<div class="collection-bg collection-bg-1"></div>
|
||||
<div class="collection-content">
|
||||
<h3>חזרה ללימודים</h3>
|
||||
<p>כל מה שצריך לשנת הלימודים</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="collection-card">
|
||||
<div class="collection-bg collection-bg-2"></div>
|
||||
<div class="collection-content">
|
||||
<h3>חזרה לעבודה</h3>
|
||||
<p>ציוד איכותי לסביבת העבודה</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="#" class="collection-card">
|
||||
<div class="collection-bg collection-bg-3"></div>
|
||||
<div class="collection-content">
|
||||
<h3>מותגים מובילים</h3>
|
||||
<p>הכירו את המותגים האהובים עלינו</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features -->
|
||||
<section class="features-section">
|
||||
<div class="container">
|
||||
<div class="features-grid">
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<rect x="1" y="3" width="15" height="13"/>
|
||||
<polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
|
||||
<circle cx="5.5" cy="18.5" r="2.5"/>
|
||||
<circle cx="18.5" cy="18.5" r="2.5"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>משלוח מהיר</h3>
|
||||
<p>משלוחים לכל הארץ תוך 2-5 ימי עסקים</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>איכות מובטחת</h3>
|
||||
<p>מוצרים מהמותגים המובילים בעולם</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<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>
|
||||
</div>
|
||||
<h3>שירות לקוחות</h3>
|
||||
<p>צוות מקצועי זמין לכל שאלה</p>
|
||||
</div>
|
||||
<div class="feature">
|
||||
<div class="feature-icon">
|
||||
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/>
|
||||
<polyline points="17 6 23 6 23 12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3>מחירים תחרותיים</h3>
|
||||
<p>הצעות מחיר מיוחדות לעסקים וארגונים</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Newsletter -->
|
||||
<section class="newsletter-section">
|
||||
<div class="container">
|
||||
<div class="newsletter-content">
|
||||
<h2>הישארו מעודכנים</h2>
|
||||
<p>הירשמו לניוזלטר שלנו וקבלו עדכונים על מוצרים חדשים, מבצעים והשראה למשרד.</p>
|
||||
<form class="newsletter-form">
|
||||
<label for="newsletter-email" class="visually-hidden">כתובת אימייל</label>
|
||||
<input type="email" id="newsletter-email" placeholder="כתובת אימייל" required>
|
||||
<button type="submit" class="btn btn-primary">הרשמה</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-column">
|
||||
<h4>קניות</h4>
|
||||
<ul>
|
||||
<li><a href="#">ציוד משרדי</a></li>
|
||||
<li><a href="#">כלי כתיבה</a></li>
|
||||
<li><a href="#">מחשבים וטכנולוגיה</a></li>
|
||||
<li><a href="#">ריהוט משרדי</a></li>
|
||||
<li><a href="#">מדפסות וסורקים</a></li>
|
||||
<li><a href="#">מתנות</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>מידע</h4>
|
||||
<ul>
|
||||
<li><a href="#">אודות</a></li>
|
||||
<li><a href="#">משלוחים והחזרות</a></li>
|
||||
<li><a href="#">שאלות נפוצות</a></li>
|
||||
<li><a href="#">תנאי שימוש</a></li>
|
||||
<li><a href="#">מדיניות פרטיות</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>צרו קשר</h4>
|
||||
<ul class="contact-list">
|
||||
<li>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<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>
|
||||
ישראל
|
||||
</li>
|
||||
<li>
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||||
<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"/>
|
||||
<polyline points="22,6 12,13 2,6"/>
|
||||
</svg>
|
||||
<a href="mailto:info@h1944.co.il">info@h1944.co.il</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>עקבו אחרינו</h4>
|
||||
<div class="social-links">
|
||||
<a href="#" aria-label="פייסבוק">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="אינסטגרם">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
|
||||
<path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
|
||||
<line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="#" aria-label="וואטסאפ">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p>© 2025 המדריך ציוד משרדי. כל הזכויות שמורות.</p>
|
||||
<div class="payment-methods">
|
||||
<span class="payment-icon">
|
||||
<svg viewBox="0 0 38 24" width="38" height="24" role="img" aria-label="ויזה">
|
||||
<rect width="38" height="24" rx="3" fill="#1434CB"/>
|
||||
<path d="M15.5 16.5h-2.2l1.4-8.5h2.2l-1.4 8.5zm7.3-8.3c-.4-.2-1.1-.3-2-.3-2.2 0-3.7 1.2-3.7 2.8 0 1.2 1.1 1.9 2 2.3.9.4 1.2.7 1.2 1.1 0 .6-.7.9-1.4.9-.9 0-1.4-.1-2.2-.5l-.3-.1-.3 2c.5.2 1.5.4 2.5.4 2.3 0 3.8-1.2 3.8-2.9 0-1-.6-1.7-1.8-2.3-.8-.4-1.2-.6-1.2-1 0-.3.4-.7 1.2-.7.7 0 1.2.1 1.6.3l.2.1.4-2z" fill="#fff"/>
|
||||
</svg>
|
||||
</span>
|
||||
<span class="payment-icon">
|
||||
<svg viewBox="0 0 38 24" width="38" height="24" role="img" aria-label="מאסטרקארד">
|
||||
<rect width="38" height="24" rx="3" fill="#000"/>
|
||||
<circle cx="15" cy="12" r="7" fill="#EB001B"/>
|
||||
<circle cx="23" cy="12" r="7" fill="#F79E1B"/>
|
||||
<path d="M19 6.3a7 7 0 0 0 0 11.4 7 7 0 0 0 0-11.4z" fill="#FF5F00"/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,306 @@
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// DOM Elements
|
||||
const menuToggle = document.querySelector('.menu-toggle');
|
||||
const mobileMenu = document.querySelector('.mobile-menu');
|
||||
const mobileMenuClose = document.querySelector('.mobile-menu-close');
|
||||
const mobileNavItems = document.querySelectorAll('.mobile-nav-item button');
|
||||
|
||||
const searchToggle = document.querySelector('.search-toggle');
|
||||
const searchOverlay = document.querySelector('.search-overlay');
|
||||
const searchClose = document.querySelector('.search-close');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
|
||||
const cartToggle = document.querySelector('.cart-toggle');
|
||||
const cartDrawer = document.querySelector('.cart-drawer');
|
||||
const cartDrawerClose = document.querySelector('.cart-drawer-close');
|
||||
const cartOverlay = document.querySelector('.cart-overlay');
|
||||
|
||||
const heroSlides = document.querySelectorAll('.hero-slide');
|
||||
const heroNavBtns = document.querySelectorAll('.hero-nav-btn');
|
||||
|
||||
// Mobile Menu
|
||||
function openMobileMenu() {
|
||||
mobileMenu.classList.add('active');
|
||||
mobileMenu.setAttribute('aria-hidden', 'false');
|
||||
menuToggle.setAttribute('aria-expanded', 'true');
|
||||
document.body.classList.add('menu-open');
|
||||
}
|
||||
|
||||
function closeMobileMenu() {
|
||||
mobileMenu.classList.remove('active');
|
||||
mobileMenu.setAttribute('aria-hidden', 'true');
|
||||
menuToggle.setAttribute('aria-expanded', 'false');
|
||||
document.body.classList.remove('menu-open');
|
||||
}
|
||||
|
||||
if (menuToggle && mobileMenu) {
|
||||
menuToggle.addEventListener('click', openMobileMenu);
|
||||
mobileMenuClose.addEventListener('click', closeMobileMenu);
|
||||
|
||||
// Close on escape
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && mobileMenu.classList.contains('active')) {
|
||||
closeMobileMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Mobile Nav Accordion
|
||||
mobileNavItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const parent = this.closest('.mobile-nav-item');
|
||||
const isOpen = parent.classList.contains('open');
|
||||
|
||||
// Close all
|
||||
document.querySelectorAll('.mobile-nav-item.open').forEach(openItem => {
|
||||
openItem.classList.remove('open');
|
||||
openItem.querySelector('button').setAttribute('aria-expanded', 'false');
|
||||
});
|
||||
|
||||
// Toggle current
|
||||
if (!isOpen) {
|
||||
parent.classList.add('open');
|
||||
this.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Search
|
||||
function openSearch() {
|
||||
searchOverlay.classList.add('active');
|
||||
searchOverlay.setAttribute('aria-hidden', 'false');
|
||||
document.body.classList.add('search-open');
|
||||
setTimeout(() => searchInput.focus(), 100);
|
||||
}
|
||||
|
||||
function closeSearch() {
|
||||
searchOverlay.classList.remove('active');
|
||||
searchOverlay.setAttribute('aria-hidden', 'true');
|
||||
document.body.classList.remove('search-open');
|
||||
searchInput.value = '';
|
||||
}
|
||||
|
||||
if (searchToggle && searchOverlay) {
|
||||
searchToggle.addEventListener('click', openSearch);
|
||||
searchClose.addEventListener('click', closeSearch);
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && searchOverlay.classList.contains('active')) {
|
||||
closeSearch();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Cart Drawer
|
||||
function openCart() {
|
||||
cartDrawer.classList.add('active');
|
||||
cartDrawer.setAttribute('aria-hidden', 'false');
|
||||
cartOverlay.classList.add('active');
|
||||
document.body.classList.add('cart-open');
|
||||
}
|
||||
|
||||
function closeCart() {
|
||||
cartDrawer.classList.remove('active');
|
||||
cartDrawer.setAttribute('aria-hidden', 'true');
|
||||
cartOverlay.classList.remove('active');
|
||||
document.body.classList.remove('cart-open');
|
||||
}
|
||||
|
||||
if (cartToggle && cartDrawer) {
|
||||
cartToggle.addEventListener('click', openCart);
|
||||
cartDrawerClose.addEventListener('click', closeCart);
|
||||
cartOverlay.addEventListener('click', closeCart);
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape' && cartDrawer.classList.contains('active')) {
|
||||
closeCart();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Hero Slider
|
||||
let currentSlide = 0;
|
||||
let slideInterval;
|
||||
|
||||
function showSlide(index) {
|
||||
heroSlides.forEach((slide, i) => {
|
||||
slide.classList.toggle('active', i === index);
|
||||
});
|
||||
heroNavBtns.forEach((btn, i) => {
|
||||
btn.classList.toggle('active', i === index);
|
||||
});
|
||||
currentSlide = index;
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
const next = (currentSlide + 1) % heroSlides.length;
|
||||
showSlide(next);
|
||||
}
|
||||
|
||||
function startSlider() {
|
||||
slideInterval = setInterval(nextSlide, 5000);
|
||||
}
|
||||
|
||||
function stopSlider() {
|
||||
clearInterval(slideInterval);
|
||||
}
|
||||
|
||||
if (heroSlides.length > 1 && heroNavBtns.length > 0) {
|
||||
heroNavBtns.forEach((btn, index) => {
|
||||
btn.addEventListener('click', () => {
|
||||
stopSlider();
|
||||
showSlide(index);
|
||||
startSlider();
|
||||
});
|
||||
});
|
||||
|
||||
// Check for reduced motion preference
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
if (!prefersReducedMotion.matches) {
|
||||
startSlider();
|
||||
}
|
||||
|
||||
prefersReducedMotion.addEventListener('change', () => {
|
||||
if (prefersReducedMotion.matches) {
|
||||
stopSlider();
|
||||
} else {
|
||||
startSlider();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Scroll Animations
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const animateOnScroll = (entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
|
||||
|
||||
if (!prefersReducedMotion.matches) {
|
||||
const observer = new IntersectionObserver(animateOnScroll, observerOptions);
|
||||
|
||||
// Add animation classes
|
||||
const animatedElements = document.querySelectorAll(
|
||||
'.product-card, .category-card, .collection-card, .feature'
|
||||
);
|
||||
|
||||
animatedElements.forEach((el, index) => {
|
||||
el.style.opacity = '0';
|
||||
el.style.transform = 'translateY(20px)';
|
||||
el.style.transition = `opacity 0.6s ease ${index * 0.05}s, transform 0.6s ease ${index * 0.05}s`;
|
||||
observer.observe(el);
|
||||
});
|
||||
|
||||
// Add visible class styles
|
||||
const style = document.createElement('style');
|
||||
style.textContent = `
|
||||
.product-card.visible,
|
||||
.category-card.visible,
|
||||
.collection-card.visible,
|
||||
.feature.visible {
|
||||
opacity: 1 !important;
|
||||
transform: translateY(0) !important;
|
||||
}
|
||||
`;
|
||||
document.head.appendChild(style);
|
||||
}
|
||||
|
||||
// Quick Add to Cart
|
||||
const quickAddButtons = document.querySelectorAll('.product-quick-add');
|
||||
|
||||
quickAddButtons.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Visual feedback
|
||||
const originalHTML = btn.innerHTML;
|
||||
btn.innerHTML = `
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="20 6 9 17 4 12"/>
|
||||
</svg>
|
||||
`;
|
||||
btn.style.background = 'var(--color-text)';
|
||||
btn.style.borderColor = 'var(--color-text)';
|
||||
btn.style.color = 'var(--color-white)';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.innerHTML = originalHTML;
|
||||
btn.style.background = '';
|
||||
btn.style.borderColor = '';
|
||||
btn.style.color = '';
|
||||
}, 1500);
|
||||
|
||||
// Update cart count
|
||||
const cartCount = document.querySelector('.cart-count');
|
||||
if (cartCount) {
|
||||
const current = parseInt(cartCount.textContent) || 0;
|
||||
cartCount.textContent = current + 1;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Newsletter Form
|
||||
const newsletterForm = document.querySelector('.newsletter-form');
|
||||
|
||||
if (newsletterForm) {
|
||||
newsletterForm.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const email = newsletterForm.querySelector('input[type="email"]');
|
||||
const btn = newsletterForm.querySelector('button');
|
||||
const originalText = btn.textContent;
|
||||
|
||||
btn.textContent = 'נרשמת בהצלחה!';
|
||||
btn.disabled = true;
|
||||
email.value = '';
|
||||
|
||||
setTimeout(() => {
|
||||
btn.textContent = originalText;
|
||||
btn.disabled = false;
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
// Dropdown keyboard navigation
|
||||
const dropdownItems = document.querySelectorAll('.nav-item.has-dropdown');
|
||||
|
||||
dropdownItems.forEach(item => {
|
||||
const link = item.querySelector('.nav-link');
|
||||
const dropdown = item.querySelector('.dropdown-menu');
|
||||
|
||||
link.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
dropdown.style.opacity = '1';
|
||||
dropdown.style.visibility = 'visible';
|
||||
dropdown.style.transform = 'translateY(0)';
|
||||
|
||||
const firstLink = dropdown.querySelector('a');
|
||||
if (firstLink) firstLink.focus();
|
||||
}
|
||||
});
|
||||
|
||||
dropdown.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
dropdown.style.opacity = '';
|
||||
dropdown.style.visibility = '';
|
||||
dropdown.style.transform = '';
|
||||
link.focus();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user