Code Studio: Aplikasi Ride Hailing

https://sites.google.com/view/godrive1/halaman-muka

Bertindaklah sebagai Senior UX Writer dan Conversion Rate Optimization (CRO) Expert. Tugas Anda adalah membuat copy (teks) lengkap untuk Landing Page sebuah aplikasi Ride-Hailing baru bernama "[Masukkan Nama Aplikasi Anda, misal: GoDrive]".

Landing page ini harus persuasif, modern, bersih, dan berfokus pada konversi (mengajak orang mendownload aplikasi). Target audiensnya terbagi dua: Penumpang (Masyarakat umum yang butuh mobilitas) dan Mitra Pengemudi (Orang yang mencari penghasilan).

Gunakan spesifikasi fitur di bawah ini sebagai bahan dasar penulisan:

1. FITUR PENUMPANG (Passenger App):

- Peta Interaktif (GPS) akurat untuk titik jemput/tujuan.

- Estimasi Tarif Real-time di awal sebelum memesan.

- Pilihan Kendaraan (Motor, Mobil Standar, Mobil Besar).

- Pelacakan Pengemudi secara langsung (Live Tracking).

- Multi-pembayaran (Tunai, Kartu Kredit, Dompet Digital).

- Keamanan: Tombol Darurat (SOS) & Bagikan Perjalanan (Share Trip).

- Sistem Rating & Ulasan.

2. FITUR MITRA PENGEMUDI (Driver App):

- Keamanan Akun: Verifikasi Biometrik (Wajah) saat log in.

- Fleksibilitas: Tombol On/Off Status ketersediaan kerja.

- Kemudahan: Navigasi Terintegrasi (Google Maps/Waze).

- Transparansi: Dasbor Manajemen Pendapatan & Withdraw instan.

- Efisiensi: Alokasi Order Otomatis (Sistem pintar pencari order terdekat).

3. TEKNOLOGI PENDUKUNG (Backend & Keamanan):

- Matching Algorithm & Dynamic Pricing (Tarif fleksibel saat jam sibuk/cuaca buruk).

- Geofencing (Area operasional yang terpetakan).

- Fitur Chat Tersamarkan (Privasi nomor telepon aman).

---

STRUKTUR LANDING PAGE YANG HARUS ANDA BUAT:

Hasilkan teks landing page dengan struktur komponen berikut:

1. HERO SECTION (Bagian Atas Utama)

- Headline yang memikat (fokus pada kemudahan perjalanan & peluang cuan).

- Sub-headline pendek.

- Call to Action (CTA): Tombol "Download Aplikasi Penumpang" dan "Daftar Jadi Mitra".

2. VALUE PROPOSITION / KENAPA MEMILIH KAMI

- 3 poin utama yang membedakan aplikasi ini dari kompetitor (fokus pada keamanan, transparansi harga, dan kecepatan).

3. FITUR UNGGULAN PENUMPANG (Gunakan gaya bahasa santai, solutif, dan meyakinkan)

- Tuliskan bagaimana fitur-fitur Penumpang (Peta, Tarif Real-time, Pilihan Kendaraan, Multi-pembayaran, SOS, Share Trip) memberikan kenyamanan dan rasa aman.

4. FITUR UNGGULAN MITRA PENGEMUDI (Gunakan gaya bahasa motivatif, profesional, dan fokus pada keuntungan keuangan)

- Tuliskan bagaimana fitur Driver (Biometrik, Tombol On/Off, Manajemen Pendapatan, Order Otomatis) membantu mereka bekerja lebih cerdas dan aman.

5. TEKNOLOGI & PRIVASI (Bagian Edukasi Singkat)

- Jelaskan dengan bahasa yang mudah dipahami orang awam tentang kehebatan sistem pusat kita: Dynamic Pricing yang adil, dan Chat Tersamarkan yang menjaga nomor HP mereka tetap rahasia.

6. TESTIMONI (Sosial Proof)

- 1 contoh testimoni penumpang yang merasa aman karena fitur SOS/Share Trip.

- 1 contoh testimoni driver yang senang karena pencairan uang (withdraw) cepat dan sistem order otomatis adil.

7. FOOTER & FINAL CTA

- Ajakan terakhir untuk mendownload aplikasi dengan tombol ke Google Play Store dan Apple App Store.

FORMAT OUTPUT:

Berikan output dalam bentuk teks Markdown yang rapi, lengkap dengan panduan visual (misal: [Tempatkan Ilustrasi Peta di Sini]) agar mudah dieksekusi oleh tim desainer UI/UX.

<!DOCTYPE html>

<head>

<title>GoDrive - Solusi Transportasi Instan & Mitra Penghasilan Terpercaya</title>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

colors: {

brand: {

50: '#f0fdf4',

100: '#dcfce7',

500: '#10b981', /* Emerald main green */

600: '#059669',

700: '#047857',

900: '#064e3b',

accent: {

500: '#6366f1', /* Indigo accent */

600: '#4f46e5',

}

</script>

<style>

.glass {

background: rgba(255, 255, 255, 0.85);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

}

.dark-glass {

background: rgba(15, 23, 42, 0.9);

backdrop-filter: blur(12px);

-webkit-backdrop-filter: blur(12px);

}

/* Custom slide animation for interactive map car */

@keyframes drive {

0% { stroke-dashoffset: 200; }

100% { stroke-dashoffset: 0; }

}

.animate-drive {

stroke-dasharray: 8, 4;

animation: drive 10s linear infinite;

}

/* Pulse animations for simulator alert */

.pulse-alert {

animation: pulse-red 1.5s infinite;

}

@keyframes pulse-red {

0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }

70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }

100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }

}

</style>

</head>

</div>

<span class="text-2xl font-extrabold tracking-tight bg-gradient-to-r from-brand-600 to-accent-600 bg-clip-text text-transparent">GoDrive</span>

</div>

<a href="#kenapa-kami" class="text-slate-600 hover:text-brand-600 font-medium transition-colors">Kenapa GoDrive</a>

<a href="#fitur-penumpang" class="text-slate-600 hover:text-brand-600 font-medium transition-colors">Untuk Penumpang</a>

<a href="#fitur-mitra" class="text-slate-600 hover:text-brand-600 font-medium transition-colors">Untuk Mitra</a>

<a href="#teknologi" class="text-slate-600 hover:text-brand-600 font-medium transition-colors">Teknologi & Keamanan</a>

</div>

<a href="#kalkulator-tarif" class="text-sm font-semibold text-slate-700 hover:text-brand-600 px-4 py-2 transition-all">Cek Tarif</a>

<a href="#download" class="text-sm font-semibold bg-brand-600 text-white hover:bg-brand-700 px-5 py-2.5 rounded-xl shadow-lg shadow-brand-500/10 hover:shadow-brand-500/20 transform hover:-translate-y-0.5 transition-all">Download Sekarang</a>

</div>

</button>

</div>

<a href="#kenapa-kami" class="block text-slate-700 hover:text-brand-600 font-medium py-2">Kenapa GoDrive</a>

<a href="#fitur-penumpang" class="block text-slate-700 hover:text-brand-600 font-medium py-2">Untuk Penumpang</a>

<a href="#fitur-mitra" class="block text-slate-700 hover:text-brand-600 font-medium py-2">Untuk Mitra</a>

<a href="#teknologi" class="block text-slate-700 hover:text-brand-600 font-medium py-2">Teknologi & Keamanan</a>

<a href="#kalkulator-tarif" class="text-center font-semibold text-slate-700 py-2">Cek Estimasi Tarif</a>

<a href="#download" class="text-center font-semibold bg-brand-600 text-white py-3 rounded-xl shadow-lg">Download Aplikasi</a>

</div>

</nav>

</span>

<span>Promo Pengguna Baru: Potongan 50% Perjalanan Pertama!</span>

</div>

Satu Ketukan untuk <br class="hidden sm:inline" />

<span class="bg-gradient-to-r from-brand-600 to-accent-600 bg-clip-text text-transparent">Sampai Lebih Cepat</span> atau <span class="bg-gradient-to-r from-accent-600 to-emerald-600 bg-clip-text text-transparent">Cuan Lebih Mantap!</span>

</h1>

GoDrive menghadirkan aplikasi ride-hailing generasi terbaru. Penumpang menikmati perjalanan aman dengan harga jujur di awal, sementara Mitra Pengemudi menikmati penghasilan maksimal tanpa potongan mencekik.

</p>

<span class="block text-xs text-slate-400 font-medium">Download Aplikasi</span>

<span class="block text-base font-bold leading-tight">Mulai Perjalanan</span>

</div>

</a>

<span class="block text-xs text-slate-500 font-medium">Bergabung Bersama Kami</span>

<span class="block text-base font-bold leading-tight text-slate-900 group-hover:text-brand-600">Daftar Jadi Mitra</span>

</div>

</a>

</div>

</div>

</div>

<span class="text-xs text-slate-500">Diulas 15.000+ Pengguna</span>

</div>

<div class="text-xs text-slate-500">Rute Jemputan Tepat Waktu</div>

</div>

</div>

</div>

<span class="text-sm font-bold tracking-tight text-slate-900">GoDrive Mobile</span>

</div>

Penumpang

</button>

Driver

</button>

</div>

</svg>

<span id="map-status-txt">Pilih rute jemputan</span>

</div>

</button>

</div>

<span class="text-[11px] text-slate-800 font-semibold truncate">Jemput: Sudirman Trade Center</span>

</div>

<span class="text-[11px] text-slate-800 font-semibold truncate">Tujuan: Bandara Soekarno-Hatta</span>

</div>

<span class="text-[9px] font-bold text-slate-800">Motor</span>

</button>

<span class="text-[9px] font-bold text-slate-800">Mobil</span>

</button>

<span class="text-[9px] font-bold text-slate-800">Mobil Lg</span>

</button>

</div>

<span>Pesan GoDrive Sekarang</span>

</button>

</div>

<span class="text-[10px] tracking-wide text-slate-400 font-bold uppercase">Sistem Keamanan Aktif</span>

</div>

<span class="text-[9px] text-slate-300">Biometrik Wajah OK</span>

</div>

<span class="text-xs text-slate-400">Status Pengemudi</span>

<span id="driver-status-lbl" class="text-sm font-bold text-slate-400">ISTIRAHAT</span>

</div>

</button>

</div>

<span class="text-[9px] text-slate-400 block">Total Pendapatan</span>

</div>

<span class="text-[9px] text-slate-400 block">Performa Harian</span>

</div>

<span class="text-[10px] bg-brand-600 text-white font-extrabold px-2 py-0.5 rounded-full uppercase tracking-wider">Orderan Masuk!</span>

</div>

<p class="text-[10px] text-slate-300">Penjemputan terdekat: <br/><strong class="text-white">Mall Grand Indonesia (600m)</strong></p>

<button onclick="rejectIncomingOrder()" class="flex-1 bg-slate-800 hover:bg-slate-700 text-white font-bold text-[10px] py-1.5 rounded-lg">Abaikan</button>

<button onclick="acceptIncomingOrder()" class="flex-1 bg-brand-500 hover:bg-brand-600 text-slate-950 font-bold text-[10px] py-1.5 rounded-lg">Terima Orderan</button>

</div>

<p class="text-[9px] text-center text-slate-500">Nyalakan status untuk memulai alokasi order otomatis dari sistem pusat kami.</p>

</div>

</div>

</header>

<h2 class="text-sm font-extrabold text-brand-600 uppercase tracking-widest">Kenapa Memilih GoDrive</h2>

Kami Menghubungkan Pengguna & Pengemudi Tanpa Batas

</p>

Teknologi handal kami dirancang khusus demi kenyamanan perjalanan penumpang serta kemakmuran mitra pengemudi.

</p>

</div>

</div>

<h3 class="text-xl font-bold text-slate-900 mb-3">Keamanan Standar Militer</h3>

Dilengkapi dengan tombol darurat **SOS**, fitur **Bagikan Perjalanan** langsung kepada kerabat, serta **Verifikasi Biometrik Wajah** berkala bagi mitra demi keamanan berlapis.

</p>

</div>

</div>

<h3 class="text-xl font-bold text-slate-900 mb-3">Estimasi Tarif Transparan</h3>

Tarif perjalanan transparan ditampilkan langsung di awal sebelum Anda memesan. Tidak ada biaya siluman, komisi adil bagi mitra, serta pencairan pendapatan instan.

</p>

</div>

</div>

<h3 class="text-xl font-bold text-slate-900 mb-3">Pencocokan Kilat Cerdas</h3>

Dengan bantuan *Matching Algorithm* termutakhir, sistem kami langsung mencocokkan Anda dengan mitra terdekat dalam hitungan detik secara adil dan otomatis.

</p>

</div>

</section>

<span class="text-sm font-bold bg-brand-100 text-brand-700 px-3 py-1 rounded-full uppercase tracking-wider">Passenger App</span>

Perjalanan Santai & Nyaman dalam Genggaman Anda

</h2>

Didesain untuk memberikan kepuasan mobilitas maksimal bagi Anda. Cukup masukkan tujuan, tentukan kendaraan, dan nikmati perjalanannya.

</p>

</div>

</div>

<div>

<h4 class="font-bold text-slate-900">Peta GPS Interaktif Akurat</h4>

<p class="text-slate-500 text-sm">Menentukan titik jemputan hingga gang sempit sekalipun dengan akurasi presisi tinggi.</p>

</div>

</div>

<div>

<h4 class="font-bold text-slate-900">Kemudahan Multi-Pembayaran</h4>

<p class="text-slate-500 text-sm">Bayar sesuka hati Anda dengan Tunai, Kartu Kredit/Debit, atau Dompet Digital favorit Anda secara instan.</p>

</div>

</div>

<div>

<h4 class="font-bold text-slate-900">Sistem Rating & Ulasan Transparan</h4>

<p class="text-slate-500 text-sm">Masukan Anda sangat berharga. Bintang Anda menjaga standar kualitas layanan komunitas kami.</p>

</div>

<h3 class="text-2xl font-bold text-slate-900">Simulasi Estimasi Tarif Real-time</h3>

<p class="text-slate-500 text-sm">Masukkan jarak perjalanan Anda dan saksikan transparansi sistem dynamic pricing kami bekerja.</p>

</div>

<div>

<label class="block text-xs font-bold text-slate-700 uppercase tracking-wider mb-2">Simulasi Jarak Tempuh (KM)</label>

</div>

<span class="text-xs font-bold">Motor</span>

</button>

<span class="text-xs font-bold">Mobil</span>

</button>

<span class="text-xs font-bold">Mobil Besar</span>

</button>

</div>

</div>

<div>

<h5 class="text-xs font-bold text-slate-900">Aktifkan Jam Sibuk / Hujan</h5>

<p class="text-[10px] text-slate-500">Uji kenaikan Dynamic Pricing</p>

</div>

</button>

</div>

<span>Tarif Dasar</span>

</div>

<span>Faktor Lonjakan Permintaan</span>

<span id="surge-multiplier-lbl">1.0x (Normal)</span>

</div>

<span class="text-sm font-bold">Total Estimasi Tarif</span>

</div>

</section>

<span class="text-[10px] font-extrabold tracking-widest text-brand-400 uppercase bg-slate-900 border border-slate-800 px-3 py-1 rounded-full inline-block mb-3">Kalkulator Cuan Mitra</span>

<h3 class="text-2xl font-bold">Berapa Penghasilan Anda?</h3>

<p class="text-slate-400 text-sm mt-1">Hitung potensi pendapatan kotor harian & bulanan Anda bersama sistem pembagian hasil terbaik kami.</p>

</div>

<div>

<label class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Simulasi Jumlah Trip per Hari</label>

</div>

<div>

<label class="block text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">Kategori Armada Kendaraan</label>

<span>Motor</span>

</button>

<span>Mobil</span>

</button>

</div>

<span class="text-xs text-slate-400">Rerata per Trip</span>

</div>

<div>

<span class="text-xs text-slate-400 block">Estimasi Kotor / Hari</span>

</div>

<span class="text-xs text-slate-400 block">Estimasi Kotor / Bulan</span>

</div>

<p class="text-[10px] text-center text-slate-500 leading-relaxed">*Estimasi di atas belum termasuk potensi bonus performa dan lonjakan harga wilayah operasional khusus (Geofencing).</p>

</div>

<span class="text-sm font-bold bg-indigo-100 text-indigo-700 px-3 py-1 rounded-full uppercase tracking-wider">Driver App</span>

Atur Jam Kerja Sendiri, Nikmati Transparansi Cuan Instan!

</h2>

GoDrive memperlakukan mitra pengemudi sebagai aset terpenting. Dengan aplikasi yang intuitif, rasakan kemudahan mengumpulkan pundi-pundi rupiah di sela waktu luang Anda.

</p>

</div>

</div>

<div>

<h4 class="font-bold text-slate-900">Keamanan Verifikasi Biometrik</h4>

<p class="text-slate-500 text-sm">Verifikasi wajah berkala memastikan akun Anda terlindungi penuh dari upaya penyalahgunaan oleh pihak lain.</p>

</div>

</div>

<div>

<h4 class="font-bold text-slate-900">Tombol Status On/Off Fleksibel</h4>

<p class="text-slate-500 text-sm">Ingin istirahat sejenak atau menjemput anak sekolah? Cukup matikan status dalam sekali sentuhan.</p>

</div>

</div>

<div>

<h4 class="font-bold text-slate-900">Dasbor Pendapatan & Withdraw Instan</h4>

<p class="text-slate-500 text-sm">Pantau total performa harian Anda dan cairkan uang kotor hasil kerja keras langsung ke rekening bank detik itu juga.</p>

</div>

</section>

<h2 class="text-sm font-extrabold text-accent-500 uppercase tracking-widest">Sistem Pusat & Privasi</h2>

<p class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">Teknologi Mutakhir Penjaga Keamanan Anda</p>

<p class="text-lg text-slate-600 font-light">Kami mengadopsi infrastruktur canggih guna menyajikan kecocokan instan tanpa mengorbankan keamanan data privasi pengguna.</p>

</div>

<h3 class="text-lg font-bold text-slate-900">Sistem Algoritma Pencocokan (Matching Algorithm)</h3>

</div>

Mesin pencocok otomatis kami melacak posisi geografis driver terdekat dalam milidetik guna menghemat konsumsi bahan bakar mitra pengemudi serta memotong waktu tunggu penumpang secara drastis.

</p>

</div>

<h3 class="text-lg font-bold text-slate-900">Geofencing & Pembatasan Area Khusus</h3>

</div>

Membatasi secara digital wilayah operasional guna menyeimbangkan permintaan pasar serta menjaga keselamatan armada di area rawan kerusuhan atau bencana alam.

</p>

</div>

<h3 class="text-lg font-bold text-slate-900">Fitur Chat Tersamarkan (Masked Communications)</h3>

</div>

Komunikasi telepon dan chat langsung dilakukan secara internal di dalam sistem aplikasi, mengaburkan nomor pribadi demi menjunjung tinggi privasi & keamanan bersama.

</p>

</div>

</div>

<div>

<h4 class="text-xs font-bold text-white">Privasi Anda Terjaga</h4>

<p class="text-[9px] text-slate-400">Nomor Telepon Palsu Digunakan: <span class="text-amber-400 font-mono">+62-812-****-1234</span></p>

</div>

<span class="text-[9px] bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full font-bold uppercase">Tersamarkan</span>

</div>

<p class="text-xs text-slate-200">Halo, saya pengemudi GoDrive Anda. Saya sudah dekat titik jemput ya.</p>

</div>

<p class="text-xs text-slate-900 font-medium">Baik pak, saya pakai kaos biru, nunggu di lobi utama depan pos satpam.</p>

</div>

</div>

</button>

</div>

</section>

<h2 class="text-sm font-extrabold text-brand-600 uppercase tracking-widest">Testimoni Pengguna</h2>

<p class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">Kisah Nyata Dari Komunitas Kami</p>

</div>

</div>

"Sebagai pekerja kantoran yang sering pulang larut malam, fitur **SOS & Bagikan Perjalanan** GoDrive adalah penyelamat. Orang tua saya bisa melacak perjalanan saya secara real-time dari rumah. Sangat menenangkan hati!"

</p>

<div>

<h4 class="font-bold text-slate-900 text-sm">Arnetta S.</h4>

<span class="text-xs text-slate-500">Karyawan Swasta, Jakarta</span>

</div>

</div>

"Sistem alokasi order otomatis milik GoDrive sangat adil. Saya tidak perlu berebut dengan driver lain saat di jalan. Selain itu, transparansi pendapatan di dasbor sangat jelas dan penarikan withdraw instan tanpa kendala!"

</p>

<div>

<h4 class="font-bold text-slate-900 text-sm">Pak Bambang K.</h4>

<span class="text-xs text-slate-500">Mitra Pengemudi Mobil, Surabaya</span>

</div>

</section>

Unduh GoDrive Sekarang & Rasakan Bedanya!

</h2>

Tersedia gratis untuk Android dan iOS. Dapatkan perjalanan berkelas tanpa kompromi atau mulailah karier menguntungkan Anda sebagai Mitra hari ini!

</p>

<span class="block text-base font-bold leading-none mt-0.5">Google Play</span>

</div>

</button>

<span class="block text-[10px] text-slate-400 font-medium uppercase tracking-wider">Download on the</span>

<span class="block text-base font-bold leading-none mt-0.5">App Store</span>

</div>

</button>

</div>

</div>

</section>

</div>

<span class="text-xl font-extrabold text-white">GoDrive</span>

</div>

Platform mobilitas & ride-hailing modern berkomitmen mengantarkan kebahagiaan aman sampai tujuan serta menghidupkan kemandirian finansial bagi mitra pengemudi.

</p>

</div>

<div>

<h5 class="text-sm font-bold text-white mb-4">Untuk Penumpang</h5>

<li><a href="#fitur-penumpang" class="hover:text-brand-500 transition-colors">Aplikasi Penumpang</a></li>

<li><a href="#kalkulator-tarif" class="hover:text-brand-500 transition-colors">Cek Estimasi Tarif</a></li>

<li><a href="#teknologi" class="hover:text-brand-500 transition-colors">Standar Keamanan SOS</a></li>

<li><a href="#download" class="hover:text-brand-500 transition-colors">Panduan Pengguna Baru</a></li>

</ul>

</div>

<div>

<h5 class="text-sm font-bold text-white mb-4">Untuk Mitra Pengemudi</h5>

<li><a href="#fitur-mitra" class="hover:text-brand-500 transition-colors">Gabung Mitra Pengemudi</a></li>

<li><a href="#fitur-mitra" class="hover:text-brand-500 transition-colors">Bagi Hasil & Komisi</a></li>

<li><a href="#fitur-mitra" class="hover:text-brand-500 transition-colors">Pusat Bantuan Mitra</a></li>

<li><a href="#fitur-mitra" class="hover:text-brand-500 transition-colors">Biometrik & Verifikasi</a></li>

</ul>

</div>

<div>

<h5 class="text-sm font-bold text-white mb-4">Perusahaan</h5>

<li><a href="#" class="hover:text-brand-500 transition-colors">Tentang Kami</a></li>

<li><a href="#" class="hover:text-brand-500 transition-colors">Kebijakan Privasi</a></li>

<li><a href="#" class="hover:text-brand-500 transition-colors">Syarat & Ketentuan</a></li>

<li><a href="#" class="hover:text-brand-500 transition-colors">Hubungi Kami</a></li>

</ul>

</div>

</div>

</footer>

// Load icons on DOM creation

document.addEventListener("DOMContentLoaded", function() {

lucide.createIcons();

// Start the interactive calculation

calculateRealtimeFare();

calculateDriverEarnings();

});

// Toggle mobile menu panel

const mobileMenuBtn = document.getElementById('mobile-menu-btn');

const mobileMenu = document.getElementById('mobile-menu');

mobileMenuBtn.addEventListener('click', () => {

mobileMenu.classList.toggle('hidden');

});

/* --- STATE VARIABLES --- */

let simMode = 'passenger'; // 'passenger' | 'driver'

let simSelectedVehicle = 'motor'; // 'motor' | 'car' | 'car-lg'

let simBasePrice = 15000;

let isDriverOnline = false;

let driverInterval = null;

// Peak Surge state

let isSurgeActive = false;

let currentCalcVehicle = 'motor';

// Driver Earnings calculator state

let currentDrvVehicle = 'motor';

/* --- SIMULATOR FUNCTIONALITIES --- */

function switchSimulatorMode(mode) {

simMode = mode;

const passengerTab = document.getElementById('sim-passenger-tab');

const driverTab = document.getElementById('sim-driver-tab');

const passengerView = document.getElementById('sim-passenger-view');

const driverView = document.getElementById('sim-driver-view');

if (mode === 'passenger') {

passengerTab.className = "px-2.5 py-1 text-[10px] font-bold rounded-full transition-all bg-white text-slate-900 shadow-sm";

driverTab.className = "px-2.5 py-1 text-[10px] font-bold rounded-full transition-all text-slate-500 hover:text-slate-900";

passengerView.classList.remove('translate-x-full');

passengerView.classList.add('translate-x-0');

driverView.classList.remove('translate-x-0');

driverView.classList.add('translate-x-full');

} else {

driverTab.className = "px-2.5 py-1 text-[10px] font-bold rounded-full transition-all bg-white text-slate-900 shadow-sm";

passengerTab.className = "px-2.5 py-1 text-[10px] font-bold rounded-full transition-all text-slate-500 hover:text-slate-900";

passengerView.classList.remove('translate-x-0');

passengerView.classList.add('translate-x-full');

driverView.classList.remove('translate-x-full');

driverView.classList.add('translate-x-0');

}

// Selection of vehicle in simulator

function selectSimulatorVehicle(type, price) {

simSelectedVehicle = type;

simBasePrice = price;

// Reset borders

['v-motor', 'v-car', 'v-car-lg'].forEach(id => {

document.getElementById(id).className = "p-1.5 border border-slate-200 rounded-xl flex flex-col items-center justify-center transition-all";

document.getElementById(id).querySelector('span:last-child').className = "text-[9px] font-bold text-slate-600";

});

// Set active borders

const activeBtn = document.getElementById('v-' + type);

activeBtn.className = "p-1.5 border-2 border-brand-500 bg-brand-50/50 rounded-xl flex flex-col items-center justify-center transition-all";

activeBtn.querySelector('span:last-child').className = "text-[9px] font-bold text-brand-700";

}

// Simulate booking progression

function startBookingSimulation() {

const statusTxt = document.getElementById('map-status-txt');

const carEl = document.getElementById('moving-car');

const btnBook = document.getElementById('btn-book-simulator');

btnBook.disabled = true;

btnBook.innerHTML = "Mencari Driver Terdekat...";

statusTxt.innerHTML = "Menghubungkan ke Matching Algoritma...";

// Step 1: Matching simulation

setTimeout(() => {

statusTxt.innerHTML = "Driver terdekat ditemukan: Andi (200m)";

btnBook.innerHTML = "Driver Sedang Menjemput...";

// Step 2: Car movement simulation

carEl.setAttribute('cx', '60');

carEl.setAttribute('cy', '120');

let progress = 0;

const path = document.getElementById('route-path');

const pathLength = path.getTotalLength();

const driveInterval = setInterval(() => {

progress += 4;

if (progress > pathLength) {

clearInterval(driveInterval);

statusTxt.innerHTML = "Driver telah sampai di lokasi!";

btnBook.disabled = false;

btnBook.innerHTML = "Pesan GoDrive Lagi";

// Push automated welcome message in Masked Chat Box simulation

appendChatMsg("Andi (Driver)", "Halo, saya sudah sampai di lobi depan Sudirman Trade Center ya. Pakai kaos biru.");

} else {

// Move simulated car along the SVG path

const point = path.getPointAtLength(progress);

carEl.setAttribute('cx', point.x);

carEl.setAttribute('cy', point.y);

}

}, 100);

}, 2000);

}

// Driver Online On/Off Toggle simulation

function toggleDriverOnline() {

const btn = document.getElementById('driver-toggle-btn');

const dot = document.getElementById('driver-toggle-dot');

const icon = document.getElementById('driver-toggle-icon');

const statusLbl = document.getElementById('driver-status-lbl');

isDriverOnline = !isDriverOnline;

if (isDriverOnline) {

// Turn Online

btn.className = "w-14 h-8 bg-brand-500 rounded-full p-1 transition-all duration-300 focus:outline-none relative";

dot.className = "w-6 h-6 bg-white rounded-full transition-all duration-300 transform translate-x-6 flex items-center justify-center";

icon.className = "w-3.5 h-3.5 text-brand-600";

statusLbl.className = "text-sm font-bold text-brand-400";

statusLbl.innerHTML = "ONLINE & SIAP";

// Trigger simulated incoming order after a few seconds

driverInterval = setTimeout(() => {

document.getElementById('incoming-order-panel').classList.remove('hidden');

}, 3000);

} else {

// Turn Offline

btn.className = "w-14 h-8 bg-slate-800 rounded-full p-1 transition-all duration-300 focus:outline-none relative";

dot.className = "w-6 h-6 bg-slate-500 rounded-full transition-all duration-300 transform translate-x-0 flex items-center justify-center";

icon.className = "w-3.5 h-3.5 text-white";

statusLbl.className = "text-sm font-bold text-slate-400";

statusLbl.innerHTML = "ISTIRAHAT";

document.getElementById('incoming-order-panel').classList.add('hidden');

clearTimeout(driverInterval);

}

function acceptIncomingOrder() {

document.getElementById('incoming-order-panel').classList.add('hidden');

const statusLbl = document.getElementById('driver-status-lbl');

statusLbl.innerHTML = "MENJALANKAN ORDER";

statusLbl.className = "text-sm font-bold text-amber-500 animate-pulse";

// Add dynamic earnings

setTimeout(() => {

document.getElementById('drv-earnings').innerHTML = "Rp 45.000";

document.getElementById('drv-performance').innerHTML = "100%";

statusLbl.innerHTML = "ORDER SELESAI!";

statusLbl.className = "text-sm font-bold text-brand-400";

}, 5000);

}

function rejectIncomingOrder() {

document.getElementById('incoming-order-panel').classList.add('hidden');

}

// Trigger Emergency SOS simulation alert

function triggerEmergencySOS() {

// Never use window.alert as per instructions. Build modern visual modal.

const body = document.querySelector('body');

const sosModal = document.createElement('div');

sosModal.className = "fixed inset-0 bg-slate-900/90 z-[100] flex items-center justify-center p-4 animate-fade-in";

sosModal.id = "sos-modal-overlay";

sosModal.innerHTML = `

</div>

<h4 class="text-xl font-black text-red-500 tracking-wider">SISTEM SOS AKTIF</h4>

<p class="text-xs text-slate-400">Menghubungkan posisi GPS real-time Anda langsung ke Call Center GoDrive & 3 kontak darurat Anda.</p>

</div>

<span class="text-[9px] text-slate-500 uppercase font-bold tracking-wider">Pesan Darurat Terkirim</span>

<p class="text-[10px] text-slate-300 font-mono mt-1">"Bantuan Darurat! Saya sedang berkendara. Posisi GPS: -6.1751, 106.8272"</p>

</div>

<button onclick="closeSOSModal()" class="w-full bg-slate-800 text-slate-300 py-3 rounded-xl text-xs font-bold hover:bg-slate-700 transition-colors">Tutup Simulasi</button>

</div>

body.appendChild(sosModal);

lucide.createIcons();

}

function closeSOSModal() {

const modal = document.getElementById('sos-modal-overlay');

if (modal) modal.remove();

}

/* --- INTERACTIVE FARE ESTIMATOR --- */

function selectCalcVehicle(type) {

currentCalcVehicle = type;

['calc-v-motor', 'calc-v-car', 'calc-v-car-lg'].forEach(id => {

document.getElementById(id).className = "py-3 border border-slate-200 rounded-xl flex flex-col items-center justify-center transition-all";

document.getElementById(id).querySelector('i').className = "w-6 h-6 text-slate-600 mb-1";

});

const activeBtn = document.getElementById('calc-v-' + type);

activeBtn.className = "py-3 border-2 border-brand-500 bg-brand-50/50 rounded-xl flex flex-col items-center justify-center transition-all";

activeBtn.querySelector('i').className = "w-6 h-6 text-brand-600 mb-1";

calculateRealtimeFare();

}

function toggleSurgePricing() {

isSurgeActive = !isSurgeActive;

const dot = document.getElementById('surge-dot');

const toggle = document.getElementById('surge-toggle');

if (isSurgeActive) {

toggle.className = "w-11 h-6 bg-amber-500 rounded-full p-0.5 transition-all duration-300 relative";

dot.className = "w-5 h-5 bg-white rounded-full shadow transform translate-x-5 transition-all";

} else {

toggle.className = "w-11 h-6 bg-slate-200 rounded-full p-0.5 transition-all duration-300 relative";

dot.className = "w-5 h-5 bg-white rounded-full shadow transform translate-x-0 transition-all";

}

calculateRealtimeFare();

}

function calculateRealtimeFare() {

const distance = parseInt(document.getElementById('fare-distance').value);

document.getElementById('distance-lbl').innerHTML = distance;

let baseRate = 8000;

let perKmRate = 2000;

if (currentCalcVehicle === 'car') {

baseRate = 12000;

perKmRate = 4500;

} else if (currentCalcVehicle === 'car-lg') {

baseRate = 20000;

perKmRate = 6500;

}

let calculatedBase = baseRate + (distance * perKmRate);

let multiplier = isSurgeActive ? 1.6 : 1.0;

let total = calculatedBase * multiplier;

document.getElementById('base-fare-lbl').innerHTML = "Rp " + calculatedBase.toLocaleString('id-ID');

document.getElementById('surge-multiplier-lbl').innerHTML = multiplier.toFixed(1) + "x " + (isSurgeActive ? "(Sibuk)" : "(Normal)");

document.getElementById('total-fare-lbl').innerHTML = "Rp " + total.toLocaleString('id-ID');

}

/* --- DRIVER EARNINGS CALCULATOR --- */

function selectDrvVehicle(type) {

currentDrvVehicle = type;

const motorBtn = document.getElementById('calc-drv-motor');

const carBtn = document.getElementById('calc-drv-car');

if (type === 'motor') {

motorBtn.className = "py-3 bg-brand-500 text-slate-950 rounded-xl flex items-center justify-center space-x-2 font-bold transition-all";

carBtn.className = "py-3 bg-slate-900 text-slate-300 border border-slate-800 rounded-xl flex items-center justify-center space-x-2 font-bold transition-all";

} else {

carBtn.className = "py-3 bg-brand-500 text-slate-950 rounded-xl flex items-center justify-center space-x-2 font-bold transition-all";

motorBtn.className = "py-3 bg-slate-900 text-slate-300 border border-slate-800 rounded-xl flex items-center justify-center space-x-2 font-bold transition-all";

}

calculateDriverEarnings();

}

function calculateDriverEarnings() {

const trips = parseInt(document.getElementById('drv-trips').value);

document.getElementById('drv-trips-lbl').innerHTML = trips;

let avgFare = currentDrvVehicle === 'motor' ? 14000 : 42000;

let dailyGross = trips * avgFare;

let monthlyGross = dailyGross * 26; // 26 working days simulation

document.getElementById('avg-fare-drv').innerHTML = "Rp " + avgFare.toLocaleString('id-ID');

document.getElementById('daily-earning-lbl').innerHTML = "Rp " + dailyGross.toLocaleString('id-ID');

document.getElementById('monthly-earning-lbl').innerHTML = "Rp " + monthlyGross.toLocaleString('id-ID');

}

/* --- CHATTERS SIMULATED PRIVACY INTERACTION --- */

function sendSimulatedChat() {

const input = document.getElementById('chat-input');

const messageText = input.value.trim();

if (messageText === "") return;

// Append user text

appendChatMsg("Anda (Penumpang)", messageText, true);

input.value = "";

// Simulate Driver response after 2 seconds

setTimeout(() => {

appendChatMsg("Andi (Driver)", "Siap pak, saya jalan ke arah lobi depan pos satpam sekarang.", false);

}, 1800);

}

function appendChatMsg(sender, text, isUser = false) {

const chatBox = document.getElementById('sim-chat-box');

const time = new Date().toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });

const messageWrapper = document.createElement('div');

if (isUser) {

messageWrapper.className = "flex items-end justify-end space-x-2 animate-fade-in";

messageWrapper.innerHTML = `

</div>

} else {

messageWrapper.className = "flex items-start space-x-2 animate-fade-in";

messageWrapper.innerHTML = `

</div>

}

chatBox.appendChild(messageWrapper);

chatBox.scrollTop = chatBox.scrollHeight;

}

/* --- DOWNLOAD SIMULATOR TOAST --- */

function simulateAppDownload(storeName) {

const toast = document.getElementById('toast-message');

toast.classList.remove('hidden');

toast.innerHTML = `Simulasi Mengunduh dari ${storeName}. Mulai perjalanan nyaman bersama GoDrive!`;

setTimeout(() => {

toast.classList.add('hidden');

}, 4000);

}

</script>

</body>

</html>

Code Studio

Minggu, 24 Mei 2026

Aplikasi Ride Hailing

Tidak ada komentar:

Posting Komentar

Aplikasi Ride Hailing

Laporkan Penyalahgunaan