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 →