PPP Digital - Gerakan Pemuda Ka'bah

margin: 0;

padding: 0;

box-sizing: border-box;

}

:root {

--primary: #127C3E;

--primary-light: #1a9d52;

--primary-dark: #0d5a2d;

--secondary: #10b981;

--accent: #ffc107;

--success: #10b981;

--warning: #f59e0b;

--danger: #ef4444;

--gray-50: #f9fafb;

--gray-100: #f3f4f6;

--gray-200: #e5e7eb;

--gray-300: #d1d5db;

--gray-400: #9ca3af;

--gray-500: #6b7280;

--gray-600: #4b5563;

--gray-700: #374151;

--gray-800: #1f2937;

--gray-900: #111827;

}

html, body {

height: 100%;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

background: #ffffff;

color: var(--gray-900);

overflow-x: hidden;

}

body {

min-height: 100vh;

display: flex;

flex-direction: column;

padding: 20px;

background: #ffffff;

}

.container {

max-width: 600px;

margin: 0 auto;

background: #ffffff;

border-radius: 15px;

box-shadow: 0 20px 60px rgba(18, 124, 62, 0.3);

overflow: hidden;

flex: 1;

display: flex;

flex-direction: column;

border: 3px solid var(--primary);

}

.header {

background: linear-gradient(135deg, #127C3E 0%, #0d5a2d 100%);

color: white;

padding: 30px 20px;

text-align: center;

border-bottom: 4px solid var(--accent);

}

.header h1 {

font-size: 28px;

margin-bottom: 8px;

font-weight: 800;

}

.header p {

font-size: 13px;

opacity: 0.95;

font-weight: 500;

}

.progress-bar {

width: 100%;

height: 8px;

background: var(--gray-200);

margin: 0;

}

.progress-fill {

height: 100%;

background: linear-gradient(90deg, #127C3E, #1a9d52);

width: 0%;

transition: width 0.5s ease;

}

.form-content {

flex: 1;

overflow-y: auto;

padding: 30px;

}

.form-step {

display: none;

}

.form-step.active {

display: block;

}

.form-step h2 {

font-size: 24px;

margin-bottom: 15px;

color: var(--primary);

font-weight: 800;

}

.form-step > p {

color: var(--gray-600);

margin-bottom: 25px;

font-size: 14px;

font-weight: 500;

}

.form-group {

margin-bottom: 25px;

}

label {

display: block;

margin-bottom: 10px;

font-weight: 700;

color: var(--gray-800);

font-size: 13px;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.required {

color: var(--danger);

font-size: 14px;

}

.card-grid {

display: grid;

grid-template-columns: 1fr 1fr 1fr;

gap: 15px;

}

.card {

cursor: pointer;

border-radius: 12px;

border: 3px solid var(--gray-200);

padding: 20px;

text-align: center;

transition: all 0.3s ease;

background: white;

}

.card:hover {

border-color: var(--primary);

transform: translateY(-4px);

box-shadow: 0 10px 30px rgba(18, 124, 62, 0.2);

}

.card.selected {

border-color: var(--primary);

background: linear-gradient(135deg, rgba(18, 124, 62, 0.08), rgba(26, 157, 82, 0.08));

box-shadow: 0 10px 30px rgba(18, 124, 62, 0.3);

}

.card-title {

font-weight: 800;

color: var(--gray-900);

font-size: 14px;

}

.card-checkmark {

position: absolute;

top: 8px;

right: 8px;

width: 28px;

height: 28px;

background: var(--primary);

color: white;

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

opacity: 0;

transform: scale(0);

transition: all 0.3s ease;

font-size: 16px;

font-weight: bold;

}

.card.selected .card-checkmark {

opacity: 1;

transform: scale(1);

}

select {

width: 100%;

padding: 12px 14px;

border: 2px solid var(--gray-300);

border-radius: 10px;

font-size: 14px;

transition: all 0.3s ease;

background: white;

color: var(--gray-900);

font-family: inherit;

font-weight: 500;

cursor: pointer;

}

select:hover {

border-color: var(--primary);

}

select:focus {

outline: none;

border-color: var(--primary);

box-shadow: 0 0 0 3px rgba(18, 124, 62, 0.15);

}

.checkbox-grid {

display: grid;

grid-template-columns: repeat(5, 1fr);

gap: 10px;

}

.checkbox-item {

position: relative;

}

.checkbox-item input[type="checkbox"] {

display: none;

}

.checkbox-label {

display: block;

padding: 12px;

border: 2px solid var(--gray-300);

border-radius: 10px;

text-align: center;

font-weight: 700;

color: var(--gray-700);

cursor: pointer;

transition: all 0.3s ease;

user-select: none;

font-size: 13px;

}

.checkbox-item input[type="checkbox"]:checked + .checkbox-label {

background: var(--primary);

color: white;

border-color: var(--primary);

box-shadow: 0 5px 15px rgba(18, 124, 62, 0.3);

transform: scale(1.05);

}

.checkbox-label:hover {

border-color: var(--primary);

transform: translateY(-2px);

}

.checkbox-item.disabled .checkbox-label {

opacity: 0.5;

cursor: not-allowed;

background: var(--gray-100);

}

.checkbox-note {

font-size: 12px;

color: #ff9800;

margin-top: 10px;

font-weight: 600;

padding: 10px;

background: rgba(255, 152, 0, 0.12);

border-left: 4px solid #ff9800;

border-radius: 6px;

display: none;

}

.checkbox-note.show {

display: block;

}

.lock-badge {

display: block;

background: var(--danger);

color: white;

padding: 4px 6px;

border-radius: 4px;

font-size: 9px;

font-weight: 700;

margin-top: 3px;

}

.info-box {

background: linear-gradient(135deg, rgba(18, 124, 62, 0.1), rgba(26, 157, 82, 0.1));

border-left: 5px solid var(--primary);

padding: 15px;

border-radius: 10px;

margin: 20px 0;

font-size: 12px;

color: var(--gray-700);

line-height: 1.6;

font-weight: 500;

}

.info-box strong {

color: var(--primary);

font-weight: 800;

}

input[type="text"],

input[type="email"],

input[type="tel"],

input[type="date"] {

width: 100%;

padding: 12px 14px;

border: 2px solid var(--gray-300);

border-radius: 10px;

font-size: 14px;

transition: all 0.3s ease;

font-family: inherit;

font-weight: 500;

}

input[type="text"]:focus,

input[type="email"]:focus,

input[type="tel"]:focus,

input[type="date"]:focus {

outline: none;

border-color: var(--primary);

box-shadow: 0 0 0 3px rgba(18, 124, 62, 0.15);

}

.form-buttons {

display: flex;

gap: 12px;

padding: 20px;

border-top: 2px solid var(--gray-200);

background: var(--gray-50);

}

.btn {

flex: 1;

padding: 12px;

border: none;

border-radius: 10px;

font-size: 14px;

font-weight: 700;

cursor: pointer;

transition: all 0.3s ease;

text-transform: uppercase;

letter-spacing: 0.5px;

}

.btn-back {

background: var(--gray-200);

color: var(--gray-800);

border: 2px solid var(--gray-300);

}

.btn-back:hover {

background: var(--gray-300);

transform: translateX(-2px);

}

.btn-next {

background: var(--primary);

color: white;

box-shadow: 0 4px 15px rgba(18, 124, 62, 0.3);

}

.btn-next:hover:not(:disabled) {

background: var(--primary-light);

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(18, 124, 62, 0.4);

}

.btn-next:disabled {

opacity: 0.5;

cursor: not-allowed;

}

.btn-submit {

background: var(--success);

color: white;

box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);

}

.btn-submit:hover {

background: #059669;

transform: translateY(-2px);

box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);

}

.summary-box {

background: linear-gradient(135deg, var(--gray-50), rgba(18, 124, 62, 0.05));

border: 2px solid var(--primary);

border-radius: 12px;

padding: 20px;

margin: 20px 0;

}

.summary-item {

display: flex;

justify-content: space-between;

padding: 12px 0;

border-bottom: 1px solid rgba(18, 124, 62, 0.2);

font-size: 13px;

font-weight: 500;

}

.summary-item:last-child {

border-bottom: none;

}

.summary-label {

color: var(--gray-600);

font-weight: 700;

}

.summary-value {

color: var(--primary);

font-weight: 800;

}

.success-message {

text-align: center;

padding: 30px;

}

.success-icon {

font-size: 80px;

margin-bottom: 20px;

line-height: 1;

}

.success-message h2 {

font-size: 28px;

color: var(--primary);

margin-bottom: 12px;

font-weight: 800;

}

.success-message p {

color: var(--gray-600);

margin: 10px 0;

line-height: 1.6;

font-size: 13px;

}

.credentials-box {

background: linear-gradient(135deg, rgba(18, 124, 62, 0.15), rgba(26, 157, 82, 0.15));

border: 2px solid var(--primary);

border-radius: 12px;

padding: 20px;

margin: 20px 0;

text-align: left;

}

.credential-item {

margin: 12px 0;

padding-bottom: 12px;

border-bottom: 1px solid rgba(18, 124, 62, 0.2);

}

.credential-item:last-child {

border-bottom: none;

}

.credential-label {

font-size: 11px;

color: var(--gray-600);

font-weight: 800;

text-transform: uppercase;

margin-bottom: 5px;

letter-spacing: 0.5px;

}

.credential-value {

font-size: 15px;

font-weight: 800;

color: var(--primary);

font-family: 'Courier New', monospace;

word-break: break-all;

background: rgba(18, 124, 62, 0.08);

padding: 10px;

border-radius: 6px;

border-left: 4px solid var(--primary);

}

@media (max-width: 600px) {

.form-content { padding: 20px; }

.form-step h2 { font-size: 20px; }

.card-grid { grid-template-columns: 1fr; }

.checkbox-grid { grid-template-columns: repeat(3, 1fr); }

.header { padding: 20px 15px; }

.header h1 { font-size: 22px; }

}

</style>

<h1>???? PPP CALEG DIGITAL</h1>

<p>Sistem Pendaftaran Calon Legislatif Terintegrasi</p>

</div>

</div>

<h2>? Pilih Badan Legislatif</h2>

<p>Anda ingin mendaftar sebagai calon:</p>

</div>

<div class="card-title">DPRD Provinsi</div>

</div>

</div>

<h2>???? Pilih DAPIL</h2>

<p>Daerah Pemilihan (DAPIL) Anda:</p>

<div class="form-group"><label>Daerah Pemilihan <span class="required">*</span></label> <select id="dapilSelect" name="dapil_id" required=""><option value="">-- Pilih DAPIL --</option> </select></div>

<div class="info-box"><strong>???? Info:</strong> Pilih DAPIL sesuai domisili Anda berdasarkan Peraturan KPU.</div>

</div>

<h2>???? Pilih Nomor Kursi</h2>

<p>Pilih nomor urut kursi Anda:</p>

<div class="form-group"><label>Jenis Kelamin <span class="required">*</span></label> <select id="genderSelect" name="gender" required=""><option value="">-- Pilih Jenis Kelamin --</option><option value="M">? Laki-laki</option><option value="F">? Perempuan</option> </select></div>

<div class="form-group"><label>Nomor Urut Kursi <span class="required">*</span></label>

<div class="checkbox-item disabled" id="kursi1-item"><input disabled="disabled" id="kursi1" name="kursi" type="checkbox" value="1" /> <label class="checkbox-label" for="kursi1">1<span class="lock-badge">Terisi</span></label></div>

</div>

<div class="checkbox-note" id="kursiNote">???? Perempuan hanya bisa memilih kursi 3, 4, atau 7</div>

</div>

<div class="info-box"><strong>???? Peraturan Kursi:</strong><br />

???? Kursi 1: Sudah Terisi<br />

???? Kursi 3, 4, 7: Khusus Perempuan</div>

</div>

<h2>???? Data Pribadi</h2>

<p>Lengkapi data diri Anda dengan benar:</p>

<div class="form-group"><label>Nama Lengkap <span class="required">*</span></label> <input id="namaInput" name="nama" placeholder="Masukkan nama lengkap" required="" type="text" /></div>

<div class="form-group"><label>Tanggal Lahir <span class="required">*</span></label> <input id="tglLahirInput" name="tgl_lahir" required="" type="date" /></div>

<div class="form-group"><label>Nomor KTP <span class="required">*</span></label> <input id="ktpInput" maxlength="16" name="ktp" pattern="[0-9]{16}" placeholder="16 digit KTP" required="" type="text" /></div>

<div class="form-group"><label>Email <span class="required">*</span></label> <input id="emailInput" name="email" placeholder="email@contoh.com" required="" type="email" /></div>

<div class="form-group"><label>Nomor HP <span class="required">*</span></label> <input id="hpInput" name="hp" placeholder="08xxx atau +62xxx" required="" type="tel" /></div>

</div>

<h2>? Verifikasi Data</h2>

<p>Periksa kembali semua data Anda:</p>

<div class="summary-item"><span class="summary-label">Badan Legislatif:</span> <span class="summary-value" id="summaryLevel">-</span></div>

<div class="summary-item"><span class="summary-label">DAPIL:</span> <span class="summary-value" id="summaryDapil">-</span></div>

<div class="summary-item"><span class="summary-label">Jenis Kelamin:</span> <span class="summary-value" id="summaryGender">-</span></div>

<div class="summary-item"><span class="summary-label">Nomor Kursi:</span> <span class="summary-value" id="summaryCursi">-</span></div>

<div class="summary-item"><span class="summary-label">Email:</span> <span class="summary-value" id="summaryEmail">-</span></div>

</div>

<div class="form-group"><label><input id="agreeCheckbox" required="" type="checkbox" /> <strong>Semua data di atas adalah benar dan dapat dipertanggungjawabkan secara hukum.</strong></label></div>

</div>

<h2>Pendaftaran Berhasil!</h2>

<p>Data Anda telah diterima oleh sistem PPP CALEG DIGITAL 2026</p>

</div>

<div class="credential-label">???? Password Sementara</div>

</div>

<div class="credential-label">???? Nomor KTA</div>

</div>

<div class="credential-label">???? JEP3 Member ID</div>

</div>

<p style="margin-top: 15px;"><strong>???? Email konfirmasi telah dikirim ke alamat email Anda.</strong></p>

</div>

<div class="form-buttons"><button class="btn btn-back" id="backBtn" type="button">← Kembali</button><button class="btn btn-next" id="nextBtn" type="button">Lanjut →</button><button class="btn btn-submit" id="submitBtn" style="display: none;" type="submit">???? Daftar Sekarang</button></div>

</form>

</div>

const dapilData = {

DPR: [

// ACEH

DPR: [

// ACEH

{ id: 1, nama: 'DPR RI – Dapil 1 Aceh – (Aceh Besar, Kota Banda Aceh, Kota Sabang) – 11 kursi' }, // [file:7]

{ id: 2, nama: 'DPR RI – Dapil 2 Aceh – (Pidie, Pidie Jaya) – 9 kursi' }, // [file:7]

{ id: 3, nama: 'DPR RI – Dapil 3 Aceh – (Bireuen) – 7 kursi' }, // [file:7]

{ id: 4, nama: 'DPR RI – Dapil 4 Aceh – (Aceh Tengah, Bener Meriah) – 6 kursi' }, // [file:7]

{ id: 5, nama: 'DPR RI – Dapil 5 Aceh – (Aceh Utara, Kota Lhokseumawe) – 12 kursi' }, // [file:7]

{ id: 6, nama: 'DPR RI – Dapil 6 Aceh – (Aceh Timur) – 6 kursi' }, // [file:7]

{ id: 7, nama: 'DPR RI – Dapil 7 Aceh – (Aceh Tamiang, Kota Langsa) – 7 kursi' }, // [file:7]

{ id: 8, nama: 'DPR RI – Dapil 8 Aceh – (Aceh Tenggara, Gayo Lues) – 5 kursi' }, // [file:7]

{ id: 9, nama: 'DPR RI – Dapil 9 Aceh – (Aceh Selatan, Aceh Singkil, Aceh Barat Daya, Kota Subulussalam) – 9 kursi' }, // [file:7]

{ id: 10, nama: 'DPR RI – Dapil 10 Aceh – (Aceh Barat, Simeulue, Aceh Jaya, Nagan Raya) – 9 kursi' }, // [file:7]

// SUMATERA UTARA

{ id: 11, nama: 'DPR RI – Dapil 1 Sumatera Utara – (Kota Medan) – 10 kursi' }, // [file:7]

{ id: 12, nama: 'DPR RI – Dapil 2 Sumatera Utara – (Kota Medan) – 7 kursi' }, // [file:7]

{ id: 13, nama: 'DPR RI – Dapil 3 Sumatera Utara – (Deli Serdang) – 12 kursi' }, // [file:7]

{ id: 14, nama: 'DPR RI – Dapil 4 Sumatera Utara – (Serdang Bedagai, Kota Tebing Tinggi) – 5 kursi' }, // [file:7]

{ id: 15, nama: 'DPR RI – Dapil 5 Sumatera Utara – (Asahan, Batu Bara, Kota Tanjung Balai) – 10 kursi' }, // [file:7]

{ id: 16, nama: 'DPR RI – Dapil 6 Sumatera Utara – (Labuhanbatu, Labuhanbatu Selatan, Labuhanbatu Utara) – 8 kursi' }, // [file:7]

{ id: 17, nama: 'DPR RI – Dapil 7 Sumatera Utara – (Tapanuli Selatan, Mandailing Natal, Padang Lawas Utara, Padang Lawas, Kota Padang Sidempuan) – 10 kursi' }, // [file:7]

{ id: 18, nama: 'DPR RI – Dapil 8 Sumatera Utara – (Nias, Nias Selatan, Nias Utara, Nias Barat, Kota Gunungsitoli) – 6 kursi' }, // [file:7]

{ id: 19, nama: 'DPR RI – Dapil 9 Sumatera Utara – (Tapanuli Tengah, Tapanuli Utara, Toba, Humbang Hasundutan, Samosir, Kota Sibolga) – 9 kursi' }, // [file:7]

{ id: 20, nama: 'DPR RI – Dapil 10 Sumatera Utara – (Simalungun, Kota Pematangsiantar) – 8 kursi' }, // [file:7]

{ id: 21, nama: 'DPR RI – Dapil 11 Sumatera Utara – (Karo, Dairi, Pakpak Bharat) – 5 kursi' }, // [file:7]

{ id: 22, nama: 'DPR RI – Dapil 12 Sumatera Utara – (Langkat, Kota Binjai) – 10 kursi' } // [file:7]

// JAWA BARAT

{ id: 21, nama: 'Dapil 1 Jawa Barat' }, // JAWA BARAT I

{ id: 22, nama: 'Dapil 2 Jawa Barat' }, // JAWA BARAT II

{ id: 23, nama: 'Dapil 3 Jawa Barat' }, // JAWA BARAT III

{ id: 24, nama: 'Dapil 4 Jawa Barat' }, // JAWA BARAT IV

{ id: 25, nama: 'Dapil 5 Jawa Barat' }, // JAWA BARAT V

{ id: 26, nama: 'Dapil 6 Jawa Barat' }, // JAWA BARAT VI

{ id: 27, nama: 'Dapil 7 Jawa Barat' }, // JAWA BARAT VII

{ id: 28, nama: 'Dapil 8 Jawa Barat' }, // JAWA BARAT VIII

{ id: 29, nama: 'Dapil 9 Jawa Barat' }, // JAWA BARAT IX

{ id: 30, nama: 'Dapil 10 Jawa Barat' }, // JAWA BARAT X

{ id: 31, nama: 'Dapil 11 Jawa Barat' }, // JAWA BARAT XI

// JAWA TENGAH

{ id: 32, nama: 'Dapil 1 Jawa Tengah' }, // JAWA TENGAH I

{ id: 33, nama: 'Dapil 2 Jawa Tengah' }, // JAWA TENGAH II

{ id: 34, nama: 'Dapil 3 Jawa Tengah' }, // JAWA TENGAH III

{ id: 35, nama: 'Dapil 4 Jawa Tengah' }, // JAWA TENGAH IV

{ id: 36, nama: 'Dapil 5 Jawa Tengah' }, // JAWA TENGAH V

{ id: 37, nama: 'Dapil 6 Jawa Tengah' }, // JAWA TENGAH VI

{ id: 38, nama: 'Dapil 7 Jawa Tengah' }, // JAWA TENGAH VII

{ id: 39, nama: 'Dapil 8 Jawa Tengah' }, // JAWA TENGAH VIII

{ id: 40, nama: 'Dapil 9 Jawa Tengah' }, // JAWA TENGAH IX

{ id: 41, nama: 'Dapil 10 Jawa Tengah' }, // JAWA TENGAH X

// DI YOGYAKARTA

{ id: 42, nama: 'Dapil 1 DI Yogyakarta' }, // DIY

// JAWA TIMUR

{ id: 43, nama: 'Dapil 1 Jawa Timur' }, // JAWA TIMUR I

{ id: 44, nama: 'Dapil 2 Jawa Timur' }, // JAWA TIMUR II

{ id: 45, nama: 'Dapil 3 Jawa Timur' }, // JAWA TIMUR III

{ id: 46, nama: 'Dapil 4 Jawa Timur' }, // JAWA TIMUR IV

{ id: 47, nama: 'Dapil 5 Jawa Timur' }, // JAWA TIMUR V

{ id: 48, nama: 'Dapil 6 Jawa Timur' }, // JAWA TIMUR VI

{ id: 49, nama: 'Dapil 7 Jawa Timur' }, // JAWA TIMUR VII

{ id: 50, nama: 'Dapil 8 Jawa Timur' }, // JAWA TIMUR VIII

{ id: 51, nama: 'Dapil 9 Jawa Timur' }, // JAWA TIMUR IX

{ id: 52, nama: 'Dapil 10 Jawa Timur' }, // JAWA TIMUR X

{ id: 53, nama: 'Dapil 11 Jawa Timur' }, // JAWA TIMUR XI

// BANTEN

{ id: 54, nama: 'Dapil 1 Banten' }, // BANTEN I

{ id: 55, nama: 'Dapil 2 Banten' }, // BANTEN II

{ id: 56, nama: 'Dapil 3 Banten' }, // BANTEN III

// BALI

{ id: 57, nama: 'Dapil 1 Bali' }, // BALI

// NUSA TENGGARA BARAT

{ id: 58, nama: 'Dapil 1 Nusa Tenggara Barat' }, // NTB I

{ id: 59, nama: 'Dapil 2 Nusa Tenggara Barat' }, // NTB II

// NUSA TENGGARA TIMUR

{ id: 60, nama: 'Dapil 1 Nusa Tenggara Timur' }, // NTT I

{ id: 61, nama: 'Dapil 2 Nusa Tenggara Timur' }, // NTT II

// KALIMANTAN BARAT

{ id: 62, nama: 'Dapil 1 Kalimantan Barat' }, // KALBAR I

{ id: 63, nama: 'Dapil 2 Kalimantan Barat' }, // KALBAR II

// KALIMANTAN TENGAH

{ id: 64, nama: 'Dapil 1 Kalimantan Tengah' }, // KALTENG

// KALIMANTAN SELATAN

{ id: 65, nama: 'Dapil 1 Kalimantan Selatan' }, // KALSEL I

{ id: 66, nama: 'Dapil 2 Kalimantan Selatan' }, // KALSEL II

// KALIMANTAN TIMUR

{ id: 67, nama: 'Dapil 1 Kalimantan Timur' }, // KALTIM

// KALIMANTAN UTARA

{ id: 68, nama: 'Dapil 1 Kalimantan Utara' }, // KALTARA

// SULAWESI UTARA

{ id: 69, nama: 'Dapil 1 Sulawesi Utara' }, // SULUT

// SULAWESI TENGAH

{ id: 70, nama: 'Dapil 1 Sulawesi Tengah' }, // SULTENG

// SULAWESI SELATAN

{ id: 71, nama: 'Dapil 1 Sulawesi Selatan' }, // SULSEL I

{ id: 72, nama: 'Dapil 2 Sulawesi Selatan' }, // SULSEL II

{ id: 73, nama: 'Dapil 3 Sulawesi Selatan' }, // SULSEL III

// SULAWESI TENGGARA

{ id: 74, nama: 'Dapil 1 Sulawesi Tenggara' }, // SULTRA

// GORONTALO

{ id: 75, nama: 'Dapil 1 Gorontalo' }, // GORONTALO

// SULAWESI BARAT

{ id: 76, nama: 'Dapil 1 Sulawesi Barat' }, // SULBAR

// MALUKU

{ id: 77, nama: 'Dapil 1 Maluku' }, // MALUKU

// MALUKU UTARA

{ id: 78, nama: 'Dapil 1 Maluku Utara' }, // MALUT

// PAPUA

{ id: 79, nama: 'Dapil 1 Papua' }, // PAPUA

// (kalau nanti pemekaran DPR RI Papua I/II dipisah, bisa ditambah jadi Dapil 2 Papua)

// PAPUA BARAT

{ id: 80, nama: 'Dapil 1 Papua Barat' },

// PAPUA SELATAN

{ id: 81, nama: 'Dapil 1 Papua Selatan' },

// PAPUA TENGAH

{ id: 82, nama: 'Dapil 1 Papua Tengah' },

// PAPUA PEGUNUNGAN

{ id: 83, nama: 'Dapil 1 Papua Pegunungan' },

// PAPUA BARAT DAYA

{ id: 84, nama: 'Dapil 1 Papua Barat Daya' }

DPRD_PROV: [

// ACEH

{ id: 101, nama: 'DPRD Prov Aceh I' },

{ id: 102, nama: 'DPRD Prov Aceh II' },

{ id: 103, nama: 'DPRD Prov Aceh III' },

{ id: 104, nama: 'DPRD Prov Aceh IV' },

{ id: 105, nama: 'DPRD Prov Aceh V' },

// SUMATERA UTARA

{ id: 106, nama: 'DPRD Prov Sumatera Utara I' },

{ id: 107, nama: 'DPRD Prov Sumatera Utara II' },

{ id: 108, nama: 'DPRD Prov Sumatera Utara III' },

// SUMATERA BARAT

{ id: 109, nama: 'DPRD Prov Sumatera Barat I' },

{ id: 110, nama: 'DPRD Prov Sumatera Barat II' },

// RIAU

{ id: 111, nama: 'DPRD Prov Riau I' },

{ id: 112, nama: 'DPRD Prov Riau II' },

// JAMBI

{ id: 113, nama: 'DPRD Prov Jambi I' },

// SUMATERA SELATAN

{ id: 114, nama: 'DPRD Prov Sumatera Selatan I' },

{ id: 115, nama: 'DPRD Prov Sumatera Selatan II' },

// LAMPUNG

{ id: 116, nama: 'DPRD Prov Lampung I' },

{ id: 117, nama: 'DPRD Prov Lampung II' },

// DKI JAKARTA

{ id: 118, nama: 'DPRD Prov DKI Jakarta I' },

{ id: 119, nama: 'DPRD Prov DKI Jakarta II' },

{ id: 120, nama: 'DPRD Prov DKI Jakarta III' },

{ id: 121, nama: 'DPRD Prov DKI Jakarta IV' },

{ id: 122, nama: 'DPRD Prov DKI Jakarta V' },

// JAWA BARAT

{ id: 123, nama: 'DPRD Prov Jawa Barat I' },

{ id: 124, nama: 'DPRD Prov Jawa Barat II' },

{ id: 125, nama: 'DPRD Prov Jawa Barat III' },

{ id: 126, nama: 'DPRD Prov Jawa Barat IV' },

{ id: 127, nama: 'DPRD Prov Jawa Barat V' },

// JAWA TENGAH

{ id: 128, nama: 'DPRD Prov Jawa Tengah I' },

{ id: 129, nama: 'DPRD Prov Jawa Tengah II' },

{ id: 130, nama: 'DPRD Prov Jawa Tengah III' },

{ id: 131, nama: 'DPRD Prov Jawa Tengah IV' },

// DI YOGYAKARTA

{ id: 132, nama: 'DPRD Prov DI Yogyakarta I' },

// JAWA TIMUR

{ id: 133, nama: 'DPRD Prov Jawa Timur I' },

{ id: 134, nama: 'DPRD Prov Jawa Timur II' },

{ id: 135, nama: 'DPRD Prov Jawa Timur III' },

{ id: 136, nama: 'DPRD Prov Jawa Timur IV' },

// BALI

{ id: 137, nama: 'DPRD Prov Bali I' },

// NUSA TENGGARA BARAT

{ id: 138, nama: 'DPRD Prov Nusa Tenggara Barat I' },

// NUSA TENGGARA TIMUR

{ id: 139, nama: 'DPRD Prov Nusa Tenggara Timur I' },

// KALIMANTAN BARAT

{ id: 140, nama: 'DPRD Prov Kalimantan Barat I' },

// KALIMANTAN TENGAH

{ id: 141, nama: 'DPRD Prov Kalimantan Tengah I' },

// KALIMANTAN SELATAN

{ id: 142, nama: 'DPRD Prov Kalimantan Selatan I' },

// KALIMANTAN TIMUR

{ id: 143, nama: 'DPRD Prov Kalimantan Timur I' },

// KALIMANTAN UTARA

{ id: 144, nama: 'DPRD Prov Kalimantan Utara I' },

// SULAWESI UTARA

{ id: 145, nama: 'DPRD Prov Sulawesi Utara I' },

// GORONTALO

{ id: 146, nama: 'DPRD Prov Gorontalo I' },

// SULAWESI TENGAH

{ id: 147, nama: 'DPRD Prov Sulawesi Tengah I' },

// SULAWESI SELATAN

{ id: 148, nama: 'DPRD Prov Sulawesi Selatan I' },

{ id: 149, nama: 'DPRD Prov Sulawesi Selatan II' },

// SULAWESI TENGGARA

{ id: 150, nama: 'DPRD Prov Sulawesi Tenggara I' },

// SULAWESI BARAT

{ id: 151, nama: 'DPRD Prov Sulawesi Barat I' },

// MALUKU

{ id: 152, nama: 'DPRD Prov Maluku I' },

// MALUKU UTARA

{ id: 153, nama: 'DPRD Prov Maluku Utara I' },

// PAPUA

{ id: 154, nama: 'DPRD Prov Papua I' },

{ id: 155, nama: 'DPRD Prov Papua II' },

// PAPUA BARAT

{ id: 156, nama: 'DPRD Prov Papua Barat I' },

// PAPUA BARAT DAYA

{ id: 157, nama: 'DPRD Prov Papua Barat Daya I' },

// PAPUA TENGAH

{ id: 158, nama: 'DPRD Prov Papua Tengah I' },

// PAPUA PEGUNUNGAN

{ id: 159, nama: 'DPRD Prov Papua Pegunungan I' }

DPRD_KAB: [

// JAWA BARAT - CIKAMPEK

{ id: 201, nama: 'DPRD Kab Karawang I' },

{ id: 202, nama: 'DPRD Kab Karawang II' },

{ id: 203, nama: 'DPRD Kab Karawang III' },

{ id: 204, nama: 'DPRD Kab Subang I' },

{ id: 205, nama: 'DPRD Kab Subang II' },

{ id: 206, nama: 'DPRD Kab Purwakarta I' },

{ id: 207, nama: 'DPRD Kab Sukabumi I' },

{ id: 208, nama: 'DPRD Kab Sukabumi II' },

{ id: 209, nama: 'DPRD Kab Cianjur I' },

{ id: 210, nama: 'DPRD Kab Cianjur II' },

{ id: 211, nama: 'DPRD Kab Garut I' },

{ id: 212, nama: 'DPRD Kab Garut II' },

{ id: 213, nama: 'DPRD Kab Tasikmalaya I' },

{ id: 214, nama: 'DPRD Kab Tasikmalaya II' },

{ id: 215, nama: 'DPRD Kab Ciamis I' },

{ id: 216, nama: 'DPRD Kab Kuningan I' },

{ id: 217, nama: 'DPRD Kab Cirebon I' },

{ id: 218, nama: 'DPRD Kab Majalengka I' },

{ id: 219, nama: 'DPRD Kab Indramayu I' },

{ id: 220, nama: 'DPRD Kota Bandung I' },

{ id: 221, nama: 'DPRD Kota Bandung II' },

{ id: 222, nama: 'DPRD Kota Bogor I' },

{ id: 223, nama: 'DPRD Kota Bekasi I' },

{ id: 224, nama: 'DPRD Kota Depok I' },

{ id: 225, nama: 'DPRD Kota Cirebon I' },

{ id: 226, nama: 'DPRD Kota Tasikmalaya I' },

// JAWA TENGAH

{ id: 227, nama: 'DPRD Kota Semarang I' },

{ id: 228, nama: 'DPRD Kota Semarang II' },

{ id: 229, nama: 'DPRD Kab Semarang I' },

{ id: 230, nama: 'DPRD Kab Semarang II' },

{ id: 231, nama: 'DPRD Kota Salatiga I' },

{ id: 232, nama: 'DPRD Kota Pekalongan I' },

{ id: 233, nama: 'DPRD Kab Pekalongan I' },

{ id: 234, nama: 'DPRD Kota Tegal I' },

{ id: 235, nama: 'DPRD Kab Tegal I' },

{ id: 236, nama: 'DPRD Kab Kendal I' },

{ id: 237, nama: 'DPRD Kab Demak I' },

{ id: 238, nama: 'DPRD Kab Rembang I' },

{ id: 239, nama: 'DPRD Kab Pati I' },

{ id: 240, nama: 'DPRD Kab Jepara I' },

{ id: 241, nama: 'DPRD Kab Kudus I' },

{ id: 242, nama: 'DPRD Kab Grobogan I' },

{ id: 243, nama: 'DPRD Kab Blora I' },

{ id: 244, nama: 'DPRD Kota Surakarta I' },

{ id: 245, nama: 'DPRD Kab Klaten I' },

{ id: 246, nama: 'DPRD Kab Sukoharjo I' },

{ id: 247, nama: 'DPRD Kab Sragen I' },

{ id: 248, nama: 'DPRD Kab Karanganyar I' },

{ id: 249, nama: 'DPRD Kab Wonogiri I' },

{ id: 250, nama: 'DPRD Kota Magelang I' },

{ id: 251, nama: 'DPRD Kab Magelang I' },

{ id: 252, nama: 'DPRD Kab Boyolali I' },

{ id: 253, nama: 'DPRD Kab Purworejo I' },

{ id: 254, nama: 'DPRD Kab Wonosobo I' },

{ id: 255, nama: 'DPRD Kab Temanggung I' },

{ id: 256, nama: 'DPRD Kab Kebumen I' },

{ id: 257, nama: 'DPRD Kab Purbalingga I' },

{ id: 258, nama: 'DPRD Kab Banjarnegara I' },

{ id: 259, nama: 'DPRD Kab Cilacap I' },

{ id: 260, nama: 'DPRD Kab Banyumas I' },

// JAWA TIMUR

{ id: 261, nama: 'DPRD Kota Surabaya I' },

{ id: 262, nama: 'DPRD Kota Surabaya II' },

{ id: 263, nama: 'DPRD Kab Sidoarjo I' },

{ id: 264, nama: 'DPRD Kota Malang I' },

{ id: 265, nama: 'DPRD Kab Malang I' },

{ id: 266, nama: 'DPRD Kota Mojokerto I' },

{ id: 267, nama: 'DPRD Kab Mojokerto I' },

{ id: 268, nama: 'DPRD Kab Jombang I' },

{ id: 269, nama: 'DPRD Kab Tuban I' },

{ id: 270, nama: 'DPRD Kab Lamongan I' },

{ id: 271, nama: 'DPRD Kab Gresik I' },

{ id: 272, nama: 'DPRD Kab Bangkalan I' },

{ id: 273, nama: 'DPRD Kab Sampang I' },

{ id: 274, nama: 'DPRD Kab Pamekasan I' },

{ id: 275, nama: 'DPRD Kab Sumenep I' },

{ id: 276, nama: 'DPRD Kab Blitar I' },

{ id: 277, nama: 'DPRD Kota Blitar I' },

{ id: 278, nama: 'DPRD Kab Tulungagung I' },

{ id: 279, nama: 'DPRD Kab Trenggalek I' },

{ id: 280, nama: 'DPRD Kab Bondowoso I' },

{ id: 281, nama: 'DPRD Kab Jember I' },

{ id: 282, nama: 'DPRD Kab Situbondo I' },

{ id: 283, nama: 'DPRD Kab Banyuwangi I' },

{ id: 284, nama: 'DPRD Kab Lumajang I' },

{ id: 285, nama: 'DPRD Kab Pasuruan I' },

{ id: 286, nama: 'DPRD Kota Pasuruan I' },

{ id: 287, nama: 'DPRD Kab Probolinggo I' },

{ id: 288, nama: 'DPRD Kota Probolinggo I' },

// DKI JAKARTA

{ id: 289, nama: 'DPRD Kota Jakarta Pusat I' },

{ id: 290, nama: 'DPRD Kota Jakarta Utara I' },

{ id: 291, nama: 'DPRD Kota Jakarta Barat I' },

{ id: 292, nama: 'DPRD Kota Jakarta Selatan I' },

{ id: 293, nama: 'DPRD Kota Jakarta Timur I' },

// BALI

{ id: 294, nama: 'DPRD Kab Badung I' },

{ id: 295, nama: 'DPRD Kab Gianyar I' },

{ id: 296, nama: 'DPRD Kab Klungkung I' },

{ id: 297, nama: 'DPRD Kab Bangli I' },

{ id: 298, nama: 'DPRD Kota Denpasar I' },

// SULAWESI SELATAN

{ id: 299, nama: 'DPRD Kota Makassar I' },

{ id: 300, nama: 'DPRD Kab Gowa I' },

{ id: 301, nama: 'DPRD Kab Takalar I' },

{ id: 302, nama: 'DPRD Kab Jeneponto I' },

{ id: 303, nama: 'DPRD Kab Bantaeng I' },

{ id: 304, nama: 'DPRD Kab Bulukumba I' },

// SUMATERA UTARA

{ id: 305, nama: 'DPRD Kota Medan I' },

{ id: 306, nama: 'DPRD Kab Deli Serdang I' },

{ id: 307, nama: 'DPRD Kab Langkat I' },

{ id: 308, nama: 'DPRD Kab Karo I' },

// SUMATERA SELATAN

{ id: 309, nama: 'DPRD Kota Palembang I' },

{ id: 310, nama: 'DPRD Kab Ogan Komering Ilir I' },

// RIAU

{ id: 311, nama: 'DPRD Kota Pekanbaru I' },

{ id: 312, nama: 'DPRD Kab Kampar I' },

// KALIMANTAN SELATAN

{ id: 313, nama: 'DPRD Kota Banjarmasin I' },

{ id: 314, nama: 'DPRD Kab Banjar I' }

]

};

let currentStep = 1;

const totalSteps = 5;

let formData = {};

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

setupEventListeners();

updateUI();

});

function setupEventListeners() {

document.querySelectorAll('.card').forEach(card => {

card.addEventListener('click', function() {

document.querySelectorAll('.card').forEach(c => c.classList.remove('selected'));

this.classList.add('selected');

formData.level = this.dataset.level;

document.getElementById('selectedLevel').value = this.dataset.level;

updateDapilDropdown();

});

document.getElementById('genderSelect').addEventListener('change', function() {

formData.gender = this.value;

updateKursiValidation();

});

document.querySelectorAll('input[name="kursi"]:not(:disabled)').forEach(checkbox => {

checkbox.addEventListener('change', function() {

if (this.checked) {

document.querySelectorAll('input[name="kursi"]:not(:disabled)').forEach(c => c.checked = false);

this.checked = true;

formData.kursi = this.value;

}

});

document.getElementById('namaInput').addEventListener('blur', function() { formData.nama = this.value; });

document.getElementById('tglLahirInput').addEventListener('blur', function() { formData.tgl_lahir = this.value; });

document.getElementById('ktpInput').addEventListener('blur', function() { formData.ktp = this.value; });

document.getElementById('emailInput').addEventListener('blur', function() { formData.email = this.value; });

document.getElementById('hpInput').addEventListener('blur', function() { formData.hp = this.value; });

document.getElementById('backBtn').addEventListener('click', () => goToStep(currentStep - 1));

document.getElementById('nextBtn').addEventListener('click', () => goToStep(currentStep + 1));

document.getElementById('submitBtn').addEventListener('click', submitForm);

}

function updateDapilDropdown() {

const select = document.getElementById('dapilSelect');

select.innerHTML = '<option value="">-- Pilih DAPIL --</option>';

const dapils = dapilData[formData.level] || [];

dapils.forEach(dapil => {

const option = document.createElement('option');

option.value = dapil.id;

option.textContent = dapil.nama;

select.appendChild(option);

});

select.addEventListener('change', function() {

formData.dapil_id = this.value;

const selected = dapils.find(d => d.id == this.value);

if (selected) {

formData.dapil_nama = selected.nama;

}

});

}

function updateKursiValidation() {

const gender = document.getElementById('genderSelect').value;

const note = document.getElementById('kursiNote');

if (gender === 'F') {

note.classList.add('show');

[2, 5, 6, 8, 9, 10].forEach(num => {

document.getElementById(`kursi${num}`).parentElement.style.opacity = '0.5';

document.getElementById(`kursi${num}`).parentElement.style.pointerEvents = 'none';

});

[3, 4, 7].forEach(num => {

document.getElementById(`kursi${num}`).parentElement.style.opacity = '1';

document.getElementById(`kursi${num}`).parentElement.style.pointerEvents = 'auto';

});

} else {

note.classList.remove('show');

[2, 3, 4, 5, 6, 7, 8, 9, 10].forEach(num => {

document.getElementById(`kursi${num}`).parentElement.style.opacity = '1';

document.getElementById(`kursi${num}`).parentElement.style.pointerEvents = 'auto';

});

}

function goToStep(step) {

if (step < 1 || step > totalSteps + 1) return;

if (step > currentStep && !validateCurrentStep()) return;

currentStep = step;

updateUI();

}

function validateCurrentStep() {

switch (currentStep) {

case 1:

return formData.level ? true : (alert('Pilih badan legislatif terlebih dahulu'), false);

case 2:

return formData.dapil_id ? true : (alert('Pilih DAPIL terlebih dahulu'), false);

case 3:

if (!formData.gender) { alert('Pilih jenis kelamin'); return false; }

if (!formData.kursi) { alert('Pilih nomor kursi'); return false; }

if (formData.gender === 'F' && ![3, 4, 7].includes(parseInt(formData.kursi))) {

alert('Perempuan hanya bisa memilih kursi 3, 4, atau 7');

return false;

}

return true;

case 4:

if (!formData.nama || !formData.tgl_lahir || !formData.ktp || !formData.email || !formData.hp) {

alert('Lengkapi semua data');

return false;

}

if (formData.ktp.length !== 16) {

alert('KTP harus 16 digit');

return false;

}

return true;

case 5:

return document.getElementById('agreeCheckbox').checked ?

true : (alert('Anda harus menyetujui pernyataan'), false);

default:

return true;

}

function updateUI() {

document.querySelectorAll('.form-step').forEach(step => step.classList.remove('active'));

if (currentStep <= 5) {

document.getElementById(`step${currentStep}`).classList.add('active');

} else {

document.getElementById('stepSuccess').classList.add('active');

}

const progress = (currentStep / totalSteps) * 100;

document.getElementById('progressFill').style.width = progress + '%';

document.getElementById('backBtn').style.display = currentStep === 1 ? 'none' : 'block';

document.getElementById('nextBtn').style.display = currentStep === 5 ? 'none' : 'block';

document.getElementById('submitBtn').style.display = currentStep === 5 ? 'block' : 'none';

if (currentStep === 5) {

updateSummary();

}

function updateSummary() {

const levelNames = { DPR: 'DPR RI', DPRD_PROV: 'DPRD Provinsi', DPRD_KAB: 'DPRD Kab/Kota' };

const genderNames = { M: '?? Laki-laki', F: '?? Perempuan' };

document.getElementById('summaryLevel').textContent = levelNames[formData.level] || '-';

document.getElementById('summaryDapil').textContent = formData.dapil_nama || '-';

document.getElementById('summaryGender').textContent = genderNames[formData.gender] || '-';

document.getElementById('summaryCursi').textContent = formData.kursi || '-';

document.getElementById('summaryNama').textContent = formData.nama || '-';

document.getElementById('summaryKtp').textContent = formData.ktp || '-';

document.getElementById('summaryEmail').textContent = formData.email || '-';

document.getElementById('summaryHp').textContent = formData.hp || '-';

}

function submitForm(e) {

e.preventDefault();

const timestamp = Date.now();

const credentials = {

user_id: `ID${String(timestamp).slice(-6)}-PPP-2026`,

password: `Ppp2026!@${String(timestamp).slice(-4)}`,

kta: `KTA-2026-PPP-${String(timestamp).slice(-3)}`,

jep3: `JEP3-2026-${String(timestamp).slice(-4)}`

};

document.getElementById('credUserId').textContent = credentials.user_id;

document.getElementById('credPassword').textContent = credentials.password;

document.getElementById('credKta').textContent = credentials.kta;

document.getElementById('credJep3').textContent = credentials.jep3;

currentStep = 6;

updateUI();

}

</script>

Partai Persatuan Pembangunan

Gerakan Pemuda Ka'bah