added button to reset settings

METROKOP228 · Jul 18, 2024 · 6c05da2 · 6c05da2
1 parent f5c0b17
commit 6c05da2
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 8 deletions.
diff --git a/css/style.css b/css/style.css
@@ -58,15 +58,18 @@ body {
     display: none; /* Початково приховано */
     z-index: 1000;
 }
+
 .settings-menu label {
     margin-right: 10px;
 }
+
 .toggle-button {
     padding: 10px 20px;
     font-size: 16px;
     cursor: pointer;
     margin-top: 20px;
 }
+
 .overlay {
     position: fixed;
     top: 0;
@@ -83,8 +86,23 @@ input[type="color"] {
     right: 0;
 }
 
+.reset-btn {
+    display: flex;
+    align-items: center;
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: yellow;
+    color: blue;
+    text-decoration: none;
+    border: none;
+    border-radius: 7px;
+    cursor: pointer;
+}
 
-
+.reset-btn:hover {
+    background-color: #A69D00;
+    color: white;
+}
 
 
 

diff --git a/index.html b/index.html
@@ -46,6 +46,7 @@ <h1>ПЕРСОНАЛІЗАЦІЯ</h1>
 	    <br><br>
 	    <label for="link-hover-color">Колір посилань при наведенні:</label>
 	    <input type="color" id="link-hover-color" name="link-hover-color" value="#A60000" onchange="updateSettings()">
+	    <button class="reset-btn" onclick="reset()">Скинути</button>
   	</div>
     <div class="template-selection-container">
     	<label class="radio-container">

diff --git a/js/main.js b/js/main.js
@@ -516,12 +516,12 @@ function toggleMenu() {
 }
 
 function updateSettings() {
-    const bgColor = document.getElementById('bg-color').value;
-    const textColor = document.getElementById('text-color').value;
-    const btnHvBgColor = document.getElementById('btn-hover-bg-color').value;
-    const btnHvTextColor = document.getElementById('btn-hover-text-color').value;
-    const linkColor = document.getElementById('link-color').value;
-    const linkHvColor = document.getElementById('link-hover-color').value;
+    var bgColor = document.getElementById('bg-color').value;
+    var textColor = document.getElementById('text-color').value;
+    var btnHvBgColor = document.getElementById('btn-hover-bg-color').value;
+    var btnHvTextColor = document.getElementById('btn-hover-text-color').value;
+    var linkColor = document.getElementById('link-color').value;
+    var linkHvColor = document.getElementById('link-hover-color').value;
     document.documentElement.style.setProperty('--bg-color', bgColor);
     document.documentElement.style.setProperty('--alt-color', textColor);
     document.documentElement.style.setProperty('--btn-hover-bg-color', btnHvBgColor);
@@ -576,4 +576,31 @@ document.addEventListener('DOMContentLoaded', (event) => {
         document.documentElement.style.setProperty('--link-hover-color', savedLinkHvColor);
         document.getElementById('link-hover-color').value = savedLinkHvColor;
     }
-});
+});
+
+function reset() {
+    document.getElementById('bg-color').value = '#0000FF';
+    document.getElementById('text-color').value = '#FFFF00';
+    document.getElementById('btn-hover-bg-color').value = '#A69D00';
+    document.getElementById('btn-hover-text-color').value= '#FFFFFF';
+    document.getElementById('link-color').value = '#FF0000';
+    document.getElementById('link-hover-color').value = '#A60000';
+    bgColor = '#0000FF';
+    textColor = '#FFFF00';
+    btnHvBgColor = '#A69D00';
+    btnHvTextColor = '#FFFFFF';
+    linkColor = '#FF0000';
+    linkHvColor = '#A60000';
+    document.documentElement.style.setProperty('--bg-color', bgColor);
+    document.documentElement.style.setProperty('--alt-color', textColor);
+    document.documentElement.style.setProperty('--btn-hover-bg-color', btnHvBgColor);
+    document.documentElement.style.setProperty('--btn-hover-text-color', btnHvTextColor);
+    document.documentElement.style.setProperty('--link-color', linkColor);
+    document.documentElement.style.setProperty('--link-hover-color', linkHvColor);
+    localStorage.setItem('bgColor', bgColor);
+    localStorage.setItem('textColor', textColor);
+    localStorage.setItem('btnHvBgColor', btnHvBgColor);
+    localStorage.setItem('btnHvTextColor', btnHvTextColor);
+    localStorage.setItem('linkColor', linkColor);
+    localStorage.setItem('linkHvColor', linkHvColor);
+}