Firedough Pizza - Bandar Dato Onn JB/title> <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Manrope:wght@200..800&display=swap" rel="stylesheet"> <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> <script id="tailwind-config"> tailwind.config = { darkMode: "class", theme: { extend: { colors: { "on-secondary-container": "#636262", "tertiary-fixed-dim": "#ffb596", "tertiary-container": "#aa5a34", "on-secondary-fixed": "#1c1b1b", "on-background": "#1b1d0e", "inverse-primary": "#ffb3ac", "inverse-surface": "#303221", "primary-fixed": "#ffdad6", "on-primary-container": "#fff2f0", "on-secondary-fixed-variant": "#474746", "surface-variant": "#e4e4cc", "secondary-container": "#e2dfde", "on-error-container": "#93000a", "on-tertiary-container": "#fff2ee", "inverse-on-surface": "#f2f2d9", "surface-tint": "#ba1a20", "primary-fixed-dim": "#ffb3ac", "on-primary-fixed-variant": "#930010", "surface-dim": "#dbdcc3", "primary": "#af101a", "on-tertiary-fixed": "#360f00", "tertiary": "#8c421f", "on-secondary": "#ffffff", "surface-bright": "#fbfbe2", "tertiary-fixed": "#ffdbcd", "outline": "#8f6f6c", "surface-container-low": "#f5f5dc", "on-primary-fixed": "#410003", "outline-variant": "#e4beba", "background": "#fbfbe2", "on-surface-variant": "#5b403d", "primary-container": "#d32f2f", "on-surface": "#1b1d0e", "secondary-fixed-dim": "#c8c6c5", "surface-container-high": "#eaead1", "on-tertiary": "#ffffff", "on-primary": "#ffffff", "surface-container": "#efefd7", "on-tertiary-fixed-variant": "#76320f", "secondary-fixed": "#e5e2e1", "on-error": "#ffffff", "surface": "#fbfbe2", "surface-container-lowest": "#ffffff", "secondary": "#5f5e5e", "error-container": "#ffdad6", "error": "#ba1a1a", "surface-container-highest": "#e4e4cc" }, fontFamily: { "headline": ["Newsreader"], "body": ["Manrope"], "label": ["Manrope"] }, borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"}, }, }, } </script> <style> html { scroll-behavior: smooth; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; } .glass-nav { background: rgba(251, 251, 226, 0.8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .ember-gradient { background: radial-gradient(circle at center, #d32f2f 0%, #af101a 100%); } </style> <style id="ai-style-manual-css"> /* AI Component Styles: manual-css */ @media (min-width: 768px) { .md\:text-2xl { font-size: 1.5rem; line-height: 2rem; } } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } *, ::after, ::before { box-sizing: border-box; border-width: 0px; border-style: solid; border-color: rgb(229, 231, 235); } blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre { margin: 0px; } .mb-12 { margin-bottom: 3rem; } .max-w-lg { max-width: 32rem; } .font-body { font-family: Manrope; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .leading-relaxed { line-height: 1.625; } .text-surface-variant\/90 { color: rgba(228, 228, 204, 0.9); } </style></head> <body class="bg-surface text-on-surface font-body selection:bg-primary-fixed selection:text-on-primary-fixed"> <nav class="fixed top-0 left-0 right-0 z-50 glass-nav border-b border-outline-variant/20 h-16 flex items-center px-6 justify-between"> <div class="flex items-center gap-8"> <span class="font-headline text-2xl font-semibold text-primary tracking-tight">Firedough Pizza</span> <div class="hidden md:flex gap-6 items-center"> <a class="text-on-surface font-label text-sm uppercase tracking-wider hover:text-primary transition-colors" href="#menu">Menu</a> <a class="text-on-surface font-label text-sm uppercase tracking-wider hover:text-primary transition-colors" href="#location">Location</a> <a class="text-on-surface font-label text-sm uppercase tracking-wider hover:text-primary transition-colors" href="#footer">Contact</a> </div> </div> <div class="flex items-center gap-4"> <button class="material-symbols-outlined p-2 hover:bg-surface-container-high rounded-full transition-colors">shopping_cart</button> <a href="#menu" class="bg-primary text-on-primary px-6 py-2 rounded-full font-label text-sm font-bold tracking-wide hover:bg-primary-container transition-all shadow-lg shadow-primary/10">Order Now</a> </div> </nav> <header class="relative min-h-screen flex items-center pt-16 overflow-hidden"> <div class="absolute inset-0 z-0"> <img alt="Artisanal Wood-Fired Pizza" class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1513104890138-7c749659a591?q=80&w=2070&auto=format&fit=crop"> <div class="absolute inset-0 bg-gradient-to-r from-on-background/80 via-on-background/40 to-transparent"></div> </div> <div class="container mx-auto px-6 relative z-10"> <div class="max-w-2xl"> <h1 class="font-headline text-6xl md:text-8xl text-surface leading-[0.9] mb-8 -tracking-widest"> Authentic Handcrafted Wood-Fired Pizza </h1> <p class="font-body text-xl md:text-2xl text-surface-variant/90 mb-12 max-w-lg leading-relaxed"> Rasai keaslian piza kraf yang dibakar sempurna di Bandar Dato' Onn, Johor Bahru.</p> <a class="inline-flex items-center gap-4 bg-primary text-on-primary px-8 py-4 rounded-full font-label text-lg font-bold ember-gradient hover:scale-105 transition-transform" href="#menu"> Lihat Menu <span class="material-symbols-outlined">arrow_downward</span> </a> </div> </div> </header> <section class="py-24 bg-surface" id="menu"> <div class="container mx-auto px-6"> <div class="flex flex-col md:flex-row justify-between items-end mb-20 gap-8"> <div> <span class="font-label text-primary uppercase tracking-[0.3em] text-sm font-bold block mb-4">The Collection</span> <h2 class="font-headline text-5xl md:text-6xl text-on-surface -tracking-tighter italic">Pilih Menu Anda</h2> </div> </div> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-24"> <div class="group item-card" data-name="Margherita Pizza" data-price="20"> <div class="aspect-square bg-surface-container-low rounded-xl overflow-hidden mb-8 relative"> <img alt="Margherita Pizza" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://plus.unsplash.com/premium_photo-1661762555601-47d088a26b50?q=80&w=1192&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"> <div class="absolute top-4 right-4 bg-surface px-3 py-1 rounded-full text-xs font-bold font-label uppercase">Classic</div> </div> <div class="flex justify-between items-start mb-4"> <h3 class="font-headline text-3xl text-on-surface italic">Margherita Pizza</h3> <span class="font-label text-xl font-bold text-primary">RM 20</span> </div> <p class="font-body text-on-secondary-container mb-8 line-clamp-2">Resipi klasik Itali dengan sos tomato segar, mozzarella premium & daun basil wangi.</p> <div class="flex items-center justify-between"> <div class="flex items-center bg-surface-container-high rounded-full p-1"> <button onclick="updateQty(this, -1)" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-highest transition-colors"> <span class="material-symbols-outlined text-sm">remove</span> </button> <span class="w-10 text-center font-label font-bold qty">0</span> <button onclick="updateQty(this, 1)" class="w-10 h-10 flex items-center justify-center rounded-full bg-on-surface text-surface hover:bg-primary transition-colors"> <span class="material-symbols-outlined text-sm">add</span> </button> </div> </div> </div> <div class="group item-card" data-name="Beef Pepperoni Pizza" data-price="25"> <div class="aspect-square bg-surface-container-low rounded-xl overflow-hidden mb-8 relative"> <img alt="Beef Pepperoni" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://images.unsplash.com/photo-1628840042765-356cda07504e?q=80&w=1780&auto=format&fit=crop"> <div class="absolute top-4 right-4 bg-primary text-on-primary px-3 py-1 rounded-full text-xs font-bold font-label uppercase">Best Seller</div> </div> <div class="flex justify-between items-start mb-4"> <h3 class="font-headline text-3xl text-on-surface italic">Beef Pepperoni Pizza</h3> <span class="font-label text-xl font-bold text-primary">RM 25</span> </div> <p class="font-body text-on-secondary-container mb-8 line-clamp-2">Pilihan No. 1! Limpahan beef pepperoni dengan sentuhan pedas shredded chilli.</p> <div class="flex items-center justify-between"> <div class="flex items-center bg-surface-container-high rounded-full p-1"> <button onclick="updateQty(this, -1)" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-highest transition-colors"> <span class="material-symbols-outlined text-sm">remove</span> </button> <span class="w-10 text-center font-label font-bold qty">0</span> <button onclick="updateQty(this, 1)" class="w-10 h-10 flex items-center justify-center rounded-full bg-on-surface text-surface hover:bg-primary transition-colors"> <span class="material-symbols-outlined text-sm">add</span> </button> </div> </div> </div> <div class="group item-card" data-name="Wagyu Pizza" data-price="79"> <div class="aspect-square bg-surface-container-low rounded-xl overflow-hidden mb-8 relative"> <img alt="Wagyu Pizza" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?q=80&w=1981&auto=format&fit=crop"> <div class="absolute top-4 right-4 bg-tertiary text-on-tertiary px-3 py-1 rounded-full text-xs font-bold font-label uppercase">Premium</div> </div> <div class="flex justify-between items-start mb-4"> <h3 class="font-headline text-3xl text-on-surface italic">Wagyu Pizza</h3> <span class="font-label text-xl font-bold text-primary">RM 79</span> </div> <p class="font-body text-on-secondary-container mb-8 line-clamp-2">Edisi Premium. Daging Wagyu lembut, jalapeno, & wild rocket untuk rasa mewah.</p> <div class="flex items-center justify-between"> <div class="flex items-center bg-surface-container-high rounded-full p-1"> <button onclick="updateQty(this, -1)" class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-highest transition-colors"> <span class="material-symbols-outlined text-sm">remove</span> </button> <span class="w-10 text-center font-label font-bold qty">0</span> <button onclick="updateQty(this, 1)" class="w-10 h-10 flex items-center justify-center rounded-full bg-on-surface text-surface hover:bg-primary transition-colors"> <span class="material-symbols-outlined text-sm">add</span> </button> </div> </div> </div> </div> <div class="mt-32 bg-surface-container-low rounded-[2rem] p-8 md:p-16"> <div class="grid grid-cols-1 md:grid-cols-2 gap-16"> <div> <h3 class="font-headline text-4xl mb-8 italic">Add-ons & Sides</h3> <div class="space-y-6"> <div class="flex items-center justify-between py-4 border-b border-outline-variant/30 item-card" data-name="Extra Cheese" data-price="4"> <div> <h4 class="font-label font-bold">Extra Cheese</h4> <p class="text-sm text-on-secondary-container">RM 4.00</p> </div> <div class="flex items-center gap-3"> <span class="font-label font-bold qty">0</span> <button onclick="updateQty(this, 1)" class="w-10 h-10 flex items-center justify-center rounded-full border border-outline hover:bg-primary hover:text-on-primary transition-all"> <span class="material-symbols-outlined">add</span> </button> </div> </div> <div class="flex items-center justify-between py-4 border-b border-outline-variant/30 item-card" data-name="Truffle Sauce" data-price="5"> <div> <h4 class="font-label font-bold">Truffle Sauce</h4> <p class="text-sm text-on-secondary-container">RM 5.00</p> </div> <div class="flex items-center gap-3"> <span class="font-label font-bold qty">0</span> <button onclick="updateQty(this, 1)" class="w-10 h-10 flex items-center justify-center rounded-full border border-outline hover:bg-primary hover:text-on-primary transition-all"> <span class="material-symbols-outlined">add</span> </button> </div> </div> </div> </div> <div> <h3 class="font-headline text-4xl mb-8 italic">Sweet Finale</h3> <div class="flex gap-8 group item-card" data-name="Tiramisu" data-price="20"> <div class="w-32 h-32 rounded-xl overflow-hidden shrink-0"> <img alt="Tiramisu" class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1571877227200-a0d98ea607e9?q=80&w=1974&auto=format&fit=crop"> </div> <div class="flex flex-col justify-between py-1"> <div> <h4 class="font-headline text-2xl italic">Tiramisu</h4> <p class="text-sm text-on-secondary-container mb-2">Penutup sempurna.</p> <span class="font-label font-bold text-primary">RM 20</span> </div> <div class="flex items-center gap-4"> <span class="font-label font-bold qty">0</span> <button onclick="updateQty(this, 1)" class="flex items-center gap-2 text-on-surface font-label text-sm font-bold uppercase tracking-wider group-hover:text-primary transition-colors"> Add to cart <span class="material-symbols-outlined text-sm">add_circle</span> </button> </div> </div> </div> </div> </div> </div> </div> </section> <section class="py-24 bg-surface-container-low" id="location"> <div class="container mx-auto px-6"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center"> <div class="rounded-[2.5rem] overflow-hidden aspect-[4/3] bg-surface-container-highest relative"> <img alt="Pizza Shop Interior" class="w-full h-full object-cover grayscale opacity-50" src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?q=80&w=1974&auto=format&fit=crop"> <div class="absolute inset-0 flex items-center justify-center"> <div class="w-20 h-20 bg-primary rounded-full flex items-center justify-center text-on-primary shadow-2xl"> <span class="material-symbols-outlined text-4xl">location_on</span> </div> </div> </div> <div> <span class="font-label text-primary uppercase tracking-[0.3em] text-sm font-bold block mb-4">Visit Us</span> <h2 class="font-headline text-5xl md:text-6xl text-on-surface mb-12 italic">Lokasi & Waktu Operasi</h2> <div class="space-y-12"> <div class="flex gap-6"> <div class="w-12 h-12 bg-surface flex items-center justify-center rounded-xl shrink-0"> <span class="material-symbols-outlined text-primary">map</span> </div> <div> <h4 class="font-label font-bold text-lg mb-2">Lokasi</h4> <p class="text-xl text-on-secondary-container leading-relaxed">Jalan Perjiranan 2,<br>Bandar Dato' Onn, Johor Bahru.</p> </div> </div> <div class="flex gap-6"> <div class="w-12 h-12 bg-surface flex items-center justify-center rounded-xl shrink-0"> <span class="material-symbols-outlined text-primary">schedule</span> </div> <div> <h4 class="font-label font-bold text-lg mb-2">Waktu Operasi</h4> <p class="text-xl text-on-secondary-container leading-relaxed">Khamis - Ahad<br>5.30pm - 12.00am</p> </div> </div> </div> </div> </div> </div> </section> <div class="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 pointer-events-none"> <div class="container mx-auto max-w-4xl"> <div class="glass-nav border border-outline-variant/30 rounded-full p-2 flex items-center justify-between shadow-2xl pointer-events-auto"> <div class="px-8"> <span class="font-label text-xs md:text-sm text-on-secondary-container block">Jumlah Keseluruhan</span> <span class="font-headline text-xl md:text-2xl italic" id="total-price">RM 0.00</span> </div> <button onclick="sendWhatsApp()" class="flex-1 md:flex-none flex items-center justify-center gap-3 bg-[#25D366] text-white px-6 md:px-10 py-4 rounded-full font-label text-sm md:text-lg font-bold hover:brightness-95 transition-all shadow-lg"> <span class="material-symbols-outlined">chat</span> Hantar ke WhatsApp </button> </div> </div> </div> <footer class="pt-32 pb-40 bg-on-background text-surface-variant" id="footer"> <div class="container mx-auto px-6"> <div class="flex flex-col md:flex-row justify-between items-start gap-16 mb-24"> <div class="max-w-xs"> <h3 class="font-headline text-3xl mb-6 text-surface italic">Fire Dough Pizza</h3> <p class="font-body text-sm opacity-60 leading-relaxed">Setiap doh diuli dengan tangan, dibakar dengan kayu api untuk rasa yang asli.</p> </div> <div class="grid grid-cols-2 gap-12 md:gap-24"> <div> <h4 class="font-label text-xs uppercase tracking-[0.2em] font-bold text-surface mb-6">Explore</h4> <ul class="space-y-4 font-label text-sm opacity-60"> <li><a class="hover:text-primary transition-colors" href="#menu">Menu</a></li> <li><a class="hover:text-primary transition-colors" href="#location">Location</a></li> </ul> </div> <div> <h4 class="font-label text-xs uppercase tracking-[0.2em] font-bold text-surface mb-6">Legal</h4> <ul class="space-y-4 font-label text-sm opacity-60"> <li><a class="hover:text-primary transition-colors" href="#">Privacy Policy</a></li> </ul> </div> </div> </div> <div class="flex flex-col md:flex-row justify-between items-center pt-8 border-t border-surface-variant/10 font-label text-xs tracking-widest uppercase opacity-40"> <p>© 2026 Firedough Pizza.</p> </div> </div> </footer> <script> let cart = {}; function updateQty(btn, change) { const card = btn.closest('.item-card'); const name = card.getAttribute('data-name'); const price = parseFloat(card.getAttribute('data-price')); const qtyElement = card.querySelector('.qty'); if (!cart[name]) { cart[name] = { price: price, qty: 0 }; } cart[name].qty += change; if (cart[name].qty < 0) cart[name].qty = 0; qtyElement.innerText = cart[name].qty; calculateTotal(); } function calculateTotal() { let total = 0; for (let item in cart) { total += cart[item].price * cart[item].qty; } document.getElementById('total-price').innerText = `RM ${total.toFixed(2)}`; } function sendWhatsApp() { let phoneNumber = "60123456789"; // TUKAR NOMBOR TELEFON ANDA DI SINI let message = "Salam Fire Dough Pizza, saya nak order:%0A%0A"; let hasItems = false; let total = 0; for (let item in cart) { if (cart[item].qty > 0) { let subtotal = cart[item].price * cart[item].qty; message += `• *${item}* (x${cart[item].qty}) - RM${subtotal.toFixed(2)}%0A`; total += subtotal; hasItems = true; } } if (!hasItems) { alert("Sila pilih sekurang-kurangnya satu menu."); return; } message += `%0A*Jumlah Keseluruhan: RM${total.toFixed(2)}*%0A%0AMohon proses order saya. Terima kasih!`; window.open(`https://wa.me/${phoneNumber}?text=${message}`, '