Merge branch 'Main' into FinanceTracker

index.js

@@ -164,13 +164,13 @@ function fillTable() {
         ["Day 93","TextUtils", "/public/Textutils/src/App.js"],
         ["Day 94","Hangman Game","./public/HangmanGame/index.html"],
         ["Day 95","TodoList in React TS Tailwind","./public/TodoList-React-TS-Tailwind/index.html"],
+        ["Day 96","HCL Color Generator","./public/HCL Color Generator/index.html"],
       ["Day 96","HCL Color Generator","./public/HCL Color Generator/index.html"],
-
       ["Day 97","Time Capsule","public/Time-Capsule/index.html"],
          ["Day 98","Virtual Piano","./public/Virtual Piano/index.html"],
-
-      ["Day 100","Personal Finance Tracker","./public/FinanceTracker/index.html"]
-
+      ["Day 99","NASA-APOD Extension","./public/NASA-APOD/popup.html"],
+      ["Day 100","Text Saver Extension","public/Text_Saver_Ext/popup.html"],
+      ["Day 101","Personal Finance Tracker","./public/FinanceTracker/index.html"]
     ];
 
     const tbody = document.getElementById('tableBody');

public/NASA-APOD/background.js

@@ -0,0 +1,14 @@
+chrome.runtime.onInstalled.addListener(() => {
+    chrome.storage.local.set({ lastPopupDate: null });
+  });
+
+  chrome.tabs.onCreated.addListener(() => {
+    const today = new Date().toISOString().split('T')[0]; // Format: YYYY-MM-DD
+    chrome.storage.local.get("lastPopupDate", ({ lastPopupDate }) => {
+      if (lastPopupDate !== today) {
+        chrome.storage.local.set({ lastPopupDate: today });
+        chrome.action.openPopup(); // Open the popup
+      }
+    });
+  });
+

public/NASA-APOD/manifest.json

@@ -0,0 +1,24 @@
+{
+    "manifest_version": 3,
+    "name": "APOD",
+    "version": "1.0",
+    "description": "Displays the Astronomy Picture of the Day when the first tab of the day is opened.",
+    "permissions": ["storage", "activeTab", "scripting"],
+    "background": {
+      "service_worker": "background.js"
+    },
+    "action": {
+      "default_popup": "popup.html",
+      "default_icon": {
+        "16": "icon16.png",
+        "48": "icon48.png",
+        "128": "icon128.png"
+      }
+    },
+    "icons": {
+      "16": "icon16.png",
+      "48": "icon48.png",
+      "128": "icon128.png"
+    }
+  }
+

public/NASA-APOD/popup.css

@@ -0,0 +1,257 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+  }
+
+  body {
+    font-family: 'Segoe UI', system-ui, sans-serif;
+    width: 400px;
+    background: #0f172a;
+    color: #e2e8f0;
+    overflow-x: hidden;
+  }
+
+  #content {
+    position: relative;
+  }
+
+  .header {
+    background: rgba(15, 23, 42, 0.9);
+    padding: 1rem;
+    position: sticky;
+    top: 0;
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid #1e293b;
+    z-index: 10;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .search-container {
+    display: flex;
+    gap: 0.5rem;
+    flex: 1;
+  }
+
+  .date-input {
+    flex: 1;
+    padding: 0.5rem;
+    border: 1px solid #1e293b;
+    border-radius: 0.25rem;
+    background: #1e293b;
+    color: #e2e8f0;
+    font-size: 0.9rem;
+  }
+
+  .date-input::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+    cursor: pointer;
+  }
+
+  .search-btn, .nav-btn {
+    background: none;
+    border: none;
+    color: #60a5fa;
+    font-size: 1.2rem;
+    cursor: pointer;
+    padding: 0.5rem;
+    transition: transform 0.2s ease;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 0.25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .search-btn:hover, .nav-btn:hover {
+    background: #1e293b;
+    transform: scale(1.05);
+  }
+
+  .nav-btn.active i {
+    color: #fbbf24;
+    font-weight: 900;
+  }
+
+  .title {
+    font-size: 1.5rem;
+    font-weight: 600;
+    background: linear-gradient(45deg, #60a5fa, #a855f7);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin: 1rem;
+    text-align: center;
+  }
+
+  .image-container {
+    position: relative;
+    width: 100%;
+    height: 250px;
+    overflow: hidden;
+  }
+
+  #image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: all 0.5s ease-in-out;
+    opacity: 1;
+  }
+
+  #image.loading {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+
+  #image:hover {
+    transform: scale(1.05);
+  }
+
+  .description-container {
+    padding: 1rem;
+    background: #1e293b;
+    border-radius: 0.5rem;
+    margin: 1rem;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  #description {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: #94a3b8;
+  }
+
+  .bookmarks-title {
+    font-size: 1.2rem;
+    margin: 1rem;
+    color: #e2e8f0;
+    text-align: center;
+  }
+
+  .bookmarks-list {
+    padding: 1rem;
+  }
+
+  .bookmark-item {
+    background: #1e293b;
+    border-radius: 0.5rem;
+    padding: 1rem;
+    margin-bottom: 1rem;
+    cursor: pointer;
+    transition: transform 0.2s ease;
+  }
+
+  .bookmark-item:hover {
+    transform: translateX(5px);
+  }
+
+  .bookmark-date {
+    font-size: 0.9rem;
+    color: #60a5fa;
+    margin-bottom: 0.5rem;
+  }
+
+  .bookmark-title {
+    font-size: 1rem;
+    color: #e2e8f0;
+    margin-bottom: 0.5rem;
+  }
+
+  .bookmark-description {
+    font-size: 0.8rem;
+    color: #94a3b8;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .hidden {
+    display: none;
+  }
+
+ @keyframes fadeIn {
+  from { 
+    opacity: 0; 
+    transform: translateY(10px);
+  }
+  to { 
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-out forwards;
+}
+
+.loader-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(15, 23, 42, 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 100;
+    backdrop-filter: blur(0px);
+    transition: all 0.3s ease-in-out;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .loader-overlay.visible {
+    background: rgba(15, 23, 42, 0.9);
+    backdrop-filter: blur(4px);
+    opacity: 1;
+    pointer-events: all;
+  }
+
+  .loader {
+    width: 48px;
+    height: 48px;
+    border: 4px solid #1e293b;
+    border-top: 4px solid #60a5fa;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    transform: scale(0.5);
+    opacity: 0;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .loader-overlay.visible .loader {
+    transform: scale(1);
+    opacity: 1;
+  }
+
+  .content-container {
+    opacity: 1;
+    transform: translateY(0);
+    transition: all 0.3s ease-in-out;
+  }
+
+  .content-container.loading {
+    opacity: 0.5;
+    transform: translateY(10px);
+  }
+
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+
+  .loading {
+    position: relative;
+  }
+
+  /* Update this existing class to handle loader positioning */
+  #main-view {
+    position: relative;
+    min-height: 200px;
+  }

public/NASA-APOD/popup.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>APOD Explorer</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div id="content">
+    <div class="header">
+      <div class="search-container">
+        <input type="date" id="date-search" class="date-input">
+        <button id="search-btn" class="search-btn">
+          <i class="fas fa-search"></i>
+        </button>
+      </div>
+      <button id="bookmarks-list-btn" class="nav-btn">
+        <i class="fas fa-list"></i>
+      </button>
+      <button id="bookmark-btn" class="nav-btn">
+        <i class="far fa-star"></i>
+      </button>
+    </div>
+
+
+<div id="main-view">
+    <div id="loader" class="loader-overlay">
+      <div class="loader"></div>
+    </div>
+    <div class="content-container">
+      <h1 id="title" class="title">Loading...</h1>
+      <div class="image-container fade-in">
+        <img id="image" alt="Astronomy Picture of the Day" src="/api/placeholder/400/250">
+      </div>
+      <div class="description-container fade-in">
+        <p id="description">Loading amazing space content...</p>
+      </div>
+    </div>
+  </div>
+
+    <div id="bookmarks-view" class="hidden">
+      <h2 class="bookmarks-title">Your Bookmarked Images</h2>
+      <div id="bookmarks-list" class="bookmarks-list">
+      </div>
+    </div>
+  </div>
+  <script src="popup.js"></script>
+</body>
+</html>