feat: Add demo page back index.html

examples/css/screen.css

@@ -22,7 +22,7 @@
 
 /* Base
  * *----------------------------------------------- */
-/** {
+* {
     box-sizing: border-box;
 }
 
@@ -31,10 +31,10 @@ body {
     padding: 0;
     background: var(--bg-color);
 }
-*/
+
 /* Typography
  * *----------------------------------------------- */
-/*
+
 html {
     font-size: 16px;
     font-family: var(--font);
@@ -64,10 +64,10 @@ code {
     font-family: var(--code-font);
     overflow-wrap: break-word;
 }
-*/
+
 
 /* -- Layout ------------------------------------------------------------------ */
-/*
+
 .image-section {
     border-bottom: 1px solid #ccc;
     padding: 16px 16px 32px 16px;
@@ -92,4 +92,4 @@ code {
 .time {
     color: var(--muted-color);
     font-weight: normal;
-}*/
+}

examples/js/demo.js

@@ -1,12 +1,9 @@
 var colorThief = new ColorThief();
 
 var images = [
-    'black.png',
-    'red.png',
-    'rainbow-horizontal.png',
-    'rainbow-vertical.png',
-    // 'transparent.png',
-    // 'white.png',
+    'image-1.jpg',
+    'image-2.jpg',
+    'image-3.jpg',
 ];
 
 // Render example images
@@ -28,9 +25,11 @@ document.querySelectorAll('.image').forEach((image) => {
 // Run Color Thief functions and display results below image.
 // We also log execution time of functions for display.
 const showColorsForImage = function(image, section) {
-    // getColor(img)
     let start = Date.now();
+
+    // 🎨🔓
     let result = colorThief.getColor(image);
+
     let elapsedTime = Date.now() - start;
     const colorHTML = Mustache.to_html(document.getElementById('color-tpl').innerHTML, {
         color: result,
@@ -40,10 +39,13 @@ const showColorsForImage = function(image, section) {
 
     // getPalette(img)
     let paletteHTML = '';
-    let colorCounts = [null, 1, 2, 3, 5, 7, 10, 20];
+    let colorCounts = [2, 9];
     colorCounts.forEach((count) => {
         let start = Date.now();
+
+        // 🎨🔓
         let result = colorThief.getPalette(image, count);
+
         let elapsedTime = Date.now() - start;
         paletteHTML += Mustache.to_html(document.getElementById('palette-tpl').innerHTML, {
             count,