106 lines
4.8 KiB
PHP
106 lines
4.8 KiB
PHP
<?php
|
|
$settings = array(
|
|
'style' => get_option('scroll_to_top_style', 'circle'),
|
|
'bg_color' => get_option('scroll_to_top_bg_color', '#333333'),
|
|
'text_color' => get_option('scroll_to_top_text_color', '#ffffff'),
|
|
'size' => get_option('scroll_to_top_size', 'medium'),
|
|
'position' => get_option('scroll_to_top_position', 'bottom-right'),
|
|
'show_mobile' => get_option('scroll_to_top_show_mobile', '1'),
|
|
);
|
|
?>
|
|
|
|
<div class="wrap">
|
|
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
|
|
|
|
<form method="post" action="options.php">
|
|
<?php settings_fields('scroll_to_top_options'); ?>
|
|
|
|
<table class="form-table">
|
|
<tr>
|
|
<th scope="row">Button Style</th>
|
|
<td>
|
|
<fieldset>
|
|
<label>
|
|
<input type="radio" name="scroll_to_top_style" value="circle" <?php checked($settings['style'], 'circle'); ?>>
|
|
Circle
|
|
</label><br>
|
|
<label>
|
|
<input type="radio" name="scroll_to_top_style" value="arrow" <?php checked($settings['style'], 'arrow'); ?>>
|
|
Arrow
|
|
</label><br>
|
|
<label>
|
|
<input type="radio" name="scroll_to_top_style" value="text" <?php checked($settings['style'], 'text'); ?>>
|
|
Text ("Top")
|
|
</label>
|
|
</fieldset>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">Background Color</th>
|
|
<td>
|
|
<input type="color" name="scroll_to_top_bg_color" value="<?php echo esc_attr($settings['bg_color']); ?>" class="color-picker">
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">Icon/Text Color</th>
|
|
<td>
|
|
<input type="color" name="scroll_to_top_text_color" value="<?php echo esc_attr($settings['text_color']); ?>" class="color-picker">
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">Button Size</th>
|
|
<td>
|
|
<select name="scroll_to_top_size">
|
|
<option value="small" <?php selected($settings['size'], 'small'); ?>>Small</option>
|
|
<option value="medium" <?php selected($settings['size'], 'medium'); ?>>Medium</option>
|
|
<option value="large" <?php selected($settings['size'], 'large'); ?>>Large</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">Button Position</th>
|
|
<td>
|
|
<select name="scroll_to_top_position">
|
|
<option value="bottom-right" <?php selected($settings['position'], 'bottom-right'); ?>>Bottom-Right</option>
|
|
<option value="bottom-left" <?php selected($settings['position'], 'bottom-left'); ?>>Bottom-Left</option>
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
|
|
<tr>
|
|
<th scope="row">Show on Mobile</th>
|
|
<td>
|
|
<label>
|
|
<input type="checkbox" name="scroll_to_top_show_mobile" value="1" <?php checked($settings['show_mobile'], '1'); ?>>
|
|
Show on mobile devices
|
|
</label>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<?php submit_button('Save Settings'); ?>
|
|
</form>
|
|
|
|
<h2>Preview</h2>
|
|
<div class="stt-preview-container">
|
|
<div class="stt-preview-box">
|
|
<p>Scroll down to see the button appear:</p>
|
|
<div class="stt-preview-content">
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
|
|
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
|
|
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
|
|
</div>
|
|
<div id="stt-preview-button" class="scroll-to-top-button" aria-label="Scroll to top">
|
|
<span class="stt-button-content"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|