add color palette background

thingbomb · Oct 26, 2024 · 58dc3b1 · 58dc3b1
1 parent a24823d
commit 58dc3b1
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 2 deletions.
diff --git a/src/public/background.js b/src/public/background.js
@@ -0,0 +1 @@
+chrome.runtime.setUninstallURL("https://tally.so/r/wQBroA");
diff --git a/src/public/manifest.json b/src/public/manifest.json
@@ -10,6 +10,9 @@
   "icons": {
     "128": "assets/logo.png"
   },
+  "background": {
+    "service_worker": "background.js"
+  },
   "browser_specific_settings": {
     "gecko": {
       "id": "{a8dbee0a-6f49-4d7e-9d47-e6ed2c3d9b4f}"

diff --git a/src/src/App.jsx b/src/src/App.jsx
@@ -113,6 +113,15 @@ const images = [
   "https://utfs.io/f/BtV2EpuEtuKGAX7iBsv9MEizApkbr0v75YD1yZohGC4fSatT",
 ];
 
+const colors = [
+  "#61a5c2",
+  "#c8b6ff",
+  "#d1495b",
+  "#70a288",
+  "#3ab795",
+  "#ff9770",
+];
+
 function App() {
   const [time, setTime] = useState(new Date());
   const [selectedImage, setSelectedImage] = useState({});
@@ -122,6 +131,9 @@ function App() {
   const [tasks, setTasks] = useState([]);
   const [taskInput, setTaskInput] = useState("");
   const [rendered, setRendered] = useState(false);
+  const [background, setBackground] = useState(
+    localStorage.getItem("background") || "wallpaper"
+  );
 
   useEffect(() => {
     const loadTasks = async () => {
@@ -212,7 +224,11 @@ function App() {
 
   useEffect(() => {
     if (!rendered) {
-      checkCachedImage();
+      if (background === "color") {
+        console.log(background);
+      } else {
+        checkCachedImage();
+      }
     }
   }, [rendered]);
 
@@ -228,8 +244,14 @@ function App() {
       style={{
         backgroundImage: `url(${
           selectedImage.url ||
-          "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJQA1wMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAIBABAQEAAQQDAQEAAAAAAAAAAAERMRIhQVECYXEikf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDh0OBAavyvtEABUAUAJc4LbeUAVFAQFAWfKzyyA1ylRQQVAF4EBrqvipyiggoCCwBBQEBQFl+p/iWoC1BewIKAizsIDd+W+GUXQQXlAAUCXPC9TIAKAgKBF1NQGr3GQBZnkQGr0sigguIACzAWZ5LnhkAFAQFwEanSlQFqKAgACzPJgDX84zeeyKCCoAAAKgAAKvTvmIgLmVFMBAAUncwBenJuxEXsCAAAoEm+lvxzzEQAXsAgAKs+O+UALMBAWU5Dj9Ay+qL1VKCAAAApx4Jc4Xd5BKgAAAumX0eFnysBOC03f0BAAFReAMvqi9VTkEAAABagAKgC8osa6vwGQvdAAAU8Is7UEVer8QBAAWIAtFlz0b9QERUAABUXFlwEFt0BBFgIq3p+2QVAAVAFFmeS54BEABUAURr+fsEC541AAAXRFgIuNfz9s36A1AAABRAFEAXEGunQReEvZAVABeRF5BFxentygAgCiAAsmrfjnkENQAVAFxFXp3yDItmAGINcgyLl9GgCALCxFlBBcAMDUBYIAqLpl9AinAAgAqCgguX0cAYgAogAs5AFvyvtkAAAAAWWzhbbeQBkAAABqW+wBLygAAAAA1tk5ZAAAAAH/9k="
+          (background == "wallpaper"
+            ? "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAJQA1wMBIgACEQEDEQH/xAAXAAEBAQEAAAAAAAAAAAAAAAAAAQIH/8QAIBABAQEAAQQDAQEAAAAAAAAAAAERMRIhQVECYXEikf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwDh0OBAavyvtEABUAUAJc4LbeUAVFAQFAWfKzyyA1ylRQQVAF4EBrqvipyiggoCCwBBQEBQFl+p/iWoC1BewIKAizsIDd+W+GUXQQXlAAUCXPC9TIAKAgKBF1NQGr3GQBZnkQGr0sigguIACzAWZ5LnhkAFAQFwEanSlQFqKAgACzPJgDX84zeeyKCCoAAAKgAAKvTvmIgLmVFMBAAUncwBenJuxEXsCAAAoEm+lvxzzEQAXsAgAKs+O+UALMBAWU5Dj9Ay+qL1VKCAAAApx4Jc4Xd5BKgAAAumX0eFnysBOC03f0BAAFReAMvqi9VTkEAAABagAKgC8osa6vwGQvdAAAU8Is7UEVer8QBAAWIAtFlz0b9QERUAABUXFlwEFt0BBFgIq3p+2QVAAVAFFmeS54BEABUAURr+fsEC541AAAXRFgIuNfz9s36A1AAABRAFEAXEGunQReEvZAVABeRF5BFxentygAgCiAAsmrfjnkENQAVAFxFXp3yDItmAGINcgyLl9GgCALCxFlBBcAMDUBYIAqLpl9AinAAgAqCgguX0cAYgAogAs5AFvyvtkAAAAAWWzhbbeQBkAAABqW+wBLygAAAAA1tk5ZAAAAAH/9k="
+            : "")
         })`,
+        backgroundColor:
+          background === "color"
+            ? colors[Math.floor(Math.random() * colors.length)]
+            : "#000000",
         transition: "background-image 1s ease-in-out",
       }}
       id="app"
@@ -316,6 +338,26 @@ function App() {
           >
             Serif
           </DropdownMenuItem>
+          <DropdownMenuLabel>Background</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() => {
+              setBackground("wallpaper");
+              localStorage.setItem("background", "wallpaper");
+              window.location.reload();
+            }}
+          >
+            Wallpaper
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            onClick={() => {
+              setBackground("color");
+              localStorage.setItem("background", "color");
+              window.location.reload();
+            }}
+          >
+            Color Palette
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
       <Popover>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		chrome.runtime.setUninstallURL("https://tally.so/r/wQBroA");