Wardrobe page

petitbonhomme/_data/clothing_items_colors.yml

@@ -1,199 +1,158 @@
 # Red Family
-- name: "Red"
-  HTML_code: "FF0000"
+- name: "BrightRed"
+  HTML_code: "EE4B2B"
   family: "Red"
 
-- name: "Crimson"
-  HTML_code: "DC143C"
+- name: "BrickRed"
+  HTML_code: "AA4A44"
   family: "Red"
 
-- name: "Maroon"
-  HTML_code: "800000"
+- name: "Burgundy"
+  HTML_code: "800020"
   family: "Red"
 
-- name: "Salmon"
-  HTML_code: "FA8072"
-  family: "Red"
+# Brown Family
+- name: "Fawn"
+  HTML_code: "E5AA70"
+  family: "Brown"
 
-- name: "LightCoral"
-  HTML_code: "F08080"
-  family: "Red"
+- name: "LightBrown"
+  HTML_code: "C4A484"
+  family: "Brown"
 
-- name: "Pink"
-  HTML_code: "FFC0CB"
-  family: "Red"
+- name: "Coffee"
+  HTML_code: "6F4E37"
+  family: "Brown"
 
-# Green Family
-- name: "Green"
-  HTML_code: "00FF00"
-  family: "Green"
+# Orange Family
+- name: "BrightOrange"
+  HTML_code: "FFAC1C"
+  family: "Orange"
 
-- name: "Lime"
-  HTML_code: "00FF00"
-  family: "Green"
+- name: "NeonOrange"
+  HTML_code: "FF5F1F"
+  family: "Orange"
 
-- name: "ForestGreen"
-  HTML_code: "228B22"
+- name: "BurntOrange"
+  HTML_code: "CC5500"
+  family: "Orange"
+
+- name: "DarkOrange"
+  HTML_code: "8B4000"
+  family: "Orange"
+
+# Yellow Family
+- name: "Yellow"
+  HTML_code: "FFFF00"
+  family: "Yellow"
+
+- name: "Gold"
+  HTML_code: "FFD700"
+  family: "Yellow"
+
+# Green Family
+- name: "PastelGreen"
+  HTML_code: "C1E1C1"
   family: "Green"
 
-- name: "Olive"
-  HTML_code: "808000"
+- name: "EmeraldGreen"
+  HTML_code: "50C878"
   family: "Green"
 
-- name: "Teal"
-  HTML_code: "008080"
+- name: "JungleGreen"
+  HTML_code: "2AAA8A"
   family: "Green"
 
-- name: "SeaGreen"
-  HTML_code: "2E8B57"
+- name: "MossGreen"
+  HTML_code: "8A9A5B"
   family: "Green"
 
-- name: "MediumSeaGreen"
-  HTML_code: "3CB371"
+- name: "ForestGreen"
+  HTML_code: "228B22"
   family: "Green"
 
-- name: "DarkGreen"
-  HTML_code: "006400"
+- name: "HunterGreen"
+  HTML_code: "355E3B"
   family: "Green"
 
 # Blue Family
-- name: "Blue"
-  HTML_code: "0000FF"
-  family: "Blue"
-
-- name: "Cyan"
-  HTML_code: "00FFFF"
+- name: "Azure"
+  HTML_code: "F0FFFF"
   family: "Blue"
 
-- name: "SkyBlue"
-  HTML_code: "87CEEB"
+- name: "BabyBlue"
+  HTML_code: "89CFF0"
   family: "Blue"
 
-- name: "DodgerBlue"
-  HTML_code: "1E90FF"
+- name: "BlueGray"
+  HTML_code: "7393B3"
   family: "Blue"
 
-- name: "Navy"
-  HTML_code: "000080"
+- name: "SapphireBlue"
+  HTML_code: "0F52BA"
   family: "Blue"
 
-- name: "SlateBlue"
-  HTML_code: "6A5ACD"
+- name: "MidnightBlue"
+  HTML_code: "191970"
   family: "Blue"
 
-- name: "SteelBlue"
-  HTML_code: "4682B4"
-  family: "Blue"
+# Purple Family
 
-- name: "RoyalBlue"
-  HTML_code: "4169E1"
-  family: "Blue"
+- name: "DarkLavender"
+  HTML_code: "D9D9FC"
+  family: "Purple"
 
-- name: "Indigo"
-  HTML_code: "4B0082"
-  family: "Blue"
+- name: "VioletBlue"
+  HTML_code: "8B8EE7"
+  family: "Purple"
 
-# Purple Family
-- name: "Magenta"
-  HTML_code: "FF00FF"
+- name: "Iris"
+  HTML_code: "5D3FD3"
   family: "Purple"
 
 - name: "Purple"
   HTML_code: "800080"
   family: "Purple"
 
-- name: "Lavender"
-  HTML_code: "E6E6FA"
+- name: "Plum"
+  HTML_code: "673147"
   family: "Purple"
 
-- name: "Thistle"
-  HTML_code: "D8BFD8"
-  family: "Purple"
+# Pink Family
+- name: "LightPink"
+  HTML_code: "FFB6C1"
+  family: "Pink"
 
-- name: "Plum"
-  HTML_code: "DDA0DD"
-  family: "Purple"
+- name: "CoralPink"
+  HTML_code: "F88379"
+  family: "Pink"
 
 - name: "Violet"
   HTML_code: "EE82EE"
-  family: "Purple"
-
-# Yellow Family
-- name: "Yellow"
-  HTML_code: "FFFF00"
-  family: "Yellow"
-
-- name: "Gold"
-  HTML_code: "FFD700"
-  family: "Yellow"
-
-- name: "Khaki"
-  HTML_code: "F0E68C"
-  family: "Yellow"
-
-- name: "LightGoldenRodYellow"
-  HTML_code: "FAFAD2"
-  family: "Yellow"
-
-# Orange Family
-- name: "Orange"
-  HTML_code: "FFA500"
-  family: "Orange"
-
-- name: "DarkOrange"
-  HTML_code: "FF8C00"
-  family: "Orange"
-
-- name: "Coral"
-  HTML_code: "FF7F50"
-  family: "Orange"
-
-- name: "PeachPuff"
-  HTML_code: "FFDAB9"
-  family: "Orange"
-
-# Brown Family
-- name: "Brown"
-  HTML_code: "A52A2A"
-  family: "Brown"
-
-- name: "SaddleBrown"
-  HTML_code: "8B4513"
-  family: "Brown"
-
-- name: "SandyBrown"
-  HTML_code: "F4A460"
-  family: "Brown"
-
-- name: "Chocolate"
-  HTML_code: "D2691E"
-  family: "Brown"
-
-- name: "Peru"
-  HTML_code: "CD853F"
-  family: "Brown"
-
-# Neutral Family
-- name: "Black"
-  HTML_code: "000000"
-  family: "Neutral"
+  family: "Pink"
 
+# White Family
 - name: "White"
   HTML_code: "FFFFFF"
-  family: "Neutral"
+  family: "White"
 
-- name: "Gray"
-  HTML_code: "808080"
-  family: "Neutral"
+- name: "Cornsilk"
+  HTML_code: "FFF8DC"
+  family: "White"
 
+# Black Family
 - name: "Silver"
   HTML_code: "C0C0C0"
-  family: "Neutral"
+  family: "Black"
 
-- name: "Beige"
-  HTML_code: "FFFAF0"
-  family: "Neutral"
+- name: "Gray"
+  HTML_code: "808080"
+  family: "Black"
+
+- name: "Charcoal"
+  HTML_code: "36454F"
+  family: "Black"
 
-- name: "LavenderBlush"
-  HTML_code: "FFF0F5"
-  family: "Neutral"
+- name: "Black"
+  HTML_code: "000000"
+  family: "Black"

petitbonhomme/_data/day_logs.yml

@@ -3964,3 +3964,39 @@
        - "Wool Gray Turtleneck Sweater & Other Stories"
        - "Brick Red Coat"
   non-outfit-items:
+- date: "2024-11-03"
+  outfits:
+    - items:
+       - "Green Denim Dungarees"
+       - "Jacket Luka Bonsini"
+       - "Sweater Volcom Blue and Gray"
+       - "Gray Long Sleeve T-Shirt"
+       - "Orange Knitted Scarf"
+       - "Timberland Boots"
+  non-outfit-items:
+- date: "2024-11-02"
+  outfits:
+    - items:
+       - "Timberland Boots"
+       - "Hiking Pants Decathlon"
+       - "Puff Jacket Rab"
+       - "Grey Scarf"
+       - "Dark Blue Sweater V-Neck Celio"
+       - "Volcom Dark Gray Sweater"
+    - items:
+       - "Volcom Dark Gray Sweater"
+       - "Dark Blue Sweater V-Neck Celio"
+       - "Sneakers Karhu"
+       - "Levi's Balloon Leg Light"
+       - "Brick Red Coat"
+  non-outfit-items:
+- date: "2024-11-04"
+  outfits:
+    - items:
+       - "Timberland Boots"
+       - "Black Light Falke Tight"
+       - "Brick Red Coat"
+       - "Cropped Jumper Sezane Orange and Pink/Bordeaux"
+       - "Skirt IKKS Double Matter"
+       - "Dark Blue Sweater V-Neck Celio"
+  non-outfit-items:

petitbonhomme/_includes/brand_selector.html

@@ -2,7 +2,7 @@
 <div class="brand-widget">
     <div class="brand-widget-header">
         <div class="brand-search-wrap">
-            <input class="brand-search" type="text" placeholder="Search for a brand...">
+            <input class="brand-search" type="text" placeholder="Brand name...">
         </div>
         <button type="button" class="all-brands-toggle-button">Reset</button>
     </div>

petitbonhomme/_includes/color_selector.html

@@ -11,11 +11,12 @@
     const familyCheckboxes = document.querySelectorAll(".color-family-checkbox");
 
     function toggleFamilySelection(familyCheckbox) {
+      familyCheckbox.classList.toggle("selected");
       const familyName = familyCheckbox.dataset.family;
       const colorSelectors = document.querySelectorAll(`.color-family-colors-wrap .color-selector[data-family="${familyName}"]`);
 
       colorSelectors.forEach(selector => {
-        if (familyCheckbox.checked) {
+        if (familyCheckbox.classList.contains("selected")) {
           selector.classList.add("selected");
         } else {
           selector.classList.remove("selected");
@@ -24,20 +25,27 @@
     }
 
     familyCheckboxes.forEach(familyCheckbox => {
-      familyCheckbox.addEventListener("change", function () {
+      familyCheckbox.addEventListener("click", function () {
         toggleFamilySelection(familyCheckbox);
       });
     });
 
     function toggleColorSelector(colorSelector) {
-        const familyName = colorSelector.dataset.family;
-        const familyCheckbox = document.querySelector(`.color-family-checkbox[data-family="${familyName}"]`);
+      const familyName = colorSelector.dataset.family;
+      const familyWrap = document.querySelector(`.color-family-selector-wrap[data-family="${familyName}"]`)
+      const familyCheckbox = familyWrap.querySelector('.color-family-checkbox');
 
-        colorSelector.classList.toggle("selected");
+      colorSelector.classList.toggle("selected");
 
-        if (colorSelector.classList.contains("selected") && !familyCheckbox.checked) {
-          familyCheckbox.checked = true;
-        }
+      if (colorSelector.classList.contains("selected") && !familyCheckbox.classList.contains("selected")) {
+        colorSelector.classList.add("selected");
+      }
+
+      const allColorSelectors = familyWrap.querySelectorAll('.color-selector');
+      const noneSelected = Array.from(allColorSelectors).every(selector => !selector.classList.contains('selected'));
+      if (noneSelected) {
+        colorSelector.classList.remove("selected");
+      }
     }
 
     const colorSelectors = document.querySelectorAll(".color-selector");