Ver2

about_us_image.json

@@ -0,0 +1 @@
+{"id":34942790,"local_path":"assets\/images\/pexels\/about-us-34942790.jpg","photographer":"Blanca Isela","photographer_url":"https:\/\/www.pexels.com\/@blanca-isela-2156722885","original_url":"https:\/\/images.pexels.com\/photos\/34942790\/pexels-photo-34942790.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"}

api/get_pexels_image.php

@@ -0,0 +1,78 @@
+<?php
+header('Content-Type: application/json');
+require_once __DIR__.'/../includes/pexels.php';
+
+$query = isset($_GET['query']) ? $_GET['query'] : 'leather craftsmanship';
+$type = isset($_GET['type']) ? $_GET['type'] : 'photo'; // 'photo' or 'video'
+$orientation = isset($_GET['orientation']) ? $_GET['orientation'] : 'landscape';
+
+if ($type === 'video') {
+    $url = 'https://api.pexels.com/videos/search?query=' . urlencode($query) . '&orientation=' . urlencode($orientation) . '&per_page=1&page=1';
+    $data = pexels_get($url);
+    if (!$data || empty($data['videos'])) {
+        echo json_encode(['error'=>'Failed to fetch video from Pexels.']);
+        exit;
+    }
+    $video = $data['videos'][0];
+    $src = '';
+    // Find the best quality mp4 link
+    foreach($video['video_files'] as $file) {
+        if ($file['file_type'] === 'video/mp4' && (strpos($file['link'], 'external') !== false)) {
+            $src = $file['link'];
+            break;
+        }
+    }
+    if (empty($src)) {
+        echo json_encode(['error'=>'No suitable video file found.']);
+        exit;
+    }
+
+    $target_dir = __DIR__ . '/../assets/videos/';
+    $target_filename = $video['id'] . '.mp4';
+    $target_path = $target_dir . $target_filename;
+
+    if (!is_dir($target_dir)) {
+        mkdir($target_dir, 0775, true);
+    }
+
+    if (download_to($src, $target_path)) {
+        echo json_encode([
+            'id' => $video['id'],
+            'local_path' => 'assets/videos/' . $target_filename,
+            'original_url' => $src
+        ]);
+    } else {
+        echo json_encode(['error'=>'Failed to download and save video.']);
+    }
+
+} else { // It's a photo
+    $url = 'https://api.pexels.com/v1/search?query=' . urlencode($query) . '&orientation=' . urlencode($orientation) . '&per_page=1&page=1';
+    $data = pexels_get($url);
+
+    if (!$data || empty($data['photos'])) {
+        echo json_encode(['error'=>'Failed to fetch image from Pexels.']);
+        exit;
+    }
+
+    $photo = $data['photos'][0];
+    $src = $photo['src']['large2x'] ?? ($photo['src']['large'] ?? $photo['src']['original']);
+    $target_dir = __DIR__ . '/../assets/images/pexels/';
+    $target_filename = 'about-us-' . $photo['id'] . '.jpg';
+    $target_path = $target_dir . $target_filename;
+
+    if (!is_dir($target_dir)) {
+        mkdir($target_dir, 0775, true);
+    }
+
+    if (download_to($src, $target_path)) {
+        echo json_encode([
+            'id' => $photo['id'],
+            'local_path' => 'assets/images/pexels/' . $target_filename,
+            'photographer' => $photo['photographer'] ?? null,
+            'photographer_url' => $photo['photographer_url'] ?? null,
+            'original_url' => $src
+        ]);
+    } else {
+        echo json_encode(['error'=>'Failed to download and save image.']);
+    }
+}

assets/css/custom.css

@@ -100,6 +100,9 @@ html.dark .btn-primary {
     box-shadow: 0 2px 15px rgba(0,0,0,0.05);
     border-bottom: 1px solid var(--border-color);
     transition: background-color 0.3s ease;
+    position: sticky;
+    top: 0;
+    z-index: 1020;
 }
 
 html.dark .site-header {
@@ -228,9 +231,7 @@ html.dark .color-swatches [style*="#000000"] + label {
 .bg-dark {
     background-color: var(--background-color) !important;
 }
-.text-white {
+
-    color: var(--text-color) !important;
-}
 .bg-dark-2 {
     background-color: var(--surface-color) !important;
 }
@@ -262,20 +263,22 @@ html.dark .color-swatches [style*="#000000"] + label {
 
 /* --- Responsive Design --- */
 @media (max-width: 768px) {
+
+
+    /* About Us Mobile */
+    #about-us .display-5 {
+        font-size: 2rem;
+    }
+    #about-us .fs-5 {
+        font-size: 1.1rem;
+    }
+
     .display-3 {
         font-size: 2.5rem;
     }
     .display-4 {
         font-size: 2rem;
     }
-    .display-5 {
-        font-size: 1.75rem;
-    }
-
-    .hero-section {
-        height: auto; /* Adjust height for mobile */
-        padding: 100px 0;
-    }
 
     .product-card .product-info {
         padding: 15px;
@@ -288,4 +291,87 @@ html.dark .color-swatches [style*="#000000"] + label {
     .site-footer .col-lg-2, .site-footer .col-lg-3, .site-footer .col-lg-4 {
         margin-bottom: 30px;
     }
-}
+}
+
+/* --- Header Icon Fixes for Dark Mode --- */
+
+/* Ensure theme toggle and other header buttons are visible in dark mode */
+html.dark .site-header .btn {
+    color: var(--text-color); /* Use the light text color from dark theme variables */
+}
+
+html.dark .site-header .btn:hover {
+    color: var(--primary-color); /* Use a hover color */
+}
+
+/* Fix for bootstrap's default hamburger icon in dark mode */
+html.dark .navbar-toggler-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+/* Fix for the border color of the toggler button itself */
+html.dark .navbar-toggler {
+    border-color: rgba(255, 255, 255, 0.15);
+}
+
+@media (max-width: 767.98px) {
+    .social-icons {
+        justify-content: center;
+    }
+}
+
+/* --- Custom Gold Button --- */
+.btn-outline-gold {
+    border-color: #D4AF37; /* Gold */
+    color: #D4AF37;
+    padding: 12px 30px;
+    font-weight: 600;
+    border-radius: 50px;
+    transition: all 0.3s ease-in-out;
+}
+
+.btn-outline-gold:hover {
+    background-color: #D4AF37;
+    color: var(--white-color);
+}
+
+html.dark .btn-outline-gold {
+    border-color: var(--accent-color);
+    color: var(--accent-color);
+}
+
+html.dark .btn-outline-gold:hover {
+    background-color: var(--accent-color);
+    color: var(--heading-color);
+}
+
+/* --- Hero Section Text --- */
+.hero-section {
+    position: relative;
+    height: 70vh;
+    display: flex;
+    align-items: center;
+    background: url('../assets/pasted-20251201-135328-2aedc448.jpg') no-repeat center center/cover;
+}
+
+.hero-section .container {
+    width: 100%;
+    text-align: center;
+}
+
+.hero-section .row {
+    justify-content: flex-end;
+}
+.hero-section h1,
+.hero-section p {
+    color: #FFFFFF;
+    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
+}
+
+/* --- About Us Section Text Color Fix for Dark Mode --- */
+html.dark #about-us h2,
+html.dark #about-us p {
+    color: var(--heading-color) !important; /* Use a light, readable color */
+}
+
+

assets/js/main.js

@@ -1 +1,51 @@
 // Custom JavaScript will go here
+
+document.addEventListener('DOMContentLoaded', () => {
+    // --- Theme Toggle Functionality ---
+    const themeToggleButton = document.getElementById('theme-toggle');
+    const htmlElement = document.documentElement;
+    const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function applyTheme(theme) {
+        if (theme === 'dark') {
+            htmlElement.classList.add('dark');
+            if (themeToggleButton) themeToggleButton.innerHTML = '<i class="bi bi-sun-fill"></i>';
+        } else {
+            htmlElement.classList.remove('dark');
+            if (themeToggleButton) themeToggleButton.innerHTML = '<i class="bi bi-moon-fill"></i>';
+        }
+    }
+
+    function initializeTheme() {
+        const savedTheme = localStorage.getItem('theme');
+        if (savedTheme) {
+            applyTheme(savedTheme);
+        } else {
+            applyTheme(prefersDarkScheme.matches ? 'dark' : 'light');
+        }
+    }
+
+    if (themeToggleButton) {
+        themeToggleButton.addEventListener('click', () => {
+            const newTheme = htmlElement.classList.contains('dark') ? 'light' : 'dark';
+            localStorage.setItem('theme', newTheme);
+            applyTheme(newTheme);
+        });
+    }
+
+    prefersDarkScheme.addEventListener('change', (e) => {
+        if (!localStorage.getItem('theme')) {
+            applyTheme(e.matches ? 'dark' : 'light');
+        }
+    });
+
+    initializeTheme();
+
+    // --- AOS Initialization ---
+    AOS.init({
+        duration: 800,
+        once: true,
+    });
+
+
+});

hero_video.json

@@ -0,0 +1 @@
+{"id":34942790,"local_path":"assets\/images\/pexels\/about-us-34942790.jpg","photographer":"Blanca Isela","photographer_url":"https:\/\/www.pexels.com\/@blanca-isela-2156722885","original_url":"https:\/\/images.pexels.com\/photos\/34942790\/pexels-photo-34942790.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"}

includes/footer.php

@@ -36,7 +36,7 @@
             <div class="col-lg-3 col-md-6">
                 <h5 class="fw-bold mb-3">ما را دنبال کنید</h5>
                 <p class="text-white-50">از جدیدترین محصولات و تخفیف‌ها باخبر شوید.</p>
-                <div class="d-flex mt-3">
+                <div class="d-flex mt-3 social-icons">
                     <a href="#" class="btn btn-outline-primary me-2"><i class="bi bi-instagram"></i></a>
                     <a href="#" class="btn btn-outline-primary me-2"><i class="bi bi-telegram"></i></a>
                     <a href="#" class="btn btn-outline-primary"><i class="bi bi-whatsapp"></i></a>
@@ -49,10 +49,9 @@
     </div>
 </footer>
 
-<!-- Bootstrap JS Bundle -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
-<!-- Custom JS -->
+    <script src="/assets/js/main.js?v=<?php echo time(); ?>"></script>
-<script src="/assets/js/main.js?v=<?php echo time(); ?>"></script>
+</div>
-
 </body>
 </html>

includes/header.php

@@ -6,7 +6,7 @@ $cart_item_count = isset($_SESSION['cart']) ? array_sum(array_column($_SESSION['
 $page_title = $page_title ?? 'فروشگاه آتیمه'; // Default title
 ?>
 <!DOCTYPE html>
-<html lang="fa" dir="rtl" class="dark">
+<html lang="fa" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -29,12 +29,29 @@ $page_title = $page_title ?? 'فروشگاه آتیمه'; // Default title
     <!-- Custom CSS -->
     <link rel="stylesheet" href="/assets/css/custom.css?v=<?php echo time(); ?>">
 
+    <script>
+        // Apply theme from local storage before page load to prevent flashing
+        (function() {
+            const theme = localStorage.getItem('theme') || 'dark';
+            if (theme === 'dark') {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        })();
+    </script>
+
 </head>
 <body>
+    <div class="overflow-hidden">
+    <?php
+    $current_page = basename($_SERVER['PHP_SELF']);
+    $is_admin_page = strpos($_SERVER['REQUEST_URI'], '/admin/') !== false;
+    ?>
 
 <header class="site-header sticky-top py-3">
     <nav class="navbar navbar-expand-lg container">
-        <div class="container-fluid">
+        <div class="container">
             <a class="navbar-brand fw-bold fs-4" href="index.php">آتیمه</a>
 
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
@@ -58,6 +75,9 @@ $page_title = $page_title ?? 'فروشگاه آتیمه'; // Default title
                 </ul>
 
                 <div class="d-flex align-items-center">
+                    <button id="theme-toggle" class="btn me-3">
+                        <i class="bi bi-moon-stars-fill"></i>
+                    </button>
                     <a href="cart.php" class="ms-4 position-relative">
                         <i class="bi bi-bag fs-5"></i>
                         <?php if ($cart_item_count > 0): ?>

index.php

@@ -4,17 +4,17 @@ include 'includes/header.php';
 ?>
 
         <!-- Hero Section -->
-        <section class="hero-section vh-100 d-flex align-items-center text-white text-center">
+        <section class="hero-section vh-100 d-flex align-items-center" style="background: #111;"> 
             <div class="video-background-wrapper">
                  <div class="video-overlay"></div>
-                 <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop">
+                 <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" style="opacity: 0.5;">
-                    <source src="https://storage.googleapis.com/gemini-agent-mediabucket-prod/v-001/video_bg.mp4" type="video/mp4">
+                    <source src="https://static.pexels.com/lib/videos/free-videos.mp4" type="video/mp4">
                 </video>
             </div>
             <div class="container position-relative">
-                <h1 class="display-3 fw-bold mb-3 hero-title" data-aos="fade-up">اصالت در هر نگاه</h1>
+                <h1 class="display-3 fw-bold mb-3 hero-title" data-aos="zoom-in-out" data-aos-delay="100">اصالت در هر نگاه</h1>
-                <p class="lead fs-4 mb-4 hero-subtitle" data-aos="fade-up" data-aos-delay="200">محصولات چرمی دست‌دوز، آفریده برای ماندگاری.</p>
+                <p class="lead fs-4 mb-4 hero-subtitle" data-aos="fade-left" data-aos-delay="300">محصولات چرمی دست‌دوز، آفریده برای ماندگاری.</p>
-                <a href="shop.php" class="btn btn-primary btn-lg" data-aos="fade-up" data-aos-delay="400">کاوش در مجموعه</a>
+                <a href="shop.php" class="btn btn-primary btn-lg" data-aos="fade-up" data-aos-delay="500">کاوش در مجموعه</a>
             </div>
         </section>
 
@@ -24,7 +24,7 @@ include 'includes/header.php';
             <div class="container">
                 <div class="text-center mb-5" data-aos="fade-up">
                     <h2 class="display-5 fw-bold">مجموعه برگزیده ما</h2>
-                    <p class="text-white-50 fs-5">دست‌چین شده برای سلیقه‌های خاص.</p>
+                    <p class="text-muted fs-5">دست‌چین شده برای سلیقه‌های خاص.</p>
                 </div>
                 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 g-lg-5">
                     <?php
@@ -40,8 +40,7 @@ include 'includes/header.php';
                         } else {
                             $delay = 0;
                             foreach ($featured_products as $key => $product) {
-                                $animation = $animations[$key % count($animations)]; // Cycle through animations
+                                echo '<div class="col" data-aos="fade-up" data-aos-delay="' . $delay . '">';
-                                echo '<div class="col" data-aos="' . $animation . '" data-aos-delay="' . $delay . '">';
                                 echo '    <div class="product-card h-100">';
                                 echo '        <div class="product-image">';
                                 echo '            <a href="product.php?id=' . $product['id'] . '">';
@@ -70,16 +69,16 @@ include 'includes/header.php';
         </section>
 
         <!-- About Us Section -->
-        <section id="about-us" class="py-5 my-5">
+        <section id="about-us" class="py-5">
             <div class="container">
                 <div class="row align-items-center">
                     <div class="col-md-6" data-aos="fade-right">
-                        <img src="https://storage.googleapis.com/gemini-agent-mediabucket-prod/v-001/about-us.jpg" alt="درباره ما" class="img-fluid rounded-4 shadow-lg">
+                        <img src="assets/images/pexels/about-us-34942790.jpg" alt="درباره ما" class="img-fluid rounded-4 shadow-lg">
                     </div>
                     <div class="col-md-6 mt-4 mt-md-0 ps-md-5" data-aos="fade-left">
                         <h2 class="display-5 fw-bold">داستان آتیمه</h2>
-                        <p class="text-white-50 fs-5 mt-3">ما در آتیمه، به تلفیق هنر سنتی و طراحی مدرن باور داریم. هر محصول، حاصل ساعت‌ها کار دست هنرمندان ماهر و استفاده از بهترین چرم‌های طبیعی است. هدف ما خلق آثاری است که نه تنها یک وسیله، بلکه بخشی از داستان و استایل شما باشند.</p>
+                        <p class="text-muted fs-5 mt-3">ما در آتیمه، به تلفیق هنر سنتی و طراحی مدرن باور داریم. هر محصول، حاصل ساعت‌ها کار دست هنرمندان ماهر و استفاده از بهترین چرم‌های طبیعی است. هدف ما خلق آثاری است که نه تنها یک وسیله، بلکه بخشی از داستان و استایل شما باشند.</p>
-                        <a href="#" class="btn btn-primary mt-3">بیشتر بدانید</a>
+                        <a href="#" class="btn btn-primary mt-3" data-aos="fade-up" data-aos-delay="200">بیشتر بدانید</a>
                     </div>
                 </div>
             </div>

product.php

@@ -31,16 +31,20 @@ include 'includes/header.php';
 ?>
 
         <div class="row g-5">
-            <div class="col-lg-6">
+            <div class="col-lg-6" data-aos="zoom-in">
                 <img src="<?php echo htmlspecialchars($product['image_url']); ?>" class="img-fluid rounded-4 shadow-lg w-100" alt="<?php echo htmlspecialchars($product['name']); ?>" style="aspect-ratio: 1/1; object-fit: cover;">
             </div>
             <div class="col-lg-6 d-flex flex-column justify-content-center">
-                <h1 class="display-4 fw-bold"><?php echo htmlspecialchars($product['name']); ?></h1>
+                <div data-aos="fade-right" data-aos-delay="100">
-                <p class="lead text-white-50 my-3"><?php echo htmlspecialchars($product['description']); ?></p>
+                    <h1 class="display-4 fw-bold"><?php echo htmlspecialchars($product['name']); ?></h1>
+                    <p class="lead text-white-50 my-3"><?php echo htmlspecialchars($product['description']); ?></p>
+                </div>
                 
-                <div class="display-5 fw-bold my-4 text-gold"><?php echo number_format($product['price']); ?> <span class="fs-5 text-white-50">تومان</span></div>
+                <div data-aos="fade-up" data-aos-delay="200">
+                    <div class="display-5 fw-bold my-4 text-gold"><?php echo number_format($product['price']); ?> <span class="fs-5 text-white-50">تومان</span></div>
+                </div>
                 
-                <form action="cart_handler.php" method="POST">
+                <form action="cart_handler.php" method="POST" data-aos="fade-up" data-aos-delay="300">
                     <input type="hidden" name="product_id" value="<?php echo $product['id']; ?>">
 
                     <?php if (!empty($available_colors)): ?>

shop.php

@@ -20,22 +20,27 @@ include 'includes/header.php';
 </div>
 
 <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 g-4">
-    <?php if (!empty($products)): ?>
+    <?php if (!empty($products)):
-        <?php foreach ($products as $product): ?>
+            $delay = 0;
-            <div class="col">
+            foreach ($products as $product):
-                <div class="product-card h-100">
+                ?>
-                    <div class="product-image">
+                <div class="col" data-aos="fade-up" data-aos-delay="<?php echo $delay; ?>">
-                        <a href="product.php?id=<?php echo $product['id']; ?>">
+                    <div class="product-card h-100">
-                            <img src="<?php echo htmlspecialchars($product['image_url']); ?>" class="img-fluid" alt="<?php echo htmlspecialchars($product['name']); ?>">
+                        <div class="product-image">
-                        </a>
+                            <a href="product.php?id=<?php echo $product['id']; ?>">
-                    </div>
+                                <img src="<?php echo htmlspecialchars($product['image_url']); ?>" class="img-fluid" alt="<?php echo htmlspecialchars($product['name']); ?>">
-                    <div class="product-info text-center">
+                            </a>
-                        <h3 class="product-title"><a href="product.php?id=<?php echo $product['id']; ?>" class="text-decoration-none"><?php echo htmlspecialchars($product['name']); ?></a></h3>
+                        </div>
-                        <p class="product-price"><?php echo number_format($product['price']); ?> تومان</p>
+                        <div class="product-info text-center">
+                            <h3 class="product-title"><a href="product.php?id=<?php echo $product['id']; ?>" class="text-decoration-none"><?php echo htmlspecialchars($product['name']); ?></a></h3>
+                            <p class="product-price"><?php echo number_format($product['price']); ?> تومان</p>
+                        </div>
                     </div>
                 </div>
-            </div>
+            <?php 
-        <?php endforeach; ?>
+                $delay += 100;
+                endforeach; 
+            ?>
     <?php else: ?>
         <div class="col-12">
             <p class="text-center p-5 bg-light rounded-3">محصولی برای نمایش یافت نشد.</p>