diff --git a/cypress/test-pages/index.html b/cypress/test-pages/index.html
index dc9bad8..9d7a3a5 100644
--- a/cypress/test-pages/index.html
+++ b/cypress/test-pages/index.html
@@ -28,7 +28,7 @@
{{colorStr}}
- {{elapsedTimeForGetColor}}ms
+ {{elapsedTime}}ms
@@ -43,7 +43,7 @@
{{paletteStr}}
- {{elapsedTimeForGetPalette}}ms
+ {{elapsedTime}}ms
diff --git a/examples/css/screen.css b/examples/css/screen.css
index 4caf9d7..bc1d830 100644
--- a/examples/css/screen.css
+++ b/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;
-}*/
+}
diff --git a/examples/img/image2.jpg b/examples/img/image-2.jpg
similarity index 100%
rename from examples/img/image2.jpg
rename to examples/img/image-2.jpg
diff --git a/examples/js/demo.js b/examples/js/demo.js
index 11f8acb..0ef7923 100644
--- a/examples/js/demo.js
+++ b/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,
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..7383844
--- /dev/null
+++ b/index.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Color Thief
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+