316 lines
20 KiB
PHP
316 lines
20 KiB
PHP
<?php
|
||
/**
|
||
* هدر سایت - مطابق با UI Kolli.html
|
||
*
|
||
* @package Motayeb
|
||
* @version 1.0.1
|
||
*
|
||
* تغییرات:
|
||
* - حذف Tailwind Play CDN (رفع ارور CSP eval + افزایش سرعت)
|
||
* - حذف بلوک <style> تکراری
|
||
* - یکسان‌سازی منبع فونت Vazirmatn (محلی، بدون CDN گوگل)
|
||
* - انتقال پیکربندی Tailwind به tailwind.config.js
|
||
* - بارگذاری non-blocking برای FontAwesome و Iconify
|
||
* - پیش‌بارگذاری فونت‌ها با preconnect و preload
|
||
*/
|
||
|
||
?>
|
||
<!DOCTYPE html>
|
||
<html <?php language_attributes(); ?> class="scroll-smooth">
|
||
<head>
|
||
<meta charset="<?php bloginfo( 'charset' ); ?>">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="theme-color" content="#2D5F3F">
|
||
|
||
<!-- جلوگیری از FOUC دارک مود — قبل از لود CSS اجرا می‌شه -->
|
||
<script>
|
||
(function() {
|
||
var match = document.cookie.match(/(?:^|;\s*)motayeb_darkmode=([^;]+)/);
|
||
if (match && decodeURIComponent(match[1]) === 'on') {
|
||
document.documentElement.classList.add('dark');
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<?php wp_head(); ?>
|
||
|
||
<!-- ============================================================
|
||
پیش‌بارگذاری فونت‌ها (Vazirmatn محلی)
|
||
============================================================ -->
|
||
<?php
|
||
$font_regular = get_theme_file_uri( '/assets/fonts/Vazirmatn-Regular.woff2' );
|
||
$font_bold = get_theme_file_uri( '/assets/fonts/Vazirmatn-Bold.woff2' );
|
||
?>
|
||
<link rel="preload" href="<?php echo esc_url( $font_regular ); ?>" as="font" type="font/woff2" crossorigin>
|
||
<link rel="preload" href="<?php echo esc_url( $font_bold ); ?>" as="font" type="font/woff2" crossorigin>
|
||
|
||
<!-- ============================================================
|
||
Iconify — non-blocking (فقط برای آیکون‌های UI)
|
||
توصیه: در آینده به SVG sprite محلی تبدیل شود
|
||
============================================================ -->
|
||
<link rel="preconnect" href="https://code.iconify.design">
|
||
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js" defer></script>
|
||
|
||
<!-- ============================================================
|
||
FontAwesome — non-blocking (فقط برای ستاره‌های امتیاز ووکامرس)
|
||
نکته: در آینده با SVG جایگزین شود تا حذف بشه
|
||
============================================================ -->
|
||
<link rel="preconnect" href="https://cdnjs.cloudflare.com">
|
||
<link rel="stylesheet"
|
||
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
|
||
media="print"
|
||
onload="this.media='all'">
|
||
<noscript>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
</noscript>
|
||
|
||
<!-- ============================================================
|
||
استایل‌های کمکی که Tailwind پوشش نمی‌ده
|
||
(الگوهای پس‌زمینه، اسکرول‌بار، انیمیشن‌های اختصاصی)
|
||
این بلاک سبک است و اجازه می‌ده sync لود بشه تا FOUC نباشه
|
||
============================================================ -->
|
||
<style>
|
||
/* الگوی لانه زنبوری */
|
||
.honeycomb-bg {
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50L0 16L28 0L56 16L56 50L28 66L28 100' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3Cpath d='M28 0L28 34L0 50L0 84L28 100L56 84L56 50L28 34' fill='none' stroke='%23D4A574' stroke-width='0.5' opacity='0.1'/%3E%3C/svg%3E");
|
||
}
|
||
/* الگوی برگ */
|
||
.leaf-pattern::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0; left: 0; right: 0; bottom: 0;
|
||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath d='M30 5C30 5 45 20 45 35C45 43.28 38.28 50 30 50C21.72 50 15 43.28 15 35C15 20 30 5 30 5Z' fill='none' stroke='%232D5F3F' stroke-width='0.5' opacity='0.05'/%3E%3C/svg%3E");
|
||
pointer-events: none;
|
||
}
|
||
/* اسکرول‌بار سفارشی */
|
||
::-webkit-scrollbar { width: 6px; }
|
||
::-webkit-scrollbar-track { background: #F5F0E8; }
|
||
::-webkit-scrollbar-thumb { background: #D4A574; border-radius: 3px; }
|
||
.dark ::-webkit-scrollbar-track { background: #1A1D23; }
|
||
.dark ::-webkit-scrollbar-thumb { background: #2D5F3F; }
|
||
|
||
/* کارت محصول — انیمیشن hover */
|
||
.product-card:hover .product-img { transform: scale(1.08); }
|
||
.product-card:hover .quick-actions { opacity: 1; transform: translateY(0); }
|
||
.quick-actions { opacity: 0; transform: translateY(10px); transition: all 0.3s ease; }
|
||
.product-img { transition: transform 0.5s ease; }
|
||
|
||
/* تب فعال */
|
||
.tab-active { color: #2D5F3F; border-color: #2D5F3F; }
|
||
.dark .tab-active { color: #6fb88a; border-color: #6fb88a; }
|
||
|
||
/* خط زیر منو */
|
||
.nav-link::after { content: ''; display: block; width: 0; height: 2px; background: #2D5F3F; transition: width 0.3s ease; }
|
||
.dark .nav-link::after { background: #6fb88a; }
|
||
.nav-link:hover::after { width: 100%; }
|
||
|
||
/* Toast و ناوبری پایین */
|
||
.toast { animation: motayebSlideUp 0.4s ease-out forwards; }
|
||
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0); }
|
||
|
||
/* گام‌های checkout و گالری */
|
||
.checkout-step.active { background: #2D5F3F; color: white; }
|
||
.dark .checkout-step.active { background: #6fb88a; color: #1A1D23; }
|
||
.gallery-thumb.active { border-color: #2D5F3F; }
|
||
.dark .gallery-thumb.active { border-color: #6fb88a; }
|
||
|
||
/* رفع قطعی باریک شدن کارت‌ها */
|
||
.product-card { width: 100% !important; min-width: 100% !important; }
|
||
|
||
@keyframes motayebSlideUp {
|
||
from { opacity: 0; transform: translateY(30px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body <?php body_class( 'bg-cream-100 text-earth-400 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300' ); ?>>
|
||
<?php wp_body_open(); ?>
|
||
|
||
<!-- ===== Toast Container ===== -->
|
||
<div id="toast-container" class="fixed top-24 left-1/2 -translate-x-1/2 z-[100] flex flex-col gap-2"></div>
|
||
|
||
<!-- ===== Search Overlay ===== -->
|
||
<div id="search-overlay" class="fixed inset-0 z-[90] bg-black/50 search-overlay hidden" onclick="closeSearch()">
|
||
<div class="max-w-2xl mx-auto mt-24 px-4" onclick="event.stopPropagation()">
|
||
<div class="bg-white dark:bg-dark-card rounded-2xl shadow-2xl p-6">
|
||
<div class="flex items-center gap-3 border-b border-cream-200 dark:border-dark-border pb-4">
|
||
<iconify-icon icon="lucide:search" width="22" class="text-forest-500 dark:text-forest-300"></iconify-icon>
|
||
<input id="search-input" type="text" placeholder="جستجو در محصولات..."
|
||
class="flex-1 bg-transparent text-lg outline-none placeholder:text-cream-400 dark:placeholder:text-dark-muted"
|
||
oninput="handleSearch(this.value)">
|
||
<button onclick="closeSearch()" class="text-cream-400 hover:text-earth-400 dark:text-dark-muted" aria-label="بستن">
|
||
<iconify-icon icon="lucide:x" width="22"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div id="search-results" class="pt-4 max-h-80 overflow-y-auto"></div>
|
||
<div id="search-suggestions" class="pt-4">
|
||
<p class="text-sm text-cream-500 dark:text-dark-muted mb-3">جستجوهای پرطرفدار</p>
|
||
<div class="flex flex-wrap gap-2">
|
||
<button onclick="document.getElementById('search-input').value='عسل';handleSearch('عسل')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">عسل طبیعی</button>
|
||
<button onclick="document.getElementById('search-input').value='ارده';handleSearch('ارده')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">ارده سنتی</button>
|
||
<button onclick="document.getElementById('search-input').value='سرکه';handleSearch('سرکه')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">سرکه انگور</button>
|
||
<button onclick="document.getElementById('search-input').value='چای';handleSearch('چای')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">دمنوش گیاهی</button>
|
||
<button onclick="document.getElementById('search-input').value='آجیل';handleSearch('آجیل')" class="px-3 py-1.5 bg-cream-100 dark:bg-dark-bg rounded-full text-sm hover:bg-forest-50 dark:hover:bg-forest-900 transition">آجیل مخلوط</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Cart Drawer ===== -->
|
||
<div id="cart-drawer" class="fixed inset-0 z-[80] hidden">
|
||
<div class="absolute inset-0 bg-black/50" onclick="closeCart()"></div>
|
||
<div class="absolute top-0 left-0 bottom-0 w-full max-w-md bg-white dark:bg-dark-card shadow-2xl transform transition-transform duration-300" id="cart-panel">
|
||
<div class="flex flex-col h-full">
|
||
<div class="flex items-center justify-between p-5 border-b border-cream-200 dark:border-dark-border">
|
||
<h3 class="text-lg font-bold">سبد خرید (<span id="cart-drawer-count">0</span>)</h3>
|
||
<button onclick="closeCart()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg transition" aria-label="بستن">
|
||
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<div id="cart-drawer-items" class="flex-1 overflow-y-auto p-5">
|
||
<div id="cart-empty" class="flex flex-col items-center justify-center h-full text-center">
|
||
<iconify-icon icon="lucide:shopping-bag" width="64" class="text-cream-400 dark:text-dark-muted mb-4"></iconify-icon>
|
||
<p class="text-cream-500 dark:text-dark-muted mb-4">سبد خرید شما خالی است</p>
|
||
<button onclick="closeCart()" class="px-6 py-2.5 bg-forest-500 text-white rounded-xl text-sm hover:bg-forest-600 transition">مشاهده محصولات</button>
|
||
</div>
|
||
<div id="cart-items-list" class="hidden space-y-4"></div>
|
||
</div>
|
||
<div id="cart-drawer-footer" class="hidden border-t border-cream-200 dark:border-dark-border p-5 space-y-3">
|
||
<div class="flex justify-between items-center">
|
||
<span class="text-cream-500 dark:text-dark-muted">جمع کل</span>
|
||
<span id="cart-drawer-total" class="text-lg font-bold text-forest-500 dark:text-forest-300"></span>
|
||
</div>
|
||
<button onclick="goToCheckout()" class="w-full py-3.5 bg-forest-500 text-white rounded-xl font-semibold hover:bg-forest-600 transition flex items-center justify-center gap-2">
|
||
<span>تکمیل خرید</span>
|
||
<iconify-icon icon="lucide:arrow-left" width="18"></iconify-icon>
|
||
</button>
|
||
<button onclick="closeCart()" class="w-full py-2.5 text-sm text-cream-500 dark:text-dark-muted hover:text-earth-400 transition">ادامه خرید</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Mobile Menu ===== -->
|
||
<div id="mobile-menu" class="fixed inset-0 z-[70] hidden">
|
||
<div class="absolute inset-0 bg-black/50" onclick="closeMobileMenu()"></div>
|
||
<div class="absolute top-0 right-0 bottom-0 w-80 max-w-[85vw] bg-white dark:bg-dark-card shadow-2xl overflow-y-auto" id="mobile-menu-panel">
|
||
<div class="p-5 border-b border-cream-200 dark:border-dark-border flex items-center justify-between">
|
||
<div class="flex items-center gap-2">
|
||
<div class="w-9 h-9 bg-forest-500 rounded-xl flex items-center justify-center">
|
||
<iconify-icon icon="lucide:leaf" width="18" class="text-white"></iconify-icon>
|
||
</div>
|
||
<span class="font-bold text-lg">مطیب</span>
|
||
</div>
|
||
<button onclick="closeMobileMenu()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg transition" aria-label="بستن">
|
||
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<nav class="p-4 space-y-1">
|
||
<?php
|
||
wp_nav_menu( array(
|
||
'theme_location' => 'primary',
|
||
'menu_class' => 'space-y-1',
|
||
'container' => false,
|
||
'fallback_cb' => false,
|
||
'depth' => 1,
|
||
'walker' => new Motayeb_Mobile_Walker(),
|
||
) );
|
||
?>
|
||
</nav>
|
||
<div class="p-4 border-t border-cream-200 dark:border-dark-border">
|
||
<div class="flex items-center justify-between px-4 py-2 mb-3">
|
||
<span class="text-sm text-cream-500 dark:text-dark-muted">حالت تاریک</span>
|
||
<button onclick="toggleDark()" class="w-12 h-6 bg-cream-200 dark:bg-forest-500 rounded-full relative transition" aria-label="تغییر حالت تاریک">
|
||
<div class="w-5 h-5 bg-white dark:bg-dark-bg rounded-full absolute top-0.5 right-0.5 dark:right-auto dark:left-0.5 transition-all shadow"></div>
|
||
</button>
|
||
</div>
|
||
<a href="<?php echo esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:user" width="20" class="text-honey-400"></iconify-icon>
|
||
<span class="font-medium">حساب کاربری</span>
|
||
</a>
|
||
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">
|
||
<iconify-icon icon="lucide:heart" width="20" class="text-red-400"></iconify-icon>
|
||
<span class="font-medium">علاقه‌مندی‌ها</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== HEADER ===== -->
|
||
<header id="header" class="fixed top-0 left-0 right-0 z-50 transition-all duration-300 bg-cream-100/80 dark:bg-dark-bg/80 backdrop-blur-xl border-b border-cream-200/50 dark:border-dark-border/50">
|
||
<!-- Top Bar -->
|
||
<div class="hidden md:block bg-forest-500 dark:bg-forest-700 text-white text-xs py-2">
|
||
<div class="max-w-7xl mx-auto px-6 flex items-center justify-between">
|
||
<div class="flex items-center gap-4">
|
||
<span class="flex items-center gap-1"><iconify-icon icon="lucide:truck" width="14"></iconify-icon> ارسال رایگان بالای ۵۰۰ هزار تومان</span>
|
||
<span class="w-px h-3 bg-white/30"></span>
|
||
<span class="flex items-center gap-1"><iconify-icon icon="lucide:shield-check" width="14"></iconify-icon> ضمانت اصالت کالا</span>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<a href="tel:02112345678" class="flex items-center gap-1 hover:opacity-80 transition"><iconify-icon icon="lucide:phone" width="14"></iconify-icon> ۰۲۱-۱۲۳۴۵۶۷۸</a>
|
||
<span class="w-px h-3 bg-white/30"></span>
|
||
<button onclick="toggleLang()" class="font-inter text-xs hover:opacity-80 transition">English</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Nav -->
|
||
<div class="max-w-7xl mx-auto px-4 md:px-6">
|
||
<div class="flex items-center justify-between h-16 md:h-20">
|
||
<!-- Mobile Menu Toggle -->
|
||
<button onclick="openMobileMenu()" class="md:hidden w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="باز کردن منو">
|
||
<iconify-icon icon="lucide:menu" width="22"></iconify-icon>
|
||
</button>
|
||
|
||
<!-- Logo -->
|
||
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="flex items-center gap-2.5">
|
||
<div class="w-10 h-10 bg-forest-500 rounded-2xl flex items-center justify-center shadow-lg shadow-forest-500/20">
|
||
<iconify-icon icon="lucide:leaf" width="20" class="text-white"></iconify-icon>
|
||
</div>
|
||
<div>
|
||
<span class="font-extrabold text-xl text-forest-500 dark:text-forest-300 leading-none">مطیب</span>
|
||
<span class="block text-[9px] text-cream-500 dark:text-dark-muted font-inter tracking-widest">MOTAYEB</span>
|
||
</div>
|
||
</a>
|
||
|
||
<!-- Desktop Nav -->
|
||
<nav class="hidden md:flex items-center gap-8">
|
||
<?php
|
||
wp_nav_menu( array(
|
||
'theme_location' => 'primary',
|
||
'menu_class' => 'flex items-center gap-8',
|
||
'container' => false,
|
||
'fallback_cb' => false,
|
||
'depth' => 1,
|
||
'walker' => new Motayeb_Desktop_Walker(),
|
||
) );
|
||
?>
|
||
</nav>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex items-center gap-2">
|
||
<button onclick="openSearch()" class="w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="جستجو">
|
||
<iconify-icon icon="lucide:search" width="20"></iconify-icon>
|
||
</button>
|
||
<button onclick="toggleDark()" class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حالت تاریک">
|
||
<iconify-icon icon="lucide:moon" width="20" class="dark:hidden"></iconify-icon>
|
||
<iconify-icon icon="lucide:sun" width="20" class="hidden dark:block text-honey-400"></iconify-icon>
|
||
</button>
|
||
<button class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="علاقه‌مندی">
|
||
<iconify-icon icon="lucide:heart" width="20"></iconify-icon>
|
||
</button>
|
||
<button onclick="openCart()" class="relative w-10 h-10 flex items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="سبد خرید">
|
||
<iconify-icon icon="lucide:shopping-bag" width="20"></iconify-icon>
|
||
<span id="cart-count" class="cart-badge absolute -top-0.5 -left-0.5 w-5 h-5 bg-honey-400 text-white text-[10px] font-bold rounded-full flex items-center justify-center hidden">0</span>
|
||
</button>
|
||
<a href="<?php echo esc_url( get_permalink( get_option( 'woocommerce_myaccount_page_id' ) ) ); ?>" class="hidden md:flex w-10 h-10 items-center justify-center rounded-xl hover:bg-cream-200 dark:hover:bg-dark-card transition" aria-label="حساب کاربری">
|
||
<iconify-icon icon="lucide:user" width="20"></iconify-icon>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- ===== MAIN CONTENT ===== -->
|
||
<main class="pt-16 md:pt-[104px]">
|