New Mobile Design

<div class="mobile-app-wrapper hide-on-desktop"> <div class="black-bg"></div> <div class="main-white-container"> <div class="quick-actions-card"> <a href="https://dream2000.com/new-installment-design" class="action-item"> <div class="icon-circle"> <img src="" alt="احسب قسطك" /> </div> <span>احسب قسطك</span> </a> <a href="https://dream2000.com/mobile-app-categories/mobile-gift.html" class="action-item"> <div class="icon-circle"> <img src="" alt="هديتك علينا" /> </div> <span>هديتك علينا</span> </a> <a href="https://dream2000.com/track-orders" class="action-item"> <div class="icon-circle"> <img src="" alt="تتبع اوردرك" /> </div> <span>تتبع اوردرك</span> </a> <a href="https://dream2000.com/hot-deals" class="action-item"> <div class="icon-circle"> <img src="" alt="عروض الاسبوع" /> </div> <span>عروض الاسبوع</span> </a> </div> <h3 class="section-title">أفضل الأقسام</h3> <div class="categories-grid"> <a href="https://dream2000.com/mobiles.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">موبايلات</p> </a> <a href="https://dream2000.com/laptop-notebook/laptop.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">لاب توب</p> </a> <a href="https://dream2000.com/gaming/playstation.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">بلاى استيشن</p> </a> <a href="https://dream2000.com/home-appliances.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">أجهزة منزلية</p> </a> <a href="https://dream2000.com/tvs/brands.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">تليفزيونات</p> </a> <a href="https://dream2000.com/conditioners.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">تكييفات</p> </a> <a href="https://dream2000.com/accessories/audio/airpods.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">ايربودز</p> </a> <a href="https://dream2000.com/accessories/wearables/smart-watch.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">ساعات ذكية</p> </a> <a href="https://dream2000.com/laptop-notebook/printer.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">طابعات</p> </a> <a href="https://dream2000.com/corporate/network.html" class="cat-item" style="text-decoration: none;"> <div class="cat-icon-box"><img src="" alt="" /></div> <p style="text-align: center;">شبكات</p> </a> </div> </div> </div> <style> .mobile-app-wrapper { direction: rtl; background-color: #ffffff; margin: 0 -20px; position: relative; overflow-x: hidden; } .black-bg { background-color: #222529; height: 105px; width: 110%; margin-right: -5%; margin-left: -5%; } .main-white-container { background-color: #ffffff; border-radius: 30px 30px 0 0; margin-top: -60px; padding: 20px 15px; position: relative; z-index: 1; } .quick-actions-card { background: #ffffff; border-radius: 20px; display: flex; justify-content: space-around; padding: 15px 5px; box-shadow: 0 8px 20px rgba(0,0,0,0.08); margin-top: -45px; margin-bottom: 20px; border: 1px solid #f0f0f0; } .action-item { text-align: center; flex: 1; } .action-item .icon-circle { width: 45px; height: 45px; background: #f8f9fa; border-radius: 12px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; } .action-item span { font-size: 10px; font-weight: bold; color: #333; } .section-title { font-size: 16px; margin: 10px 0 20px; font-weight: bold; } .categories-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 10px; } .cat-icon-box { width: 65px; height: 65px; background: #f2f2f2; border-radius: 15px; margin: 0 auto 5px; display: flex; align-items: center; justify-content: center; } .cat-item p { font-size: 11px; color: #555; margin-bottom: 10px; } .cat-item img { width: 60px; } </style>

<div style=" display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 2px auto; max-width: fit-content; padding: 10px 40px; position: relative; cursor: default; margin-top: -25px; " onmouseover="this.querySelector('.line').style.width='100%'" onmouseout="this.querySelector('.line').style.width='40%'"> <span style=" font-size: 11px; color: #b89564; text-transform: uppercase; letter-spacing: 5px; margin-bottom: 8px; font-weight: 600; font-family: sans-serif; "> MOBILE & ACCESSORIES </span> <h2 style=" font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0; padding: 5px 0; font-family: 'cairo'; position: relative; background: #f2f2f2; border-radius: 20px; padding-left: 20px; padding-right: 20px; "> موبايلات و إكسسوارات </h2> <div class="line" style=" width: 40%; height: 2px; background: #2196f3; margin-top: 12px; transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); "></div> <div style=" position: absolute; bottom: -20px; width: 80%; height: 10px; "></div> </div>

<div style=" display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 2px auto; max-width: fit-content; padding: 10px 40px; position: relative; cursor: default; margin-top: 25px; " onmouseover="this.querySelector('.line').style.width='100%'" onmouseout="this.querySelector('.line').style.width='40%'"> <span style=" font-size: 11px; color: #b89564; text-transform: uppercase; letter-spacing: 5px; margin-bottom: 8px; font-weight: 600; font-family: sans-serif; "> </span> <h2 style=" font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0; padding: 5px 0; font-family: 'cairo'; position: relative; background: #f2f2f2; border-radius: 20px; padding-left: 20px; padding-right: 20px; "> أجهزة منزلية </h2> <div class="line" style=" width: 40%; height: 2px; background: #2196f3; margin-top: 12px; transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); "></div> <div style=" position: absolute; bottom: -20px; width: 80%; height: 10px; "></div> </div>

<div style=" display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 2px auto; max-width: fit-content; padding: 10px 40px; position: relative; cursor: default; margin-top: 12px; " onmouseover="this.querySelector('.line').style.width='100%'" onmouseout="this.querySelector('.line').style.width='40%'"> <span style=" font-size: 11px; color: #b89564; text-transform: uppercase; letter-spacing: 5px; margin-bottom: 8px; font-weight: 600; font-family: sans-serif; "> </span> <h2 style=" font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0; padding: 5px 0; font-family: 'cairo'; position: relative; background: #f2f2f2; border-radius: 20px; padding-left: 20px; padding-right: 20px; "> لاب توب و كمبيوتر </h2> <div class="line" style=" width: 40%; height: 2px; background: #2196f3; margin-top: 12px; transition: width 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); "></div> <div style=" position: absolute; bottom: -20px; width: 80%; height: 10px; "></div> </div>

<div class="lc-scope"> <style> .lc-scope { --lc-red: #d60a30; --lc-purple: #571865; --lc-light: #f9f9f9; --lc-border: #e0e0e0; --lc-radius-card: 18px; --lc-radius-btn: 14px; font-family: 'Cairo', sans-serif; } .lc-trigger { display: inline-flex; align-items: center; gap: 12px; background: #8bc34a; color: #fff; border: none; border-radius: var(--lc-radius-btn); padding: 16px 30px; padding-right: 50px; font-weight: 700; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(139, 195, 74, 0.3); } .lc-trigger::after { content: '←'; position: absolute; right: 20px; font-size: 22px; transition: all 0.3s ease; display: block; opacity: 1; } .lc-trigger:hover { background-color: #7cb342; padding-right: 60px; box-shadow: 0 6px 20px rgba(139, 195, 74, 0.4); } .lc-trigger:hover::after { right: 12px; transform: scaleX(1.8); color: #fff; } .lc-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 999999; align-items: center; justify-content: center; } .lc-overlay.open { display: flex; } .lc-popup { background: #ffffff70; width: 95%; max-width: 550px; max-height: 85dvh; border-radius: 20px; overflow-y: auto; padding: 25px; position: relative; direction: rtl; } .lc-close { position: absolute; top: 15px; left: 15px; background: #2196f3; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; z-index: 10; } .lc-card { background: var(--lc-light); border: 1px solid var(--lc-border); border-radius: 12px; padding: 15px; margin-bottom: 12px; } .lc-card-head { font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; color: #333; } .lc-brand-icon { width: 24px; height: 24px; object-fit: contain; } .lc-options { display: flex; flex-wrap: wrap; gap: 8px; } .lc-option { padding: 6px 12px; border: 1px solid #ccc; border-radius: 8px; font-size: 13px; background: #fff; cursor: pointer; transition: 0.2s; } .lc-option.active { background: #2196f3; color: #fff; border-color: #2196f3; } .lc-submit { width: 100%; padding: 15px; background: #8bc34a; color: #fff; border: none; border-radius: 10px; font-weight: 700; margin-top: 15px; cursor: pointer; position: sticky; bottom: 0; } </style> <div style="text-align:center; padding:0px;"> <button class="lc-trigger" onclick="openConfigurator()"> ماتدورش كتير اختار المواصفات يظهرلك لابتوبك</button> </div> <div class="lc-overlay" id="lcOverlay" onclick="if(event.target===this) closeConfigurator()"> <div class="lc-popup"> <button class="lc-close" onclick="closeConfigurator()">✕</button> <h3 style="text-align:center; margin-bottom:20px; color:#000000">تخصيص البحث</h3>  <div class="lc-card"> <div class="lc-card-head"> <img src="" alt="Brand" class="lc-brand-icon"> <span>البراند</span> </div> <div class="lc-options" data-attr="cat"> <span class="lc-option" data-value="249">Apple</span> <span class="lc-option" data-value="512">Dell</span> <span class="lc-option" data-value="513">HP</span> <span class="lc-option" data-value="510">Lenovo</span> <span class="lc-option" data-value="561">Acer</span> <span class="lc-option" data-value="522">Asus</span> <span class="lc-option" data-value="641">Msi</span> </div> </div>  <div class="lc-card"> <div class="lc-card-head"> <img src="" alt="Screen" class="lc-brand-icon"> <span>حجم الشاشة</span> </div> <div class="lc-options" data-attr="lap_display_size"> <span class="lc-option" data-value="5801">13.3</span> <span class="lc-option" data-value="5799">14</span> <span class="lc-option" data-value="6289">15.3</span> <span class="lc-option" data-value="5800">15.6</span> <span class="lc-option" data-value="5808">16</span> <span class="lc-option" data-value="5809">16.1</span> <span class="lc-option" data-value="6103">18</span> </div> </div>  <div class="lc-card"> <div class="lc-card-head"> <img src="" alt="Processor" class="lc-brand-icon"> <span>البروسيسور</span> </div> <div class="lc-options" data-attr="processor"> <span class="lc-option" data-value="5787">AMD</span> <span class="lc-option" data-value="5782">Intel Celeron</span> <span class="lc-option" data-value="5783">Intel Core i3</span> <span class="lc-option" data-value="5784">Intel Core i5</span> <span class="lc-option" data-value="5785">Intel Core i7</span> <span class="lc-option" data-value="5786">Intel Core i9</span> <span class="lc-option" data-value="6135">Intel Core Ultra</span> <span class="lc-option" data-value="6137">Snapdragon</span> </div> </div>  <div class="lc-card"> <div class="lc-card-head"> <img src="" alt="RAM" class="lc-brand-icon"> <span>الرام</span> </div> <div class="lc-options" data-attr="laptop_ram"> <span class="lc-option" data-value="5793">4 GB</span> <span class="lc-option" data-value="5794">8 GB</span> <span class="lc-option" data-value="6040">12 GB</span> <span class="lc-option" data-value="5795">16 GB</span> <span class="lc-option" data-value="6142">24 GB</span> <span class="lc-option" data-value="5811">32 GB</span> </div> </div>  <div class="lc-card"> <div class="lc-card-head"> <img src="" alt="Storage" class="lc-brand-icon"> <span>المساحة</span> </div> <div class="lc-options" data-attr="hard_disk_capacity"> <span class="lc-option" data-value="5796">256 GB</span> <span class="lc-option" data-value="5797">512 GB</span> <span class="lc-option" data-value="5807">1 TB</span> <span class="lc-option" data-value="5958">2 TB</span> </div> </div>  <div class="lc-card"> <div class="lc-card-head"> <img src="" alt="GPU" class="lc-brand-icon"> <span>كارت الشاشة</span> </div> <div class="lc-options" data-attr="graphics_card"> <span class="lc-option" data-value="5788">Internal Intel Card</span> <span class="lc-option" data-value="6136">Intel ARC</span> <span class="lc-option" data-value="5789">NVIDIA® GeForce RTX</span> <span class="lc-option" data-value="5792">NVIDIA® GeForce MX</span> <span class="lc-option" data-value="5791">AMD Radeon™</span> <span class="lc-option" data-value="6138">Qualcomm Snapdragon</span> </div> </div> <button class="lc-submit" onclick="applyFilter()">إظهار النتائج</button> </div> </div> </div> <script> function openConfigurator() { document.getElementById('lcOverlay').classList.add('open'); document.body.style.overflow = 'hidden'; } function closeConfigurator() { document.getElementById('lcOverlay').classList.remove('open'); document.body.style.overflow = ''; } document.querySelectorAll('.lc-option').forEach(opt => { opt.addEventListener('click', function() { const parent = this.parentElement; if (this.classList.contains('active')) { this.classList.remove('active'); } else { parent.querySelectorAll('.lc-option').forEach(o => o.classList.remove('active')); this.classList.add('active'); } }); }); function applyFilter() { const baseUrl = window.location.origin + '/laptop-notebook/laptop.html'; let queryParams = []; document.querySelectorAll('.lc-options').forEach(group => { const attr = group.dataset.attr; const active = group.querySelector('.lc-option.active'); if (active) { queryParams.push(attr + '=' + active.dataset.value); } }); if (queryParams.length > 0) { window.location.href = baseUrl + '?' + queryParams.join('&'); } else { window.location.href = baseUrl; } } </script>

Categories

Network

Security Wi-Fi Camera

Smart Door

Photography Accessories

Scooter

Scales

Projectors

Smart Tag

Security Solutions

Sound System

Electrical Products

Battery

Consoles

Gamepad

Games CD

Gaming Accessories

New Mobile Design