هواوي نوفا 15 ماكس
1550ر.س
وصف المنتج
تم إنشاء كود HTML/CSS/JS يعرض مواصفات المنتج المستخرجة من الصورة بشكل احترافي ومختصر، مع تصميم أيقوني وشبكي ديناميكي، ويمكنك إعادة استخدامه بسهولة لمنتجات أخرى عبر تعديل البيانات في بداية الكود.
```html
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<title>مواصفات المنتج - تصميم احترافي</title>
<!-- Font Awesome 6 (أيقونات احترافية) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Fonts: لمسة عصرية -->
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #f5f7fc 0%, #eef2f8 100%);
font-family: 'Inter', sans-serif;
padding: 2rem 1.5rem;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* حاوية المنتج الرئيسية - تصميم بطاقة عصرية */
.product-spec-card {
max-width: 1280px;
width: 100%;
margin: 0 auto;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(0px);
border-radius: 48px;
box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.02);
transition: all 0.2s ease;
overflow: hidden;
border: 1px solid rgba(255,255,255,0.6);
}
/* رأس المنتج: اسم مختصر + علامة */
.product-header {
padding: 1.8rem 2.5rem 1rem 2.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 1rem;
}
.title-section h1 {
font-size: 1.85rem;
font-weight: 700;
letter-spacing: -0.3px;
background: linear-gradient(135deg, #1A1E2B, #2D3A5E);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 0.25rem;
}
.title-section .badge {
font-size: 0.8rem;
font-weight: 500;
color: #5b6e8c;
background: #eef2fa;
display: inline-block;
padding: 0.2rem 0.8rem;
border-radius: 40px;
backdrop-filter: blur(2px);
}
.icon-emblem {
background: #ffffffcc;
backdrop-filter: blur(8px);
border-radius: 60px;
padding: 0.5rem 1.2rem;
font-size: 0.85rem;
font-weight: 600;
color: #1a2c3e;
border: 1px solid rgba(0,0,0,0.05);
box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.icon-emblem i {
margin-left: 8px;
color: #3b82f6;
}
/* شبكة المواصفات الديناميكية - مختصرة، غير عمودية طويلة */
.specs-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.25rem;
padding: 2rem 2.5rem;
}
/* كل أيقونة مواصفة بتصميم بطاقة صغيرة أفقية أنيقة */
.spec-item {
background: #ffffff;
border-radius: 28px;
padding: 1rem 1.2rem;
display: flex;
align-items: center;
gap: 1rem;
transition: all 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
border: 1px solid rgba(0, 0, 0, 0.03);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
backdrop-filter: blur(2px);
}
.spec-item:hover {
transform: translateY(-3px);
border-color: rgba(59,130,246,0.2);
box-shadow: 0 15px 30px -12px rgba(0, 0, 0, 0.1);
background: #fefefe;
}
.spec-icon {
width: 52px;
height: 52px;
background: #f0f4fe;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
color: #1e40af;
transition: 0.2s;
flex-shrink: 0;
}
.spec-content {
flex: 1;
}
.spec-label {
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
font-weight: 600;
color: #5b6e8c;
margin-bottom: 0.2rem;
}
.spec-value {
font-size: 1.05rem;
font-weight: 600;
color: #0b1c2e;
line-height: 1.3;
word-break: break-word;
}
.spec-sub {
font-size: 0.7rem;
color: #7c8ba0;
margin-top: 4px;
font-weight: 400;
}
/* قسم إضافي للميزات المتقدمة (شبكة ثانية صغيرة) */
.features-strip {
background: #f8fafd;
margin-top: 0.5rem;
padding: 1.2rem 2.5rem 1.8rem 2.5rem;
border-top: 1px solid #eef2f8;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.chip-tech {
display: inline-flex;
align-items: center;
gap: 10px;
background: white;
padding: 0.5rem 1.2rem;
border-radius: 100px;
font-size: 0.8rem;
font-weight: 500;
box-shadow: 0 1px 3px rgba(0,0,0,0.03);
border: 1px solid #e2e8f0;
color: #1e293b;
}
.chip-tech i {
color: #3b82f6;
font-size: 1rem;
}
.resistance-badge {
background: #e6f7ec;
border-color: #b2e0c2;
color: #166534;
}
/* تذييل بأبعاد المنتج + الوزن */
.dimensions-row {
padding: 0rem 2.5rem 2rem 2.5rem;
display: flex;
flex-wrap: wrap;
gap: 1.8rem;
border-top: 1px solid rgba(0, 0, 0, 0.03);
justify-content: space-between;
align-items: center;
}
.dim-item {
display: flex;
align-items: center;
gap: 12px;
background: #ffffffdb;
padding: 0.5rem 1rem;
border-radius: 60px;
backdrop-filter: blur(4px);
}
.dim-item i {
font-size: 1.2rem;
color: #2c3e66;
}
.dim-text {
font-size: 0.85rem;
font-weight: 500;
color: #1f2a44;
}
.dim-text strong {
font-weight: 700;
margin-left: 5px;
}
/* شعار تجديد البيانات (للتطوير) */
.reload-hint {
text-align: left;
padding: 0.8rem 2.5rem 1.5rem 2.5rem;
font-size: 0.7rem;
color: #8ca0bb;
border-top: 1px solid #edf2f7;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
button.mock-btn {
background: none;
border: none;
font-size: 0.7rem;
color: #3b82f6;
cursor: pointer;
font-weight: 500;
transition: 0.1s;
}
button.mock-btn:hover {
text-decoration: underline;
}
@media (max-width: 680px) {
body {
padding: 1rem;
}
.specs-grid {
padding: 1.5rem;
gap: 0.9rem;
grid-template-columns: 1fr;
}
.product-header {
padding: 1.2rem 1.5rem;
}
.features-strip, .dimensions-row, .reload-hint {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.spec-item {
padding: 0.85rem 1rem;
}
.spec-icon {
width: 44px;
height: 44px;
font-size: 1.4rem;
}
.title-section h1 {
font-size: 1.4rem;
}
}
</style>
</head>
<body>
<!-- شبكة المواصفات الأساسية (مختصرة، غير متكررة رأسياً) -->
<!-- سيتم ملء المحتوى بواسطة JS ديناميكيًا، مع إمكانية تغيير البيانات بسهولة -->
${product.modelName} • ${product.modelCode}
متوفر الآن | هاتف متطور
Cyber Series
${product.specs.map(spec => `
`).join('')}
<!-- شريط الميزات الإضافية (تقنيات خاصة) -->
${spec.label}
${spec.value}
${spec.sub ? `${spec.sub}
` : ''}
${product.advancedFeatures.map(f => `
<!-- أبعاد المنتج + الوزن بشكل مضغوط -->
${f.name}
`).join('')}
IP65 مقاومة
40W Fast Charging
العرض ${product.dimensions.width}
الارتفاع ${product.dimensions.height}
السماكة ${product.dimensions.thickness}
الوزن ${product.dimensions.weight}
nano-SIM / eSIM
المواصفات كاملة وفق الإصدار الرسمي | Cyber OS
<button class="mock-btn" id="refreshProductExampleBtn" style="background:transparent;"> تبديل المنتج (معاينة)</button>
`;
container = html;
// إضافة حدث للزر التوضيحي (تبديل المنتج - لإظهار قابلية إعادة الاستخدام)
const refreshBtn = document.getElementById('refreshProductExampleBtn');
if (refreshBtn) {
// إزالة المستمع القديم لتجنب التكرار
const newBtn = refreshBtn.cloneNode(true);
refreshBtn.replaceChild(newBtn, refreshBtn);
newBtn.addEventListener('click', (e) => {
e.preventDefault();
// مثال لتبديل البيانات بشكل عشوائي لإظهار المرونة (لكن التصميم واحد)
// يمكن للمستخدم استبدال أي بيانات حسب المنتج الجديد
const demoAlternate = {
modelName: "Cyber 8 Pro+",
modelCode: "8849TANK",
specs: [
{ label: "المعالج", value: "Dimensity 9300", icon: "fas fa-microchip", sub: "3.25GHz" },
{ label: "الشاشة", value: "6.96 بوصة", icon: "fas fa-mobile-alt", sub: "144Hz متغير" },
{ label: "الدقة", value: "2160 × 3840", icon: "fas fa-eye", sub: "4K HDR" },
{ label: "الكاميرا", value: "108 ميجابكسل", icon: "fas fa-camera", sub: "ليلة فائقة" },
{ label: "البطارية", value: "10200 mAh", icon: "fas fa-battery-full", sub: "شحن 66W" },
{ label: "التخزين", value: "512GB / 16GB RAM", icon: "fas fa-database", sub: "UFS 4.0" },
{ label: "نظام التشغيل", value: "EMUI 14.2 + Harmony", icon: "fab fa-android", sub: "AI محسن" },
{ label: "الشبكات", value: "5G / 4G LTE", icon: "fas fa-tower-cell", sub: "nano+eSIM" },
{ label: "الأمان", value: "قارئ بصمة مدمج", icon: "fas fa-fingerprint", sub: "Face Unlock" },
{ label: "شحن لاسلكي", value: "50W لاسلكي", icon: "fas fa-charging-station", sub: "عكسي 10W" },
{ label: "مقاومة", value: "IP68", icon: "fas fa-tint", sub: "غمر 1.5م" },
{ label: "التقنيات", value: "NFC / IR Blaster", icon: "fas fa-wifi", sub: "واي فاي 7" }
],
advancedFeatures: [
{ name: "GPS L1+L5", icon: "fas fa-map-marker-alt" },
{ name: "Huawei Share 2.0", icon: "fas fa-share-alt" },
{ name: "تحديث HOTA+", icon: "fas fa-cloud-upload-alt" }
],
dimensions: {
width: "79.20 mm",
height: "165.10 mm",
thickness: "8.35 mm",
weight: "248 g"
},
extras: "IP68, 66W HyperCharge, Dual stereo"
};
// تحديث الكائن الحالي بالبيانات الجديدة (محاكاة منتج آخر)
currentProductData = demoAlternate;
renderProductSpecs(currentProductData);
});
}
}
// وظيفة مساعدة لتحديث البيانات يدويًا من أي صورة جديدة (يمكن استدعاؤها)
window.updateProductFromImageData = function(newProductObject) {
if (newProductObject && typeof newProductObject === 'object') {
currentProductData = newProductObject;
renderProductSpecs(currentProductData);
} else {
console.warn("يرجى تمرير كائن مواصفات صحيح");
}
};
// عرض أولي للمنتج (بناءً على البيانات المستخلصة من الصورة الأصلية)
renderProductSpecs(currentProductData);
// يمكن إضافة تعليق توضيحي:
// لتغيير المنتج بشكل متكرر لإرسال صور مختلفة، فقط قم باستدعاء:
// updateProductFromImageData({ modelName: "اسم جهاز جديد", specs: [ ... ], ... })
// وسيتم إعادة بناء التصميم الاحترافي نفسه بنفس الأيقونات والشكل المختصر.
// تم تصميم الشبكة بشكل غير عمودي طويل لتحسين تجربة التسوق.
<!--
ملاحظة للمطور: الأمر الأول في الكود هو داخل JavaScript عند بداية تعريف
"currentProductData" ثم دالة "renderProductSpecs" التي تنشئ التصميم.
يمكن نسخ ولصق أي بيانات لمنتج جديد بناءً على الصورة، والحفاظ على التنسيق العصري.
- ✅ التصميم ديناميكي، يعتمد على grid مرن يمنع التمرير الطويل.
- ✅ مواصفات بشكل أيقونات احترافي مشابه لمواقع أبل وسامسونج وشياomi.
- ✅ إمكانية إعادة الاستخدام: تغيير كائن productData أو استدعاء updateProductFromImageData.
- ✅ أُخذت جميع المعلومات من ملف الصورة: البطارية 8500mAh، 40W، IP65، EMUI14.2، شاشة 6.84،
معالج 8 نواة، كاميرا 50MP، ذاكرة 256GB، الأبعاد الدقيقة و الوزن 232g، NFC، X Key ...
وتم تحويلها إلى عرض سلس ومثالي.
-->
</body>
</html>
```
أسئلة قد تجي في بالك