From eaa59421f19b78e46cf7007a9ecfaffd9ecf0bdd Mon Sep 17 00:00:00 2001 From: Simon-Rey Date: Sun, 3 Nov 2024 16:14:27 +0100 Subject: [PATCH] Wardrobe page --- petitbonhomme/_data/clothing_items.yml | 490 +++++++++--------- petitbonhomme/_data/clothing_items_colors.yml | 239 ++++----- petitbonhomme/_data/day_logs.yml | 36 ++ petitbonhomme/_includes/brand_selector.html | 2 +- petitbonhomme/_includes/color_selector.html | 24 +- .../_includes/color_selector_family.html | 8 +- .../_includes/color_selector_individual.html | 3 +- .../_includes/item_display_wardrobe.html | 3 +- .../_includes/wardrobe_by_category.html | 4 +- petitbonhomme/assets/css/style.css | 127 +++-- petitbonhomme/wardrobe/index.md | 102 ++-- scripts/update_colors.py | 139 +++++ scripts/update_image.py | 2 +- 13 files changed, 709 insertions(+), 470 deletions(-) create mode 100644 scripts/update_colors.py diff --git a/petitbonhomme/_data/clothing_items.yml b/petitbonhomme/_data/clothing_items.yml index 114db79..1b737b6 100644 --- a/petitbonhomme/_data/clothing_items.yml +++ b/petitbonhomme/_data/clothing_items.yml @@ -1,8 +1,7 @@ - name: Antoine et Lili Granito Large id: 191 brand: Antoine et Lili - colors: - - Black + colors: [] materials: - Cotton size: Woman - 40 @@ -19,9 +18,7 @@ - name: Cropped Jumper Sezane Orange and Pink/Bordeaux id: 190 brand: Sezane - colors: - - Pink - - Orange + colors: [] materials: - Cotton size: Woman - M @@ -39,7 +36,7 @@ brand: Birkenstock colors: - Black - - Brown + - Fawn materials: - Leather size: EUR 41 @@ -57,7 +54,7 @@ - name: Orange Corduroy Shirt brand: No Brand colors: - - Orange + - BrickRed materials: - Corduroy size: Woman - S @@ -75,8 +72,7 @@ - name: Sweater V-Neck Jules brand: Jules colors: - - Blue - - Navy + - BlueGray materials: - Cotton size: Man - M @@ -94,11 +90,11 @@ - name: Blue Basic T-Shirt brand: No Brand colors: - - Blue + - MidnightBlue materials: - Cotton size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 15 buying_place: Episode - Amsterdam @@ -130,12 +126,12 @@ - name: '& Other Stories Sheer Red Top' brand: '& Other Stories' colors: - - Red - Black + - Burgundy materials: - Polyester & Plastics size: Woman - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 10 buying_place: Vinted @@ -149,7 +145,7 @@ - name: Volcom Zipped Gray Vest brand: Volcom colors: - - Gray + - Silver materials: - Cotton size: Man - M @@ -167,7 +163,7 @@ - name: Levi's Denim Shirt brand: Levi's colors: - - Gray + - Charcoal materials: - Cotton size: Man - M @@ -185,7 +181,7 @@ - name: Timberland Boots brand: Timberland colors: - - Brown + - Fawn materials: - Leather size: EUR 41 @@ -203,11 +199,11 @@ - name: Pink Basic T-Shirt brand: No Brand colors: - - Pink + - LightPink materials: - Cotton size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 10 buying_place: Oxfam London @@ -221,9 +217,7 @@ - name: Sessun Wide Skirt brand: Sessun colors: - - Green - - Blue - - Teal + - HunterGreen materials: - Cotton size: Woman - M @@ -259,11 +253,12 @@ - name: Costa Rica T-Shirt brand: No Brand colors: - - Gray + - White + - Silver materials: - Cotton size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 0 buying_place: Webshop @@ -277,11 +272,11 @@ - name: Decathlon Gray Sport T-Shirt brand: Decathlon colors: - - Gray + - Silver materials: - Polyester & Plastics size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 2 buying_price: 15 buying_place: Paris @@ -313,11 +308,11 @@ - name: T-Shirt Celio Red Bordeaux brand: Celio colors: - - Red + - Burgundy materials: - Cotton size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 20 buying_place: Toulouse @@ -331,7 +326,7 @@ - name: Knitted Hat Mélina brand: No Brand colors: - - Yellow + - Gold - Gray materials: - Wool @@ -350,9 +345,9 @@ - name: Golden Vintage Vest brand: No Brand colors: - - Yellow - - Olive - - Brown + - Coffee + - MossGreen + - Gold materials: - Polyester & Plastics size: Woman - M @@ -370,11 +365,11 @@ - name: Crop Top Pink Zara brand: Zara colors: - - Pink + - CoralPink materials: - Polyester & Plastics size: Woman - L - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 5 buying_place: Istanbul @@ -407,10 +402,9 @@ - name: Pull Motif Pull & Bear brand: Pull and Bear colors: - - Blue + - MidnightBlue + - Plum - White - - Maroon - - Navy materials: - Polyester & Plastics size: Man - M @@ -428,8 +422,7 @@ - name: Levi's Balloon Leg Light brand: Levi's colors: - - Blue - - Cyan + - Azure materials: - Cotton size: Pants US 27 @@ -483,8 +476,7 @@ - name: Suit Shoes Black San Marina id: 192 brand: San Marina - colors: - - Black + colors: [] materials: - Leather size: Shoe EUR 41 @@ -520,7 +512,7 @@ - name: Shorts Jules Beige brand: Jules colors: - - Beige + - Cornsilk materials: - Cotton size: Pants EUR 40 @@ -538,13 +530,15 @@ - name: Zara Crop Top Knitted brand: Zara colors: - - Red - - White - - Orange + - Black + - LightPink + - BrightOrange + - Yellow + - BrightRed materials: - Polyester & Plastics size: Woman - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 0 buying_place: Amsterdam @@ -558,7 +552,7 @@ - name: Vagabond Heel Brown Boots brand: Vagabond colors: - - Brown + - Fawn materials: - Polyester & Plastics size: Shoe EUR 41 @@ -576,8 +570,9 @@ - name: Sweater Volcom Blue and Gray brand: Volcom colors: - - Blue - - Gray + - BlueGray + - MidnightBlue + - Silver materials: - Cotton size: Man - S @@ -613,9 +608,9 @@ - name: Pattern Shirt Abel brand: No Brand colors: - - Green - White - - Olive + - ForestGreen + - BlueGray materials: - Polyester & Plastics size: Man - M @@ -633,8 +628,7 @@ - name: Dark Blue Denim Shorts brand: No Brand colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Woman - 40 @@ -652,8 +646,8 @@ - name: Sweater Celio Gray with White Collar brand: Celio colors: + - Silver - White - - Gray materials: - Cotton size: Man - S @@ -671,8 +665,8 @@ - name: Bash Cropped Bomber Pacino brand: B&sh colors: - - White - - Pink + - Cornsilk + - CoralPink materials: - Cotton - Polyester & Plastics @@ -691,8 +685,7 @@ - name: Blue Shirt Corderoy America Today brand: America Today colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Man - XS @@ -710,11 +703,11 @@ - name: Blue T-Shirt Cos brand: Cos colors: - - Blue + - BabyBlue materials: - Cotton size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 10 buying_place: Oxfam London @@ -746,11 +739,11 @@ - name: Orange Zara Crop Top brand: Zara colors: - - Orange + - BrightOrange materials: - Polyester & Plastics size: Woman - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 10 buying_place: Vinted @@ -764,8 +757,8 @@ - name: Maje Dress White and Black brand: Maje colors: - - Black - White + - Black materials: - Cotton - Polyester & Plastics @@ -784,11 +777,12 @@ - name: T-Shirt Roger Waters brand: No Brand colors: - - Gray + - Silver + - CoralPink materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 35 buying_place: Webshop @@ -802,7 +796,9 @@ - name: Sneakers Karhu brand: Karhu colors: - - Red + - BrickRed + - PastelGreen + - White materials: - Cotton - Polyester & Plastics @@ -821,8 +817,7 @@ - name: Blue Polo Volcom brand: Volcom colors: - - Blue - - Navy + - BlueGray materials: - Cotton size: Man - S @@ -840,7 +835,7 @@ - name: Dark Blue Long Sleeve Selected brand: Selected colors: - - Navy + - MidnightBlue materials: - Cotton size: Man - S @@ -876,11 +871,11 @@ - name: Blue Celio T-Shirt V-Neck brand: Celio colors: - - Blue + - BabyBlue materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 20 buying_place: Celio Toulouse @@ -912,7 +907,7 @@ - name: Ribbed Red Crop Top Uniqlo brand: Uniqlo colors: - - Red + - BrightRed materials: - Cotton size: Woman - L @@ -948,11 +943,11 @@ - name: T-Shirt New-York Celio brand: Celio colors: - - Orange + - BrightOrange materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 25 buying_place: Celio Toulouse @@ -966,11 +961,11 @@ - name: Red Sport T-Shirt Decathlon brand: Decathlon colors: - - Red + - Burgundy materials: - Polyester & Plastics size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 25 buying_place: Decathlon Paris @@ -1002,7 +997,7 @@ - name: Light Blue Strap Dress Pull & Bear brand: Pull and Bear colors: - - Blue + - BabyBlue materials: - Cotton size: Woman - M @@ -1020,9 +1015,10 @@ - name: Nike Trail Sneakers brand: Nike colors: - - Purple - - Orange - - Pink + - White + - DarkLavender + - Violet + - BrightOrange materials: - Polyester & Plastics size: Shoe EUR 41 @@ -1040,8 +1036,8 @@ - name: Knitted Scarf Mélina brand: No Brand colors: - - Yellow - - White + - Gray + - Gold materials: - Wool size: Unique Size @@ -1059,10 +1055,11 @@ - name: Sweater Gradient ERL brand: ERL colors: - - Blue - - Yellow - - Orange - - Pink + - Gold + - Violet + - SapphireBlue + - NeonOrange + - BrightRed materials: - Polyester & Plastics - Wool @@ -1099,7 +1096,7 @@ - name: Green Denim Dungarees brand: No Brand colors: - - Green + - HunterGreen materials: - Cotton size: Unique Size @@ -1136,7 +1133,7 @@ - name: Dark Red Pants brand: No Brand colors: - - Red + - BrickRed materials: - Cotton - Polyester & Plastics @@ -1155,12 +1152,12 @@ - name: T-Shirt Hollister Green & Blue Patterns brand: Hollister colors: - - Green - - Blue + - JungleGreen + - BlueGray materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 0 buying_place: Lyon @@ -1174,8 +1171,7 @@ - name: Blue/Gray Celio Shirt brand: Celio colors: - - Blue - - Gray + - BlueGray materials: - Cotton size: Man - M @@ -1193,7 +1189,7 @@ - name: Light Blue Celio Shirt brand: Celio colors: - - Blue + - Azure materials: - Cotton size: Man - M @@ -1211,7 +1207,8 @@ - name: Pink Sweater with Print brand: No Brand colors: - - Pink + - LightPink + - Violet materials: - Cotton size: Woman - M @@ -1265,7 +1262,7 @@ - name: Dark Blue Denim Dungarees brand: No Brand colors: - - Blue + - MidnightBlue materials: - Cotton size: Unique Size @@ -1283,7 +1280,7 @@ - name: Jacket Luka Bonsini brand: Luka Bonsini colors: - - Purple + - VioletBlue materials: - Cotton size: Man - S @@ -1324,7 +1321,7 @@ - Cotton - Polyester & Plastics size: Woman - 38 - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 0 buying_place: Maje Amsterdam @@ -1339,6 +1336,9 @@ brand: Olow colors: - White + - JungleGreen + - Gold + - SapphireBlue materials: - Cotton size: Man - S @@ -1360,7 +1360,7 @@ materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 30 buying_place: Zara Paris @@ -1374,7 +1374,7 @@ - name: Brick Red Coat brand: No Brand colors: - - Red + - BrickRed materials: - Cotton size: Man - S @@ -1392,7 +1392,7 @@ - name: Red Small Hat brand: No Brand colors: - - Red + - BrightRed materials: - Wool size: Unique Size @@ -1428,13 +1428,13 @@ - name: Red and Black Stripes Crop Top brand: No Brand colors: - - Red - Black + - BrightRed - White materials: - Polyester & Plastics size: Woman - L - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 20 buying_place: London @@ -1448,7 +1448,7 @@ - name: Hiking Pants Decathlon brand: Decathlon colors: - - Gray + - Charcoal materials: - Polyester & Plastics size: Man - M @@ -1466,8 +1466,8 @@ - name: Skort Maje Green Flower Pattern brand: Maje colors: - - Green - - Blue + - ForestGreen + - SapphireBlue materials: - Polyester & Plastics size: Woman - 38 @@ -1485,7 +1485,7 @@ - name: Orange Crop Top Lucy & Yak brand: Lucy and Yak colors: - - Orange + - BrightOrange materials: - Cotton - Polyester & Plastics @@ -1504,7 +1504,7 @@ - name: Purple Hat brand: No Brand colors: - - Purple + - Iris materials: - Wool size: Unique Size @@ -1522,8 +1522,8 @@ - name: Kenzo Cropped Tiger Sweater brand: Kenzo colors: - - Blue - - Navy + - MidnightBlue + - Azure materials: - Cotton size: Woman - XS @@ -1541,7 +1541,7 @@ - name: Orange Lucy & Yak Jumpsuit brand: Lucy and Yak colors: - - Orange + - BurntOrange materials: - Cotton size: Woman - UK 12 @@ -1560,6 +1560,7 @@ brand: Dr. Martens colors: - Black + - Yellow materials: - Leather size: Shoe EUR 41 @@ -1577,7 +1578,7 @@ - name: Red Oversized Lucy & Yak Shirt brand: Lucy and Yak colors: - - Red + - BrightRed materials: - Cotton size: Woman - S @@ -1613,8 +1614,7 @@ - name: Dark Blue Ribbed Monoprix Shirt brand: Monoprix colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Man - S @@ -1636,7 +1636,7 @@ materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 20 buying_place: Cachan @@ -1650,10 +1650,10 @@ - name: Vintage Hiking Boot Adidas brand: Adidas colors: - - Yellow - - Magenta - Purple - - Pink + - Gold + - Black + - Violet materials: - Polyester & Plastics size: Shoe EUR 41.5 @@ -1671,12 +1671,13 @@ - name: Zara White and Blue T-Shirt brand: Zara colors: - - Blue + - MidnightBlue + - BlueGray - White materials: - Cotton size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 25 buying_place: Zara Paris @@ -1690,7 +1691,7 @@ - name: Tommy Hilfiger Gren Polo brand: Tommy Hilfiger colors: - - Green + - JungleGreen materials: - Cotton size: Man - M @@ -1726,7 +1727,7 @@ - name: Light Blue Levi's Mini Shorts brand: Levi's colors: - - Blue + - Azure materials: - Cotton size: Pants US 30 @@ -1762,7 +1763,7 @@ - name: Red Volcom Hoodie brand: Volcom colors: - - Red + - BrickRed materials: - Cotton - Polyester & Plastics @@ -1799,7 +1800,7 @@ - name: Levi's Denim Blue Mini Shorts brand: Levi's colors: - - Blue + - BabyBlue materials: - Cotton size: Woman - M @@ -1817,9 +1818,8 @@ - name: Brick Red Bow Tie brand: No Brand colors: - - Red - - Orange - - Brown + - BurntOrange + - BrickRed materials: - Cotton size: Unique Size @@ -1837,8 +1837,7 @@ - name: Dark Blue Dickies Pants brand: Dickies colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Pants US 30 @@ -1856,8 +1855,7 @@ - name: Long Sleeve Dark Blue Jules T-Shirt brand: Jules colors: - - Blue - - Navy + - BlueGray materials: - Cotton size: Man - M @@ -1875,7 +1873,8 @@ - name: White and Blue Light Sweater brand: No Brand colors: - - Blue + - Azure + - White materials: - Cotton size: Man - XS @@ -1893,7 +1892,7 @@ - name: Jumpsuit Blue brand: No Brand colors: - - Blue + - SapphireBlue materials: - Cotton size: Unique Size @@ -1911,8 +1910,7 @@ - name: Maje Fluid Dress brand: Maje colors: - - Blue - - Black + - Azure - White materials: - Polyester & Plastics @@ -1949,7 +1947,7 @@ - name: Long Sleeve T-Shirt Gray Only & Sons brand: Only and Sons colors: - - Gray + - Silver materials: - Cotton size: Man - M @@ -2021,7 +2019,9 @@ - name: Blue Chinese Vest Episode brand: No Brand colors: - - Blue + - MidnightBlue + - DarkLavender + - EmeraldGreen materials: - Cotton size: Man - S @@ -2039,8 +2039,8 @@ - name: Dark Blue The Kooples Skirt brand: The Kooples colors: - - Blue - - Navy + - MidnightBlue + - Black materials: - Polyester & Plastics - Wool @@ -2060,6 +2060,7 @@ brand: '& Other Stories' colors: - Gray + - CoralPink materials: - Polyester & Plastics size: Woman - 38 @@ -2077,7 +2078,7 @@ - name: Blue Cashmere Zipped Hoodie brand: No Brand colors: - - Blue + - BlueGray materials: - Wool size: Man - M @@ -2095,11 +2096,12 @@ - name: Green Zara Crop Top brand: Zara colors: - - Teal + - ForestGreen + - White materials: - Cotton size: Woman - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 9 buying_place: Vinted @@ -2113,7 +2115,7 @@ - name: Denim Blue Dungarees brand: No Brand colors: - - Blue + - BlueGray materials: - Cotton size: Unique Size @@ -2131,7 +2133,7 @@ - name: Beige Cachemire Turtle Neck brand: No Brand colors: - - Beige + - LightBrown materials: - Wool size: Woman - M @@ -2167,11 +2169,11 @@ - name: T-Shirt Sew to Perfection Jack & Jones brand: Jack & Jones colors: - - Orange + - BrightOrange materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 0 buying_place: Toulouse @@ -2185,7 +2187,7 @@ - name: Gray Denim Shirt Pull & Bear brand: Pull and Bear colors: - - Gray + - Silver materials: - Cotton size: Man - M @@ -2221,7 +2223,7 @@ - name: Dark Blue DC Shoes Pants brand: DC Shoes colors: - - Blue + - BlueGray materials: - Cotton - Polyester & Plastics @@ -2258,7 +2260,7 @@ - name: Purple Tank Top & Other Stories brand: '& Other Stories' colors: - - Purple + - DarkLavender materials: - Cotton size: Woman - XS @@ -2276,8 +2278,7 @@ - name: Strap Dress Green Corduroy Lucy & Yak brand: Lucy and Yak colors: - - Green - - Olive + - MossGreen materials: - Cotton size: Woman - M @@ -2295,7 +2296,7 @@ - name: Wool Gray Turtleneck Sweater & Other Stories brand: '& Other Stories' colors: - - Gray + - Silver materials: - Polyester & Plastics - Wool @@ -2314,7 +2315,7 @@ - name: Red Shirt with Pattern brand: No Brand colors: - - Red + - CoralPink materials: - Cotton - Linen @@ -2334,6 +2335,9 @@ brand: No Brand colors: - Black + - Yellow + - Violet + - Azure materials: - Cotton size: Woman - M @@ -2352,7 +2356,6 @@ brand: Under Armour colors: - Black - - Gray materials: - Polyester & Plastics size: Man - M @@ -2388,8 +2391,7 @@ - name: Long Sleeve Celio Club Dark Blue Shirt brand: Celio colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Man - S @@ -2407,8 +2409,8 @@ - name: Puff Jacket Rab brand: Rab colors: - - Blue - - Navy + - MidnightBlue + - Gold materials: - Polyester & Plastics size: Man - S @@ -2427,6 +2429,7 @@ brand: H&M colors: - Gray + - White materials: - Polyester & Plastics size: Woman - 38 @@ -2444,7 +2447,7 @@ - name: Green Woolen Sweater brand: No Brand colors: - - Green + - HunterGreen materials: - Wool size: Woman - M @@ -2462,8 +2465,8 @@ - name: Skirt IKKS Double Matter brand: IKKS colors: + - Charcoal - Black - - Gray materials: - Cotton size: Woman - 38 @@ -2481,8 +2484,7 @@ - name: Dark Blue Sweater V-Neck Celio brand: Celio colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Man - S @@ -2500,8 +2502,7 @@ - name: Dark Blue Heel Boot Anna Field brand: Anna Field colors: - - Blue - - Navy + - BlueGray materials: - Polyester & Plastics size: Shoe EUR 42 @@ -2519,7 +2520,8 @@ - name: Rain Jacket Ayacucho brand: Ayacucho colors: - - Blue + - BabyBlue + - SapphireBlue materials: - Polyester & Plastics size: Man - M @@ -2538,6 +2540,7 @@ brand: Esprit colors: - Gray + - White materials: - Cotton size: Man - S @@ -2555,11 +2558,11 @@ - name: Crop Top Pink Lucy & yak brand: Lucy and Yak colors: - - Pink + - CoralPink materials: - Cotton size: Woman - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 14 buying_place: Vinted @@ -2573,11 +2576,13 @@ - name: Blue Volcom T-Shirt Pattern brand: Volcom colors: - - Blue + - SapphireBlue + - JungleGreen + - BrightOrange materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 35 buying_place: Ventes Privées @@ -2591,9 +2596,9 @@ - name: Red Long Sleeve T-Shirt Esprit brand: Esprit colors: - - Red - White - - Pink + - CoralPink + - BrightRed materials: - Cotton size: Man - S @@ -2611,7 +2616,7 @@ - name: Green Chino Pants Jules brand: Jules colors: - - Green + - JungleGreen materials: - Cotton size: Pants EUR 40 @@ -2629,7 +2634,7 @@ - name: Levi's Gray Jacket brand: Levi's colors: - - Gray + - Charcoal materials: - Cotton size: Man - S @@ -2647,7 +2652,7 @@ - name: Gray Shorts Celio brand: Celio colors: - - Gray + - Silver materials: - Cotton size: Pants EUR 40 @@ -2666,6 +2671,7 @@ brand: Dr. Martens colors: - Black + - Yellow materials: - Polyester & Plastics size: Shoe EUR 41 @@ -2683,8 +2689,7 @@ - name: Dark Blue Cos Sweater brand: Cos colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Man - S @@ -2702,7 +2707,7 @@ - name: Gray Decathlon Hiking Shorts brand: Decathlon colors: - - Gray + - Charcoal materials: - Polyester & Plastics size: Pants EUR 40 @@ -2720,11 +2725,11 @@ - name: Brown Volcom T-Shirt brand: Volcom colors: - - Brown + - LightBrown materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 20 buying_place: Ventes Privées @@ -2738,13 +2743,12 @@ - name: Dark Blue Striped Zara T-Shirt brand: Zara colors: - - Blue + - MidnightBlue - White - - Navy materials: - Cotton size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 30 buying_place: Zara Paris @@ -2758,8 +2762,7 @@ - name: Dark Blue Decathlon Sport Pants brand: Decathlon colors: - - Blue - - Navy + - Black materials: - Polyester & Plastics size: Man - M @@ -2777,7 +2780,7 @@ - name: Petrol Blue Cropped Sezane Hoodie brand: Sezane colors: - - Blue + - SapphireBlue materials: - Cotton size: Woman - M @@ -2795,9 +2798,10 @@ - name: Orange and Gray Sweater Dedicated brand: Dedicated colors: - - Gray - - Purple - - Orange + - Gold + - Charcoal + - Silver + - Iris materials: - Cotton size: Man - L @@ -2819,7 +2823,7 @@ materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 0 buying_place: Valenciennes @@ -2833,7 +2837,8 @@ - name: Rain Jacket Schöffel brand: Schöffel colors: - - Blue + - SapphireBlue + - BabyBlue materials: - Polyester & Plastics size: Man - M @@ -2851,8 +2856,8 @@ - name: Dark Blue Galerie Lafayette Shoes brand: No Brand colors: - - Blue - - Navy + - BlueGray + - Fawn materials: - Leather size: Shoe EUR 41 @@ -2870,7 +2875,7 @@ - name: Cashmere Blue Scarf brand: No Brand colors: - - Blue + - BlueGray materials: - Cashmere size: Unique Size @@ -2888,8 +2893,8 @@ - name: Dark Blue Striped Polo Volcom brand: Volcom colors: - - Blue - - Navy + - MidnightBlue + - White materials: - Cotton size: Man - S @@ -2907,7 +2912,7 @@ - name: Red Polo Volcom brand: Volcom colors: - - Red + - BrickRed materials: - Cotton size: Man - S @@ -2944,6 +2949,7 @@ brand: Decathlon colors: - Black + - Silver materials: - Polyester & Plastics size: Man - S @@ -2961,7 +2967,7 @@ - name: Dark Gray Decathlon Sport T-Shirt brand: Decathlon colors: - - Gray + - Charcoal materials: - Polyester & Plastics size: Man - S @@ -2980,7 +2986,7 @@ brand: No Brand colors: - Purple - - Orange + - NeonOrange materials: - Polyester & Plastics size: Woman - S @@ -2998,11 +3004,12 @@ - name: YMCA Purple Wei T-Shirt brand: No Brand colors: - - Purple + - Iris + - White materials: - Cotton size: Man - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 0 buying_place: Cachan @@ -3016,7 +3023,7 @@ - name: Gray Denim Volcom Shorts brand: Volcom colors: - - Gray + - Charcoal materials: - Cotton size: Pants US 30 @@ -3034,7 +3041,7 @@ - name: Orange Corduroy Maje Shorts brand: Maje colors: - - Orange + - DarkOrange materials: - Cotton size: Woman - 40 @@ -3052,7 +3059,7 @@ - name: Brick Red Dockers Pants brand: Dockers colors: - - Red + - BrickRed materials: - Cotton size: Pants US 30 @@ -3070,7 +3077,7 @@ - name: Beige Cashmere Sweater brand: No Brand colors: - - Beige + - Cornsilk materials: - Cashmere size: Woman - M @@ -3088,10 +3095,9 @@ - name: Blue Pattern Bow Tie brand: No Brand colors: - - Blue + - Azure + - LightBrown - Yellow - - White - - Brown materials: - Cotton size: Unique Size @@ -3109,8 +3115,8 @@ - name: Dark Blue Hollister Hoodie brand: Hollister colors: - - Blue - - Navy + - MidnightBlue + - Purple materials: - Cotton size: Man - M @@ -3128,11 +3134,11 @@ - name: Green Jack & Jones T-Shirt Way West Field brand: Jack & Jones colors: - - Green + - EmeraldGreen materials: - Cotton size: Man - S - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 0 buying_place: Jack & Jones Toulouse @@ -3146,7 +3152,7 @@ - name: Red High Waist Shorts brand: No Brand colors: - - Red + - BrightRed materials: - Cotton size: Woman - M @@ -3182,8 +3188,7 @@ - name: Dark Blue Jules Shorts brand: Jules colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Pants EUR 40 @@ -3201,7 +3206,7 @@ - name: Volcom Dark Gray Sweater brand: Volcom colors: - - Gray + - Charcoal materials: - Cotton size: Man - M @@ -3219,8 +3224,7 @@ - name: Green Linen Shirt brand: No Brand colors: - - Green - - Gray + - PastelGreen materials: - Linen size: Man - M @@ -3238,8 +3242,8 @@ - name: NSW Blues Hoodie brand: Canterbury colors: - - Blue - - Navy + - MidnightBlue + - SapphireBlue materials: - Cotton - Polyester & Plastics @@ -3258,7 +3262,7 @@ - name: Grey Scarf brand: No Brand colors: - - Gray + - Silver materials: - Polyester & Plastics size: Unique Size @@ -3276,7 +3280,7 @@ - name: Brown Carhartt Dungarees brand: Carhartt colors: - - Brown + - Coffee materials: - Cotton size: Woman - M @@ -3294,8 +3298,7 @@ - name: Dark Blue Corduroy Jacket brand: No Brand colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton - Polyester & Plastics @@ -3318,7 +3321,7 @@ materials: - Cotton size: Woman - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 15 buying_place: Istanbul @@ -3332,8 +3335,7 @@ - name: Dark Blue Corduroy High Waist Pants brand: No Brand colors: - - Blue - - Navy + - MidnightBlue materials: - Cotton size: Woman - M @@ -3351,8 +3353,8 @@ - name: Elements Coat brand: Elements colors: - - Blue - - Navy + - SapphireBlue + - MidnightBlue materials: - Polyester & Plastics size: Man - M @@ -3370,7 +3372,8 @@ - name: Orange Knitted Scarf brand: No Brand colors: - - Orange + - BrightOrange + - Gold materials: - Wool size: Unique Size @@ -3389,7 +3392,7 @@ id: 181 brand: Roxy colors: - - Purple + - Iris materials: - Cotton size: Woman - M @@ -3407,9 +3410,10 @@ id: 182 brand: No Brand colors: - - Red - - Orange - White + - BrickRed + - Yellow + - BrightOrange materials: - Cotton size: Unique Size @@ -3427,7 +3431,9 @@ id: 183 brand: Maje colors: - - Blue + - SapphireBlue + - Azure + - MidnightBlue materials: - Cotton - Polyester & Plastics @@ -3446,7 +3452,7 @@ id: 184 brand: No Brand colors: - - Orange + - BrightOrange materials: - Wool size: Unique Size @@ -3464,7 +3470,7 @@ id: 185 brand: H&M colors: - - Blue + - Azure materials: - Cotton size: Man - XS @@ -3482,13 +3488,12 @@ id: 186 brand: 24Colours colors: - - Green - - Teal + - EmeraldGreen materials: - Cotton - Polyester & Plastics size: Woman - XL - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 10 buying_place: Hamburg @@ -3502,11 +3507,10 @@ id: 187 brand: Thinking Mu colors: - - Pink - - Green + - Cornsilk - Yellow - - Orange - - Beige + - BrightOrange + - Purple materials: - Cotton size: Woman - S @@ -3524,7 +3528,7 @@ id: 188 brand: Another Label colors: - - Green + - PastelGreen materials: - Cotton size: Woman - M @@ -3546,7 +3550,7 @@ materials: - Cotton size: Woman - M - category: T-shirt + category: T-Shirt multiplicity: 1 buying_price: 5 buying_place: Amsterdam diff --git a/petitbonhomme/_data/clothing_items_colors.yml b/petitbonhomme/_data/clothing_items_colors.yml index 7fbc298..a130cf2 100644 --- a/petitbonhomme/_data/clothing_items_colors.yml +++ b/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" diff --git a/petitbonhomme/_data/day_logs.yml b/petitbonhomme/_data/day_logs.yml index cbc63e8..39afdfd 100644 --- a/petitbonhomme/_data/day_logs.yml +++ b/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: diff --git a/petitbonhomme/_includes/brand_selector.html b/petitbonhomme/_includes/brand_selector.html index 651b70d..e08c766 100644 --- a/petitbonhomme/_includes/brand_selector.html +++ b/petitbonhomme/_includes/brand_selector.html @@ -2,7 +2,7 @@
- +
diff --git a/petitbonhomme/_includes/color_selector.html b/petitbonhomme/_includes/color_selector.html index 67978fc..51fe80b 100644 --- a/petitbonhomme/_includes/color_selector.html +++ b/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"); diff --git a/petitbonhomme/_includes/color_selector_family.html b/petitbonhomme/_includes/color_selector_family.html index 8a2f67a..058550d 100644 --- a/petitbonhomme/_includes/color_selector_family.html +++ b/petitbonhomme/_includes/color_selector_family.html @@ -2,10 +2,14 @@ {% assign colors = site.data.clothing_items_colors | where: "family", color_family %}
-
+
- +
+
+ ✓ +
+
diff --git a/petitbonhomme/_includes/color_selector_individual.html b/petitbonhomme/_includes/color_selector_individual.html index dbfa9ac..343fca0 100644 --- a/petitbonhomme/_includes/color_selector_individual.html +++ b/petitbonhomme/_includes/color_selector_individual.html @@ -1,7 +1,6 @@ - {% assign color = include.color %} -
+
✓
diff --git a/petitbonhomme/_includes/item_display_wardrobe.html b/petitbonhomme/_includes/item_display_wardrobe.html index 7af4f77..5b7001c 100644 --- a/petitbonhomme/_includes/item_display_wardrobe.html +++ b/petitbonhomme/_includes/item_display_wardrobe.html @@ -8,7 +8,8 @@ {% assign price_per_wear = item.buying_price %} {% endif %} -
+{% capture color-families %}{% for color in item.colors %}{% assign color_item = site.data.clothing_items_colors | find: "name", color %}{{ color_item.family }} {% endfor %}{% endcapture %} +
{{ item.name }}
diff --git a/petitbonhomme/_includes/wardrobe_by_category.html b/petitbonhomme/_includes/wardrobe_by_category.html index eb16a40..2be94ee 100644 --- a/petitbonhomme/_includes/wardrobe_by_category.html +++ b/petitbonhomme/_includes/wardrobe_by_category.html @@ -12,9 +12,7 @@

{{ category.name | title_case }} 0 %}
{% for item in category_items %} - {% if item.worn_image and item.worn_image != "Worn/" %} - {% include item_display_forking.html template_name=include.item_template_name item=item %} - {% endif %} + {% include item_display_forking.html template_name=include.item_template_name item=item %} {% endfor %}
{% endif %} diff --git a/petitbonhomme/assets/css/style.css b/petitbonhomme/assets/css/style.css index b98e55f..cc1f6fc 100644 --- a/petitbonhomme/assets/css/style.css +++ b/petitbonhomme/assets/css/style.css @@ -1,21 +1,12 @@ :root { --color-frame: #b9ffa2; - --color-frame-dark: #6afc3b; + --color-frame-bright: #6afc3b; + --color-frame-dark: #86c075; --color-frame-light: #deffd3; --color-background-light: white; --color-background: #f1f1f1; --color-background-dark: #ececec; - --color-success-light: #a4e8a1; - --color-success: #8ace66; - --color-success-dark: #468a1a; - --color-warning-light: #ffc19c; - --color-warning: #ffa36c; - --color-warning-dark: #d75a0e; - --color-error-light: #f59e9e; - --color-error: #ff7474; - --color-error-dark: #b93030; - --color-navigation-button: #333; - --color-process-button: #325181; + --color-background-very-dark: #c2c2c2; } /* ======= @@ -141,7 +132,7 @@ header { .navigation-wrap .navigation-icon:hover { background-color: var(--color-background); - border: var(--color-frame-dark) 3px solid; + border: var(--color-frame-bright) 3px solid; } header .main-title { @@ -322,12 +313,12 @@ General Stuff ========== */ .checkmark { - color: var(--color-success-dark); + color: #5aa82c; font-size: 24px; } .crossmark { - color: var(--color-error-dark); + color: #af4e4e; font-size: 24px; } @@ -440,34 +431,74 @@ Add Item Page Color Selector =========== */ +.color-widget { + display: flex; + flex-wrap: wrap; + gap: 10px; + align-content: center; + justify-content: center; +} + .color-family-selector { - background-color: white; - padding: 4px; - border-radius: 5px; - display: inline-block; + padding: 4px; + border-radius: 5px; + display: inline-block; } .color-family-selector-wrap { - display: flex; - gap: 5px; + display: flex; + gap: 5px; + flex-direction: row; + justify-content: center; + align-items: center; } .color-family-checkbox-wrap { - display: flex; - align-content: center; - justify-items: center; + display: flex; + align-content: center; + justify-items: center; } .color-family-colors-wrap { + display: flex; + border: 2px solid #525252; +} + +.color-family-checkbox .color-family-checkbox-inner-wrap { + width: 2ch; + height: 2ch; + background-color: var(--color-background-light); + border: 2px solid var(--color-frame); + border-radius: 50%; display: flex; - border-radius: 5px; + align-items: center; + justify-content: center; + cursor: pointer; +} + +.color-family-checkbox.selected .color-family-checkbox-inner-wrap { + background-color: var(--color-frame); +} + +.color-family-checkbox .color-family-checkbox-checkmark { + visibility: hidden; + display: inline-block; + font-size: smaller; + font-weight: 1000; + max-width: 2ch; + max-height: 2ch; + color: black; + position: relative; + bottom: 0.1em; +} + +.color-family-checkbox.selected .color-family-checkbox-checkmark { + visibility: visible; } .color-selector { - border-top: 2px solid #fff; - border-bottom: 2px solid #fff; - border-left: 2px solid #fff; - border-right: 2px solid #fff; + border-right: 1px solid white; + border-left: 1px solid white; width: 2ch; height: 2ch; cursor: pointer; @@ -478,11 +509,11 @@ Color Selector } .color-selector:first-of-type { - border-left: 2px solid #fff; + border-left: none; } .color-selector:last-of-type { - border-right: 2px solid #fff; + border-right: none; } .color-selector-inner-wrap { @@ -512,12 +543,12 @@ Brand Selector =========== */ .brand-widget { - border: 2px solid var(--color-frame-dark); } .brand-widget-header { display: grid; grid-template-columns: 2fr 1fr; + background: var(--color-background); } .brand-search-wrap { @@ -526,16 +557,25 @@ Brand Selector .brand-search { width: 100%; - border-left: none; - border-top: 2px solid var(--color-background-dark); - border-bottom: 2px solid var(--color-background-dark); + border: none; padding-left: 10px; + box-sizing: border-box; + background-color: var(--color-background-light); +} + +.brand-search:hover { + background-color: var(--color-background); } .all-brands-toggle-button { border-radius: 0; border: none; font: inherit; + background-color: var(--color-background); + cursor: pointer; +} + +.all-brands-toggle-button:hover { background-color: var(--color-background-dark); } @@ -543,7 +583,6 @@ Brand Selector height: 15ch; overflow-y: scroll; background-color: #fafbff; - border-radius: 5px; } .brand-checkbox-wrap { @@ -657,7 +696,7 @@ Calendar Page gap: 10px; margin-top: 20px; justify-content: space-between; - padding: 0 min(30vh, 30vw) min(20vh, 20vw) min(30vh, 30vw); + padding: 0 min(20vh, 20vw) min(10vh, 10vw) min(20vh, 20vw); } .calendar-day { @@ -746,6 +785,10 @@ Calendar Page Wardrobe Page ========== */ +#wardrobe-and-filters-wrap { + background: var(--color-frame-light); +} + .wardrobe-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); @@ -759,8 +802,12 @@ Wardrobe Page gap: 10px; } -#wardrobe-wrap { +.wardrobe-filters-wrap .brand-widget { + padding: 10px; +} +#wardrobe-wrap { + background: var(--color-background-light); } #wardrobe-wrap .category-title { @@ -795,7 +842,7 @@ Wardrobe Page } #wardrobe-wrap .category-wrap { - padding-left: 20px; + border-left: 10px solid var(--color-frame-light); } #wardrobe-wrap > .category-wrap { @@ -805,10 +852,10 @@ Wardrobe Page #wardrobe-wrap .category-items-wrap { display: flex; flex-wrap: wrap; + justify-content: center; } #wardrobe-wrap .wardrobe-item { - border: 1px solid var(--color-frame-dark); border-radius: 5px; padding: 10px 20px; display: flex; diff --git a/petitbonhomme/wardrobe/index.md b/petitbonhomme/wardrobe/index.md index d14604c..2b8271b 100644 --- a/petitbonhomme/wardrobe/index.md +++ b/petitbonhomme/wardrobe/index.md @@ -4,44 +4,18 @@ layout: default

Wardrobe

- +
-{% include color_selector.html %} {% include brand_selector.html %} +{% include color_selector.html %}
{% include wardrobe_by_category.html categories=site.data.clothing_items_categories item_template_name="wardrobe" %}
+
diff --git a/scripts/update_colors.py b/scripts/update_colors.py new file mode 100644 index 0000000..54ad17c --- /dev/null +++ b/scripts/update_colors.py @@ -0,0 +1,139 @@ +import os +from collections import defaultdict + +import yaml +from tkinter import Tk, Label, Button, Canvas, Frame +from PIL import Image, ImageTk + + +# Load YAML data from a file +def load_yaml_data(file_path): + with open(file_path, 'r') as file: + data = yaml.safe_load(file) + return data + + +# Save the updated YAML file +def save_yaml_data(file_path, data): + with open(file_path, 'w') as file: + yaml.dump(data, file, sort_keys=False, encoding='utf-8', allow_unicode=True) + + +# Display image and update color options +def display_image_and_update_colors(folder_path, yaml_data, yaml_file, color_data): + root = Tk() + root.title("Clothing Item Color Selector") + color_family_map = defaultdict(list) + for color in color_data: + color_family_map[color["family"]].append((color["name"], "#" + color["HTML_code"])) + + img_label = Label(root) + img_label.grid(row=0, column=0, columnspan=5, padx=20, pady=20) + + current_item_index = [0] + + # Skip items without a valid image path + while yaml_data[current_item_index[0]]['image'] == 'Close-Up/': + current_item_index[0] += 1 + + def show_item_image(): + item = yaml_data[current_item_index[0]] + if "image" in item: + img_path = os.path.join(folder_path, item["image"].replace('/', os.path.sep)) + img = Image.open(img_path) + img.thumbnail((300, 300)) + img = ImageTk.PhotoImage(img) + img_label.config(image=img) + img_label.image = img + display_colors(item.get("colors", [])) + item_name_label.config(text=item["name"]) + else: + img_label.config(image="") + img_label.image = None + + def display_colors(selected_colors): + # Clear existing color squares and family labels + for widget in colors_frame.winfo_children(): + widget.destroy() + + # Display color options grouped by family in rows + row = 0 + for family, family_colors in color_family_map.items(): + # Create a label for the family + family_label = Label(colors_frame, text=family, font=("Helvetica", 10, "bold")) + family_label.grid(row=row, column=0, padx=5, pady=5, sticky="w") + + # Create color squares for each color in the family + col = 1 # Start placing color squares in the second column + for color_name, color_code in family_colors: + color_button = Canvas(colors_frame, width=20, height=20, bg=color_code, + highlightthickness=1) + + # Highlight selected colors in blue + if color_name in selected_colors: + color_button.config(highlightbackground="blue", highlightthickness=2) + + color_button.grid(row=row, column=col, padx=2, pady=2) + + # Toggle color selection on click, binding each color button instance + color_button.bind( + "", + lambda event, color=color_name, button=color_button: toggle_color(event, color, + button) + ) + + col += 1 # Move to the next column for the next color in the family + + row += 1 # Move to the next row for the next color family + + def toggle_color(event, color, color_button): + # Toggle the color selection for the current item + selected_colors = yaml_data[current_item_index[0]].get("colors", []) + + if color in selected_colors: + selected_colors.remove(color) + color_button.config(highlightbackground="black", highlightthickness=0) + else: + selected_colors.append(color) + color_button.config(highlightbackground="blue", highlightthickness=2) + + # Save the updated list of selected colors + yaml_data[current_item_index[0]]["colors"] = selected_colors + save_yaml_data(yaml_file, yaml_data) + + # Move to the next clothing item + def next_item(): + current_item_index[0] = (current_item_index[0] + 1) % len(yaml_data) + while yaml_data[current_item_index[0]]['image'] == 'Close-Up/': + current_item_index[0] += 1 + show_item_image() + + # Display item name label + item_name_label = Label(root, text="", font=("Helvetica", 14)) + item_name_label.grid(row=1, column=0, columnspan=5, padx=10, pady=10) + + # Frame to contain color buttons + colors_frame = Frame(root) + colors_frame.grid(row=2, column=0, columnspan=5, padx=10, pady=10) + + # Button to go to the next item + next_button = Button(root, text="Next Item", command=next_item) + next_button.grid(row=3, column=2, pady=10) + + show_item_image() + root.mainloop() + + +# Main execution +if __name__ == "__main__": + # Set paths for image folder, YAML file, and color codes file + folder_path = os.path.join("..", "petitbonhomme", "assets", "img", "clothes") + yaml_file = os.path.join("..", "petitbonhomme", "_data", "clothing_items.yml") + color_file = os.path.join("..", "petitbonhomme", "_data", "clothing_items_colors.yml") + + # Load data and color mappings + clothing_items_data = load_yaml_data(yaml_file) + color_map = load_yaml_data(color_file) + + # Start the color selection process + display_image_and_update_colors(folder_path, clothing_items_data, yaml_file, color_map) diff --git a/scripts/update_image.py b/scripts/update_image.py index 81e391e..5028d36 100644 --- a/scripts/update_image.py +++ b/scripts/update_image.py @@ -52,7 +52,7 @@ def is_image_used(image_path, yaml_data): # Function to handle image display and update workflow def display_image_and_update(folder_path, yaml_data, yaml_file): # Get all image files from the folder - image_files = [f for f in os.listdir(folder_path) if f.endswith(('.png', '.jpg', '.jpeg', '.gif'))] + image_files = [f for f in os.listdir(folder_path) if f.endswith(('.png', '.jpg', '.jpeg', '.gif', '.webp'))] # Filter out images that are already used in any clothing item unused_image_files = [f for f in image_files if not is_image_used(f, yaml_data)]