From 72c11aaa339fcb3ac060c1d224156cd88ab49bdc Mon Sep 17 00:00:00 2001
From: ilyaChuk <86570508+ilyaChuk@users.noreply.github.com>
Date: Thu, 29 Feb 2024 15:14:46 +0300
Subject: [PATCH] demo

---
 index.html | 40 +++++++++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 15 deletions(-)

diff --git a/index.html b/index.html
index 7298dc4..9e98fe2 100644
--- a/index.html
+++ b/index.html
@@ -22,7 +22,7 @@ <h2>Кастом</h2>
 		<div id="testBox" class="box"></div>
 		<div class="controls" style="display: flex; flex-direction: column;">
 			<label>
-				<input type="range" min="0" max="360" id="rangeAngel"> Угол <span class="code">--gradient-angle</span>
+				<input type="range" value="90" min="0" max="360" id="rangeAngel"> Угол <span class="code">--gradient-angle</span>
 			</label>
 			<label>
 				<input type="color" id="firstColor"> Первый цвет <span class="code">--gradient-start</span>
@@ -31,13 +31,16 @@ <h2>Кастом</h2>
 				<input type="color" id="secondColor"> Второй цвет <span class="code">--gradient-end</span>
 			</label>
 			<label>
-				<input type="range" name="" min="1" max="50" id="rangeSize"> Размер пикселей <span
+				<input type="range" value="10" min="1" max="50" id="rangeSize"> Размер пикселей <span
 					class="code">--square-size</span>
 			</label>
 			<label>
-				<input type="range" min="1" max="30" id="rangeNoice"> Сила шума <span
+				<input type="range" min="0.01" value="20" max="300" id="rangeNoice"> Сила шума <span
 					class="code">--noise-intensity</span>
 			</label>
+			<label>
+				<button id="updateSeed">Сменить сид</button>
+			</label>
 		</div>
 	</div>
 	<h2>Менять размер за правый нижний угол</h2>
@@ -59,18 +62,22 @@ <h2>Менять размер за правый нижний угол</h2>
 			color: #e2d3dc;
 		}
 
+		input[type="range"]{
+			width: 20rem;
+		}
+
 		.box {
 			background-image: paint(pixelGradient);
-			--gradient-start: #ff3600;
-			--gradient-end: #7900ff;
-			--gradient-angle: 105;
-			--square-size: 7;
-			--noise-intensity: 21;
+			--gradient-start:var(--gradient-startG, #ff3600);
+			--gradient-end:var(--gradient-endG, #7900ff);
+			--gradient-angle:var(--gradient-angleG, 105);
+			--square-size:var(--square-sizeG, 7);
+			--noise-intensity:var(--noise-intensityG, 21);
+			--seed:var(--seedG, 12345);
 			width: 30rem;
 			height: 30rem;
 			border-radius: 1rem;
 			border: 2px solid #680e0e;
-			--seed: 49;
 		}
 
 		.code {
@@ -81,26 +88,29 @@ <h2>Менять размер за правый нижний угол</h2>
 		}
 	</style>
 	<script>
-		let testBox = document.getElementById('testBox');
+		let testBox = document.getElementsByTagName('html')[0]
 		document.getElementById('rangeAngel').addEventListener('input', (ev) => {
 			let angle = ev.target.value
-			testBox.style.setProperty('--gradient-angle', angle)
+			testBox.style.setProperty('--gradient-angleG', angle)
 		})
 		document.getElementById('firstColor').addEventListener('input', (ev) => {
 			let firstColor = ev.target.value
-			testBox.style.setProperty('--gradient-start', firstColor)
+			testBox.style.setProperty('--gradient-startG', firstColor)
 		})
 		document.getElementById('secondColor').addEventListener('input', (ev) => {
 			let secondColor = ev.target.value
-			testBox.style.setProperty('--gradient-end', secondColor)
+			testBox.style.setProperty('--gradient-endG', secondColor)
 		})
 		document.getElementById('rangeSize').addEventListener('input', (ev) => {
 			let rangeSize = ev.target.value
-			testBox.style.setProperty('--square-size', rangeSize)
+			testBox.style.setProperty('--square-sizeG', rangeSize)
 		})
 		document.getElementById('rangeNoice').addEventListener('input', (ev) => {
 			let rangeNoice = ev.target.value
-			testBox.style.setProperty('--noise-intensity', rangeNoice)
+			testBox.style.setProperty('--noise-intensityG', rangeNoice)
+		})
+		document.getElementById('updateSeed').addEventListener('click', (ev) => {
+			testBox.style.setProperty('--seedG', Math.random() * 100000000000000000)
 		})
 	</script>
 </body>