<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dinsum — Restoran & Dim Sum</title>
<meta name="description" content="Dinsum — Restoran modern spesialis dim sum, teh, dan hidangan Asia ringan. Pesan meja, lihat menu, atau hubungi kami.">
<meta name="theme-color" content="#fdf6ec">
<link rel="icon" href="data:," />
<style>
:root{--accent:#D35400;--muted:#6b7280;--bg:#fffaf6;--card:#ffffff;--glass:rgba(255,255,255,0.65)}
*{box-sizing:border-box}
body{margin:0;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;line-height:1.45;background:linear-gradient(180deg,#fffaf6 0%,#fff 100%);color:#1f2937}
header{backdrop-filter: blur(6px);position:sticky;top:0;z-index:40;border-bottom:1px solid rgba(31,41,55,0.05);background:rgba(255,255,255,0.6)}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;gap:.75rem;align-items:center}
.logo{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#f39c12);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.05rem}
nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
nav a{color:inherit;text-decoration:none;padding:.45rem .6rem;border-radius:8px;font-weight:600}
nav a:hover{background:rgba(0,0,0,0.04)}
.hero{display:grid;grid-template-columns:1fr 420px;gap:2rem;align-items:center;padding:3rem 0}
.hero h1{font-size:2.2rem;margin:0 0 .5rem}
.lead{color:var(--muted);margin-bottom:1.25rem}
.cta{display:flex;gap:.6rem}
.btn{background:var(--accent);color:#fff;padding:.6rem 1rem;border-radius:10px;border:0;cursor:pointer;font-weight:700}
.btn.ghost{background:transparent;color:var(--accent);border:2px solid rgba(211,84,0,0.12)}
.card{background:var(--card);border-radius:14px;padding:1rem;box-shadow:0 6px 22px rgba(16,24,40,0.06)}
.menu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.menu-item{display:flex;gap:.8rem;align-items:flex-start}
.menu-item img{width:84px;height:64px;object-fit:cover;border-radius:8px}
.price{margin-left:auto;font-weight:700;color:var(--accent)}
section{padding:2rem 0}
.section-title{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gallery img{width:100%;height:120px;object-fit:cover;border-radius:8px}
form{display:grid;gap:.6rem}
input,textarea,select{padding:.7rem;border-radius:8px;border:1px solid rgba(31,41,55,0.08)}
textarea{min-height:110px}
footer{padding:2rem 0;border-top:1px solid rgba(31,41,55,0.04);color:var(--muted)}
.flex{display:flex;gap:1rem;align-items:center}
@media (max-width:900px){
.hero{grid-template-columns:1fr;}
.menu-grid{grid-template-columns:1fr}
.gallery{grid-template-columns:repeat(2,1fr)}
header .container{padding:.6rem}
}
</style>
</head>
<body>
<header>
<div class="container nav">
<div class="brand">
<div class="logo" aria-hidden>DS</div>
<div>
<div style="font-weight:800">Dinsum</div>
<div style="font-size:.82rem;color:var(--muted)">Restoran • Dim Sum & Teh</div>
</div>
</div>
<nav aria-label="Main navigation">
<ul>
<li><a href="#menu">Menu</a></li>
<li><a href="#reservasi">Reservasi</a></li>
<li><a href="#galeri">Galeri</a></li>
<li><a href="#kontak">Kontak</a></li>
</ul>
</nav>
</div>
</header>
<main class="container">
<section class="hero">
<div>
<h1>Selamat datang di <span style="color:var(--accent)">Dinsum</span></h1>
<p class="lead">Spesialis dim sum segar, teh berkualitas, dan hidangan Asia ringan — dibuat untuk dinikmati bersama. Suasana hangat, layanan cepat.</p>
<div class="cta">
<button class="btn" onclick="document.getElementById('reservasi').scrollIntoView({behavior:'smooth'})">Pesan Meja</button>
<a class="btn ghost" href="#menu">Lihat Menu</a>
</div>
<div style="margin-top:1.25rem;display:flex;gap:1rem;color:var(--muted)">
<div class="card" style="display:flex;gap:.6rem;align-items:center">
<div style="font-weight:800">30+</div>
<div style="font-size:.9rem">Varian Dim Sum</div>
</div>
<div class="card" style="display:flex;gap:.6rem;align-items:center">
<div style="font-weight:800">4.8★</div>
<div style="font-size:.9rem">Rating pelanggan</div>
</div>
</div>
</div>
<aside class="card">
<h3 style="margin-top:0">Menu Favorit</h3>
<div class="menu-grid" id="menu">
<article class="menu-item">
<img src="https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder" alt="Shrimp dumpling">
<div>
<div style="font-weight:700">Har Gao (Shrimp Dumpling)</div>
<div style="color:var(--muted);font-size:.9rem">Udang segar, kulit tipis</div>
</div>
<div class="price">IDR 45k</div>
</article>
<article class="menu-item">
<img src="https://images.unsplash.com/photo-1551782450-a2132b4ba21d?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder" alt="Pork siu mai">
<div>
<div style="font-weight:700">Siu Mai</div>
<div style="color:var(--muted);font-size:.9rem">Daging babi pilihan, aroma minyak wijen</div>
</div>
<div class="price">IDR 39k</div>
</article>
<article class="menu-item">
<img src="https://images.unsplash.com/photo-1604909053196-6c9b9f6b4f5b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder" alt="Veg dumpling">
<div>
<div style="font-weight:700">Vegetarian Basket</div>
<div style="color:var(--muted);font-size:.9rem">Jamur, kubis, tofu</div>
</div>
<div class="price">IDR 35k</div>
</article>
<article class="menu-item">
<img src="https://images.unsplash.com/photo-1542443630-5e1d9b9f7fbb?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder" alt="Tea set">
<div>
<div style="font-weight:700">Teh Jasmine / Oolong</div>
<div style="color:var(--muted);font-size:.9rem">Teh pilihan, aroma halus</div>
</div>
<div class="price">IDR 25k</div>
</article>
</div>
</aside>
</section>
<section aria-labelledby="about">
<div class="section-title">
<h2 id="about" style="margin:0">Tentang Dinsum</h2>
</div>
<p style="color:var(--muted)">Dinsum berdiri dengan misi menghadirkan dim sum berkualitas dalam suasana modern dan nyaman. Kami mengutamakan bahan segar, resep otentik, dan pelayanan cepat. Cocok untuk makan siang, hangout sore, atau keluarga.</p>
</section>
<section aria-labelledby="full-menu">
<div class="section-title">
<h2 id="full-menu" style="margin:0">Menu Lengkap</h2>
<div style="color:var(--muted);font-size:.95rem">Pilihan dim sum, hidangan panggang, lauk, dan set teh.</div>
</div>
<div class="card">
<div style="display:flex;gap:1rem;flex-wrap:wrap">
<div style="flex:1;min-width:220px">
<h3 style="margin-top:0">Dim Sum</h3>
<ul style="margin:0;padding-left:1.1rem;color:var(--muted)">
<li>Har Gao — Udang</li>
<li>Siu Mai — Daging</li>
<li>Char Siu Bao — Bap isi daging panggang</li>
<li>Vegetarian Basket — Sayur dan jamur</li>
</ul>
</div>
<div style="flex:1;min-width:220px">
<h3 style="margin-top:0">Hidangan & Set</h3>
<ul style="margin:0;padding-left:1.1rem;color:var(--muted)">
<li>Ayam Goreng Madu</li>
<li>Bakmi Goreng ala Dinsum</li>
<li>Set Teh untuk 2 orang</li>
</ul>
</div>
</div>
</div>
</section>
<section id="reservasi" aria-labelledby="reservasi-title">
<div class="section-title">
<h2 id="reservasi-title" style="margin:0">Reservasi & Pesan</h2>
</div>
<div class="card" style="display:grid;grid-template-columns:1fr 320px;gap:1rem">
<form id="reservationForm" onsubmit="return handleReservation(event)">
<label>
Nama
<input type="text" name="nama" required placeholder="Nama Anda">
</label>
<label>
Nomor Telepon
<input type="tel" name="tel" required placeholder="0812xxxx">
</label>
<label style="display:flex;gap:.6rem">
<div style="flex:1">
Tanggal
<input type="date" name="tanggal" required>
</div>
<div style="width:120px">
Waktu
<input type="time" name="waktu" required>
</div>
</label>
<label>
Jumlah Tamu
<select name="tamu">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5+</option>
</select>
</label>
<label>
Catatan (opsional)
<textarea name="catatan" placeholder="Diet, kursi bayi, permintaan khusus..."></textarea>
</label>
<div style="display:flex;gap:.6rem;align-items:center">
<button class="btn" type="submit">Kirim Reservasi</button>
<div id="resMessage" style="color:var(--muted);font-size:.95rem"></div>
</div>
</form>
<div>
<h4 style="margin-top:0">Info Singkat</h4>
<p style="color:var(--muted);margin-top:0">Kami menerima reservasi online dan walk-in. Untuk grup besar silakan hubungi kami langsung via telepon atau email.</p>
<ul style="color:var(--muted);padding-left:1.1rem">
<li>Jam buka: 10:00 — 22:00 (Setiap hari)</li>
<li>Alamat: Jl. Contoh No. 12, Kota</li>
<li>Tel: 0812-3456-7890</li>
</ul>
</div>
</div>
</section>
<section id="galeri">
<div class="section-title">
<h2 style="margin:0">Galeri</h2>
</div>
<div class="gallery">
<img alt="Dim sum close-up" src="https://images.unsplash.com/photo-1544025162-d76694265947?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder">
<img alt="Interior resto" src="https://images.unsplash.com/photo-1541542684-3f4c3e3f0a6f?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder">
<img alt="Set teh" src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder">
<img alt="Koki" src="https://images.unsplash.com/photo-1529042410759-befb1204b468?q=80&w=800&auto=format&fit=crop&ixlib=rb-4.0.3&s=placeholder">
</div>
</section>
<section id="kontak" aria-labelledby="kontak-title">
<div class="section-title">
<h2 id="kontak-title" style="margin:0">Kontak & Lokasi</h2>
</div>
<div class="card" style="display:grid;grid-template-columns:1fr 320px;gap:1rem">
<div>
<h4 style="margin-top:0">Temui kami</h4>
<p style="color:var(--muted);margin-top:0">Jl. Contoh No. 12, Kawasan Kuliner, Kota — buka tiap hari 10:00–22:00.</p>
<p style="margin:0"><strong>Tel:</strong> 0812-3456-7890</p>
<p style="margin:0"><strong>Email:</strong> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="89e1ece5e5e6c9ede0e7fafce4a7ecf1e8e4f9e5ec">[email protected]</a></p>
<div style="margin-top:0.8rem;color:var(--muted)">Peta (iframe):</div>
<!-- Ganti src iframe dengan URL peta Google Maps lokasi Anda -->
<div style="margin-top:0.6rem">
<iframe title="Map Dinsum" src="https://www.google.com/maps/embed?pb=!1m18..." width="100%" height="200" style="border:0;border-radius:8px" loading="lazy"></iframe>
</div>
</div>
<aside>
<h4 style="margin-top:0">Hubungi kami</h4>
<form onsubmit="event.preventDefault();alert('Pesan terkirim — contoh frontend saja. Gunakan backend untuk benar-benar menerima pesan.');">
<label>
Nama
<input required placeholder="Nama Anda">
</label>
<label>
Email
<input type="email" required placeholder="email@contoh.com">
</label>
<label>
Pesan
<textarea required placeholder="Tanya tentang katering, acara, dll"></textarea>
</label>
<div style="display:flex;gap:.6rem;align-items:center">
<button class="btn" type="submit">Kirim</button>
</div>
</form>
</aside>
</div>
</section>
</main>
<footer>
<div class="container" style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap">
<div style="font-weight:800">Dinsum</div>
<div style="color:var(--muted)">© " + new Date().getFullYear() + " Dinsum — Semua hak dilindungi</div>
<div style="color:var(--muted)">Design • Simple UI</div>
</div>
</footer>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
// Small utilities
function handleReservation(e){
e.preventDefault();
const f = e.target;
const data = new FormData(f);
const payload = {};
for(const [k,v] of data.entries()) payload[k]=v;
// This demo doesn't send to a server. Show a friendly confirmation.
document.getElementById('resMessage').textContent = 'Terima kasih, reservasi Anda telah dicatat (demo).';
f.reset();
return false;
}
// Replace year placeholder (since we used JS in a template-like way above)
(function(){
try{
const footer = document.querySelector('footer .container div:nth-child(2)');
if(footer) footer.textContent = '© ' + new Date().getFullYear() + ' Dinsum — Semua hak dilindungi';
}catch(e){/* ignore */}
})();
</script>
</body>
</html>