messenger-point-chet

byGeorge Parker

Buat aplikasi messenger premium bernama POINT CHET, terinspirasi dari aplikasi chat modern seperti WhatsApp tetapi dengan desain, logo, warna, dan identitas visual ORIGINAL. Buat mobile-first, responsive Android/iPhone/tablet/desktop, UI modern, elegan, smooth, cepat, dan profesional. LOGIN & AKUN - Login menggunakan nomor telepon + PIN 6 digit. - Kode negara, default +62. - Show/hide PIN. - Register akun baru. - Nomor telepon, PIN, konfirmasi PIN, nama, username, foto profil, bio. - Lupa PIN. - Session tetap tersimpan. - Logout. - Untuk prototype gunakan localStorage; jangan menyimpan PIN plain text pada backend nyata. HOME Buat navigasi: CHAT | STATUS | KOMUNITAS | PANGGILAN | PROFIL Header: - Logo POINT CHET - Search - Kamera - New Chat - Menu - Foto profil - Badge unread. Desktop menggunakan sidebar + area utama. Mobile menggunakan bottom navigation. CHAT Fitur chat pribadi dan grup: - Kirim teks. - Emoji. - Sticker/GIF UI. - Foto. - Video. - File/dokumen. - Audio. - Lokasi. - Kontak. - Voice message. - Reply. - Forward. - Edit. - Delete. - Copy. - Pin. - Star/favorite. - Reaction emoji. - Mention. - Search pesan. - Typing indicator. - Online/last seen. - Sent/delivered/read. - Unread badge. - Pin/mute/archive/delete chat. Buat chat bubble modern dengan timestamp dan status pesan. VOICE MESSAGE - Hold to record. - Timer. - Waveform. - Pause/resume. - Cancel. - Send. - Audio player. - Progress. - Playback speed. STATUS / STORY - Status teks. - Foto. - Video. - Tambah status. - Story viewer fullscreen. - Progress bar. - Next/previous. - Reply. - Reaction. - Like. - Viewer list. - Status expired otomatis 24 jam. - Privasi status: semua kontak, kontak tertentu, atau pilih orang. PROFIL Tampilkan: - Foto profil. - Nama. - Username. - Nomor telepon. - Bio. - Status online. Fitur: - Edit profil. - Ganti foto. - Edit nama/username/bio. - QR profile. - Share profile. - Media, link & dokumen. - Block/report. KONTAK - Daftar kontak. - Search. - Tambah kontak. - Invite teman. - Kontak online. - Buka profil. - Mulai chat. - Voice call. - Video call. GRUP - Buat grup. - Nama, foto, deskripsi. - Tambah/hapus anggota. - Admin. - Tambah/hapus admin. - Edit info grup. - Group invite link. - QR invite. - Mention anggota. - Pin/mute grup. - Permission anggota. - Approval anggota baru. - Keluar/hapus grup. KOMUNITAS - Buat komunitas. - Nama, foto, deskripsi. - Daftar grup. - Announcement. - Members. - Admin. - Tambah/hapus grup. - Pengaturan komunitas. PANGGILAN Buat UI: - Voice call. - Video call. - Incoming/outgoing call. - Call history. - Missed call. - Mute. - Speaker. - Camera on/off. - Switch camera. - Minimize. - End call. Jika hanya frontend, buat simulasi UI dan jangan mengklaim panggilan benar-benar real-time. NOTIFIKASI Notification center: - Pesan baru. - Mention. - Reaction. - Status. - Grup. - Panggilan. - Sistem. - Badge unread. - Toast notification. SEARCH Global search untuk: - User. - Username. - Chat. - Pesan. - Grup. - Komunitas. - Media. Filter: All / People / Chats / Groups / Messages / Media. SETTINGS Buat pengaturan lengkap: Account - Edit profile. - Nomor. - Username. - PIN. Privacy - Last seen. - Online status. - Profile photo. - Bio. - Status. - Read receipts. - Blocked users. Chat - Wallpaper. - Theme. - Font size. - Enter to send. - Auto download media. Notifications - Message. - Group. - Call. - Sound. - Vibration. Appearance - Light. - Dark. - System. - Accent color. Storage - Storage usage. - Media. - Documents. - Clear cache. Security - App lock UI. - PIN. - 2FA UI. - Active sessions. About - Version. - Terms. - Privacy. - Help. UI PREMIUM Gunakan: - Modern typography. - Rounded corners. - Soft shadow. - Glass effect secukupnya. - Gradient elegan. - Smooth animation. - Micro interaction. - Skeleton loading. - Modal. - Bottom sheet. - Dropdown. - Toast. - Context menu. Jangan membuat desain terlalu ramai. DARK MODE Dark mode harus diterapkan ke seluruh aplikasi: - Background. - Card. - Chat bubble. - Text. - Input. - Icon. - Modal. - Navigation. RESPONSIVE Mobile: - Bottom navigation. - Fullscreen chat. - Touch-friendly buttons. Desktop: - Sidebar. - Chat panel. - Profile/info panel. DATA PROTOTYPE Jika belum ada backend, gunakan localStorage untuk: - Akun. - Session. - Chat. - Pesan. - Kontak. - Grup. - Status. - Settings. - Notifikasi. Isi data dummy agar aplikasi langsung terlihat hidup. KOMPONEN Buat komponen reusable: Avatar, ChatList, ChatBubble, MessageInput, StoryItem, ProfileCard, GroupCard, Modal, BottomSheet, Toast, AudioPlayer, MediaViewer, Notification. KODE Jika menggunakan HTML: - index.html - css/style.css - js/app.js - js/auth.js - js/chat.js - js/status.js - js/profile.js - js/groups.js - js/calls.js - js/settings.js Jika platform hanya mendukung satu file, gabungkan semuanya ke satu HTML dengan CSS dan JavaScript internal. Pastikan semua tombol utama memiliki interaksi nyata dalam prototype. Gunakan icon library open-source seperti Lucide Icons. Jangan menyalin logo atau aset WhatsApp. HASIL AKHIR harus terasa seperti aplikasi messenger sungguhan bernama POINT CHET, dengan UI premium, original, responsif, smooth, dan lengkap.