PluginProbe
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder / 51.1.78
King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder v51.1.78
51.1.83 51.1.82 51.1.81 51.1.79 51.1.78 51.1.77 51.1.76 51.1.74 51.1.75 51.1.65 51.1.64 51.1.63 trunk 51.1.14 51.1.2 51.1.35 51.1.36 51.1.37 51.1.38 51.1.39 51.1.44 51.1.45 51.1.46 51.1.47 51.1.49 All 37 releases
king-addons / includes / extensions / Age_Gate / templates / admin-page.php

admin-page.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.78, at includes/extensions/Age_Gate/templates/admin-page.php

831 lines 51.1 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Admin page for Age Gate - V3 Premium style inspired Design.
4 *
5 * @package King_Addons
6 */
7
8 use King_Addons\Age_Gate;
9
10 if (!defined('ABSPATH')) {
11 exit;
12 }
13
14 // Enqueue shared V3 styles
15 wp_enqueue_style(
16 'king-addons-admin-v3',
17 KING_ADDONS_URL . 'includes/admin/layouts/shared/admin-v3-styles.css',
18 [],
19 KING_ADDONS_VERSION
20 );
21
22 $pages = get_pages(['number' => 200]);
23 $page_options = [];
24 foreach ($pages as $page) {
25 $page_options[$page->ID] = $page->post_title;
26 }
27
28 $post_types = get_post_types(['public' => true], 'objects');
29 $elementor_templates = get_posts([
30 'post_type' => 'elementor_library',
31 'posts_per_page' => 50,
32 ]);
33
34 // Normalize options to prevent undefined index notices on fresh installs/older saved settings.
35 $options = (isset($options) && is_array($options)) ? $options : [];
36 $is_premium = isset($is_premium) ? (bool) $is_premium : false;
37
38 $options['general'] = wp_parse_args($options['general'] ?? [], [
39 'enabled' => 0,
40 'audience' => 'guests',
41 'mode' => 'confirm',
42 'min_age' => 18,
43 'cookie_days' => 30,
44 ]);
45
46 $options['display'] = wp_parse_args($options['display'] ?? [], [
47 'scope' => 'site',
48 'exclude_ids' => [],
49 'mode' => 'global',
50 'cpt_scope' => [],
51 'archives' => 0,
52 ]);
53 $options['display']['exclude_ids'] = array_map('intval', (array) $options['display']['exclude_ids']);
54 $options['display']['cpt_scope'] = array_values(array_map('strval', (array) $options['display']['cpt_scope']));
55
56 $options['design'] = wp_parse_args($options['design'] ?? [], [
57 'template' => 'center-card',
58 'overlay_color' => '#000000',
59 'overlay_opacity' => 0.6,
60 'card_background' => '#ffffff',
61 'card_width' => 420,
62 'title' => __('Age Verification', 'king-addons'),
63 'subtitle' => __('You must be 18+ to enter.', 'king-addons'),
64 'text_color' => '#111111',
65 'button_yes' => __('Yes', 'king-addons'),
66 'button_no' => __('No', 'king-addons'),
67 'title_size' => 24,
68 'body_size' => 16,
69 'title_weight' => 700,
70 'body_weight' => 400,
71 'button_yes_color' => '#ffffff',
72 'button_yes_bg' => '#6d28d9',
73 'button_no_color' => '#111111',
74 'button_no_bg' => '#e5e7eb',
75 'button_yes_hover_bg' => '#5b21b6',
76 'button_yes_hover_color' => '#ffffff',
77 'button_no_hover_bg' => '#d1d5db',
78 'button_no_hover_color' => '#111111',
79 'animation' => 'fade',
80 'elementor_template' => 0,
81 'logo' => '',
82 'background_image' => '',
83 ]);
84 $options['design']['elementor_template'] = (int) $options['design']['elementor_template'];
85
86 $options['behaviour'] = wp_parse_args($options['behaviour'] ?? [], [
87 'deny_action' => 'redirect_url',
88 'deny_redirect_page' => 0,
89 'deny_redirect_url' => 'https://google.com',
90 'block_message' => __('Access denied.', 'king-addons'),
91 'reset_on_rule_change' => 0,
92 'repeat_mode' => 'days',
93 'consent_checkbox' => 0,
94 ]);
95 $options['behaviour']['deny_action'] = ($options['behaviour']['deny_action'] === 'redirect') ? 'redirect_page' : $options['behaviour']['deny_action'];
96 $options['behaviour']['deny_redirect_page'] = (int) $options['behaviour']['deny_redirect_page'];
97 $options['behaviour']['deny_redirect_url'] = is_string($options['behaviour']['deny_redirect_url']) ? trim($options['behaviour']['deny_redirect_url']) : 'https://google.com';
98
99 $options['dob'] = wp_parse_args($options['dob'] ?? [], [
100 'format' => 'dmy',
101 'max_age' => 120,
102 'error_invalid' => __('Please enter a valid date.', 'king-addons'),
103 'error_denied' => __('You do not meet the minimum age requirement.', 'king-addons'),
104 ]);
105 $options['dob']['max_age'] = (int) $options['dob']['max_age'];
106
107 $options['geo'] = wp_parse_args($options['geo'] ?? [], [
108 'enabled' => 0,
109 'default_age' => 18,
110 'map' => [],
111 ]);
112 $options['geo']['default_age'] = (int) $options['geo']['default_age'];
113 if (is_string($options['geo']['map'])) {
114 $map = [];
115 foreach (preg_split('/\r\n|\r|\n/', $options['geo']['map']) as $line) {
116 $line = trim($line);
117 if ($line === '' || strpos($line, '=') === false) {
118 continue;
119 }
120 [$code, $age] = array_map('trim', explode('=', $line, 2));
121 if ($code === '') {
122 continue;
123 }
124 $map[strtoupper($code)] = (int) $age;
125 }
126 $options['geo']['map'] = $map;
127 }
128 if (!is_array($options['geo']['map'])) {
129 $options['geo']['map'] = [];
130 }
131
132 // Theme mode is per-user
133 $theme_mode = get_user_meta(get_current_user_id(), 'king_addons_theme_mode', true);
134 $allowed_theme_modes = ['dark', 'light', 'auto'];
135 if (!in_array($theme_mode, $allowed_theme_modes, true)) {
136 $theme_mode = 'dark';
137 }
138 ?>
139 <script>
140 (function() {
141 const mode = '<?php echo esc_js($theme_mode); ?>';
142 const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
143 const isDark = mode === 'auto' ? !!(mql && mql.matches) : mode === 'dark';
144 document.documentElement.classList.toggle('ka-v3-dark', isDark);
145 document.body && document.body.classList.add('ka-admin-v3');
146 document.body && document.body.classList.toggle('ka-v3-dark', isDark);
147 })();
148 </script>
149
150 <div class="ka-admin-wrap">
151 <!-- Header -->
152 <div class="ka-admin-header">
153 <div class="ka-admin-header-left">
154 <div class="ka-admin-header-icon purple">
155 <span class="dashicons dashicons-lock"></span>
156 </div>
157 <div>
158 <h1 class="ka-admin-title"><?php esc_html_e('Age Gate', 'king-addons'); ?></h1>
159 <p class="ka-admin-subtitle"><?php esc_html_e('Age verification overlay for restricted content', 'king-addons'); ?></p>
160 </div>
161 </div>
162 <div class="ka-admin-header-actions">
163 <span class="ka-status <?php echo !empty($options['general']['enabled']) ? 'ka-status-enabled' : 'ka-status-disabled'; ?>">
164 <span class="ka-status-dot"></span>
165 <?php echo !empty($options['general']['enabled']) ? esc_html__('Enabled', 'king-addons') : esc_html__('Disabled', 'king-addons'); ?>
166 </span>
167 <div class="ka-v3-segmented" id="ka-v3-theme-segment" role="radiogroup" aria-label="Theme" data-active="<?php echo esc_attr($theme_mode); ?>">
168 <span class="ka-v3-segmented-indicator" aria-hidden="true"></span>
169 <button type="button" class="ka-v3-segmented-btn" data-theme="light" aria-pressed="<?php echo $theme_mode === 'light' ? 'true' : 'false'; ?>">
170 <span class="ka-v3-segmented-icon" aria-hidden="true">☀︎</span>
171 <?php esc_html_e('Light', 'king-addons'); ?>
172 </button>
173 <button type="button" class="ka-v3-segmented-btn" data-theme="dark" aria-pressed="<?php echo $theme_mode === 'dark' ? 'true' : 'false'; ?>">
174 <span class="ka-v3-segmented-icon" aria-hidden="true"></span>
175 <?php esc_html_e('Dark', 'king-addons'); ?>
176 </button>
177 <button type="button" class="ka-v3-segmented-btn" data-theme="auto" aria-pressed="<?php echo $theme_mode === 'auto' ? 'true' : 'false'; ?>">
178 <span class="ka-v3-segmented-icon" aria-hidden="true"></span>
179 <?php esc_html_e('Auto', 'king-addons'); ?>
180 </button>
181 </div>
182 </div>
183 </div>
184
185 <?php settings_errors('king_addons_age_gate'); ?>
186
187 <!-- Tabs -->
188 <div class="ka-tabs">
189 <button type="button" class="ka-tab active" data-tab="general"><?php esc_html_e('General', 'king-addons'); ?></button>
190 <button type="button" class="ka-tab" data-tab="display"><?php esc_html_e('Display Rules', 'king-addons'); ?></button>
191 <button type="button" class="ka-tab" data-tab="design"><?php esc_html_e('Design', 'king-addons'); ?></button>
192 <button type="button" class="ka-tab" data-tab="behaviour"><?php esc_html_e('Behaviour', 'king-addons'); ?></button>
193 <button type="button" class="ka-tab" data-tab="pro">
194 <?php esc_html_e('Pro Features', 'king-addons'); ?>
195 <?php if (!$is_premium): ?><span class="ka-pro-badge">PRO</span><?php endif; ?>
196 </button>
197 </div>
198
199 <form method="post" action="options.php">
200 <?php settings_fields('king_addons_age_gate'); ?>
201
202 <!-- General Tab -->
203 <div class="ka-tab-content active" data-tab="general">
204 <div class="ka-card">
205 <div class="ka-card-header">
206 <span class="dashicons dashicons-admin-settings"></span>
207 <h2><?php esc_html_e('General Settings', 'king-addons'); ?></h2>
208 </div>
209 <div class="ka-card-body">
210 <div class="ka-row">
211 <div class="ka-row-label"><?php esc_html_e('Enable', 'king-addons'); ?></div>
212 <div class="ka-row-field">
213 <label class="ka-toggle">
214 <input type="checkbox" name="king_addons_age_gate_options[general][enabled]" value="1" <?php checked(!empty($options['general']['enabled'])); ?>>
215 <span class="ka-toggle-slider"></span>
216 <span class="ka-toggle-label"><?php esc_html_e('Turn on age verification', 'king-addons'); ?></span>
217 </label>
218 </div>
219 </div>
220 <div class="ka-row">
221 <div class="ka-row-label"><?php esc_html_e('Audience', 'king-addons'); ?></div>
222 <div class="ka-row-field">
223 <select name="king_addons_age_gate_options[general][audience]">
224 <option value="guests" <?php selected($options['general']['audience'], 'guests'); ?>><?php esc_html_e('Guests only', 'king-addons'); ?></option>
225 <option value="all" <?php selected($options['general']['audience'], 'all'); ?>><?php esc_html_e('Guests and logged-in users', 'king-addons'); ?></option>
226 </select>
227 <p class="ka-row-desc"><?php esc_html_e('Show gate to logged-in users too?', 'king-addons'); ?></p>
228 </div>
229 </div>
230 <div class="ka-row">
231 <div class="ka-row-label"><?php esc_html_e('Verification Mode', 'king-addons'); ?></div>
232 <div class="ka-row-field">
233 <div class="ka-radio-group">
234 <label class="ka-radio-item">
235 <input type="radio" name="king_addons_age_gate_options[general][mode]" value="confirm" <?php checked($options['general']['mode'], 'confirm'); ?>>
236 <?php esc_html_e('Simple confirmation (Yes/No)', 'king-addons'); ?>
237 </label>
238 <label class="ka-radio-item">
239 <input type="radio" name="king_addons_age_gate_options[general][mode]" value="minimum" <?php checked($options['general']['mode'], 'minimum'); ?>>
240 <?php esc_html_e('Minimum age text', 'king-addons'); ?>
241 </label>
242 <label class="ka-radio-item" style="<?php echo $is_premium ? '' : 'opacity: 0.6;'; ?>">
243 <input type="radio" name="king_addons_age_gate_options[general][mode]" value="dob" <?php checked($options['general']['mode'], 'dob'); ?> <?php disabled(!$is_premium); ?>>
244 <?php esc_html_e('Date of birth', 'king-addons'); ?>
245 <?php if (!$is_premium): ?><span class="ka-pro-badge">PRO</span><?php endif; ?>
246 </label>
247 </div>
248 </div>
249 </div>
250 <div class="ka-row">
251 <div class="ka-row-label"><?php esc_html_e('Minimum Age', 'king-addons'); ?></div>
252 <div class="ka-row-field">
253 <input type="number" min="0" name="king_addons_age_gate_options[general][min_age]" value="<?php echo esc_attr($options['general']['min_age']); ?>" style="max-width: 100px;">
254 <span style="color: #86868b; margin-left: 8px;"><?php esc_html_e('years', 'king-addons'); ?></span>
255 </div>
256 </div>
257 <div class="ka-row">
258 <div class="ka-row-label"><?php esc_html_e('Cookie Lifetime', 'king-addons'); ?></div>
259 <div class="ka-row-field">
260 <input type="number" min="0" name="king_addons_age_gate_options[general][cookie_days]" value="<?php echo esc_attr($options['general']['cookie_days']); ?>" style="max-width: 100px;">
261 <span style="color: #86868b; margin-left: 8px;"><?php esc_html_e('days (0 = session)', 'king-addons'); ?></span>
262 </div>
263 </div>
264 </div>
265 </div>
266 </div>
267
268 <!-- Display Tab -->
269 <div class="ka-tab-content" data-tab="display">
270 <div class="ka-card">
271 <div class="ka-card-header">
272 <span class="dashicons dashicons-visibility"></span>
273 <h2><?php esc_html_e('Display Rules', 'king-addons'); ?></h2>
274 </div>
275 <div class="ka-card-body">
276 <div class="ka-row">
277 <div class="ka-row-label"><?php esc_html_e('Scope', 'king-addons'); ?></div>
278 <div class="ka-row-field">
279 <select name="king_addons_age_gate_options[display][scope]">
280 <option value="site" <?php selected($options['display']['scope'], 'site'); ?>><?php esc_html_e('Entire site', 'king-addons'); ?></option>
281 <option value="posts" <?php selected($options['display']['scope'], 'posts'); ?>><?php esc_html_e('All posts', 'king-addons'); ?></option>
282 <option value="pages" <?php selected($options['display']['scope'], 'pages'); ?>><?php esc_html_e('All pages', 'king-addons'); ?></option>
283 </select>
284 </div>
285 </div>
286 <div class="ka-row">
287 <div class="ka-row-label"><?php esc_html_e('Exclude Pages', 'king-addons'); ?></div>
288 <div class="ka-row-field">
289 <select name="king_addons_age_gate_options[display][exclude_ids][]" multiple size="5" style="max-width: 100%; min-height: 120px;">
290 <?php foreach ($page_options as $id => $title): ?>
291 <option value="<?php echo esc_attr($id); ?>" <?php selected(in_array($id, $options['display']['exclude_ids'], true)); ?>>
292 <?php echo esc_html($title); ?>
293 </option>
294 <?php endforeach; ?>
295 </select>
296 <p class="ka-row-desc"><?php esc_html_e('Hold Ctrl/Cmd to select multiple', 'king-addons'); ?></p>
297 </div>
298 </div>
299 <div class="ka-row">
300 <div class="ka-row-label"><?php esc_html_e('Display Mode', 'king-addons'); ?></div>
301 <div class="ka-row-field">
302 <select name="king_addons_age_gate_options[display][mode]" <?php disabled(!$is_premium); ?>>
303 <option value="global" <?php selected($options['display']['mode'], 'global'); ?>><?php esc_html_e('Global (use scope)', 'king-addons'); ?></option>
304 <option value="custom" <?php selected($options['display']['mode'], 'custom'); ?> <?php disabled(!$is_premium); ?>><?php esc_html_e('Custom rules', 'king-addons'); ?></option>
305 </select>
306 <?php if (!$is_premium): ?>
307 <p class="ka-row-desc"><?php esc_html_e('Custom rules available in Pro', 'king-addons'); ?></p>
308 <?php endif; ?>
309 </div>
310 </div>
311 <?php if ($is_premium): ?>
312 <div class="ka-row">
313 <div class="ka-row-label"><?php esc_html_e('Custom Post Types', 'king-addons'); ?></div>
314 <div class="ka-row-field">
315 <select name="king_addons_age_gate_options[display][cpt_scope][]" multiple size="4" style="max-width: 100%; min-height: 100px;">
316 <?php foreach ($post_types as $slug => $pt): ?>
317 <option value="<?php echo esc_attr($slug); ?>" <?php selected(in_array($slug, $options['display']['cpt_scope'], true)); ?>>
318 <?php echo esc_html($pt->labels->name); ?>
319 </option>
320 <?php endforeach; ?>
321 </select>
322 </div>
323 </div>
324 <div class="ka-row">
325 <div class="ka-row-label"><?php esc_html_e('Archives', 'king-addons'); ?></div>
326 <div class="ka-row-field">
327 <label class="ka-toggle">
328 <input type="checkbox" name="king_addons_age_gate_options[display][archives]" value="1" <?php checked(!empty($options['display']['archives'])); ?>>
329 <span class="ka-toggle-slider"></span>
330 <span class="ka-toggle-label"><?php esc_html_e('Show on archives', 'king-addons'); ?></span>
331 </label>
332 </div>
333 </div>
334 <?php endif; ?>
335 </div>
336 </div>
337 </div>
338
339 <!-- Design Tab -->
340 <div class="ka-tab-content" data-tab="design">
341 <div class="ka-card">
342 <div class="ka-card-header">
343 <span class="dashicons dashicons-art pink"></span>
344 <h2><?php esc_html_e('Appearance', 'king-addons'); ?></h2>
345 </div>
346 <div class="ka-card-body">
347 <div class="ka-row">
348 <div class="ka-row-label"><?php esc_html_e('Template', 'king-addons'); ?></div>
349 <div class="ka-row-field">
350 <select name="king_addons_age_gate_options[design][template]">
351 <option value="center-card" <?php selected($options['design']['template'], 'center-card'); ?>><?php esc_html_e('Centered card', 'king-addons'); ?></option>
352 <option value="bottom-card" <?php selected($options['design']['template'], 'bottom-card'); ?>><?php esc_html_e('Bottom card', 'king-addons'); ?></option>
353 <option value="top-card" <?php selected($options['design']['template'], 'top-card'); ?>><?php esc_html_e('Top card', 'king-addons'); ?></option>
354 <option value="side-left" <?php selected($options['design']['template'], 'side-left'); ?>><?php esc_html_e('Side panel (left)', 'king-addons'); ?></option>
355 <option value="side-right" <?php selected($options['design']['template'], 'side-right'); ?>><?php esc_html_e('Side panel (right)', 'king-addons'); ?></option>
356 <option value="fullscreen" <?php selected($options['design']['template'], 'fullscreen'); ?>><?php esc_html_e('Fullscreen modal', 'king-addons'); ?></option>
357 </select>
358 </div>
359 </div>
360 <div class="ka-row">
361 <div class="ka-row-label"><?php esc_html_e('Overlay', 'king-addons'); ?></div>
362 <div class="ka-row-field">
363 <div class="ka-grid-2">
364 <div>
365 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Color', 'king-addons'); ?></label>
366 <input type="color" name="king_addons_age_gate_options[design][overlay_color]" value="<?php echo esc_attr($options['design']['overlay_color']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
367 </div>
368 <div>
369 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Opacity', 'king-addons'); ?></label>
370 <input type="number" step="0.05" min="0" max="1" name="king_addons_age_gate_options[design][overlay_opacity]" value="<?php echo esc_attr($options['design']['overlay_opacity']); ?>" style="max-width: 100px;">
371 </div>
372 </div>
373 </div>
374 </div>
375 <div class="ka-row">
376 <div class="ka-row-label"><?php esc_html_e('Card', 'king-addons'); ?></div>
377 <div class="ka-row-field">
378 <div class="ka-grid-2">
379 <div>
380 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Background', 'king-addons'); ?></label>
381 <input type="color" name="king_addons_age_gate_options[design][card_background]" value="<?php echo esc_attr($options['design']['card_background']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
382 </div>
383 <div>
384 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Width (px)', 'king-addons'); ?></label>
385 <input type="number" min="280" name="king_addons_age_gate_options[design][card_width]" value="<?php echo esc_attr($options['design']['card_width']); ?>" style="max-width: 100px;">
386 </div>
387 </div>
388 </div>
389 </div>
390 <div class="ka-row">
391 <div class="ka-row-label"><?php esc_html_e('Text Content', 'king-addons'); ?></div>
392 <div class="ka-row-field">
393 <input type="text" name="king_addons_age_gate_options[design][title]" value="<?php echo esc_attr($options['design']['title']); ?>" placeholder="<?php esc_attr_e('Title', 'king-addons'); ?>" style="margin-bottom: 12px;">
394 <input type="text" name="king_addons_age_gate_options[design][subtitle]" value="<?php echo esc_attr($options['design']['subtitle']); ?>" placeholder="<?php esc_attr_e('Subtitle', 'king-addons'); ?>">
395 </div>
396 </div>
397 <div class="ka-row">
398 <div class="ka-row-label"><?php esc_html_e('Text Color', 'king-addons'); ?></div>
399 <div class="ka-row-field">
400 <input type="color" name="king_addons_age_gate_options[design][text_color]" value="<?php echo esc_attr($options['design']['text_color']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
401 </div>
402 </div>
403 <div class="ka-row">
404 <div class="ka-row-label"><?php esc_html_e('Button Labels', 'king-addons'); ?></div>
405 <div class="ka-row-field">
406 <div class="ka-grid-2">
407 <div>
408 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Yes', 'king-addons'); ?></label>
409 <input type="text" name="king_addons_age_gate_options[design][button_yes]" value="<?php echo esc_attr($options['design']['button_yes']); ?>">
410 </div>
411 <div>
412 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('No', 'king-addons'); ?></label>
413 <input type="text" name="king_addons_age_gate_options[design][button_no]" value="<?php echo esc_attr($options['design']['button_no']); ?>">
414 </div>
415 </div>
416 </div>
417 </div>
418 <div class="ka-row">
419 <div class="ka-row-label"><?php esc_html_e('Typography', 'king-addons'); ?></div>
420 <div class="ka-row-field">
421 <div class="ka-grid-2" style="gap: 16px;">
422 <div>
423 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Title Size', 'king-addons'); ?></label>
424 <input type="number" min="10" name="king_addons_age_gate_options[design][title_size]" value="<?php echo esc_attr($options['design']['title_size']); ?>" style="max-width: 100px;">
425 </div>
426 <div>
427 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Body Size', 'king-addons'); ?></label>
428 <input type="number" min="10" name="king_addons_age_gate_options[design][body_size]" value="<?php echo esc_attr($options['design']['body_size']); ?>" style="max-width: 100px;">
429 </div>
430 <div>
431 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Title Weight', 'king-addons'); ?></label>
432 <input type="number" min="100" step="100" name="king_addons_age_gate_options[design][title_weight]" value="<?php echo esc_attr($options['design']['title_weight']); ?>" style="max-width: 100px;">
433 </div>
434 <div>
435 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Body Weight', 'king-addons'); ?></label>
436 <input type="number" min="100" step="100" name="king_addons_age_gate_options[design][body_weight]" value="<?php echo esc_attr($options['design']['body_weight']); ?>" style="max-width: 100px;">
437 </div>
438 </div>
439 </div>
440 </div>
441 <div class="ka-row">
442 <div class="ka-row-label"><?php esc_html_e('Button Styles', 'king-addons'); ?></div>
443 <div class="ka-row-field">
444 <div class="ka-grid-2" style="gap: 16px;">
445 <div>
446 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Yes Text', 'king-addons'); ?></label>
447 <input type="color" name="king_addons_age_gate_options[design][button_yes_color]" value="<?php echo esc_attr($options['design']['button_yes_color']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
448 </div>
449 <div>
450 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Yes BG', 'king-addons'); ?></label>
451 <input type="color" name="king_addons_age_gate_options[design][button_yes_bg]" value="<?php echo esc_attr($options['design']['button_yes_bg']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
452 </div>
453 <div>
454 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('No Text', 'king-addons'); ?></label>
455 <input type="color" name="king_addons_age_gate_options[design][button_no_color]" value="<?php echo esc_attr($options['design']['button_no_color']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
456 </div>
457 <div>
458 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('No BG', 'king-addons'); ?></label>
459 <input type="color" name="king_addons_age_gate_options[design][button_no_bg]" value="<?php echo esc_attr($options['design']['button_no_bg']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
460 </div>
461 </div>
462 </div>
463 </div>
464 <?php if ($is_premium): ?>
465 <div class="ka-row">
466 <div class="ka-row-label"><?php esc_html_e('Hover Styles', 'king-addons'); ?></div>
467 <div class="ka-row-field">
468 <div class="ka-grid-2" style="gap: 16px;">
469 <div>
470 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Yes Hover BG', 'king-addons'); ?></label>
471 <input type="color" name="king_addons_age_gate_options[design][button_yes_hover_bg]" value="<?php echo esc_attr($options['design']['button_yes_hover_bg']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
472 </div>
473 <div>
474 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('Yes Hover Text', 'king-addons'); ?></label>
475 <input type="color" name="king_addons_age_gate_options[design][button_yes_hover_color]" value="<?php echo esc_attr($options['design']['button_yes_hover_color']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
476 </div>
477 <div>
478 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('No Hover BG', 'king-addons'); ?></label>
479 <input type="color" name="king_addons_age_gate_options[design][button_no_hover_bg]" value="<?php echo esc_attr($options['design']['button_no_hover_bg']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
480 </div>
481 <div>
482 <label style="font-size: 12px; color: #86868b; display: block; margin-bottom: 6px;"><?php esc_html_e('No Hover Text', 'king-addons'); ?></label>
483 <input type="color" name="king_addons_age_gate_options[design][button_no_hover_color]" value="<?php echo esc_attr($options['design']['button_no_hover_color']); ?>" style="width: 60px; height: 40px; padding: 2px; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px;">
484 </div>
485 </div>
486 </div>
487 </div>
488 <div class="ka-row">
489 <div class="ka-row-label"><?php esc_html_e('Animation', 'king-addons'); ?></div>
490 <div class="ka-row-field">
491 <select name="king_addons_age_gate_options[design][animation]">
492 <option value="none" <?php selected($options['design']['animation'], 'none'); ?>><?php esc_html_e('None', 'king-addons'); ?></option>
493 <option value="fade" <?php selected($options['design']['animation'], 'fade'); ?>><?php esc_html_e('Fade', 'king-addons'); ?></option>
494 <option value="slide-up" <?php selected($options['design']['animation'], 'slide-up'); ?>><?php esc_html_e('Slide up', 'king-addons'); ?></option>
495 <option value="zoom" <?php selected($options['design']['animation'], 'zoom'); ?>><?php esc_html_e('Zoom', 'king-addons'); ?></option>
496 </select>
497 </div>
498 </div>
499 <div class="ka-row">
500 <div class="ka-row-label"><?php esc_html_e('Elementor Template', 'king-addons'); ?></div>
501 <div class="ka-row-field">
502 <select name="king_addons_age_gate_options[design][elementor_template]">
503 <option value="0"><?php esc_html_e('— None —', 'king-addons'); ?></option>
504 <?php foreach ($elementor_templates as $tmpl): ?>
505 <option value="<?php echo esc_attr($tmpl->ID); ?>" <?php selected((int)$options['design']['elementor_template'], (int)$tmpl->ID); ?>>
506 <?php echo esc_html($tmpl->post_title); ?>
507 </option>
508 <?php endforeach; ?>
509 </select>
510 </div>
511 </div>
512 <div class="ka-row">
513 <div class="ka-row-label"><?php esc_html_e('Brand Assets', 'king-addons'); ?></div>
514 <div class="ka-row-field">
515 <input type="url" name="king_addons_age_gate_options[design][logo]" value="<?php echo esc_attr($options['design']['logo']); ?>" placeholder="<?php esc_attr_e('Logo URL', 'king-addons'); ?>" style="margin-bottom: 12px;">
516 <input type="url" name="king_addons_age_gate_options[design][background_image]" value="<?php echo esc_attr($options['design']['background_image']); ?>" placeholder="<?php esc_attr_e('Background image URL', 'king-addons'); ?>">
517 </div>
518 </div>
519 <?php endif; ?>
520 </div>
521 </div>
522 </div>
523
524 <!-- Behaviour Tab -->
525 <div class="ka-tab-content" data-tab="behaviour">
526 <div class="ka-card">
527 <div class="ka-card-header">
528 <span class="dashicons dashicons-controls-play"></span>
529 <h2><?php esc_html_e('Behaviour Settings', 'king-addons'); ?></h2>
530 </div>
531 <div class="ka-card-body">
532 <div class="ka-row">
533 <div class="ka-row-label"><?php esc_html_e('On Denial', 'king-addons'); ?></div>
534 <div class="ka-row-field">
535 <select name="king_addons_age_gate_options[behaviour][deny_action]">
536 <option value="redirect_page" <?php selected($options['behaviour']['deny_action'], 'redirect_page'); ?>><?php esc_html_e('Redirect to page', 'king-addons'); ?></option>
537 <option value="redirect_url" <?php selected($options['behaviour']['deny_action'], 'redirect_url'); ?>><?php esc_html_e('Redirect to URL', 'king-addons'); ?></option>
538 <option value="block" <?php selected($options['behaviour']['deny_action'], 'block'); ?>><?php esc_html_e('Show blocked message', 'king-addons'); ?></option>
539 </select>
540 </div>
541 </div>
542 <div class="ka-row" id="ka-age-gate-deny-page-row">
543 <div class="ka-row-label"><?php esc_html_e('Redirect Page', 'king-addons'); ?></div>
544 <div class="ka-row-field">
545 <select name="king_addons_age_gate_options[behaviour][deny_redirect_page]">
546 <option value="0"><?php esc_html_e('— Select page —', 'king-addons'); ?></option>
547 <?php foreach ($page_options as $id => $title): ?>
548 <option value="<?php echo esc_attr($id); ?>" <?php selected((int)$options['behaviour']['deny_redirect_page'], (int)$id); ?>>
549 <?php echo esc_html($title); ?>
550 </option>
551 <?php endforeach; ?>
552 </select>
553 <p class="ka-row-desc"><?php esc_html_e('If a page is selected, it will be used for redirect.', 'king-addons'); ?></p>
554 </div>
555 </div>
556 <div class="ka-row" id="ka-age-gate-deny-url-row">
557 <div class="ka-row-label"><?php esc_html_e('Redirect URL', 'king-addons'); ?></div>
558 <div class="ka-row-field">
559 <input type="url" name="king_addons_age_gate_options[behaviour][deny_redirect_url]" value="<?php echo esc_attr($options['behaviour']['deny_redirect_url']); ?>" placeholder="https://google.com">
560 <p class="ka-row-desc"><?php esc_html_e('Used only when no redirect page is selected.', 'king-addons'); ?></p>
561 </div>
562 </div>
563 <div class="ka-row">
564 <div class="ka-row-label"><?php esc_html_e('Block Message', 'king-addons'); ?></div>
565 <div class="ka-row-field">
566 <input type="text" name="king_addons_age_gate_options[behaviour][block_message]" value="<?php echo esc_attr($options['behaviour']['block_message']); ?>">
567 </div>
568 </div>
569 <div class="ka-row">
570 <div class="ka-row-label"><?php esc_html_e('Reset on Change', 'king-addons'); ?></div>
571 <div class="ka-row-field">
572 <label class="ka-toggle">
573 <input type="checkbox" name="king_addons_age_gate_options[behaviour][reset_on_rule_change]" value="1" <?php checked(!empty($options['behaviour']['reset_on_rule_change'])); ?>>
574 <span class="ka-toggle-slider"></span>
575 <span class="ka-toggle-label"><?php esc_html_e('Invalidate decisions on save', 'king-addons'); ?></span>
576 </label>
577 </div>
578 </div>
579 <?php if ($is_premium): ?>
580 <div class="ka-row">
581 <div class="ka-row-label"><?php esc_html_e('Repeat Prompt', 'king-addons'); ?></div>
582 <div class="ka-row-field">
583 <select name="king_addons_age_gate_options[behaviour][repeat_mode]">
584 <option value="days" <?php selected($options['behaviour']['repeat_mode'], 'days'); ?>><?php esc_html_e('Remember N days', 'king-addons'); ?></option>
585 <option value="session" <?php selected($options['behaviour']['repeat_mode'], 'session'); ?>><?php esc_html_e('Every session', 'king-addons'); ?></option>
586 <option value="once" <?php selected($options['behaviour']['repeat_mode'], 'once'); ?>><?php esc_html_e('Forever', 'king-addons'); ?></option>
587 </select>
588 </div>
589 </div>
590 <div class="ka-row">
591 <div class="ka-row-label"><?php esc_html_e('Consent Checkbox', 'king-addons'); ?></div>
592 <div class="ka-row-field">
593 <label class="ka-toggle">
594 <input type="checkbox" name="king_addons_age_gate_options[behaviour][consent_checkbox]" value="1" <?php checked(!empty($options['behaviour']['consent_checkbox'])); ?>>
595 <span class="ka-toggle-slider"></span>
596 <span class="ka-toggle-label"><?php esc_html_e('Require consent checkbox', 'king-addons'); ?></span>
597 </label>
598 </div>
599 </div>
600 <?php endif; ?>
601 </div>
602 </div>
603 </div>
604
605 <!-- Pro Tab -->
606 <div class="ka-tab-content" data-tab="pro">
607 <?php if (!$is_premium): ?>
608 <div class="ka-pro-notice">
609 <h2><?php esc_html_e('Pro Features', 'king-addons'); ?></h2>
610 <p><?php esc_html_e('Upgrade to Pro for DOB validation, geo rules, and advanced features.', 'king-addons'); ?></p>
611 <a href="https://kingaddons.com/pricing/" target="_blank" class="ka-btn ka-btn-pink"><?php esc_html_e('Upgrade Now', 'king-addons'); ?></a>
612 </div>
613 <?php else: ?>
614 <div class="ka-card">
615 <div class="ka-card-header">
616 <span class="dashicons dashicons-calendar-alt"></span>
617 <h2><?php esc_html_e('Date of Birth Validation', 'king-addons'); ?></h2>
618 </div>
619 <div class="ka-card-body">
620 <div class="ka-row">
621 <div class="ka-row-label"><?php esc_html_e('Date Format', 'king-addons'); ?></div>
622 <div class="ka-row-field">
623 <select name="king_addons_age_gate_options[dob][format]">
624 <option value="dmy" <?php selected($options['dob']['format'], 'dmy'); ?>>DD/MM/YYYY</option>
625 <option value="mdy" <?php selected($options['dob']['format'], 'mdy'); ?>>MM/DD/YYYY</option>
626 <option value="ymd" <?php selected($options['dob']['format'], 'ymd'); ?>>YYYY/MM/DD</option>
627 </select>
628 </div>
629 </div>
630 <div class="ka-row">
631 <div class="ka-row-label"><?php esc_html_e('Max Age', 'king-addons'); ?></div>
632 <div class="ka-row-field">
633 <input type="number" min="10" name="king_addons_age_gate_options[dob][max_age]" value="<?php echo esc_attr($options['dob']['max_age']); ?>" style="max-width: 100px;">
634 </div>
635 </div>
636 <div class="ka-row">
637 <div class="ka-row-label"><?php esc_html_e('Error Messages', 'king-addons'); ?></div>
638 <div class="ka-row-field">
639 <input type="text" name="king_addons_age_gate_options[dob][error_invalid]" value="<?php echo esc_attr($options['dob']['error_invalid']); ?>" placeholder="<?php esc_attr_e('Invalid date message', 'king-addons'); ?>" style="margin-bottom: 12px;">
640 <input type="text" name="king_addons_age_gate_options[dob][error_denied]" value="<?php echo esc_attr($options['dob']['error_denied']); ?>" placeholder="<?php esc_attr_e('Under age message', 'king-addons'); ?>">
641 </div>
642 </div>
643 </div>
644 </div>
645 <div class="ka-card">
646 <div class="ka-card-header">
647 <span class="dashicons dashicons-admin-site"></span>
648 <h2><?php esc_html_e('Geo Rules', 'king-addons'); ?></h2>
649 </div>
650 <div class="ka-card-body">
651 <div class="ka-row">
652 <div class="ka-row-label"><?php esc_html_e('Enable', 'king-addons'); ?></div>
653 <div class="ka-row-field">
654 <label class="ka-toggle">
655 <input type="checkbox" name="king_addons_age_gate_options[geo][enabled]" value="1" <?php checked(!empty($options['geo']['enabled'])); ?>>
656 <span class="ka-toggle-slider"></span>
657 <span class="ka-toggle-label"><?php esc_html_e('Country-based minimum age', 'king-addons'); ?></span>
658 </label>
659 </div>
660 </div>
661 <div class="ka-row">
662 <div class="ka-row-label"><?php esc_html_e('Default Age', 'king-addons'); ?></div>
663 <div class="ka-row-field">
664 <input type="number" min="0" name="king_addons_age_gate_options[geo][default_age]" value="<?php echo esc_attr($options['geo']['default_age']); ?>" style="max-width: 100px;">
665 </div>
666 </div>
667 <div class="ka-row">
668 <div class="ka-row-label"><?php esc_html_e('Country Map', 'king-addons'); ?></div>
669 <div class="ka-row-field">
670 <textarea name="king_addons_age_gate_options[geo][map]" rows="5" placeholder="US=21&#10;UK=18&#10;DE=16" style="max-width: 300px;"><?php
671 foreach ($options['geo']['map'] as $code => $age) {
672 echo esc_html($code . '=' . $age . "\n");
673 }
674 ?></textarea>
675 <p class="ka-row-desc"><?php esc_html_e('One per line: CODE=AGE', 'king-addons'); ?></p>
676 </div>
677 </div>
678 </div>
679 </div>
680 <?php endif; ?>
681 </div>
682
683 <!-- Submit -->
684 <div class="ka-card">
685 <div class="ka-submit">
686 <button type="submit" class="ka-btn ka-btn-primary"><?php esc_html_e('Save Settings', 'king-addons'); ?></button>
687 </div>
688 </div>
689 </form>
690 </div>
691
692 <script>
693 (function($) {
694 'use strict';
695
696 // Tab navigation
697 const tabs = document.querySelectorAll('.ka-tab');
698 const contents = document.querySelectorAll('.ka-tab-content');
699
700 tabs.forEach(tab => {
701 tab.addEventListener('click', function(e) {
702 e.preventDefault();
703 const target = this.dataset.tab;
704 tabs.forEach(t => t.classList.remove('active'));
705 contents.forEach(c => c.classList.remove('active'));
706 this.classList.add('active');
707 document.querySelector(`.ka-tab-content[data-tab="${target}"]`).classList.add('active');
708 });
709 });
710
711 // Behaviour: toggle redirect destination fields.
712 (function() {
713 const select = document.querySelector('select[name="king_addons_age_gate_options[behaviour][deny_action]"]');
714 const pageRow = document.getElementById('ka-age-gate-deny-page-row');
715 const urlRow = document.getElementById('ka-age-gate-deny-url-row');
716
717 function sync() {
718 if (!select) {
719 return;
720 }
721 const value = (select.value || '').toString();
722 if (pageRow) {
723 pageRow.style.display = value === 'redirect_page' ? '' : 'none';
724 }
725 if (urlRow) {
726 urlRow.style.display = value === 'redirect_url' ? '' : 'none';
727 }
728 }
729
730 if (select) {
731 select.addEventListener('change', sync);
732 sync();
733 }
734 })();
735 })(jQuery);
736
737 // Theme segmented control (dashboard-style)
738 (function() {
739 const ajaxUrl = '<?php echo esc_url(admin_url('admin-ajax.php')); ?>';
740 const nonce = '<?php echo esc_js(wp_create_nonce('king_addons_dashboard_ui')); ?>';
741 const segment = document.getElementById('ka-v3-theme-segment');
742 const mql = window.matchMedia ? window.matchMedia('(prefers-color-scheme: dark)') : null;
743 let mode = (segment && segment.getAttribute('data-active') ? segment.getAttribute('data-active') : 'dark').toString();
744 let mqlHandler = null;
745
746 function saveUISetting(key, value) {
747 const body = new URLSearchParams();
748 body.set('action', 'king_addons_save_dashboard_ui');
749 body.set('nonce', nonce);
750 body.set('key', key);
751 body.set('value', value);
752 fetch(ajaxUrl, {
753 method: 'POST',
754 headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' },
755 body: body.toString()
756 });
757 }
758
759 function updateSegment(activeMode) {
760 if (!segment) {
761 return;
762 }
763 segment.setAttribute('data-active', activeMode);
764 segment.querySelectorAll('.ka-v3-segmented-btn').forEach((btn) => {
765 const theme = btn.getAttribute('data-theme');
766 btn.setAttribute('aria-pressed', theme === activeMode ? 'true' : 'false');
767 });
768 }
769
770 function applyTheme(isDark) {
771 document.body.classList.toggle('ka-v3-dark', isDark);
772 document.documentElement.classList.toggle('ka-v3-dark', isDark);
773 }
774
775 function setThemeMode(nextMode, save) {
776 mode = nextMode;
777 updateSegment(nextMode);
778
779 if (mqlHandler && mql) {
780 if (mql.removeEventListener) {
781 mql.removeEventListener('change', mqlHandler);
782 } else if (mql.removeListener) {
783 mql.removeListener(mqlHandler);
784 }
785 mqlHandler = null;
786 }
787
788 if (nextMode === 'auto') {
789 applyTheme(!!(mql && mql.matches));
790 mqlHandler = (e) => {
791 if (mode !== 'auto') {
792 return;
793 }
794 applyTheme(!!e.matches);
795 };
796 if (mql) {
797 if (mql.addEventListener) {
798 mql.addEventListener('change', mqlHandler);
799 } else if (mql.addListener) {
800 mql.addListener(mqlHandler);
801 }
802 }
803 } else {
804 applyTheme(nextMode === 'dark');
805 }
806
807 if (save) {
808 saveUISetting('theme_mode', nextMode);
809 }
810 }
811
812 window.kaV3ToggleDark = function() {
813 const isDark = document.body.classList.contains('ka-v3-dark');
814 setThemeMode(isDark ? 'light' : 'dark', true);
815 };
816
817 if (segment) {
818 segment.addEventListener('click', function(e) {
819 const btn = e.target.closest('.ka-v3-segmented-btn');
820 if (!btn) return;
821 e.preventDefault();
822 setThemeMode((btn.getAttribute('data-theme') || 'dark').toString(), true);
823 });
824 }
825
826 if (segment) {
827 setThemeMode(mode, false);
828 }
829 })();
830 </script>
831