https://gemini.google.com/share/6b9369bd905f
<!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>Suryo Garage Bot - Voice Auth</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
:root {
--primary: #f59e0b;
--primary-glow: rgba(245, 158, 11, 0.4);
--dark-bg: #020617;
}
body {
font-family: 'Space Grotesk', sans-serif;
background-color: var(--dark-bg);
color: #e2e8f0;
cursor: none;
overflow-x: hidden;
font-size: 14px;
}
.mono { font-family: 'JetBrains Mono', monospace; }
/* Login Overlay Styling */
#login-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: #020617;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.8s ease, visibility 0.8s;
}
.login-card {
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(20px);
border: 1px solid rgba(245, 158, 11, 0.2);
width: 100%;
max-width: 320px;
padding: 2rem;
border-radius: 1rem;
box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
/* Scrollbar Animasi */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #f59e0b; transition: 0.3s; }
/* Keyframes */
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-15px) rotate(5deg); }
}
@keyframes text-shimmer {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.shimmer-text {
background: linear-gradient(90deg, #fff, #f59e0b, #fff);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: text-shimmer 4s linear infinite;
}
.glass-card {
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(8px);
border: 1px solid rgba(245, 158, 11, 0.1);
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
border-color: var(--primary);
box-shadow: 0 0 20px rgba(245, 158, 11, 0.1);
transform: translateY(-5px) scale(1.02);
}
.glow-text {
text-shadow: 0 0 10px var(--primary-glow);
}
.grid-pattern {
background-image: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0.5px, transparent 0.5px);
background-size: 20px 20px;
}
#custom-cursor {
width: 12px;
height: 12px;
border: 1.5px solid var(--primary);
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 10000;
mix-blend-mode: difference;
transition: width 0.3s, height 0.3s, background-color 0.3s;
}
.reveal {
opacity: 0;
transform: translateY(20px);
transition: all 0.8s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.terminal-cursor {
display: inline-block;
width: 8px;
height: 15px;
background: var(--primary);
animation: blink 1s step-end infinite;
vertical-align: middle;
margin-left: 4px;
}
@keyframes blink { 50% { opacity: 0; } }
</style>
</head>
<body class="selection:bg-amber-500 selection:text-black">
<div id="custom-cursor"></div>
<!-- Login Overlay -->
<div id="login-overlay">
<div class="login-card text-center grid-pattern">
<div class="mb-6">
<div class="bg-amber-500 w-12 h-12 rounded mx-auto flex items-center justify-center mb-4 shadow-[0_0_20px_rgba(245,158,11,0.4)]">
<i class="fas fa-lock text-black text-xl"></i>
</div>
<h2 class="text-white font-bold uppercase tracking-widest text-sm">Restricted Access</h2>
<p class="text-[10px] text-gray-500 mono mt-1">Authorized Personnel Only</p>
</div>
<form onsubmit="event.preventDefault(); handleLogin();" class="space-y-3">
<input type="text" id="user-id" placeholder="USER ID" class="w-full bg-slate-900 border border-slate-700 p-2 text-[11px] mono text-white focus:border-amber-500 outline-none transition rounded">
<input type="password" id="user-pass" placeholder="PASSWORD" class="w-full bg-slate-900 border border-slate-700 p-2 text-[11px] mono text-white focus:border-amber-500 outline-none transition rounded">
<button type="submit" class="w-full bg-amber-500 text-black font-bold py-2 text-[10px] tracking-widest uppercase hover:bg-white transition duration-300">
Authenticate
</button>
<p id="login-error" class="text-red-500 text-[9px] mono opacity-0 transition-opacity">INVALID CREDENTIALS</p>
</form>
</div>
</div>
<!-- Main Content -->
<div id="main-content">
<!-- Navigation -->
<nav class="fixed top-0 w-full z-50 bg-slate-950/90 backdrop-blur-xl border-b border-slate-800">
<div class="max-w-7xl mx-auto px-4 h-14 flex justify-between items-center">
<div class="flex items-center gap-3 group cursor-pointer">
<div class="bg-amber-500 p-1.5 rounded transform transition-transform group-hover:rotate-[360deg] duration-700">
<i class="fas fa-robot text-black text-lg"></i>
</div>
<div>
<h1 class="text-sm font-bold tracking-tighter text-white uppercase leading-none">Suryo Garage</h1>
<span class="text-[8px] text-amber-500 mono font-bold tracking-[0.2em]">HUB</span>
</div>
</div>
<div class="hidden lg:flex space-x-8 text-[10px] font-bold tracking-[0.1em] uppercase">
<a href="#hero" class="text-gray-400 hover:text-white transition">Home</a>
<a href="#lab" class="text-gray-400 hover:text-white transition">Lab</a>
<a href="#terminal-sec" class="text-gray-400 hover:text-white transition">Console</a>
</div>
<div class="flex items-center gap-4">
<span id="display-user" class="text-[9px] mono text-amber-500 hidden lg:block">ID: 12345</span>
<button onclick="logout()" class="text-gray-500 hover:text-red-500 transition text-[10px] uppercase font-bold">Logout</button>
</div>
</div>
</nav>
<!-- Hero Section -->
<header id="hero" class="relative pt-24 pb-12 px-4 grid-pattern">
<div class="max-w-7xl mx-auto flex flex-col lg:flex-row items-center gap-8">
<div class="flex-1 text-center lg:text-left reveal active">
<div class="inline-block px-2 py-0.5 border border-amber-500/30 bg-amber-500/10 rounded-full mb-4">
<span class="text-amber-500 mono text-[9px] font-bold tracking-widest uppercase italic animate-pulse">● System: Live</span>
</div>
<h1 class="text-4xl md:text-6xl font-bold text-white mb-4 leading-tight tracking-tighter">
CODE THE <span class="shimmer-text">HARDWARE.</span>
</h1>
<p class="text-gray-400 text-sm max-w-md mb-6 leading-relaxed mx-auto lg:mx-0">
Akses diterima. Selamat datang kembali di pusat kendali Suryo Garage.
</p>
<div class="flex flex-wrap gap-3 justify-center lg:justify-start">
<a href="#lab" class="group px-6 py-2.5 bg-amber-500 text-black font-bold uppercase text-[10px] tracking-widest hover:bg-white transition flex items-center gap-2">
Explore <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
</a>
</div>
</div>
<div class="flex-1 relative hidden md:block reveal active">
<div class="relative w-48 h-48 mx-auto animate-float">
<div class="absolute inset-0 border border-dashed border-amber-500/20 rounded-full animate-[spin_10s_linear_infinite]"></div>
<div class="absolute inset-0 flex items-center justify-center">
<i class="fas fa-microchip text-6xl text-amber-500 opacity-80 glow-text"></i>
</div>
</div>
</div>
</div>
</header>
<!-- Lab Explorer -->
<section id="lab" class="py-12 px-4 bg-slate-950/50">
<div class="max-w-7xl mx-auto">
<div class="flex justify-between items-end mb-8 reveal">
<h2 class="text-2xl font-bold text-white uppercase italic">Active <span class="text-amber-500">Units</span></h2>
<span class="text-[10px] text-gray-600 mono font-bold tracking-widest uppercase">Database v2.4</span>
</div>
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3">
<div class="glass-card p-2 rounded group reveal">
<div class="h-28 bg-slate-800 rounded mb-3 overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&w=400&q=80" class="w-full h-full object-cover opacity-60 group-hover:scale-110 transition duration-700">
</div>
<h4 class="text-white font-bold text-[11px] uppercase mb-1">Weather Bot</h4>
<div class="flex justify-between items-center mt-2">
<span class="text-amber-500 text-[10px] font-bold italic">FREE</span>
<button><i class="fas fa-download text-gray-500 text-[10px]"></i></button>
</div>
</div>
<div class="glass-card p-2 rounded group reveal">
<div class="h-28 bg-slate-800 rounded mb-3 overflow-hidden relative">
<img src="https://images.unsplash.com/photo-1551288049-bbbda536339a?auto=format&fit=crop&w=400&q=80" class="w-full h-full object-cover opacity-60 group-hover:scale-110 transition duration-700">
</div>
<h4 class="text-white font-bold text-[11px] uppercase mb-1">Trading AI</h4>
<div class="flex justify-between items-center mt-2">
<span class="text-white text-[10px] font-bold italic">$99</span>
<button><i class="fas fa-shopping-cart text-gray-500 text-[10px]"></i></button>
</div>
</div>
</div>
</div>
</section>
<!-- Console Section -->
<section id="terminal-sec" class="py-12 px-4 border-t border-slate-900 reveal">
<div class="max-w-2xl mx-auto">
<div class="bg-black rounded-lg border border-slate-800 overflow-hidden shadow-2xl">
<div class="bg-slate-900 px-3 py-1 flex items-center justify-between">
<div class="flex gap-1.5">
<div class="w-2 h-2 rounded-full bg-red-500/50"></div>
<div class="w-2 h-2 rounded-full bg-amber-500/50"></div>
<div class="w-2 h-2 rounded-full bg-green-500/50"></div>
</div>
<span class="text-[8px] mono text-gray-600 uppercase tracking-widest">Suryo-Console-v1.0</span>
</div>
<div class="p-4 h-40 overflow-y-auto mono text-[11px] text-amber-500/70" id="terminal">
<p class="mb-1">> Welcome, Authorized User.</p>
<div id="terminal-output"></div>
<div class="flex items-center gap-2">
<span>></span>
<input type="text" id="terminal-input" class="bg-transparent border-none outline-none text-white w-full" spellcheck="false" autocomplete="off">
<span class="terminal-cursor"></span>
</div>
</div>
</div>
</div>
</section>
<footer class="py-8 px-4 border-t border-slate-900 text-center">
<p class="text-[9px] text-gray-600 uppercase tracking-widest font-bold">
© 2024 Suryo Garage Bot. Secure Environment.
</p>
</footer>
</div>
<script>
// Fungsi Suara (Text-to-Speech)
function speak(text) {
if ('speechSynthesis' in window) {
// Hentikan suara yang sedang berjalan jika ada
window.speechSynthesis.cancel();
const msg = new SpeechSynthesisUtterance();
msg.text = text;
msg.lang = 'id-ID'; // Mengatur bahasa ke Indonesia
msg.rate = 1.0; // Kecepatan bicara normal
msg.pitch = 1.0; // Nada normal
window.speechSynthesis.speak(msg);
}
}
// Auth Logic
function handleLogin() {
const userId = document.getElementById('user-id').value;
const userPass = document.getElementById('user-pass').value;
const errorMsg = document.getElementById('login-error');
const overlay = document.getElementById('login-overlay');
if (userId === "12345" && userPass === "0000") {
// Suara Berhasil
speak("aksess di terima");
overlay.style.opacity = "0";
setTimeout(() => {
overlay.style.visibility = "hidden";
}, 800);
localStorage.setItem('garage_auth', 'true');
} else {
// Suara Gagal
speak("cek kembali user");
errorMsg.style.opacity = "1";
setTimeout(() => { errorMsg.style.opacity = "0"; }, 2000);
}
}
function logout() {
localStorage.removeItem('garage_auth');
location.reload();
}
// Check Session on Load
window.onload = () => {
if (localStorage.getItem('garage_auth') === 'true') {
const overlay = document.getElementById('login-overlay');
overlay.style.display = "none";
}
reveal();
};
// Custom Cursor
const cursor = document.getElementById('custom-cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = e.clientX - 6 + 'px';
cursor.style.top = e.clientY - 6 + 'px';
});
// Scroll Reveal
function reveal() {
var reveals = document.querySelectorAll(".reveal");
for (var i = 0; i < reveals.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = reveals[i].getBoundingClientRect().top;
if (elementTop < windowHeight - 150) {
reveals[i].classList.add("active");
}
}
}
window.addEventListener("scroll", reveal);
// Terminal
const input = document.getElementById('terminal-input');
const output = document.getElementById('terminal-output');
const terminal = document.getElementById('terminal');
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const cmd = input.value.toLowerCase().trim();
if (cmd === '') return;
const newLine = document.createElement('p');
newLine.className = 'text-white';
newLine.textContent = `> ${cmd}`;
output.appendChild(newLine);
input.value = '';
terminal.scrollTop = terminal.scrollHeight;
}
});
</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 - Ahli Diagnosa Yamaha</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&family=Inter:wght@400;600&display=swap');
body {
font-family: 'Inter', sans-serif;
background-color: #1a1a1a;
background-image: radial-gradient(#333 1px, transparent 1px);
background-size: 20px 20px;
}
h1, h2, h3, .brand-font {
font-family: 'Chakra Petch', sans-serif;
}
.fade-in {
animation: fadeIn 0.4s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.garage-border {
border-top: 4px solid #f97316;
}
/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #18181b;
}
::-webkit-scrollbar-thumb {
background: #3f3f46;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #f97316;
}
</style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">
<!-- Login Section -->
<div id="login-container" class="max-w-md w-full bg-zinc-900 rounded-2xl shadow-2xl overflow-hidden border border-zinc-800 garage-border fade-in">
<div class="bg-zinc-800 p-8 text-center border-b border-zinc-700">
<div class="inline-flex items-center justify-center w-20 h-20 bg-orange-500 rounded-full mb-4 shadow-lg shadow-orange-500/20">
<i class="fas fa-user-lock text-white text-4xl"></i>
</div>
<h1 class="text-2xl font-bold tracking-wider text-white uppercase">Akses <span class="text-orange-500">Mekanik</span></h1>
<p class="text-zinc-400 text-xs mt-1 font-medium tracking-widest uppercase">Silahkan Login Terlebih Dahulu</p>
</div>
<div class="p-8 space-y-6">
<div>
<label class="block text-xs font-bold text-zinc-500 uppercase mb-2 tracking-wider">Username</label>
<input type="text" id="username" class="block w-full px-4 py-3 text-white bg-zinc-800 border border-zinc-700 rounded-xl focus:ring-2 focus:ring-orange-500 outline-none transition duration-200" placeholder="Masukkan username">
</div>
<div>
<label class="block text-xs font-bold text-zinc-500 uppercase mb-2 tracking-wider">Password</label>
<input type="password" id="password" class="block w-full px-4 py-3 text-white bg-zinc-800 border border-zinc-700 rounded-xl focus:ring-2 focus:ring-orange-500 outline-none transition duration-200" placeholder="Masukkan password">
</div>
<div id="login-error" class="hidden text-red-500 text-sm font-semibold text-center bg-red-500/10 py-2 rounded-lg border border-red-500/20">
Username atau password salah!
</div>
<button onclick="handleLogin()" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 rounded-xl shadow-lg shadow-orange-500/30 transition duration-200 uppercase tracking-widest">
Login Sistem
</button>
</div>
</div>
<!-- Main Bot Section (Hidden by default) -->
<div id="bot-container" class="max-w-md w-full bg-zinc-900 rounded-2xl shadow-2xl overflow-hidden border border-zinc-800 garage-border hidden fade-in">
<!-- Header -->
<div class="bg-zinc-800 p-6 text-center border-b border-zinc-700 relative">
<button onclick="handleLogout()" class="absolute right-4 top-4 text-zinc-500 hover:text-red-500 transition-colors">
<i class="fas fa-sign-out-alt text-xl"></i>
</button>
<div class="inline-flex items-center justify-center w-16 h-16 bg-orange-500 rounded-full mb-4 shadow-lg shadow-orange-500/20">
<i class="fas fa-robot text-white text-3xl"></i>
</div>
<h1 class="text-2xl font-bold tracking-wider text-white uppercase">Suryo Garage <span class="text-orange-500">Bot</span></h1>
<p class="text-zinc-400 text-xs mt-1 font-medium tracking-widest uppercase">Automated Yamaha Specialist</p>
</div>
<!-- Form Section -->
<div class="p-6 space-y-5">
<!-- Tipe Motor Section -->
<div>
<label for="tipe_motor" class="block text-xs font-bold text-zinc-500 uppercase mb-2 ml-1 tracking-wider">
Pilih Tipe Motor:
</label>
<div class="relative">
<select id="tipe_motor" onchange="resetHasil()" class="block w-full px-4 py-3 text-white bg-zinc-800 border border-zinc-700 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200 appearance-none cursor-pointer">
<option value="umum">Yamaha (Umum)</option>
<optgroup label="🛵 MAXI SERIES" class="bg-zinc-900 text-orange-500">
<option value="nmax">Yamaha NMAX</option>
<option value="aerox">Yamaha Aerox 155</option>
<option value="lexi">Yamaha Lexi</option>
</optgroup>
<optgroup label="🛵 MATIC FI" class="bg-zinc-900 text-orange-500">
<option value="miom3">Yamaha Mio M3</option>
<option value="gear">Yamaha Gear 125</option>
<option value="freego">Yamaha FreeGo</option>
<option value="fazzio">Yamaha Fazzio</option>
<option value="xride">Yamaha X-Ride 125</option>
</optgroup>
<optgroup label="🏍️ SPORT FI" class="bg-zinc-900 text-orange-500">
<option value="vixion">Yamaha Vixion</option>
<option value="r15">Yamaha R15</option>
<option value="mt15">Yamaha MT-15</option>
</optgroup>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-zinc-500">
<i class="fas fa-motorcycle"></i>
</div>
</div>
</div>
<!-- Gejala Section -->
<div>
<label for="masalah" class="block text-xs font-bold text-zinc-500 uppercase mb-2 ml-1 tracking-wider">
Input Gejala Motor:
</label>
<div class="relative">
<select id="masalah" onchange="cek()" class="block w-full px-4 py-4 text-white bg-zinc-800 border border-zinc-700 rounded-xl focus:ring-2 focus:ring-orange-500 focus:border-orange-500 transition duration-200 appearance-none cursor-pointer">
<option value="">-- DETEKSI MASALAH --</option>
<optgroup label="Diagnosa Kelistrikan">
<option value="12">Kode 12: Crank Position Sensor</option>
<option value="46">Kode 46: Voltase Pengisian Abnormal</option>
<option value="33">Kode 33: Masalah Coil Pengapian</option>
</optgroup>
<optgroup label="Diagnosa Sensor & Suhu">
<option value="37">Kode 37: Idle Speed Control (ISC)</option>
<option value="21">Kode 21: Sensor Suhu Radiator (ECT)</option>
<option value="22">Kode 22: Intake Air Pressure (MAP)</option>
</optgroup>
<optgroup label="Gejala Umum">
<option value="brebet">Mesin Brebet / Tersendat</option>
<option value="mati_mendadak">Mesin Mati Mendadak</option>
<option value="tenaga_hilang">Tenaga Ngempos / Lemot</option>
</optgroup>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-orange-500">
<i class="fas fa-wrench"></i>
</div>
</div>
</div>
<!-- Result Section -->
<div id="result-box" class="mt-8 hidden fade-in">
<div class="space-y-4">
<div class="flex items-center justify-between">
<span id="target-motor" class="text-[10px] font-black text-orange-500 uppercase tracking-[0.2em]">PEMINDAIAN: UMUM</span>
<span id="kode-badge" class="px-3 py-1 bg-orange-500/10 text-orange-500 text-xs font-bold rounded border border-orange-500/20 uppercase">
KODE: --
</span>
</div>
<div class="bg-zinc-800/50 border border-zinc-700 rounded-xl p-5">
<div class="flex items-start gap-3">
<i class="fas fa-search-bolt text-orange-500 mt-1"></i>
<div>
<h4 class="text-xs font-bold text-zinc-400 uppercase mb-1">Analisa Sistem:</h4>
<p id="analisa" class="text-white font-semibold text-lg leading-snug"></p>
</div>
</div>
</div>
<div class="bg-zinc-800/50 border border-zinc-700 rounded-xl p-5">
<div class="flex items-start gap-3">
<i class="fas fa-toolbox text-green-500 mt-1"></i>
<div>
<h4 class="text-xs font-bold text-zinc-400 uppercase mb-1">Rekomendasi Suryo:</h4>
<p id="solusi" class="text-zinc-300 text-sm leading-relaxed"></p>
</div>
</div>
</div>
<button onclick="resetForm()" class="w-full py-3 text-zinc-500 hover:text-orange-500 text-xs font-bold uppercase tracking-widest transition-colors duration-200">
<i class="fas fa-undo-alt mr-2"></i> Scan Ulang
</button>
</div>
</div>
<!-- Empty State -->
<div id="empty-state" class="mt-8 text-center py-12 border-2 border-dashed border-zinc-800 rounded-2xl">
<i class="fas fa-microchip text-zinc-700 text-5xl mb-4"></i>
<p class="text-zinc-500 text-sm font-medium px-4">Sistem Standby. Silahkan pilih tipe motor dan gejala untuk memulai scanning.</p>
</div>
</div>
<!-- Footer -->
<div class="bg-zinc-800/30 p-4 border-t border-zinc-800 text-center">
<p class="text-[10px] text-zinc-600 font-bold uppercase tracking-widest">
Maintained by <span class="text-zinc-400">Suryo Garage Team</span>
</p>
</div>
</div>
<!-- Audio Effects (SFX) -->
<audio id="sound-success" src="https://assets.mixkit.co/active_storage/sfx/2013/2013-preview.mp3" preload="auto"></audio>
<audio id="sound-error" src="https://assets.mixkit.co/active_storage/sfx/2571/2571-preview.mp3" preload="auto"></audio>
<audio id="sound-scan" src="https://assets.mixkit.co/active_storage/sfx/2358/2358-preview.mp3" preload="auto"></audio>
<script>
// Data Login
const validUser = "budi";
const validPass = "12345";
const audioSuccess = document.getElementById('sound-success');
const audioError = document.getElementById('sound-error');
const audioScan = document.getElementById('sound-scan');
// Fungsi Bicara (Text-to-Speech)
function speak(text) {
const synth = window.speechSynthesis;
const utterThis = new SpeechSynthesisUtterance(text);
utterThis.lang = 'id-ID'; // Mengatur bahasa ke Bahasa Indonesia
utterThis.rate = 1.0; // Kecepatan bicara
utterThis.pitch = 1.0; // Nada suara
synth.speak(utterThis);
}
function playSound(type) {
if (type === 'success') {
audioSuccess.currentTime = 0;
audioSuccess.play();
} else if (type === 'error') {
audioError.currentTime = 0;
audioError.play();
} else if (type === 'scan') {
audioScan.currentTime = 0;
audioScan.play();
}
}
function handleLogin() {
const userIn = document.getElementById('username').value;
const passIn = document.getElementById('password').value;
const errorMsg = document.getElementById('login-error');
if (userIn === validUser && passIn === validPass) {
playSound('success');
speak("Selamat datang di Suryo Garage"); // Mengucapkan Selamat Datang
setTimeout(() => {
document.getElementById('login-container').classList.add('hidden');
document.getElementById('bot-container').classList.remove('hidden');
errorMsg.classList.add('hidden');
}, 500);
} else {
playSound('error');
speak("User atau password salah"); // Mengucapkan Error
errorMsg.classList.remove('hidden');
document.getElementById('password').value = "";
}
}
function handleLogout() {
document.getElementById('bot-container').classList.add('hidden');
document.getElementById('login-container').classList.remove('hidden');
document.getElementById('username').value = "";
document.getElementById('password').value = "";
resetForm();
}
// Data Kerusakan
const dataKerusakan = {
"12": {
kode: "12",
analisa: "Sinyal Crankshaft Position Sensor Error",
solusi: "Periksa soket 3 pin spul. Jika terdapat bekas terbakar atau meleleh, segera bersihkan atau ganti soket dengan tipe keramik/solder langsung agar arus stabil."
},
"46": {
kode: "46",
analisa: "Sistem Pengisian Listrik Tidak Normal",
solusi: "Cek tegangan aki saat mesin menyala (Harus 13.5V - 14.5V). Periksa kiprok/regulator dan soket spul. Pastikan kabel massa terpasang kencang."
},
"33": {
kode: "33",
analisa: "Primary Coil Pengapian Error",
solusi: "Cek kabel penghubung dari ECU ke Coil. Pastikan soket coil tidak kendur. Periksa juga kondisi busi dan cop busi jika terjadi kebocoran arus."
},
"37": {
kode: "37",
analisa: "Malfungsi Idle Speed Control (ISC)",
solusi: "Bersihkan katup ISC dan lubang bypass udara pada Throttle Body. Lakukan reset parameter ISC menggunakan Yamaha Diagnostic Tool (FID)."
},
"21": {
kode: "21",
analisa: "Sensor Suhu Cairan Pendingin (ECT) Bermasalah",
solusi: "Cek volume air radiator. Periksa soket sensor suhu di area blok mesin. Jika sensor kotor oleh kerak mineral, bersihkan atau ganti unit sensor."
},
"22": {
kode: "22",
analisa: "Sensor Tekanan Udara Intake (MAP) Error",
solusi: "Periksa selang vakum dari sensor MAP ke intake manifold, pastikan tidak retak. Bersihkan sensor dari uap oli yang menempel."
},
"brebet": {
kode: "Umum",
analisa: "Campuran Bahan Bakar Tidak Ideal / Injektor Kotor",
solusi: "Lakukan kuras tangki bensin jika ada indikasi air. Bersihkan injektor dengan cairan pembersih dan cek tekanan pompa bensin (Fuel Pump)."
},
"mati_mendadak": {
kode: "Umum",
analisa: "Hilang Kompresi / Fuel Pump Lemah",
solusi: "Cek tekanan Fuel Pump (Normal: 42-45 PSI). Periksa celah klep, jika terlalu rapat dapat menyebabkan motor mati saat suhu mesin panas."
},
"tenaga_hilang": {
kode: "Umum",
analisa: "Transmisi CVT Kotor / Filter Udara Buntu",
solusi: "Bersihkan area CVT (Roller, V-Belt, Kampas Ganda). Ganti filter udara jika sudah hitam pekat. Cek juga kondisi busi."
}
};
function cek() {
const selectMotor = document.getElementById("tipe_motor");
const selectMasalah = document.getElementById("masalah");
const val = selectMasalah.value;
const motorText = selectMotor.options[selectMotor.selectedIndex].text;
const resultBox = document.getElementById("result-box");
const emptyState = document.getElementById("empty-state");
const targetMotorDisplay = document.getElementById("target-motor");
if (val === "") {
resultBox.classList.add("hidden");
emptyState.classList.remove("hidden");
return;
}
playSound('scan');
const data = dataKerusakan[val];
// Update UI
targetMotorDisplay.innerText = "PEMINDAIAN: " + motorText.toUpperCase();
document.getElementById("kode-badge").innerText = "KODE: " + data.kode;
document.getElementById("analisa").innerText = data.analisa;
document.getElementById("solusi").innerText = data.solusi;
emptyState.classList.add("hidden");
resultBox.classList.remove("hidden");
}
function resetHasil() {
const val = document.getElementById("masalah").value;
if(val !== "") {
cek();
}
}
function resetForm() {
document.getElementById("masalah").value = "";
document.getElementById("tipe_motor").value = "umum";
const resultBox = document.getElementById("result-box");
const emptyState = document.getElementById("empty-state");
if (resultBox) resultBox.classList.add("hidden");
if (emptyState) emptyState.classList.remove("hidden");
}
</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 Portal</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@400;700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #0a0a0b;
color: #e2e8f0;
overflow-x: hidden;
}
.mono { font-family: 'Fira Code', monospace; }
#canvas-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
opacity: 0.4;
}
.glass {
background: rgba(23, 23, 23, 0.8);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.code-list::-webkit-scrollbar {
width: 6px;
}
.code-list::-webkit-scrollbar-thumb {
background-color: #22c55e;
border-radius: 10px;
}
@keyframes pulse-border {
0% { border-color: rgba(34, 197, 94, 0.3); }
50% { border-color: rgba(34, 197, 94, 1); }
100% { border-color: rgba(34, 197, 94, 0.3); }
}
.active-input {
animation: pulse-border 2s infinite;
}
</style>
</head>
<body>
<canvas id="canvas-bg"></canvas>
<div class="min-h-screen flex flex-col items-center justify-center p-4">
<header class="text-center mb-8">
<h1 class="text-4xl md:text-5xl font-bold mb-2 tracking-tight">
<span class="text-green-500 mono"><</span>
SURYO GARAGE BOT
<span class="text-green-500 mono">/></span>
</h1>
<p class="text-slate-400 max-w-md mx-auto">
Protokol keamanan aktif. Identitas tidak ditemukan. Temukan kunci yang tepat di dalam database dump untuk melanjutkan.
</p>
</header>
<main class="grid grid-cols-1 lg:grid-cols-2 gap-8 w-full max-w-5xl">
<!-- Sisi Kiri: Login -->
<section class="glass p-8 rounded-2xl shadow-2xl flex flex-col justify-center border border-green-500/20">
<div class="mb-6">
<div class="flex items-center gap-2 mb-4">
<div class="w-3 h-3 rounded-full bg-red-500"></div>
<div class="w-3 h-3 rounded-full bg-yellow-500"></div>
<div class="w-3 h-3 rounded-full bg-green-500"></div>
<span class="text-xs mono text-slate-500 ml-2">SURYO_SECURE_GATE_v2.0</span>
</div>
<h2 class="text-2xl font-bold mb-1">Masukan Kode Akses</h2>
<p class="text-sm text-slate-400">Hanya ada satu kunci yang valid untuk membuka enkripsi ini.</p>
</div>
<div class="space-y-4">
<div>
<label class="block text-xs uppercase tracking-widest text-slate-500 mb-2 mono">Access Key</label>
<input type="text" id="accessKeyInput"
class="w-full bg-black/50 border border-slate-700 rounded-lg px-4 py-3 mono text-green-400 focus:outline-none focus:border-green-500 active-input transition-all"
placeholder="Ketik atau klik kode..."
autocomplete="off">
</div>
<button onclick="checkAccess()"
class="w-full bg-green-600 hover:bg-green-500 text-white font-bold py-3 rounded-lg transition-all shadow-[0_0_20px_rgba(34,197,94,0.3)] active:scale-95">
AUTENTIKASI SEKARANG
</button>
<div id="statusMsg" class="h-6 text-center text-sm mono"></div>
</div>
</section>
<!-- Sisi Kanan: Daftar Kode -->
<section class="glass p-8 rounded-2xl border border-slate-800 flex flex-col h-[500px]">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-semibold mono text-green-500">DATABASE_DUMP.TXT</h3>
<span class="text-[10px] bg-slate-800 px-2 py-1 rounded text-slate-400">STATUS: TERDETEKSI</span>
</div>
<div id="codeContainer" class="code-list overflow-y-auto pr-2 grid grid-cols-2 gap-2 text-xs mono text-slate-500 italic">
<!-- Kode akan dimasukkan di sini oleh JS -->
</div>
<div class="mt-4 pt-4 border-t border-slate-800 text-center">
<p class="text-[10px] text-slate-500 italic">
Petunjuk: Cari kode yang memiliki pola kata yang familiar atau instruksi khusus.
</p>
</div>
</section>
</main>
<footer class="mt-12 text-slate-600 text-xs mono">
© 2024 Lab Informatika - Suryo Garage Bot Simulation
</footer>
</div>
<!-- Modal Sukses -->
<div id="successModal" class="fixed inset-0 bg-black/90 z-50 flex items-center justify-center hidden p-4">
<div class="glass p-10 rounded-3xl max-w-md w-full text-center border-2 border-green-500 shadow-[0_0_50px_rgba(34,197,94,0.4)]">
<div class="w-20 h-20 bg-green-500 rounded-full flex items-center justify-center mx-auto mb-6">
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-black" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7" />
</svg>
</div>
<h2 class="text-3xl font-bold mb-2 uppercase">Akses Diterima</h2>
<p class="text-slate-400 mb-8">Sistem berhasil didekripsi. Selamat datang di Portal Suryo Garage Bot.</p>
<button onclick="window.location.reload()" class="bg-green-600 px-8 py-3 rounded-full font-bold hover:bg-green-500 transition-colors">
LANJUT KE DASHBOARD
</button>
</div>
</div>
<script>
// KODE TETAP
const CORRECT_ACCESS_KEY = "INF-BELAJAR123";
const TOTAL_DECOY_CODES = 79;
function generateCodes() {
const container = document.getElementById('codeContainer');
const allCodes = [];
allCodes.push(CORRECT_ACCESS_KEY);
for (let i = 0; i < TOTAL_DECOY_CODES; i++) {
const randomCode = "INF-" + Math.random().toString(36).substring(2, 8).toUpperCase();
allCodes.push(randomCode);
}
allCodes.sort(() => Math.random() - 0.5);
allCodes.forEach(code => {
const div = document.createElement('div');
div.className = "p-2 bg-white/5 rounded border border-transparent hover:border-green-500/30 transition-all cursor-pointer select-all";
div.innerText = code;
div.onclick = () => {
document.getElementById('accessKeyInput').value = code;
};
container.appendChild(div);
});
}
function checkAccess() {
const input = document.getElementById('accessKeyInput').value.trim();
const status = document.getElementById('statusMsg');
if (input === "") {
showStatus("Input kosong!", "text-yellow-500");
return;
}
if (input === CORRECT_ACCESS_KEY) {
showStatus("DEKRIPSI BERHASIL...", "text-green-500 uppercase font-bold");
setTimeout(() => {
document.getElementById('successModal').classList.remove('hidden');
}, 800);
} else {
showStatus("ERROR: KODE TIDAK VALID", "text-red-500 uppercase");
const inputEl = document.getElementById('accessKeyInput');
inputEl.classList.add('border-red-500');
setTimeout(() => inputEl.classList.remove('border-red-500'), 500);
}
}
function showStatus(msg, colorClass) {
const status = document.getElementById('statusMsg');
status.innerHTML = `<span class="${colorClass}">${msg}</span>`;
}
const canvas = document.getElementById('canvas-bg');
const ctx = canvas.getContext('2d');
let particles = [];
function initCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
particles = [];
for (let i = 0; i < 60; i++) {
particles.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
size: Math.random() * 2,
speedY: Math.random() * 0.4 + 0.1,
opacity: Math.random()
});
}
}
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "#22c55e";
particles.forEach(p => {
p.y -= p.speedY;
if (p.y < 0) p.y = canvas.height;
ctx.globalAlpha = p.opacity;
ctx.fillRect(p.x, p.y, p.size, p.size);
});
requestAnimationFrame(animate);
}
window.onload = () => {
generateCodes();
initCanvas();
animate();
};
window.onresize = initCanvas;
</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 - Bootcamp Robotika & Otomotif</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&family=Inter:wght@300;400;600;700;900&display=swap');
body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; }
.mono { font-family: 'Fira Code', monospace; }
.card-glass { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); }
.orange-glow { box-shadow: 0 0 25px rgba(249, 115, 22, 0.15); }
.section-heading { letter-spacing: -0.05em; line-height: 0.9; }
</style>
</head>
<body class="bg-[#05070a] text-gray-200">
<!-- Navigation -->
<nav class="sticky top-0 z-50 bg-[#05070a]/95 backdrop-blur-md border-b border-gray-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 space-x-3">
<div class="bg-orange-600 p-2 rounded-lg shadow-lg">
<i class="fas fa-microchip text-white text-xl"></i>
</div>
<div class="leading-none">
<span class="font-black text-xl tracking-tighter text-white block uppercase">Suryo Garage</span>
<span class="text-orange-500 font-mono text-[9px] tracking-[0.3em] uppercase">Edu-Robotika Hub</span>
</div>
</div>
<div class="hidden lg:flex space-x-8 text-[11px] font-bold uppercase tracking-widest text-gray-400">
<a href="#kurikulum" class="hover:text-orange-500 transition">Kurikulum</a>
<a href="#otomotif" class="hover:text-orange-500 transition text-orange-500">Spesial Otomotif</a>
<a href="#bootcamp" class="hover:text-orange-500 transition">Bootcamp</a>
</div>
<div class="flex items-center space-x-4">
<button class="hidden sm:block text-gray-400 text-xs font-bold uppercase hover:text-white transition">Login Siswa</button>
<button class="bg-orange-600 text-white px-6 py-2.5 rounded-sm font-black hover:bg-orange-700 transition text-xs uppercase tracking-widest orange-glow">
Daftar Sekarang
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="pt-24 pb-16 px-4 relative overflow-hidden">
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-orange-900/10 via-transparent to-transparent opacity-40"></div>
<div class="max-w-7xl mx-auto text-center relative z-10">
<div class="inline-flex items-center space-x-3 bg-white/5 border border-white/10 px-4 py-1.5 rounded-full mb-8">
<span class="bg-green-500 w-2 h-2 rounded-full animate-pulse"></span>
<span class="text-gray-300 text-[10px] font-mono uppercase tracking-widest">Pendaftaran Batch 2024 Dibuka</span>
</div>
<h1 class="text-5xl md:text-8xl font-black mb-8 text-white section-heading uppercase">
Kuasai Arduino <br><span class="text-transparent bg-clip-text bg-gradient-to-r from-orange-500 to-yellow-500 italic">Dari Dasar ke Mahir.</span>
</h1>
<p class="text-lg text-gray-400 mb-12 max-w-3xl mx-auto leading-relaxed">
Program Bootcamp & E-Book Robotika Terintegrasi. Dirancang khusus untuk siswa SMK dengan fokus pada implementasi <span class="text-white border-b border-orange-500">Sistem Kelistrikan Otomotif & Smart System.</span>
</p>
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
<button class="bg-white text-black px-12 py-5 rounded-sm font-black uppercase tracking-widest hover:bg-orange-600 hover:text-white transition shadow-2xl">
Unduh Silabus E-Book
</button>
<button class="bg-transparent text-white px-12 py-5 rounded-sm font-black border border-gray-700 hover:border-orange-500 transition uppercase tracking-widest">
Video Demo Projek
</button>
</div>
</div>
</header>
<!-- Project Levels (Kurikulum) -->
<section id="kurikulum" class="py-24 max-w-7xl mx-auto px-4">
<div class="grid lg:grid-cols-3 gap-8">
<!-- Level 1: Dasar -->
<div class="card-glass p-8 rounded-sm relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10 text-4xl font-black italic">X</div>
<h3 class="text-orange-500 font-mono text-xs mb-4 uppercase tracking-widest">Kelas X // Dasar</h3>
<h4 class="text-2xl font-black text-white mb-6">FUNDAMENTAL ELECTRONICS</h4>
<ul class="space-y-4 text-sm text-gray-400">
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Pengenalan Digital Output (Blink LED)</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Logika Delay (Traffic Light Mini)</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Input Digital (Push Button Control)</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Monitoring Jarak (Sensor Ultrasonik)</li>
</ul>
</div>
<!-- Level 2: Menengah -->
<div class="card-glass p-8 rounded-sm relative overflow-hidden border-orange-500/30">
<div class="absolute top-0 right-0 p-4 opacity-10 text-4xl font-black italic">XI</div>
<h3 class="text-orange-500 font-mono text-xs mb-4 uppercase tracking-widest">Kelas XI // Logika</h3>
<h4 class="text-2xl font-black text-white mb-6">SYSTEM LOGIC & SENSORS</h4>
<ul class="space-y-4 text-sm text-gray-400">
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Smart Alarm (Magnetic Sensor)</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Lampu Otomatis (Sensor LDR)</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Deteksi Asap & Api (Keamanan Bengkel)</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Penyiram Tanaman Otomatis</li>
</ul>
</div>
<!-- Level 3: Lanjutan -->
<div class="card-glass p-8 rounded-sm relative overflow-hidden">
<div class="absolute top-0 right-0 p-4 opacity-10 text-4xl font-black italic">XII</div>
<h3 class="text-orange-500 font-mono text-xs mb-4 uppercase tracking-widest">Kelas XII // Lanjut</h3>
<h4 class="text-2xl font-black text-white mb-6">SMART IOT SYSTEMS</h4>
<ul class="space-y-4 text-sm text-gray-400">
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Kontrol Nirkabel via Bluetooth</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Monitoring Jarak Jauh (IoT ESP8266)</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> Smart Parking & Diagnosis Board</li>
<li class="flex items-center"><i class="fas fa-caret-right text-orange-600 mr-2"></i> GPS Tracker System</li>
</ul>
</div>
</div>
</section>
<!-- Automotive Branding (TBSM Focus) -->
<section id="otomotif" class="py-24 bg-orange-600 text-black">
<div class="max-w-7xl mx-auto px-4">
<div class="flex flex-col md:flex-row gap-16 items-center">
<div class="md:w-1/2">
<h2 class="text-5xl font-black mb-6 leading-none uppercase">RELEVAN DENGAN DUNIA OTOMOTIF 🔥</h2>
<p class="text-lg font-bold mb-8 opacity-80 leading-relaxed">
Kami mengintegrasikan kurikulum robotika dengan kelistrikan sepeda motor. Cocok untuk siswa TBSM yang ingin menguasai teknologi EFI dan Smart Key.
</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="bg-black/10 p-4 rounded-sm border border-black/10">
<h5 class="font-black text-sm uppercase mb-1">Keyless System</h5>
<p class="text-xs">Starter motor simulasi menggunakan RFID.</p>
</div>
<div class="bg-black/10 p-4 rounded-sm border border-black/10">
<h5 class="font-black text-sm uppercase mb-1">Digital Voltmeter</h5>
<p class="text-xs">Monitoring tegangan aki di layar LCD.</p>
</div>
<div class="bg-black/10 p-4 rounded-sm border border-black/10">
<h5 class="font-black text-sm uppercase mb-1">Anti-Theft Alarm</h5>
<p class="text-xs">Sistem pengaman motor anti maling.</p>
</div>
<div class="bg-black/10 p-4 rounded-sm border border-black/10">
<h5 class="font-black text-sm uppercase mb-1">Shift Light RPM</h5>
<p class="text-xs">Indikator perpindahan gigi berbasis RPM.</p>
</div>
</div>
</div>
<div class="md:w-1/2 bg-black p-8 rounded-sm shadow-2xl">
<div class="border-l-4 border-orange-500 pl-6 mb-8">
<p class="text-orange-500 font-mono text-xs uppercase mb-2 tracking-widest italic">Featured Project</p>
<h3 class="text-3xl font-black text-white">SMART DIAGNOSTIC BOARD</h3>
</div>
<div class="aspect-video bg-gray-900 mb-6 flex items-center justify-center">
<i class="fas fa-microchip text-6xl text-gray-800"></i>
</div>
<button class="w-full bg-orange-600 py-4 font-black uppercase tracking-widest text-white hover:bg-orange-700 transition">Lihat Case Study</button>
</div>
</div>
</div>
</section>
<!-- Student Portfolio Section -->
<section class="py-24 max-w-7xl mx-auto px-4 text-center">
<h2 class="text-4xl font-black text-white mb-6 uppercase tracking-tighter">Target Produk Akhir Siswa</h2>
<p class="text-gray-500 mb-16 max-w-2xl mx-auto italic">"Setiap siswa tidak hanya belajar, tapi membangun Portfolio Digital yang siap kerja."</p>
<div class="flex flex-wrap justify-center gap-12">
<div class="w-40 text-center">
<div class="w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 border border-orange-500/30">
<i class="fas fa-file-pdf text-2xl text-orange-500"></i>
</div>
<h5 class="font-bold text-white text-sm">Laporan Teknis</h5>
</div>
<div class="w-40 text-center">
<div class="w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 border border-orange-500/30">
<i class="fas fa-video text-2xl text-orange-500"></i>
</div>
<h5 class="font-bold text-white text-sm">Video Demo</h5>
</div>
<div class="w-40 text-center">
<div class="w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 border border-orange-500/30">
<i class="fas fa-presentation-square text-2xl text-orange-500"></i>
</div>
<h5 class="font-bold text-white text-sm">Presentasi</h5>
</div>
<div class="w-40 text-center">
<div class="w-20 h-20 bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4 border border-orange-500/30">
<i class="fas fa-globe text-2xl text-orange-500"></i>
</div>
<h5 class="font-bold text-white text-sm">Web Portfolio</h5>
</div>
</div>
</section>
<!-- Call to Action -->
<section id="bootcamp" class="py-24 px-4">
<div class="max-w-4xl mx-auto bg-white p-12 text-center text-black rounded-sm shadow-2xl relative">
<h2 class="text-4xl font-black mb-4 uppercase tracking-tighter italic">DAFTARKAN KELAS ANDA SEKARANG</h2>
<p class="font-bold text-gray-600 mb-10">Dapatkan Lisensi E-Book & Akses Platform Belajar untuk 30 Siswa sekaligus.</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<button class="bg-black text-white px-12 py-5 rounded-sm font-black uppercase tracking-widest hover:bg-orange-600 transition">Konsultasi via WhatsApp</button>
</div>
<p class="mt-6 text-[10px] text-gray-400 font-mono uppercase tracking-widest">Powered by Suryo Garage Robotics Division</p>
</div>
</section>
<!-- Footer -->
<footer class="py-12 border-t border-gray-900 text-center">
<div class="flex items-center justify-center space-x-2 mb-4">
<i class="fas fa-tools text-orange-600"></i>
<span class="text-white font-black uppercase tracking-[0.2em] text-xs">Suryo Garage Bot // 2024</span>
</div>
<p class="text-gray-600 text-[10px] uppercase tracking-widest">Kurikulum Berstandar Industri & Pendidikan Vokasi</p>
</footer>
</body>
</html>