From 27619110c19cf6f9b08a7bf5cc2da9d7c6d3b17b Mon Sep 17 00:00:00 2001
From: pritzvi <prithvi.patre03@gmail.com>
Date: Sun, 27 Apr 2025 13:25:47 -0400
Subject: [PATCH 1/2] feat: add speech bubble encouragement

---
 newTab.html |  3 +++
 newTab.js   | 28 ++++++++++++++++++++++++++++
 styles.css  | 38 +++++++++++++++++++++++++++++++++++++-
 3 files changed, 68 insertions(+), 1 deletion(-)
diff --git a/newTab.html b/newTab.html
index 0d82a11..ae4866f 100644
--- a/newTab.html
+++ b/newTab.html
@@ -15,6 +15,9 @@
   <body>
     <h1 id="welcome-message">Who do you want to care for today?</h1>
 
+    <!-- Speech Bubble for Encouragement Messages -->
+    <div id="speech-bubble" class="speech-bubble"></div>
+
     <!-- 
   <div id="deer1-circle" class="deer-circle"></div>
   <div id="deer2-circle" class="deer-circle"></div>
diff --git a/newTab.js b/newTab.js
index c466b33..b130d94 100644
--- a/newTab.js
+++ b/newTab.js
@@ -619,6 +619,31 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }
 
+  // Encouragement messages for the speech bubble
+  const ENCOURAGEMENT_MESSAGES = [
+    "Great job!",
+    "You're making progress!",
+    "Keep going!",
+    "Awesome work!",
+    "You did it!",
+    "Way to go!",
+    "Proud of you!",
+    "Keep up the good work!",
+    "Fantastic!",
+    "You're on a roll!"
+  ];
+
+  function showSpeechBubble(message) {
+    const bubble = document.getElementById("speech-bubble");
+    if (!bubble) return;
+    bubble.textContent = message;
+    bubble.classList.add("visible");
+    // Remove after 2 seconds
+    setTimeout(() => {
+      bubble.classList.remove("visible");
+    }, 2000);
+  }
+
   function renderTasks(tasks, backgroundIndex, category) {
     const tasksHeader =
       document.getElementById("tasks-header") || document.createElement("div");
@@ -673,6 +698,9 @@ document.addEventListener("DOMContentLoaded", () => {
         if (tasks[originalIndex].completed) {
           const deleteButton = taskItem.querySelector(".delete-task");
           if (deleteButton) deleteButton.remove();
+          // Show encouragement speech bubble
+          const randomMsg = ENCOURAGEMENT_MESSAGES[Math.floor(Math.random() * ENCOURAGEMENT_MESSAGES.length)];
+          showSpeechBubble(randomMsg);
         }
 
         let newPosition = 0;
diff --git a/styles.css b/styles.css
index 2ec9073..fe024dc 100644
--- a/styles.css
+++ b/styles.css
@@ -487,4 +487,40 @@ input[type="checkbox"]:checked+.task-text {
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
     opacity: 0.95;
     animation: welcomeFadeIn 1s ease-out forwards;
-    }
\ No newline at end of file
+    }
+
+.speech-bubble {
+  position: fixed;
+  left: 75%;
+  top: 67%;
+  transform: translate(-50%, -100%);
+  background: rgba(255, 255, 255, 0.95);
+  color: #333;
+  font-size: 1.5rem;
+  font-family: 'Slackside One', sans-serif;
+  padding: 18px 32px;
+  border-radius: 32px;
+  box-shadow: 0 4px 24px rgba(0,0,0,0.12);
+  z-index: 2000;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.4s cubic-bezier(0.4,0,0.2,1);
+  text-align: center;
+  max-width: 80vw;
+  line-height: 2.2rem;
+}
+.speech-bubble.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+.speech-bubble::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  bottom: -18px;
+  transform: translateX(-50%);
+  border-width: 18px 18px 0 18px;
+  border-style: solid;
+  border-color: rgba(255,255,255,0.95) transparent transparent transparent;
+  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
+}
\ No newline at end of file

From b19d6e19ff8332bae7d2a42f3211f78918ca684a Mon Sep 17 00:00:00 2001
From: pritzvi <prithvi.patre03@gmail.com>
Date: Sun, 27 Apr 2025 13:39:12 -0400
Subject: [PATCH 2/2] feat: inspirational quote overlay at top

---
 newTab.html |  3 +++
 newTab.js   | 23 +++++++++++++++++++++++
 styles.css  | 21 +++++++++++++++++++++
 3 files changed, 47 insertions(+)

diff --git a/newTab.html b/newTab.html
index ae4866f..747c28e 100644
--- a/newTab.html
+++ b/newTab.html
@@ -18,6 +18,9 @@ <h1 id="welcome-message">Who do you want to care for today?</h1>
     <!-- Speech Bubble for Encouragement Messages -->
     <div id="speech-bubble" class="speech-bubble"></div>
 
+    <!-- Inspirational Quote Overlay -->
+    <div id="inspirational-quote" class="inspirational-quote"></div>
+
     <!-- 
   <div id="deer1-circle" class="deer-circle"></div>
   <div id="deer2-circle" class="deer-circle"></div>
diff --git a/newTab.js b/newTab.js
index b130d94..e7fd69f 100644
--- a/newTab.js
+++ b/newTab.js
@@ -977,4 +977,27 @@ document.addEventListener("DOMContentLoaded", () => {
 
     tasksContainer.classList.remove("hidden");
   }
+
+  // Inspirational quotes for the overlay (in-depth, from historic people)
+  const INSPIRATIONAL_QUOTES = [
+    "The only way to do great work is to love what you do. – Steve Jobs",
+    "Success is not final, failure is not fatal: It is the courage to continue that counts. – Winston Churchill",
+    "You must be the change you wish to see in the world. – Mahatma Gandhi",
+    "What lies behind us and what lies before us are tiny matters compared to what lies within us. – Ralph Waldo Emerson",
+    "The best way to predict the future is to invent it. – Alan Kay",
+    "Happiness is not something ready made. It comes from your own actions. – Dalai Lama",
+    "It always seems impossible until it's done. – Nelson Mandela",
+    "In the middle of every difficulty lies opportunity. – Albert Einstein",
+    "The only limit to our realization of tomorrow will be our doubts of today. – Franklin D. Roosevelt",
+    "Act as if what you do makes a difference. It does. – William James"
+  ];
+
+  function showInspirationalQuote() {
+    const quoteDiv = document.getElementById("inspirational-quote");
+    if (!quoteDiv) return;
+    const randomQuote = INSPIRATIONAL_QUOTES[Math.floor(Math.random() * INSPIRATIONAL_QUOTES.length)];
+    quoteDiv.textContent = randomQuote;
+  }
+
+  showInspirationalQuote();
 });
diff --git a/styles.css b/styles.css
index fe024dc..48c03f6 100644
--- a/styles.css
+++ b/styles.css
@@ -523,4 +523,25 @@ input[type="checkbox"]:checked+.task-text {
   border-style: solid;
   border-color: rgba(255,255,255,0.95) transparent transparent transparent;
   filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
+}
+
+.inspirational-quote {
+  position: fixed;
+  left: 50%;
+  top: 32px;
+  transform: translateX(-50%);
+  background: rgba(255, 255, 255, 0.7);
+  color: #4158D0;
+  font-size: 1.25rem;
+  font-family: 'Slackside One', 'DM Sans', sans-serif;
+  padding: 12px 32px;
+  border-radius: 24px;
+  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
+  z-index: 1500;
+  opacity: 0.92;
+  text-align: center;
+  pointer-events: none;
+  letter-spacing: 0.01em;
+  max-width: 80vw;
+  user-select: none;
 }
\ No newline at end of file
