170 lines
7.7 KiB
HTML
170 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ar" dir="rtl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>الزيوت الأساسية - ShubraVeil</title>
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="logo">
|
|
<a href="../index.html">
|
|
<img src="../images/logo.jpg" alt="ShubraVeil" class="logo-img">
|
|
</a>
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li><a href="../index.html">الرئيسية</a></li>
|
|
<li><a href="../index.html#about">من نحن</a></li>
|
|
<li class="dropdown">
|
|
<a href="#" class="dropdown-toggle">منتجاتنا <i class="fas fa-chevron-down"></i></a>
|
|
<ul class="dropdown-menu">
|
|
<li><a href="essential-oils.html" class="active">الزيوت الأساسية</a></li>
|
|
<li><a href="fixed-oils.html">الزيوت الثابتة</a></li>
|
|
<li><a href="hydrosols.html">الهيدروسولات العطرية</a></li>
|
|
<li><a href="natural-cosmetics.html">مستحضرات تجميل طبيعية</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="../index.html#benefits">فوائد الزيوت</a></li>
|
|
<li><a href="../index.html#contact">تواصل معنا</a></li>
|
|
</ul>
|
|
<div class="mobile-menu">
|
|
<i class="fas fa-bars"></i>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="product-category-hero">
|
|
<div class="container">
|
|
<h1>الزيوت الأساسية</h1>
|
|
<p>مجموعة متميزة من الزيوت الأساسية النقية 100% مستخلصة بعناية من أجود النباتات العطرية</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="products-grid-section">
|
|
<div class="container">
|
|
<div class="products-filter">
|
|
<div class="search-box">
|
|
<input type="text" placeholder="ابحث عن منتج...">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
<div class="sort-options">
|
|
<select>
|
|
<option value="newest">الأحدث</option>
|
|
<option value="price-low">السعر: من الأقل للأعلى</option>
|
|
<option value="price-high">السعر: من الأعلى للأقل</option>
|
|
<option value="name">الاسم: أ-ي</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="products-grid" id="products-container">
|
|
<!-- سيتم تحميل المنتجات هنا عبر JavaScript -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-section">
|
|
<h3>تواصل معنا</h3>
|
|
<p><i class="fas fa-phone"></i> +20 123 456 789</p>
|
|
<p><i class="fas fa-envelope"></i> info@shubraveil.com</p>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-facebook"></i></a>
|
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
<a href="#"><i class="fab fa-whatsapp"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h3>روابط سريعة</h3>
|
|
<ul>
|
|
<li><a href="../index.html#about">من نحن</a></li>
|
|
<li><a href="../index.html#products">منتجاتنا</a></li>
|
|
<li><a href="../index.html#benefits">فوائد الزيوت</a></li>
|
|
<li><a href="../index.html#contact">تواصل معنا</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2024 ShubraVeil. جميع الحقوق محفوظة</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// تحميل المنتجات من قاعدة البيانات
|
|
fetch('../api/products.php?type=essential_oils')
|
|
.then(response => response.json())
|
|
.then(products => {
|
|
const container = document.getElementById('products-container');
|
|
products.forEach(product => {
|
|
container.innerHTML += `
|
|
<div class="product-card">
|
|
<div class="product-image">
|
|
<img src="../${product.image}" alt="${product.name}">
|
|
</div>
|
|
<div class="product-info">
|
|
<h3>${product.name}</h3>
|
|
<p>${product.description}</p>
|
|
<div class="product-price">${product.price} جنيه</div>
|
|
<button class="btn primary">اطلب الآن</button>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
});
|
|
|
|
// البحث في المنتجات
|
|
document.querySelector('.search-box input').addEventListener('input', function(e) {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
const products = document.querySelectorAll('.product-card');
|
|
products.forEach(product => {
|
|
const name = product.querySelector('h3').textContent.toLowerCase();
|
|
const description = product.querySelector('p').textContent.toLowerCase();
|
|
if (name.includes(searchTerm) || description.includes(searchTerm)) {
|
|
product.style.display = 'block';
|
|
} else {
|
|
product.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
|
|
// ترتيب المنتجات
|
|
document.querySelector('.sort-options select').addEventListener('change', function(e) {
|
|
const products = Array.from(document.querySelectorAll('.product-card'));
|
|
const container = document.getElementById('products-container');
|
|
|
|
products.sort((a, b) => {
|
|
const valueA = a.querySelector('h3').textContent;
|
|
const valueB = b.querySelector('h3').textContent;
|
|
const priceA = parseFloat(a.querySelector('.product-price').textContent);
|
|
const priceB = parseFloat(b.querySelector('.product-price').textContent);
|
|
|
|
switch(e.target.value) {
|
|
case 'price-low':
|
|
return priceA - priceB;
|
|
case 'price-high':
|
|
return priceB - priceA;
|
|
case 'name':
|
|
return valueA.localeCompare(valueB);
|
|
default:
|
|
return 0;
|
|
}
|
|
});
|
|
|
|
container.innerHTML = '';
|
|
products.forEach(product => container.appendChild(product));
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|