<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نظام معرض صور متقدم</title>
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: 'Tajawal', sans-serif;
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
            padding: 20px;
        }
        
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            color: #0078D7;
            margin-bottom: 10px;
        }
        
        .description {
            color: #555;
            font-size: 1.1rem;
        }
        
        .products {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .product {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        
        .product:hover {
            transform: translateY(-5px);
        }
        
        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }
        
        .product-info {
            padding: 15px;
        }
        
        .product-title {
            font-size: 1.2rem;
            margin-bottom: 10px;
            color: #0078D7;
        }
        
        .product-description {
            color: #666;
            margin-bottom: 15px;
            font-size: 0.9rem;
        }
        
        .specs-toggle {
            background-color: #0078D7;
            color: white;
            border: none;
            padding: 8px 15px;
            border-radius: 4px;
            cursor: pointer;
            width: 100%;
            text-align: center;
            transition: background-color 0.3s;
            font-family: 'Tajawal', sans-serif;
        }
        
        .specs-toggle:hover {
            background-color: #005a9e;
        }
        
        .product-specs {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-out;
            padding: 0 15px;
            background: #f9f9f9;
        }
        
        .product-specs.active {
            max-height: 500px;
            padding: 15px;
            transition: max-height 0.7s ease-in;
        }
        
        .specs-content {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .specs-image {
            width: 100%;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .specs-list {
            padding-right: 20px;
            list-style-type: disc;
        }
        
        .specs-list li {
            margin-bottom: 8px;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        footer {
            text-align: center;
            margin-top: 30px;
            color: #666;
            font-size: 0.9rem;
        }
        
        @media (max-width: 768px) {
            .products {
                grid-template-columns: 1fr;
            }
            
            .container {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>معرض المنتجات المتقدم</h1>
            <p class="description">تصميم متطور لنظام عرض المواصفات مع إمكانية فتح صورة واحدة في كل مرة</p>
        </header>
        
        <div class="products">
            <!-- المنتج 1 -->
            <div class="product">
                <img src="https://images.unsplash.com/photo-1526170375885-4d8ecf77b99f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="كاميرا رقمية" class="product-image">
                <div class="product-info">
                    <h3 class="product-title">كاميرا DSLR متطورة</h3>
                    <p class="product-description">كاميرا احترافية بدقة 24.2 ميجابكسل مع عدسة 18-55mm.</p>
                    <button class="specs-toggle">عرض المواصفات</button>
                </div>
                <div class="product-specs">
                    <div class="specs-content">
                        <img src="https://images.unsplash.com/photo-1516035069371-29a1b244cc32?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80" alt="مواصفات الكاميرا" class="specs-image">
                        <ul class="specs-list">
                            <li>المستشعر: 24.2 ميجابكسل APS-C CMOS</li>
                            <li>معالج الصور: DIGIC 8</li>
                            <li>نظام التركيز: 45 نقطة十字-type AF</li>
                            <li>ISO: 100-25600 (قابل للتمديد إلى 51200)</li>
                            <li>التصوير المستمر: حتى 7 إطارات في الثانية</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- المنتج 2 -->
            <div class="product">
                <img src="https://images.unsplash.com/photo-1583394838336-acd977736f90?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=384&q=80" alt="هاتف ذكي" class="product-image">
                <div class="product-info">
                    <h3 class="product-title">هاتف ذكي حديث</h3>
                    <p class="product-description">هاتف ذكي بشاشة 6.7 بوصة وبطارية تدوم طوال اليوم.</p>
                    <button class="specs-toggle">عرض المواصفات</button>
                </div>
                <div class="product-specs">
                    <div class="specs-content">
                        <img src="https://images.unsplash.com/photo-1610945415295-d9bbf067e59c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=871&q=80" alt="مواصفات الهاتف" class="specs-image">
                        <ul class="specs-list">
                            <li>الشاشة: 6.7 بوصة Super Retina XDR</li>
                            <li>المعالج: A15 Bionic</li>
                            <li>الكاميرا: نظام كاميرات ثلاثي 12 ميجابكسل</li>
                            <li>التخزين: 128GB/256GB/512GB</li>
                            <li>البطارية: حتى 28 ساعة تشغيل</li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <!-- المنتج 3 -->
            <div class="product">
                <img src="https://images.unsplash.com/photo-1498049794561-7780e7231661?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="لابتوب" class="product-image">
                <div class="product-info">
                    <h3 class="product-title">لابتوب للألعاب</h3>
                    <p class="product-description">لابتوب قوي مزود بمعالج Intel Core i7 وبطاقة شاشة NVIDIA.</p>
                    <button class="specs-toggle">عرض المواصفات</button>
                </div>
                <div class="product-specs">
                    <div class="specs-content">
                        <img src="https://images.unsplash.com/photo-1603302576837-37561b2e2302?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=868&q=80" alt="مواصفات اللابتوب" class="specs-image">
                        <ul class="specs-list">
                            <li>المعالج: Intel Core i7-11800H</li>
                            <li>كرت الشاشة: NVIDIA GeForce RTX 3060</li>
                            <li>الذاكرة: 16GB DDR4</li>
                            <li>التخزين: 1TB SSD NVMe</li>
                            <li>الشاشة: 15.6 بوصة ب دقة 1920x1080</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        
        <footer>
            <p>تم التطوير باستخدام تقنيات الويب الحديثة | © 2023</p>
        </footer>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const specToggles = document.querySelectorAll('.specs-toggle');
            
            specToggles.forEach(toggle => {
                toggle.addEventListener('click', function() {
                    // إغلاق جميع المواصفات المفتوحة
                    document.querySelectorAll('.product-specs.active').forEach(activeSpec => {
                        // لا نغلق المواصفات الحالية إذا كانت تابعة لنفس الزر
                        if (activeSpec !== this.nextElementSibling) {
                            activeSpec.classList.remove('active');
                            activeSpec.previousElementSibling.querySelector('.specs-toggle').textContent = 'عرض المواصفات';
                        }
                    });
                    
                    const specs = this.nextElementSibling;
                    const isOpening = !specs.classList.contains('active');
                    
                    // فتح أو إغلاق المواصفات الحالية
                    specs.classList.toggle('active');
                    
                    // تغيير نص الزر
                    this.textContent = isOpening ? 'إخفاء المواصفات' : 'عرض المواصفات';
                });
            });
        });
    </script>
</body>
</html>