From c4b5c02417c0eed22969f24cf5146ae19153d3f5 Mon Sep 17 00:00:00 2001 From: "D. Moonfire" Date: Mon, 6 May 2024 20:25:17 -0500 Subject: [PATCH] refactor: expanding on the examples --- examples/example.css | 686 +++++++++++++++++++++++++++++++ examples/example.js | 144 +++++++ examples/index.html | 936 +++++-------------------------------------- 3 files changed, 937 insertions(+), 829 deletions(-) create mode 100644 examples/example.css create mode 100644 examples/example.js diff --git a/examples/example.css b/examples/example.css new file mode 100644 index 0000000..d9a0a31 --- /dev/null +++ b/examples/example.css @@ -0,0 +1,686 @@ +:root { + --color-priduck-hue: 180; +} + +/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */ +.slidecontainer { + width: 100%; /* Width of the outside container */ +} + +/* The slider itself */ +.slider { + -webkit-appearance: none; /* Override default CSS styles */ + appearance: none; + width: 100%; /* Full-width */ + height: 25px; /* Specified height */ + background: #d3d3d3; /* Grey background */ + outline: none; /* Remove outline */ + opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ + -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */ + transition: opacity 0.2s; +} + +/* Mouse-over effects */ +.slider:hover { + opacity: 1; /* Fully shown on mouse-over */ +} + +/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ +.slider::-webkit-slider-thumb { + -webkit-appearance: none; /* Override default look */ + appearance: none; + width: 25px; /* Set a specific slider handle width */ + height: 25px; /* Slider handle height */ + background: #04aa6d; /* Green background */ + cursor: pointer; /* Cursor on hover */ +} + +.slider::-moz-range-thumb { + width: 25px; /* Set a specific slider handle width */ + height: 25px; /* Slider handle height */ + background: #04aa6d; /* Green background */ + cursor: pointer; /* Cursor on hover */ +} + +#hue { + display: inline-block; + min-width: 5em; +} + +#hue-box { + display: inline-block; + min-width: 5em; + min-height: 1em; + border: 1px solid black; + background-color: lch(50% 100 var(--color-priduck-hue)); +} + +table { + width: 100%; +} + +td, +th { + text-align: center; +} + +.color-lch, +.color-rgb { + font-size: 70%; +} + +.fg-dark { + color: white; +} + +.fg-light { + color: black; +} + +.fg-c0b0 { + color: var(--color-priduck-c0b0); +} +.fg-c1b0 { + color: var(--color-priduck-c1b0); +} +.fg-c2b0 { + color: var(--color-priduck-c2b0); +} +.fg-c3b0 { + color: var(--color-priduck-c3b0); +} +.fg-c4b0 { + color: var(--color-priduck-c4b0); +} +.fg-c5b0 { + color: var(--color-priduck-c5b0); +} +.fg-c6b0 { + color: var(--color-priduck-c6b0); +} +.fg-c7b0 { + color: var(--color-priduck-c7b0); +} +.fg-c8b0 { + color: var(--color-priduck-c8b0); +} +.fg-c9b0 { + color: var(--color-priduck-c9b0); +} +.fg-c0b1 { + color: var(--color-priduck-c0b1); +} +.fg-c1b1 { + color: var(--color-priduck-c1b1); +} +.fg-c2b1 { + color: var(--color-priduck-c2b1); +} +.fg-c3b1 { + color: var(--color-priduck-c3b1); +} +.fg-c4b1 { + color: var(--color-priduck-c4b1); +} +.fg-c5b1 { + color: var(--color-priduck-c5b1); +} +.fg-c6b1 { + color: var(--color-priduck-c6b1); +} +.fg-c7b1 { + color: var(--color-priduck-c7b1); +} +.fg-c8b1 { + color: var(--color-priduck-c8b1); +} +.fg-c9b1 { + color: var(--color-priduck-c9b1); +} +.fg-c0b2 { + color: var(--color-priduck-c0b2); +} +.fg-c1b2 { + color: var(--color-priduck-c1b2); +} +.fg-c2b2 { + color: var(--color-priduck-c2b2); +} +.fg-c3b2 { + color: var(--color-priduck-c3b2); +} +.fg-c4b2 { + color: var(--color-priduck-c4b2); +} +.fg-c5b2 { + color: var(--color-priduck-c5b2); +} +.fg-c6b2 { + color: var(--color-priduck-c6b2); +} +.fg-c7b2 { + color: var(--color-priduck-c7b2); +} +.fg-c8b2 { + color: var(--color-priduck-c8b2); +} +.fg-c9b2 { + color: var(--color-priduck-c9b2); +} +.fg-c0b3 { + color: var(--color-priduck-c0b3); +} +.fg-c1b3 { + color: var(--color-priduck-c1b3); +} +.fg-c2b3 { + color: var(--color-priduck-c2b3); +} +.fg-c3b3 { + color: var(--color-priduck-c3b3); +} +.fg-c4b3 { + color: var(--color-priduck-c4b3); +} +.fg-c5b3 { + color: var(--color-priduck-c5b3); +} +.fg-c6b3 { + color: var(--color-priduck-c6b3); +} +.fg-c7b3 { + color: var(--color-priduck-c7b3); +} +.fg-c8b3 { + color: var(--color-priduck-c8b3); +} +.fg-c9b3 { + color: var(--color-priduck-c9b3); +} +.fg-c0b4 { + color: var(--color-priduck-c0b4); +} +.fg-c1b4 { + color: var(--color-priduck-c1b4); +} +.fg-c2b4 { + color: var(--color-priduck-c2b4); +} +.fg-c3b4 { + color: var(--color-priduck-c3b4); +} +.fg-c4b4 { + color: var(--color-priduck-c4b4); +} +.fg-c5b4 { + color: var(--color-priduck-c5b4); +} +.fg-c6b4 { + color: var(--color-priduck-c6b4); +} +.fg-c7b4 { + color: var(--color-priduck-c7b4); +} +.fg-c8b4 { + color: var(--color-priduck-c8b4); +} +.fg-c9b4 { + color: var(--color-priduck-c9b4); +} +.fg-c0b5 { + color: var(--color-priduck-c0b5); +} +.fg-c1b5 { + color: var(--color-priduck-c1b5); +} +.fg-c2b5 { + color: var(--color-priduck-c2b5); +} +.fg-c3b5 { + color: var(--color-priduck-c3b5); +} +.fg-c4b5 { + color: var(--color-priduck-c4b5); +} +.fg-c5b5 { + color: var(--color-priduck-c5b5); +} +.fg-c6b5 { + color: var(--color-priduck-c6b5); +} +.fg-c7b5 { + color: var(--color-priduck-c7b5); +} +.fg-c8b5 { + color: var(--color-priduck-c8b5); +} +.fg-c9b5 { + color: var(--color-priduck-c9b5); +} +.fg-c0b6 { + color: var(--color-priduck-c0b6); +} +.fg-c1b6 { + color: var(--color-priduck-c1b6); +} +.fg-c2b6 { + color: var(--color-priduck-c2b6); +} +.fg-c3b6 { + color: var(--color-priduck-c3b6); +} +.fg-c4b6 { + color: var(--color-priduck-c4b6); +} +.fg-c5b6 { + color: var(--color-priduck-c5b6); +} +.fg-c6b6 { + color: var(--color-priduck-c6b6); +} +.fg-c7b6 { + color: var(--color-priduck-c7b6); +} +.fg-c8b6 { + color: var(--color-priduck-c8b6); +} +.fg-c9b6 { + color: var(--color-priduck-c9b6); +} +.fg-c0b7 { + color: var(--color-priduck-c0b7); +} +.fg-c1b7 { + color: var(--color-priduck-c1b7); +} +.fg-c2b7 { + color: var(--color-priduck-c2b7); +} +.fg-c3b7 { + color: var(--color-priduck-c3b7); +} +.fg-c4b7 { + color: var(--color-priduck-c4b7); +} +.fg-c5b7 { + color: var(--color-priduck-c5b7); +} +.fg-c6b7 { + color: var(--color-priduck-c6b7); +} +.fg-c7b7 { + color: var(--color-priduck-c7b7); +} +.fg-c8b7 { + color: var(--color-priduck-c8b7); +} +.fg-c9b7 { + color: var(--color-priduck-c9b7); +} +.fg-c0b8 { + color: var(--color-priduck-c0b8); +} +.fg-c1b8 { + color: var(--color-priduck-c1b8); +} +.fg-c2b8 { + color: var(--color-priduck-c2b8); +} +.fg-c3b8 { + color: var(--color-priduck-c3b8); +} +.fg-c4b8 { + color: var(--color-priduck-c4b8); +} +.fg-c5b8 { + color: var(--color-priduck-c5b8); +} +.fg-c6b8 { + color: var(--color-priduck-c6b8); +} +.fg-c7b8 { + color: var(--color-priduck-c7b8); +} +.fg-c8b8 { + color: var(--color-priduck-c8b8); +} +.fg-c9b8 { + color: var(--color-priduck-c9b8); +} +.fg-c0b9 { + color: var(--color-priduck-c0b9); +} +.fg-c1b9 { + color: var(--color-priduck-c1b9); +} +.fg-c2b9 { + color: var(--color-priduck-c2b9); +} +.fg-c3b9 { + color: var(--color-priduck-c3b9); +} +.fg-c4b9 { + color: var(--color-priduck-c4b9); +} +.fg-c5b9 { + color: var(--color-priduck-c5b9); +} +.fg-c6b9 { + color: var(--color-priduck-c6b9); +} +.fg-c7b9 { + color: var(--color-priduck-c7b9); +} +.fg-c8b9 { + color: var(--color-priduck-c8b9); +} +.fg-c9b9 { + color: var(--color-priduck-c9b9); +} + +.bg-c0b0 { + background-color: var(--color-priduck-c0b0); +} +.bg-c1b0 { + background-color: var(--color-priduck-c1b0); +} +.bg-c2b0 { + background-color: var(--color-priduck-c2b0); +} +.bg-c3b0 { + background-color: var(--color-priduck-c3b0); +} +.bg-c4b0 { + background-color: var(--color-priduck-c4b0); +} +.bg-c5b0 { + background-color: var(--color-priduck-c5b0); +} +.bg-c6b0 { + background-color: var(--color-priduck-c6b0); +} +.bg-c7b0 { + background-color: var(--color-priduck-c7b0); +} +.bg-c8b0 { + background-color: var(--color-priduck-c8b0); +} +.bg-c9b0 { + background-color: var(--color-priduck-c9b0); +} +.bg-c0b1 { + background-color: var(--color-priduck-c0b1); +} +.bg-c1b1 { + background-color: var(--color-priduck-c1b1); +} +.bg-c2b1 { + background-color: var(--color-priduck-c2b1); +} +.bg-c3b1 { + background-color: var(--color-priduck-c3b1); +} +.bg-c4b1 { + background-color: var(--color-priduck-c4b1); +} +.bg-c5b1 { + background-color: var(--color-priduck-c5b1); +} +.bg-c6b1 { + background-color: var(--color-priduck-c6b1); +} +.bg-c7b1 { + background-color: var(--color-priduck-c7b1); +} +.bg-c8b1 { + background-color: var(--color-priduck-c8b1); +} +.bg-c9b1 { + background-color: var(--color-priduck-c9b1); +} +.bg-c0b2 { + background-color: var(--color-priduck-c0b2); +} +.bg-c1b2 { + background-color: var(--color-priduck-c1b2); +} +.bg-c2b2 { + background-color: var(--color-priduck-c2b2); +} +.bg-c3b2 { + background-color: var(--color-priduck-c3b2); +} +.bg-c4b2 { + background-color: var(--color-priduck-c4b2); +} +.bg-c5b2 { + background-color: var(--color-priduck-c5b2); +} +.bg-c6b2 { + background-color: var(--color-priduck-c6b2); +} +.bg-c7b2 { + background-color: var(--color-priduck-c7b2); +} +.bg-c8b2 { + background-color: var(--color-priduck-c8b2); +} +.bg-c9b2 { + background-color: var(--color-priduck-c9b2); +} +.bg-c0b3 { + background-color: var(--color-priduck-c0b3); +} +.bg-c1b3 { + background-color: var(--color-priduck-c1b3); +} +.bg-c2b3 { + background-color: var(--color-priduck-c2b3); +} +.bg-c3b3 { + background-color: var(--color-priduck-c3b3); +} +.bg-c4b3 { + background-color: var(--color-priduck-c4b3); +} +.bg-c5b3 { + background-color: var(--color-priduck-c5b3); +} +.bg-c6b3 { + background-color: var(--color-priduck-c6b3); +} +.bg-c7b3 { + background-color: var(--color-priduck-c7b3); +} +.bg-c8b3 { + background-color: var(--color-priduck-c8b3); +} +.bg-c9b3 { + background-color: var(--color-priduck-c9b3); +} +.bg-c0b4 { + background-color: var(--color-priduck-c0b4); +} +.bg-c1b4 { + background-color: var(--color-priduck-c1b4); +} +.bg-c2b4 { + background-color: var(--color-priduck-c2b4); +} +.bg-c3b4 { + background-color: var(--color-priduck-c3b4); +} +.bg-c4b4 { + background-color: var(--color-priduck-c4b4); +} +.bg-c5b4 { + background-color: var(--color-priduck-c5b4); +} +.bg-c6b4 { + background-color: var(--color-priduck-c6b4); +} +.bg-c7b4 { + background-color: var(--color-priduck-c7b4); +} +.bg-c8b4 { + background-color: var(--color-priduck-c8b4); +} +.bg-c9b4 { + background-color: var(--color-priduck-c9b4); +} +.bg-c0b5 { + background-color: var(--color-priduck-c0b5); +} +.bg-c1b5 { + background-color: var(--color-priduck-c1b5); +} +.bg-c2b5 { + background-color: var(--color-priduck-c2b5); +} +.bg-c3b5 { + background-color: var(--color-priduck-c3b5); +} +.bg-c4b5 { + background-color: var(--color-priduck-c4b5); +} +.bg-c5b5 { + background-color: var(--color-priduck-c5b5); +} +.bg-c6b5 { + background-color: var(--color-priduck-c6b5); +} +.bg-c7b5 { + background-color: var(--color-priduck-c7b5); +} +.bg-c8b5 { + background-color: var(--color-priduck-c8b5); +} +.bg-c9b5 { + background-color: var(--color-priduck-c9b5); +} +.bg-c0b6 { + background-color: var(--color-priduck-c0b6); +} +.bg-c1b6 { + background-color: var(--color-priduck-c1b6); +} +.bg-c2b6 { + background-color: var(--color-priduck-c2b6); +} +.bg-c3b6 { + background-color: var(--color-priduck-c3b6); +} +.bg-c4b6 { + background-color: var(--color-priduck-c4b6); +} +.bg-c5b6 { + background-color: var(--color-priduck-c5b6); +} +.bg-c6b6 { + background-color: var(--color-priduck-c6b6); +} +.bg-c7b6 { + background-color: var(--color-priduck-c7b6); +} +.bg-c8b6 { + background-color: var(--color-priduck-c8b6); +} +.bg-c9b6 { + background-color: var(--color-priduck-c9b6); +} +.bg-c0b7 { + background-color: var(--color-priduck-c0b7); +} +.bg-c1b7 { + background-color: var(--color-priduck-c1b7); +} +.bg-c2b7 { + background-color: var(--color-priduck-c2b7); +} +.bg-c3b7 { + background-color: var(--color-priduck-c3b7); +} +.bg-c4b7 { + background-color: var(--color-priduck-c4b7); +} +.bg-c5b7 { + background-color: var(--color-priduck-c5b7); +} +.bg-c6b7 { + background-color: var(--color-priduck-c6b7); +} +.bg-c7b7 { + background-color: var(--color-priduck-c7b7); +} +.bg-c8b7 { + background-color: var(--color-priduck-c8b7); +} +.bg-c9b7 { + background-color: var(--color-priduck-c9b7); +} +.bg-c0b8 { + background-color: var(--color-priduck-c0b8); +} +.bg-c1b8 { + background-color: var(--color-priduck-c1b8); +} +.bg-c2b8 { + background-color: var(--color-priduck-c2b8); +} +.bg-c3b8 { + background-color: var(--color-priduck-c3b8); +} +.bg-c4b8 { + background-color: var(--color-priduck-c4b8); +} +.bg-c5b8 { + background-color: var(--color-priduck-c5b8); +} +.bg-c6b8 { + background-color: var(--color-priduck-c6b8); +} +.bg-c7b8 { + background-color: var(--color-priduck-c7b8); +} +.bg-c8b8 { + background-color: var(--color-priduck-c8b8); +} +.bg-c9b8 { + background-color: var(--color-priduck-c9b8); +} +.bg-c0b9 { + background-color: var(--color-priduck-c0b9); +} +.bg-c1b9 { + background-color: var(--color-priduck-c1b9); +} +.bg-c2b9 { + background-color: var(--color-priduck-c2b9); +} +.bg-c3b9 { + background-color: var(--color-priduck-c3b9); +} +.bg-c4b9 { + background-color: var(--color-priduck-c4b9); +} +.bg-c5b9 { + background-color: var(--color-priduck-c5b9); +} +.bg-c6b9 { + background-color: var(--color-priduck-c6b9); +} +.bg-c7b9 { + background-color: var(--color-priduck-c7b9); +} +.bg-c8b9 { + background-color: var(--color-priduck-c8b9); +} +.bg-c9b9 { + background-color: var(--color-priduck-c9b9); +} + +.controls { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-column-gap: 1em; +} diff --git a/examples/example.js b/examples/example.js new file mode 100644 index 0000000..6183e87 --- /dev/null +++ b/examples/example.js @@ -0,0 +1,144 @@ +// Set up the hue slider. +const slider = document.getElementById("hue-selector"); +const output = document.getElementById("hue"); +const box = document.getElementById("hue-box"); + +output.innerHTML = slider.value; // Display the default slider value + +// If we have a query parameter, select that. +const urlParams = new URLSearchParams(window.location.search); +const hueParam = urlParams.get("hue"); + +if (hueParam) { + window.setTimeout(() => setHue(hueParam)); +} + +// Update the current slider value (each time you drag the slider handle) +slider.oninput = function () { + setHue(this.value); +}; + +window.setTimeout(() => update(), 250); + +// Color Theme +var autoColorTheme = document.getElementById("auto-color-scheme"); +var lightColorTheme = document.getElementById("light-color-scheme"); +var darkColorTheme = document.getElementById("dark-color-scheme"); + +autoColorTheme.onclick = function () { + document.documentElement.removeAttribute("data-prefers-color-scheme"); +}; + +lightColorTheme.onclick = function () { + document.documentElement.setAttribute("data-prefers-color-scheme", "light"); +}; + +darkColorTheme.onclick = function () { + document.documentElement.setAttribute("data-prefers-color-scheme", "dark"); +}; + +// Prefers Contrast +var autoContrast = document.getElementById("auto-contrast-selector"); +var moreContrast = document.getElementById("more-contrast-selector"); +var lessContrast = document.getElementById("less-contrast-selector"); + +autoContrast.onclick = function () { + document.documentElement.removeAttribute("data-prefers-contrast"); +}; + +moreContrast.onclick = function () { + document.documentElement.setAttribute("data-prefers-contrast", "more"); +}; + +lessContrast.onclick = function () { + document.documentElement.setAttribute("data-prefers-contrast", "less"); +}; + +// Translating colors. We use a canvas to paint the color and then get the +// RGB from there for programs that need it (Inkscape and Gimp). +// +// https://stackoverflow.com/a/76469049 +const canvas = document.createElement("canvas"); + +canvas.width = canvas.height = 1; + +const ctx = canvas.getContext("2d", { willReadFrequently: true }); + +function getRgb(style) { + ctx.fillStyle = style; + ctx.fillRect(0, 0, 1, 1); + + const colors = ctx.getImageData(0, 0, 1, 1).data; + const r = colors[0].toString(16).padStart(2, "0").toLowerCase(); + const g = colors[1].toString(16).padStart(2, "0").toLowerCase(); + const b = colors[2].toString(16).padStart(2, "0").toLowerCase(); + const channels = [colors[0], colors[1], colors[2]]; + + return [channels.join(" "), `#${r}${g}${b}`]; +} + +/** + * Implements a simple debounce function. + * + * @param func + * @param {number} timeout + * @returns + */ +function debounce(func, timeout = 300) { + let timer; + + return (...args) => { + clearTimeout(timer); + timer = setTimeout(() => { + func.apply(this, args); + }, timeout); + }; +} + +// Used to avoid hammering the CPU while we calculate colors. +const update = debounce(_update); + +/** + * Sets the hue slider to the given color. + * + * @param {string} hue + */ +function setHue(hue) { + // Set the hue on the screen. + console.log("setting hue", hue); + document.documentElement.style.setProperty("--color-priduck-hue", hue); + output.innerHTML = hue; + update(); +} + +/** + * Updates all of the boxes and copy icons. + */ +function _update() { + // Set the history URL. + console.log("setting url"); + const url = new URL(location); + const hue = output.innerHTML; + url.searchParams.set("hue", hue); + history.pushState({}, "", url); + + // Update the controls. + const range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; + for (const c of range) { + for (const b of range) { + const id = `c${c}b${b}`; + const cb = document.getElementById(id); + const style = window.getComputedStyle(cb, null); + const lch = style["background-color"]; + const [colors, rgb] = getRgb(lch); + + cb.innerHTML = ` +
${id}
+
${lch}
+
${rgb}
+
${rgb}ff
+
${colors}
+ `; + } + } +} diff --git a/examples/index.html b/examples/index.html index c99d99e..eaa3692 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,678 +4,12 @@ Ideas - +

Options

@@ -783,133 +117,133 @@ b0 - c0b0 - c1b0 - c2b0 - c3b0 - c4b0 - c5b0 - c6b0 - c7b0 - c8b0 - c9b0 + c0b0 + c1b0 + c2b0 + c3b0 + c4b0 + c5b0 + c6b0 + c7b0 + c8b0 + c9b0 b1 - c0b1 - c1b1 - c2b1 - c3b1 - c4b1 - c5b1 - c6b1 - c7b1 - c8b1 - c9b1 + c0b1 + c1b1 + c2b1 + c3b1 + c4b1 + c5b1 + c6b1 + c7b1 + c8b1 + c9b1 b2 - c0b2 - c1b2 - c2b2 - c3b2 - c4b2 - c5b2 - c6b2 - c7b2 - c8b2 - c9b2 + c0b2 + c1b2 + c2b2 + c3b2 + c4b2 + c5b2 + c6b2 + c7b2 + c8b2 + c9b2 b3 - c0b3 - c1b3 - c2b3 - c3b3 - c4b3 - c5b3 - c6b3 - c7b3 - c8b3 - c9b3 + c0b3 + c1b3 + c2b3 + c3b3 + c4b3 + c5b3 + c6b3 + c7b3 + c8b3 + c9b3 b4 - c0b4 - c1b4 - c2b4 - c3b4 - c4b4 - c5b4 - c6b4 - c7b4 - c8b4 - c9b4 + c0b4 + c1b4 + c2b4 + c3b4 + c4b4 + c5b4 + c6b4 + c7b4 + c8b4 + c9b4 b5 - c0b5 - c1b5 - c2b5 - c3b5 - c4b5 - c5b5 - c6b5 - c7b5 - c8b5 - c9b5 + c0b5 + c1b5 + c2b5 + c3b5 + c4b5 + c5b5 + c6b5 + c7b5 + c8b5 + c9b5 b6 - c0b6 - c1b6 - c2b6 - c3b6 - c4b6 - c5b6 - c6b6 - c7b6 - c8b6 - c9b6 + c0b6 + c1b6 + c2b6 + c3b6 + c4b6 + c5b6 + c6b6 + c7b6 + c8b6 + c9b6 b7 - c0b7 - c1b7 - c2b7 - c3b7 - c4b7 - c5b7 - c6b7 - c7b7 - c8b7 - c9b7 + c0b7 + c1b7 + c2b7 + c3b7 + c4b7 + c5b7 + c6b7 + c7b7 + c8b7 + c9b7 b8 - c0b8 - c1b8 - c2b8 - c3b8 - c4b8 - c5b8 - c6b8 - c7b8 - c8b8 - c9b8 + c0b8 + c1b8 + c2b8 + c3b8 + c4b8 + c5b8 + c6b8 + c7b8 + c8b8 + c9b8 b9 - c0b9 - c1b9 - c2b9 - c3b9 - c4b9 - c5b9 - c6b9 - c7b9 - c8b9 - c9b9 + c0b9 + c1b9 + c2b9 + c3b9 + c4b9 + c5b9 + c6b9 + c7b9 + c8b9 + c9b9 @@ -1099,61 +433,5 @@ - +