PROMPT UTAMA
Integrasi Sistem Order Online UMKM ke Website (Tailwind CSS) Prompt: Saya ingin membuat website / landing page UMKM kuliner yang responsif, modern, dan mobile-first menggunakan HTML5 + Tailwind CSS + JavaScript. Website ini harus terintegrasi dengan sistem order online Google Workspace (Google Forms / Google Sheets / Google Apps Script). Konteks UMKM: Nama usaha: Dapur Berkah Bidang: Kuliner Model order: Online Target pengguna: Mobile user Tujuan website: Menampilkan informasi usaha & menu Menjadi pintu utama pemesanan online Mengirim data order ke Google Sheets Memberikan feedback real-time ke pelanggan Spesifikasi Teknis: Frontend: HTML5 Tailwind CSS (CDN) JavaScript (Vanilla) Desain: Modern, clean, UMKM-friendly Responsive (mobile, tablet, desktop) Integrasi Backend: Google Apps Script Web App (POST JSON) Google Sheets sebagai database Fitur Wajib: Landing page (Hero, About, Menu, CTA) Form order pelanggan (embedded / custom) Validasi input form Submit order via fetch() ke Apps Script Loading & success message Error handling Output yang diminta: File index.html lengkap (Tailwind) Struktur section website Contoh desain komponen Tailwind Kode JavaScript submit form Contoh endpoint Apps Script Penjelasan singkat tiap bagianIndex.html
<!doctype html>
<html lang="id" class="h-full scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dapur Berkah - Masakan Rumahan Penuh Cinta</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="/_sdk/element_sdk.js"></script>
<style>
body {
box-sizing: border-box;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease-out forwards;
}
.menu-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.menu-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.loading-spinner {
border: 3px solid rgba(255,255,255,0.3);
border-radius: 50%;
border-top: 3px solid white;
width: 24px;
height: 24px;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<style>@view-transition { navigation: auto; }</style>
<script src="/_sdk/data_sdk.js" type="text/javascript"></script>
</head>
<body class="h-full w-full">
<div id="app-wrapper" class="h-full w-full overflow-auto" style="font-family: 'Inter', system-ui, -apple-system, sans-serif;"><!-- Navigation -->
<nav id="navbar" class="fixed w-full top-0 z-50 transition-all duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<div class="flex items-center space-x-2">
<div class="text-3xl">
🍳
</div><span id="nav-brand" class="text-xl font-bold">Dapur Berkah</span>
</div>
<div class="hidden md:flex space-x-8"><a href="#home" class="hover:opacity-80 transition-opacity font-medium">Beranda</a> <a href="#about" class="hover:opacity-80 transition-opacity font-medium">Tentang</a> <a href="#menu" class="hover:opacity-80 transition-opacity font-medium">Menu</a> <a href="#order" class="hover:opacity-80 transition-opacity font-medium">Pesan</a>
</div><button id="mobile-menu-btn" class="md:hidden p-2 rounded-lg">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg></button>
</div>
</div><!-- Mobile Menu -->
<div id="mobile-menu" class="hidden md:hidden">
<div class="px-4 pt-2 pb-4 space-y-2"><a href="#home" class="block px-3 py-2 rounded-lg hover:opacity-80 transition-opacity">Beranda</a> <a href="#about" class="block px-3 py-2 rounded-lg hover:opacity-80 transition-opacity">Tentang</a> <a href="#menu" class="block px-3 py-2 rounded-lg hover:opacity-80 transition-opacity">Menu</a> <a href="#order" class="block px-3 py-2 rounded-lg hover:opacity-80 transition-opacity">Pesan</a>
</div>
</div>
</nav><!-- Hero Section -->
<section id="home" class="pt-16 min-h-screen flex items-center justify-center">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
<div class="text-center fade-in">
<div class="text-7xl mb-6">
🍽️
</div>
<h1 id="hero-title" class="text-5xl md:text-7xl font-bold mb-6">Dapur Berkah</h1>
<p id="hero-tagline" class="text-2xl md:text-3xl mb-4 opacity-90">Masakan Rumahan Penuh Cinta</p>
<p id="hero-description" class="text-lg md:text-xl mb-8 max-w-2xl mx-auto opacity-80">Nikmati kelezatan masakan rumahan yang dibuat dengan bahan pilihan dan penuh kehangatan</p>
<div class="flex flex-col sm:flex-row gap-4 justify-center"><a href="#order" id="hero-cta-btn" class="px-8 py-4 rounded-full font-semibold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105"> Pesan Sekarang 🛒 </a> <a href="#menu" class="px-8 py-4 rounded-full font-semibold text-lg border-2 hover:opacity-80 transition-opacity"> Lihat Menu 📋 </a>
</div>
</div>
</div>
</section><!-- About Section -->
<section id="about" class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="fade-in">
<h2 id="about-title" class="text-4xl md:text-5xl font-bold mb-6">Tentang Dapur Berkah</h2>
<p id="about-description" class="text-lg mb-6 opacity-90">Kami adalah UMKM kuliner yang berkomitmen menyajikan masakan rumahan berkualitas dengan cita rasa yang autentik. Setiap hidangan dibuat dengan penuh perhatian dan menggunakan bahan-bahan segar pilihan.</p>
<div class="grid grid-cols-2 gap-6">
<div class="rounded-2xl p-6 shadow-md">
<div class="text-4xl mb-3">
⭐
</div>
<h3 class="font-bold text-xl mb-2">Kualitas Terjamin</h3>
<p class="opacity-80">Bahan segar setiap hari</p>
</div>
<div class="rounded-2xl p-6 shadow-md">
<div class="text-4xl mb-3">
🚀
</div>
<h3 class="font-bold text-xl mb-2">Pengiriman Cepat</h3>
<p class="opacity-80">Antar hangat ke rumah</p>
</div>
<div class="rounded-2xl p-6 shadow-md">
<div class="text-4xl mb-3">
💝
</div>
<h3 class="font-bold text-xl mb-2">Dibuat dengan Cinta</h3>
<p class="opacity-80">Seperti masakan ibu</p>
</div>
<div class="rounded-2xl p-6 shadow-md">
<div class="text-4xl mb-3">
💰
</div>
<h3 class="font-bold text-xl mb-2">Harga Terjangkau</h3>
<p class="opacity-80">Ramah di kantong</p>
</div>
</div>
</div>
<div class="rounded-3xl p-12 shadow-2xl flex items-center justify-center">
<div class="text-center">
<div class="text-9xl mb-6">
👨🍳
</div>
<p class="text-xl font-semibold opacity-80">Resep Turun Temurun</p>
</div>
</div>
</div>
</div>
</section><!-- Menu Section -->
<section id="menu" class="py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16 fade-in">
<h2 class="text-4xl md:text-5xl font-bold mb-4">Menu Pilihan</h2>
<p class="text-lg opacity-80">Beragam hidangan lezat untuk keluarga tercinta</p>
</div>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="menu-card rounded-3xl overflow-hidden shadow-lg">
<div class="h-48 flex items-center justify-center text-7xl">
🍗
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Ayam Goreng Kremes</h3>
<p class="opacity-80 mb-4">Ayam goreng renyah dengan kremesan gurih</p>
<div class="flex justify-between items-center"><span class="text-2xl font-bold">Rp 25.000</span> <span class="px-4 py-2 rounded-full text-sm font-semibold">Populer 🔥</span>
</div>
</div>
</div>
<div class="menu-card rounded-3xl overflow-hidden shadow-lg">
<div class="h-48 flex items-center justify-center text-7xl">
🍛
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Nasi Goreng Spesial</h3>
<p class="opacity-80 mb-4">Nasi goreng dengan telur, ayam, dan sayuran</p>
<div class="flex justify-between items-center"><span class="text-2xl font-bold">Rp 20.000</span> <span class="px-4 py-2 rounded-full text-sm font-semibold opacity-70">Best Seller</span>
</div>
</div>
</div>
<div class="menu-card rounded-3xl overflow-hidden shadow-lg">
<div class="h-48 flex items-center justify-center text-7xl">
🍜
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Soto Ayam Komplit</h3>
<p class="opacity-80 mb-4">Soto ayam hangat dengan bumbu rempah</p>
<div class="flex justify-between items-center"><span class="text-2xl font-bold">Rp 22.000</span> <span class="px-4 py-2 rounded-full text-sm font-semibold opacity-70">Rekomendasi</span>
</div>
</div>
</div>
<div class="menu-card rounded-3xl overflow-hidden shadow-lg">
<div class="h-48 flex items-center justify-center text-7xl">
🥘
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Rendang Sapi</h3>
<p class="opacity-80 mb-4">Rendang empuk dengan bumbu meresap</p>
<div class="flex justify-between items-center"><span class="text-2xl font-bold">Rp 35.000</span> <span class="px-4 py-2 rounded-full text-sm font-semibold">Premium ⭐</span>
</div>
</div>
</div>
<div class="menu-card rounded-3xl overflow-hidden shadow-lg">
<div class="h-48 flex items-center justify-center text-7xl">
🍲
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Gado-Gado Jakarta</h3>
<p class="opacity-80 mb-4">Sayuran segar dengan bumbu kacang kental</p>
<div class="flex justify-between items-center"><span class="text-2xl font-bold">Rp 18.000</span> <span class="px-4 py-2 rounded-full text-sm font-semibold opacity-70">Sehat 🥗</span>
</div>
</div>
</div>
<div class="menu-card rounded-3xl overflow-hidden shadow-lg">
<div class="h-48 flex items-center justify-center text-7xl">
🍹
</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Es Teh Manis</h3>
<p class="opacity-80 mb-4">Teh manis segar untuk teman makan</p>
<div class="flex justify-between items-center"><span class="text-2xl font-bold">Rp 5.000</span> <span class="px-4 py-2 rounded-full text-sm font-semibold opacity-70">Minuman</span>
</div>
</div>
</div>
</div>
</div>
</section><!-- Order Form Section -->
<section id="order" class="py-20">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-3xl shadow-2xl p-8 md:p-12">
<div class="text-center mb-8">
<div class="text-6xl mb-4">
📝
</div>
<h2 class="text-4xl font-bold mb-3">Form Pemesanan</h2>
<p class="text-lg opacity-80">Isi data di bawah untuk memesan</p>
</div>
<form id="orderForm" class="space-y-6">
<div><label for="customerName" class="block text-sm font-semibold mb-2">Nama Lengkap *</label> <input type="text" id="customerName" name="customerName" required class="w-full px-4 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 transition-all" placeholder="Masukkan nama Anda">
</div>
<div><label for="customerPhone" class="block text-sm font-semibold mb-2">Nomor WhatsApp *</label> <input type="tel" id="customerPhone" name="customerPhone" required pattern="[0-9]{10,13}" class="w-full px-4 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 transition-all" placeholder="08123456789">
<p class="text-sm opacity-70 mt-1">Format: 08xxxxxxxxxx</p>
</div>
<div><label for="customerAddress" class="block text-sm font-semibold mb-2">Alamat Lengkap *</label> <textarea id="customerAddress" name="customerAddress" required rows="3" class="w-full px-4 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 transition-all resize-none" placeholder="Jl. Contoh No. 123, Kelurahan, Kecamatan, Kota"></textarea>
</div>
<div><label for="menuItem" class="block text-sm font-semibold mb-2">Pilih Menu *</label> <select id="menuItem" name="menuItem" required class="w-full px-4 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 transition-all"> <option value="">-- Pilih Menu --</option> <option value="Ayam Goreng Kremes - Rp 25.000">Ayam Goreng Kremes - Rp 25.000</option> <option value="Nasi Goreng Spesial - Rp 20.000">Nasi Goreng Spesial - Rp 20.000</option> <option value="Soto Ayam Komplit - Rp 22.000">Soto Ayam Komplit - Rp 22.000</option> <option value="Rendang Sapi - Rp 35.000">Rendang Sapi - Rp 35.000</option> <option value="Gado-Gado Jakarta - Rp 18.000">Gado-Gado Jakarta - Rp 18.000</option> <option value="Es Teh Manis - Rp 5.000">Es Teh Manis - Rp 5.000</option> </select>
</div>
<div><label for="quantity" class="block text-sm font-semibold mb-2">Jumlah Porsi *</label> <input type="number" id="quantity" name="quantity" required min="1" value="1" class="w-full px-4 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 transition-all">
</div>
<div><label for="notes" class="block text-sm font-semibold mb-2">Catatan Tambahan</label> <textarea id="notes" name="notes" rows="3" class="w-full px-4 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 transition-all resize-none" placeholder="Contoh: Pedas sedang, tanpa cabe rawit"></textarea>
</div><button type="submit" id="submitBtn" class="w-full py-4 rounded-xl font-bold text-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center"> <span id="submitBtnText">Kirim Pesanan 🚀</span> </button>
</form><!-- Success Message -->
<div id="successMessage" class="hidden mt-6 p-6 rounded-xl text-center">
<div class="text-5xl mb-3">
✅
</div>
<h3 class="text-2xl font-bold mb-2">Pesanan Berhasil!</h3>
<p class="opacity-90">Terima kasih! Pesanan Anda sedang diproses. Kami akan segera menghubungi Anda via WhatsApp.</p>
</div><!-- Error Message -->
<div id="errorMessage" class="hidden mt-6 p-6 rounded-xl text-center">
<div class="text-5xl mb-3">
❌
</div>
<h3 class="text-2xl font-bold mb-2">Terjadi Kesalahan</h3>
<p id="errorText" class="opacity-90">Maaf, terjadi kesalahan. Silakan coba lagi atau hubungi kami via WhatsApp.</p>
</div>
</div>
</div>
</section><!-- Footer -->
<footer class="py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid md:grid-cols-3 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-4">
<div class="text-3xl">
🍳
</div><span class="text-xl font-bold">Dapur Berkah</span>
</div>
<p class="opacity-80">Masakan rumahan penuh cinta untuk keluarga Indonesia</p>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Menu</h3>
<ul class="space-y-2 opacity-80">
<li><a href="#home" class="hover:opacity-60 transition-opacity">Beranda</a></li>
<li><a href="#about" class="hover:opacity-60 transition-opacity">Tentang Kami</a></li>
<li><a href="#menu" class="hover:opacity-60 transition-opacity">Menu</a></li>
<li><a href="#order" class="hover:opacity-60 transition-opacity">Pesan</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-bold mb-4">Kontak</h3>
<ul class="space-y-2 opacity-80">
<li>📍 Jakarta, Indonesia</li>
<li>📞 <span id="footer-phone">0812-3456-7890</span></li>
<li>📧 info@dapurberkah.com</li>
<li>⏰ Setiap hari: 08.00 - 20.00</li>
</ul>
</div>
</div>
<div class="border-t pt-8 text-center opacity-70">
<p>© 2024 Dapur Berkah. Semua hak dilindungi.</p>
</div>
</div>
</footer>
</div>
<script>
// ====================================
// KONFIGURASI - Ganti dengan URL Apps Script Anda
// ====================================
const APPS_SCRIPT_URL = 'https://script.google.com/macros/s/YOUR_SCRIPT_ID/exec';
// ====================================
// DEFAULT CONFIG
// ====================================
const defaultConfig = {
business_name: 'Dapur Berkah',
tagline: 'Masakan Rumahan Penuh Cinta',
hero_description: 'Nikmati kelezatan masakan rumahan yang dibuat dengan bahan pilihan dan penuh kehangatan',
about_title: 'Tentang Dapur Berkah',
about_description: 'Kami adalah UMKM kuliner yang berkomitmen menyajikan masakan rumahan berkualitas dengan cita rasa yang autentik. Setiap hidangan dibuat dengan penuh perhatian dan menggunakan bahan-bahan segar pilihan.',
order_button_text: 'Pesan Sekarang 🛒',
whatsapp_number: '628123456789',
background_color: '#FEF3E2',
surface_color: '#FFFFFF',
text_color: '#2C3E50',
primary_action_color: '#FF6B35',
secondary_action_color: '#4ECDC4',
navbar_background: '#FFFFFF',
navbar_text: '#2C3E50',
font_family: 'Inter',
font_size: 16
};
// ====================================
// ELEMENT SDK INITIALIZATION
// ====================================
if (window.elementSdk) {
window.elementSdk.init({
defaultConfig: defaultConfig,
onConfigChange: async (config) => {
const customFont = config.font_family || defaultConfig.font_family;
const baseFontStack = 'system-ui, -apple-system, sans-serif';
const baseSize = config.font_size || defaultConfig.font_size;
// Apply colors
document.getElementById('app-wrapper').style.backgroundColor = config.background_color || defaultConfig.background_color;
document.getElementById('app-wrapper').style.color = config.text_color || defaultConfig.text_color;
// Apply navbar colors
const navbar = document.getElementById('navbar');
navbar.style.backgroundColor = config.navbar_background || defaultConfig.navbar_background;
navbar.style.color = config.navbar_text || defaultConfig.navbar_text;
// Apply surface color to cards and sections
document.querySelectorAll('.menu-card, footer, #orderForm').forEach(el => {
el.style.backgroundColor = config.surface_color || defaultConfig.surface_color;
});
// Apply primary action color
const primaryBtns = document.querySelectorAll('#hero-cta-btn, #submitBtn');
primaryBtns.forEach(btn => {
btn.style.backgroundColor = config.primary_action_color || defaultConfig.primary_action_color;
btn.style.color = config.surface_color || defaultConfig.surface_color;
});
// Apply secondary action color to secondary elements
document.querySelectorAll('.rounded-2xl, .rounded-3xl').forEach(el => {
if (!el.classList.contains('menu-card')) {
el.style.backgroundColor = config.secondary_action_color || defaultConfig.secondary_action_color;
el.style.color = config.surface_color || defaultConfig.surface_color;
}
});
// Apply fonts
document.getElementById('app-wrapper').style.fontFamily = `${customFont}, ${baseFontStack}`;
// Apply font sizes
document.querySelectorAll('h1').forEach(el => el.style.fontSize = `${baseSize * 3}px`);
document.querySelectorAll('h2').forEach(el => el.style.fontSize = `${baseSize * 2}px`);
document.querySelectorAll('h3').forEach(el => el.style.fontSize = `${baseSize * 1.5}px`);
document.querySelectorAll('p, a, button, input, select, textarea').forEach(el => {
if (!el.classList.contains('text-2xl') && !el.classList.contains('text-xl')) {
el.style.fontSize = `${baseSize}px`;
}
});
// Update text content
document.getElementById('nav-brand').textContent = config.business_name || defaultConfig.business_name;
document.getElementById('hero-title').textContent = config.business_name || defaultConfig.business_name;
document.getElementById('hero-tagline').textContent = config.tagline || defaultConfig.tagline;
document.getElementById('hero-description').textContent = config.hero_description || defaultConfig.hero_description;
document.getElementById('about-title').textContent = config.about_title || defaultConfig.about_title;
document.getElementById('about-description').textContent = config.about_description || defaultConfig.about_description;
document.getElementById('hero-cta-btn').textContent = config.order_button_text || defaultConfig.order_button_text;
document.getElementById('footer-phone').textContent = `0${config.whatsapp_number.substring(2)}` || '0812-3456-7890';
},
mapToCapabilities: (config) => ({
recolorables: [
{
get: () => config.background_color || defaultConfig.background_color,
set: (value) => {
window.elementSdk.config.background_color = value;
window.elementSdk.setConfig({ background_color: value });
}
},
{
get: () => config.surface_color || defaultConfig.surface_color,
set: (value) => {
window.elementSdk.config.surface_color = value;
window.elementSdk.setConfig({ surface_color: value });
}
},
{
get: () => config.text_color || defaultConfig.text_color,
set: (value) => {
window.elementSdk.config.text_color = value;
window.elementSdk.setConfig({ text_color: value });
}
},
{
get: () => config.primary_action_color || defaultConfig.primary_action_color,
set: (value) => {
window.elementSdk.config.primary_action_color = value;
window.elementSdk.setConfig({ primary_action_color: value });
}
},
{
get: () => config.secondary_action_color || defaultConfig.secondary_action_color,
set: (value) => {
window.elementSdk.config.secondary_action_color = value;
window.elementSdk.setConfig({ secondary_action_color: value });
}
}
],
borderables: [],
fontEditable: {
get: () => config.font_family || defaultConfig.font_family,
set: (value) => {
window.elementSdk.config.font_family = value;
window.elementSdk.setConfig({ font_family: value });
}
},
fontSizeable: {
get: () => config.font_size || defaultConfig.font_size,
set: (value) => {
window.elementSdk.config.font_size = value;
window.elementSdk.setConfig({ font_size: value });
}
}
}),
mapToEditPanelValues: (config) => new Map([
['business_name', config.business_name || defaultConfig.business_name],
['tagline', config.tagline || defaultConfig.tagline],
['hero_description', config.hero_description || defaultConfig.hero_description],
['about_title', config.about_title || defaultConfig.about_title],
['about_description', config.about_description || defaultConfig.about_description],
['order_button_text', config.order_button_text || defaultConfig.order_button_text],
['whatsapp_number', config.whatsapp_number || defaultConfig.whatsapp_number]
])
});
}
// ====================================
// MOBILE MENU TOGGLE
// ====================================
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
mobileMenuBtn.addEventListener('click', () => {
mobileMenu.classList.toggle('hidden');
});
// Close mobile menu when clicking a link
document.querySelectorAll('#mobile-menu a').forEach(link => {
link.addEventListener('click', () => {
mobileMenu.classList.add('hidden');
});
});
// ====================================
// NAVBAR SCROLL EFFECT
// ====================================
let lastScroll = 0;
const navbar = document.getElementById('navbar');
window.addEventListener('scroll', () => {
const currentScroll = window.pageYOffset;
if (currentScroll > 100) {
navbar.style.backgroundColor = window.elementSdk?.config?.navbar_background || defaultConfig.navbar_background;
navbar.style.boxShadow = '0 4px 20px rgba(0,0,0,0.1)';
} else {
navbar.style.backgroundColor = 'transparent';
navbar.style.boxShadow = 'none';
}
lastScroll = currentScroll;
});
// ====================================
// FORM SUBMISSION HANDLER
// ====================================
const orderForm = document.getElementById('orderForm');
const submitBtn = document.getElementById('submitBtn');
const submitBtnText = document.getElementById('submitBtnText');
const successMessage = document.getElementById('successMessage');
const errorMessage = document.getElementById('errorMessage');
const errorText = document.getElementById('errorText');
orderForm.addEventListener('submit', async (e) => {
e.preventDefault();
// Show loading state
submitBtn.disabled = true;
submitBtnText.innerHTML = '<div class="loading-spinner mx-auto"></div>';
successMessage.classList.add('hidden');
errorMessage.classList.add('hidden');
// Get form data
const formData = {
timestamp: new Date().toISOString(),
customerName: document.getElementById('customerName').value,
customerPhone: document.getElementById('customerPhone').value,
customerAddress: document.getElementById('customerAddress').value,
menuItem: document.getElementById('menuItem').value,
quantity: document.getElementById('quantity').value,
notes: document.getElementById('notes').value || '-'
};
try {
// Send to Google Apps Script
const response = await fetch(APPS_SCRIPT_URL, {
method: 'POST',
mode: 'no-cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData)
});
// Show success message
successMessage.classList.remove('hidden');
successMessage.style.backgroundColor = window.elementSdk?.config?.secondary_action_color || defaultConfig.secondary_action_color;
successMessage.style.color = window.elementSdk?.config?.surface_color || defaultConfig.surface_color;
orderForm.reset();
// Optional: Send to WhatsApp
const waNumber = window.elementSdk?.config?.whatsapp_number || defaultConfig.whatsapp_number;
const waMessage = `Halo Dapur Berkah! Saya ingin memesan:\n\nNama: ${formData.customerName}\nMenu: ${formData.menuItem}\nJumlah: ${formData.quantity} porsi\nAlamat: ${formData.customerAddress}\nCatatan: ${formData.notes}`;
const waUrl = `https://wa.me/${waNumber}?text=${encodeURIComponent(waMessage)}`;
setTimeout(() => {
window.open(waUrl, '_blank', 'noopener,noreferrer');
}, 2000);
} catch (error) {
// Show error message
errorMessage.classList.remove('hidden');
errorMessage.style.backgroundColor = '#FF6B6B';
errorMessage.style.color = '#FFFFFF';
errorText.textContent = 'Terjadi kesalahan saat mengirim pesanan. Silakan coba lagi atau hubungi kami via WhatsApp.';
console.error('Error:', error);
} finally {
// Reset button state
submitBtn.disabled = false;
submitBtnText.textContent = 'Kirim Pesanan 🚀';
}
});
// ====================================
// FADE IN ANIMATION ON SCROLL
// ====================================
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('fade-in');
}
});
}, observerOptions);
document.querySelectorAll('.menu-card').forEach(card => {
observer.observe(card);
});
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'9be48a5f64757da9',t:'MTc2ODQ3MTM3OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
Tidak ada komentar:
Posting Komentar