king-addons / includes / extensions / Site_Preloader / templates / partials / tab-settings.php

tab-settings.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.78, at includes/extensions/Site_Preloader/templates/partials/tab-settings.php

487 lines 30.9 KB

Raw Download Zip

1	<?php
2	/**
3	* Site Preloader Settings Tab.
4	*
5	* @package King_Addons
6	* @since 1.0.0
7	*
8	* @var array $settings Current settings.
9	* @var bool $is_pro Whether Pro version is active.
10	* @var array $presets Available presets.
11	*/
12
13	if (!defined('ABSPATH')) {
14	exit;
15	}
16
17	// Get all pages for selection
18	$pages = get_pages(['post_status' => 'publish', 'number' => 100]);
19	?>
20
21	<form action="<?php echo esc_url(admin_url('admin-post.php')); ?>" method="post" id="ka-preloader-settings-form">
22	<?php wp_nonce_field('king_addons_site_preloader_save'); ?>
23	<input type="hidden" name="action" value="king_addons_site_preloader_save" />
24	<input type="hidden" name="current_tab" value="settings" />
25
26	<div class="ka-preloader-settings-grid">
27	<!-- Left Column: Settings -->
28	<div class="ka-preloader-settings-main">
29	<!-- General Settings -->
30	<div class="ka-card">
31	<div class="ka-card-header">
32	<span class="dashicons dashicons-admin-generic"></span>
33	<h2><?php esc_html_e('General Settings', 'king-addons'); ?></h2>
34	</div>
35	<div class="ka-card-body">
36	<div class="ka-row">
37	<div class="ka-row-label"><?php esc_html_e('Enable Preloader', 'king-addons'); ?></div>
38	<div class="ka-row-field">
39	<label class="ka-toggle">
40	<input type="checkbox" name="enabled" value="1" <?php checked(!empty($settings['enabled'])); ?> />
41	<span class="ka-toggle-slider"></span>
42	<span class="ka-toggle-label"><?php esc_html_e('Show preloader on page load', 'king-addons'); ?></span>
43	</label>
44	</div>
45	</div>
46
47	<div class="ka-row">
48	<div class="ka-row-label"><?php esc_html_e('Show On', 'king-addons'); ?></div>
49	<div class="ka-row-field">
50	<select name="show_on" id="ka-preloader-show-on">
51	<option value="all" <?php selected($settings['show_on'], 'all'); ?>><?php esc_html_e('All Pages', 'king-addons'); ?></option>
52	<option value="selected" <?php selected($settings['show_on'], 'selected'); ?>><?php esc_html_e('Selected Pages Only', 'king-addons'); ?></option>
53	<option value="exclude" <?php selected($settings['show_on'], 'exclude'); ?>><?php esc_html_e('Exclude Specific Pages', 'king-addons'); ?></option>
54	</select>
55	</div>
56	</div>
57
58	<div class="ka-row ka-row-pages" id="ka-selected-pages-row" style="<?php echo $settings['show_on'] === 'selected' ? '' : 'display:none'; ?>">
59	<div class="ka-row-label"><?php esc_html_e('Select Pages', 'king-addons'); ?></div>
60	<div class="ka-row-field">
61	<select name="selected_pages[]" multiple class="ka-multiselect">
62	<?php foreach ($pages as $page): ?>
63	<option value="<?php echo esc_attr($page->ID); ?>" <?php selected(in_array($page->ID, $settings['selected_pages'] ?? [])); ?>>
64	<?php echo esc_html($page->post_title); ?>
65	</option>
66	<?php endforeach; ?>
67	</select>
68	<p class="ka-row-desc"><?php esc_html_e('Hold Ctrl/Cmd to select multiple pages.', 'king-addons'); ?></p>
69	</div>
70	</div>
71
72	<div class="ka-row ka-row-pages" id="ka-excluded-pages-row" style="<?php echo $settings['show_on'] === 'exclude' ? '' : 'display:none'; ?>">
73	<div class="ka-row-label"><?php esc_html_e('Exclude Pages', 'king-addons'); ?></div>
74	<div class="ka-row-field">
75	<select name="excluded_pages[]" multiple class="ka-multiselect">
76	<?php foreach ($pages as $page): ?>
77	<option value="<?php echo esc_attr($page->ID); ?>" <?php selected(in_array($page->ID, $settings['excluded_pages'] ?? [])); ?>>
78	<?php echo esc_html($page->post_title); ?>
79	</option>
80	<?php endforeach; ?>
81	</select>
82	<p class="ka-row-desc"><?php esc_html_e('Preloader will not show on these pages.', 'king-addons'); ?></p>
83	</div>
84	</div>
85
86	<div class="ka-row">
87	<div class="ka-row-label"><?php esc_html_e('Show For', 'king-addons'); ?></div>
88	<div class="ka-row-field">
89	<select name="show_for">
90	<option value="everyone" <?php selected($settings['show_for'], 'everyone'); ?>><?php esc_html_e('Everyone', 'king-addons'); ?></option>
91	<option value="guests" <?php selected($settings['show_for'], 'guests'); ?>><?php esc_html_e('Guests Only', 'king-addons'); ?></option>
92	<option value="logged_in" <?php selected($settings['show_for'], 'logged_in'); ?>><?php esc_html_e('Logged In Users Only', 'king-addons'); ?></option>
93	<?php if ($is_pro): ?>
94	<option value="roles" <?php selected($settings['show_for'], 'roles'); ?>><?php esc_html_e('Specific Roles (Pro)', 'king-addons'); ?></option>
95	<?php endif; ?>
96	</select>
97	</div>
98	</div>
99
100	<div class="ka-row">
101	<div class="ka-row-label"><?php esc_html_e('Device Visibility', 'king-addons'); ?></div>
102	<div class="ka-row-field">
103	<div class="ka-checkbox-group">
104	<label class="ka-checkbox-item">
105	<input type="checkbox" name="device_desktop" value="1" <?php checked(!empty($settings['device_desktop'])); ?> />
106	<span class="dashicons dashicons-desktop"></span>
107	<?php esc_html_e('Desktop', 'king-addons'); ?>
108	</label>
109	<label class="ka-checkbox-item">
110	<input type="checkbox" name="device_tablet" value="1" <?php checked(!empty($settings['device_tablet'])); ?> />
111	<span class="dashicons dashicons-tablet"></span>
112	<?php esc_html_e('Tablet', 'king-addons'); ?>
113	</label>
114	<label class="ka-checkbox-item">
115	<input type="checkbox" name="device_mobile" value="1" <?php checked(!empty($settings['device_mobile'])); ?> />
116	<span class="dashicons dashicons-smartphone"></span>
117	<?php esc_html_e('Mobile', 'king-addons'); ?>
118	</label>
119	</div>
120	</div>
121	</div>
122	</div>
123	</div>
124
125	<!-- Appearance Settings -->
126	<div class="ka-card">
127	<div class="ka-card-header">
128	<span class="dashicons dashicons-art"></span>
129	<h2><?php esc_html_e('Appearance', 'king-addons'); ?></h2>
130	</div>
131	<div class="ka-card-body">
132	<h4 class="ka-settings-subheading"><?php esc_html_e('Background', 'king-addons'); ?></h4>
133
134	<div class="ka-row">
135	<div class="ka-row-label"><?php esc_html_e('Background Type', 'king-addons'); ?></div>
136	<div class="ka-row-field">
137	<select name="bg_type" id="ka-preloader-bg-type">
138	<option value="solid" <?php selected($settings['bg_type'], 'solid'); ?>><?php esc_html_e('Solid Color', 'king-addons'); ?></option>
139	<option value="gradient" <?php selected($settings['bg_type'], 'gradient'); ?>><?php esc_html_e('Gradient', 'king-addons'); ?></option>
140	<option value="image" <?php selected($settings['bg_type'], 'image'); ?> <?php disabled(!$is_pro); ?>><?php esc_html_e('Image', 'king-addons'); ?><?php echo !$is_pro ? ' (Pro)' : ''; ?></option>
141	</select>
142	</div>
143	</div>
144
145	<div class="ka-row ka-bg-solid-row" style="<?php echo $settings['bg_type'] !== 'solid' ? 'display:none' : ''; ?>">
146	<div class="ka-row-label"><?php esc_html_e('Background Color', 'king-addons'); ?></div>
147	<div class="ka-row-field">
148	<input type="text" name="bg_color" value="<?php echo esc_attr($settings['bg_color']); ?>" class="ka-color-picker" data-default-color="rgba(0,0,0,0)" data-alpha-enabled="true" />
149	</div>
150	</div>
151
152	<div class="ka-row ka-bg-gradient-row" style="<?php echo $settings['bg_type'] !== 'gradient' ? 'display:none' : ''; ?>">
153	<div class="ka-row-label"><?php esc_html_e('Gradient Start', 'king-addons'); ?></div>
154	<div class="ka-row-field">
155	<input type="text" name="bg_gradient_start" value="<?php echo esc_attr($settings['bg_gradient_start']); ?>" class="ka-color-picker" data-default-color="#ffffff" data-alpha-enabled="true" />
156	</div>
157	</div>
158
159	<div class="ka-row ka-bg-gradient-row" style="<?php echo $settings['bg_type'] !== 'gradient' ? 'display:none' : ''; ?>">
160	<div class="ka-row-label"><?php esc_html_e('Gradient End', 'king-addons'); ?></div>
161	<div class="ka-row-field">
162	<input type="text" name="bg_gradient_end" value="<?php echo esc_attr($settings['bg_gradient_end']); ?>" class="ka-color-picker" data-default-color="#f5f5f7" data-alpha-enabled="true" />
163	</div>
164	</div>
165
166	<?php if ($is_pro): ?>
167	<div class="ka-row ka-bg-image-row" style="<?php echo $settings['bg_type'] !== 'image' ? 'display:none' : ''; ?>">
168	<div class="ka-row-label"><?php esc_html_e('Background Image', 'king-addons'); ?></div>
169	<div class="ka-row-field">
170	<div class="ka-image-upload">
171	<input type="hidden" name="bg_image" id="ka-bg-image" value="<?php echo esc_attr($settings['bg_image']); ?>" />
172	<div class="ka-image-preview" id="ka-bg-image-preview">
173	<?php if (!empty($settings['bg_image'])): ?>
174	<img src="<?php echo esc_url($settings['bg_image']); ?>" alt="" />
175	<?php endif; ?>
176	</div>
177	<button type="button" class="ka-btn ka-btn-secondary ka-btn-sm" id="ka-bg-image-upload-btn">
178	<span class="dashicons dashicons-upload"></span>
179	<?php esc_html_e('Upload Image', 'king-addons'); ?>
180	</button>
181	<button type="button" class="ka-btn ka-btn-secondary ka-btn-sm" id="ka-bg-image-remove-btn" style="<?php echo empty($settings['bg_image']) ? 'display:none' : ''; ?>">
182	<span class="dashicons dashicons-trash"></span>
183	</button>
184	</div>
185	</div>
186	</div>
187	<?php endif; ?>
188
189	<div class="ka-row">
190	<div class="ka-row-label"><?php esc_html_e('Overlay Opacity', 'king-addons'); ?></div>
191	<div class="ka-row-field">
192	<div class="ka-range-wrap">
193	<input type="range" name="overlay_opacity" min="0" max="1" step="0.05" value="<?php echo esc_attr($settings['overlay_opacity']); ?>" id="ka-overlay-opacity" />
194	<span class="ka-range-value"><?php echo esc_html($settings['overlay_opacity']); ?></span>
195	</div>
196	</div>
197	</div>
198
199	<h4 class="ka-settings-subheading"><?php esc_html_e('Logo', 'king-addons'); ?></h4>
200
201	<div class="ka-row">
202	<div class="ka-row-label"><?php esc_html_e('Show Logo', 'king-addons'); ?></div>
203	<div class="ka-row-field">
204	<label class="ka-toggle">
205	<input type="checkbox" name="logo_enabled" value="1" <?php checked(!empty($settings['logo_enabled'])); ?> id="ka-logo-enabled" />
206	<span class="ka-toggle-slider"></span>
207	<span class="ka-toggle-label"><?php esc_html_e('Display logo above the animation', 'king-addons'); ?></span>
208	</label>
209	</div>
210	</div>
211
212	<div class="ka-row ka-logo-row" style="<?php echo empty($settings['logo_enabled']) ? 'display:none' : ''; ?>">
213	<div class="ka-row-label"><?php esc_html_e('Logo Image', 'king-addons'); ?></div>
214	<div class="ka-row-field">
215	<div class="ka-image-upload">
216	<input type="hidden" name="logo_url" id="ka-logo-url" value="<?php echo esc_attr($settings['logo_url']); ?>" />
217	<div class="ka-image-preview" id="ka-logo-preview">
218	<?php if (!empty($settings['logo_url'])): ?>
219	<img src="<?php echo esc_url($settings['logo_url']); ?>" alt="" />
220	<?php endif; ?>
221	</div>
222	<button type="button" class="ka-btn ka-btn-secondary ka-btn-sm" id="ka-logo-upload-btn">
223	<span class="dashicons dashicons-upload"></span>
224	<?php esc_html_e('Upload Logo', 'king-addons'); ?>
225	</button>
226	<button type="button" class="ka-btn ka-btn-secondary ka-btn-sm" id="ka-logo-remove-btn" style="<?php echo empty($settings['logo_url']) ? 'display:none' : ''; ?>">
227	<span class="dashicons dashicons-trash"></span>
228	</button>
229	</div>
230	</div>
231	</div>
232
233	<div class="ka-row ka-logo-row" style="<?php echo empty($settings['logo_enabled']) ? 'display:none' : ''; ?>">
234	<div class="ka-row-label"><?php esc_html_e('Logo Max Width', 'king-addons'); ?></div>
235	<div class="ka-row-field">
236	<input type="number" name="logo_max_width" value="<?php echo esc_attr($settings['logo_max_width']); ?>" min="20" max="500" /> <span class="ka-unit">px</span>
237	</div>
238	</div>
239
240	<h4 class="ka-settings-subheading"><?php esc_html_e('Text', 'king-addons'); ?></h4>
241
242	<div class="ka-row">
243	<div class="ka-row-label"><?php esc_html_e('Show Text', 'king-addons'); ?></div>
244	<div class="ka-row-field">
245	<label class="ka-toggle">
246	<input type="checkbox" name="text_enabled" value="1" <?php checked(!empty($settings['text_enabled'])); ?> id="ka-text-enabled" />
247	<span class="ka-toggle-slider"></span>
248	<span class="ka-toggle-label"><?php esc_html_e('Display text below the animation', 'king-addons'); ?></span>
249	</label>
250	</div>
251	</div>
252
253	<div class="ka-row ka-text-row" style="<?php echo empty($settings['text_enabled']) ? 'display:none' : ''; ?>">
254	<div class="ka-row-label"><?php esc_html_e('Text Content', 'king-addons'); ?></div>
255	<div class="ka-row-field">
256	<input type="text" name="text_content" value="<?php echo esc_attr($settings['text_content']); ?>" placeholder="<?php esc_attr_e('Loading...', 'king-addons'); ?>" />
257	</div>
258	</div>
259
260	<div class="ka-row ka-text-row" style="<?php echo empty($settings['text_enabled']) ? 'display:none' : ''; ?>">
261	<div class="ka-row-label"><?php esc_html_e('Text Size', 'king-addons'); ?></div>
262	<div class="ka-row-field">
263	<input type="number" name="text_size" value="<?php echo esc_attr($settings['text_size']); ?>" min="10" max="72" /> <span class="ka-unit">px</span>
264	</div>
265	</div>
266
267	<div class="ka-row ka-text-row" style="<?php echo empty($settings['text_enabled']) ? 'display:none' : ''; ?>">
268	<div class="ka-row-label"><?php esc_html_e('Text Weight', 'king-addons'); ?></div>
269	<div class="ka-row-field">
270	<select name="text_weight">
271	<option value="300" <?php selected($settings['text_weight'], '300'); ?>><?php esc_html_e('Light', 'king-addons'); ?></option>
272	<option value="400" <?php selected($settings['text_weight'], '400'); ?>><?php esc_html_e('Normal', 'king-addons'); ?></option>
273	<option value="500" <?php selected($settings['text_weight'], '500'); ?>><?php esc_html_e('Medium', 'king-addons'); ?></option>
274	<option value="600" <?php selected($settings['text_weight'], '600'); ?>><?php esc_html_e('Semi Bold', 'king-addons'); ?></option>
275	<option value="700" <?php selected($settings['text_weight'], '700'); ?>><?php esc_html_e('Bold', 'king-addons'); ?></option>
276	</select>
277	</div>
278	</div>
279
280	<div class="ka-row ka-text-row" style="<?php echo empty($settings['text_enabled']) ? 'display:none' : ''; ?>">
281	<div class="ka-row-label"><?php esc_html_e('Text Color', 'king-addons'); ?></div>
282	<div class="ka-row-field">
283	<input type="text" name="text_color" value="<?php echo esc_attr($settings['text_color']); ?>" class="ka-color-picker" data-default-color="#1d1d1f" data-alpha-enabled="true" />
284	</div>
285	</div>
286
287	<h4 class="ka-settings-subheading"><?php esc_html_e('Animation', 'king-addons'); ?></h4>
288
289	<div class="ka-row">
290	<div class="ka-row-label"><?php esc_html_e('Accent Color', 'king-addons'); ?></div>
291	<div class="ka-row-field">
292	<input type="text" name="accent_color" value="<?php echo esc_attr($settings['accent_color']); ?>" class="ka-color-picker" data-default-color="#0071e3" data-alpha-enabled="true" />
293	<p class="ka-row-desc"><?php esc_html_e('Main color for the animation.', 'king-addons'); ?></p>
294	</div>
295	</div>
296
297	<div class="ka-row">
298	<div class="ka-row-label"><?php esc_html_e('Animation Size', 'king-addons'); ?></div>
299	<div class="ka-row-field">
300	<input type="number" name="spinner_size" value="<?php echo esc_attr($settings['spinner_size']); ?>" min="16" max="200" /> <span class="ka-unit">px</span>
301	</div>
302	</div>
303	</div>
304	</div>
305
306	<!-- Behavior Settings -->
307	<div class="ka-card">
308	<div class="ka-card-header">
309	<span class="dashicons dashicons-performance"></span>
310	<h2><?php esc_html_e('Behavior', 'king-addons'); ?></h2>
311	</div>
312	<div class="ka-card-body">
313	<div class="ka-row">
314	<div class="ka-row-label"><?php esc_html_e('Trigger Type', 'king-addons'); ?></div>
315	<div class="ka-row-field">
316	<select name="trigger_type">
317	<option value="always" <?php selected($settings['trigger_type'], 'always'); ?>><?php esc_html_e('Every Page Load', 'king-addons'); ?></option>
318	<option value="first_visit" <?php selected($settings['trigger_type'], 'first_visit'); ?>><?php esc_html_e('First Visit Only', 'king-addons'); ?></option>
319	<option value="once_per_session" <?php selected($settings['trigger_type'], 'once_per_session'); ?>><?php esc_html_e('Once Per Session', 'king-addons'); ?></option>
320	<option value="once_per_day" <?php selected($settings['trigger_type'], 'once_per_day'); ?>><?php esc_html_e('Once Per Day', 'king-addons'); ?></option>
321	</select>
322	<p class="ka-row-desc"><?php esc_html_e('When to show the preloader to visitors.', 'king-addons'); ?></p>
323	</div>
324	</div>
325
326	<div class="ka-row">
327	<div class="ka-row-label"><?php esc_html_e('Hide Strategy', 'king-addons'); ?></div>
328	<div class="ka-row-field">
329	<select name="hide_strategy">
330	<option value="window_load" <?php selected($settings['hide_strategy'], 'window_load'); ?>><?php esc_html_e('On Window Load', 'king-addons'); ?></option>
331	<option value="dom_ready" <?php selected($settings['hide_strategy'], 'dom_ready'); ?>><?php esc_html_e('On DOM Ready + Delay', 'king-addons'); ?></option>
332	<option value="timeout" <?php selected($settings['hide_strategy'], 'timeout'); ?>><?php esc_html_e('After Timeout', 'king-addons'); ?></option>
333	</select>
334	<p class="ka-row-desc"><?php esc_html_e('When to hide the preloader.', 'king-addons'); ?></p>
335	</div>
336	</div>
337
338	<div class="ka-row">
339	<div class="ka-row-label"><?php esc_html_e('Minimum Display Time', 'king-addons'); ?></div>
340	<div class="ka-row-field">
341	<input type="number" name="min_display_time" value="<?php echo esc_attr($settings['min_display_time']); ?>" min="0" max="10000" /> <span class="ka-unit">ms</span>
342	<p class="ka-row-desc"><?php esc_html_e('Minimum time to show preloader (prevents flashing).', 'king-addons'); ?></p>
343	</div>
344	</div>
345
346	<div class="ka-row">
347	<div class="ka-row-label"><?php esc_html_e('Maximum Display Time', 'king-addons'); ?></div>
348	<div class="ka-row-field">
349	<input type="number" name="max_display_time" value="<?php echo esc_attr($settings['max_display_time']); ?>" min="1000" max="30000" /> <span class="ka-unit">ms</span>
350	<p class="ka-row-desc"><?php esc_html_e('Force hide after this time (prevents stuck overlay).', 'king-addons'); ?></p>
351	</div>
352	</div>
353
354	<div class="ka-row">
355	<div class="ka-row-label"><?php esc_html_e('Allow Skip', 'king-addons'); ?></div>
356	<div class="ka-row-field">
357	<label class="ka-toggle">
358	<input type="checkbox" name="allow_skip" value="1" <?php checked(!empty($settings['allow_skip'])); ?> id="ka-allow-skip" />
359	<span class="ka-toggle-slider"></span>
360	<span class="ka-toggle-label"><?php esc_html_e('Allow users to close the preloader early', 'king-addons'); ?></span>
361	</label>
362	</div>
363	</div>
364
365	<div class="ka-row ka-skip-row" style="<?php echo empty($settings['allow_skip']) ? 'display:none' : ''; ?>">
366	<div class="ka-row-label"><?php esc_html_e('Skip Method', 'king-addons'); ?></div>
367	<div class="ka-row-field">
368	<div class="ka-checkbox-group">
369	<label class="ka-checkbox-item">
370	<input type="radio" name="skip_method" value="click" <?php checked($settings['skip_method'], 'click'); ?> />
371	<?php esc_html_e('Click to Close', 'king-addons'); ?>
372	</label>
373	<label class="ka-checkbox-item">
374	<input type="radio" name="skip_method" value="escape" <?php checked($settings['skip_method'], 'escape'); ?> />
375	<?php esc_html_e('Press ESC', 'king-addons'); ?>
376	</label>
377	<label class="ka-checkbox-item">
378	<input type="radio" name="skip_method" value="both" <?php checked($settings['skip_method'], 'both'); ?> />
379	<?php esc_html_e('Both', 'king-addons'); ?>
380	</label>
381	</div>
382	</div>
383	</div>
384
385	<div class="ka-row">
386	<div class="ka-row-label"><?php esc_html_e('Lock Scroll', 'king-addons'); ?></div>
387	<div class="ka-row-field">
388	<label class="ka-toggle">
389	<input type="checkbox" name="lock_scroll" value="1" <?php checked(!empty($settings['lock_scroll'])); ?> />
390	<span class="ka-toggle-slider"></span>
391	<span class="ka-toggle-label"><?php esc_html_e('Prevent scrolling while preloader is visible', 'king-addons'); ?></span>
392	</label>
393	</div>
394	</div>
395	</div>
396	</div>
397	</div>
398
399	<!-- Right Column: Preview -->
400	<div class="ka-preloader-settings-sidebar">
401	<div class="ka-card ka-preloader-live-preview" id="ka-settings-live-preview">
402	<div class="ka-card-header">
403	<span class="dashicons dashicons-visibility"></span>
404	<h2><?php esc_html_e('Live Preview', 'king-addons'); ?></h2>
405	</div>
406	<div class="ka-preloader-preview-frame">
407	<div class="ka-preloader-preview-wrapper" id="ka-live-preview-wrapper">
408	<?php $this->render_preset_html($settings['template'], $settings); ?>
409	</div>
410	</div>
411	<div class="ka-card-footer">
412	<button type="button" class="ka-btn ka-btn-secondary" onclick="kaPreloaderOpenPreview()">
413	<span class="dashicons dashicons-fullscreen-alt"></span>
414	<?php esc_html_e('Full Preview', 'king-addons'); ?>
415	</button>
416	</div>
417	</div>
418	</div>
419	</div>
420
421	<!-- Hidden fields for template (to preserve it) -->
422	<input type="hidden" name="template" value="<?php echo esc_attr($settings['template']); ?>" />
423
424	<!-- Save Button -->
425	<div class="ka-submit ka-preloader-submit">
426	<button type="submit" class="ka-btn ka-btn-primary">
427	<span class="dashicons dashicons-saved"></span>
428	<?php esc_html_e('Save Settings', 'king-addons'); ?>
429	</button>
430	</div>
431	</form>
432
433	<script>
434	document.addEventListener('DOMContentLoaded', function() {
435	// Show/hide pages selection
436	const showOnSelect = document.getElementById('ka-preloader-show-on');
437	if (showOnSelect) {
438	showOnSelect.addEventListener('change', function() {
439	document.getElementById('ka-selected-pages-row').style.display = this.value === 'selected' ? '' : 'none';
440	document.getElementById('ka-excluded-pages-row').style.display = this.value === 'exclude' ? '' : 'none';
441	});
442	}
443
444	// Show/hide background type options
445	const bgTypeSelect = document.getElementById('ka-preloader-bg-type');
446	if (bgTypeSelect) {
447	bgTypeSelect.addEventListener('change', function() {
448	document.querySelectorAll('.ka-bg-solid-row').forEach(el => el.style.display = this.value === 'solid' ? '' : 'none');
449	document.querySelectorAll('.ka-bg-gradient-row').forEach(el => el.style.display = this.value === 'gradient' ? '' : 'none');
450	document.querySelectorAll('.ka-bg-image-row').forEach(el => el.style.display = this.value === 'image' ? '' : 'none');
451	});
452	}
453
454	// Show/hide logo options
455	const logoEnabled = document.getElementById('ka-logo-enabled');
456	if (logoEnabled) {
457	logoEnabled.addEventListener('change', function() {
458	document.querySelectorAll('.ka-logo-row').forEach(el => el.style.display = this.checked ? '' : 'none');
459	});
460	}
461
462	// Show/hide text options
463	const textEnabled = document.getElementById('ka-text-enabled');
464	if (textEnabled) {
465	textEnabled.addEventListener('change', function() {
466	document.querySelectorAll('.ka-text-row').forEach(el => el.style.display = this.checked ? '' : 'none');
467	});
468	}
469
470	// Show/hide skip method
471	const allowSkip = document.getElementById('ka-allow-skip');
472	if (allowSkip) {
473	allowSkip.addEventListener('change', function() {
474	document.querySelectorAll('.ka-skip-row').forEach(el => el.style.display = this.checked ? '' : 'none');
475	});
476	}
477
478	// Range value display
479	const opacityRange = document.getElementById('ka-overlay-opacity');
480	if (opacityRange) {
481	opacityRange.addEventListener('input', function() {
482	this.nextElementSibling.textContent = this.value;
483	});
484	}
485	});
486	</script>
487