Skip to content

Commit

Permalink
Update scrollwheelgen.html
Browse files Browse the repository at this point in the history
  • Loading branch information
@kai9987kai
kai9987kai authored Dec 15, 2023
1 parent f5343d8 commit a899403
Showing 1 changed file with 120 additions and 98 deletions.
218 changes: 120 additions & 98 deletions scrollwheelgen.html
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -14,30 +12,39 @@
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;
background-color: #ffffff;
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,
Expand All @@ -54,7 +61,9 @@
color: #495057;
}

input {
input,
select,
checkbox {
width: calc(100% - 16px);
padding: 8px;
margin-bottom: 10px;
Expand All @@ -64,7 +73,7 @@
}

button {
width: calc(33.33% - 5px);
width: calc(100% - 16px);
padding: 10px;
background-color: #0074D9;
color: white;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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() {
Expand All @@ -204,17 +232,16 @@ <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>
<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>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
Expand All @@ -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() {
Expand All @@ -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));
Expand All @@ -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>

0 comments on commit a899403

Please sign in to comment.