Create scrollwheelgen.html

kai9987kai · Dec 14, 2023 · afeb5b6 · afeb5b6
1 parent f963f26
commit afeb5b6
Showing 1 changed file with 175 additions and 0 deletions.
diff --git a/scrollwheelgen.html b/scrollwheelgen.html
@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Custom Scrollbar Styler</title>
+    <style>
+        /* Reset some default styles */
+        body, input, button, label {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        /* Container for layout */
+        .container {
+            padding: 20px;
+            max-width: 600px;
+            margin: auto;
+        }
+
+        /* Style for input fields and buttons */
+        input, button {
+            width: 100%;
+            padding: 10px;
+            margin: 10px 0;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+        }
+
+        /* Style for buttons */
+        button {
+            background-color: #0074D9;
+            color: white;
+            border: none;
+            cursor: pointer;
+        }
+
+        button:hover {
+            background-color: #0056b3;
+        }
+
+        /* Style for the code box */
+        #code-box {
+            background-color: #f4f4f4;
+            border: 1px solid #ddd;
+            padding: 10px;
+            margin-top: 10px;
+            white-space: pre-wrap;
+        }
+
+        /* Style for the title and description */
+        .header {
+            text-align: center;
+            margin-bottom: 20px;
+        }
+
+        .header h1 {
+            margin-bottom: 10px;
+        }
+
+        .header p {
+            color: #555;
+        }
+
+        /* Custom scroll bar styles */
+        #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;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <h1>Custom Scrollbar Styler</h1>
+            <p>Customize the scrollbar and generate CSS code for your design.</p>
+        </div>
+
+        <div id="custom-scrollbar"></div>
+
+        <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="border-radius">Border Radius:</label>
+        <input type="text" id="border-radius" value="5px">
+
+        <label for="background">Background:</label>
+        <input type="color" id="background" value="#0074D9">
+
+        <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="gradient-toggle">Use Gradient:</label>
+        <input type="checkbox" id="gradient-toggle">
+
+        <button onclick="testStyles()">Test</button>
+        <button onclick="generateCode()">Generate</button>
+
+        <pre id="code-box"></pre>
+    </div>
+
+    <script>
+        function adjustColor(color, amount) {
+            let usePound = false;
+
+            if (color[0] == "#") {
+                color = color.slice(1);
+                usePound = true;
+            }
+
+            let num = parseInt(color, 16);
+
+            let r = (num >> 16) + amount;
+            if (r > 255) r = 255;
+            else if (r < 0) r = 0;
+
+            let b = ((num >> 8) & 0x00FF) + amount;
+            if (b > 255) b = 255;
+            else if (b < 0) b = 0;
+
+            let g = (num & 0x0000FF) + amount;
+            if (g > 255) g = 255;
+            else if (g < 0) g = 0;
+
+            return (usePound ? "#" : "") + (g | (b << 8) | (r << 16)).toString(16);
+        }
+
+        function testStyles() {
+            const scrollbar = document.getElementById('custom-scrollbar');
+            const width = document.getElementById('width').value;
+            const height = document.getElementById('height').value;
+            const borderRadius = document.getElementById('border-radius').value;
+            const boxShadow = document.getElementById('box-shadow').value;
+            const isGradient = document.getElementById('gradient-toggle').checked;
+            const baseColor = document.getElementById('background').value;
+
+            scrollbar.style.width = width;
+            scrollbar.style.height = height;
+            scrollbar.style.borderRadius = borderRadius;
+            scrollbar.style.boxShadow = boxShadow;
+
+            if (isGradient) {
+                const lighterColor = adjustColor(baseColor, 40);
+                const darkerColor = adjustColor(baseColor, -40);
+                scrollbar.style.background = `linear-gradient(to right, ${lighterColor}, ${darkerColor})`;
+            } else {
+                scrollbar.style.background = baseColor;
+            }
+        }
+
+        function generateCode() {
+            const scrollbar = document.getElementById('custom-scrollbar');
+            const code = `
+#custom-scrollbar {
+    width: ${scrollbar.style.width};
+    height: ${scrollbar.style.height};
+    border-radius: ${scrollbar.style.borderRadius};
+    background: ${scrollbar.style.background};
+    box-shadow: ${scrollbar.style.boxShadow};
+    transition: background 0.3s ease;
+}`;
+            document.getElementById('code-box').textContent = code;
+        }
+    </script>
+</body>
+</html>