From c2e5980a8bf21389982ea66cbef5eb82673d4a70 Mon Sep 17 00:00:00 2001 From: southseact-3d Date: Mon, 16 Feb 2026 13:42:05 +0000 Subject: [PATCH] added scroll to bottom template --- chat/templates/scroll to bottom.zip | Bin 0 -> 6438 bytes .../pc-scroll-to-top-qg1e/README.md | 36 +++++ .../admin/settings-page.php | 105 +++++++++++++ .../pc-scroll-to-top-qg1e/assets/admin.css | 97 ++++++++++++ .../pc-scroll-to-top-qg1e/assets/admin.js | 67 ++++++++ .../pc-scroll-to-top-qg1e/assets/frontend.css | 120 ++++++++++++++ .../pc-scroll-to-top-qg1e/assets/frontend.js | 90 +++++++++++ .../pc-scroll-to-top-qg1e/scroll-to-top.php | 146 ++++++++++++++++++ 8 files changed, 661 insertions(+) create mode 100644 chat/templates/scroll to bottom.zip create mode 100644 chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/README.md create mode 100644 chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/admin/settings-page.php create mode 100644 chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.css create mode 100644 chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.js create mode 100644 chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.css create mode 100644 chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.js create mode 100644 chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/scroll-to-top.php diff --git a/chat/templates/scroll to bottom.zip b/chat/templates/scroll to bottom.zip new file mode 100644 index 0000000000000000000000000000000000000000..a74f9f1dca9dfdca5eb9b3b2a29d4d2739cfdf83 GIT binary patch literal 6438 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 literal 0 HcmV?d00001 diff --git a/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/README.md b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/README.md new file mode 100644 index 0000000..de59814 --- /dev/null +++ b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/README.md @@ -0,0 +1,36 @@ +# Scroll to Top - WordPress Plugin + +A customizable scroll-to-top button for WordPress websites. + +## Installation + +1. Upload the `scroll-to-top-qg1e` folder to your WordPress `/wp-content/plugins/` directory +2. Activate the plugin through the "Plugins" menu in WordPress +3. Configure settings via **Settings > Scroll to Top** + +## Features + +- **Three Button Styles**: Circle, Arrow, or Text ("Top") +- **Custom Colors**: Choose background and text/icon colors +- ** Adjustable Size**: Small, Medium, or Large +- **Position Options**: Bottom-right or Bottom-left +- **Mobile Toggle**: Show or hide on mobile devices +- **Smooth Scrolling**: Animated scroll to top +- **Live Preview**: See changes in real-time in the admin panel + +## How It Works + +The button appears automatically when visitors scroll down the page (after 200px). Clicking it smoothly scrolls to the top of the page. + +## Files + +- `scroll-to-top.php` - Main plugin file +- `admin/settings-page.php` - Settings page HTML +- `assets/admin.css` - Admin panel styles +- `assets/admin.js` - Admin panel JavaScript with live preview +- `assets/frontend.css` - Frontend button styles +- `assets/frontend.js` - Frontend scroll functionality + +## License + +GPL v2 or later diff --git a/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/admin/settings-page.php b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/admin/settings-page.php new file mode 100644 index 0000000..6903c35 --- /dev/null +++ b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/admin/settings-page.php @@ -0,0 +1,105 @@ + 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'), +); +?> + +

+

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Button Style +
+
+
+ +
+
Background Color + +
Icon/Text Color + +
Button Size + +
Button Position + +
Show on Mobile + +
+ + +
+ +

Preview

+
+
+

Scroll down to see the button appear:

+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

+

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

+

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+
+ +
+
+
+
diff --git a/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.css b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.css new file mode 100644 index 0000000..2e70bc6 --- /dev/null +++ b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.css @@ -0,0 +1,97 @@ +.stt-preview-container { + border: 1px solid #ddd; + padding: 20px; + margin-top: 20px; + border-radius: 4px; + background: #f9f9f9; +} + +.stt-preview-box { + position: relative; + height: 200px; + overflow-y: auto; + border: 1px solid #ccc; + background: #fff; + padding: 15px; + font-size: 14px; +} + +.stt-preview-content p { + margin-bottom: 10px; +} + +.scroll-to-top-button { + position: fixed; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + cursor: pointer; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; +} + +.scroll-to-top-button.visible { + opacity: 1; + visibility: visible; +} + +.scroll-to-top-button.stt-style-circle { + border-radius: 50%; +} + +.scroll-to-top-button.stt-style-arrow, +.scroll-to-top-button.stt-style-text { + border-radius: 4px; +} + +.scroll-to-top-button.stt-size-small { + width: 40px; + height: 40px; + font-size: 16px; +} + +.scroll-to-top-button.stt-size-medium { + width: 50px; + height: 50px; + font-size: 20px; +} + +.scroll-to-top-button.stt-size-large { + width: 60px; + height: 60px; + font-size: 24px; +} + +.scroll-to-top-button.stt-position-bottom-right { + right: 20px; + bottom: 20px; +} + +.scroll-to-top-button.stt-position-bottom-left { + left: 20px; + bottom: 20px; +} + +.stt-button-content { + pointer-events: none; +} + +.stt-style-circle .stt-button-content::before { + content: '↑'; +} + +.stt-style-arrow .stt-button-content::before { + content: '↑'; +} + +.stt-style-text .stt-button-content::before { + content: 'Top'; + font-weight: bold; +} + +.color-picker { + width: 70px; + height: 35px; +} diff --git a/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.js b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.js new file mode 100644 index 0000000..2ee662a --- /dev/null +++ b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/admin.js @@ -0,0 +1,67 @@ +(function($) { + 'use strict'; + + function updatePreview() { + const settings = { + style: $('input[name="scroll_to_top_style"]:checked').val(), + bgColor: $('input[name="scroll_to_top_bg_color"]').val(), + textColor: $('input[name="scroll_to_top_text_color"]').val(), + size: $('input[name="scroll_to_top_size"]').val(), + position: $('input[name="scroll_to_top_position"]').val(), + }; + + const $button = $('#stt-preview-button'); + + $button.css('background-color', settings.bgColor); + $button.css('color', settings.textColor); + + $button.removeClass('stt-style-circle stt-style-arrow stt-style-text') + .addClass('stt-style-' + settings.style); + + $button.removeClass('stt-size-small stt-size-medium stt-size-large') + .addClass('stt-size-' + settings.size); + + $button.removeClass('stt-position-bottom-right stt-position-bottom-left') + .addClass('stt-position-' + settings.position); + } + + $(document).ready(function() { + const $previewBox = $('.stt-preview-box'); + const $button = $('#stt-preview-button'); + + updatePreview(); + + $('input[name="scroll_to_top_style"]').change(function() { + updatePreview(); + }); + + $('input[name="scroll_to_top_bg_color"]').change(function() { + updatePreview(); + }); + + $('input[name="scroll_to_top_text_color"]').change(function() { + updatePreview(); + }); + + $('select[name="scroll_to_top_size"]').change(function() { + updatePreview(); + }); + + $('select[name="scroll_to_top_position"]').change(function() { + updatePreview(); + }); + + $previewBox.on('scroll', function() { + if ($previewBox.scrollTop() > 50) { + $button.addClass('visible'); + } else { + $button.removeClass('visible'); + } + }); + + $button.on('click', function(e) { + e.preventDefault(); + $previewBox.animate({ scrollTop: 0 }, 300); + }); + }); +})(jQuery); diff --git a/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.css b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.css new file mode 100644 index 0000000..0f306cc --- /dev/null +++ b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.css @@ -0,0 +1,120 @@ +.scroll-to-top-button { + position: fixed; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + cursor: pointer; + z-index: 9999; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +} + +.scroll-to-top-button:hover { + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); +} + +.scroll-to-top-button.visible { + opacity: 1; + visibility: visible; +} + +.scroll-to-top-button.stt-style-circle { + border-radius: 50%; +} + +.scroll-to-top-button.stt-style-arrow, +.scroll-to-top-button.stt-style-text { + border-radius: 4px; +} + +.scroll-to-top-button.stt-size-small { + width: 40px; + height: 40px; + font-size: 16px; +} + +.scroll-to-top-button.stt-size-medium { + width: 50px; + height: 50px; + font-size: 20px; +} + +.scroll-to-top-button.stt-size-large { + width: 60px; + height: 60px; + font-size: 24px; +} + +.scroll-to-top-button.stt-position-bottom-right { + right: 20px; + bottom: 20px; + left: auto; +} + +.scroll-to-top-button.stt-position-bottom-left { + left: 20px; + bottom: 20px; + right: auto; +} + +.stt-button-content { + pointer-events: none; + display: flex; + align-items: center; + justify-content: center; +} + +.stt-style-circle .stt-button-content::before { + content: '↑'; +} + +.stt-style-arrow .stt-button-content::before { + content: '↑'; +} + +.stt-style-text .stt-button-content::before { + content: 'Top'; + font-weight: bold; +} + +.scroll-to-top-button.stt-hide-mobile { + display: none; +} + +@media screen and (max-width: 768px) { + .scroll-to-top-button.stt-size-small { + width: 35px; + height: 35px; + font-size: 14px; + } + + .scroll-to-top-button.stt-size-medium { + width: 45px; + height: 45px; + font-size: 18px; + } + + .scroll-to-top-button.stt-size-large { + width: 50px; + height: 50px; + font-size: 20px; + } + + .scroll-to-top-button.stt-position-bottom-right { + right: 15px; + bottom: 15px; + } + + .scroll-to-top-button.stt-position-bottom-left { + left: 15px; + bottom: 15px; + } +} + +@media screen and (min-width: 769px) { + .scroll-to-top-button.stt-hide-mobile { + display: flex; + } +} diff --git a/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.js b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.js new file mode 100644 index 0000000..3275e6b --- /dev/null +++ b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/assets/frontend.js @@ -0,0 +1,90 @@ +(function() { + 'use strict'; + + if (typeof scrollToTopSettings === 'undefined') { + return; + } + + const settings = scrollToTopSettings; + let button = null; + let scrollTimeout = null; + + function createButton() { + button = document.createElement('div'); + button.className = 'scroll-to-top-button'; + button.setAttribute('aria-label', 'Scroll to top'); + + button.classList.add('stt-style-' + settings.style); + button.classList.add('stt-size-' + settings.size); + button.classList.add('stt-position-' + settings.position); + + if (!settings.showMobile) { + button.classList.add('stt-hide-mobile'); + } + + const content = document.createElement('span'); + content.className = 'stt-button-content'; + button.appendChild(content); + + document.body.appendChild(button); + + applyStyles(); + addEventListeners(); + } + + function applyStyles() { + if (!button) return; + + button.style.backgroundColor = settings.bgColor; + button.style.color = settings.textColor; + + if (settings.position === 'bottom-right') { + button.style.right = '20px'; + button.style.left = 'auto'; + } else { + button.style.left = '20px'; + button.style.right = 'auto'; + } + } + + function handleScroll() { + if (!button) return; + + clearTimeout(scrollTimeout); + + scrollTimeout = setTimeout(function() { + if (window.scrollY > 200) { + button.classList.add('visible'); + } else { + button.classList.remove('visible'); + } + }, 10); + } + + function scrollToTop(e) { + e.preventDefault(); + + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + } + + function addEventListeners() { + if (!button) return; + + window.addEventListener('scroll', handleScroll, { passive: true }); + + button.addEventListener('click', scrollToTop); + } + + function init() { + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', createButton); + } else { + createButton(); + } + } + + init(); +})(); diff --git a/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/scroll-to-top.php b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/scroll-to-top.php new file mode 100644 index 0000000..dfee916 --- /dev/null +++ b/chat/templates/scroll to bottom/pc-scroll-to-top-qg1e/scroll-to-top.php @@ -0,0 +1,146 @@ + 'circle', + 'sanitize_callback' => 'sanitize_text_field' + )); + + register_setting('scroll_to_top_options', 'scroll_to_top_bg_color', array( + 'default' => '#333333', + 'sanitize_callback' => 'sanitize_hex_color' + )); + + register_setting('scroll_to_top_options', 'scroll_to_top_text_color', array( + 'default' => '#ffffff', + 'sanitize_callback' => 'sanitize_hex_color' + )); + + register_setting('scroll_to_top_options', 'scroll_to_top_size', array( + 'default' => 'medium', + 'sanitize_callback' => 'sanitize_text_field' + )); + + register_setting('scroll_to_top_options', 'scroll_to_top_position', array( + 'default' => 'bottom-right', + 'sanitize_callback' => 'sanitize_text_field' + )); + + register_setting('scroll_to_top_options', 'scroll_to_top_show_mobile', array( + 'default' => '1', + 'sanitize_callback' => 'rest_sanitize_boolean' + )); + } + + public function render_settings_page() { + if (!current_user_can('manage_options')) { + return; + } + + include self::$plugin_dir . 'admin/settings-page.php'; + } + + public function enqueue_frontend_assets() { + $settings = $this->get_settings(); + + wp_enqueue_style( + 'scroll-to-top-styles', + self::$plugin_url . 'assets/frontend.css', + array(), + '1.0.0' + ); + + wp_enqueue_script( + 'scroll-to-top-script', + self::$plugin_url . 'assets/frontend.js', + array(), + '1.0.0', + true + ); + + wp_localize_script('scroll-to-top-script', 'scrollToTopSettings', array( + 'style' => $settings['style'], + 'bgColor' => $settings['bg_color'], + 'textColor' => $settings['text_color'], + 'size' => $settings['size'], + 'position' => $settings['position'], + 'showMobile' => $settings['show_mobile'], + )); + } + + public function enqueue_admin_assets($hook) { + if ('settings_page_scroll-to-top-settings' !== $hook) { + return; + } + + wp_enqueue_style( + 'scroll-to-top-admin-styles', + self::$plugin_url . 'assets/admin.css', + array(), + '1.0.0' + ); + + wp_enqueue_script( + 'scroll-to-top-admin-script', + self::$plugin_url . 'assets/admin.js', + array(), + '1.0.0', + true + ); + } + + private function get_settings() { + return 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'), + ); + } +} + +Scroll_To_Top::get_instance();