Categories
-
Mobile
-
Tablet
-
Laptop & Computer
-
Accessories
-
Electronics
-
Home Appliances
-
Air Conditioners
-
TVs
-
Personal Care
-
Gaming
Laptop Specifications
<img src="" alt="" />
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<title>Laptop Configurator</title>
<style>
.configurator{
max-width:1200px;
margin:auto;
padding:30px 20px;
font-family:'Cairo',Arial,sans-serif;
}
.configurator h2{
text-align:center;
margin-bottom:35px;
font-size:26px;
font-weight:700;
}
.filters-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
}
.filter-card{
background:#fff;
border-radius:21px;
padding:18px;
box-shadow:0 8px 24px rgba(0,0,0,.08);
border-top: outset;
}
.card-head{
font-size:18px;
font-weight:700;
margin-bottom:14px;
}
.options{
display:flex;
flex-wrap:wrap;
gap:10px;
}
.option{
padding:10px 16px;
border:2px solid #ddd;
border-radius:10px;
font-size:13px;
background:#f9f9f9;
cursor:pointer;
transition:.25s;
}
.option:hover{
border-color:#d60a30;
color:#d60a30;
}
.option.active{
background:#d60a30;
color:#fff;
border-color:#d60a30;
}
.show-btn{
margin-top:40px;
width:100%;
padding:18px;
font-size:17px;
background:#571865;
color:#fff;
border:none;
border-radius:18px;
cursor:pointer;
}
@media(max-width:992px){
.filters-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:576px){
.filters-grid{grid-template-columns:1fr;}
}
</style>
</head>
<body>
<div class="configurator">
<div class="filters-grid">
<!-- BRAND -->
<div class="filter-card">
<div class="card-head brand-head">
<img src="" alt="Brand" class="brand-icon">
<span>البراند</span>
</div>
<div class="options" data-attr="cat">
<span class="option" data-value="249">Apple</span>
<span class="option" data-value="512">Dell</span>
<span class="option" data-value="513">HP</span>
<span class="option" data-value="510">Lenovo</span>
<span class="option" data-value="561">Acer</span>
<span class="option" data-value="522">Asus</span>
<span class="option" data-value="641">Msi</span>
</div>
</div>
<!-- SCREEN -->
<div class="filter-card">
<div class="card-head brand-head">
<img src="" alt="Brand" class="brand-icon">
<span>حجم الشاشة</span>
</div>
<div class="options" data-attr="lap_display_size">
<span class="option" data-value="5801">13.3</span>
<span class="option" data-value="5799">14</span>
<span class="option" data-value="6289">15.3</span>
<span class="option" data-value="5800">15.6</span>
<span class="option" data-value="5808">16</span>
<span class="option" data-value="5809">16.1</span>
<span class="option" data-value="6103">18</span>
</div>
</div>
<!-- PROCESSOR -->
<div class="filter-card">
<div class="card-head brand-head">
<img src="" alt="Brand" class="brand-icon">
<span>البروسيسور</span>
</div>
<div class="options" data-attr="processor">
<span class="option" data-value="5787">AMD</span>
<span class="option" data-value="5782">Intel Celeron</span>
<span class="option" data-value="5783">Intel Core i3</span>
<span class="option" data-value="5784">Intel Core i5</span>
<span class="option" data-value="5785">Intel Core i7</span>
<span class="option" data-value="5786">Intel Core i9</span>
<span class="option" data-value="6135">Intel Core Ultra</span>
<span class="option" data-value="6137">Snapdragon</span>
</div>
</div>
<!-- RAM -->
<div class="filter-card">
<div class="card-head brand-head">
<img src="" alt="Brand" class="brand-icon">
<span>الرام</span>
</div>
<div class="options" data-attr="laptop_ram">
<span class="option" data-value="5793">4 GB</span>
<span class="option" data-value="5794">8 GB</span>
<span class="option" data-value="6040">12 GB</span>
<span class="option" data-value="5795">16 GB</span>
<span class="option" data-value="6142">24 GB</span>
<span class="option" data-value="5811">32 GB</span>
</div>
</div>
<!-- STORAGE -->
<div class="filter-card">
<div class="card-head brand-head">
<img src="" alt="Brand" class="brand-icon">
<span>المساحة</span>
</div>
<div class="options" data-attr="hard_disk_capacity">
<span class="option" data-value="5796">256 GB</span>
<span class="option" data-value="5797">512 GB</span>
<span class="option" data-value="5807">1 TB</span>
<span class="option" data-value="5958">2 TB</span>
</div>
</div>
<!-- GPU -->
<div class="filter-card">
<div class="card-head brand-head">
<img src="" alt="Brand" class="brand-icon">
<span>كارت الشاشة</span>
</div>
<div class="options" data-attr="graphics_card">
<span class="option" data-value="5788">Internal Intel Card</span>
<span class="option" data-value="6136">Intel ARC</span>
<span class="option" data-value="5789">NVIDIA® GeForce RTX</span>
<span class="option" data-value="5792">NVIDIA® GeForce MX</span>
<span class="option" data-value="5791">AMD Radeon™</span>
<span class="option" data-value="6138">Qualcomm Snapdragon</span>
</div>
</div>
</div>
<button class="show-btn" onclick="applyFilter()">
عرض الأجهزة المناسبة
</button>
</div>
<script>
document.querySelectorAll('.options').forEach(group => {
group.querySelectorAll('.option').forEach(option => {
option.addEventListener('click', () => {
group.querySelectorAll('.option').forEach(o =>
o.classList.remove('active')
);
option.classList.add('active');
});
});
});
function applyFilter(){
let baseUrl = '/laptop-notebook/laptop.html';
let params = [];
document.querySelectorAll('.options').forEach(group => {
const attr = group.dataset.attr;
const active = group.querySelector('.option.active');
if(active){
params.push(attr + '=' + active.dataset.value);
}
});
window.location.href = params.length
? baseUrl + '?' + params.join('&')
: baseUrl;
}
</script>
</body>
</html>
- Choosing a selection results in a full page refresh.
- Opens in a new window.