Bibi

<!DOCTYPE html>

<head>

<title>صفحة المنتج - متجرنا</title>

<style>

/* التنسيقات العامة */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

body {

background-color: #f8f9fa;

color: #333;

line-height: 1.6;

}

.container {

max-width: 1200px;

margin: 0 auto;

padding: 0 15px;

}

/* رأس الصفحة */

header {

background-color: #fff;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

padding: 15px 0;

position: sticky;

top: 0;

z-index: 100;

}

.header-content {

display: flex;

justify-content: space-between;

align-items: center;

}

.logo {

font-size: 24px;

font-weight: bold;

color: #4a6bdf;

}

nav ul {

display: flex;

list-style: none;

}

nav ul li {

margin-left: 20px;

}

nav ul li a {

text-decoration: none;

color: #333;

font-weight: 500;

transition: color 0.3s;

}

nav ul li a:hover {

color: #4a6bdf;

}

.cart-icon {

position: relative;

cursor: pointer;

}

.cart-count {

position: absolute;

top: -10px;

right: -10px;

background-color: #e74c3c;

color: white;

border-radius: 50%;

width: 20px;

height: 20px;

display: flex;

justify-content: center;

align-items: center;

font-size: 12px;

}

/* محتوى المنتج */

.product-page {

padding: 40px 0;

}

.product-container {

display: flex;

flex-wrap: wrap;

background: #fff;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

}

.product-gallery {

flex: 1;

min-width: 300px;

padding: 20px;

}

.main-image {

width: 100%;

height: 400px;

object-fit: contain;

margin-bottom: 15px;

border: 1px solid #eee;

border-radius: 5px;

padding: 10px;

}

.thumbnail-container {

display: flex;

gap: 10px;

}

.thumbnail {

width: 80px;

height: 80px;

object-fit: cover;

cursor: pointer;

border: 2px solid transparent;

border-radius: 5px;

transition: border-color 0.3s;

}

.thumbnail:hover, .thumbnail.active {

border-color: #4a6bdf;

}

.product-details {

flex: 1;

min-width: 300px;

padding: 30px;

border-right: 1px solid #eee;

}

.product-title {

font-size: 28px;

margin-bottom: 10px;

color: #2d3748;

}

.product-price {

font-size: 24px;

color: #e74c3c;

margin-bottom: 20px;

font-weight: bold;

}

.product-description {

margin-bottom: 25px;

color: #4a5568;

line-height: 1.8;

}

.product-meta {

margin-bottom: 25px;

}

.meta-item {

display: flex;

margin-bottom: 10px;

}

.meta-label {

font-weight: bold;

width: 120px;

color: #2d3748;

}

.quantity-selector {

display: flex;

align-items: center;

margin-bottom: 25px;

}

.quantity-btn {

width: 40px;

height: 40px;

background: #f1f1f1;

border: none;

font-size: 18px;

cursor: pointer;

border-radius: 5px;

}

.quantity-input {

width: 60px;

height: 40px;

text-align: center;

margin: 0 10px;

border: 1px solid #ddd;

border-radius: 5px;

font-size: 16px;

}

.add-to-cart {

background-color: #4a6bdf;

color: white;

border: none;

padding: 15px 30px;

border-radius: 5px;

cursor: pointer;

font-size: 16px;

font-weight: bold;

transition: background-color 0.3s;

display: flex;

align-items: center;

gap: 10px;

}

.add-to-cart:hover {

background-color: #3a5bce;

}

/* القسم الجانبي */

.product-sidebar {

flex: 0 0 300px;

padding: 30px;

background: #f8f9fa;

}

.sidebar-section {

margin-bottom: 30px;

}

.sidebar-title {

font-size: 18px;

margin-bottom: 15px;

padding-bottom: 10px;

border-bottom: 2px solid #4a6bdf;

color: #2d3748;

}

.shipping-info, .return-info {

background: white;

padding: 15px;

border-radius: 5px;

margin-bottom: 15px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

}

/* المنتجات المشابهة */

.related-products {

margin-top: 50px;

}

.section-title {

font-size: 24px;

margin-bottom: 30px;

text-align: center;

color: #2d3748;

position: relative;

padding-bottom: 15px;

}

.section-title::after {

content: "";

position: absolute;

bottom: 0;

left: 50%;

transform: translateX(-50%);

width: 80px;

height: 3px;

background: #4a6bdf;

}

.products-grid {

display: grid;

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

gap: 25px;

}

.product-card {

background: white;

border-radius: 10px;

overflow: hidden;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

transition: transform 0.3s;

}

.product-card:hover {

transform: translateY(-5px);

}

.card-image {

width: 100%;

height: 200px;

object-fit: contain;

padding: 15px;

border-bottom: 1px solid #eee;

}

.card-content {

padding: 15px;

}

.card-title {

font-size: 16px;

margin-bottom: 10px;

color: #2d3748;

}

.card-price {

color: #e74c3c;

font-weight: bold;

font-size: 18px;

}

/* التذييل */

footer {

background: #2d3748;

color: white;

padding: 40px 0;

margin-top: 50px;

}

.footer-content {

display: flex;

flex-wrap: wrap;

justify-content: space-between;

}

.footer-section {

flex: 1;

min-width: 250px;

margin-bottom: 20px;

padding: 0 15px;

}

.footer-title {

font-size: 18px;

margin-bottom: 20px;

position: relative;

padding-bottom: 10px;

}

.footer-title::after {

content: "";

position: absolute;

bottom: 0;

right: 0;

width: 50px;

height: 2px;

background: #4a6bdf;

}

.footer-links {

list-style: none;

}

.footer-links li {

margin-bottom: 10px;

}

.footer-links a {

color: #cbd5e0;

text-decoration: none;

transition: color 0.3s;

}

.footer-links a:hover {

color: white;

}

.copyright {

text-align: center;

padding-top: 20px;

margin-top: 20px;

border-top: 1px solid #4a5568;

color: #cbd5e0;

}

/* التجاوب مع الشاشات المختلفة */

@media (max-width: 768px) {

.product-container {

flex-direction: column;

}

.product-details {

border-right: none;

border-bottom: 1px solid #eee;

}

nav ul {

display: none;

}

</style>

</head>

<body>

<div class="logo">متجرنا</div>

<nav>

<ul>

<li><a href="#">الرئيسية</a></li>

<li><a href="#">المنتجات</a></li>

<li><a href="#">العروض</a></li>

</ul>

</nav>

🛒

</div>

</header>

</div>

<h1 class="product-title">سماعات رأس لاسلكية عالية الجودة</h1>

سماعات رأس لاسلكية بتقنية البلوتوث 5.0، تتميز بخاصية إلغاء الضوضاء، وبطارية تعمل حتى 30 ساعة، ومقاومة للعرق. مثالية للرياضة والاستخدام اليومي.

</p>

<span class="meta-label">التوفر:</span>

<span class="meta-value">متوفر في المخزون</span>

</div>

<span class="meta-label">الشركة:</span>

</div>

<span class="meta-label">النوع:</span>

<span class="meta-value">سماعات رأس</span>

</div>

<span class="meta-label">اللون:</span>

</div>

</div>

<span>أضف إلى السلة</span>

</button>

</div>

<h3 class="sidebar-title">معلومات الشحن</h3>

<p>التوصيل خلال 2-5 أيام عمل</p>

<p>شحن مجاني للطلبات فوق 200 ر.س</p>

</div>

<h3 class="sidebar-title">سياسة الإرجاع</h3>

<p>إرجاع مجاني خلال 14 يومًا من الاستلام</p>

</div>

<h3 class="sidebar-title">طرق الدفع</h3>

<p>الدفع عند الاستلام</p>

<p>بطاقة الائتمان</p>

<p>تحويل بنكي</p>

</div>

<h2 class="section-title">منتجات مشابهة</h2>

<h3 class="card-title">سماعات أذن لاسلكية</h3>

</div>

<h3 class="card-title">سماعات رأس للألعاب</h3>

</div>

<h3 class="card-title">سماعات بلوتوث رياضية</h3>

</div>

<h3 class="card-title">سماعات مع ميكروفون</h3>

</div>

</main>

<h3 class="footer-title">عن المتجر</h3>

<p>متجرنا يقدم أفضل المنتجات الإلكترونية بأعلى جودة وأسعار تنافسية.</p>

</div>

<h3 class="footer-title">روابط سريعة</h3>

<li><a href="#">الرئيسية</a></li>

<li><a href="#">منتجاتنا</a></li>

<li><a href="#">العروض</a></li>

</ul>

</div>

<h3 class="footer-title">معلومات الاتصال</h3>

<li>جدة، السعودية</li>

<li>الهاتف: 0123456789</li>

<li>البريد: info@mystore.com</li>

</ul>

</div>

</div>

</footer>

// تغيير الصورة الرئيسية عند النقر على الصور المصغرة

const thumbnails = document.querySelectorAll('.thumbnail');

const mainImage = document.getElementById('main-image');

thumbnails.forEach(thumbnail => {

thumbnail.addEventListener('click', function() {

// إزالة النشاط من جميع الصور المصغرة

thumbnails.forEach(t => t.classList.remove('active'));

// إضافة النشاط للصورة المختارة

this.classList.add('active');

// تغيير الصورة الرئيسية

mainImage.src = this.getAttribute('data-image');

});

// زيادة ونقصان الكمية

const decreaseBtn = document.getElementById('decrease');

const increaseBtn = document.getElementById('increase');

const quantityInput = document.getElementById('quantity');

decreaseBtn.addEventListener('click', function() {

let currentValue = parseInt(quantityInput.value);

if (currentValue > 1) {

quantityInput.value = currentValue - 1;

}

});

increaseBtn.addEventListener('click', function() {

let currentValue = parseInt(quantityInput.value);

quantityInput.value = currentValue + 1;

});

// إضافة إلى السلة

const addToCartBtn = document.querySelector('.add-to-cart');

addToCartBtn.addEventListener('click', function() {

const quantity = parseInt(quantityInput.value);

alert(`تم إضافة ${quantity} من المنتج إلى سلة التسوق`);

});

</script>

</body>

</html>