Klinikku – Template Klinik/Praktik Dokter

Klinikku adalah template website klinik/praktik dokter dengan booking konsultasi online, profil dokter lengkap dengan jadwal praktik, dan artikel edukasi kesehatan. Yang membedakannya dari template klinik pada umumnya adalah identitas visualnya: palet hijau segar (emerald + deep forest ink) di atas kanvas mint-white dan tipografi editorial Newsreader + Plus Jakarta Sans — bukan klise teal-rumah sakit yang jamak dipakai template kesehatan lain.

Halaman

Fitur

• Bootstrap 5.3.3 (via CDN), tanpa build step
• Navbar standar (fixed-top, collapse di mobile) + top utility bar kontak & booking cepat
• Identitas visual khas: hijau segar (emerald #17A653 + deep forest ink #16261E), tipografi Newsreader (display) + Plus Jakarta Sans (body)
• Booking konsultasi online: kartu poli selectable, pilih dokter & jadwal, ringkasan booking live
• Validasi form real-time + toast notifikasi sukses saat submit
• Halaman Dokter dengan filter per poli dan status praktik (tersedia/besok/libur)
• Badge BPJS / Non-BPJS di tiap profil dokter
• Artikel kesehatan dengan filter kategori, featured post, dan halaman detail lengkap
• FAQ accordion di halaman Layanan
• Statistik animasi (counter) di Beranda & Tentang
• CSS Custom Properties (mudah ganti warna/branding)
• Fully responsive – mobile first
• No jQuery

Warna

--green:      #17A653  /* Emerald segar — warna utama */
--green-deep: #0F7F3F  /* Hover state */
--ink:        #16261E  /* Deep forest — nav, footer, heading */

Untuk ganti warna tema, edit variabel di bagian :root pada assets/css/style.css.

Dependensi (CDN)

Bootstrap        5.3.3
Bootstrap Icons  1.11.3
AOS              2.3.4
Google Fonts     Newsreader (heading), Plus Jakarta Sans (body)

Semua dependensi dimuat via CDN — tidak perlu instalasi npm.

Struktur Folder

klinikku/
├── index.html
├── dokter.html
├── layanan.html
├── booking.html
├── artikel.html
├── artikel-detail.html
├── tentang.html
├── kontak.html
└── assets/
    ├── css/
    │   └── style.css
    ├── js/
    │   └── main.js
    └── images/
        └── screenshot.png

Cara Penggunaan

1. Download folder klinikku/
2. Buka index.html di browser
3. Edit nama klinik, alamat, dan kontak di seluruh file HTML
4. Ganti warna di :root CSS untuk branding klinik sendiri
5. Sesuaikan daftar poli, dokter, dan jadwal praktik sesuai kebutuhan
6. Hubungkan form booking dan kontak ke backend/API sendiri

Target pengguna: Klinik pratama, praktik dokter mandiri, klinik keluarga, dan developer yang ingin membangun aplikasi manajemen klinik atau booking kesehatan dengan identitas visual berbeda dari template kesehatan pasaran.