Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="id" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TwinOwls Bogor - Premium Handcrafted Leather & Executive Souvenirs</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
navy: '#1B2A4A',
brown: '#8B5A2B',
lightbrown: '#C49A6C',
bg: '#FDFBF7',
dark: '#111827'
}
}
}
}
}
</script>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body { background-color: #FDFBF7; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
</style>
</head>
<body class="text-gray-800 antialiased min-h-screen flex flex-col">
<!-- NAVIGASI / HEADER -->
<header class="sticky top-0 z-40 bg-white/95 backdrop-blur shadow-sm border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
<!-- Logo Perusahaan TwinOwls Bogor -->
<a href="#" class="flex items-center gap-3 group">
<div class="w-12 h-12 bg-brand-navy rounded-full flex items-center justify-center text-brand-lightbrown shadow-md group-hover:scale-105 transition-transform">
<i class="fa-solid fa-feather-pointed text-2xl"></i>
</div>
<div>
<span class="block font-bold text-xl tracking-wider text-brand-navy uppercase leading-none">TWINOWLS</span>
<span class="text-xs font-semibold tracking-widest text-brand-brown uppercase">BOGOR</span>
</div>
</a>
<!-- Menu Navigasi Desktop -->
<nav class="hidden md:flex items-center space-x-8 font-medium text-sm text-gray-700">
<a href="#profil" class="hover:text-brand-brown transition-colors">Profil</a>
<a href="#promo" class="hover:text-brand-brown transition-colors flex items-center gap-1 text-red-600 font-semibold">
<i class="fa-solid fa-tag"></i> Produk Promo
</a>
<a href="#produk" class="hover:text-brand-brown transition-colors">Katalog Produk</a>
<a href="#checkout" class="hover:text-brand-brown transition-colors">Pengiriman</a>
</nav>
<!-- Tombol Keranjang & Kontak -->
<div class="flex items-center gap-4">
<button onclick="toggleCart()" class="relative p-2.5 text-gray-700 hover:text-brand-brown bg-gray-50 rounded-full border border-gray-200 transition-colors">
<i class="fa-solid fa-bag-shopping text-xl"></i>
<span id="cart-count" class="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold w-5 h-5 rounded-full flex items-center justify-center">0</span>
</button>
<a href="https://wa.me/6283312553332?text=Halo%20TwinOwls%20Bogor,%20saya%20ingin%20bertanya%20produk" target="_blank" class="hidden sm:flex items-center gap-2 bg-emerald-600 hover:bg-emerald-700 text-white px-4 py-2 rounded-lg text-sm font-semibold transition-colors shadow-sm">
<i class="fa-brands fa-whatsapp text-lg"></i>
<span>Hubungi Kami</span>
</a>
</div>
</div>
</header>
<!-- HERO / BANNER UTAMA -->
<section class="bg-gradient-to-r from-brand-navy via-[#233558] to-brand-navy text-white py-16 md:py-24 relative overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-6">
<span class="inline-block bg-brand-brown/40 border border-brand-lightbrown/50 text-brand-lightbrown text-xs font-bold uppercase px-3 py-1 rounded-full">
Executive Essentials & Merchandise
</span>
<h1 class="text-3xl md:text-5xl font-extrabold leading-tight">
Kerajinan Kulit & Tas Eksklusif Khas Bogor
</h1>
<p class="text-gray-300 text-base md:text-lg">
Spesialis produsen tas kerja, clutch, ID card holder, dan paket souvenir instansi berkualitas tinggi dengan material premium serta opsi kustomisasi logo.
</p>
<div class="flex flex-wrap gap-4 pt-2">
<a href="#produk" class="bg-brand-brown hover:bg-yellow-800 text-white px-6 py-3 rounded-lg font-semibold shadow-lg transition-all">Lihat Katalog</a>
<a href="#promo" class="bg-white/10 hover:bg-white/20 text-white border border-white/20 px-6 py-3 rounded-lg font-semibold transition-all">Lihat Promo Paket</a>
</div>
</div>
<div class="relative flex justify-center">
<div class="w-full max-w-md bg-white/5 p-4 rounded-2xl border border-white/10 backdrop-blur">
<img src="https://images.unsplash.com/photo-1548036328-c9fa89d128fa?auto=format&fit=crop&w=800&q=80" alt="TwinOwls Leather Goods" class="rounded-xl shadow-2xl object-cover h-80 w-full">
</div>
</div>
</div>
</section>
<!-- PROFIL PERUSAHAAN -->
<section id="profil" class="py-16 bg-white border-b border-gray-100">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-3xl mx-auto mb-12">
<h2 class="text-xs font-bold text-brand-brown uppercase tracking-widest mb-2">Tentang Kami</h2>
<h3 class="text-3xl font-extrabold text-brand-navy">Profil TwinOwls Bogor</h3>
<p class="text-gray-600 mt-4">
TwinOwls Bogor adalah produsen lokal terpercaya yang memproduksi beragam barang berbahan dasar kulit sintetis premium, kanvas, dan kombinasi batik modern. Kami melayani pembelian eceran hingga pesanan grosir/paket souvenir untuk kementerian, kantor pemerintah, serta perusahaan swasta.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<div class="p-6 bg-brand-bg rounded-xl border border-gray-200/60 text-center">
<div class="w-12 h-12 bg-amber-100 text-brand-brown rounded-full flex items-center justify-center mx-auto mb-4 text-xl">
<i class="fa-solid fa-gem"></i>
</div>
<h4 class="font-bold text-lg mb-2">Material Premium</h4>
<p class="text-sm text-gray-600">Bahan kulit sintetis berkualitas, kanvas tebal tahan lama, serta jahitan rapi pengerjaan rajin.</p>
</div>
<div class="p-6 bg-brand-bg rounded-xl border border-gray-200/60 text-center">
<div class="w-12 h-12 bg-amber-100 text-brand-brown rounded-full flex items-center justify-center mx-auto mb-4 text-xl">
<i class="fa-solid fa-stamp"></i>
</div>
<h4 class="font-bold text-lg mb-2">Custom Deboss / Grafir</h4>
<p class="text-sm text-gray-600">Dapat menambahkan logo instansi, nama pribadi, atau cetakan batik kustom pada produk.</p>
</div>
<div class="p-6 bg-brand-bg rounded-xl border border-gray-200/60 text-center">
<div class="w-12 h-12 bg-amber-100 text-brand-brown rounded-full flex items-center justify-center mx-auto mb-4 text-xl">
<i class="fa-solid fa-truck-fast"></i>
</div>
<h4 class="font-bold text-lg mb-2">Pengiriman Seluruh Indonesia</h4>
<p class="text-sm text-gray-600">Pengiriman terpercaya langsung dari Kota Bogor dengan berbagai pilihan jasa ekspedisi.</p>
</div>
</div>
</div>
</section>
<!-- PRODUK PROMO (SPECIAL BUNDLE) -->
<section id="promo" class="py-16 bg-amber-50/50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex flex-col md:flex-row md:items-end justify-between mb-10">
<div>
<span class="text-xs font-bold text-red-600 uppercase tracking-widest block mb-1">Penawaran Spesial</span>
<h2 class="text-3xl font-extrabold text-brand-navy">Produk Promo & Paket Bundling</h2>
</div>
<p class="text-gray-600 text-sm mt-2 md:mt-0">Dapatkan harga lebih hemat untuk pembelian paket instansi dan set eksklusif.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-2 gap-8" id="promo-container">
<!-- Promo Items Injected by JS -->
</div>
</div>
</section>
<!-- KATALOG PRODUK LENGKAP -->
<section id="produk" class="py-16 bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center max-w-2xl mx-auto mb-12">
<span class="text-xs font-bold text-brand-brown uppercase tracking-widest block mb-1">Koleksi Lengkap</span>
<h2 class="text-3xl font-extrabold text-brand-navy">Katalog Produk TwinOwls</h2>
<p class="text-gray-600 text-sm mt-2">Pilih produk favorit Anda dan tambahkan langsung ke keranjang belanja.</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8" id="products-container">
<!-- Regular Products Injected by JS -->
</div>
</div>
</section>
<!-- CHECKOUT & PENGIRIMAN -->
<section id="checkout" class="py-16 bg-brand-bg border-t border-gray-200">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="bg-white p-8 rounded-2xl shadow-sm border border-gray-200">
<div class="text-center mb-8">
<i class="fa-solid fa-truck-ramp-box text-3xl text-brand-brown mb-2"></i>
<h2 class="text-2xl font-bold text-brand-navy">Informasi Pengiriman & Checkout</h2>
<p class="text-sm text-gray-500 mt-1">Lengkapi data Anda untuk memproses pesanan langsung ke WhatsApp admin.</p>
</div>
<form id="checkout-form" onsubmit="handleCheckout(event)" class="space-y-6">
<div class="grid sm:grid-cols-2 gap-6">
<div>
<label class="block text-xs font-bold uppercase text-gray-700 mb-2">Nama Lengkap *</label>
<input type="text" id="cust-name" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-brown focus:border-brand-brown outline-none text-sm" placeholder="Contoh: Budi Santoso">
</div>
<div>
<label class="block text-xs font-bold uppercase text-gray-700 mb-2">Nomor WhatsApp *</label>
<input type="tel" id="cust-phone" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-brown focus:border-brand-brown outline-none text-sm" placeholder="Contoh: 08123456789">
</div>
</div>
<div>
<label class="block text-xs font-bold uppercase text-gray-700 mb-2">Alamat Lengkap Pengiriman *</label>
<textarea id="cust-address" rows="3" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-brown focus:border-brand-brown outline-none text-sm" placeholder="Jalan, No. Rumah, RT/RW, Kecamatan, Kota/Kabupaten, Kode Pos"></textarea>
</div>
<div class="grid sm:grid-cols-2 gap-6">
<div>
<label class="block text-xs font-bold uppercase text-gray-700 mb-2">Pilihan Ekspedisi *</label>
<select id="cust-courier" required class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-brown focus:border-brand-brown outline-none text-sm">
<option value="JNE">JNE Express</option>
<option value="J&T">J&T Express</option>
<option value="SiCepat">SiCepat Cargo / Regular</option>
<option value="POS Indonesia">POS Indonesia</option>
</select>
</div>
<div>
<label class="block text-xs font-bold uppercase text-gray-700 mb-2">Catatan Tambahan / Custom Logo</label>
<input type="text" id="cust-notes" class="w-full px-4 py-2.5 rounded-lg border border-gray-300 focus:ring-2 focus:ring-brand-brown focus:border-brand-brown outline-none text-sm" placeholder="Contoh: Tambah Emboss Logo Kementerian">
</div>
</div>
<div class="border-t pt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
<div>
<span class="text-xs text-gray-500 uppercase font-bold block">Total Belanja:</span>
<span id="checkout-total-price" class="text-2xl font-extrabold text-brand-brown">Rp 0</span>
</div>
<button type="submit" class="w-full sm:w-auto bg-emerald-600 hover:bg-emerald-700 text-white font-bold px-8 py-3.5 rounded-xl shadow-md transition-all flex items-center justify-center gap-2">
<i class="fa-brands fa-whatsapp text-xl"></i>
<span>Kirim Pesanan via WhatsApp</span>
</button>
</div>
</form>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="bg-brand-navy text-gray-300 mt-auto border-t border-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div class="space-y-4">
<div class="flex items-center gap-2">
<div class="w-8 h-8 bg-brand-lightbrown rounded-full flex items-center justify-center text-brand-navy font-bold">
<i class="fa-solid fa-feather-pointed"></i>
</div>
<span class="font-bold text-lg text-white">TWINOWLS BOGOR</span>
</div>
<p class="text-xs text-gray-400 leading-relaxed">
Produsen tas, clutch, dan perlengkapan kantor berbahan kulit premium serta kombinasi batik khas dari Kota Bogor.
</p>
</div>
<div>
<h5 class="text-white font-bold mb-4 text-sm uppercase tracking-wider">Kontak Admin</h5>
<ul class="space-y-2 text-sm text-gray-400">
<li class="flex items-center gap-2"><i class="fa-brands fa-whatsapp text-emerald-500"></i> +033-1255-3332</li>
<li class="flex items-center gap-2"><i class="fa-solid fa-globe text-brand-lightbrown"></i> www.twinowlsbogo.com</li>
<li class="flex items-center gap-2"><i class="fa-solid fa-location-dot text-red-400"></i> Bogor, Jawa Barat</li>
</ul>
</div>
<div>
<h5 class="text-white font-bold mb-4 text-sm uppercase tracking-wider">Kategori Produk</h5>
<ul class="space-y-2 text-sm text-gray-400">
<li>Sling Bag & Messenger Bag</li>
<li>Paket Officer & Souvenir</li>
<li>Leather ID Card Holder</li>
<li>Tablet Bag & Organizer</li>
</ul>
</div>
<div>
<h5 class="text-white font-bold mb-4 text-sm uppercase tracking-wider">Bantu Layanan</h5>
<p class="text-xs text-gray-400 mb-3">Menerima pengadaan souvenir instansi dan custom pesanan dalam jumlah besar.</p>
<a href="https://wa.me/6283312553332" target="_blank" class="inline-block bg-white/10 hover:bg-white/20 text-white text-xs px-4 py-2 rounded border border-white/20 transition-colors">Konsultasi Custom Logo</a>
</div>
</div>
<div class="border-t border-gray-800 pt-6 text-center text-xs text-gray-500">
© 2026 TwinOwls Bogor. All rights reserved.
</div>
</div>
</footer>
<!-- SLIDE-OVER MODAL KERANJANG BELANJA -->
<div id="cart-modal" class="fixed inset-0 z-50 invisible transition-all duration-300">
<!-- Backdrop -->
<div onclick="toggleCart()" class="absolute inset-0 bg-black/50 backdrop-blur-sm"></div>
<!-- Drawer Panel -->
<div class="absolute right-0 top-0 bottom-0 w-full max-w-md bg-white shadow-2xl flex flex-col transform translate-x-full transition-transform duration-300" id="cart-drawer">
<!-- Header Cart -->
<div class="p-5 border-b flex items-center justify-between bg-brand-navy text-white">
<div class="flex items-center gap-2">
<i class="fa-solid fa-bag-shopping text-brand-lightbrown"></i>
<h3 class="font-bold">Keranjang Belanja</h3>
</div>
<button onclick="toggleCart()" class="text-gray-300 hover:text-white p-1">
<i class="fa-solid fa-xmark text-xl"></i>
</button>
</div>
<!-- Cart Items List -->
<div class="flex-1 overflow-y-auto p-5 space-y-4" id="cart-items-container">
<!-- Items dynamically injected -->
</div>
<!-- Footer Cart -->
<div class="p-5 border-t bg-gray-50 space-y-4">
<div class="flex justify-between items-center text-lg font-bold">
<span class="text-gray-700">Subtotal:</span>
<span id="cart-subtotal" class="text-brand-brown">Rp 0</span>
</div>
<a href="#checkout" onclick="toggleCart()" class="block text-center bg-brand-navy hover:bg-brand-brown text-white font-bold py-3 rounded-xl transition-colors">
Lanjut ke Pengiriman
</a>
</div>
</div>
</div>
<!-- FLOATING WHATSAPP BUTTON -->
<a href="https://wa.me/6283312553332?text=Halo%20TwinOwls%20Bogor,%20saya%20ingin%20tanya%20produk" target="_blank" class="fixed bottom-6 right-6 z-40 bg-emerald-500 text-white w-14 h-14 rounded-full shadow-2xl flex items-center justify-center text-2xl hover:scale-110 transition-transform">
<i class="fa-brands fa-whatsapp"></i>
</a>
<!-- JAVASCRIPT / LOGIKA KERANJANG & DATA PRODUK -->
<script>
// Data Produk TwinOwls Bogor
const products = [
{
id: 1,
name: "Paket Officer Eksklusif (Batik Edition)",
category: "Promo Bundle",
price: 450000,
originalPrice: 550000,
isPromo: true,
badge: "Terlaris Instansi",
desc: "Isi: Tote Bag Besar, Portfolio Batik, Agenda Batik, ID Card Holder & Lanyard.",
image: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62?auto=format&fit=crop&w=600&q=80"
},
{
id: 2,
name: "Paket Profesional Laptop & Agenda",
category: "Promo Bundle",
price: 380000,
originalPrice: 460000,
isPromo: true,
badge: "Paket Hemat",
desc: "Tas Laptop Premium Canvas-Leather + Agenda Kalender Ergo & Pulpen.",
image: "https://images.unsplash.com/photo-1544816155-12df9643f363?auto=format&fit=crop&w=600&q=80"
},
{
id: 3,
name: "Daily Sling Bag Minimalis",
category: "Tas Selempang",
price: 215000,
originalPrice: null,
isPromo: false,
badge: "Casual",
desc: "Bahan kanvas navy ramping, resleting depan & tali bahu nyaman.",
image: "https://images.unsplash.com/photo-1590874103328-eac38a683ce7?auto=format&fit=crop&w=600&q=80"
},
{
id: 4,
name: "Officer Essentials Leather Collection",
category: "Executive Set",
price: 390000,
originalPrice: null,
isPromo: false,
badge: "Kulit Premium",
desc: "Zipped Messenger Clutch, A5 Organizer, Dual ID Holder & Lanyard.",
image: "https://images.unsplash.com/photo-1606503153255-59d8b8b82176?auto=format&fit=crop&w=600&q=80"
},
{
id: 5,
name: "Leather ID Card Holder & Lanyard",
category: "Aksesoris",
price: 75000,
originalPrice: null,
isPromo: false,
badge: "Custom Logo",
desc: "Kulit sintetis premium, jendela mika jernih, grafir/deboss logo instansi.",
image: "https://images.unsplash.com/photo-1618384887929-16ec33fab9ef?auto=format&fit=crop&w=600&q=80"
},
{
id: 6,
name: "Elegance Tablet & Document Bag",
category: "Tas Multifungsi",
price: 245000,
originalPrice: null,
isPromo: false,
badge: "Sleek",
desc: "Kombinasi bahan jins/kanvas & kulit sintetis dengan tali pergelangan.",
image: "https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?auto=format&fit=crop&w=600&q=80"
}
];
let cart = [];
// Format Currency Rupiah
function formatRupiah(amount) {
return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(amount);
}
// Render Katalog Produk & Promo
function renderProducts() {
const promoContainer = document.getElementById('promo-container');
const productsContainer = document.getElementById('products-container');
promoContainer.innerHTML = '';
productsContainer.innerHTML = '';
products.forEach(product => {
const cardHTML = `
<div class="bg-white rounded-2xl border border-gray-200/80 overflow-hidden shadow-sm hover:shadow-lg transition-all flex flex-col justify-between">
<div>
<div class="relative h-48 bg-gray-100 overflow-hidden">
<img src="${product.image}" alt="${product.name}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500">
${product.badge ? `<span class="absolute top-3 left-3 ${product.isPromo ? 'bg-red-600' : 'bg-brand-navy'} text-white text-[10px] font-bold uppercase tracking-wider px-2.5 py-1 rounded-full shadow">${product.badge}</span>` : ''}
</div>
<div class="p-5">
<span class="text-xs font-semibold text-brand-brown uppercase tracking-wider">${product.category}</span>
<h3 class="font-bold text-lg text-gray-900 mt-1 leading-snug">${product.name}</h3>
<p class="text-xs text-gray-500 mt-2 leading-relaxed">${product.desc}</p>
</div>
</div>
<div class="px-5 pb-5 pt-2 border-t border-gray-100 flex items-center justify-between mt-auto">
<div>
${product.originalPrice ? `<span class="text-xs text-gray-400 line-through block">${formatRupiah(product.originalPrice)}</span>` : ''}
<span class="text-lg font-extrabold text-brand-navy">${formatRupiah(product.price)}</span>
</div>
<button onclick="addToCart(${product.id})" class="bg-brand-navy hover:bg-brand-brown text-white text-xs font-bold px-4 py-2.5 rounded-lg shadow transition-colors flex items-center gap-1.5">
<i class="fa-solid fa-cart-plus"></i> + Keranjang
</button>
</div>
</div>
`;
if (product.isPromo) {
promoContainer.innerHTML += cardHTML;
} else {
productsContainer.innerHTML += cardHTML;
}
});
}
// Tambah Produk ke Keranjang
function addToCart(productId) {
const product = products.find(p => p.id === productId);
const existingItem = cart.find(item => item.id === productId);
if (existingItem) {
existingItem.quantity += 1;
} else {
cart.push({ ...product, quantity: 1 });
}
updateCartUI();
toggleCart(true); // Buka drawer keranjang
}
// Ubah Kuantitas
function updateQuantity(productId, change) {
const item = cart.find(item => item.id === productId);
if (item) {
item.quantity += change;
if (item.quantity <= 0) {
cart = cart.filter(i => i.id !== productId);
}
}
updateCartUI();
}
// Hapus Produk dari Keranjang
function removeFromCart(productId) {
cart = cart.filter(item => item.id !== productId);
updateCartUI();
}
// Update Tampilan Keranjang
function updateCartUI() {
const cartCount = document.getElementById('cart-count');
const cartItemsContainer = document.getElementById('cart-items-container');
const cartSubtotal = document.getElementById('cart-subtotal');
const checkoutTotalPrice = document.getElementById('checkout-total-price');
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
cartCount.textContent = totalItems;
cartSubtotal.textContent = formatRupiah(totalPrice);
checkoutTotalPrice.textContent = formatRupiah(totalPrice);
if (cart.length === 0) {
cartItemsContainer.innerHTML = `
<div class="text-center py-12 text-gray-400">
<i class="fa-solid fa-basket-shopping text-4xl mb-3"></i>
<p class="text-sm">Keranjang Anda masih kosong.</p>
</div>
`;
return;
}
cartItemsContainer.innerHTML = cart.map(item => `
<div class="flex items-center justify-between border-b pb-3 gap-3">
<div class="flex-1">
<h4 class="font-bold text-sm text-gray-800 line-clamp-1">${item.name}</h4>
<span class="text-xs text-brand-brown font-semibold">${formatRupiah(item.price)}</span>
</div>
<div class="flex items-center gap-2 border rounded-lg px-2 py-1 bg-gray-50">
<button onclick="updateQuantity(${item.id}, -1)" class="text-xs px-1 text-gray-600 hover:text-black">-</button>
<span class="text-xs font-bold w-4 text-center">${item.quantity}</span>
<button onclick="updateQuantity(${item.id}, 1)" class="text-xs px-1 text-gray-600 hover:text-black">+</button>
</div>
<button onclick="removeFromCart(${item.id})" class="text-red-500 hover:text-red-700 text-xs p-1">
<i class="fa-solid fa-trash"></i>
</button>
</div>
`).join('');
}
// Toggle Modal Keranjang
function toggleCart(open = null) {
const modal = document.getElementById('cart-modal');
const drawer = document.getElementById('cart-drawer');
if (open === true || (open === null && modal.classList.contains('invisible'))) {
modal.classList.remove('invisible');
drawer.classList.remove('translate-x-full');
} else {
drawer.classList.add('translate-x-full');
setTimeout(() => modal.classList.add('invisible'), 300);
}
}
// Handle Form Checkout & Redirect WhatsApp
function handleCheckout(event) {
event.preventDefault();
if (cart.length === 0) {
alert("Keranjang belanja Anda masih kosong! Silakan pilih produk terlebih dahulu.");
return;
}
const name = document.getElementById('cust-name').value;
const phone = document.getElementById('cust-phone').value;
const address = document.getElementById('cust-address').value;
const courier = document.getElementById('cust-courier').value;
const notes = document.getElementById('cust-notes').value || "-";
let itemDetails = cart.map((item, index) =>
`${index + 1}. *${item.name}* (${item.quantity}x) = ${formatRupiah(item.price * item.quantity)}`
).join('\n');
const totalPrice = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);
const waMessage = `*PESANAN BARU - TWINOWLS BOGOR*
--------------------------------------------------
*Data Pemesan:*
• Nama: ${name}
• No. HP: ${phone}
• Alamat Pengiriman: ${address}
• Ekspedisi: ${courier}
• Catatan: ${notes}
*Rincian Pesanan:*
${itemDetails}
*Total Pembayaran:* ${formatRupiah(totalPrice)}
--------------------------------------------------
Mohon informasi rekening pembayaran & total ongkir. Terima kasih!`;
const encodedMessage = encodeURIComponent(waMessage);
const waNumber = "6283312553332"; // Nomor WA Admin TwinOwls Bogor
window.open(`https://wa.me/${waNumber}?text=${encodedMessage}`, '_blank');
}
// Inisialisasi awal saat halaman dimuat
document.addEventListener('DOMContentLoaded', () => {
renderProducts();
updateCartUI();
});
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
13
Requests
4
Domains
729KB
Transfer Size
1081KB
Content Size
651.0ms
Dom Content Loaded
904.0ms
First Paint
881.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...