Double Syrup Cooker — Exploded View:root{ –bg0:#07080b; –bg1:#0b1020; –fg: rgba(255,255,255,.92); –muted: rgba(255,255,255,.72); –stroke: rgba(255,255,255,.14); –glass: rgba(255,255,255,.06); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: ui-sans-serif, system-ui, -apple-system, “Segoe UI”, Roboto, Arial, “Noto Sans Arabic”, “Noto Sans”, sans-serif; color:var(–fg); background: radial-gradient(1200px 800px at 70% 0%, rgba(255,255,255,.10), transparent 60%), radial-gradient(900px 700px at 12% 22%, rgba(120,255,220,.12), transparent 62%), radial-gradient(900px 700px at 88% 26%, rgba(140,170,255,.14), transparent 62%), linear-gradient(180deg, var(–bg0), var(–bg1)); overflow-x:hidden; }/* subtle grid */ .gridfx{ position:fixed; inset:0; z-index:-3; pointer-events:none; background: linear-gradient(to left, rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 58px 58px; mask-image: radial-gradient(circle at 50% 20%, black 0%, transparent 72%); opacity:.42; animation: gridMove 10s linear infinite; } @keyframes gridMove{ from{background-position:0 0, 0 0} to{background-position: 0 240px, 240px 0} }.noise{ position:fixed; inset:0; z-index:-2; pointer-events:none; background-image:url(‘data:image/svg+xml;utf8,’); mix-blend-mode: overlay; }header{ position:fixed; inset:0 0 auto 0; z-index:20; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; background: linear-gradient(180deg, rgba(0,0,0,.46), rgba(0,0,0,0)); backdrop-filter: blur(10px); } header .left, header .right{display:flex; align-items:center; gap:10px; flex-wrap:wrap} .brand{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); box-shadow: 0 28px 70px rgba(0,0,0,.45); text-decoration:none; color:var(–fg); font-weight:800; } nav a{ color:var(–muted); text-decoration:none; font-size:14px; padding:10px 10px; border-radius:999px; } nav a:hover{color:var(–fg); background: rgba(255,255,255,.06);} .btn{ border:1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.10); color:var(–fg); padding:10px 14px; border-radius:999px; text-decoration:none; font-size:14px; } .btn:hover{background: rgba(255,255,255,.14);}.container{ width:min(1180px, 92vw); margin:0 auto; } main{ padding-top:86px; }/* hero */ .hero{ min-height:100vh; display:grid; place-items:center; padding:44px 0 70px; } .wrap{ display:grid; grid-template-columns: 1.05fr 1fr; gap:22px; align-items:center; } @media (max-width: 980px){ .wrap{grid-template-columns:1fr;} }.badgeRow{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 16px;} .badge{ display:inline-flex; align-items:center; gap:10px; padding:10px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.18); font-size:13px; } .dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.9); box-shadow:0 0 18px rgba(255,255,255,.55)}h1{ margin:0 0 10px; font-size: clamp(34px, 4.6vw, 66px); line-height:1.02; letter-spacing:-.02em; } .sub{ margin:0 0 18px; color:var(–muted); line-height:1.7; font-size: clamp(14px, 1.3vw, 18px); max-width: 62ch; }.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:6px;} .primary{ background: rgba(255,255,255,.92); color:#0b0d12; text-decoration:none; padding:12px 16px; border-radius:999px; font-weight:900; border:1px solid rgba(255,255,255,.18); } .primary:hover{background:#fff;} .ghost{ background: rgba(255,255,255,.06); color:var(–fg); text-decoration:none; padding:12px 16px; border-radius:999px; border:1px solid rgba(255,255,255,.16); } .ghost:hover{background: rgba(255,255,255,.10);}/* 3D hero product */ .stage{ height: min(720px, 78vh); display:grid; place-items:center; perspective: 1400px; perspective-origin: 50% 45%; } .product{ width: min(520px, 92vw); aspect-ratio: 3/4; position:relative; transform-style: preserve-3d; will-change: transform; } .platform{ position:absolute; left:50%; top:72%; width: 95%; height: 26%; transform: translateX(-50%) translateZ(-190px) rotateX(74deg); border-radius:50%; background: radial-gradient(closest-side, rgba(255,255,255,.20), rgba(255,255,255,.06) 55%, transparent 72%); opacity:.95; } .shadow{ position:absolute; left:50%; top:74%; width: 70%; height: 16%; transform: translateX(-50%) translateZ(-240px); border-radius:999px; background: radial-gradient(closest-side, rgba(0,0,0,.62), transparent 70%); filter: blur(14px); opacity:.90; } .frame{ position:absolute; inset:0; border-radius: 30px; border:1px solid rgba(255,255,255,.14); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)); box-shadow: 0 50px 140px rgba(0,0,0,.60); overflow:hidden; transform-style:preserve-3d; } .scan{ position:absolute; inset:-60% -70%; background: linear-gradient(120deg, transparent 42%, rgba(255,255,255,.32) 50%, transparent 58%); transform: translateZ(210px) rotate(12deg); mix-blend-mode: screen; opacity: 0; pointer-events:none; } .rim{ position:absolute; inset:-1px; border-radius: 32px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 70px rgba(255,255,255,.06); pointer-events:none; }/* exploded section */ section{ scroll-margin-top: 95px; } .explodeSec{ padding: 90px 0 0; } .explodeWrap{ height: 220vh; /* scroll space */ } .sticky{ position: sticky; top: 92px; height: calc(100vh – 92px); display:grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items:center; } @media (max-width: 980px){ .sticky{ grid-template-columns: 1fr; height: auto; position: relative; top:auto; } .explodeWrap{ height:auto; } }.panel{ border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius: 22px; padding: 16px 16px 18px; } .panel h2{ margin:0 0 8px; font-size: clamp(20px, 2.2vw, 30px); } .panel p{ margin:0; color: var(–muted); line-height:1.7 } .hint{ margin-top:10px; font-size:12px; color: rgba(255,255,255,.65) }/* exploded viewport */ .explodeStage{ height: min(760px, 76vh); display:grid; place-items:center; perspective: 1400px; } .exploded{ width: min(560px, 95vw); aspect-ratio: 3/4; position:relative; transform-style: preserve-3d; will-change: transform; }.piece{ position:absolute; inset:0; transform-style:preserve-3d; will-change: transform, opacity; filter: saturate(1.03) contrast(1.05); } .piece img{ width:100%; height:100%; object-fit:contain; display:block; }/* Each piece uses clip-path to cut a “fake part” */ .p1{ clip-path: polygon(0% 62%, 100% 62%, 100% 100%, 0% 100%);} /* base */ .p2{ clip-path: polygon(0% 38%, 100% 38%, 100% 62%, 0% 62%);} /* body */ .p3{ clip-path: polygon(40% 0%, 100% 0%, 100% 38%, 40% 38%);} /* top engine */ .p4{ clip-path: polygon(0% 0%, 40% 0%, 40% 38%, 0% 38%);} /* front/top *//* labels */ .label{ position:absolute; width: min(320px, 46vw); max-width: 360px; padding: 12px 12px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.28); backdrop-filter: blur(10px); box-shadow: 0 28px 80px rgba(0,0,0,.55); opacity: 0; transform: translate3d(0,0,0) scale(.96); transition: opacity .25s ease; pointer-events:none; } .label b{ display:block; margin-bottom:4px } .label span{ color: var(–muted); font-size: 13px; line-height:1.6 } .leader{ position:absolute; width: 140px; height: 1px; background: linear-gradient(to left, rgba(255,255,255,.75), rgba(255,255,255,0)); opacity: 0; transition: opacity .25s ease; pointer-events:none; }/* cards area at bottom */ .sec{ padding: 110px 0; } .secHead{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; } .secHead h2{margin:0; font-size: clamp(22px, 2.4vw, 34px);} .secHead p{margin:0; color:var(–muted); max-width:68ch; line-height:1.7} .grid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; } .card{ border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius:22px; padding:16px 16px 18px; transform: translateY(18px); opacity:0; transition: transform .7s ease, opacity .7s ease; } .card.show{transform: translateY(0); opacity:1} .card h3{margin:0 0 8px; font-size:16px} .card p{margin:0; color:var(–muted); line-height:1.7} .col4{grid-column: span 4;} .col6{grid-column: span 6;} .col8{grid-column: span 8;} .col12{grid-column: span 12;} @media (max-width: 980px){ .col4,.col6,.col8{grid-column:span 12;} }footer{ padding:60px 0 80px; border-top:1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0)); } .footRow{display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; align-items:center} .small{color:var(–muted); font-size:13px}@media (prefers-reduced-motion: reduce){ .gridfx{animation:none} .card{transition:none} }/* ===== Video Section ===== */ .videoSec{ padding:110px 0; } .videoWrap{ display:grid; grid-template-columns: 1.1fr .9fr; gap:18px; align-items:center; } @media (max-width: 980px){ .videoWrap{grid-template-columns:1fr;} } .videoBox{ position:relative; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); box-shadow: 0 40px 120px rgba(0,0,0,.55); } .videoBox::after{ content:”; position:absolute; inset:0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), inset 0 0 80px rgba(255,255,255,.06); pointer-events:none; } .videoBox video, .videoBox iframe{ width:100%; height:100%; aspect-ratio:16/9; display:block; background:#000; } .videoInfo{ border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius:22px; padding:18px 18px 20px; } .videoInfo h2{ margin:0 0 10px; font-size: clamp(22px, 2.4vw, 34px); } .videoInfo p{ margin:0; color:var(–muted); line-height:1.7; }/* ===== Image Gallery Section ===== */ .gallerySec{ padding:110px 0; }.galleryGrid{ display:grid; grid-template-columns: repeat(12, 1fr); gap:14px; }.galleryItem{ grid-column: span 4; position:relative; border-radius:22px; overflow:hidden; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); transform: translateY(20px) scale(.97); opacity:0; transition: transform .7s ease, opacity .7s ease; }.galleryItem.show{ transform: translateY(0) scale(1); opacity:1; }.galleryItem img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio: 4 / 3; filter: saturate(1.05) contrast(1.05); }.galleryItem::after{ content:”; position:absolute; inset:0; background: linear-gradient( 180deg, transparent 40%, rgba(0,0,0,.55) ); opacity:.6; }@media (max-width:980px){ .galleryItem{grid-column: span 6;} } @media (max-width:600px){ .galleryItem{grid-column: span 12;} } /* ===== TIMELINE ===== */ .timeline{ max-width:900px; margin:auto; position:relative; } .line{ position:absolute; right:50%; top:0; width:2px; height:100%; background:linear-gradient(#555,#aaa,#555); } .node{ width:10px; height:10px; background:var(–accent); border-radius:50%; margin:120px auto; }/* moving part */ .part{ position:sticky; top:120px; width:90px; height:90px; margin:0 auto; background:linear-gradient(135deg,#eee,#777); border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:900; letter-spacing:2px; color:#111; box-shadow:0 25px 45px rgba(0,0,0,.6); }/* ===== BLOCKS ===== */ .block{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:140px 0; align-items:center; } .block.reverse{direction:ltr} .card{ background:var(–glass); border-radius:22px; padding:24px; backdrop-filter:blur(12px); opacity:0; transform:translateY(40px); animation:reveal linear forwards; animation-timeline:view(); animation-range:entry 20% cover 40%; } @keyframes reveal{to{opacity:1;transform:none}}/* ===== SPECS ===== */ .specs{max-width:900px;margin:auto} .spec{ display:flex; justify-content:space-between; background:var(–glass); padding:16px 18px; border-radius:16px; margin-bottom:12px; }/* ===== Mobile Optimization ===== */ @media (max-width: 768px) {header{ padding:10px 12px; }nav{ display:none; /* إخفاء المنيو الثقيلة */ }.hero{ padding: 20px 0 40px; min-height: auto; }.stage{ height: 420px; }.product{ width: 90vw; }h1{ font-size: 34px; }.sub{ font-size: 15px; }.explodeWrap{ height:auto; }.sticky{ position:relative; height:auto; grid-template-columns:1fr; }.explodeStage{ height:420px; }.label, .leader{ display:none; /* إخفاء الشرح الثقيل على الموبايل */ }.grid{ gap:10px; }footer{ padding:40px 0; } } .mobile .gridfx, .mobile .noise, .mobile .scan { display:none; }.mobile .exploded, .mobile .product { transform:none !important; }/* === WordPress Color Override Fix === */ body, main, section, p, span, h1, h2, h3, h4, h5, .card p, .panel p, .videoInfo p, .spec, .label, .badge, nav a { color: rgba(255,255,255,0.92) !important; }.sub, .secHead p, .card p, .videoInfo p { color: rgba(255,255,255,0.75) !important; }a { color: rgba(255,255,255,0.95) !important; }a:hover { color: #ffffff !important; }
Back to AMZ
طلب سعر
Double Boiler • qater SS304 • Food-Grade Direct Gas Ignition

Double Syrup Cooker

غلاية قطر مزدوجة للحلويات الشرقية — تسخين متوازن يمنع الحرق، عزل قوي، وهيكل ستانلس غذائي.

تواصل واطلب عرض سعر شاهد تفكيك القطع
machine
AMZ

الهيكل المعدني

SS304 – سماكة 4 مم – Food Grade

آلية التشغيل

تسخين مباشر وتوزيع حراري متوازن

مكان الفيديو
base
body
front
engine
القاعدة / الهيكلستانلس SS304 سماكة 4mm — ثبات، مقاومة صدأ، مناسب للأغذية.
حجرة التسخين المزدوجDouble boiler لتوزيع حرارة متوازن ومنع الحرق.
المحركقدرة 2hp لتشغيل صناعي ثابت.
الواجهة الأماميةتصميم سهل تنظيف وصيانة + وصول سريع للأجزاء.

المميزات

مصممة للحلويات الشرقية بجودة تصنيع عالية وتشغيل صناعي.

عزل حتى 1000°C

Thermal insulation قوي يرفع كفاءة الحرارة.

75kg Capacity

سعة الحجر/الطاحونة 75 كيلو.

غاز بإشعال مباشر

Direct gas ignition لتوليد حرارة سريعة.

المواصفات التقنية

Steel thickness: SS304, 4mm • Engine: 2hp • Insulation: 1000°C • Capacity: 75kg • Gas ignition • Food-grade

SS304 — 4mm

مقاومة صدأ + متانة عالية.

Food Grade

مناسبة للأغذية وسهلة التعقيم.

<!– خيار 2: يوتيوب (احذف الفيديو أعلاه واستعمل هذا) –>

شاهد المكنة أثناء التشغيل

فيديو يوضح آلية العمل، التسخين المزدوج، حركة المحرك، وجودة التصنيع الصناعي أثناء التشغيل الفعلي.

تواصل

أرسل رقم واتساب وسأضيف زر تواصل مباشر + نموذج طلب عرض سعر.

WhatsApp

+961 XX XXX XXX

Email

sales@yourdomain.com

(() => { // === IMAGE SOURCE === // If preview blocks external images, upload the PNG here in chat and I will embed it. const IMG_URL = ‘https://i.imgur.com/cKozakx.png’;// Set hero image + exploded pieces images const heroImg = document.getElementById(‘heroImg’); heroImg.src = IMG_URL; [‘pimg1′,’pimg2′,’pimg3′,’pimg4’].forEach(id => { const el = document.getElementById(id); if(el) el.src = IMG_URL; });// Fallback message if image fails heroImg.addEventListener(‘error’, () => { const p = document.querySelector(‘.sub’); if(p) p.textContent = ‘⚠️ الرابط لم يُحمَّل داخل المعاينة. ارفع الصورة هنا مباشرة وسأضمّنها داخل الصفحة لتعمل 100%.’; });// === HERO 3D (starts 3D immediately) === const heroProduct = document.getElementById(‘heroProduct’); const heroScan = document.getElementById(‘heroScan’); let hTRX = -10, hTRY = 18; // initial 3D tilt let hRX = hTRX, hRY = hTRY;heroScan.style.opacity = ‘1’;heroProduct.addEventListener(‘mousemove’, (e) => { const r = heroProduct.getBoundingClientRect(); const mx = (e.clientX – r.left) / r.width – 0.5; const my = (e.clientY – r.top) / r.height – 0.5; hTRY = mx * 24; hTRX = -10 + (-my * 16); }); heroProduct.addEventListener(‘mouseleave’, () => { hTRX = -10; hTRY = 18; });// === EXPLODED VIEW ON SCROLL === const wrap = document.getElementById(‘explodeWrap’); const exploded = document.getElementById(‘exploded’); const piece1 = document.getElementById(‘piece1’); const piece2 = document.getElementById(‘piece2’); const piece3 = document.getElementById(‘piece3’); const piece4 = document.getElementById(‘piece4’);const T1 = document.getElementById(‘T1’); const T2 = document.getElementById(‘T2’); const T3 = document.getElementById(‘T3’); const T4 = document.getElementById(‘T4’); const L1 = document.getElementById(‘L1’); const L2 = document.getElementById(‘L2’); const L3 = document.getElementById(‘L3’); const L4 = document.getElementById(‘L4’);// reveal cards const cards = document.querySelectorAll(‘.card’); const io = new IntersectionObserver((entries)=>{ entries.forEach(en=>{ if(en.isIntersecting) en.target.classList.add(‘show’); }); }, {threshold:.20}); cards.forEach(c=>io.observe(c));function clamp01(x){ return Math.max(0, Math.min(1, x)); }let scrollY = window.scrollY; addEventListener(‘scroll’, () => { scrollY = window.scrollY; }, {passive:true});function setLabel(label, leader, x, y, len, show){ label.style.left = x + ‘px’; label.style.top = y + ‘px’; label.style.opacity = show ? ‘1’ : ‘0’; label.style.transform = show ? ‘translate3d(0,0,0) scale(1)’ : ‘translate3d(0,0,0) scale(.96)’;leader.style.left = (x + (document.dir === ‘rtl’ ? label.offsetWidth : 0)) + ‘px’; leader.style.top = (y + 18) + ‘px’; leader.style.width = len + ‘px’; leader.style.opacity = show ? ‘1’ : ‘0’; }let t0 = performance.now(); function tick(t){ const dt = Math.min(40, t – t0); t0 = t; const k = 1 – Math.pow(0.0018, dt);// — Hero smooth — hRX += (hTRX – hRX) * k; hRY += (hTRY – hRY) * k; const tt = t * 0.001; const hFloat = Math.sin(tt*1.05) * 10; heroProduct.style.transform = `translateY(${hFloat}px) rotateX(${hRX}deg) rotateY(${hRY}deg)`; heroScan.style.transform = `translateZ(210px) rotate(12deg) translateX(${(tt*240)%1000 – 500}px)`;// — Exploded scroll progress — const r = wrap.getBoundingClientRect(); // progress 0..1 while the wrap is in view (desktop sticky) const total = Math.max(1, r.height – innerHeight); const p = clamp01((-r.top) / total);// Give the exploded stage its own subtle 3D const baseRX = -10 + p*6; const baseRY = 14 – p*10; exploded.style.transform = `rotateX(${baseRX}deg) rotateY(${baseRY}deg)`;// explode amount curve const e = p*p*(3-2*p); // smoothstep// Piece transforms (tune values as you like) piece1.style.transform = `translate3d(${ -40*e }px, ${ 90*e }px, ${ -120*e }px) rotateZ(${ -6*e }deg)`; piece2.style.transform = `translate3d(${ 70*e }px, ${ -20*e }px, ${ -40*e }px) rotateZ(${ 4*e }deg)`; piece3.style.transform = `translate3d(${ 110*e }px, ${ -120*e }px, ${ 80*e }px) rotateZ(${ 10*e }deg)`; piece4.style.transform = `translate3d(${ -95*e }px, ${ -60*e }px, ${ 40*e }px) rotateZ(${ -8*e }deg)`;// labels appear gradually const show = e > 0.08;// label positioning relative to exploded box const eb = exploded.getBoundingClientRect(); const lx = eb.left; const ty = eb.top; // === Gallery reveal === const galleryItems = document.querySelectorAll(‘.galleryItem’); const galleryIO = new IntersectionObserver((entries)=>{ entries.forEach(e=>{ if(e.isIntersecting) e.target.classList.add(‘show’); }); },{threshold:.2});galleryItems.forEach(i=>galleryIO.observe(i)); if (window.innerWidth 0.22); setLabel(T4, L4, lx – 12 – Math.min(320, innerWidth*0.46), ty + eb.height*0.30, 190, e > 0.16);requestAnimationFrame(tick); } requestAnimationFrame(tick); })();

 

close
Start typing to see products you are looking for.
HTML Snippets Powered By : XYZScripts.com

Sign in

close

Scroll To Top