release/0.5 (#1)

* Added quote of the day widget, added vignette, fixed a lot of bugs

* Add version to a sidebar

Author: OldValencia

NewTabExtension.zip

@@ -1,7 +1,4 @@
 ![Main page](Screenshots/Main_page.png "Main page")
-![Sidebar, Main page with image from Pixabay](Screenshots/Sidebar,_Main_page_with_image_from_Pixabay.png "Sidebar, Main page with image from Pixabay")
-![Sticky notes functionality](Screenshots/Sticky_notes_functionality.png "Sticky notes functionality")
-![Weather widget](Screenshots/Weather_widget.png "Weather widget")
 ![Greeting, time and date format, sidebar](Screenshots/Greeting%2C_time_and_date_format%2C_sidebar.png "Greeting, time and date format, sidebar")
 
 # 🌌 New Tab Extension ([Addons.Mozilla.org](https://addons.mozilla.org/en-US/firefox/addon/new_tab_extension/))
@@ -50,6 +47,12 @@ To make the extension your homepage:
 - ⚡ Fast and lightweight - no performance impact
 - 🔒 Private — no data collection, no analytics
 
+
+![Sidebar, Main page with image from Pixabay](Screenshots/Sidebar,_Main_page_with_image_from_Pixabay.png "Sidebar, Main page with image from Pixabay")
+![Sticky notes functionality](Screenshots/Sticky_notes_functionality.png "Sticky notes functionality")
+![Weather widget](Screenshots/Weather_widget.png "Weather widget")
+![Quotes widget](Screenshots/Quote_with_customization.png "Quotes widget with customization")
+
 ---
 
 ## 💡 Developer Notes

README.md

@@ -14,6 +14,7 @@
     <link rel="stylesheet" href="styles/sticky-notes.style.css"/>
     <link rel="stylesheet" href="styles/weather.style.css"/>
     <link rel="stylesheet" href="styles/greeting.style.css"/>
+    <link rel="stylesheet" href="styles/quotes.style.css"/>
 
     <link href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&family=Lato&family=Quicksand&family=Fira+Sans&display=swap" rel="stylesheet">
 </head>
@@ -22,6 +23,7 @@
 <button id="add-sticky-note">➕ Add Sticky Note</button>
 
 <div id="background-layer"></div>
+<div id="vignette-layer"></div>
 
 <button id="menu-toggle" class="menu-button">☰</button>
 
@@ -215,6 +217,7 @@ <h4>Background Effects</h4>
                 <label>Blur: <input type="range" id="bg-blur" min="0" max="40" step="1" value="0"></label>
                 <label>Brightness: <input type="range" id="bg-brightness" min="20" max="150" step="1"
                                           value="100"></label>
+                <label>Vignette Intensity: <input type="range" id="bg-vignette" min="0" max="100" step="1" value="0"></label>
                 <label>Image Fit:
                     <select id="bg-fit">
                         <option value="cover">Cover</option>
@@ -299,13 +302,72 @@ <h3>Greeting widget</h3>
             </div>
         </div>
     </section>
+
+    <!-- 🗣️ Daily Quote Widget -->
+    <section data-section="quote-widget">
+        <div class="section-header">
+            <span class="section-icon">🗣️</span>
+            <h3>Daily Quote widget</h3>
+            <button class="toggle-section">+</button>
+        </div>
+        <div class="section-content">
+            <div class="font-control">
+                <label>Font:</label>
+                <select id="quote-font">
+                    <option value="Arial">Arial (default)</option>
+                    <option value="Segoe UI">Segoe UI</option>
+                    <option value="Georgia">Georgia</option>
+                    <option value="Courier New">Courier New</option>
+                    <option value="Roboto">Roboto</option>
+                    <option value="Helvetica">Helvetica</option>
+                    <option value="Verdana">Verdana</option>
+                    <option value="Tahoma">Tahoma</option>
+                    <option value="Trebuchet MS">Trebuchet MS</option>
+                    <option value="Lucida Sans">Lucida Sans</option>
+                    <option value="Times New Roman">Times New Roman</option>
+                    <option value="Fira Sans">Fira Sans</option>
+                    <option value="Open Sans">Open Sans</option>
+                    <option value="Lato">Lato</option>
+                    <option value="Quicksand">Quicksand</option>
+                    <option value="Monaco">Monaco</option>
+                </select>
+            </div>
+            <div class="font-control">
+                <label>Text color:</label>
+                <input type="color" id="quote-color">
+            </div>
+            <div class="font-control">
+                <label>Quote size:</label>
+                <input type="number" id="quote-size" min="10" max="48" value="18"> px
+            </div>
+
+            <button id="reset-quote-widget" class="reset-button">Reset Time & Date Settings</button>
+
+            <div class="section-toggle-controls">
+                <label>
+                    <input type="checkbox" id="toggle-quote">
+                    Show Quote
+                </label>
+            </div>
+        </div>
+    </section>
+
+    <div id="version-info">
+        Version: loading...
+    </div>
 </div>
 
+<div class="greeting" id="greeting"></div>
+
 <div class="time-container">
     <div class="time" id="time">00:00</div>
     <div class="date" id="date" data-tooltip="01-15-2025">July 20 2025</div>
+
+    <div class="quote-container" id="quote-container">
+        <div class="quote-text" id="quote-text">Loading quote...</div>
+        <div class="quote-author" id="quote-author"></div>
+    </div>
 </div>
-<div class="greeting" id="greeting"></div>
 
 <div class="links" id="links-container"></div>
 
@@ -320,6 +382,7 @@ <h3>Greeting widget</h3>
 
 <script src="scripts/config.js"></script>
 <script src="scripts/main.js"></script>
+<script src="scripts/version.js"></script>
 <script src="scripts/effects/effects-main.js"></script>
 <script src="scripts/effects/star-generator.js"></script>
 <script src="scripts/effects/blob-flow.js"></script>
@@ -333,5 +396,6 @@ <h3>Greeting widget</h3>
 <script src="scripts/sticky-notes.js"></script>
 <script src="scripts/weather.js"></script>
 <script src="scripts/greeting.js"></script>
+<script src="scripts/quotes.js"></script>
 </body>
 </html>

Screenshots/Quote_with_customization.png

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "New Tab Extension",
   "description": "An extension for about:newtab that brings life to the new tab.",
-  "version": "0.4",
+  "version": "0.5.2",
   "homepage_url": "https://github.com/OldValencia/NewTab",
 
   "chrome_url_overrides": {

index.html

@@ -5,4 +5,5 @@ function disableDynamicBackground() {
     backgroundLayer.style.backgroundRepeat = "";
     backgroundLayer.style.backgroundPosition = "";
     document.body.style.backgroundImage = "";
+    vignetteLayer.style.background = "";
 }

manifest.json

@@ -32,7 +32,7 @@ function enableStarfield() {
 }
 
 function createShootingStar() {
-    const { innerWidth: width } = window;
+    const {innerWidth: width} = window;
     const star = document.createElement('div');
     starObserver.observe(star);
     star.classList.add('shooting-star');
@@ -42,8 +42,8 @@ function createShootingStar() {
     setTimeout(() => star.remove(), STARFIELD_CONFIG.shootingStarLifetime);
 }
 
-function createStar({ mini = false } = {}) {
-    const { innerWidth: width, innerHeight: height } = window;
+function createStar({mini = false} = {}) {
+    const {innerWidth: width, innerHeight: height} = window;
     const star = document.createElement('div');
     starObserver.observe(star);
     star.classList.add(mini ? 'mini-star' : 'star');
@@ -80,6 +80,9 @@ function throttle(fn, delay) {
 }
 
 window.addEventListener('resize', throttle(() => {
-    disableStarfield();
-    enableStarfield();
+    const settings = loadCustomSettings();
+    if (settings.bgMode === "stars") {
+        disableStarfield();
+        enableStarfield();
+    }
 }, 500));

scripts/effects/effects-main.js

@@ -22,6 +22,9 @@ function applyBackgroundEffects(settings) {
     const brightness = settings.bgBrightness || 100;
 
     backgroundLayer.style.filter = `blur(${blur}px) brightness(${brightness}%)`;
+    const intensity = settings.bgVignette;
+    const alpha = intensity / 100 * 0.8;
+    vignetteLayer.style.background = `radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,${alpha}) 100%)`;
 }
 
 function applyBackgroundFit(fit) {

scripts/effects/star-generator.js

@@ -0,0 +1,127 @@
+const quoteContainer = document.getElementById("quote-container");
+const quoteText = document.getElementById("quote-text");
+const quoteAuthor = document.getElementById("quote-author");
+const quoteFontElement = document.getElementById("quote-font");
+const quoteColorElement = document.getElementById("quote-color");
+const quoteSizeElement = document.getElementById("quote-size");
+const quoteToggleElement = document.getElementById("toggle-quote");
+const quoteDefaultFont = "Arial";
+const quoteDefaultColor = "#6c6c6c";
+const quoteDefaultTextSize = "10";
+const quoteDefaultShowState = false;
+
+function loadQuoteOfTheDay() {
+    const quoteKey = "quotableQuote";
+    const fetchDateKey = "quotableQuoteDate";
+    const today = new Date().toISOString().split("T")[0];
+
+    const savedQuote = localStorage.getItem(quoteKey);
+    const savedDate = localStorage.getItem(fetchDateKey);
+
+    if (savedQuote && savedDate === today) {
+        const quoteData = JSON.parse(savedQuote);
+        displayQuote(quoteData.content, quoteData.author);
+    } else {
+        fetch("https://api.quotable.io/random")
+            .then(res => res.json())
+            .then(data => {
+                const quote = data.content;
+                const author = data.author;
+
+                localStorage.setItem(quoteKey, JSON.stringify({content: quote, author}));
+                localStorage.setItem(fetchDateKey, today);
+
+                displayQuote(quote, author);
+            })
+            .catch(() => {
+                quoteText.textContent = "Could not load quote.";
+                quoteAuthor.textContent = "";
+            });
+    }
+}
+
+function displayQuote(quote, author) {
+    quoteText.textContent = `“${quote}”`;
+    quoteAuthor.textContent = `— ${author}`;
+}
+
+function applyQuoteSettings() {
+    const settings = loadCustomSettings();
+    if (!settings.quoteFont) {
+        settings.quoteFont = quoteDefaultFont;
+    }
+
+    if (!settings.quoteColor) {
+        settings.quoteColor = quoteDefaultColor;
+    }
+
+    if (!settings.quoteSize) {
+        settings.quoteSize = quoteDefaultTextSize;
+    }
+
+    if (settings.quoteShowState === undefined || settings.quoteShowState === null) {
+        settings.quoteShowState = quoteDefaultShowState;
+    }
+    saveCustomSettings(settings);
+
+    quoteText.style.fontFamily = settings.quoteFont;
+    quoteAuthor.style.fontFamily = settings.quoteFont;
+    quoteText.style.color = settings.quoteColor;
+    quoteAuthor.style.color = settings.quoteColor;
+    quoteText.style.fontSize = `${settings.quoteSize}px`;
+    quoteAuthor.style.fontSize = `${Math.max(settings.quoteSize - 2, 10)}px`;
+
+    quoteContainer.style.display = settings.quoteShowState ? "block" : "none";
+
+    // Sync UI controls
+    quoteFontElement.value = settings.quoteFont;
+    quoteColorElement.value = settings.quoteColor;
+    quoteSizeElement.value = settings.quoteSize;
+    quoteToggleElement.checked = settings.quoteShowState;
+}
+
+function setupQuoteWidgetControls() {
+    quoteFontElement.addEventListener("change", e => {
+        const settings = loadCustomSettings();
+        settings.quoteFont = e.target.value;
+        saveCustomSettings(settings);
+        applyQuoteSettings();
+    });
+
+    quoteColorElement.addEventListener("input", e => {
+        const settings = loadCustomSettings();
+        settings.quoteColor = e.target.value;
+        saveCustomSettings(settings);
+        applyQuoteSettings();
+    });
+
+    quoteSizeElement.addEventListener("input", e => {
+        const settings = loadCustomSettings();
+        settings.quoteSize = e.target.value;
+        saveCustomSettings(settings);
+        applyQuoteSettings();
+    });
+
+    quoteToggleElement.addEventListener("change", e => {
+        const settings = loadCustomSettings();
+        settings.quoteShowState = e.target.checked;
+        saveCustomSettings(settings);
+        applyQuoteSettings();
+    });
+
+    document.getElementById("reset-quote-widget").addEventListener("click", () => {
+        const settings = loadCustomSettings();
+        delete settings.quoteFont;
+        delete settings.quoteColor;
+        delete settings.quoteSize;
+        delete settings.quoteShowState;
+        saveCustomSettings(settings);
+        applyQuoteSettings();
+    });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+    loadQuoteOfTheDay();
+    applyQuoteSettings();
+    setupQuoteWidgetControls();
+});