added TailwindCSS and got it working as it was before

updating public assets
updating gitignore file
2022-03-24 14:24:30 -06:00 · 2022-03-24 11:13:41 -06:00 · 2022-03-24 11:13:28 -06:00 · 2022-03-24 11:10:39 -06:00 · 2022-03-24 11:02:21 -06:00 · 2022-03-24 11:01:53 -06:00
46 changed files with 3924 additions and 447 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -3,13 +3,31 @@
 env.php
 *.zip
 *.tar*
+*.log
+*-debug.log*

 # Directories
 /node_modules
+/public/hot
+/public/storage
+/vendor
+/cypress/videos
+/cypress/screenshots
+logs
+dist
+dist-ssr
+coverage
+*.local

 ### Editor Specific
 # Files
-
+batch-color-converter.sublime-project
+batch-color-converter.sublime-workspace
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

 # Directories
 .idea
--- a/README.md
+++ b/README.md
@@ -0,0 +1,29 @@
+# batch-color-converter
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/batch-color-converter/.vscode/extensions.json
+++ b/batch-color-converter/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar", "johnsoncodehk.vscode-typescript-vue-plugin"]
+}
--- a/css/vendor/tailwind-2.2.4.min.css
+++ b/css/vendor/tailwind-2.2.4.min.css
--- a/env.php
+++ b/env.php
@@ -0,0 +1,3 @@
+<?php
+
+$domain = 'https://localsite80.test/js-projects/batch-color-converter';
--- a/fonts/Open_Sans.zip
+++ b/fonts/Open_Sans.zip
--- a/fonts/Ubuntu.zip
+++ b/fonts/Ubuntu.zip
--- a/index.html
+++ b/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en-US">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <meta name="robots" content="index,follow">
+        <meta name="googlebot" content="index,follow">
+
+        <meta name="format-detection" content="telephone=no">
+        <meta http-equiv="x-dns-prefetch-control" content="off">
+
+        <meta name="google" content="notranslate">
+        <meta name="google" content="nositelinkssearchbox">
+
+        <meta name="rating" content="General">
+
+
+        <meta name="subject" content="CSS color conversion tool">
+        <meta name="description" content="Convert colors in a batch among HSL(a), RGB(a), and Hex">
+
+        <title>Batch Color Converter</title>
+
+        <!-- Privacy -->
+        <meta name="twitter:dnt" content="on">
+
+        <!-- analytics -->
+        <!-- none -->
+
+        <script type="module" src="/src/main.js"></script>
+    </head>
+    <body class="font-open-sans antialiased bg-zinc-50 dark:bg-slate-900">
+        <div id="app" class="min-h-screen">
+            <!-- -->
+        </div>
+        <!-- END OF LINE. -->
+    </body>
+</html>
--- a/index.php
+++ b/index.php
@@ -62,49 +62,8 @@ require_once "env.php";
        <!-- -->
    </head>
    <body class="font-open-sans antialiased">
-        <div id="app" class="flex flex-col items-center justify-center w-full min-h-screen">
-            <div v-show="showStatusMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-green-300 text-green-600 fixed top-0 mt-4 rounded z-10">Copied!</div>
-            <div v-show="showErrorMessage" class="w-1/5 text-center px-4 py-3 uppercase font-bold bg-red-300 text-red-600 fixed top-0 mt-4 rounded z-10">Failed to copy</div>
-            <div class="w-3/5">
-                <h1 class="text-center text-2xl font-bold">Batch Color Converter</h1>

-                <p class="mt-6">Click a particular cell in the table with HSL, RGB, or hex to copy that value.</p>
-
-                <button type="button" class="block w-full py-4 uppercase font-bold text-white bg-pink-600 rounded mt-6 mb-8" v-on:click="batchConvert()">Convert</button>
-
-                <div class="flex flex-row mb-8">
-                    <div class="flex w-1/3 mr-4">
-                        <textarea v-model="inputBox" class="resize-y w-full h-96 border border-gray-200 shadow rounded py-2 px-4" placeholder="#fff"></textarea>
-                    </div>
-                    <div class="flex flex-col w-2/3 ml-4">
-                        <table class="font-ubuntu w-full">
-                            <thead>
-                                <tr>
-                                    <th class="p-4">Preview</th>
-                                    <th class="p-4">Hex(a)</th>
-                                    <th class="p-4">RGB(a)</th>
-                                    <th class="p-4">HSL(a)</th>
-                                </tr>
-                            </thead>
-                            <tbody>
-                                <tr v-for="color in convertedColors" class="border-t border-gray-300">
-                                    <td v-show="color.error" class="text-center px-2 py-4 bg-red-200 text-red-700 font-bold" colspan="4">Error with {{ color.raw }}</td>
-                                    <td v-show="!color.error">
-                                        <div class="block mx-2 my-4" style="height: 25px;" :style="{ background: color.hex }"></div>
-                                    </td>
-                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hex)">{{ color.hex }}</div></td>
-                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.rgb)">{{ color.rgb }}</div></td>
-                                    <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hsl)">{{ color.hsl }}</div></td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="absolute bottom-0 p-8 text-center w-full">
-            You can take a look at <a href="https://git.ditoforge.com/brian/batch-color-converter" title="Source code for this page" class="text-blue-400 font-bold hover:text-blue-700 transition">this terrible code over on my git server</a>.
-        </div>
+        
+    <!-- END OF LINE. -->
    </body>
 </html>
-<!-- END OF LINE. -->
--- a/js/app.js
+++ b/js/app.js
@@ -1,396 +0,0 @@
-const clipboard = navigator.clipboard;
-
-let app = new Vue({
-  el: '#app',
-
-  data: {
-    defaultInputs: [
-      "ccc",
-      "#db2777aa",
-      "rgb(64, 240, 18)",
-      "hsla(240, 86.9%, 50.7%, 0.8)",
-    ],
-    inputBox: "ccc\n#4f46e5\n#db2777aa\n",
-
-    showStatusMessage: false,
-    showErrorMessage: false,
-
-    hexRegex: /^\#?[a-f0-9]{3,9}/i,
-    rgbRegex: /^rgb\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*\)/i,
-    rgbaRegex: /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(0(\.[0-9])?|1(\.0)?)\s*\)/i,
-    hslRegex: /^hsl\(\s*\d{1,3}\s*,\s*\d{1,3}(\.[0-9])?%\s*,\s*\d{1,3}(\.[0-9])?%\s*\)/i,
-    hslaRegex: /^hsla\(\s*\d{1,3}\s*,\s*\d{1,3}(\.[0-9])?%\s*,\s*\d{1,3}(\.[0-9])?%\s*,\s*(0(\.[0-9])?|1(\.0)?)\s*\)/i,
-
-    convertedColors: [],
-  },
-
-  beforeMount: function () {
-    this.inputBox = this.defaultInputs.join("\n");
-  },
-
-  mounted: function () {
-    this.batchConvert();
-  },
-
-  methods: {
-    batchConvert: function () {
-      this.convertedColors = [];
-
-      // first attempt to split by new-line characters
-      let inputArray = this.inputBox.split('\n');
-      let count = inputArray.length;
-
-      for (let i = 0; i < count; i++) {
-        // check for empty line, non hex(a)/rgb(a)/hsl(a) string
-        let inputLine = inputArray[i].toLowerCase().trim();
-        if (inputLine.length === 0) {
-          continue;
-        }
-
-        let converted = {
-          error: false,
-          raw: inputLine,
-          hex: "",
-          rgb: "",
-          hsl: "",
-        };
-
-        if (this.hexRegex.test(inputLine)) {
-          let hexString = inputLine;
-
-          // doing this just to add pound symbol for the table output
-          // if it doesn't already exist and to allow the use of
-          // the hex value without leading pound symbol
-          // for conversion to other formats.
-          hexString = hexString.replace('#', '');
-          converted.hex = "#" + hexString;
-
-          // check if it has an alpha channel, and possibly shorthand
-          if (hexString.length === 4 || hexString.length === 8) {
-            rgb = this.hexaToRgba(hexString);
-            converted.rgb = "rgba(" + rgb.red + ", " + rgb.green + ", " + rgb.blue + ", " + rgb.alpha + ")";
-
-            hsl = this.rgbaToHsla(rgb.red, rgb.green, rgb.blue, rgb.alpha);
-            converted.hsl = "hsla(" + hsl.hue + ", " + hsl.saturation + "%, " + hsl.lightness + "%, " + hsl.alpha + ")";
-          } else {
-            rgb = this.hexToRgb(hexString);
-            converted.rgb = "rgb(" + rgb.red + ", " + rgb.green + ", " + rgb.blue + ")";
-
-            hsl = this.rgbToHsl(rgb.red, rgb.green, rgb.blue);
-            converted.hsl = "hsl(" + hsl.hue + ", " + hsl.saturation + "%, " + hsl.lightness + "%)";
-          }
-        }
-
-        if (this.rgbRegex.test(inputLine)) {
-          // extract the values for red, green, blue.
-          let rgbStrArray = inputLine.split(',');
-          let red = rgbStrArray[0].replace('rgb(', '').trim();
-          let green = rgbStrArray[1].trim();
-          let blue = rgbStrArray[2].replace(')', '').trim();
-
-          red = Number.parseInt(red);
-          green = Number.parseInt(green);
-          blue = Number.parseInt(blue);
-
-          converted.hex = "#" + this.rgbToHex(red, green, blue);
-
-          converted.rgb = "rgb(" + red + ", " + green + ", " + blue + ")";
-
-          let hsl = this.rgbToHsl(red, green, blue);
-          converted.hsl = converted.hsl = "hsl(" + hsl.hue + ", " + hsl.saturation + "%, " + hsl.lightness + "%)";
-        }
-
-        if (this.rgbaRegex.test(inputLine)) {
-          // extract the values for red, green, blue, alpha.
-          let rgbaStrArray = inputLine.split(',');
-          let red = rgbaStrArray[0].replace('rgba(', '').trim();
-          let green = rgbaStrArray[1].trim();
-          let blue = rgbaStrArray[2].trim();
-          let alpha = rgbaStrArray[3].replace(')', '').trim();
-
-          red = Number.parseInt(red);
-          green = Number.parseInt(green);
-          blue = Number.parseInt(blue);
-
-          converted.hex = "#" + this.rgbaToHexa(red, green, blue, alpha);
-
-          converted.rgb = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
-
-          let hsl = this.rgbToHsl(red, green, blue);
-          converted.hsl = "hsla(" + hsl.hue + ", " + hsl.saturation + "%, " + hsl.lightness + "%, " + alpha + ")";
-        }
-
-        if (this.hslRegex.test(inputLine)) {
-          // extract the values for hue, saturation, lightness.
-          let hslStrArray = inputLine.split(',');
-          let hue = hslStrArray[0].replace('hsl(', '').trim();
-          let saturation = hslStrArray[1].replace('%', '').trim();
-          let lightness = hslStrArray[2].replace('%', '').replace(')', '').trim();
-
-          converted.hex = "#" + this.hslToHex(hue, saturation, lightness);
-
-          let rgb = this.hslToRgb(hue, saturation, lightness);
-          converted.rgb = "rgb(" + rgb.red + ", " + rgb.green + ", " + rgb.blue + ")";
-
-          converted.hsl = "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)";
-        }
-
-        if (this.hslaRegex.test(inputLine)) {
-          // extract the values for hue, saturation, lightness, alpha.
-          let hslaStrArray = inputLine.split(',');
-          let hue = hslaStrArray[0].replace('hsla(', '').trim();
-          let saturation = hslaStrArray[1].replace('%', '').trim();
-          let lightness = hslaStrArray[2].replace('%', '').trim();
-          let alpha = hslaStrArray[3].replace(')', '').trim();
-
-          converted.hex = "#" + this.hslaToHexa(hue, saturation, lightness, alpha);
-
-          let rgb = this.hslaToRgba(hue, saturation, lightness, alpha);
-          converted.rgb = "rgb(" + rgb.red + ", " + rgb.green + ", " + rgb.blue + ", " + alpha + ")";
-
-          converted.hsl = "hsla(" + hue + ", " + saturation + "%, " + lightness + "%, " + alpha + ")";
-        }
-
-        this.convertedColors.push(converted);
-      }
-    },
-
-    // hex -> RGB
-    hexToRgb: function (hexString) {
-      let hex = 'ffffff';
-      if (hexString.length === 3) {
-        hex = '';
-        hex += hexString.substr(2, 1) + hexString.substr(2, 1);
-        hex += hexString.substr(1, 1) + hexString.substr(1, 1);
-        hex += hexString.substr(0, 1) + hexString.substr(0, 1);
-      } else {
-        hex = hexString;
-      }
-
-      let bigint = Number.parseInt(hex, 16);
-      let r = (bigint >> 16) & 255;
-      let g = (bigint >> 8) & 255;
-      let b = bigint & 255;
-
-      return { "red": r, "green": g, "blue": b };
-    },
-
-    // hexa -> RGBa
-    hexaToRgba: function (hexString) {
-      let hex = 'ffffff';
-      let alphaHex = 'ff';
-      let alpha = 1;
-
-      if (hexString.length === 4) {
-        alphaHex = hexString.substr(3, 1) + hexString.substr(3, 1);
-        hex = '';
-        hex += hexString.substr(2, 1) + hexString.substr(2, 1);
-        hex += hexString.substr(1, 1) + hexString.substr(1, 1);
-        hex += hexString.substr(0, 1) + hexString.substr(0, 1);
-      } else {
-        alphaHex = hexString.substr(6, 2);
-        hex = hexString.substr(0, 6);
-      }
-
-      let rgb = this.hexToRgb(hex);
-      alpha = Number.parseFloat((Number.parseInt(alphaHex, 16) / 255)).toFixed(1);
-
-      return { "red": rgb.red, "green": rgb.green, "blue": rgb.blue, "alpha": alpha };
-    },
-
-    // hex -> HSL
-    hexToHsl: function (hexString) {
-console.error('hex to HSL not implemented yet');
-    },
-
-    // hexa -> HSLa
-    hexaToHsla: function (hexString) {
-console.error('hexa to HSLa not implemented yet');
-    },
-
-    // RGB -> hex
-    rgbToHex: function (r, g, b) {
-      let red = r.toString(16);
-      let green = g.toString(16);
-      let blue = b.toString(16);
-
-      if (red.length === 1) { red = "0" + red; }
-      if (green.length === 1) { green = "0" + green; }
-      if (blue.length === 1) { blue = "0" + blue; }
-      return "" + red + green + blue;
-    },
-
-    // RGBa -> hexa
-    rgbaToHexa: function (r, g, b, a) {
-      let hex = this.rgbToHex(r, g, b);
-      let alpha = Math.round(this.sanitizeAlphaFloat(a) * 255).toString(16);
-      if (alpha.length == 1) { alpha = "0" + alpha; }
-      return hex + alpha;
-    },
-
-    // RGB -> HSL
-    rgbToHsl: function (red, green, blue) {
-      let hue = 0, saturation = 0, lightness = 0;
-
-      let redFrac = Number.parseFloat(red / 255),
-        greenFrac = Number.parseFloat(green / 255),
-        blueFrac = Number.parseFloat(blue / 255);
-
-      let channelMin = Math.min(redFrac, blueFrac, greenFrac),
-        channelMax = Math.max(redFrac, blueFrac, greenFrac),
-        delta = channelMax - channelMin;
-
-      if (delta === 0) { hue = 0; }
-      // Red is the maximum color
-      else if (channelMax === redFrac) {
-        hue = ((greenFrac - blueFrac) / delta) % 6;
-      }
-      // Green is the maximum color
-      else if (channelMax === greenFrac) {
-        hue = (blueFrac - redFrac) / delta + 2;
-      }
-      // Green is the maximum color
-      else {
-        hue = (redFrac - greenFrac) / delta + 4;
-      }
-
-      hue = Math.round(hue * 60);
-      // Make negative hues positive behind 360°
-      if (hue < 0) { hue += 360; }
-
-      lightness = (channelMax + channelMin) / 2;
-      if (delta === 0) { saturation = 0; }
-      else { saturation = delta / (1 - Math.abs(2 * lightness - 1)); }
-
-      lightness = +(lightness * 100).toFixed(1);
-      saturation = +(saturation * 100).toFixed(1);
-
-      return { "hue": hue, "saturation": saturation, "lightness": lightness };
-    },
-
-    // RGBa -> HSLa
-    rgbaToHsla: function (r, g, b, al) {
-      let hsl = this.rgbToHsl(r, g, b);
-      hsl.alpha = this.sanitizeAlphaFloat(al);
-      return hsl;
-    },
-
-    // HSL -> hex
-    hslToHex: function (hue, saturation, lightness) {
-      let rgb = this.hslToRgb(hue, saturation, lightness);
-      let red = rgb.red.toString(16);
-      let green = rgb.green.toString(16);
-      let blue = rgb.blue.toString(16);
-
-      if (red.length === 1) { red = "0" + red; }
-      if (green.length === 1) { green = "0" + green; }
-      if (blue.length === 1) { blue = "0" + blue; }
-
-      return "" + red + green + blue;
-    },
-
-    // HSLa -> hexa
-    hslaToHexa: function (hue, saturation, lightness, alpha) {
-      let rgb = this.hslToRgb(hue, saturation, lightness);
-      let red = rgb.red.toString(16);
-      let green = rgb.green.toString(16);
-      let blue = rgb.blue.toString(16);
-      let alphaHex = Math.round(this.sanitizeAlphaFloat(alpha) * 255).toString(16);
-
-      if (red.length === 1) { red = "0" + red; }
-      if (green.length === 1) { green = "0" + green; }
-      if (blue.length === 1) { blue = "0" + blue; }
-
-      return "" + red + green + blue + alphaHex;
-    },
-
-    // HSL -> RGB
-    hslToRgb: function (hue, saturation, lightness) {
-      if (hue === 360) { hue = 0; }
-      if (hue < 0) { hue += 360; }
-
-      saturation /= 100;
-      lightness /= 100;
-
-      let chroma = (1 - Math.abs(2 * lightness - 1)) * saturation,
-        xComponent = chroma * (1 - Math.abs((hue / 60) % 2 - 1)),
-        lightnessMatch = lightness - (chroma / 2),
-        red = 0,
-        green = 0,
-        blue = 0;
-
-      // set red and green if hue between 0 and 119
-      if (0 <= hue && hue < 60) {
-        red = chroma;
-        green = xComponent;
-      } else if (60 <= hue && hue < 120) {
-        red = xComponent;
-        green = chroma;
-      }
-      // set green and blue if hue between 120 and 239
-      else if (120 <= hue && hue < 180) {
-        green = chroma;
-        blue = xComponent;
-      } else if (180 <= hue && hue < 240) {
-        green = xComponent;
-        blue = chroma;
-      }
-      // set red and blue if hue between 0 and 119
-      else if (240 <= hue && hue < 300) {
-        red = xComponent;
-        blue = chroma;
-      } else if (300 <= hue && hue < 360) {
-        red = chroma;
-        blue = xComponent;
-      }
-
-      red = Math.round((red + lightnessMatch) * 255);
-      green = Math.round((green + lightnessMatch) * 255);
-      blue = Math.round((blue + lightnessMatch) * 255);
-
-      return { "red": red, "green": green, "blue": blue };
-    },
-
-    // HSLa -> RGBa
-    hslaToRgba: function (hue, saturation, lightness, alpha) {
-      let rgb = this.hslToRgb(hue, saturation, lightness);
-      return { "red": rgb.red, "green": rgb.green, "blue": rgb.blue, "alpha": this.sanitizeAlphaFloat(alpha) };
-    },
-
-    // --------------------------------
-    // | helper methods
-    // --------------------------------
-
-    // Normalize the alpha to between 0.0 and 1.0
-    // return single decimal place float value
-    sanitizeAlphaFloat: function (alphaRaw) {
-      let alpha = Number.parseFloat(1);
-
-      if (alphaRaw >= 0 && alphaRaw <= 1) {
-        alpha = Number.parseFloat(alphaRaw);
-      } else if (alphaRaw < 0) {
-        alpha = Number.parseFloat(0);
-      }
-
-      return alpha.toFixed(1);
-    },
-
-    updateClipboard: function (text) {
-      let _this = this;
-      clipboard.writeText(text).then(() => {
-        _this.showErrorMessage = false;
-        _this.showStatusMessage = true;
-        setTimeout(() => {
-          _this.showStatusMessage = false;
-        }, 1000);
-      })
-      .catch(() => {
-        _this.showStatusMessage = false;
-        _this.showErrorMessage = true;
-        setTimeout(() => {
-          _this.showErrorMessage = false;
-        }, 1000);
-      });
-    },
-  },
-});
--- a/js/vendor/vue-2.6.14.min.js
+++ b/js/vendor/vue-2.6.14.min.js
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "batch-color-converter",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5050"
+  },
+  "dependencies": {
+    "vue": "^3.2.31"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.2.2",
+    "autoprefixer": "^10.4.4",
+    "postcss": "^8.4.12",
+    "tailwindcss": "^3.0.23",
+    "vite": "^2.8.4"
+  }
+}
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/favicon.png
+++ b/public/favicon.png
--- a/public/favicon.svg
+++ b/public/favicon.svg
--- a/public/fonts/OpenSans/LICENSE.txt
+++ b/public/fonts/OpenSans/LICENSE.txt
--- a/public/fonts/OpenSans/OpenSans-Bold.woff2
+++ b/public/fonts/OpenSans/OpenSans-Bold.woff2
--- a/public/fonts/OpenSans/OpenSans-Regular.woff2
+++ b/public/fonts/OpenSans/OpenSans-Regular.woff2
--- a/public/fonts/Ubuntu/UFL.txt
+++ b/public/fonts/Ubuntu/UFL.txt
--- a/public/fonts/Ubuntu/Ubuntu-Bold.woff2
+++ b/public/fonts/Ubuntu/Ubuntu-Bold.woff2
--- a/public/fonts/Ubuntu/Ubuntu-Regular.woff2
+++ b/public/fonts/Ubuntu/Ubuntu-Regular.woff2
--- a/public/gpl-3.0-standalone.html
+++ b/public/gpl-3.0-standalone.html
--- a/public/humans.txt
+++ b/public/humans.txt
--- a/src/App.vue
+++ b/src/App.vue
@@ -0,0 +1,261 @@
+<template>
+<div class="grid-container h-screen">
+    <div class="wrapper">
+        <div class="grid-header">
+            <h1 class="text-center text-4xl font-bold">Batch Color Converter</h1>
+            <button @click="batchConvert" type="button">Convert</button>
+        </div>
+        <div class="grid-main">
+            <div class="input-container">
+                <textarea v-model="inputBox" class="resize-y w-full h-96 border border-gray-200 shadow rounded py-2 px-4" placeholder="#fff"></textarea>
+            </div>
+            <div class="output-wrapper">
+                <table class="font-ubuntu w-full">
+                    <thead>
+                        <tr>
+                            <th class="p-4">Preview</th>
+                            <th class="p-4">Hex(a)</th>
+                            <th class="p-4">RGB(a)</th>
+                            <th class="p-4">HSL(a)</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(color, idx) in convertedColors" :key="idx" class="border-t border-gray-300">
+                            <td v-show="color.error" class="text-center px-2 py-4 bg-red-200 text-red-700 font-bold" colspan="4">Error with {{ color.raw }}</td>
+                            <td v-show="!color.error">
+                                <div class="block mx-2 my-4" style="height: 25px" :style="{ background: color.hex }"></div>
+                            </td>
+                            <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hex)">{{ color.hex }}</div></td>
+                            <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.rgb)">{{ color.rgb }}</div></td>
+                            <td v-show="!color.error" class="color-cell cursor-pointer"><div class="text-center px-2 py-4 border border-transparent hover:border-gray-500" v-on:click="updateClipboard(color.hsl)">{{ color.hsl }}</div></td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="grid-footer">
+            <p>You can take a look at <a href="https://git.ditoforge.com/brian/batch-color-converter" title="Source code for this page" class="text-blue-400 font-bold hover:text-blue-700 transition">this terrible code over on my git server</a>.</p>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+import { defineComponent, reactive, ref, computed, watch, onBeforeMount, onMounted } from 'vue'
+import { Color } from './converters/index.js'
+
+export default defineComponent({
+  emits: [],
+
+  props: {},
+
+  components: {},
+
+  setup(props, { attrs, slots, emit, expose }) {
+    let defaultInputs = [
+      "ccc",
+      "#db2777aa",
+      "rgb(64, 240, 18)",
+      "hsla(240, 86.9%, 50.7%, 0.8)",
+    ]
+    let inputBox = ref("ccc\n#4f46e5\n#db2777aa\n")
+
+    let convertedColors = ref([])
+
+    let showStatusMessage = ref(false)
+    let showErrorMessage = ref(false)
+
+    //const hexRegex = /^\#?[a-fA-F0-9]{3,6}$/i
+    //const hexRegex = /^(?=(\#?)[a-fA-F0-9]$)(?:.{3}|.{6})$/i
+    const hexRegex = /^(\#?[a-fA-F0-9]{3}|\#?[a-fA-F0-9]{6})$/i
+    //const hexaRegex = /^(\#?)[a-fA-F0-9]{4,8}$/i
+    //const hexaRegex = /^(?=\#?[a-fA-F0-9]$)(?:.{4}|.{8})$/i
+    const hexaRegex = /^(\#?[a-fA-F0-9]{4}|\#?[a-fA-F0-9]{8})$/i
+    const rgbRegex = /^rgb\(\s*\d{1,3}\s*,?\s*\d{1,3}\s*,?\s*\d{1,3}\s*\)$/i
+    //const rgbaRegex = /^rgba\(\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*\d{1,3}\s*,\s*(0(\.[0-9])?|1(\.0)?)\s*\)/i
+    const rgbaRegex = /^rgb(a?)\(\s*\d{1,3}\s*,?\s*\d{1,3}\s*,?\s*\d{1,3}\s*(,|\/)*\s*((0(\.[0-9]{1,3}))?|(1(\.0{1,3}))?|([1-9][0-9]?|100))\s*\)$/i
+    const hslRegex = /^hsl\(\s*\d{1,3}\s*,?\s*\d{1,3}(\.[0-9])?%\s*,?\s*\d{1,3}(\.[0-9])?%\s*\)\s*$/i
+    //const hslaRegex = /^hsla\(\s*\d{1,3}\s*,*\s*\d{1,3}(\.[0-9])?%\s*,*\s*\d{1,3}(\.[0-9])?%\s*(,|\/)*\s*((0(\.[0-9]{1,3}))?|(1(\.0{1,3}))?)\s*\)/i
+    const hslaRegex = /^hsl(a?)\(\s*\d{1,3}\s*,?\s*\d{1,3}(\.[0-9])?%\s*,?\s*\d{1,3}(\.[0-9])?%\s*(,|\/)*\s*((0(\.[0-9]{1,3}))?|(1(\.0{1,3}))?|([1-9][0-9]?|100))\s*\)\s*$/i
+
+    // computed properties
+    /*let compVariable = computed(() => {
+      //return 'foo'
+    })*/
+
+    // watchers
+    /*watch(inputBox, (newValue, oldValue) => {
+      //
+    })*/
+
+    // lifecycle hooks
+    onBeforeMount(() => {
+      inputBox.value = defaultInputs.join("\n")
+    })
+
+    onMounted(() => {
+      batchConvert()
+    })
+
+    // methods
+    function batchConvert() {
+      convertedColors.value = []
+
+      // first attempt to split by new-line characters
+      let inputArray = inputBox.value.split('\n')
+      let count = inputArray.length
+
+      for (let i = 0; i < count; i++) {
+        // check for empty line, non hex(a)/rgb(a)/hsl(a) string
+        let inputLine = inputArray[i].toLowerCase().trim()
+        if (inputLine.length === 0) {
+          continue
+        }
+
+        let converted = {
+          error: false,
+          raw: inputLine,
+          hex: "",
+          rgb: "",
+          hsl: "",
+        }
+
+        let rgb = { red: null, green: null, blue: null, alpha: null }
+        let hsl = { hue: null, saturation: null, lightness: null, alpha: null }
+
+        if (hexRegex.test(inputLine)) {
+          let hexString = inputLine
+
+          // doing this just to add pound symbol for the table output
+          // if it doesn't already exist and to allow the use of
+          // the hex value without leading pound symbol
+          // for conversion to other formats.
+          hexString = hexString.replace('#', '')
+
+          rgb = Color.hexToRgb(hexString)
+          hsl = Color.rgbToHsl(rgb.red, rgb.green, rgb.blue)
+
+          converted.hex = "#" + hexString
+          converted.rgb = "rgb(" + rgb.red + ", " + rgb.green + ", " + rgb.blue + ")"
+          converted.hsl = "hsl(" + hsl.hue + ", " + hsl.saturation + "%, " + hsl.lightness + "%)"
+        } else if (hexaRegex.test(inputLine)) {
+          let hexString = inputLine
+          hexString = hexString.replace('#', '')
+
+          rgb = Color.hexaToRgba(hexString)
+          hsl = Color.rgbaToHsla(rgb.red, rgb.green, rgb.blue, rgb.alpha)
+
+          converted.hex = "#" + hexString
+          converted.rgb = "rgba(" + rgb.red + ", " + rgb.green + ", " + rgb.blue + ", " + rgb.alpha + ")"
+          converted.hsl = "hsla(" + hsl.hue + ", " + hsl.saturation + "%, " + hsl.lightness + "%, " + hsl.alpha + ")"
+        }
+
+        if (rgbRegex.test(inputLine)) {
+          // extract the values for red, green, blue.
+          let rgbStrArray = inputLine.split(',')
+          if (rgbStrArray.length !== 3) {
+            rgbStrArray = inputLine.split(' ')
+          }
+          let red = Number.parseInt(rgbStrArray[0].replace('rgb(', '').trim())
+          let green = Number.parseInt(rgbStrArray[1].trim())
+          let blue = Number.parseInt(rgbStrArray[2].replace(')', '').trim())
+
+          hsl = Color.rgbToHsl(red, green, blue)
+
+          converted.hex = "#" + Color.rgbToHex(red, green, blue)
+          converted.rgb = "rgb(" + red + ", " + green + ", " + blue + ")"
+          converted.hsl = converted.hsl = "hsl(" + hsl.hue + ", " + hsl.saturation + "%, " + hsl.lightness + "%)"
+        } else if (rgbaRegex.test(inputLine)) {
+          // extract the values for red, green, blue, alpha.
+          let alphaIndex = 3
+          let rgbaStrArray = inputLine.split(',')
+          if (rgbaStrArray.length !== 4) {
+            alphaIndex = 4
+            rgbaStrArray = inputLine.split(' ')
+          }
+          let red = Number.parseInt(rgbaStrArray[0].replace('rgb(', '').replace('rgba(', '').trim())
+          let green = Number.parseInt(rgbaStrArray[1].trim())
+          let blue = Number.parseInt(rgbaStrArray[2].trim())
+          let alpha = rgbaStrArray[alphaIndex].replace(')', '').trim()
+          if (alpha > 1) { alpha /= 100 }
+
+          hsl = Color.rgbToHsl(red, green, blue)
+
+          converted.hex = "#" + Color.rgbaToHexa(red, green, blue, alpha)
+          converted.rgb = "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")"
+          converted.hsl = "hsla(" + hsl.hue + ", " + hsl.saturation + "%, " + hsl.lightness + "%, " + alpha + ")"
+        }
+
+        if (hslRegex.test(inputLine)) {
+          // extract the values for hue, saturation, lightness.
+          let hslStrArray = inputLine.split(',')
+          if (hslStrArray.length !== 3) {
+            hslStrArray = inputLine.split(' ')
+          }
+          let hue = hslStrArray[0].replace('hsl(', '').trim()
+          let saturation = hslStrArray[1].replace('%', '').trim()
+          let lightness = hslStrArray[2].replace('%', '').replace(')', '').trim()
+
+          rgb = Color.hslToRgb(hue, saturation, lightness)
+
+          converted.hex = "#" + Color.hslToHex(hue, saturation, lightness)
+          converted.rgb = "rgb(" + rgb.red + ", " + rgb.green + ", " + rgb.blue + ")"
+          converted.hsl = "hsl(" + hue + ", " + saturation + "%, " + lightness + "%)"
+        } else if (hslaRegex.test(inputLine)) {
+          // extract the values for hue, saturation, lightness, alpha.
+          let alphaIndex = 3
+          let hslaStrArray = inputLine.split(',')
+          if (hslaStrArray.length !== 4) {
+            alphaIndex = 4
+            hslaStrArray = inputLine.split(' ')
+          }
+          let hue = hslaStrArray[0].replace('hsl(', '').replace('hsla(', '').trim()
+          let saturation = hslaStrArray[1].replace('%', '').trim()
+          let lightness = hslaStrArray[2].replace('%', '').trim()
+          let alpha = hslaStrArray[alphaIndex].replace(')', '').trim()
+          if (alpha > 1) { alpha /= 100 }
+
+          rgb = Color.hslaToRgba(hue, saturation, lightness, alpha)
+
+          converted.hex = "#" + Color.hslaToHexa(hue, saturation, lightness, alpha)
+          converted.rgb = "rgb(" + rgb.red + ", " + rgb.green + ", " + rgb.blue + ", " + alpha + ")"
+          converted.hsl = "hsla(" + hue + ", " + saturation + "%, " + lightness + "%, " + alpha + ")"
+        }
+
+        convertedColors.value.push(converted)
+      }
+    }
+
+    function updateClipboard (text) {
+      clipboard.writeText(text).then(() => {
+        showErrorMessage = false
+        showStatusMessage = true
+        setTimeout(() => {
+          showStatusMessage = false
+        }, 1000)
+      })
+      .catch(() => {
+        showStatusMessage = false
+        showErrorMessage = true
+        setTimeout(() => {
+          showErrorMessage = false
+        }, 1000)
+      })
+    }
+
+    return {
+      inputBox,
+      convertedColors,
+      showStatusMessage,
+      showErrorMessage,
+      batchConvert,
+      updateClipboard,
+    }
+  },
+})
+</script>
+
+<style>
+@import './assets/base.css'
+
+</style>
--- a/src/App.vue.old
+++ b/src/App.vue.old
@@ -0,0 +1,81 @@
+<script setup>
+import HelloWorld from './components/HelloWorld.vue'
+import TheWelcome from './components/TheWelcome.vue'
+</script>
+
+<template>
+  <header>
+    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
+
+    <div class="wrapper">
+      <HelloWorld msg="You did it!" />
+    </div>
+  </header>
+
+  <main>
+    <TheWelcome />
+  </main>
+</template>
+
+<style>
+@import './assets/base.css';
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+
+  font-weight: normal;
+}
+
+header {
+  line-height: 1.5;
+}
+
+.logo {
+  display: block;
+  margin: 0 auto 2rem;
+}
+
+a,
+.green {
+  text-decoration: none;
+  color: hsla(160, 100%, 37%, 1);
+  transition: 0.4s;
+}
+
+@media (hover: hover) {
+  a:hover {
+    background-color: hsla(160, 100%, 37%, 0.2);
+  }
+}
+
+@media (min-width: 1024px) {
+  body {
+    display: flex;
+    place-items: center;
+  }
+
+  #app {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    padding: 0 2rem;
+  }
+
+  header {
+    display: flex;
+    place-items: center;
+    padding-right: calc(var(--section-gap) / 2);
+  }
+
+  header .wrapper {
+    display: flex;
+    place-items: flex-start;
+    flex-wrap: wrap;
+  }
+
+  .logo {
+    margin: 0 2rem 0 0;
+  }
+}
+</style>
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -0,0 +1,55 @@
+.grid-container {
+    @apply grid grid-flow-row grid-rows-1 grid-cols-1 gap-8;
+    /*display: grid;*/
+    /*grid-template-columns: 1fr;*/
+    /*grid-template-rows: 1fr;*/
+    /*gap: 2em 2em;*/
+    /*grid-auto-flow: row;*/
+    grid-template-areas:
+        "wrapper";
+}
+
+.wrapper {
+    @apply grid grid-flow-row grid-cols-1 gap-8;
+    /*display: grid;*/
+    /*grid-template-columns: 1fr;*/
+    grid-template-rows: auto 1fr auto;
+    /*gap: 2em 2em;*/
+    /*grid-auto-flow: row;*/
+    grid-template-areas:
+        "grid-header"
+        "grid-main"
+        "grid-footer";
+    grid-area: wrapper;
+}
+
+.grid-header {
+    @apply p-6;
+    grid-area: grid-header;
+}
+
+.grid-main {
+    @apply grid grid-flow-col grid-rows-1 gap-8;
+    /*display: grid;*/
+    grid-template-columns: 30% 1fr;
+    /*grid-template-rows: 1fr;*/
+    /*gap: 2em 2em;*/
+    /*grid-auto-flow: row;*/
+    grid-template-areas:
+        "input-container output-wrapper";
+    grid-area: grid-main;
+}
+
+.input-container {
+    grid-area: input-container;
+}
+
+.output-wrapper {
+    grid-area: output-wrapper;
+}
+
+.grid-footer {
+    @apply p-6;
+    grid-area: grid-footer;
+}
+
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -0,0 +1,43 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      You’ve successfully created a project with
+      <a target="_blank" href="https://vitejs.dev/">Vite</a> +
+      <a target="_blank" href="https://vuejs.org/">Vue 3</a>.
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -0,0 +1,84 @@
+<script setup>
+import WelcomeItem from './WelcomeItem.vue'
+import DocumentationIcon from './icons/IconDocumentation.vue'
+import ToolingIcon from './icons/IconTooling.vue'
+import EcosystemIcon from './icons/IconEcosystem.vue'
+import CommunityIcon from './icons/IconCommunity.vue'
+import SupportIcon from './icons/IconSupport.vue'
+</script>
+
+<template>
+  <WelcomeItem>
+    <template #icon>
+      <DocumentationIcon />
+    </template>
+    <template #heading>Documentation</template>
+
+    Vue’s
+    <a target="_blank" href="https://vuejs.org/">official documentation</a>
+    provides you with all information you need to get started.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <ToolingIcon />
+    </template>
+    <template #heading>Tooling</template>
+
+    This project is served and bundled with
+    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
+    setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
+    your components and web pages, check out
+    <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
+    <a href="https://docs.cypress.io/guides/component-testing/introduction" target="_blank"
+      >Cypress Component Testing</a
+    >.
+
+    <br />
+
+    More instructions are available in <code>README.md</code>.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <EcosystemIcon />
+    </template>
+    <template #heading>Ecosystem</template>
+
+    Get official tools and libraries for your project:
+    <a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
+    <a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
+    <a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
+    <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
+    resources, we suggest paying
+    <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
+    a visit.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <CommunityIcon />
+    </template>
+    <template #heading>Community</template>
+
+    Got stuck? Ask your question on
+    <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
+    <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
+    You should also subscribe to
+    <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
+    <a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
+    twitter account for latest news in the Vue world.
+  </WelcomeItem>
+
+  <WelcomeItem>
+    <template #icon>
+      <SupportIcon />
+    </template>
+    <template #heading>Support Vue</template>
+
+    As an independent project, Vue relies on community backing for its sustainability. You can help
+    us by
+    <a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
+  </WelcomeItem>
+</template>
--- a/src/components/WelcomeItem.vue
+++ b/src/components/WelcomeItem.vue
@@ -0,0 +1,86 @@
+<template>
+  <div class="item">
+    <i>
+      <slot name="icon"></slot>
+    </i>
+    <div class="details">
+      <h3>
+        <slot name="heading"></slot>
+      </h3>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.item {
+  margin-top: 2rem;
+  display: flex;
+}
+
+.details {
+  flex: 1;
+  margin-left: 1rem;
+}
+
+i {
+  display: flex;
+  place-items: center;
+  place-content: center;
+  width: 32px;
+  height: 32px;
+
+  color: var(--color-text);
+}
+
+h3 {
+  font-size: 1.2rem;
+  font-weight: 500;
+  margin-bottom: 0.4rem;
+  color: var(--color-heading);
+}
+
+@media (min-width: 1024px) {
+  .item {
+    margin-top: 0;
+    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
+  }
+
+  i {
+    top: calc(50% - 25px);
+    left: -26px;
+    position: absolute;
+    border: 1px solid var(--color-border);
+    background: var(--color-background);
+    border-radius: 8px;
+    width: 50px;
+    height: 50px;
+  }
+
+  .item:before {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    bottom: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:after {
+    content: ' ';
+    border-left: 1px solid var(--color-border);
+    position: absolute;
+    left: 0;
+    top: calc(50% + 25px);
+    height: calc(50% - 25px);
+  }
+
+  .item:first-of-type:before {
+    display: none;
+  }
+
+  .item:last-of-type:after {
+    display: none;
+  }
+}
+</style>
--- a/src/components/icons/IconCommunity.vue
+++ b/src/components/icons/IconCommunity.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconDocumentation.vue
+++ b/src/components/icons/IconDocumentation.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
+    <path
+      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconEcosystem.vue
+++ b/src/components/icons/IconEcosystem.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
+    <path
+      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconSupport.vue
+++ b/src/components/icons/IconSupport.vue
@@ -0,0 +1,7 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
+    <path
+      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
+    />
+  </svg>
+</template>
--- a/src/components/icons/IconTooling.vue
+++ b/src/components/icons/IconTooling.vue
@@ -0,0 +1,19 @@
+<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    class="iconify iconify--mdi"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>
--- a/src/converters/hex.js
+++ b/src/converters/hex.js
@@ -0,0 +1,52 @@
+import { sanitizeAlphaFloat } from '../helpers'
+
+const hexToRgb = (hexString) => {
+  let hex = 'ffffff'
+  if (hexString.length === 3) {
+    hex = ''
+    hex += hexString.substr(2, 1) + hexString.substr(2, 1)
+    hex += hexString.substr(1, 1) + hexString.substr(1, 1)
+    hex += hexString.substr(0, 1) + hexString.substr(0, 1)
+  } else {
+    hex = hexString
+  }
+
+  let bigint = Number.parseInt(hex, 16)
+  let redNum = (bigint >> 16) & 255
+  let greenNum = (bigint >> 8) & 255
+  let blueNum = bigint & 255
+
+  return { "red": redNum, "green": greenNum, "blue": blueNum }
+}
+
+const hexaToRgba = (hexString) => {
+  let hex = 'ffffff'
+  let alphaHex = 'ff'
+  let alpha = 1
+
+  if (hexString.length === 4) {
+    alphaHex = hexString.substr(3, 1) + hexString.substr(3, 1)
+    hex = ''
+    hex += hexString.substr(2, 1) + hexString.substr(2, 1)
+    hex += hexString.substr(1, 1) + hexString.substr(1, 1)
+    hex += hexString.substr(0, 1) + hexString.substr(0, 1)
+  } else {
+    alphaHex = hexString.substr(6, 2)
+    hex = hexString.substr(0, 6)
+  }
+
+  let rgb = hexToRgb(hex)
+  alpha = Number.parseFloat((Number.parseInt(alphaHex, 16) / 255)).toFixed(1)
+
+  return { "red": rgb.red, "green": rgb.green, "blue": rgb.blue, "alpha": alpha }
+}
+
+const hexToHsl = (hexString) => {
+  console.error('hex to HSL not implemented yet')
+}
+
+const hexaToHsla = (hexString) => {
+  console.error('hexa to HSLa not implemented yet')
+}
+
+export { hexToRgb, hexaToRgba, hexToHsl, hexaToHsla }
--- a/src/converters/hsl.js
+++ b/src/converters/hsl.js
@@ -0,0 +1,81 @@
+import { sanitizeAlphaFloat } from '../helpers'
+
+const hslToHex = (hue, saturation, lightness) => {
+  let rgb = hslToRgb(hue, saturation, lightness)
+  let red = rgb.red.toString(16)
+  let green = rgb.green.toString(16)
+  let blue = rgb.blue.toString(16)
+
+  if (red.length === 1) { red = "0" + red }
+  if (green.length === 1) { green = "0" + green }
+  if (blue.length === 1) { blue = "0" + blue }
+
+  return "" + red + green + blue
+}
+
+const hslaToHexa = (hue, saturation, lightness, alpha) => {
+  let rgb = hslToRgb(hue, saturation, lightness)
+  let red = rgb.red.toString(16)
+  let green = rgb.green.toString(16)
+  let blue = rgb.blue.toString(16)
+  let alphaHex = Math.round(sanitizeAlphaFloat(alpha) * 255).toString(16)
+
+  if (red.length === 1) { red = "0" + red }
+  if (green.length === 1) { green = "0" + green }
+  if (blue.length === 1) { blue = "0" + blue }
+
+  return "" + red + green + blue + alphaHex
+}
+
+const hslToRgb = (hue, saturation, lightness) => {
+  if (hue === 360) { hue = 0 }
+  if (hue < 0) { hue += 360 }
+
+  saturation /= 100
+  lightness /= 100
+
+  let chroma = (1 - Math.abs(2 * lightness - 1)) * saturation,
+    xComponent = chroma * (1 - Math.abs((hue / 60) % 2 - 1)),
+    lightnessMatch = lightness - (chroma / 2),
+    red = 0,
+    green = 0,
+    blue = 0
+
+  // set red and green if hue between 0 and 119
+  if (0 <= hue && hue < 60) {
+    red = chroma
+    green = xComponent
+  } else if (60 <= hue && hue < 120) {
+    red = xComponent
+    green = chroma
+  }
+  // set green and blue if hue between 120 and 239
+  else if (120 <= hue && hue < 180) {
+    green = chroma
+    blue = xComponent
+  } else if (180 <= hue && hue < 240) {
+    green = xComponent
+    blue = chroma
+  }
+  // set red and blue if hue between 0 and 119
+  else if (240 <= hue && hue < 300) {
+    red = xComponent
+    blue = chroma
+  } else if (300 <= hue && hue < 360) {
+    red = chroma
+    blue = xComponent
+  }
+
+  red = Math.round((red + lightnessMatch) * 255)
+  green = Math.round((green + lightnessMatch) * 255)
+  blue = Math.round((blue + lightnessMatch) * 255)
+
+  return { "red": red, "green": green, "blue": blue }
+}
+
+const hslaToRgba = (hue, saturation, lightness, alpha) => {
+  let rgb = hslToRgb(hue, saturation, lightness)
+  return { "red": rgb.red, "green": rgb.green, "blue": rgb.blue, "alpha": sanitizeAlphaFloat(alpha) }
+}
+
+export { hslToHex, hslaToHexa, hslToRgb, hslaToRgba }
--- a/src/converters/index.js
+++ b/src/converters/index.js
@@ -0,0 +1,11 @@
+import { hexToRgb, hexaToRgba, hexToHsl, hexaToHsla } from './hex.js'
+import { hslToHex, hslaToHexa, hslToRgb, hslaToRgba } from './hsl.js'
+import { rgbToHex, rgbaToHexa, rgbToHsl, rgbaToHsla } from './rgb.js'
+
+const Color = { 
+  hexToRgb, hexaToRgba, hexToHsl, hexaToHsla,
+  hslToHex, hslaToHexa, hslToRgb, hslaToRgba,
+  rgbToHex, rgbaToHexa, rgbToHsl, rgbaToHsla,
+}
+
+export { Color }
--- a/src/converters/rgb.js
+++ b/src/converters/rgb.js
@@ -0,0 +1,66 @@
+import { sanitizeAlphaFloat } from '../helpers'
+
+const rgbToHex = (redNum, greenNum, blueNum) => {
+  let red = redNum.toString(16)
+  let green = greenNum.toString(16)
+  let blue = blueNum.toString(16)
+
+  if (red.length === 1) { red = "0" + red }
+  if (green.length === 1) { green = "0" + green }
+  if (blue.length === 1) { blue = "0" + blue }
+  return "" + red + green + blue
+}
+
+const rgbaToHexa = (redNum, greenNum, blueNum, alphaNum) => {
+  let hex = rgbToHex(redNum, greenNum, blueNum)
+  let alpha = Math.round(sanitizeAlphaFloat(alphaNum) * 255).toString(16)
+  if (alpha.length == 1) { alpha = "0" + alpha }
+  return hex + alpha
+}
+
+const rgbToHsl = (redNum, greenNum, blueNum) => {
+  let hue = 0, saturation = 0, lightness = 0
+
+  let redFrac = Number.parseFloat(redNum / 255),
+    greenFrac = Number.parseFloat(greenNum / 255),
+    blueFrac = Number.parseFloat(blueNum / 255)
+
+  let channelMin = Math.min(redFrac, blueFrac, greenFrac),
+    channelMax = Math.max(redFrac, blueFrac, greenFrac),
+    delta = channelMax - channelMin
+
+  if (delta === 0) { hue = 0 }
+  // Red is the maximum color
+  else if (channelMax === redFrac) {
+    hue = ((greenFrac - blueFrac) / delta) % 6
+  }
+  // Green is the maximum color
+  else if (channelMax === greenFrac) {
+    hue = (blueFrac - redFrac) / delta + 2
+  }
+  // Green is the maximum color
+  else {
+    hue = (redFrac - greenFrac) / delta + 4
+  }
+
+  hue = Math.round(hue * 60)
+  // Make negative hues positive behind 360°
+  if (hue < 0) { hue += 360 }
+
+  lightness = (channelMax + channelMin) / 2
+  if (delta === 0) { saturation = 0 }
+  else { saturation = delta / (1 - Math.abs(2 * lightness - 1)) }
+
+  lightness = +(lightness * 100).toFixed(1)
+  saturation = +(saturation * 100).toFixed(1)
+
+  return { "hue": hue, "saturation": saturation, "lightness": lightness }
+}
+
+const rgbaToHsla = (redNum, greenNum, blueNum, alphaNum) => {
+  let hsl = rgbToHsl(redNum, greenNum, blueNum)
+  hsl.alpha = sanitizeAlphaFloat(alphaNum)
+  return hsl
+}
+
+export { rgbToHex, rgbaToHexa, rgbToHsl, rgbaToHsla }
--- a/src/helpers/index.js
+++ b/src/helpers/index.js
@@ -0,0 +1,13 @@
+const sanitizeAlphaFloat = (alphaRaw) => {
+  let alpha = Number.parseFloat(1)
+
+  if (alphaRaw >= 0 && alphaRaw <= 1) {
+    alpha = Number.parseFloat(alphaRaw)
+  } else if (alphaRaw < 0) {
+    alpha = Number.parseFloat(0)
+  }
+
+  return alpha.toFixed(1)
+}
+
+export { sanitizeAlphaFloat }
--- a/src/index.css
+++ b/src/index.css
@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
@font-face {
    font-family: "Open Sans";
    src: url(../fonts/OpenSans/OpenSans-Regular.woff2) format("woff2");
--- a/src/main.js
+++ b/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+
+createApp(App).mount('#app')
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,15 @@
+module.exports = {
+  darkMode: "class",
+
+  content: [
+    "./index.html",
+    "./index.php",
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
+
+  theme: {
+    extend: {},
+  },
+
+  plugins: [],
+}
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from 'url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})
Author	SHA1	Message	Date
Brian Rogers	b023279be5	added TailwindCSS and got it working as it was before	2022-03-24 14:24:30 -06:00
Brian Rogers	9979483be8	updating public assets	2022-03-24 11:13:41 -06:00
Brian Rogers	522c027ae1	updating gitignore file	2022-03-24 11:13:28 -06:00
Brian Rogers	6d0a180fcd	redone with a default Vite app	2022-03-24 11:10:39 -06:00
Brian Rogers	8a6b843aea	wip: failed minor update, going to redo with some build tools	2022-03-24 11:02:21 -06:00
Brian Rogers	f9ffbcbec0	adding Sublime project and workspace files to ignore list	2022-03-24 11:01:53 -06:00
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69" xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>`