Added color-picker

Author: MjavadH

Minimal/LightSaber/assets/style.css

@@ -113,4 +113,67 @@ body {
     .T404 h1 {
         font-size: 5.5em;
     }
+}
+
+/* color-picker */
+.color-picker {
+    position: absolute;
+    left: -50px;
+    width: 50px;
+    height: 100%;
+    background: #0f0f0f;
+    border-radius: 0 0.8rem 0 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
+    box-shadow: var(--LightSaber-color) 0 0 20px;
+    z-index: 2;
+    transition: 200ms linear;
+}
+
+.color-picker.show {
+    left: 0;
+}
+
+.show-btn {
+    position: absolute;
+    width: 40px;
+    height: 20px;
+    right: -20px;
+    bottom: 0;
+    z-index: -1;
+    border-radius: 5px;
+    background: #0f0f0f;
+    color: #fff;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    cursor: pointer;
+}
+
+.show-btn span {
+    margin-right: 6px;
+    transition: 200ms linear;
+}
+
+.color-picker.show .show-btn span {
+    transform: rotateZ(180deg);
+}
+
+.color-picker .color {
+    width: 40px;
+    height: 40px;
+    border: #fff 3px solid;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: 200ms linear;
+}
+
+.color-picker .color.active {
+    border: #555 3px solid;
+}
+
+.color-picker .color:hover:not(.active) {
+    border: #999 3px solid;
 }

Minimal/LightSaber/index.html

@@ -15,13 +15,48 @@
     <h1>4X4</h1>
 </section>
 
+<section id="color_picker" class="color-picker">
+    <div class="color active" style="background-color: var(--Green)"></div>
+    <div class="color" style="background-color: var(--Blue)"></div>
+    <div class="color" style="background-color: var(--red)"></div>
+    <div class="color" style="background-color: var(--pruple)"></div>
+    <div class="color" style="background-color: var(--Pink)"></div>
+    <div class="color" style="background-color: var(--orange)"></div>
+    <div class="color" style="background-color: var(--yellow)"></div>
+    <div class="color" style="background-color: var(--white)"></div>
+    <div class="color" style="background-color: var(--black)"></div>
+    <div id="show_btn" class="show-btn"><span> > </span></div>
+</section>
+
 <!--Script-->
 <script type="text/javascript">
     let LightSaber = document.getElementById("LightSaber");
     if (window.outerHeight > window.outerWidth) {
         LightSaber.classList.add("Second")
         LightSaber.style.width = window.outerHeight + "px"
     }
+
+    /* color-picker */
+    let color_picker = document.getElementById("color_picker");
+    let colors = document.getElementsByClassName("color");
+    let show_btn = document.getElementById("show_btn");
+    show_btn.onclick = () => {
+        color_picker.classList.toggle("show")
+    }
+    for (let i = 0; i < colors.length; i++) {
+        colors[i].addEventListener("click", () => {
+            for (let g = 0; g < colors.length; g++) {
+                colors[g].className = "color";
+            }
+            colors[i].className = "color active";
+            document.querySelector(':root').style.setProperty('--LightSaber-color', colors[i].style.backgroundColor);
+            let animationName = getComputedStyle(LightSaber).animationName;
+            LightSaber.style.animationName = "none";
+            setTimeout(function () {
+                LightSaber.style.animationName = animationName;
+            }, 100);
+        })
+    }
 </script>
 </body>
 </html>