Break reminder message

blocked.html

@@ -33,12 +33,16 @@ <h1>The page you're trying to access has been blocked by <a href="https://www.pr
 			(<span id="lbBlockedSet">Block Set</span>)
 			<p id="lbKeywordMatched" style="display: none;">Keyword matched: <span id="lbKeywordMatch" class="keyword"></span></p>
 			<p id="lbUnblockText">The page will be unblocked at: <span id="lbUnblockTime" class="time">the end of time</span></p>
-		</div>
-
-		<!-- custom message (optional) -->
-		<div id="lbCustomMsgDiv" style="display: none;">
-			<p>A message from yourself:</p>
-			<blockquote id="lbCustomMsg"></blockquote>
+			<p id="lbCountdownText">
+				Time remaining: <span id="lbCountdown"></span>
+			</p>
+			<div id="lbProgressContainer">
+				<div id="lbProgressBar"></div>
+			</div>
+
+			<div id="lbProgressPercent"></div>
+			<p id="lbMotivation" class="motivation"></p>
+			<p id="lbBreakReminder" class="break-reminder"></p>
 		</div>
 
 		<!-- support info -->

blocked.js

@@ -5,6 +5,23 @@
 var gBlockedURL;
 var gBlockedSet;
 var gHashCode;
+// Motivational messages
+const motivationalMessages = [
+	"Stay focused — you’ve got this.",
+	"Distraction blocked. Productivity active.",
+	"Use this time intentionally.",
+	"Focus mode is enabled.",
+	"Every minute of focus counts.",
+	"Small progress is still progress."
+];
+//Break messages
+const breakMessages = [
+	"Take a 1–3 minute stretch break.",
+	"Relax your eyes for 20 seconds.",
+	"Drink some water.",
+	"Stand up and move around.",
+	"Take a deep breath before continuing later."
+];
 
 // Create 32-bit integer hash code from string
 //
@@ -21,6 +38,8 @@ function hashCode32(str) {
 function processBlockInfo(info) {
 	if (!info) return;
 
+	console.log("unblockTime raw:", info.unblockTime);
+
 	gBlockedURL = info.blockedURL;
 	gBlockedSet = info.blockedSet;
 	gHashCode = info.password ? hashCode32(info.password) : 0;
@@ -79,22 +98,130 @@ function processBlockInfo(info) {
 		passwordSubmit.onclick = onSubmitPassword;
 	}
 
-	let customMsgDiv = document.getElementById("lbCustomMsgDiv");
-	let customMsg = document.getElementById("lbCustomMsg");
-	if (customMsgDiv && customMsg) {
-		if (info.customMsg) {
-			customMsg.innerText = info.customMsg;
-			customMsgDiv.style.display = "";
-		} else {
-			customMsgDiv.style.display = "none";
-		}
-	}
-
 	let unblockTime = document.getElementById("lbUnblockTime");
 	if (info.unblockTime && unblockTime) {
 		unblockTime.innerText = info.unblockTime;
 	}
 
+	//FEATURE 1: COUNTDOWN
+	let countdownEl = document.getElementById("lbCountdown");
+	let countdownText = document.getElementById("lbCountdownText");
+
+	//  MOTIVATIONAL MESSAGE ROTATION
+	let motivationEl = document.getElementById("lbMotivation");
+
+	if (motivationEl) {
+
+		// pick random starting message
+		let messageIndex = Math.floor(Math.random() * motivationalMessages.length);
+
+		function updateMotivation() {
+			motivationEl.innerText = motivationalMessages[messageIndex];
+			messageIndex = (messageIndex + 1) % motivationalMessages.length;
+		}
+
+		// show first message immediately
+		updateMotivation();
+		// rotate every 15 seconds
+		setInterval(updateMotivation, 15000);
+	}
+
+	// BREAK REMINDER SYSTEM
+	let breakEl = document.getElementById("lbBreakReminder");
+
+	if (breakEl) {
+		const TEN_MIN = 10 * 60 * 1000;
+
+		function showBreakMessage() {
+			let msg = breakMessages[Math.floor(Math.random() * breakMessages.length)];
+			breakEl.innerText = msg;
+		}
+
+		// show first break message after 5 min
+		setTimeout(() =>{
+			showBreakMessage();
+
+			// update every 10 min
+			setInterval(showBreakMessage, TEN_MIN);
+		}, TEN_MIN/2);
+	}
+
+	if (info.unblockTime && countdownEl) {
+		function parseTimeString(timeStr) {
+			let now = new Date();
+
+			let parts = timeStr.trim().split(" ");
+			if (parts.length !== 2) return NaN;
+
+			let [time, modifier] = parts;
+			let timeParts = time.split(":").map(Number);
+
+			if (timeParts.length < 2) return NaN;
+
+			let hours = timeParts[0];
+			let minutes = timeParts[1];
+			let seconds = timeParts[2] || 0;
+
+			if (isNaN(hours) || isNaN(minutes)) return NaN;
+
+			if (modifier === "PM" && hours !== 12) hours += 12;
+			if (modifier === "AM" && hours === 12) hours = 0;
+
+			return new Date(
+				now.getFullYear(),
+				now.getMonth(),
+				now.getDate(),
+				hours,
+				minutes,
+				seconds
+			).getTime();
+		}
+
+		let endTime = parseTimeString(info.unblockTime);
+		if (isNaN(endTime)) {
+			console.error("Bad unblockTime format:", info.unblockTime);
+			countdownEl.innerText = "Invalid time";
+			return;
+		}
+		let startTime = Date.now();
+		let totalDuration = endTime - startTime;
+
+		function updateCountdown() {
+			let now = Date.now();
+			let diff = endTime - now;
+
+			if (diff <= 0) {
+				countdownEl.innerText = "Unblocking...";
+				clearInterval(timer);
+				return;
+			}
+
+			// text
+			countdownEl.innerText = formatRemaining(diff);
+
+			// progress
+			let progress = (totalDuration - diff) / totalDuration;
+			progress = Math.max(0, Math.min(1, progress));
+
+			let bar = document.getElementById("lbProgressBar");
+			let percent = document.getElementById("lbProgressPercent");
+
+			if (bar) {
+				bar.style.width = (progress * 100) + "%";
+			}
+
+			if (percent) {
+				percent.innerText = Math.round(progress * 100) + "% completed";
+			}
+		}
+
+		updateCountdown();
+		let timer = setInterval(updateCountdown, 1000);
+
+	} else if (countdownText) {
+		countdownText.style.display = "none";
+	}
+
 	let delaySecs = document.getElementById("lbDelaySeconds");
 	if (info.delaySecs && delaySecs) {
 		delaySecs.innerText = info.delaySecs;
@@ -179,6 +306,34 @@ function reloadBlockedPage() {
 		document.location.href = gBlockedURL;
 	}
 }
+// Formats timer in hours, minutes and secodns for display
+//
+function formatRemaining(ms) {
+	if (ms <= 0) return "0 minutes";
+
+	let totalSeconds = Math.floor(ms / 1000);
+
+	let hours = Math.floor(totalSeconds / 3600);
+	let minutes = Math.floor((totalSeconds % 3600) / 60);
+	let seconds = totalSeconds % 60;
+
+	let parts = [];
+
+	if (hours > 0) {
+		parts.push(`${hours} hour${hours !== 1 ? "s" : ""}`);
+	}
+
+	if (minutes > 0) {
+		parts.push(`${minutes} minute${minutes !== 1 ? "s" : ""}`);
+	}
+
+	// optional: only show seconds if under 1 minute remaining
+	if (hours === 0 && minutes < 5) {
+		parts.push(`${seconds} second${seconds !== 1 ? "s" : ""}`);
+	}
+
+	return parts.join(" ");
+}
 
 // Request block info from extension
 browser.runtime.sendMessage({ type: "blocked" }).then(processBlockInfo);

stats.html

@@ -21,7 +21,28 @@
 			<form id="form" style="display: none;">
 
 				<fieldset class="ui-widget ui-widget-content">
-					<legend>LeechBlock Statistics</legend>
+					<legend>LeechBlock General Statistics</legend>
+					<div id="statsSummary" style="margin-bottom:15px;">
+						<strong>Overall Statistics (All Block Sets Combined)</strong><br><br>
+
+						Total Time Spent on Blocked Sites:
+						<span id="totalBlockedTime">0</span><br>
+
+						Average Daily Time Spent on Blocked Sites:
+						<span id="avgBlockedPerDay">0</span><br>
+
+						<br>
+						Most Active Block Set:
+						<span id="mostActiveSet">N/A</span><br>
+
+						Estimated Time Saved (Focused Time Protected):
+						<span id="timeSaved">0</span><br><br>
+
+						<small>
+							These values combine data from all block sets and show overall usage patterns.
+						</small>
+					</div>
+					<legend>LeechBlock BlockSet Statistics</legend>
 					<table id="statsTable" border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
 						<tr id="statsRow0">
 							<th>Block Set</th>

stats.js

@@ -71,9 +71,28 @@ function refreshPage() {
 		gClockOffset = options["clockOffset"];
 		let now = Math.floor(Date.now() / 1000) + (gClockOffset * 60);
 
+		// Variables for new overall statistics
+		let totalBlockedSeconds = 0;
+		let earliestStartTime = null;
+		let maxSetTime = 0;
+		let mostActiveSet = 1;
+
 		for (let set = 1; set <= gNumSets; set++) {
 			let setName = options[`setName${set}`];
 			let timedata = options[`timedata${set}`];
+
+			// Collect data for overall statistics
+			totalBlockedSeconds += timedata[1];
+
+			if (timedata[1] > maxSetTime) {
+				maxSetTime = timedata[1];
+				mostActiveSet = set;
+			}
+
+			if (!earliestStartTime || timedata[0] < earliestStartTime) {
+				earliestStartTime = timedata[0];
+			}
+
 			let limitMins = options[`limitMins${set}`];
 			let limitPeriod = options[`limitPeriod${set}`];
 			let limitOffset = options[`limitOffset${set}`];
@@ -112,6 +131,27 @@ function refreshPage() {
 			}
 		}
 
+		// Calculate overall statistics
+		let totalBlockedFormatted = formatTime(totalBlockedSeconds);
+
+		// Calculate average per day
+		if (earliestStartTime) {
+			let nowDays = Math.floor(now / 86400);
+			let startDays = Math.floor(earliestStartTime / 86400);
+			let totalDays = Math.max(1, nowDays - startDays + 1);
+
+			let avgPerDay = formatTime(totalBlockedSeconds / totalDays);
+
+			let timeSavedFormatted = formatTime(totalBlockedSeconds);
+
+			// Update UI
+			getElement("totalBlockedTime").innerText = totalBlockedFormatted;
+			getElement("avgBlockedPerDay").innerText = avgPerDay;
+			getElement("mostActiveSet").innerText =
+				options[`setName${mostActiveSet}`] || `Block Set ${mostActiveSet}`;
+			getElement("timeSaved").innerText = timeSavedFormatted;
+		}
+
 		$("#form").show();
 	}
 

style.css

@@ -94,3 +94,25 @@ button:active:enabled {
 	color: #777;
 	text-decoration: underline;
 }
+
+#lbProgressContainer {
+	width: 100%;
+	height: 10px;
+	background: #ddd;
+	border-radius: 5px;
+	margin-top: 10px;
+}
+
+#lbProgressBar {
+	height: 100%;
+	width: 0%;
+	background: #4caf50;
+	border-radius: 5px;
+	transition: width 1s linear;
+}
+
+#lbMotivation {
+	margin-top: 12px;
+	font-style: italic;
+	opacity: 0.8;
+}