Sync: Synchro Settings Panel

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>

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")
+}

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;
+}

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");