MINI
C:
/
siak
/
app
/
dukcapil
/
Upload File:
files >> C:/siak/app/dukcapil/index.html
<!doctype html> <html lang="id"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="theme-color" content="#173ee8"> <meta name="description" content="Portal modern Dinas Kependudukan dan Pencatatan Sipil Provinsi Kalimantan Utara"> <title>Dukcapil Kaltara — Portal Pelayanan Kependudukan</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="bg-orb orb-1"></div> <div class="bg-orb orb-2"></div> <header class="topbar"> <a class="brand" href="#"> <img src="assets/logo-dukcapil.png" alt="Logo Dukcapil"> <span> <b>Dukcapil Kaltara</b> <small>Dinas Kependudukan & Pencatatan Sipil</small> </span> </a> <nav id="nav"> <a class="active" href="#beranda">Beranda</a> <div class="nav-dropdown"> <button class="nav-link" type="button">Profil <span>⌄</span></button> <div class="dropdown-menu"> <a href="https://disdukcapil.kaltaraprov.go.id/berita/profil/profil-disdukcapil" target="_blank" rel="noopener"> <b>Profil DISDUKCAPIL</b><small>Informasi tentang Dinas Dukcapil Kaltara</small> </a> <a href="https://disdukcapil.kaltaraprov.go.id/berita/profil/visi-misi-tugas-dan-fungsi" target="_blank" rel="noopener"> <b>Visi, Misi, Tugas dan Fungsi</b><small>Landasan dan tugas pelayanan</small> </a> <a href="https://disdukcapil.kaltaraprov.go.id/berita/profil/sambutan" target="_blank" rel="noopener"> <b>Sambutan</b><small>Sambutan pimpinan</small> </a> </div> </div> <div class="nav-dropdown"> <button class="nav-link" type="button">Data <span>⌄</span></button> <div class="dropdown-menu"> <a href="#data"><b>Data Kependudukan</b><small>Informasi data penduduk</small></a> <a href="#data"><b>Data Agregat</b><small>Ringkasan statistik kependudukan</small></a> <a href="#data"><b>Data Kabupaten/Kota</b><small>Data wilayah Kalimantan Utara</small></a> <a href="#data"><b>Dashboard Statistik</b><small>Visualisasi data terkini</small></a> </div> </div> <div class="nav-dropdown"> <button class="nav-link" type="button">Berita <span>⌄</span></button> <div class="dropdown-menu"> <a href="#informasi"><b>Berita Terkini</b><small>Informasi terbaru Dukcapil Kaltara</small></a> <a href="#informasi"><b>Pengumuman</b><small>Pengumuman pelayanan publik</small></a> <a href="#informasi"><b>Kegiatan</b><small>Kegiatan dan agenda dinas</small></a> <a href="#informasi"><b>Artikel</b><small>Artikel kependudukan</small></a> </div> </div> <a href="https://disdukcapil.kaltaraprov.go.id/download/kategori/produk-hukum" target="_blank" rel="noopener">Produk Hukum</a> <div class="nav-dropdown"> <button class="nav-link" type="button">Layanan Online <span>⌄</span></button> <div class="dropdown-menu"> <a href="#layanan"><b>Portal Data Kependudukan</b><small>Dashboard data terintegrasi</small></a> <a href="#layanan"><b>Administrasi Kependudukan</b><small>KTP-el, KK, KIA dan dokumen lainnya</small></a> <a href="#layanan"><b>Pencatatan Sipil</b><small>Akta dan layanan pencatatan sipil</small></a> <a href="#layanan"><b>Informasi Pelayanan</b><small>Jadwal dan kanal pelayanan</small></a> <a href="#layanan"><b>Pelayanan Digital</b><small>Akses layanan secara online</small></a> </div> </div> <div class="nav-dropdown"> <button class="nav-link" type="button">Syarat Pelayanan <span>⌄</span></button> <div class="dropdown-menu"> <a href="#syarat"><b>Kartu Keluarga</b><small>Persyaratan penerbitan/perubahan KK</small></a> <a href="#syarat"><b>KTP-el</b><small>Persyaratan KTP elektronik</small></a> <a href="#syarat"><b>KIA</b><small>Persyaratan Kartu Identitas Anak</small></a> <a href="#syarat"><b>Akta Kelahiran</b><small>Persyaratan pencatatan kelahiran</small></a> <a href="#syarat"><b>Akta Kematian</b><small>Persyaratan pencatatan kematian</small></a> <a href="#syarat"><b>Akta Perkawinan</b><small>Informasi persyaratan</small></a> <a href="#syarat"><b>Akta Perceraian</b><small>Informasi persyaratan</small></a> <a href="#syarat"><b>Perubahan Data</b><small>Persyaratan perubahan elemen data</small></a> <a href="#syarat"><b>Dokumen Kependudukan Lainnya</b><small>Panduan layanan lainnya</small></a> </div> </div> <div class="nav-dropdown"> <button class="nav-link" type="button">Galeri <span>⌄</span></button> <div class="dropdown-menu"> <a href="#galeri"><b>Foto</b><small>Dokumentasi kegiatan</small></a> <a href="#galeri"><b>Video</b><small>Video informasi pelayanan</small></a> <a href="#galeri"><b>Dokumentasi</b><small>Arsip visual Dukcapil</small></a> <a href="#galeri"><b>Infografis</b><small>Informasi kependudukan visual</small></a> </div> </div> </nav> <button class="login-top" data-open-login>Masuk Portal <span>↗</span></button> <button class="menu-btn" id="menuBtn" aria-label="Buka menu">☰</button> </header> <main> <section class="hero" id="beranda"> <div class="hero-copy"> <div class="eyebrow"><span></span> PORTAL RESMI DUKCAPIL KALTARA</div> <h1>Pelayanan Administrasi<br><strong>Kependudukan</strong> Lebih Mudah.</h1> <p class="lead"> Akses informasi, layanan, dan data kependudukan Kalimantan Utara melalui satu portal digital yang cepat, aman, dan modern. </p> <div class="hero-actions"> <button class="primary" data-open-login>Masuk ke Portal <span>→</span></button> <a class="secondary" href="#layanan">Lihat Layanan</a> </div> <div class="trust-row"> <div><span class="trust-icon">✓</span><div><b>Aman</b><small>Data terlindungi</small></div></div> <div><span class="trust-icon">⌁</span><div><b>Terintegrasi</b><small>Lintas layanan</small></div></div> <div><span class="trust-icon">◷</span><div><b>Real-time</b><small>Informasi terkini</small></div></div> </div> </div> <div class="hero-visual"> <div class="visual-glow"></div> <div class="building-wrap"> <img src="assets/gedung-dukcapil.jpg" alt="Ilustrasi gedung Dukcapil" class="building"> </div> <div class="floating-card card-status"> <span class="dot"></span> <div><b>Sistem Online</b><small>Semua layanan normal</small></div> </div> <div class="floating-card card-data"> <span class="mini-chart">↗</span> <div><b>Data Terintegrasi</b><small>Kaltara Digital</small></div> </div> </div> </section> <section class="quick" id="layanan"> <div class="section-heading"> <div> <span class="eyebrow">LAYANAN DIGITAL</span> <h2>Apa yang Anda butuhkan?</h2> </div> <p>Pilih layanan yang ingin Anda akses. Tampilan dirancang responsif untuk desktop maupun mobile.</p> </div> <div class="service-grid"> <article class="service-card featured"> <div class="service-icon">▣</div> <div><span class="tag">POPULER</span><h3>Portal Data Kependudukan</h3><p>Akses dashboard dan informasi kependudukan secara terintegrasi.</p></div> <button data-open-login>Masuk <span>→</span></button> </article> <article class="service-card"> <div class="service-icon">◈</div> <h3>Administrasi Kependudukan</h3> <p>Informasi KTP-el, KK, KIA, akta pencatatan sipil dan dokumen lainnya.</p> <a href="#informasi">Selengkapnya →</a> </article> <article class="service-card"> <div class="service-icon">◎</div> <h3>Informasi & Pengumuman</h3> <p>Berita, jadwal pelayanan, kebijakan, dan pengumuman terbaru.</p> <a href="#informasi">Lihat informasi →</a> </article> <article class="service-card"> <div class="service-icon">⌖</div> <h3>Lokasi Pelayanan</h3> <p>Temukan kantor dan titik layanan Dukcapil di wilayah Kalimantan Utara.</p> <a href="#kontak">Cari lokasi →</a> </article> </div> </section> <section class="content-section" id="data"> <div class="content-title"> <span class="eyebrow">DATA KEPENDUDUKAN</span> <h2>Data terintegrasi untuk Kaltara.</h2> <p>Area ini disiapkan untuk dashboard statistik dan publikasi data kependudukan yang dapat dihubungkan ke API resmi.</p> </div> <div class="data-grid"> <div class="data-tile"><span>01</span><b>Data Agregat</b><small>Ringkasan statistik penduduk</small></div> <div class="data-tile"><span>02</span><b>Data Wilayah</b><small>Kabupaten dan kota se-Kaltara</small></div> <div class="data-tile"><span>03</span><b>Dashboard</b><small>Grafik dan indikator terkini</small></div> </div> </section> <section class="content-section split-section" id="syarat"> <div class="content-title"> <span class="eyebrow">SYARAT PELAYANAN</span> <h2>Temukan persyaratan sebelum datang.</h2> <p>Daftar layanan dapat dibuat dinamis sehingga pengguna bisa membuka detail persyaratan, formulir, dan dokumen pendukung.</p> </div> <div class="requirements"> <div><b>KTP-el</b><span>Identitas penduduk</span><i>→</i></div> <div><b>Kartu Keluarga</b><span>Dokumen susunan keluarga</span><i>→</i></div> <div><b>KIA</b><span>Identitas anak</span><i>→</i></div> <div><b>Akta Kelahiran</b><span>Pencatatan kelahiran</span><i>→</i></div> <div><b>Akta Kematian</b><span>Pencatatan kematian</span><i>→</i></div> <div><b>Perubahan Data</b><span>Pembaruan elemen data</span><i>→</i></div> </div> </section> <section class="gallery-section" id="galeri"> <div class="section-heading"> <div><span class="eyebrow">GALERI</span><h2>Dokumentasi Dukcapil Kaltara</h2></div> <p>Siapkan area foto, video, dan infografis untuk memperkuat informasi publik.</p> </div> <div class="gallery-grid"> <div class="gallery-card gallery-main"><span>FOTO</span><b>Pelayanan Publik</b><small>Dokumentasi kegiatan Dukcapil</small></div> <div class="gallery-card gallery-blue"><span>VIDEO</span><b>Informasi Layanan</b><small>Video edukasi masyarakat</small></div> <div class="gallery-card gallery-light"><span>INFOGRAFIS</span><b>Data Kependudukan</b><small>Visualisasi informasi</small></div> </div> </section> <section class="info-section" id="informasi"> <div class="info-card"> <span class="eyebrow">PUSAT INFORMASI</span> <h2>Satu pintu untuk informasi kependudukan Kaltara.</h2> <p>Portal ini dapat dikembangkan menjadi pusat layanan lengkap dengan autentikasi, dashboard statistik, antrean online, notifikasi, dan integrasi API.</p> <div class="stats"> <div><b>5</b><span>Kabupaten/Kota</span></div> <div><b>24/7</b><span>Akses Informasi</span></div> <div><b>1</b><span>Portal Terintegrasi</span></div> </div> </div> <div class="news-card"> <div class="news-head"><span>UPDATE</span><b>Informasi Terbaru</b></div> <div class="news-item"><i>01</i><div><b>Pelayanan administrasi kependudukan</b><small>Informasi jadwal dan ketentuan pelayanan.</small></div></div> <div class="news-item"><i>02</i><div><b>Transformasi layanan digital</b><small>Pengembangan layanan publik berbasis digital.</small></div></div> <div class="news-item"><i>03</i><div><b>Informasi kontak pelayanan</b><small>Gunakan kanal resmi untuk mendapatkan bantuan.</small></div></div> </div> </section> </main> <footer id="kontak"> <div class="footer-brand"><b>Dukcapil Kaltara</b><span>Pelayanan publik yang mudah, aman, dan terpercaya.</span></div> <div class="footer-links"><a href="#beranda">Beranda</a><a href="#data">Data</a><a href="#layanan">Layanan Online</a><a href="#syarat">Syarat Pelayanan</a><a href="#galeri">Galeri</a></div> <div class="copyright">© 2026 Dukcapil Kalimantan Utara</div> </footer> <div class="modal" id="loginModal" aria-hidden="true"> <div class="modal-backdrop" data-close-login></div> <div class="login-box"> <button class="close" data-close-login aria-label="Tutup">×</button> <div class="login-logo">DK</div> <span class="eyebrow">PORTAL TERINTEGRASI</span> <h2>Masuk ke Portal</h2> <p>Gunakan akun yang telah terdaftar untuk mengakses layanan internal.</p> <label>Username / NIK<input type="text" placeholder="Masukkan username atau NIK"></label> <label>Password<div class="password"><input id="password" type="password" placeholder="Masukkan password"><button id="togglePass" type="button">Tampilkan</button></div></label> <button class="primary full" id="demoLogin">Masuk ke Dashboard →</button> <small class="demo-note">Demo UI — sambungkan tombol ini ke sistem autentikasi Anda.</small> </div> </div> <div class="toast" id="toast">Login demo berhasil — dashboard dapat dihubungkan di sini.</div> <script src="script.js"></script> </body> </html>
Copyright ©2021 || Defacer Indonesia