From a89940331b219d7cf49578dfdf7d888c6d500479 Mon Sep 17 00:00:00 2001
From: Kai Piper <kai9987kai@gmail.com>
Date: Fri, 15 Dec 2023 16:30:23 +0000
Subject: [PATCH] Update scrollwheelgen.html

---
 scrollwheelgen.html | 218 ++++++++++++++++++++++++--------------------
 1 file changed, 120 insertions(+), 98 deletions(-)
diff --git a/scrollwheelgen.html b/scrollwheelgen.html
index 52229be..93aa486 100644
--- a/scrollwheelgen.html
+++ b/scrollwheelgen.html
@@ -1,9 +1,7 @@
 <!DOCTYPE html>
 <!-- saved from url=(0049)file:///C:/Users/kai99/OneDrive/Desktop/test.html -->
-<html lang="en">
-
-<head>
-    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Modern Custom Scrollbar Generator</title>
     <style>
@@ -14,23 +12,6 @@
             background-color: #f8f9fa;
         }
 
-        #custom-scrollbar {
-            width: 200px;
-            height: 10px;
-            border-radius: 5px;
-            background: #0074D9;
-            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
-            transition: background 0.3s ease;
-            margin: 0 auto;
-            margin-top: 20px; /* Space between description and preview */
-        }
-
-        #preview-subtitle {
-            text-align: center;
-            margin-top: 10px;
-            color: #343a40;
-        }
-
         #options-container {
             margin-top: 20px;
             padding: 20px;
@@ -38,6 +19,32 @@
             border: 1px solid #ced4da;
             border-radius: 10px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-between;
+        }
+
+        .option-group {
+            flex: 1 1 calc(33.33% - 10px);
+        }
+
+        #preview-container {
+            text-align: center;
+            margin-top: 20px;
+        }
+
+        #preview-title {
+            margin: 0;
+            color: #343a40;
+        }
+
+        #preview-scroll-container,
+        #preview-gradient-container {
+            margin-top: 10px;
+            width: 100px;
+            height: 100px;
+            border-radius: 5px;
+            overflow: auto;
         }
 
         h1,
@@ -54,7 +61,9 @@
             color: #495057;
         }
 
-        input {
+        input,
+        select,
+        checkbox {
             width: calc(100% - 16px);
             padding: 8px;
             margin-bottom: 10px;
@@ -64,7 +73,7 @@
         }
 
         button {
-            width: calc(33.33% - 5px);
+            width: calc(100% - 16px);
             padding: 10px;
             background-color: #0074D9;
             color: white;
@@ -90,58 +99,75 @@
 </head>
 
 <body>
-    <div id="custom-scrollbar"></div>
-    <div id="preview-subtitle">Preview</div>
+    
 
     <div id="options-container">
-        <h1>Custom Scrollbar Generator</h1>
-        <p>Adjust the settings and generate your custom scrollbar code.</p>
+        <div class="option-group">
+            <h1>Custom Scrollbar Generator</h1>
+            <p>Adjust the settings and generate your custom scrollbar code.</p>
 
-        <label for="width">Width:</label>
-        <input type="text" id="width" value="200px">
+            <label for="width">Width:</label>
+            <input type="text" id="width" value="200px">
 
-        <label for="height">Height:</label>
-        <input type="text" id="height" value="10px">
+            <label for="height">Height:</label>
+            <input type="text" id="height" value="10px">
 
-        <label for="border-radius">Border Radius:</label>
-        <input type="text" id="border-radius" value="5px">
+            <label for="border-radius">Border Radius:</label>
+            <input type="text" id="border-radius" value="5px">
 
-        <label for="background">Background Color:</label>
-        <input type="color" id="background" value="#0074D9">
+            <label for="background">Background Color:</label>
+            <input type="color" id="background" value="#0074D9">
 
-        <label for="bar-width">Bar Width:</label>
-        <input type="text" id="bar-width" value="10px">
+            <label for="box-shadow">Box Shadow:</label>
+            <input type="text" id="box-shadow" value="2px 2px 5px rgba(0, 0, 0, 0.2)">
 
-        <label for="bar-background">Bar Background Color:</label>
-        <input type="color" id="bar-background" value="#ffffff">
+            <label for="scroll-behavior">Scroll Behavior:</label>
+            <select id="scroll-behavior">
+                <option value="auto">Auto</option>
+                <option value="smooth">Smooth</option>
+                <option value="instant">Instant</option>
+            </select>
 
-        <label for="box-shadow">Box Shadow:</label>
-        <input type="text" id="box-shadow" value="2px 2px 5px rgba(0, 0, 0, 0.2)">
+            <label for="bar-width">Scrollbar Width:</label>
+            <input type="text" id="bar-width" value="10px">
 
-        <label for="gradient-toggle">Use Gradient:</label>
-        <input type="checkbox" id="gradient-toggle" checked="">
+            <label for="bar-background">Scrollbar Background:</label>
+            <input type="color" id="bar-background" value="#ffffff">
+        </div>
 
-        <label for="wheel-settings">Wheel Settings:</label>
-        <input type="text" id="wheel-settings" value="smooth">
+        <div class="option-group">
+            <label for="gradient-toggle">Use Gradient:</label>
+            <input type="checkbox" id="gradient-toggle" checked="">
+        </div>
 
-        <button onclick="applyStyles()">Apply Styles</button>
-        <button onclick="generateCode()">Generate</button>
-        <button style="background-color: #28a745;" onclick="saveSettings()">Save Settings</button>
+        <div class="option-group">
+            <button onclick="applyStyles()">Apply Styles</button>
+            <button onclick="generateCode()">Generate</button>
+            <button style="background-color: #28a745;" onclick="saveSettings()">Save Settings</button>
+        </div>
+    </div>
 
-        <pre id="code-box"></pre>
+    <div id="preview-container">
+        <p id="preview-title">Preview</p>
+        <div id="preview-scroll-container" style="width: 200px; height: 10px; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 5px; background: rgb(159, 72, 35); --scrollbar-width: 10px; --scrollbar-background: #00ccff;"></div>
+        <div id="preview-gradient-container" style="background: linear-gradient(to right, rgb(199, 112, 75), rgb(119, 32, 0));"></div>
     </div>
 
+    <pre id="code-box"></pre>
+
     <script type="text/javascript">
         const scrollbar = document.getElementById('custom-scrollbar');
         const widthInput = document.getElementById('width');
         const heightInput = document.getElementById('height');
         const borderRadiusInput = document.getElementById('border-radius');
         const backgroundInput = document.getElementById('background');
-        const barWidthInput = document.getElementById('bar-width');
-        const barBackgroundInput = document.getElementById('bar-background');
         const boxShadowInput = document.getElementById('box-shadow');
         const gradientToggle = document.getElementById('gradient-toggle');
-        const wheelSettingsInput = document.getElementById('wheel-settings');
+        const scrollBehaviorSelect = document.getElementById('scroll-behavior');
+        const barWidthInput = document.getElementById('bar-width');
+        const barBackgroundInput = document.getElementById('bar-background');
+        const previewScrollContainer = document.getElementById('preview-scroll-container');
+        const previewGradientContainer = document.getElementById('preview-gradient-container');
 
         function adjustColor(color, amount) {
             let usePound = false;
@@ -175,14 +201,15 @@ <h1>Custom Scrollbar Generator</h1>
             const boxShadow = boxShadowInput.value;
             const isGradient = gradientToggle.checked;
             const baseColor = backgroundInput.value;
+            const scrollBehavior = scrollBehaviorSelect.value;
             const barWidth = barWidthInput.value;
             const barBackground = barBackgroundInput.value;
-            const wheelSettings = wheelSettingsInput.value;
 
             scrollbar.style.width = width;
             scrollbar.style.height = height;
             scrollbar.style.borderRadius = borderRadius;
             scrollbar.style.boxShadow = boxShadow;
+            scrollbar.style.scrollBehavior = scrollBehavior;
 
             if (isGradient) {
                 const lighterColor = adjustColor(baseColor, 40);
@@ -192,9 +219,10 @@ <h1>Custom Scrollbar Generator</h1>
                 scrollbar.style.background = baseColor;
             }
 
-            scrollbar.style.setProperty('--bar-width', barWidth);
-            scrollbar.style.setProperty('--bar-background', barBackground);
-            scrollbar.style.setProperty('--wheel-settings', wheelSettings);
+            scrollbar.style.setProperty('--scrollbar-width', barWidth);
+            scrollbar.style.setProperty('--scrollbar-background', barBackground);
+
+            updatePreview();
         }
 
         function generateCode() {
@@ -204,9 +232,9 @@ <h1>Custom Scrollbar Generator</h1>
             const boxShadow = boxShadowInput.value;
             const isGradient = gradientToggle.checked;
             const baseColor = backgroundInput.value;
+            const scrollBehavior = scrollBehaviorSelect.value;
             const barWidth = barWidthInput.value;
             const barBackground = barBackgroundInput.value;
-            const wheelSettings = wheelSettingsInput.value;
 
             const code = `
 <!DOCTYPE html>
@@ -214,7 +242,6 @@ <h1>Custom Scrollbar Generator</h1>
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Custom Scrollbar Styler</title>
     <style>
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
@@ -229,45 +256,38 @@ <h1>Custom Scrollbar Generator</h1>
             border-radius: ${borderRadius};
             background: ${isGradient ? `linear-gradient(to right, ${adjustColor(baseColor, 40)}, ${adjustColor(baseColor, -40)})` : baseColor};
             box-shadow: ${boxShadow};
-            transition: background 0.3s ease;
-            margin: 0 auto;
-            margin-top: 20px; /* Space between description and preview */
-        }
-
-        #preview-subtitle {
-            text-align: center;
-            margin-top: 10px;
-            color: #343a40;
-        }
-
-        .custom-scrollbar-inner {
-            width: var(--bar-width, 10px);
-            height: 100%;
-            background: var(--bar-background, #ffffff);
-        }
-
-        .custom-scrollbar-inner::-webkit-scrollbar {
-            width: var(--bar-width, 10px);
-        }
-
-        .custom-scrollbar-inner::-webkit-scrollbar-thumb {
-            background: var(--bar-background, #ffffff);
-        }
-
-        .custom-scrollbar-inner::-webkit-scrollbar-track {
-            background: var(--background, #0074D9);
-        }
-
-        html {
-            scroll-behavior: var(--wheel-settings, smooth);
+            scroll-behavior: ${scrollBehavior};
+            --scrollbar-width: ${barWidth};
+            --scrollbar-background: ${barBackground};
+            /* Additional scrollbar styles go here */
         }
     </style>
 </head>
 <body>
-    <div id="custom-scrollbar" class="custom-scrollbar-inner"></div>
+    <div id="custom-scrollbar"></div>
 </body>
 </html>`;
+
             document.getElementById('code-box').textContent = code;
+            updatePreview();
+        }
+
+        function updatePreview() {
+            previewScrollContainer.style.width = widthInput.value;
+            previewScrollContainer.style.height = heightInput.value;
+            previewScrollContainer.style.borderRadius = borderRadiusInput.value;
+            previewScrollContainer.style.boxShadow = boxShadowInput.value;
+            previewScrollContainer.style.background = backgroundInput.value;
+            previewScrollContainer.style.setProperty('--scrollbar-width', barWidthInput.value);
+            previewScrollContainer.style.setProperty('--scrollbar-background', barBackgroundInput.value);
+
+            if (gradientToggle.checked) {
+                const lighterColor = adjustColor(backgroundInput.value, 40);
+                const darkerColor = adjustColor(backgroundInput.value, -40);
+                previewGradientContainer.style.background = `linear-gradient(to right, ${lighterColor}, ${darkerColor})`;
+            } else {
+                previewGradientContainer.style.background = backgroundInput.value;
+            }
         }
 
         function saveSettings() {
@@ -276,11 +296,11 @@ <h1>Custom Scrollbar Generator</h1>
                 height: heightInput.value,
                 borderRadius: borderRadiusInput.value,
                 background: backgroundInput.value,
-                barWidth: barWidthInput.value,
-                barBackground: barBackgroundInput.value,
                 boxShadow: boxShadowInput.value,
                 gradient: gradientToggle.checked,
-                wheelSettings: wheelSettingsInput.value,
+                scrollBehavior: scrollBehaviorSelect.value,
+                barWidth: barWidthInput.value,
+                barBackground: barBackgroundInput.value,
             };
 
             localStorage.setItem('customScrollbarSettings', JSON.stringify(settings));
@@ -295,18 +315,20 @@ <h1>Custom Scrollbar Generator</h1>
                 heightInput.value = settings.height;
                 borderRadiusInput.value = settings.borderRadius;
                 backgroundInput.value = settings.background;
-                barWidthInput.value = settings.barWidth;
-                barBackgroundInput.value = settings.barBackground;
                 boxShadowInput.value = settings.boxShadow;
                 gradientToggle.checked = settings.gradient;
-                wheelSettingsInput.value = settings.wheelSettings;
+                scrollBehaviorSelect.value = settings.scrollBehavior;
+                barWidthInput.value = settings.barWidth;
+                barBackgroundInput.value = settings.barBackground;
 
                 applyStyles();
             }
         }
 
         loadSettings(); // Load settings on page load
+        setInterval(updatePreview, 1000); // Update preview every second
     </script>
-</body>
 
-</html>
+
+
+</body></html>
