Halaman intro animasi untuk MOBAN KBS Dashboard dengan redirect otomatis ke Google Apps Script.
- ✨ Logo Entry Animation - Logo muncul dengan efek rotasi dan bounce
- 🌊 Floating Effect - Logo melayang dengan gerakan smooth
- 💫 Glow Effect - Efek cahaya berkedip di sekitar logo
- 📝 Text Animation - Teks muncul secara bergantian dengan fade in effect
- 🎭 Particle System - 30 partikel melayang dari bawah ke atas
- ⭕ Background Circles - Lingkaran animasi di background
- 📊 Progress Bar - Loading bar dengan animasi 5 detik
- ⏱️ Auto Redirect - Otomatis mengarahkan ke Google Apps Script setelah 5 detik
- 📱 Responsive Design - Tampilan optimal di semua ukuran layar
- 🎯 Smooth Transitions - Transisi halus antar animasi
- 🔄 Dual Redirect Method - Menggunakan meta refresh dan JavaScript setTimeout
-
Download atau copy file HTML
git clone [repository-url]
-
Buka file di browser
- Double click file
index.html - Atau buka melalui web server
- Double click file
-
Otomatis redirect
- Tunggu 5 detik untuk melihat animasi lengkap
- Akan otomatis redirect ke Apps Script dashboard
Edit bagian ini di file HTML:
<!-- Meta refresh (line 7) -->
<meta http-equiv="refresh" content="5; url=YOUR_URL">
<!-- JavaScript timeout (line ~290) -->
setTimeout(function() {
window.location.replace('YOUR_URL');
}, 5000); // 5000ms = 5 detikEdit CSS gradient di body:
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}Edit HTML di section main content:
<h1 class="title">MOBAN KBS</h1>
<p class="subtitle">Mempersiapkan Dashboard Anda</p>Ganti SVG path di dalam .logo:
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="YOUR_SVG_PATH"/>
</svg>| Waktu | Event |
|---|---|
| 0s | Logo muncul dengan rotasi |
| 0.5s | Title fade in |
| 0.8s | Subtitle fade in |
| 1.2s | Loading bar muncul |
| 5s | Auto redirect ke dashboard |
Saat ini mengarah ke:
https://script.google.com/macros/s/AKfycbw8CL_9oohi20F-rRBQtiTNes-XDLswDfA4cgrX8LCTQZ3ak2CNEhAc0OQieshSf9TW/exec
Untuk mengubah URL tujuan, edit di 2 tempat:
- Meta refresh tag di
<head> - JavaScript
setTimeoutfunction
- HTML5
- CSS3 (Animations, Gradients, Transforms)
- JavaScript (Vanilla)
- SVG Graphics
- ✅ Chrome/Edge (Latest)
- ✅ Firefox (Latest)
- ✅ Safari (Latest)
- ✅ Mobile Browsers
© 2025 Moban KBS Dashboard. All rights reserved.
Untuk kontribusi atau pertanyaan, silakan hubungi tim development.
Dibuat dengan ❤️ untuk MOBAN KBS Dashboard