Skip to content

Feat/inspirational quote overlay #30

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pritzvi wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feat/inspirational quote overlay #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2761911
feat: add speech bubble encouragement
pritzvi Apr 27, 2025
b19d6e1
feat: inspirational quote overlay at top
pritzvi Apr 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions newTab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,12 @@
<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>

<!-- 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>
Expand Down
51 changes: 51 additions & 0 deletions newTab.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -949,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();
});
59 changes: 58 additions & 1 deletion styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -487,4 +487,61 @@ 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;
}
}

.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));
}

.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;
}