f408faac54
Initialize the base WordPress theme files, including core template hierarchy (index, page, single, archive, 404), WooCommerce template overrides, and essential asset directories.
133 lines
8.4 KiB
PHP
133 lines
8.4 KiB
PHP
<!DOCTYPE html>
|
||
<html lang="fa" dir="rtl" class="scroll-smooth">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<?php wp_head(); ?>
|
||
</head>
|
||
<body <?php body_class('bg-cream-100 text-earth-400 dark:bg-dark-bg dark:text-dark-text transition-colors duration-300'); ?>>
|
||
<style>* { font-family: 'Vazirmatn', sans-serif; }</style>
|
||
|
||
<!-- Top Bar -->
|
||
<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">
|
||
<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>
|
||
</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="document.getElementById('mobile-menu').classList.toggle('hidden')" 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 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 (WP Menu) -->
|
||
<nav class="hidden md:flex items-center gap-8">
|
||
<?php
|
||
if ( has_nav_menu( 'primary' ) ) {
|
||
wp_nav_menu( array(
|
||
'theme_location' => 'primary',
|
||
'container' => false,
|
||
'menu_class' => 'flex items-center gap-8',
|
||
'items_wrap' => '%3$s',
|
||
'depth' => 1,
|
||
) );
|
||
} else { ?>
|
||
<a href="<?php echo home_url(); ?>" class="nav-link text-sm font-medium hover:text-forest-500 transition">صفحه اصلی</a>
|
||
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="nav-link text-sm font-medium hover:text-forest-500 transition">فروشگاه</a>
|
||
<?php } ?>
|
||
</nav>
|
||
|
||
<!-- Actions -->
|
||
<div class="flex items-center gap-2">
|
||
<button onclick="document.getElementById('search-overlay').classList.toggle('hidden')" 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 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>
|
||
|
||
<a href="<?php echo get_permalink( wc_get_page_id( 'cart' ) ); ?>" 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>
|
||
<?php
|
||
$count = WC()->cart->get_cart_contents_count();
|
||
if ( $count > 0 ) : ?>
|
||
<span 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">
|
||
<?php echo esc_html( $count ); ?>
|
||
</span>
|
||
<?php endif; ?>
|
||
</a>
|
||
|
||
<a href="<?php echo wp_login_url(); ?>" 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>
|
||
|
||
<!-- Search Overlay -->
|
||
<div id="search-overlay" class="fixed inset-0 z-[90] bg-black/50 backdrop-blur-sm hidden" onclick="this.classList.add('hidden')">
|
||
<div class="max-w-2xl mx-auto mt-24 px-4" onclick="event.stopPropagation()">
|
||
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>" 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"></iconify-icon>
|
||
<input type="search" class="search-field flex-1 bg-transparent text-lg outline-none placeholder:text-cream-400 dark:placeholder:text-dark-muted" placeholder="جستجو در محصولات..." value="<?php echo get_search_query(); ?>" name="s" autocomplete="off">
|
||
<input type="hidden" name="post_type" value="product">
|
||
<button type="button" onclick="this.closest('#search-overlay').classList.add('hidden')" class="text-cream-400 hover:text-earth-400">
|
||
<iconify-icon icon="lucide:x" width="22"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Mobile Menu Overlay -->
|
||
<div id="mobile-menu" class="fixed inset-0 z-[70] hidden">
|
||
<div class="absolute inset-0 bg-black/50" onclick="this.parentElement.classList.add('hidden')"></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">
|
||
<div class="p-5 border-b border-cream-200 dark:border-dark-border flex items-center justify-between">
|
||
<span class="font-bold text-lg">مطیب</span>
|
||
<button onclick="this.closest('#mobile-menu').classList.add('hidden')" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-cream-100 dark:hover:bg-dark-bg">
|
||
<iconify-icon icon="lucide:x" width="20"></iconify-icon>
|
||
</button>
|
||
</div>
|
||
<nav class="p-4 space-y-1">
|
||
<?php
|
||
if ( has_nav_menu( 'primary' ) ) {
|
||
wp_nav_menu( array(
|
||
'theme_location' => 'primary',
|
||
'container' => false,
|
||
'items_wrap' => '%3$s',
|
||
'depth' => 1,
|
||
) );
|
||
} else { ?>
|
||
<a href="<?php echo home_url(); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">صفحه اصلی</a>
|
||
<a href="<?php echo get_permalink( wc_get_page_id( 'shop' ) ); ?>" class="flex items-center gap-3 px-4 py-3 rounded-xl hover:bg-forest-50 dark:hover:bg-forest-900/30 transition">فروشگاه</a>
|
||
<?php } ?>
|
||
</nav>
|
||
</div>
|
||
</div>
|