fixed chrome and added pearl colors

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5502
+    "liveServer.settings.port": 5504
 }

colors.json

@@ -23,7 +23,6 @@
       { "name": "Rosewood", "hex": "#ad7271" },
       { "name": "Canyon Rose", "hex": "#ca93b3" },
       { "name": "Coral", "hex": "#bd4b3b" },
-      { "name": "Rose Gold", "hex": "#c67a6d", "metallic": true, "chromeType": "rosegold" },
       { "name": "Aloha", "hex": "#e45c56" },
       { "name": "Red", "hex": "#ef2a2f" },
       { "name": "Maroon", "hex": "#80011f" }
@@ -45,6 +44,9 @@
       { "name": "Lime Green", "hex": "#8fc73e" },
       { "name": "Grass Green", "hex": "#28b35e" },
       { "name": "Seafoam", "hex": "#00c7b2" },
+      { "name": "Empowermint", "hex": "#779786" },
+      { "name": "Willow", "hex": "#4a715c" },
+      { "name": "Eucalyptus", "hex": "#a3bba3" },
       { "name": "Pastel Green", "hex": "#acdba7" },
       { "name": "Forest Green", "hex": "#218b21" }
     ]
@@ -78,11 +80,87 @@
       { "name": "Coffee", "hex": "#957461" }
     ]
   },
+
   {
-    "family": "Metallics",
+    "family": "Pearl and Matallic Colors",
     "colors": [
-      { "name": "Classic Gold", "hex": "#dea85e", "metallic": true },
-      { "name": "Rose Gold", "hex": "#c67a6d", "metallic": true, "chromeType": "rosegold" }
+      {
+        "name": "Pearl White",
+        "hex": "#F8F8F8",
+        "metallic": true,
+        "pearlType": "white",
+        "image": "images/pearl-white.webp"
+      },
+      {
+        "name": "Pearl Midnight Blue",
+        "hex": "#191970",
+        "metallic": true,
+        "pearlType": "midnight-blue",
+        "image": "images/pearl-midnightblue.webp"
+      },
+      {
+        "name": "Pearl Fuchsia",
+        "hex": "#FD49AB",
+        "metallic": true,
+        "pearlType": "fuchsia",
+        "image": "images/pearl-fuchsia.webp"
+      },
+      {
+        "name": "Pearl Sapphire",
+        "hex": "#0F52BA",
+        "metallic": true,
+        "pearlType": "sapphire",
+        "image": "images/pearl-sapphire.webp"
+      },
+      {
+        "name": "Pearl Violet",
+        "hex": "#8F00FF",
+        "metallic": true,
+        "pearlType": "violet",
+        "image": "images/pearl-violet.webp"
+      },
+      {
+        "name": "Pearl Lilac",
+        "hex": "#C8A2C8",
+        "metallic": true,
+        "pearlType": "lilac",
+        "image": "images/pearl-lilac.webp"
+      },
+      {
+        "name": "Pearl Light Blue",
+        "hex": "#87CEEB",
+        "metallic": true,
+        "pearlType": "blue",
+        "image": "images/pearl-lightblue.webp"
+      },
+      {
+        "name": "Pearl Pink",
+        "hex": "#F4C2C2",
+        "metallic": true,
+        "pearlType": "pink",
+        "image": "images/pearl-pink.webp"
+      },
+            {
+        "name": "Classic Rose Gold",
+        "hex": "#F4C2C2",
+        "metallic": true,
+        "pearlType": "pink",
+        "image": "images/metalic-rosegold.webp"
+      },
+      {
+        "name": "Classic Gold",
+        "hex": "#E32636",
+        "metallic": true,
+        "pearlType": "gold",
+        "image": "images/classic-gold.webp"
+      },
+            {
+        "name": "Classic Silver",
+        "hex": "#F4C2C2",
+        "metallic": true,
+        "pearlType": "silver",
+        "image": "images/classic-silver.webp"
+      }
     ]
   },
   {
@@ -93,74 +171,71 @@
         "hex": "#a18b67",
         "metallic": true,
         "chromeType": "gold",
-        "image": "images/chrome-gold.png"
+        "image": "images/chrome-gold.webp"
       },
       {
         "name": "Chrome Champagne",
         "hex": "#FF1DCE",
         "metallic": true,
         "chromeType": "champagne",
-        "image": "images/chrome-champagne.png"
+        "image": "images/chrome-champagne.webp"
       },
       {
         "name": "Chrome Silver",
         "hex": "#a8a9a4",
         "metallic": true,
         "chromeType": "silver",
-        "image": "images/chrome-silver.png"
+        "image": "images/chrome-silver.webp"
       },
       {
         "name": "Chrome Space Grey",
         "hex": "#a8a9a4",
         "metallic": true,
         "chromeType": "spacegrey",
-        "image": "images/chrome-spacegrey.png"
+        "image": "images/chrome-spacegrey.webp"
       },
       {
         "name": "Chrome Rose Gold",
         "hex": "#FFBF00",
         "metallic": true,
         "chromeType": "rosegold",
-        "image": "images/chrome-rosegold.png"
+        "image": "images/chrome-rosegold.webp"
       },
       {
         "name": "Chrome Pink",
         "hex": "#FFBF00",
         "metallic": true,
         "chromeType": "rosegold",
-        "image": "images/chrome-pink.png"
+        "image": "images/chrome-pink.webp"
       },
       {
-        "name": "Chrome Truffel",
+        "name": "Chrome Truffle",
         "hex": "#FF1DCE",
         "metallic": true,
         "chromeType": "champagne",
-        "image": "images/chrome-truffel.png"
+        "image": "images/chrome-truffle.webp"
       },
       {
         "name": "Chrome Blue",
         "hex": "#2d576f",
         "metallic": true,
         "chromeType": "blue",
-        "image": "images/chrome-blue.png"
+        "image": "images/chrome-blue.webp"
       },
       {
         "name": "Chrome Purple",
         "hex": "#DFFF00",
         "metallic": true,
         "chromeType": "purple",
-        "image": "images/chrome-purple.png"
+        "image": "images/chrome-purple.webp"
       },
       {
         "name": "Chrome Green",
         "hex": "#457066",
         "metallic": true,
         "chromeType": "green",
-        "image": "images/chrome-green.png"
+        "image": "images/chrome-green.webp"
       }
     ]
   }
-  
-
-  
-]
+]

list.txt

@@ -46,7 +46,7 @@ Fog  #6b9098
 Empowermint  #779786
 Ecualyptus  #497259
 Pastel Dusk #d7c4c8
-black  0b0d0f
+black  #0b0d0f
 
 Pearl White
 Pearl Midnight Blue

style.css

@@ -1,305 +0,0 @@
-:root {
-    /* --bulma-primary-h: ; */
-    --bulma-primary-l: 47%;
-    --bulma-info-h: 175deg;
-    --bulma-info-s: 88%;
-    --bulma-info-l: 42%;
-    --bulma-navbar-item-img-max-height: 200px;
-}
-
-html {
-    background-color: #e7e6dd;
-    font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
-    height: 100%;
-}
-
-body {
-    font-family: "Autour One", serif;
-    color:#363636;
-}
-
-
-nav {
-    font-family: "Autour One", serif;
-}
-.update{
-  height: 50px;
-  width:100%;
-  /* background-color: #deb0f0; */
-  text-align: center;
-  margin: auto;
-  overflow: hidden;
-  background-color: #fef6e4;
-  padding: 10px 0;
-  /* border-top: 2px solid #94d601;; */
-  /* border-bottom: 2px solid #94d601;; */
-  position: relative;
-}
-#message{
-    display: inline-block;
-  white-space: nowrap;
-  padding-left: 100%; /* Start off-screen */
-  animation: scroll-left 25s linear infinite;
-  font-size: 1.2rem;
-  color: #333;
-}
-
-@keyframes scroll-left {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-
-
-.update-carousel {
-  width: 100%;
-  overflow: hidden;
-  background-color: #fef6e4;
-  border-top: 2px solid #ffd100;
-  border-bottom: 2px solid #ffd100;
-  padding: 10px;
-  position: relative;
-  height: 40px;
-  display: flex;
-  align-items: center;
-  font-size: 1.1rem;
-  color: #333;
-}
-
-.message-text {
-  white-space: nowrap;
-  position: absolute;
-  left: 100%;
-  animation: slide-left 8s linear infinite;
-}
-
-@keyframes slide-left {
-  0% {
-    left: 100%;
-  }
-  10% {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  90% {
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  100% {
-    left: -100%;
-  }
-}
-
-header {
-    position: relative;
-    text-align: center;
-    color: antiquewhite;
-}
-
-.centerimg {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    font-size: 4em;
-}
-
-#heroImg {
-    position: absolute; /* height: 600px; */
-}
-
-.navbar-item img, .navbar-item svg {
-    max-height: 1.30em;
-}
-
-.is-overlay {
-    margin: auto;
-}
-
-.padding{
-  padding: 1.2rem;
-}
-
-
-
-/* Centered text */
-.text-on-image {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  text-align: center;
-}
-
-.image-container {
-  position: relative;
-  display: inline-block;
-  width: 100%;
-  padding: 1rem;
-}
-
-.image-container img {
-  display: block;
-  width: 100%;
-  height: auto;
-}
-
-.overlay {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background: rgba(0, 0, 0, 0.5); /* Optional: adds background for better readability */
-  padding: 10px;
-  text-align: center;
-  border-radius: 5px;
-}
-.lightbox .close {
-    pointer-events: auto;
-    z-index: 1001;
-}
-
-h1 label button{color: #363636}
-
-form{
-    background-color: rgb(231, 230, 221);
-    font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
-    color:#363636;
-
-}
-
-#top {
-      font-family: "Autour One", serif; /* font-family: "Playwrite AU SA", serif; */
-
-  display: none; /* Hidden by default */
-  position: fixed; /* Fixed/sticky position */
-  bottom: 12px; /* Place the button at the bottom of the page */
-  right: 10px; /* Place the button 30px from the right */
-  z-index: 99; /* Make sure it does not overlap */
-  border: none; /* Remove borders */
-  outline: none; /* Remove outline */
-  background-color: #94d601; /* Set a background color */
-  cursor: pointer; /* Add a mouse pointer on hover */
-  padding: 15px; /* Some padding */
-  border-radius: 10px; /* Rounded corners */
-  font-size: 18px; /* Increase font size */
-  border:solid 1px #363636;
-  box-shadow: 3px 3px 3px #363636 ;
-}
-
-#top:hover {
-  background-color: #aedad3; /* Add a dark-grey background on hover */
-}
-
-#status{
-  color: rgb(221, 74, 214);
-  margin-bottom: 1rem;;
-}
-
-.neonTextOpen {
-  color: #fff;
-  text-shadow:
-    0 0 7px #fff,
-    0 0 10px #fff,
-    0 0 21px #fff,
-    0 0 42px #bc13fe,
-    0 0 82px #bc13fe,
-    0 0 92px #bc13fe,
-    0 0 102px #bc13fe,
-    0 0 151px #bc13fe;
-  animation: pulsateOpen 1.5s infinite alternate;  
-  max-width: fit-content;
-  margin: auto;
-  border: 0.1rem solid #fff;
-  border-radius: 2rem;
-  padding: 0.4em;
-  margin-bottom: 1rem;
-  box-shadow:
-    0 0 0.2rem #fff,
-    0 0 0.2rem #fff,
-    0 0 2rem #bc13fe,
-    0 0 0.8rem #bc13fe,
-    inset 0 0 1.3rem #bc13fe;
-}
-
-.neonTextClosed {
-  color: #fff;
-  text-shadow:
-    0 0 7px #fff,
-    0 0 10px #fff,
-    0 0 21px #fff,
-    0 0 42px #11c9f7,
-    0 0 82px #11c9f7,
-    0 0 92px #11c9f7,
-    0 0 102px #11c9f7,
-    0 0 151px #11c9f7;
-  animation: pulsateClosed 1.5s infinite alternate;  
-  max-width: fit-content;
-  margin: auto;
-  border: 0.1rem solid #fff;
-  border-radius: 2rem;
-  padding: 0.4em;
-  margin-bottom: 1rem;
-  box-shadow:
-    0 0 0.2rem #fff,
-    0 0 0.2rem #fff,
-    0 0 2rem #11c9f7,
-    0 0 0.8rem #11c9f7,
-    inset 0 0 1.3rem #11c9f7;
-}
-
-@keyframes pulsateOpen {
-  
-  100% {
-    text-shadow:
-    0 0 4px #fff,
-    0 0 11px #fff,
-    0 0 19px #fff,
-    0 0 40px #bc13fe,
-    0 0 80px #bc13fe,
-    0 0 90px #bc13fe,
-    0 0 100px #bc13fe,
-    0 0 150px #bc13fe;
-}
-  
-  0% {
-    text-shadow:
-    0 0 2px #fff,
-    0 0 4px #fff,
-    0 0 6px #fff,
-    0 0 10px #bc13fe,
-    0 0 45px #bc13fe,
-    0 0 55px #bc13fe,
-    0 0 70px #bc13fe,
-    0 0 80px #bc13fe;
-}
-  
-@keyframes pulsateClosed {
-    
-  100% {
-    text-shadow:
-    0 0 4px #fff,
-    0 0 11px #fff,
-    0 0 19px #fff,
-    0 0 40px #11c9f7,
-    0 0 80px #11c9f7,
-    0 0 90px #11c9f7,
-    0 0 100px #11c9f7,
-    0 0 150px #11c9f7;
-}
-  
-  0% {
-    text-shadow:
-    0 0 2px #fff,
-    0 0 4px #fff,
-    0 0 6px #fff,
-    0 0 10px #11c9f7,
-    0 0 45px #11c9f7,
-    0 0 55px #11c9f7,
-    0 0 70px #11c9f7,
-    0 0 80px #11c9f7;
-};
-