feat(admin): tata letak 2-kolom, preset palet warna, dan micro-switch toggle
This commit is contained in:
Mas Budi Kusuma
+549
-161
@@ -5,7 +5,6 @@
|
||||
|
||||
// 1. REGISTRASI MENU ADMIN SIDEBAR
|
||||
function edukarsa_admin_menu() {
|
||||
// Menu Induk langsung mengarah ke halaman Pengaturan Utama
|
||||
add_menu_page(
|
||||
'EduKarsa',
|
||||
'EduKarsa',
|
||||
@@ -59,23 +58,16 @@ function edukarsa_admin_menu() {
|
||||
}
|
||||
add_action( 'admin_menu', 'edukarsa_admin_menu' );
|
||||
|
||||
// 2. SHORTCUT MENU DI TOPBAR (ADMIN BAR) SEBELAH TOMBOL '+ BARU'
|
||||
// 2. SHORTCUT MENU DI TOPBAR (ADMIN BAR)
|
||||
function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
|
||||
if ( ! current_user_can( 'manage_options' ) ) {
|
||||
return;
|
||||
}
|
||||
if ( ! current_user_can( 'manage_options' ) ) return;
|
||||
|
||||
// Node Utama: Tepat di samping '+ Baru' (prioritas tombol '+ Baru' bawaan WP adalah 70)
|
||||
$wp_admin_bar->add_node( array(
|
||||
'id' => 'edukarsa-topbar-menu',
|
||||
'title' => '<span class="ab-icon dashicons dashicons-welcome-learn-more" style="top:2px;"></span><span class="ab-label">EduKarsa</span>',
|
||||
'href' => admin_url( 'admin.php?page=edukarsa_settings' ),
|
||||
'meta' => array(
|
||||
'title' => 'Buka Pengaturan Tema EduKarsa',
|
||||
),
|
||||
) );
|
||||
|
||||
// Submenu Pintas 1: Pengaturan Utama
|
||||
$wp_admin_bar->add_node( array(
|
||||
'id' => 'edukarsa-sub-settings',
|
||||
'parent' => 'edukarsa-topbar-menu',
|
||||
@@ -83,7 +75,6 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
|
||||
'href' => admin_url( 'admin.php?page=edukarsa_settings' ),
|
||||
) );
|
||||
|
||||
// Submenu Pintas 2: Slider Banner
|
||||
$wp_admin_bar->add_node( array(
|
||||
'id' => 'edukarsa-sub-slider',
|
||||
'parent' => 'edukarsa-topbar-menu',
|
||||
@@ -91,7 +82,6 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
|
||||
'href' => admin_url( 'edit.php?post_type=slider' ),
|
||||
) );
|
||||
|
||||
// Submenu Pintas 3: Program Kami
|
||||
$wp_admin_bar->add_node( array(
|
||||
'id' => 'edukarsa-sub-program',
|
||||
'parent' => 'edukarsa-topbar-menu',
|
||||
@@ -99,7 +89,6 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
|
||||
'href' => admin_url( 'edit.php?post_type=program' ),
|
||||
) );
|
||||
|
||||
// Submenu Pintas 4: Keunggulan
|
||||
$wp_admin_bar->add_node( array(
|
||||
'id' => 'edukarsa-sub-keunggulan',
|
||||
'parent' => 'edukarsa-topbar-menu',
|
||||
@@ -107,7 +96,6 @@ function edukarsa_admin_bar_shortcut( $wp_admin_bar ) {
|
||||
'href' => admin_url( 'edit.php?post_type=keunggulan' ),
|
||||
) );
|
||||
|
||||
// Submenu Pintas 5: Milestone
|
||||
$wp_admin_bar->add_node( array(
|
||||
'id' => 'edukarsa-sub-milestone',
|
||||
'parent' => 'edukarsa-topbar-menu',
|
||||
@@ -152,187 +140,587 @@ function edukarsa_register_settings() {
|
||||
}
|
||||
add_action( 'admin_init', 'edukarsa_register_settings' );
|
||||
|
||||
// 4. TAMPILAN FORM PENGATURAN UTAMA
|
||||
// 4. HALAMAN PENGATURAN DENGAN DESAIN MODERN 2-KOLOM
|
||||
function edukarsa_settings_page_html() {
|
||||
if ( ! current_user_can( 'manage_options' ) ) return;
|
||||
$font_current = get_option( 'edukarsa_font_choice', 'plus_jakarta_sans' );
|
||||
$primary_color = get_option( 'edukarsa_primary_color', '#0b4a8e' );
|
||||
$secondary_color = get_option( 'edukarsa_secondary_color', '#1a73e8' );
|
||||
$heading_color = get_option( 'edukarsa_heading_color', '#0f172a' );
|
||||
?>
|
||||
<style>
|
||||
.edukarsa-panel { background:#fff; padding:20px 30px; border:1px solid #ccd0d4; border-radius:8px; margin-bottom: 20px; max-width: 950px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
|
||||
.edukarsa-panel h2 { border-bottom: 2px solid #f1f5f9; padding-bottom: 12px; margin-top: 0; color: #0b4a8e; font-size: 18px; }
|
||||
.toggle-row { display: flex; align-items: center; gap: 10px; font-weight: bold; background: #f0f7ff; padding: 15px; border-left: 4px solid #0b4a8e; border-radius: 4px; }
|
||||
.hidden-row { display: none; }
|
||||
.color-field-wrap { display: flex; align-items: center; gap: 12px; }
|
||||
.color-field-wrap input[type="color"] { border: none; width: 36px; height: 36px; border-radius: 6px; cursor: pointer; background: transparent; }
|
||||
.edukarsa-admin-wrap { margin-top: 15px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif; }
|
||||
.edukarsa-admin-layout { display: grid; grid-template-columns: 1fr 320px; gap: 25px; align-items: start; }
|
||||
|
||||
/* Kartu & Panel */
|
||||
.edukarsa-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); margin-bottom: 25px; overflow: hidden; }
|
||||
.edukarsa-card-header { padding: 16px 24px; border-bottom: 1px solid #f1f5f9; background: #fafafa; display: flex; justify-content: space-between; align-items: center; }
|
||||
.edukarsa-card-header h2 { margin: 0; font-size: 16px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 8px; }
|
||||
.edukarsa-card-body { padding: 24px; }
|
||||
|
||||
/* Toggle Switch Ringkas Modern */
|
||||
.switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
|
||||
.switch-row-inline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 15px; }
|
||||
.switch-label { font-weight: 600; font-size: 13px; color: #334155; }
|
||||
.edukarsa-switch { position: relative; display: inline-block; width: 42px; height: 22px; margin: 0; }
|
||||
.edukarsa-switch input { opacity: 0; width: 0; height: 0; }
|
||||
.slider-round { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #cbd5e1; transition: .25s; border-radius: 22px; }
|
||||
.slider-round:before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background-color: white; transition: .25s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.2); }
|
||||
input:checked + .slider-round { background-color: #0b4a8e; }
|
||||
input:checked + .slider-round:before { transform: translateX(20px); }
|
||||
|
||||
/* Form Controls */
|
||||
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; }
|
||||
.form-field-group { margin-bottom: 15px; }
|
||||
.form-field-group label { display: block; font-weight: 600; font-size: 13px; color: #475569; margin-bottom: 6px; }
|
||||
.form-field-group input[type="text"], .form-field-group textarea, .form-field-group select { width: 100%; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 12px; font-size: 13px; box-sizing: border-box; }
|
||||
.input-with-button { display: flex; gap: 8px; }
|
||||
.input-with-button input { flex-grow: 1; }
|
||||
|
||||
/* Mini Grid Statistik */
|
||||
.stats-config-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 15px; }
|
||||
.stat-config-box { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 15px; }
|
||||
.stat-config-box h4 { margin: 0 0 12px; font-size: 13px; color: #0b4a8e; font-weight: 700; border-bottom: 1px solid #e2e8f0; padding-bottom: 6px; }
|
||||
|
||||
/* Presets Warna */
|
||||
.preset-grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 10px; }
|
||||
.preset-pill { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; cursor: pointer; transition: all .2s; }
|
||||
.preset-pill:hover { border-color: #0b4a8e; transform: translateX(3px); }
|
||||
.swatch-group { display: flex; border-radius: 20px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1); }
|
||||
.swatch-item { width: 18px; height: 18px; }
|
||||
.preset-name { font-size: 12px; font-weight: 600; color: #334155; }
|
||||
|
||||
/* Sidebar Kanan Sticky */
|
||||
.edukarsa-admin-sidebar { position: sticky; top: 45px; }
|
||||
.color-picker-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
|
||||
.color-picker-row input[type="color"] { border: none; width: 34px; height: 34px; border-radius: 6px; cursor: pointer; background: transparent; }
|
||||
|
||||
@media (max-width: 1100px) {
|
||||
.edukarsa-admin-layout { grid-template-columns: 1fr; }
|
||||
.edukarsa-admin-sidebar { position: static; }
|
||||
.stats-config-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="wrap">
|
||||
<h1>Pengaturan Tema EduKarsa</h1>
|
||||
<div class="wrap edukarsa-admin-wrap">
|
||||
<h1 style="font-weight: 800; font-size: 24px; margin-bottom: 20px;">Pengaturan Tema EduKarsa</h1>
|
||||
<?php settings_errors(); ?>
|
||||
|
||||
<form action="options.php" method="post">
|
||||
<?php settings_fields( 'edukarsa_settings_group' ); ?>
|
||||
|
||||
<!-- PANEL: TIPOGRAFI & SKEMA WARNA -->
|
||||
<div class="edukarsa-panel">
|
||||
<h2>🎨 Tipografi & Skema Warna Global</h2>
|
||||
<table class="form-table">
|
||||
<tr>
|
||||
<th>Pilihan Font Tema</th>
|
||||
<td>
|
||||
<select name="edukarsa_font_choice" id="edukarsa_font_choice" style="min-width: 240px; padding: 5px;">
|
||||
<option value="plus_jakarta_sans" <?php selected( 'plus_jakarta_sans', $font_current ); ?>>Plus Jakarta Sans (Default Rekomendasi)</option>
|
||||
<option value="inter" <?php selected( 'inter', $font_current ); ?>>Inter (Modern & Netral)</option>
|
||||
<option value="poppins" <?php selected( 'poppins', $font_current ); ?>>Poppins (Geometris & Tegas)</option>
|
||||
<option value="roboto" <?php selected( 'roboto', $font_current ); ?>>Roboto (Klasik & Ringkas)</option>
|
||||
<option value="system" <?php selected( 'system', $font_current ); ?>>System Native (Super Cepat, Tanpa Font Luar)</option>
|
||||
</select>
|
||||
<p class="description">Font utama yang diterapkan ke seluruh halaman publikasi.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Warna Primer (Primary)</th>
|
||||
<td>
|
||||
<div class="color-field-wrap">
|
||||
<input type="color" name="edukarsa_primary_color" value="<?php echo esc_attr( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?>">
|
||||
<code><?php echo esc_html( get_option( 'edukarsa_primary_color', '#0b4a8e' ) ); ?></code>
|
||||
<div class="edukarsa-admin-layout">
|
||||
|
||||
<!-- KOLOM KIRI (PENGATURAN UTAMA) -->
|
||||
<div class="edukarsa-admin-main">
|
||||
|
||||
<!-- 1. Header, Logo & Slider -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>🏛️ 1. Header, Logo & Slider</h2>
|
||||
</div>
|
||||
<p class="description">Warna identitas kampus (header bar, tombol primer, latar footer, dan border utama).</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Warna Sekunder / Aksen</th>
|
||||
<td>
|
||||
<div class="color-field-wrap">
|
||||
<input type="color" name="edukarsa_secondary_color" value="<?php echo esc_attr( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?>">
|
||||
<code><?php echo esc_html( get_option( 'edukarsa_secondary_color', '#1a73e8' ) ); ?></code>
|
||||
<div class="edukarsa-card-body">
|
||||
<div class="form-field-group">
|
||||
<label>Logo Website (Header)</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" placeholder="https://...">
|
||||
<button type="button" class="button btn-upload" data-target="#edukarsa_header_logo">Pilih Logo</button>
|
||||
</div>
|
||||
<p class="description">Warna sorotan interaktif (hover tombol, kartu statistik, dan aksen badge).</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Warna Teks Judul (Heading)</th>
|
||||
<td>
|
||||
<div class="color-field-wrap">
|
||||
<input type="color" name="edukarsa_heading_color" value="<?php echo esc_attr( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?>">
|
||||
<code><?php echo esc_html( get_option( 'edukarsa_heading_color', '#0f172a' ) ); ?></code>
|
||||
</div>
|
||||
<p class="description">Warna teks untuk seluruh judul seksi, judul berita, dan header halaman.</p>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- PANEL 1: LOGO & STATISTIK -->
|
||||
<div class="edukarsa-panel">
|
||||
<h2>1. Header, Logo & Slider</h2>
|
||||
<table class="form-table">
|
||||
<tr><th>Logo Website</th><td><input type="text" id="edukarsa_header_logo" name="edukarsa_header_logo" value="<?php echo esc_url(get_option('edukarsa_header_logo')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#edukarsa_header_logo" value="Upload Logo" /></td></tr>
|
||||
</table>
|
||||
<hr>
|
||||
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?> /> <label>Tampilkan Slider Atas</label></div>
|
||||
<div class="toggle-row" style="margin-top:10px;"><input type="checkbox" class="section-toggle" data-target=".row-stats" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?> /> <label>Tampilkan 3 Kotak Statistik</label></div>
|
||||
<table class="form-table row-stats hidden-row">
|
||||
<div class="switch-row-inline" style="margin-top: 20px;">
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan Slider Atas</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_slider" value="1" <?php checked(1, get_option('edukarsa_tampil_slider', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan 3 Kotak Statistik</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#stats-settings-box" name="edukarsa_tampil_stats" value="1" <?php checked(1, get_option('edukarsa_tampil_stats', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 Mini Card Statistik yang Rapi -->
|
||||
<div id="stats-settings-box">
|
||||
<div class="stats-config-grid">
|
||||
<?php for($i=1; $i<=3; $i++) : ?>
|
||||
<tr>
|
||||
<th>Statistik <?php echo $i; ?></th>
|
||||
<td>
|
||||
Ikon: <input type="text" id="stat<?php echo $i; ?>_icon" name="edukarsa_stat<?php echo $i; ?>_icon" value="<?php echo esc_url(get_option('edukarsa_stat'.$i.'_icon')); ?>" class="regular-text"><input type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon" value="Upload" /><br>
|
||||
Angka: <input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" class="regular-text"><br>
|
||||
Judul: <input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" class="regular-text"><br>
|
||||
Subteks: <input type="text" name="edukarsa_stat<?php echo $i; ?>_desc" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_desc')); ?>" class="regular-text">
|
||||
</td>
|
||||
</tr>
|
||||
<div class="stat-config-box">
|
||||
<h4>Statistik <?php echo $i; ?></h4>
|
||||
<div class="form-field-group">
|
||||
<label>Ikon / Gambar</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="stat<?php echo $i; ?>_icon" name="edukarsa_stat<?php echo $i; ?>_icon" value="<?php echo esc_url(get_option('edukarsa_stat'.$i.'_icon')); ?>" placeholder="URL Ikon">
|
||||
<button type="button" class="button btn-upload" data-target="#stat<?php echo $i; ?>_icon">Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Angka / Capaian</label>
|
||||
<input type="text" name="edukarsa_stat<?php echo $i; ?>_angka" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_angka')); ?>" placeholder="cth: 98%">
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Judul Statistik</label>
|
||||
<input type="text" name="edukarsa_stat<?php echo $i; ?>_label" value="<?php echo esc_attr(get_option('edukarsa_stat'.$i.'_label')); ?>" placeholder="cth: Akreditasi A">
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>Deskripsi Ringkas</label>
|
||||
<textarea name="edukarsa_stat<?php echo $i; ?>_desc" rows="2"><?php echo esc_textarea(get_option('edukarsa_stat'.$i.'_desc')); ?></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<?php endfor; ?>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PANEL 2: ABOUT -->
|
||||
<div class="edukarsa-panel">
|
||||
<h2>2. Tentang Kami</h2>
|
||||
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-about" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?> /> <label>Tampilkan Seksi About</label></div>
|
||||
<table class="form-table row-about hidden-row">
|
||||
<tr><th>Foto</th><td><input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>"><input type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek" value="Upload" /></td></tr>
|
||||
<tr><th>Nama</th><td><input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>" class="large-text" /></td></tr>
|
||||
<tr><th>Sub-Judul</th><td><input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>" class="large-text" /></td></tr>
|
||||
<tr><th>Teks</th><td><textarea name="edukarsa_teks_sambutan" rows="4" class="large-text"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea></td></tr>
|
||||
<tr><th>Link</th><td><input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>"></td></tr>
|
||||
</table>
|
||||
<!-- 2. Tentang Kami -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>👤 2. Sambutan & Profil Pimpinan</h2>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#about-settings-box" name="edukarsa_tampil_about" value="1" <?php checked(1, get_option('edukarsa_tampil_about', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="edukarsa-card-body" id="about-settings-box">
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Foto Pimpinan (Portrait 3:4)</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="edukarsa_foto_kepsek" name="edukarsa_foto_kepsek" value="<?php echo esc_url(get_option('edukarsa_foto_kepsek')); ?>">
|
||||
<button type="button" class="button btn-upload" data-target="#edukarsa_foto_kepsek">Pilih</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Nama Lengkap & Gelar</label>
|
||||
<input type="text" name="edukarsa_nama_kepsek" value="<?php echo esc_attr(get_option('edukarsa_nama_kepsek')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Sub-Judul (cth: Rektor / Kepala Sekolah)</label>
|
||||
<input type="text" name="edukarsa_subtitle_about" value="<?php echo esc_attr(get_option('edukarsa_subtitle_about')); ?>">
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Tautan Detail (URL Profil)</label>
|
||||
<input type="text" name="edukarsa_link_about" value="<?php echo esc_attr(get_option('edukarsa_link_about')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>Teks Sambutan</label>
|
||||
<textarea name="edukarsa_teks_sambutan" rows="4"><?php echo esc_textarea(get_option('edukarsa_teks_sambutan')); ?></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PANEL 3: PROGRAM & KEUNGGULAN -->
|
||||
<div class="edukarsa-panel">
|
||||
<h2>3. Program, Milestones, & Keunggulan</h2>
|
||||
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?> /> <label>Tampilkan 4 Milestone</label></div>
|
||||
<div class="toggle-row" style="margin-top:10px;"><input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?> /> <label>Tampilkan Program (3 Grid)</label></div>
|
||||
<hr>
|
||||
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?> /> <label>Tampilkan Keunggulan (9 Grid)</label></div>
|
||||
<table class="form-table">
|
||||
<tr><th>Subtitle (Contoh: WHY CHOOSE US)</th><td><input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>" class="regular-text"></td></tr>
|
||||
<tr><th>Judul (Contoh: Keunggulan Program)</th><td><input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>" class="regular-text"></td></tr>
|
||||
</table>
|
||||
<!-- 3. Program, Milestone & Keunggulan -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>⭐ 3. Program, Milestones, & Keunggulan</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
<div class="switch-row-inline">
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan 4 Milestone</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_milestone" value="1" <?php checked(1, get_option('edukarsa_tampil_milestone', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan Program (3 Grid)</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_program" value="1" <?php checked(1, get_option('edukarsa_tampil_program', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan Keunggulan (9 Grid)</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_keunggulan" value="1" <?php checked(1, get_option('edukarsa_tampil_keunggulan', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PANEL 4: VIDEO & PARALLAX -->
|
||||
<div class="edukarsa-panel">
|
||||
<h2>4. Video & Latar Parallax (Area Biru Tengah)</h2>
|
||||
<table class="form-table">
|
||||
<tr><th>Gambar Parallax</th><td><input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>"><input type="button" class="button btn-upload" data-target="#mid_bg_image" value="Upload" /></td></tr>
|
||||
<tr><th>Warna Overlay Parallax</th><td><input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>"></td></tr>
|
||||
</table>
|
||||
<hr>
|
||||
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-video" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?> /> <label>Tampilkan Video</label></div>
|
||||
<table class="form-table row-video hidden-row">
|
||||
<tr><th>Video 1</th><td>Thumb: <input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid1_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>"></td></tr>
|
||||
<tr><th>Video 2</th><td>Thumb: <input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>"><input type="button" class="button btn-upload" data-target="#vid2_thumb" value="Up" /><br>URL: <input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>"></td></tr>
|
||||
</table>
|
||||
<div class="form-grid-2" style="margin-top: 15px;">
|
||||
<div class="form-field-group">
|
||||
<label>Subtitle Keunggulan</label>
|
||||
<input type="text" name="edukarsa_keunggulan_subtitle" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_subtitle', 'WHY CHOOSE US')); ?>">
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Judul Seksi Keunggulan</label>
|
||||
<input type="text" name="edukarsa_keunggulan_title" value="<?php echo esc_attr(get_option('edukarsa_keunggulan_title', 'Keunggulan Program')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PANEL 5: CTA & FOOTER -->
|
||||
<div class="edukarsa-panel">
|
||||
<h2>5. CTA, Berita, Footer & Sosial Media</h2>
|
||||
<div class="toggle-row"><input type="checkbox" class="section-toggle" data-target=".row-cta" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?> /> <label>Tampilkan CTA PPDB</label></div>
|
||||
<table class="form-table row-cta hidden-row">
|
||||
<tr><th>Gambar Bg</th><td><input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>"><input type="button" class="button btn-upload" data-target="#cta_bg" value="Up" /></td></tr>
|
||||
<tr><th>Judul</th><td><input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>" class="large-text"></td></tr>
|
||||
<tr><th>Tombol</th><td>Teks: <input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks')); ?>"><br>URL: <input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>"></td></tr>
|
||||
</table>
|
||||
<hr>
|
||||
<div class="toggle-row"><input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?> /> <label>Tampilkan Berita</label></div>
|
||||
<table class="form-table">
|
||||
<tr><th>Judul Seksi Berita</th><td><input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>" class="regular-text"></td></tr>
|
||||
</table>
|
||||
|
||||
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Footer</h3>
|
||||
<table class="form-table">
|
||||
<tr><th>Alamat</th><td><textarea name="edukarsa_footer_alamat" rows="2" class="large-text"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea></td></tr>
|
||||
<tr><th>Telepon</th><td><input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>"></td></tr>
|
||||
<tr><th>Email</th><td><input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>"></td></tr>
|
||||
<tr><th>Copyright</th><td><input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>"></td></tr>
|
||||
</table>
|
||||
|
||||
<h3 style="margin-top:20px; border-top:1px solid #eee; padding-top:10px;">Sosial Media</h3>
|
||||
<table class="form-table">
|
||||
<tr><th>Facebook</th><td><input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>> Aktifkan | URL: <input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>"></td></tr>
|
||||
<tr><th>Instagram</th><td><input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>> Aktifkan | URL: <input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>"></td></tr>
|
||||
<tr><th>YouTube</th><td><input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>> Aktifkan | URL: <input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>"></td></tr>
|
||||
</table>
|
||||
<!-- 4. Video & Parallax Area -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>🎬 4. Video & Parallax (Area Tengah)</h2>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#video-settings-box" name="edukarsa_tampil_video" value="1" <?php checked(1, get_option('edukarsa_tampil_video', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="edukarsa-card-body" id="video-settings-box">
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Gambar Latar Parallax</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="mid_bg_image" name="edukarsa_mid_bg_image" value="<?php echo esc_url(get_option('edukarsa_mid_bg_image')); ?>">
|
||||
<button type="button" class="button btn-upload" data-target="#mid_bg_image">Pilih</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Warna Overlay Parallax</label>
|
||||
<div style="display:flex; align-items:center; gap:10px;">
|
||||
<input type="color" name="edukarsa_mid_bg_color" value="<?php echo esc_attr(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?>">
|
||||
<code><?php echo esc_html(get_option('edukarsa_mid_bg_color', '#0b4a8e')); ?></code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="submit"><?php submit_button( 'Simpan Pengaturan', 'primary', 'submit', false ); ?></p>
|
||||
<div class="form-grid-2">
|
||||
<div class="stat-config-box">
|
||||
<h4>Video 1</h4>
|
||||
<div class="form-field-group">
|
||||
<label>Thumbnail Video 1</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="vid1_thumb" name="edukarsa_video1_thumb" value="<?php echo esc_url(get_option('edukarsa_video1_thumb')); ?>">
|
||||
<button type="button" class="button btn-upload" data-target="#vid1_thumb">Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>URL Video 1 (YouTube/Embed)</label>
|
||||
<input type="text" name="edukarsa_video1_url" value="<?php echo esc_attr(get_option('edukarsa_video1_url')); ?>" placeholder="https://youtube.com/watch?v=...">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-config-box">
|
||||
<h4>Video 2</h4>
|
||||
<div class="form-field-group">
|
||||
<label>Thumbnail Video 2</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="vid2_thumb" name="edukarsa_video2_thumb" value="<?php echo esc_url(get_option('edukarsa_video2_thumb')); ?>">
|
||||
<button type="button" class="button btn-upload" data-target="#vid2_thumb">Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>URL Video 2 (YouTube/Embed)</label>
|
||||
<input type="text" name="edukarsa_video2_url" value="<?php echo esc_attr(get_option('edukarsa_video2_url')); ?>" placeholder="https://youtube.com/watch?v=...">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 5. CTA & Berita -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>📢 5. CTA Pendaftaran & Berita</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
<div class="switch-row-inline">
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan CTA Banner</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" class="section-toggle" data-target="#cta-settings-box" name="edukarsa_tampil_cta" value="1" <?php checked(1, get_option('edukarsa_tampil_cta', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Tampilkan Berita Kampus</span>
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_news" value="1" <?php checked(1, get_option('edukarsa_tampil_news', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="cta-settings-box" class="stat-config-box" style="margin-bottom: 20px;">
|
||||
<h4>Konfigurasi CTA PPDB / PMB</h4>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Gambar Latar CTA</label>
|
||||
<div class="input-with-button">
|
||||
<input type="text" id="cta_bg" name="edukarsa_cta_bg" value="<?php echo esc_url(get_option('edukarsa_cta_bg')); ?>">
|
||||
<button type="button" class="button btn-upload" data-target="#cta_bg">Up</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Teks Tombol CTA</label>
|
||||
<input type="text" name="edukarsa_cta_btn_teks" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_teks', 'Daftar Sekarang')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>Judul Ajakan CTA</label>
|
||||
<input type="text" name="edukarsa_cta_title" value="<?php echo esc_attr(get_option('edukarsa_cta_title')); ?>">
|
||||
</div>
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>Tautan Tombol CTA</label>
|
||||
<input type="text" name="edukarsa_cta_btn_url" value="<?php echo esc_attr(get_option('edukarsa_cta_btn_url')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>Judul Seksi Berita</label>
|
||||
<input type="text" name="edukarsa_news_title" value="<?php echo esc_attr(get_option('edukarsa_news_title', 'News & Update')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 6. Footer & Kontak -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>📞 6. Informasi Kontak Footer & Media Sosial</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
<div class="form-field-group">
|
||||
<label>Alamat Lengkap Institusi</label>
|
||||
<textarea name="edukarsa_footer_alamat" rows="2"><?php echo esc_textarea(get_option('edukarsa_footer_alamat')); ?></textarea>
|
||||
</div>
|
||||
<div class="form-grid-2">
|
||||
<div class="form-field-group">
|
||||
<label>Nomor Telepon / WhatsApp</label>
|
||||
<input type="text" name="edukarsa_footer_telp" value="<?php echo esc_attr(get_option('edukarsa_footer_telp')); ?>">
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Alamat Email Resmi</label>
|
||||
<input type="text" name="edukarsa_footer_email" value="<?php echo esc_attr(get_option('edukarsa_footer_email')); ?>">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-field-group">
|
||||
<label>Teks Hak Cipta (Copyright)</label>
|
||||
<input type="text" name="edukarsa_footer_copyright" value="<?php echo esc_attr(get_option('edukarsa_footer_copyright')); ?>">
|
||||
</div>
|
||||
|
||||
<h4 style="margin: 20px 0 10px; font-size:13px; color:#0b4a8e;">Akun Media Sosial</h4>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Facebook</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
<input type="text" name="edukarsa_footer_fb" value="<?php echo esc_attr(get_option('edukarsa_footer_fb')); ?>" placeholder="https://facebook.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_fb" value="1" <?php checked(1, get_option('edukarsa_tampil_fb', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">Instagram</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
<input type="text" name="edukarsa_footer_ig" value="<?php echo esc_attr(get_option('edukarsa_footer_ig')); ?>" placeholder="https://instagram.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_ig" value="1" <?php checked(1, get_option('edukarsa_tampil_ig', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="switch-row">
|
||||
<span class="switch-label">YouTube</span>
|
||||
<div style="display:flex; align-items:center; gap:12px; width:70%;">
|
||||
<input type="text" name="edukarsa_footer_yt" value="<?php echo esc_attr(get_option('edukarsa_footer_yt')); ?>" placeholder="https://youtube.com/..." style="flex-grow:1; border:1px solid #cbd5e1; border-radius:6px; padding:6px 10px;">
|
||||
<label class="edukarsa-switch">
|
||||
<input type="checkbox" name="edukarsa_tampil_yt" value="1" <?php checked(1, get_option('edukarsa_tampil_yt', 1)); ?>>
|
||||
<span class="slider-round"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- KOLOM KANAN (SIDEBAR COMMAND PANEL) -->
|
||||
<div class="edukarsa-admin-sidebar">
|
||||
|
||||
<!-- Box Aksi Simpan -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>💾 Publikasi</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body text-center" style="padding:18px;">
|
||||
<p style="font-size:12px; color:#64748b; margin-top:0; margin-bottom:15px;">Simpan seluruh konfigurasi desain dan seksi halaman EduKarsa.</p>
|
||||
<?php submit_button( 'Simpan Pengaturan', 'primary large', 'submit', false, array('style'=>'width:100%; border-radius:6px; font-weight:700; padding:10px;') ); ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box Tipografi -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>🔤 Tipografi Font</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
<div class="form-field-group" style="margin-bottom:0;">
|
||||
<label>Pilihan Font Utama</label>
|
||||
<select name="edukarsa_font_choice" id="edukarsa_font_choice" style="width:100%; padding:8px; border-radius:6px;">
|
||||
<option value="plus_jakarta_sans" <?php selected( 'plus_jakarta_sans', $font_current ); ?>>Plus Jakarta Sans (Rekomendasi)</option>
|
||||
<option value="inter" <?php selected( 'inter', $font_current ); ?>>Inter (Modern UI)</option>
|
||||
<option value="poppins" <?php selected( 'poppins', $font_current ); ?>>Poppins (Geometris)</option>
|
||||
<option value="roboto" <?php selected( 'roboto', $font_current ); ?>>Roboto (Klasik)</option>
|
||||
<option value="system" <?php selected( 'system', $font_current ); ?>>System Native (Super Cepat)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Box Palet Warna & Presets -->
|
||||
<div class="edukarsa-card">
|
||||
<div class="edukarsa-card-header">
|
||||
<h2>🎨 Skema Warna</h2>
|
||||
</div>
|
||||
<div class="edukarsa-card-body">
|
||||
|
||||
<label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:10px;">Pilih Preset Instan</label>
|
||||
|
||||
<div class="preset-grid">
|
||||
<div class="preset-pill" data-p="#0b4a8e" data-s="#1a73e8" data-h="#0f172a">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#0b4a8e;"></span>
|
||||
<span class="swatch-item" style="background:#1a73e8;"></span>
|
||||
</div>
|
||||
<span class="preset-name">Classic Navy (Default)</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#065f46" data-s="#10b981" data-h="#064e3b">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#065f46;"></span>
|
||||
<span class="swatch-item" style="background:#10b981;"></span>
|
||||
</div>
|
||||
<span class="preset-name">Islamic Emerald Green</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#881337" data-s="#e11d48" data-h="#4c0519">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#881337;"></span>
|
||||
<span class="swatch-item" style="background:#e11d48;"></span>
|
||||
</div>
|
||||
<span class="preset-name">Prestige Maroon</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#0f766e" data-s="#06b6d4" data-h="#134e4a">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#0f766e;"></span>
|
||||
<span class="swatch-item" style="background:#06b6d4;"></span>
|
||||
</div>
|
||||
<span class="preset-name">Techno Teal</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#581c87" data-s="#8b5cf6" data-h="#3b0764">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#581c87;"></span>
|
||||
<span class="swatch-item" style="background:#8b5cf6;"></span>
|
||||
</div>
|
||||
<span class="preset-name">Royal Violet</span>
|
||||
</div>
|
||||
<div class="preset-pill" data-p="#b45309" data-s="#f59e0b" data-h="#78350f">
|
||||
<div class="swatch-group">
|
||||
<span class="swatch-item" style="background:#b45309;"></span>
|
||||
<span class="swatch-item" style="background:#f59e0b;"></span>
|
||||
</div>
|
||||
<span class="preset-name">Autumn Gold</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr style="margin:20px 0; border:none; border-top:1px solid #f1f5f9;">
|
||||
|
||||
<label style="font-weight:700; font-size:12px; color:#64748b; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:12px;">Sesuaikan Manual</label>
|
||||
|
||||
<div class="color-picker-row">
|
||||
<span style="font-size:13px; font-weight:600;">Warna Primer</span>
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<input type="color" id="primary_picker" name="edukarsa_primary_color" value="<?php echo esc_attr( $primary_color ); ?>">
|
||||
<code id="primary_code"><?php echo esc_html( $primary_color ); ?></code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-picker-row">
|
||||
<span style="font-size:13px; font-weight:600;">Warna Aksen</span>
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<input type="color" id="secondary_picker" name="edukarsa_secondary_color" value="<?php echo esc_attr( $secondary_color ); ?>">
|
||||
<code id="secondary_code"><?php echo esc_html( $secondary_color ); ?></code>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-picker-row">
|
||||
<span style="font-size:13px; font-weight:600;">Warna Judul</span>
|
||||
<div style="display:flex; align-items:center; gap:8px;">
|
||||
<input type="color" id="heading_picker" name="edukarsa_heading_color" value="<?php echo esc_attr( $heading_color ); ?>">
|
||||
<code id="heading_code"><?php echo esc_html( $heading_color ); ?></code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($){
|
||||
function handleToggles() { $('.section-toggle').each(function(){ var t = $(this).data('target'); if($(this).is(':checked')){ $(t).fadeIn(200); } else { $(t).hide(); } }); }
|
||||
$('.section-toggle').change(handleToggles); handleToggles();
|
||||
// 1. Logika Toggle Seksi Dinamis
|
||||
function syncToggles() {
|
||||
$('.section-toggle').each(function(){
|
||||
var target = $(this).data('target');
|
||||
if ($(this).is(':checked')) {
|
||||
$(target).slideDown(200);
|
||||
} else {
|
||||
$(target).slideUp(200);
|
||||
}
|
||||
});
|
||||
}
|
||||
$('.section-toggle').change(syncToggles);
|
||||
syncToggles();
|
||||
|
||||
// 2. Klik Preset Palet Warna
|
||||
$('.preset-pill').click(function(){
|
||||
var p = $(this).data('p');
|
||||
var s = $(this).data('s');
|
||||
var h = $(this).data('h');
|
||||
|
||||
$('#primary_picker').val(p);
|
||||
$('#primary_code').text(p);
|
||||
|
||||
$('#secondary_picker').val(s);
|
||||
$('#secondary_code').text(s);
|
||||
|
||||
$('#heading_picker').val(h);
|
||||
$('#heading_code').text(h);
|
||||
|
||||
$('.preset-pill').css('border-color', '#e2e8f0');
|
||||
$(this).css('border-color', '#0b4a8e');
|
||||
});
|
||||
|
||||
// 3. Listener Manual Picker
|
||||
$('#primary_picker').on('input change', function(){ $('#primary_code').text($(this).val()); });
|
||||
$('#secondary_picker').on('input change', function(){ $('#secondary_code').text($(this).val()); });
|
||||
$('#heading_picker').on('input change', function(){ $('#heading_code').text($(this).val()); });
|
||||
|
||||
// 4. Native WP Media Uploader
|
||||
var mediaUploader;
|
||||
$('.btn-upload').click(function(e) {
|
||||
e.preventDefault(); var target = $(this).data('target');
|
||||
if (mediaUploader) { mediaUploader.targetInput = target; mediaUploader.open(); return; }
|
||||
mediaUploader = wp.media.frames.file_frame = wp.media({ title: 'Pilih Gambar', button: { text: 'Pilih' }, multiple: false });
|
||||
mediaUploader.targetInput = target;
|
||||
mediaUploader.on('select', function() { $(mediaUploader.targetInput).val(mediaUploader.state().get('selection').first().toJSON().url); });
|
||||
e.preventDefault();
|
||||
var targetInput = $(this).data('target');
|
||||
if (mediaUploader) {
|
||||
mediaUploader.targetInput = targetInput;
|
||||
mediaUploader.open();
|
||||
return;
|
||||
}
|
||||
mediaUploader = wp.media.frames.file_frame = wp.media({
|
||||
title: 'Pilih Berkas Media',
|
||||
button: { text: 'Gunakan Media Ini' },
|
||||
multiple: false
|
||||
});
|
||||
mediaUploader.targetInput = targetInput;
|
||||
mediaUploader.on('select', function() {
|
||||
var attachment = mediaUploader.state().get('selection').first().toJSON();
|
||||
$(mediaUploader.targetInput).val(attachment.url);
|
||||
});
|
||||
mediaUploader.open();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user