📏 create wip folder

- this folder if for unfinished pages and code I don't want to lose but also don't want published on the public website

wip/js/colors.js

@@ -0,0 +1,88 @@
+document.addEventListener("DOMContentLoaded", function () {
+    fetch('/data/colors.json')
+        .then(response => response.json()) // Parse the JSON response
+        .then(data => {
+            const mainElement = document.getElementById("main"); // Get the main container
+
+            // Loop through each palette in the data array
+            data.forEach((palette) => {
+                // Create and append the palette name and description
+                const paletteWrapper = document.createElement("div");
+                paletteWrapper.classList.add("paletteWrapper");
+
+                // Create a details div to group name and description
+                const detailsElement = document.createElement("div");
+                detailsElement.classList.add("details");
+
+                // Create and append the name (h2)
+                const nameElement = document.createElement("h2");
+                nameElement.textContent = palette.name;
+                detailsElement.appendChild(nameElement);
+
+                // Create and append the description (p)
+                const descriptionElement = document.createElement("p");
+                descriptionElement.innerHTML = palette.description; // Use innerHTML to allow clickable links
+                detailsElement.appendChild(descriptionElement);
+
+                // Append the details div to the paletteWrapper
+                paletteWrapper.appendChild(detailsElement);
+
+                // Create a swatchWrapper for ungrouped swatches (to be shared across the whole palette)
+                const swatchWrapper = document.createElement("div");
+                swatchWrapper.classList.add("swatchWrapper");
+
+                // Loop through each item in palette.paletteColors
+                palette.paletteColors.forEach((groupOrSwatch) => {
+                    // Create a group wrapper even if colorGroup is empty
+                    const groupWrapper = document.createElement("div");
+                    groupWrapper.classList.add("colorGroup");
+
+                    // If colorGroup exists (non-empty), add its title
+                    if (groupOrSwatch.colorGroup) {
+                        const groupTitle = document.createElement("h3");
+                        groupTitle.textContent = groupOrSwatch.colorGroup;
+                        groupWrapper.appendChild(groupTitle);
+                    }
+
+                    // Create a swatchWrapper for the group
+                    const groupSwatchWrapper = document.createElement("div");
+                    groupSwatchWrapper.classList.add("swatchWrapper");
+
+                    // Loop through colorSwatches inside the group (if they exist)
+                    (groupOrSwatch.colorSwatches || []).forEach((color) => {
+                        const colorElement = document.createElement("p");
+                        colorElement.classList.add("swatch");
+
+                        if (color.colorCode) {
+                            colorElement.style.backgroundColor = color.colorCode;
+
+                            // Check if a color name exists and add it
+                            if (color.colorName) {
+                                colorElement.innerHTML = `${color.colorName}<br>${color.colorCode}`;
+                            } else {
+                                colorElement.innerHTML = `${color.colorCode}`;
+                            }
+                        } else {
+                            console.error(`Invalid color object:`, color);
+                        }
+
+                        // Append the color element to the swatchWrapper
+                        groupSwatchWrapper.appendChild(colorElement);
+                    });
+
+                    // Append the groupSwatchWrapper to the groupWrapper
+                    groupWrapper.appendChild(groupSwatchWrapper);
+
+                    // Append the groupWrapper to the paletteWrapper
+                    paletteWrapper.appendChild(groupWrapper);
+                });
+
+                // Append the swatchWrapper (for ungrouped swatches) to the paletteWrapper
+                paletteWrapper.appendChild(swatchWrapper);
+
+                // Append the paletteWrapper to the main container
+                mainElement.appendChild(paletteWrapper);
+            });
+        })
+        .catch(error => console.error("Error fetching JSON data:", error));
+});

wip/pages/colors.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Color</title>
+    <link rel="stylesheet" href="/assets/css/reset.css">
+    <style>
+        * {
+            box-sizing: border-box;
+        }
+
+        main {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+        }
+
+        .paletteWrapper {
+            margin-top: 2rem;
+            width: fit-content;
+            padding: 1rem;
+        }
+
+        .paletteWrapper:first-child {
+            margin-top: 0;
+        }
+
+        .details {
+            width: 100%;
+            margin-bottom: -0.25rem;
+            display: block;
+        }
+
+        h1 {
+            margin-bottom: 1rem;
+        }
+
+        h2 {
+            text-decoration: underline;
+        }
+
+        h3 {
+            margin-bottom: 0.25rem;
+        }
+
+        /* CONTAINS SWATCHES THAT ARE PART OF A COLOR GROUP */
+        .colorGroup {
+            margin-top: 1rem;
+        }
+
+        .swatchWrapper {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 0.75rem;
+        }
+
+        .swatch {
+            width: 100%;
+            padding: 0 1rem;
+            height: 75px;
+            border-radius: 1rem;
+            display: flex;
+            flex: 1 0 fit-content;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.85rem;
+            text-align: center;
+            line-height: 1;
+            text-transform: uppercase;
+        }
+    </style>
+</head>
+
+<body>
+    <header>
+        <h1>I now spell the word 'colo<s>u</s>r' without the 'u'.</h1>
+    </header>
+
+    <section id="intro">
+        <p>In Australia (where I live), the word colo<s>u</s>r is spelt with a 'u'. Until last year, I spelt it with a
+            'u'.
+            When
+            writing CSS, the word colo<s>u</s>r does not have a 'u'. This because a mild annoyance for me so I dropped
+            the
+            'u'. I
+            like it better. The word is more symmetrical without the 'u'.</p>
+        <p>Anyway, this is a collection of colo<s>u</s>rs I like. Some of them are grouped together as palettes.</p>
+    </section>
+    <main id="main"></main>
+
+
+    <footer><a class="back" href="/index.html">Back</a></footer>
+    <script src="/assets/js/colors.js"></script>
+
+</body>
+
+</html>

wip/pages/counter.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Death</title>
+    <link rel="stylesheet" href="/assets/css/reset.css">
+    <style>
+        .counter {
+            text-align: center;
+            font-size: 0.75rem;
+        }
+    </style>
+</head>
+
+<body>
+    <main>
+        <p class="counter">It has been <span id="time-since"></span> since my mother died.</p>
+    </main>
+    <footer><a class="back" href="/index.html">Back</a></footer>
+
+    <script>
+        const currentDate = new Date();
+        const deathDate = new Date('2023-01-08');
+
+        const timeSince = currentDate - deathDate;
+        const totalDays = Math.floor(timeSince / 86400000);
+
+        const years = Math.floor(totalDays / 365);
+        const daysAfterYears = totalDays % 365;
+
+        const months = Math.floor(daysAfterYears / 30);
+        const daysAfterMonths = daysAfterYears % 30;
+
+        const weeks = Math.floor(daysAfterMonths / 7);
+        const days = daysAfterMonths % 7;
+
+        const yearText = years === 1 ? 'year' : 'years';
+        const monthText = months === 1 ? 'month' : 'months';
+        const weekText = weeks === 1 ? 'week' : 'weeks';
+        const dayText = days === 1 ? 'day' : 'days';
+        document.getElementById('time-since').textContent =
+            `${years} ${yearText}, ${months} ${monthText}, ${weeks} ${weekText}, and ${days} ${dayText}`;
+
+    </script>
+</body>
+
+</html>