From fef4f6de36dc4259fadb12ddf2ac89d716e885d6 Mon Sep 17 00:00:00 2001
From: MasterAcnolo <68693319+MasterAcnolo@users.noreply.github.com>
Date: Sun, 18 Jan 2026 14:23:17 +0100
Subject: [PATCH] Sync: Synchro Settings Panel

---
 public/index.html                      | 12 +++++++++-
 public/script/settingsPanel.js         |  7 ++++++
 public/styles/layout/settingsPanel.css | 33 ++++++++++++++++++++++++++
 public/styles/styles.css               |  1 +
 4 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 public/script/settingsPanel.js
 create mode 100644 public/styles/layout/settingsPanel.css

diff --git a/public/index.html b/public/index.html
index da15ac5..f4bfa4f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -32,11 +32,20 @@
         </div>
     </div>
 
-    <div class="theme-switcher" id="theme-switcher">
+    <div class="theme-switcher" id="theme-switcher" style="display: none;">
         <label for="themeSelect">Thème :</label>
         <select id="themeSelect" aria-label="Choisir le thème"></select>
     </div>
+    
+    <button id="settings-button" class="settings-button" onclick="openPanel()"> <img src="assets/icon/settings.png"> </button>
 
+    <div class="settings-panel" id="settings-panel" style="display: none;">
+        <h3> Settings Panel </h3>
+        <div class="container">
+            
+        </div>
+    </div>
+ 
     <div class="container" id="container">
 
     <header>
@@ -100,6 +109,7 @@
     
     <!-- Scripts -->
     <script src="script/custompath.js"></script>
+    <script src="script/settingsPanel.js"></script>
     <script src="script/appVersion.js"></script>
     <script src="script/downloadstatus.js"></script>
     <script src="script/fetchinfo.js"></script>
diff --git a/public/script/settingsPanel.js b/public/script/settingsPanel.js
new file mode 100644
index 0000000..6868501
--- /dev/null
+++ b/public/script/settingsPanel.js
@@ -0,0 +1,7 @@
+const settingsButton = document.getElementById("settings-button")
+const settingsPanel = document.getElementById("settings-panel")
+
+function openPanel(){
+    settingsPanel.style.display = "block";
+    console.log("Click")
+}
\ No newline at end of file
diff --git a/public/styles/layout/settingsPanel.css b/public/styles/layout/settingsPanel.css
new file mode 100644
index 0000000..59a234e
--- /dev/null
+++ b/public/styles/layout/settingsPanel.css
@@ -0,0 +1,33 @@
+.settings-button{
+    display:flex;
+    background-color: rgba(219, 219, 219, 0.89);
+    border-radius: 12px;
+    padding: 5px;
+    transition: all ease-in-out 0.2s;
+    position: absolute;
+    top: 60px;
+    right: 40px;
+    border: none;
+}
+
+.settings-button img{
+    width: 50px;
+    height: 50px;
+}
+
+.settings-button:hover{
+    transform: scale(1.2);
+    cursor: pointer;
+}
+
+.settings-button:active{
+    transform: scale(0.9);
+}
+
+.settings-panel{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: red;
+    z-index: 9999999;
+}
\ No newline at end of file
diff --git a/public/styles/styles.css b/public/styles/styles.css
index 6472249..06bab5a 100644
--- a/public/styles/styles.css
+++ b/public/styles/styles.css
@@ -1,5 +1,6 @@
 /* Layout */
 @import url("layout/form.css");
+@import url("layout/settingsPanel.css");
 @import url("layout/container.css");
 @import url("layout/header.css");
 @import url("layout/videoinfo.css");