Remove dull gradients, add new ones

lizgw · Dec 3, 2017 · 6c258a8 · 6c258a8
1 parent 2af5473
commit 6c258a8
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 43 deletions.
diff --git a/manifest.json b/manifest.json
@@ -6,8 +6,8 @@
 	"author": "Liz Wigglesworth",
 	"description": "Turn the new tab page into a beautiful, minimal gradient.",
 
-	"version": "1.0.0",
-	"version_name": "v1.0.0",
+	"version": "1.0.1",
+	"version_name": "v1.0.1",
 
 	"icons": {
 		"16": "assets/images/appicon-16.png",

diff --git a/src/main.js b/src/main.js
@@ -8,67 +8,77 @@ var optionsElem = document.getElementById("options");
 // flags
 var showingOptions = false;
 var showWelcomeMsg = true;
+var debug = false;
+
+// colors
+var randNum = 0;
 
 // storage object for options
 var options = {};
 
 // a bunch of these are from https://webgradients.com/
 var colorPairs = [
-	["#acacac", "#171717"], // grey, black
-	["#ff6060", "#ff5050"], // red, pink
-	["#fda085", "#f6d365"], // yellow, orange
-	["#246644", "#7dd04f"], // dark green, light green
-	["#ff88a7", "#c5aeff", "#aee5ff"], // pink, purple, blue
-	["#a18cd1", "#fbc2eb"], // purple
-	["#ff9a9e", "#fecfef"], // pink
-	["#fbc2eb", "#a6c1ee"], // blue, purple
-	["#8db8ff", "#a1e1ff"], // blue
-	["#bbff6d", "#7de08b"], // green [10]
-	["#43e97b", "#38f9d7"], // green, teal
-	["#5ee7df", "#b490ca"], // blue, purple
-	["#667eea", "#764ba2"], // deep purple
-	["#c995f0", "#dbcfff"], // lighter purple
-	["#6a11cb", "#2575fc"], // deep blue
-	["#fffa86", "#ffdd25"], // yellow, orange
-	["#d686ff", "#ffdd25"], // purple, orange
-	["#f33f58", "#ffdd25"], // red, orange
-	["#f33f58", "#8d25ff"], // red-pink, purple
-	["#3ff36e", "#8d25ff"], // green, purple [20]
-	["#3ff3da", "#8d25ff"], // light blue, purple
+	["#aca9a9", "#171717"], // 0 grey, black
+	["#ff6060", "#ff509a"], // 1 red, pink
+	["#fda085", "#f6d365"], // 2 yellow, orange
+	["#246644", "#7dd04f"], // 3 dark green, light green
+	["#ff88a7", "#c5aeff", "#aee5ff"], // 4 pink, purple, blue
+	["#a18cd1", "#fbc2eb"], // 5 purple
+	["#ff9a9e", "#fecfef"], // 6 pink
+	["#fbc2eb", "#a6c1ee"], // 7 blue, purple
+	["#8db8ff", "#a1e1ff"], // 8 blue
+	["#bbff6d", "#7de08b"], // 9 green
+	["#43e97b", "#38f9d7"], // 10 green, teal
+	["#5ee7df", "#b490ca"], // 11 blue, purple
+	["#667eea", "#764ba2"], // 12 deep purple
+	["#c995f0", "#dbcfff"], // 13 lighter purple
+	["#6a11cb", "#2575fc"], // 14 deep blue
+	["#fffa86", "#ffdd25"], // 15 yellow, orange
+	["#d686ff", "#ffdd25"], // 16 purple, orange
+	["#f33f58", "#ffdd25"], // 17 red, orange
+	["#f33f58", "#8d25ff"], // 18 red-pink, purple
+	["#3ff36e", "#8d25ff"], // 19 green, purple
+	["#3ff3da", "#8d25ff"], // 20 light blue, purple
 	["#7dded1", "#61e2a1"], // muted blue,  muted green
 	["#d47dde", "#f5c070"], // muted purple,  muted orange
 	["#84fab0", "#8fd3f4"], // light green,  light blue (012 tempting azure)
 	["#8a81fe", "#51d7f4"], // light purple,  medium teal - brand color**
-	["#A1FFCE", "#ffd1e8"], // https://uigradients.com/#Limeade
+	["#A1FFCE", "#ffd1e8"], // 25 https://uigradients.com/#Limeade
 	["#fceabb", "#f8b500"], // https://uigradients.com/#SunontheHorizon
-	["#f85032", "#e73827"], // https://uigradients.com/#BloodRed
-	["#000428", "#839300"], // https://uigradients.com/#Frost
-	["#42275a", "#734b6d"], // https://uigradients.com/#Mauve [30]
-	["#3c536a", "#FD746C"], // modified https://uigradients.com/#Dusk
+	["#42275a", "#734b6d"], // https://uigradients.com/#Mauve
 	["#e96443", "#904e95"], // https://uigradients.com/#GrapefruitSunset
-	["#BA5370", "#F4E2D8"], // https://uigradients.com/#PurpleWhite
 	["#4CA1AF", "#C4E0E5"], // https://uigradients.com/#Decent
-	["#eacda3", "#d6ae7b"], // https://uigradients.com/#PaleWood
+	["#eacda3", "#d6ae7b"], // 30 https://uigradients.com/#PaleWood
 	["#B24592", "#F15F79"], // https://uigradients.com/#Blush
 	["#c2e59c", "#64b3f4"], // https://uigradients.com/#GreenandBlue
 	["#73c646", "#8DC26F"], // modified https://uigradients.com/#LittleLeaf
 	["#673AB7", "#512DA8"], // https://uigradients.com/#DeepPurple
-	["#ee9ca7", "#ffdde1"], // https://uigradients.com/#Piglet [40]
-	["#D1913C", "#FFD194"], // https://uigradients.com/#KokoCaramel
-	["#ab9eb6", "#203714"], // modified https://uigradients.com/#TalkingToMiceElf
+	["#ee9ca7", "#ffdde1"], // 35 https://uigradients.com/#Piglet
 	["#83a4d4", "#b6fbff"], // https://uigradients.com/#Friday
-	["#70e1f5", "#ffd194"], // https://uigradients.com/#Shore
 	["#9D50BB", "#6E48AA"], // https://uigradients.com/#Amethyst
 	["#FBD3E9", "#BB377D"], // https://uigradients.com/#Cherryblossoms
 	["#B993D6", "#8CA6DB"], // https://uigradients.com/#DirtyFog
-	["#00d2ff", "#3a7bd5"], // https://uigradients.com/#Reef
+	["#00d2ff", "#3a7bd5"], // 40 https://uigradients.com/#Reef
 	["#DE6262", "#FFB88C"], // https://uigradients.com/#ALostMemory
-	["#f857a6", "#ff5858"], // https://uigradients.com/#DayTripper [50]
+	["#f857a6", "#ff5858"], // https://uigradients.com/#DayTripper
 	["#5f2c82", "#49a09d"], // https://uigradients.com/#CalmDarya
-	["#DAE2F8", "#D6A4A4"], // https://uigradients.com/#Moonrise
 	["#24C6DC", "#514A9D"], // https://uigradients.com/#Mantle
-	["#134E5E", "#71B280"], // https://uigradients.com/#Moss
-	["#614385", "#516395"] // https://uigradients.com/#Kashmir [55]
+	["#026471", "#71B280"], // 45 https://uigradients.com/#Moss
+	["#ff9a9e", "#fad0c4"], // https://digitalsynopsis.com/design/beautiful-color-gradients-backgrounds/
+	["#ffecd2", "#fcb69f"], //
+	["#ff9a9e", "#fecfef"], //
+	["#a1c4fd", "#c2e9fb"], //
+	["#667eea", "#764ba2"], // 50
+	["#89f7fe", "#66a6ff"], //
+	["#48c6ef", "#6f86d6"], //
+	["#a6f3fe", "#f6c4e2"], // modified
+	["#a3bded", "#6991c7"], //
+	["#ff758c", "#ff7eb3"], // 55
+	["#96deda", "#50c9c3"], //
+	["#B7F8DB", "#50A7C2"], //
+	["#9c77e9", "#03c6ca"], //
+	["#53b4cb", "#6c55b3"], //
+	["#34f0e0", "#dcf002"] // 60
 ];
 
 function updateTime() {
@@ -85,9 +95,16 @@ function updateDate() {
 	dateElem.textContent = moment().format("dddd, MMMM Do, YYYY");
 }
 
-function pickColors() {
-	// pick a random gradient from the array
-	var randNum = Math.floor(Math.random() * colorPairs.length);
+function pickColors(num) {
+// step through the colors if debugging
+	if (!debug) {
+		// pick a random gradient from the array
+		randNum = Math.floor(Math.random() * colorPairs.length);
+	}
+	else {
+		// use the one that was passed in
+		randNum = num;
+	}
 
 	// build a string from the colors
 	var colorString = "";
@@ -135,7 +152,7 @@ document.addEventListener("DOMContentLoaded", function() {
 
 	updateTime();
 	updateDate();
-	pickColors();
+	pickColors(0);
 
 	// show welcome message if necessary
 	//chrome.storage.sync.clear(); // test line to clear storage & see msg again