https://gemini.google.com/share/33d08811451f
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suryo Garage Bot - Pelatihan Robotika & Inovasi Arduino</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/dist/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
scroll-behavior: smooth;
}
.hero-gradient {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}
.logo-text {
background: linear-gradient(to right, #fb923c, #f97316);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.image-glow {
filter: drop-shadow(0 0 25px rgba(251, 146, 60, 0.4));
}
.floating {
animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
100% { transform: translateY(0px); }
}
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 3px solid #fff;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
display: inline-block;
margin-right: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-slate-50 text-slate-900">
<!-- Konten Utama (Landing Page) -->
<div id="main-content">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md border-b border-slate-200">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center gap-3">
<div class="bg-slate-900 p-2 rounded-xl shadow-lg shadow-orange-500/20">
<i class="fas fa-robot text-orange-500 text-xl"></i>
</div>
<div class="flex flex-col leading-tight">
<span class="text-xl font-black tracking-tighter text-slate-900 uppercase">Suryo Garage</span>
<span class="text-sm font-bold text-orange-500 tracking-[0.2em] uppercase">Bot Academy</span>
</div>
</div>
<div class="hidden md:flex space-x-8 font-semibold items-center text-sm">
<a href="#home" class="text-slate-600 hover:text-orange-500 transition">Beranda</a>
<a href="#pendaftaran" class="bg-slate-900 text-white px-6 py-2.5 rounded-xl hover:bg-orange-600 transition shadow-md">Daftar Sekarang</a>
<a href="#admin" onclick="window.location.hash='admin'; return false;" class="text-slate-400 hover:text-slate-900 transition">Admin</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="pt-40 pb-24 hero-gradient text-white overflow-hidden relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center relative z-10">
<div class="md:w-1/2 space-y-8">
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-orange-500/10 border border-orange-500/20 text-orange-400 text-xs font-bold uppercase tracking-widest">
Future Tech Academy
</div>
<h1 class="text-5xl md:text-7xl font-extrabold leading-tight">Inovasi Robotik <br><span class="logo-text">Suryo Garage</span></h1>
<p class="text-xl text-slate-400 max-w-lg leading-relaxed">Wujudkan imajinasimu menjadi robot nyata dengan teknologi Arduino Uno V3.</p>
<div class="flex gap-4">
<a href="#pendaftaran" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-10 rounded-2xl transition shadow-xl shadow-orange-500/20">Mulai Belajar</a>
</div>
</div>
<div class="md:w-1/2 mt-16 md:mt-0 flex justify-center">
<div class="relative floating">
<div class="absolute -inset-10 bg-orange-500/20 blur-3xl rounded-full"></div>
<!-- Foto Utama Teknologi Robotik -->
<img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80&w=800" alt="Desain Teknologi Robotik" class="relative rounded-[3rem] shadow-2xl w-full max-w-lg object-cover border-4 border-white/10 image-glow">
</div>
</div>
</div>
</section>
<!-- Formulir Pendaftaran -->
<section id="pendaftaran" class="py-24 bg-white">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 class="text-4xl font-black text-slate-900 uppercase mb-4">Pendaftaran Workshop</h2>
<p class="text-slate-500 mb-12">Isi data Anda dan amankan slot pelatihan robotika hari ini.</p>
<div class="bg-slate-50 border border-slate-200 rounded-[3rem] p-10 md:p-16 shadow-inner text-left">
<form id="regForm" class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-400">Nama Lengkap</label>
<input type="text" id="userName" required class="w-full px-6 py-4 rounded-2xl bg-white border border-slate-200 focus:border-orange-500 outline-none transition font-semibold" placeholder="Nama Anda">
</div>
<div class="space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-400">No WhatsApp</label>
<input type="tel" id="userPhone" required class="w-full px-6 py-4 rounded-2xl bg-white border border-slate-200 focus:border-orange-500 outline-none transition font-semibold" placeholder="08xxxxxxxx">
</div>
<div class="md:col-span-2 space-y-2">
<label class="text-xs font-black uppercase tracking-widest text-slate-400">Pilih Level</label>
<select id="userLevel" class="w-full px-6 py-4 rounded-2xl bg-white border border-slate-200 focus:border-orange-500 outline-none transition font-semibold">
<option>Garage Starter (Level 1)</option>
<option>Code Master (Level 2)</option>
<option>Inovator Garage (Level 3)</option>
</select>
</div>
<button type="submit" id="submitBtn" class="md:col-span-2 bg-slate-900 text-white font-black py-5 rounded-2xl hover:bg-orange-500 transition-all shadow-xl shadow-slate-300 uppercase tracking-widest flex items-center justify-center">
<span id="btnText">Konfirmasi Pendaftaran</span>
</button>
</form>
<div id="successMsg" class="hidden text-center p-8 bg-green-50 rounded-3xl border border-green-100">
<div class="w-16 h-16 bg-green-500 text-white rounded-full flex items-center justify-center mx-auto mb-4">
<i class="fas fa-check text-2xl"></i>
</div>
<h4 class="text-xl font-bold text-green-800">Pendaftaran Berhasil!</h4>
<p class="text-green-600 mt-2">Data Anda telah tersimpan. Kami akan menghubungi Anda segera.</p>
<button onclick="location.reload()" class="mt-6 text-sm font-bold text-green-800 underline">Kirim data baru</button>
</div>
</div>
</div>
</section>
</div>
<!-- Admin Panel (Daftar Hasil Pengisian) -->
<div id="admin-panel" class="hidden min-h-screen bg-slate-900 text-white p-8">
<div class="max-w-6xl mx-auto">
<div class="flex justify-between items-center mb-10">
<div>
<h2 class="text-3xl font-black uppercase tracking-tight">Data <span class="text-orange-500">Pendaftar</span></h2>
<p class="text-slate-400 text-sm mt-1">Daftar otomatis dari database cloud real-time.</p>
</div>
<button onclick="window.location.hash=''; window.location.reload();" class="bg-white/10 hover:bg-white/20 text-white px-6 py-3 rounded-2xl font-bold transition">
<i class="fas fa-arrow-left mr-2"></i> Kembali ke Web
</button>
</div>
<div class="bg-slate-800 rounded-[2.5rem] overflow-hidden shadow-2xl border border-slate-700">
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead class="bg-slate-700/50 text-slate-400 text-[10px] uppercase font-black tracking-[0.2em]">
<tr>
<th class="px-8 py-5">Waktu Masuk</th>
<th class="px-8 py-5">Nama Lengkap</th>
<th class="px-8 py-5">WhatsApp</th>
<th class="px-8 py-5">Level Workshop</th>
</tr>
</thead>
<tbody id="admin-table-body" class="divide-y divide-slate-700/50">
<tr>
<td colspan="4" class="px-8 py-20 text-center text-slate-500">
<span class="loading-spinner"></span> Memuat data dari database...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Firebase SDK -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
import { getFirestore, collection, addDoc, onSnapshot, serverTimestamp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
import { getAuth, signInAnonymously, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
// Inisialisasi Firebase
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'suryo-garage-bot';
// Autentikasi Anonim
signInAnonymously(auth).catch(err => console.error("Login Error:", err));
// Router Sederhana untuk Admin
function handleRouting() {
const is_admin = window.location.hash === '#admin';
if (is_admin) {
document.getElementById('main-content').classList.add('hidden');
document.getElementById('admin-panel').classList.remove('hidden');
loadAdminData();
} else {
document.getElementById('main-content').classList.remove('hidden');
document.getElementById('admin-panel').classList.add('hidden');
}
}
window.addEventListener('hashchange', handleRouting);
window.addEventListener('load', handleRouting);
// Fungsi Simpan Data (Pendaftaran)
const form = document.getElementById('regForm');
form.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = document.getElementById('submitBtn');
const txt = document.getElementById('btnText');
btn.disabled = true;
txt.innerHTML = '<span class="loading-spinner"></span> Menyimpan...';
try {
const colRef = collection(db, 'artifacts', appId, 'public', 'data', 'registrasi_robotika');
await addDoc(colRef, {
nama: document.getElementById('userName').value,
wa: document.getElementById('userPhone').value,
level: document.getElementById('userLevel').value,
timestamp: serverTimestamp()
});
form.classList.add('hidden');
document.getElementById('successMsg').classList.remove('hidden');
} catch (err) {
console.error(err);
alert("Koneksi gagal. Silakan coba lagi.");
btn.disabled = false;
txt.innerText = "Konfirmasi Pendaftaran";
}
});
// Fungsi Baca Data (Admin Panel)
let dataUnsubscribe = null;
function loadAdminData() {
onAuthStateChanged(auth, (user) => {
if (!user) return;
const tableBody = document.getElementById('admin-table-body');
const colRef = collection(db, 'artifacts', appId, 'public', 'data', 'registrasi_robotika');
if (dataUnsubscribe) dataUnsubscribe();
dataUnsubscribe = onSnapshot(colRef, (snapshot) => {
const dataItems = snapshot.docs.map(doc => doc.data());
// Sortir manual (terbaru di atas)
dataItems.sort((a, b) => {
const timeA = a.timestamp?.seconds || 0;
const timeB = b.timestamp?.seconds || 0;
return timeB - timeA;
});
if (dataItems.length === 0) {
tableBody.innerHTML = '<tr><td colspan="4" class="px-8 py-20 text-center text-slate-500 italic font-medium">Belum ada data pendaftar yang masuk.</td></tr>';
return;
}
tableBody.innerHTML = dataItems.map(item => {
const tgl = item.timestamp ? new Date(item.timestamp.seconds * 1000).toLocaleString('id-ID') : 'Memproses...';
return `
<tr class="hover:bg-slate-700/30 transition border-slate-700/50">
<td class="px-8 py-6 text-slate-400 text-xs font-mono">${tgl}</td>
<td class="px-8 py-6 font-bold text-white">${item.nama}</td>
<td class="px-8 py-6">
<a href="https://wa.me/${item.wa.replace(/\D/g,'')}" target="_blank" class="bg-green-500/10 text-green-500 px-4 py-2 rounded-xl text-xs font-bold hover:bg-green-500 hover:text-white transition">
<i class="fab fa-whatsapp mr-1"></i> ${item.wa}
</a>
</td>
<td class="px-8 py-6">
<span class="text-orange-400 font-black text-[10px] uppercase tracking-widest border border-orange-400/30 px-3 py-1 rounded-lg">
${item.level}
</span>
</td>
</tr>
`;
}).join('');
}, (err) => {
tableBody.innerHTML = `<tr><td colspan="4" class="px-8 py-20 text-center text-red-400 font-bold">Akses Gagal: ${err.message}</td></tr>`;
});
});
}
</script>
</body>
</html>
==================================================================================
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suryo Garage Bot - Spesial Ramadan Les Robotik</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/dist/css/all.min.css">
<style>
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Philosopher:wght@400;700&display=swap');
body {
font-family: 'Plus Jakarta Sans', sans-serif;
scroll-behavior: smooth;
}
/* Latar belakang Hitam Gradasi Biru */
.tech-dark-bg {
background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #1e1b4b 100%);
}
.blue-glow {
box-shadow: 0 0 30px rgba(59, 130, 246, 0.4);
}
.text-cyan {
color: #22d3ee;
}
.border-cyan {
border-color: #22d3ee;
}
.card-dark {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(59, 130, 246, 0.2);
color: white;
}
.header-font {
font-family: 'Philosopher', sans-serif;
}
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top: 3px solid #3b82f6;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
display: inline-block;
margin-right: 10px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.pattern-overlay {
background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
opacity: 0.1;
}
.floating {
animation: floating 4s ease-in-out infinite;
}
@keyframes floating {
0% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0px); }
}
/* Efek Neon Ring di sekitar gambar */
.neon-ring {
position: relative;
}
.neon-ring::before {
content: '';
position: absolute;
inset: -10px;
border: 2px solid #3b82f6;
border-radius: 3.5rem;
opacity: 0.5;
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.05); opacity: 0.2; }
100% { transform: scale(1); opacity: 0.5; }
}
</style>
</head>
<body class="tech-dark-bg text-slate-100">
<!-- Konten Utama -->
<div id="main-content">
<!-- Navigation -->
<nav class="fixed w-full z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex items-center gap-3">
<div class="bg-blue-600 p-2 rounded-xl blue-glow">
<i class="fas fa-robot text-white text-xl"></i>
</div>
<div class="flex flex-col leading-tight">
<span class="text-xl font-black tracking-tighter text-white uppercase">Suryo Garage</span>
<span class="text-sm font-bold text-cyan tracking-[0.1em] uppercase">Ramadan Tech</span>
</div>
</div>
<div class="hidden md:flex space-x-6 font-semibold items-center text-sm">
<a href="#home" class="text-slate-300 hover:text-cyan transition">Home</a>
<a href="#paket" class="text-slate-300 hover:text-cyan transition">Paket Les</a>
<a href="#pendaftaran" class="bg-blue-600 text-white px-6 py-2.5 rounded-xl hover:bg-cyan-600 transition shadow-lg blue-glow">Daftar</a>
<a href="#admin" onclick="window.location.hash='admin'; return false;" class="text-slate-500 hover:text-white transition ml-4"><i class="fas fa-user-shield"></i></a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="pt-40 pb-24 relative overflow-hidden">
<div class="absolute inset-0 pattern-overlay"></div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="flex flex-col md:flex-row items-center gap-16">
<div class="md:w-1/2 text-left space-y-6">
<div class="inline-block px-4 py-1 rounded-full bg-blue-500/10 border border-blue-500/30 text-cyan text-xs font-bold uppercase tracking-widest">
🌙 Ramadan Special Workshop 2026
</div>
<h1 class="header-font text-5xl md:text-7xl font-bold leading-tight">
LES <span class="text-white">ROBOTIK</span><br>
<span class="text-blue-500">MASA DEPAN</span>
</h1>
<p class="text-lg text-slate-400 leading-relaxed max-w-lg">
Wujudkan imajinasi menjadi teknologi nyata. Belajar IoT, Mekatronika, dan Coding Robot dalam suasana Ramadan yang inspiratif.
</p>
<div class="flex flex-wrap gap-4 pt-4">
<a href="#pendaftaran" class="bg-blue-600 hover:bg-cyan-600 text-white font-bold py-4 px-10 rounded-2xl transition shadow-xl blue-glow">Daftar Sekarang</a>
<div class="flex items-center gap-2 text-sm text-slate-300">
<i class="fas fa-microchip text-cyan animate-pulse"></i>
<span>Kurikulum Industri 4.0</span>
</div>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<div class="relative floating neon-ring">
<div class="absolute -inset-8 bg-cyan-500/20 blur-[80px] rounded-full"></div>
<!-- Gambar Utama Robot Futuristik Profesional -->
<img src="https://images.unsplash.com/photo-1485827404703-89b55fcc595e?auto=format&fit=crop&q=80&w=800" alt="Robot Humanoid Profesional Canggih" class="relative rounded-[3rem] border-2 border-blue-500/30 shadow-2xl w-full max-w-md aspect-square object-cover blue-glow">
<!-- Floating Badge di Gambar -->
<div class="absolute -bottom-6 -right-6 bg-slate-900 border border-blue-500/50 p-4 rounded-2xl shadow-2xl backdrop-blur-xl">
<div class="flex items-center gap-3">
<div class="w-10 h-10 bg-cyan-500/20 rounded-full flex items-center justify-center text-cyan">
<i class="fas fa-bolt"></i>
</div>
<div>
<p class="text-[10px] uppercase font-bold text-slate-400">Next-Gen</p>
<p class="text-sm font-black text-white">Learning Hub</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Paket Les -->
<section id="paket" class="py-24 relative">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center mb-16">
<h2 class="text-3xl font-black uppercase tracking-tight mb-4">Pilihan <span class="text-blue-500">Program Pelatihan</span></h2>
<div class="h-1 w-20 bg-blue-600 mx-auto rounded-full"></div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- RE BASIC -->
<div class="card-dark rounded-[2.5rem] p-8 text-center hover:border-blue-500 transition-all group">
<div class="bg-slate-800 text-slate-300 w-fit mx-auto px-6 py-1 rounded-full font-black text-[10px] mb-6 uppercase tracking-widest border border-slate-700">Re Basic</div>
<div class="text-4xl font-black text-white mb-2">150K</div>
<p class="text-xs text-slate-500 mb-8 italic">Dasar & Kelistrikan</p>
<ul class="text-sm space-y-4 mb-10 text-slate-300 text-left">
<li class="flex items-center gap-3"><i class="fas fa-microchip text-blue-500"></i> Pengenalan Komponen</li>
<li class="flex items-center gap-3"><i class="fas fa-bolt text-blue-500"></i> Dasar Kelistrikan</li>
<li class="flex items-center gap-3"><i class="fas fa-tools text-blue-500"></i> 2 Project Sederhana</li>
</ul>
<a href="#pendaftaran" class="block w-full bg-slate-800 group-hover:bg-blue-600 text-white py-4 rounded-2xl font-bold transition">Pilih Paket</a>
</div>
<!-- RE FUN -->
<div class="card-dark rounded-[2.5rem] p-8 text-center border-blue-500/50 scale-105 relative overflow-hidden shadow-2xl">
<div class="absolute top-0 right-0 bg-blue-600 text-white px-4 py-1 rounded-bl-2xl text-[10px] font-bold uppercase">Terlaris</div>
<div class="bg-blue-600/20 text-blue-400 w-fit mx-auto px-6 py-1 rounded-full font-black text-[10px] mb-6 uppercase tracking-widest border border-blue-500/30">Re Fun</div>
<div class="text-4xl font-black text-white mb-2">200K</div>
<p class="text-xs text-slate-400 mb-8 italic">Modul & Sensor</p>
<ul class="text-sm space-y-4 mb-10 text-slate-300 text-left">
<li class="flex items-center gap-3"><i class="fas fa-eye text-blue-400"></i> Pembelajaran Sensor</li>
<li class="flex items-center gap-3"><i class="fas fa-project-diagram text-blue-400"></i> 2 Project Fungsional</li>
<li class="flex items-center gap-3"><i class="fas fa-check text-blue-400"></i> Perakitan Lanjutan</li>
</ul>
<a href="#pendaftaran" class="block w-full bg-blue-600 text-white py-4 rounded-2xl font-bold hover:bg-cyan-600 transition blue-glow">Pilih Paket</a>
</div>
<!-- RE NERD -->
<div class="card-dark rounded-[2.5rem] p-8 text-center hover:border-blue-500 transition-all group">
<div class="bg-slate-800 text-slate-300 w-fit mx-auto px-6 py-1 rounded-full font-black text-[10px] mb-6 uppercase tracking-widest border border-slate-700">Re Nerd</div>
<div class="text-4xl font-black text-white mb-2">250K</div>
<p class="text-xs text-slate-500 mb-8 italic">Arduino & Coding</p>
<ul class="text-sm space-y-4 mb-10 text-slate-300 text-left">
<li class="flex items-center gap-3"><i class="fas fa-code text-blue-500"></i> Pemrograman Arduino</li>
<li class="flex items-center gap-3"><i class="fas fa-brain text-blue-500"></i> Robot Multi-Sensor</li>
<li class="flex items-center gap-3"><i class="fas fa-rocket text-blue-500"></i> 2 Project Inovatif</li>
</ul>
<a href="#pendaftaran" class="block w-full bg-slate-800 group-hover:bg-blue-600 text-white py-4 rounded-2xl font-bold transition">Pilih Paket</a>
</div>
</div>
</div>
</section>
<!-- Fasilitas & Info -->
<section class="py-24 bg-slate-950/50 border-y border-slate-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
<div class="space-y-8">
<h3 class="text-3xl font-black uppercase text-white leading-tight">Keunggulan <br><span class="text-blue-500">Suryo Garage Bot</span></h3>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
<div class="flex gap-4 items-start">
<div class="text-cyan text-xl"><i class="fas fa-box-open"></i></div>
<div>
<h4 class="font-bold text-white mb-1">Take Home Project</h4>
<p class="text-xs text-slate-400">Hasil rakitan robot bisa dibawa pulang untuk dipelajari.</p>
</div>
</div>
<div class="flex gap-4 items-start">
<div class="text-cyan text-xl"><i class="fas fa-certificate"></i></div>
<div>
<h4 class="font-bold text-white mb-1">E-Certificate</h4>
<p class="text-xs text-slate-400">Sertifikat resmi tanda kelulusan workshop Ramadan.</p>
</div>
</div>
<div class="flex gap-4 items-start">
<div class="text-cyan text-xl"><i class="fas fa-coffee"></i></div>
<div>
<h4 class="font-bold text-white mb-1">Merchandise</h4>
<p class="text-xs text-slate-400">Kaos eksklusif "Ramadan Tech Expert" untuk setiap peserta.</p>
</div>
</div>
<div class="flex gap-4 items-start">
<div class="text-cyan text-xl"><i class="fas fa-graduation-cap"></i></div>
<div>
<h4 class="font-bold text-white mb-1">Mentor Ahli</h4>
<p class="text-xs text-slate-400">Dibimbing langsung oleh praktisi mekatronika berpengalaman.</p>
</div>
</div>
</div>
</div>
<div class="bg-blue-600/10 border border-blue-500/20 p-10 rounded-[3rem] space-y-6 shadow-2xl">
<h3 class="text-xl font-bold text-cyan uppercase tracking-widest"><i class="fas fa-calendar-check mr-2"></i> Jadwal Workshop</h3>
<div class="space-y-4">
<div class="flex justify-between items-center py-2 border-b border-blue-500/10">
<span class="text-slate-300">Sesi Ngabuburit 1</span>
<span class="font-mono text-white bg-blue-600/30 px-3 py-1 rounded-lg">13.00 - 15.00</span>
</div>
<div class="flex justify-between items-center py-2 border-b border-blue-500/10">
<span class="text-slate-300">Sesi Ngabuburit 2</span>
<span class="font-mono text-white bg-blue-600/30 px-3 py-1 rounded-lg">15.30 - 17.30</span>
</div>
<div class="flex justify-between items-center py-2 border-b border-blue-500/10">
<span class="text-slate-300">Sesi Malam</span>
<span class="font-mono text-white bg-blue-600/30 px-3 py-1 rounded-lg">18.00 - 20.00</span>
</div>
</div>
<p class="text-[10px] text-slate-500 italic mt-4">Pilih sesi yang paling nyaman untuk menemani waktu puasa Anda.</p>
</div>
</div>
</section>
<!-- Form Pendaftaran -->
<section id="pendaftaran" class="py-24 bg-transparent">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="card-dark border-blue-500/30 rounded-[3.5rem] p-10 md:p-16 shadow-2xl relative overflow-hidden">
<div class="text-center mb-12">
<h2 class="text-3xl font-black text-white uppercase tracking-tight">Formulir <span class="text-blue-500">Registrasi</span></h2>
<p class="text-slate-400 mt-3 text-sm">Segera amankan slot Anda, pendaftaran ditutup 27 Februari.</p>
</div>
<form id="regForm" class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="space-y-2">
<label class="text-[10px] font-black uppercase tracking-[0.2em] text-cyan ml-1">Nama Calon Peserta</label>
<input type="text" id="userName" required class="w-full px-6 py-4 rounded-2xl bg-slate-900/50 border border-slate-700 text-white outline-none focus:border-blue-500 transition shadow-inner" placeholder="Contoh: Budi Santoso">
</div>
<div class="space-y-2">
<label class="text-[10px] font-black uppercase tracking-[0.2em] text-cyan ml-1">Nomor WhatsApp</label>
<input type="tel" id="userPhone" required class="w-full px-6 py-4 rounded-2xl bg-slate-900/50 border border-slate-700 text-white outline-none focus:border-blue-500 transition shadow-inner" placeholder="08xxxxxxxxxx">
</div>
<div class="md:col-span-2 space-y-2">
<label class="text-[10px] font-black uppercase tracking-[0.2em] text-cyan ml-1">Pilih Paket Workshop</label>
<select id="userLevel" class="w-full px-6 py-4 rounded-2xl bg-slate-900/50 border border-slate-700 text-white outline-none focus:border-blue-500 transition appearance-none">
<option value="RE BASIC (150K)">RE BASIC (150K)</option>
<option value="RE FUN (200K)">RE FUN (200K)</option>
<option value="RE NERD (250K)">RE NERD (250K)</option>
</select>
</div>
<button type="submit" id="submitBtn" class="md:col-span-2 bg-blue-600 text-white font-black py-5 rounded-2xl hover:bg-cyan-600 transition-all shadow-xl blue-glow uppercase tracking-widest flex items-center justify-center">
<span id="btnText">Kirim Data Pendaftaran</span>
</button>
</form>
<div id="successMsg" class="hidden text-center p-12 bg-blue-500/10 rounded-3xl border border-blue-500/30">
<div class="w-20 h-20 bg-blue-600 text-white rounded-full flex items-center justify-center mx-auto mb-6 shadow-xl blue-glow">
<i class="fas fa-paper-plane text-2xl"></i>
</div>
<h4 class="text-2xl font-bold text-white">Pendaftaran Terkirim!</h4>
<p class="text-slate-400 mt-4 leading-relaxed">Terima kasih telah bergabung. Admin kami akan segera menghubungi nomor WhatsApp Anda untuk detail pembayaran dan lokasi.</p>
<button onclick="location.reload()" class="mt-8 text-sm font-bold text-cyan hover:underline">Daftarkan peserta lain</button>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-slate-800 text-center text-slate-500">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-xs uppercase tracking-widest mb-4">Suryo Garage Bot © 2026</p>
<div class="flex justify-center gap-6 text-xl">
<a href="#" class="hover:text-cyan transition"><i class="fab fa-instagram"></i></a>
<a href="#" class="hover:text-cyan transition"><i class="fab fa-facebook"></i></a>
<a href="#" class="hover:text-cyan transition"><i class="fab fa-youtube"></i></a>
</div>
</div>
</footer>
</div>
<!-- Admin Panel (Daftar Pendaftar) -->
<div id="admin-panel" class="hidden min-h-screen bg-slate-950 p-8">
<div class="max-w-6xl mx-auto">
<div class="flex justify-between items-center mb-10 border-b border-slate-800 pb-8">
<div>
<h2 class="text-3xl font-black text-white uppercase tracking-tight">Data <span class="text-blue-500">Database</span></h2>
<p class="text-slate-500 text-sm mt-1">Real-time pendaftar Workshop Ramadan.</p>
</div>
<button onclick="window.location.hash=''; window.location.reload();" class="bg-slate-800 hover:bg-blue-600 text-white px-6 py-3 rounded-2xl font-bold transition border border-slate-700">
<i class="fas fa-globe mr-2"></i> Ke Halaman Depan
</button>
</div>
<div class="bg-slate-900 rounded-[2.5rem] overflow-hidden shadow-2xl border border-slate-800">
<div class="overflow-x-auto">
<table class="w-full text-left">
<thead class="bg-slate-800 text-slate-400 text-[10px] uppercase font-black tracking-[0.2em]">
<tr>
<th class="px-8 py-5">Timestamp</th>
<th class="px-8 py-5">Nama Peserta</th>
<th class="px-8 py-5">Kontak</th>
<th class="px-8 py-5">Paket</th>
</tr>
</thead>
<tbody id="admin-table-body" class="divide-y divide-slate-800">
<tr>
<td colspan="4" class="px-8 py-20 text-center text-slate-500">
<span class="loading-spinner"></span> Mengakses server database...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- Firebase System -->
<script type="module">
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
import { getFirestore, collection, addDoc, onSnapshot, serverTimestamp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
import { getAuth, signInAnonymously, onAuthStateChanged } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
const firebaseConfig = JSON.parse(__firebase_config);
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth(app);
const appId = typeof __app_id !== 'undefined' ? __app_id : 'robotika-tech-v1';
signInAnonymously(auth).catch(err => console.error("Auth System Error:", err));
// Router
function handleRouting() {
if (window.location.hash === '#admin') {
document.getElementById('main-content').classList.add('hidden');
document.getElementById('admin-panel').classList.remove('hidden');
loadAdminData();
} else {
document.getElementById('main-content').classList.remove('hidden');
document.getElementById('admin-panel').classList.add('hidden');
}
}
window.addEventListener('hashchange', handleRouting);
window.addEventListener('load', handleRouting);
// Submit System
const regForm = document.getElementById('regForm');
regForm.addEventListener('submit', async (e) => {
e.preventDefault();
const btn = document.getElementById('submitBtn');
const txt = document.getElementById('btnText');
btn.disabled = true;
txt.innerHTML = '<span class="loading-spinner"></span> Sinkronisasi...';
try {
const colRef = collection(db, 'artifacts', appId, 'public', 'data', 'registrasi_ramadan_tech');
await addDoc(colRef, {
nama: document.getElementById('userName').value,
wa: document.getElementById('userPhone').value,
level: document.getElementById('userLevel').value,
timestamp: serverTimestamp()
});
regForm.classList.add('hidden');
document.getElementById('successMsg').classList.remove('hidden');
} catch (err) {
console.error(err);
alert("Gagal terhubung ke database cloud.");
btn.disabled = false;
txt.innerText = "Kirim Data Pendaftaran";
}
});
// Database Viewer (Admin)
let adminUnsub = null;
function loadAdminData() {
onAuthStateChanged(auth, (user) => {
if (!user) return;
const tableBody = document.getElementById('admin-table-body');
const colRef = collection(db, 'artifacts', appId, 'public', 'data', 'registrasi_ramadan_tech');
if (adminUnsub) adminUnsub();
adminUnsub = onSnapshot(colRef, (snapshot) => {
const records = snapshot.docs.map(doc => doc.data());
records.sort((a, b) => (b.timestamp?.seconds || 0) - (a.timestamp?.seconds || 0));
if (records.length === 0) {
tableBody.innerHTML = '<tr><td colspan="4" class="px-8 py-20 text-center text-slate-600 italic">Basis data masih kosong.</td></tr>';
return;
}
tableBody.innerHTML = records.map(item => {
const date = item.timestamp ? new Date(item.timestamp.seconds * 1000).toLocaleString('id-ID') : 'Sinkronisasi...';
return `
<tr class="hover:bg-slate-800/50 transition">
<td class="px-8 py-6 text-slate-500 text-[10px] font-mono">${date}</td>
<td class="px-8 py-6 font-bold text-white">${item.nama}</td>
<td class="px-8 py-6">
<a href="https://wa.me/${item.wa.replace(/\D/g,'')}" target="_blank" class="text-cyan text-sm font-bold hover:underline">
<i class="fab fa-whatsapp mr-1"></i> ${item.wa}
</a>
</td>
<td class="px-8 py-6">
<span class="bg-blue-500/10 text-blue-400 border border-blue-500/20 px-3 py-1 rounded-lg text-[9px] font-black uppercase">
${item.level}
</span>
</td>
</tr>
`;
}).join('');
}, (err) => {
tableBody.innerHTML = `<tr><td colspan="4" class="px-8 py-20 text-center text-red-500">Akses Ditolak: ${err.message}</td></tr>`;
});
});
}
</script>
</body>
</html>