Prompt buat Aplikasi Web Meeting Calculator
Prompt buat aplikasi web kalkulator biaya meeting yang lengkap dengan fitur real-time tracking, multi-currency support, dan layout siap monetisasi. Cocok untuk productivity tools, corporate websites, atau SaaS applications.
Buatkan Meeting Cost Calculator sebagai single HTML file dengan inline CSS dan JavaScript. Gunakan hanya Vanilla JS tanpa backend atau framework.
REQUIREMENTS UTAMA:
1. Design modern dan profesional dengan gradient background
2. Layout 2 kolom: Calculator (kiri) + Sidebar untuk ads (kanan)
3. Input fields untuk:
- Number of attendees (jumlah peserta)
- Currency selector (USD / IDR)
- Average hourly rate (upah rata-rata per jam)
- Meeting duration (durasi meeting dalam menit)
4. Real-time calculation yang menampilkan:
- Total estimated cost
- Cost per minute
- Cost per second
5. Live Timer dengan fitur:
- Display timer format HH:MM:SS
- Live cost calculation saat timer berjalan
- Tombol Start Meeting, Pause, dan Reset
- Status indicator (Running/Paused/Stopped)
- Real-time update setiap detik
6. Multi-Currency Support:
- USD dengan format $X,XXX.XX
- IDR dengan format Rp X.XXX.XXX
- Konversi rate: 1 USD ≈ 15.800 IDR
- Currency icon berubah otomatis
- Threshold shock message disesuaikan per currency
7. Shock Message yang muncul ketika:
- Cost > $500 untuk USD
- Cost > Rp 8.000.000 untuk IDR
- Dengan animasi pulse
8. Sidebar untuk Ads:
- 2 ad spaces ukuran 300x250px
- Styling placeholder dengan border dashed
- Sticky positioning di desktop
- Move to top di mobile/tablet
- Info boxes di antara ad spaces
9. Mobile Responsive:
- Breakpoint di 1024px dan 600px
- Grid layout berubah jadi single column di mobile
- Button controls stack vertical di layar kecil
- Font size menyesuaikan
10. Visual Effects:
- Smooth transitions pada semua interactions
- Hover effects pada input fields
- Animation pada results update
- Glassmorphism effect untuk containers
- Gradient backgrounds dan accents
DESIGN SPECIFICATIONS:
- Color Scheme: Purple gradient (#667eea to #764ba2)
- Primary Font: Segoe UI atau similar sans-serif
- Border Radius: 12-20px untuk rounded corners
- Spacing: Generous padding dan margins
- Shadow: Soft shadows untuk depth
TECHNICAL NOTES:
- JANGAN gunakan localStorage atau sessionStorage
- Semua state management menggunakan JavaScript variables
- Format currency menggunakan Intl.NumberFormat
- Timer menggunakan setInterval
- Semua kode dalam satu file, tidak ada external dependencies
- Inline CSS dan JavaScript
OUTPUT:
Berikan complete HTML file yang siap digunakan, dengan kode yang clean, terstruktur, dan commented dengan baik untuk maintainability.📈 Ide untuk Pengembangan
Fitur Tambahan yang Bisa Ditambahkan:
- Export hasil kalkulasi ke PDF atau invoice (advance)
- Save meeting history
- Multiple meeting comparison
- Team/Department cost tracking
- Integration dengan calendar apps
- Email report functionality
- Dark mode toggle
- Custom currency rates
- Meeting cost analytics
- ROI calculator
- Productivity metrics
Monetisasi:
- Google AdSense integration
- Affiliate links implementation
- Premium features paywall
- API access untuk developers
- White-label licensing
- Custom branding
Prompt Lainnya
Prompt Buat Pop Up Donasi
Prompt ini untuk buat Pop-up di Post kamu dimana user bisa bantu donasi
Lihat detail →Prompt Buat Database di WordPress
Prompt Buat Database di Wordpress sebagai Custom Page tanpa plugin berat dan Page builder yang ganggu performa web kita
Lihat detail →