`;
+ gardenElements.appendChild(element);
}
- });
- window.highlightText = function(text) {
- console.log('Highlighting text:', text);
- const content = readerContent.innerHTML;
- const highlightedContent = content.replace(new RegExp(text, 'gi'), match => `${match}`);
- readerContent.innerHTML = highlightedContent;
- savePreferences();
- }
+ function startFocusDraining() {
+ console.log("DEBUG: Starting focus draining.");
+ clearInterval(focusTimer);
+ focusTimer = null;
+ focusDraining.classList.remove('hidden');
+ document.title = '⚠️ Focus Draining';
+ drainTimer = setInterval(() => {
+ console.log("DEBUG: Draining focus minute. Current focus minutes:", focusMinutes);
+ if (focusMinutes > 0) {
+ focusMinutes--;
+ focusTimeDisplay.textContent = focusMinutes;
+ updateProgressBar(0);
+ saveFocusData();
+ if (gardenElements.children.length > 0) {
+ console.log("DEBUG: Removing a garden element due to focus drain.");
+ gardenElements.removeChild(gardenElements.lastChild);
+ }
+ }
+ }, 30000);
+ }
- window.removeHighlight = function(text) {
- console.log('Removing highlight for text:', text);
- const content = readerContent.innerHTML;
- const unhighlightedContent = content.replace(/(.*?)<\/span>/gi, (match, p1) => {
- return p1.includes(text) ? p1 : match;
+ function stopFocusDraining() {
+ console.log("DEBUG: Stopping focus draining.");
+ clearInterval(drainTimer);
+ drainTimer = null;
+ focusDraining.classList.add('hidden');
+ document.title = originalTitle;
+ }
+ document.addEventListener('visibilitychange', function () {
+ if (document.hidden) {
+ if (focusModeActive) {
+ startFocusDraining();
+ }
+ } else {
+ stopFocusDraining();
+ if (focusModeActive && !focusTimer) {
+ startFocusMode();
+ }
+ }
});
- readerContent.innerHTML = unhighlightedContent;
- savePreferences();
- }
- const magicHighlight = document.getElementById('magic-highlight');
- const loadingScreen = document.getElementById('loading-screen');
-
- magicHighlight.addEventListener('click', function() {
- loadingScreen.style.display = 'flex';
- const content = document.getElementById('reader-content').innerText;
-
- fetch('/api/chat', {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify({
- message: `You are a text summarization agent, which has the capability to highlight important aspects or key points of an article below. For all of the text in the article, please respond with a highlight(text) function, stating the exact text that you want highlighted. Separate these functions by semicolons, and ONLY respond with the function calls and nothing else. Feel free to highlight more often, but in shorter segments, as this will help the user. Make the text to highlight EXACTLY what is listed in the article, otherwise the system will not highlight for you. Here is the article: ${content}`
- })
- })
- .then(response => response.json())
- .then(data => {
- console.log(data);
- if (data.success) {
- const highlights = data.response.match(/highlight\((.*?)\);/g);
- if (highlights) {
- highlights.forEach(call => {
- const textToHighlight = call.match(/highlight\((.*?)\);/)[1];
- highlightText(textToHighlight.replace(/['"]/g, ''));
- });
- }
+ // ------------------------------
+ // OTHER FUNCTIONALITY (Read Aloud, Font/Spacing, Annotation)
+ // ------------------------------
+ readAloud.addEventListener('click', () => {
+ if (!isReading) {
+ isReading = true;
+ readAloud.classList.add('bg-accent-200', 'dark:bg-accent-800');
+ const originalText = readerContent.innerText;
+ // If evil mode is active, reverse the text before speaking and lower the pitch
+ const textToSpeak = evilModeActive ? reverseText(originalText) : originalText;
+ speechUtterance = new SpeechSynthesisUtterance(textToSpeak);
+ if (evilModeActive) {
+ speechUtterance.pitch = 0.1; // Lower the pitch for evil mode
+ speechUtterance.rate = 1.2; // Increase the rate for evil mode
+ }
+ speechUtterance.onend = () => {
+ isReading = false;
+ readAloud.classList.remove('bg-accent-200', 'dark:bg-accent-800');
+ };
+ speechSynthesis.speak(speechUtterance);
} else {
- showToast('Error: ' + data.error);
+ isReading = false;
+ readAloud.classList.remove('bg-accent-200', 'dark:bg-accent-800');
+ speechSynthesis.cancel();
}
- })
- .catch(error => {
- showToast('Error: ' + error.message);
- })
- .finally(() => {
- loadingScreen.style.display = 'none';
});
- });
- fontDecrease.addEventListener('click', () => {
- if (currentFontSize > 12) {
- currentFontSize -= 1;
- readerContent.style.fontSize = currentFontSize + 'px';
+ window.highlightText = function (text) {
+ console.log('Highlighting text:', text);
+ const content = readerContent.innerHTML;
+ const highlightedContent = content.replace(new RegExp(text, 'gi'), match =>
+ `${match}`);
+ readerContent.innerHTML = highlightedContent;
savePreferences();
}
- if (evilModeActive === true) {
- readerContent.style.fontSize = '1px';
- }
- });
- fontIncrease.addEventListener('click', () => {
- if (currentFontSize < 24) {
- currentFontSize += 1;
- readerContent.style.fontSize = currentFontSize + 'px';
+
+ window.removeHighlight = function (text) {
+ console.log('Removing highlight for text:', text);
+ const content = readerContent.innerHTML;
+ const unhighlightedContent = content.replace(/(.*?)<\/span>/gi, (
+ match, p1) => {
+ return p1.includes(text) ? p1 : match;
+ });
+ readerContent.innerHTML = unhighlightedContent;
savePreferences();
}
- if (evilModeActive === true) {
- readerContent.style.fontSize = '300px';
- }
- });
- fontFamily.addEventListener('change', () => {
- switch(fontFamily.value) {
- case 'sans':
- readerContent.style.fontFamily = 'Arial, ui-sans-serif, system-ui, sans-serif';
- break;
- case 'serif':
- readerContent.style.fontFamily = 'Georgia, ui-serif, serif';
- break;
- case 'mono':
- readerContent.style.fontFamily = 'Courier New, ui-monospace, monospace';
- break;
- case 'comic':
- readerContent.style.fontFamily = 'Comic Sans MS, Comic Sans, cursive';
- break;
- case 'times':
- readerContent.style.fontFamily = 'Times New Roman, ui-serif, serif';
- break;
- case 'verdana':
- readerContent.style.fontFamily = 'Verdana, ui-sans-serif, system-ui, sans-serif';
- break;
- case 'lex':
- readerContent.style.fontFamily = 'OpenDyslexic, ui-sans-serif, system-ui, sans-serif';
- break;
- }
- savePreferences();
- });
- spacingDecrease.addEventListener('click', () => {
- if (currentLineHeight > 1.2) {
- currentLineHeight -= 0.1;
- readerContent.style.lineHeight = currentLineHeight;
+
+ const magicHighlight = document.getElementById('magic-highlight');
+ const loadingScreen = document.getElementById('loading-screen');
+
+ magicHighlight.addEventListener('click', function () {
+ loadingScreen.style.display = 'flex';
+ const content = document.getElementById('reader-content').innerText;
+
+ fetch('/api/chat', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json'
+ },
+ body: JSON.stringify({
+ message: `You are a text summarization agent, which has the capability to highlight important aspects or key points of an article below. For all of the text in the article, please respond with a highlight(text) function, stating the exact text that you want highlighted. Separate these functions by semicolons, and ONLY respond with the function calls and nothing else. Feel free to highlight more often, but in shorter segments, as this will help the user. Make the text to highlight EXACTLY what is listed in the article, otherwise the system will not highlight for you. Here is the article: ${content}`
+ })
+ })
+ .then(response => response.json())
+ .then(data => {
+ console.log(data);
+ if (data.success) {
+ const highlights = data.response.match(/highlight\((.*?)\);/g);
+ if (highlights) {
+ highlights.forEach(call => {
+ const textToHighlight = call.match(/highlight\((.*?)\);/)[
+ 1];
+ highlightText(textToHighlight.replace(/['"]/g, ''));
+ });
+ }
+ } else {
+ showToast('Error: ' + data.error);
+ }
+ })
+ .catch(error => {
+ showToast('Error: ' + error.message);
+ })
+ .finally(() => {
+ loadingScreen.style.display = 'none';
+ });
+ });
+
+ fontDecrease.addEventListener('click', () => {
+ if (currentFontSize > 12) {
+ currentFontSize -= 1;
+ readerContent.style.fontSize = currentFontSize + 'px';
+ savePreferences();
+ }
+ if (evilModeActive === true) {
+ readerContent.style.fontSize = '1px';
+ }
+ });
+ fontIncrease.addEventListener('click', () => {
+ if (currentFontSize < 24) {
+ currentFontSize += 1;
+ readerContent.style.fontSize = currentFontSize + 'px';
+ savePreferences();
+ }
+ if (evilModeActive === true) {
+ readerContent.style.fontSize = '300px';
+ }
+ });
+ fontFamily.addEventListener('change', () => {
+ switch (fontFamily.value) {
+ case 'sans':
+ readerContent.style.fontFamily = 'Arial, ui-sans-serif, system-ui, sans-serif';
+ break;
+ case 'serif':
+ readerContent.style.fontFamily = 'Georgia, ui-serif, serif';
+ break;
+ case 'mono':
+ readerContent.style.fontFamily = 'Courier New, ui-monospace, monospace';
+ break;
+ case 'comic':
+ readerContent.style.fontFamily = 'Comic Sans MS, Comic Sans, cursive';
+ break;
+ case 'times':
+ readerContent.style.fontFamily = 'Times New Roman, ui-serif, serif';
+ break;
+ case 'verdana':
+ readerContent.style.fontFamily = 'Verdana, ui-sans-serif, system-ui, sans-serif';
+ break;
+ case 'lex':
+ readerContent.style.fontFamily =
+ 'OpenDyslexic, ui-sans-serif, system-ui, sans-serif';
+ break;
+ }
savePreferences();
- }
- });
- spacingIncrease.addEventListener('click', () => {
- if (currentLineHeight < 2.5) {
- currentLineHeight += 0.1;
- readerContent.style.lineHeight = currentLineHeight;
+ });
+ spacingDecrease.addEventListener('click', () => {
+ if (currentLineHeight > 1.2) {
+ currentLineHeight -= 0.1;
+ readerContent.style.lineHeight = currentLineHeight;
+ savePreferences();
+ }
+ });
+ spacingIncrease.addEventListener('click', () => {
+ if (currentLineHeight < 2.5) {
+ currentLineHeight += 0.1;
+ readerContent.style.lineHeight = currentLineHeight;
+ savePreferences();
+ }
+ });
+ fontColorDropdown.addEventListener('change', function () {
+ const selectedColor = this.value;
+ switch (selectedColor) {
+ case 'red':
+ readerContent.style.color = 'red';
+ break;
+ case 'blue':
+ readerContent.style.color = 'blue';
+ break;
+ case 'green':
+ readerContent.style.color = 'green';
+ break;
+ case 'yellow':
+ readerContent.style.color = 'yellow';
+ break;
+ case 'purple':
+ readerContent.style.color = 'purple';
+ break;
+ default:
+ readerContent.style.color = '';
+ break;
+ }
savePreferences();
- }
- });
- fontColorDropdown.addEventListener('change', function() {
- const selectedColor = this.value;
- switch(selectedColor) {
- case 'red':
- readerContent.style.color = 'red';
- break;
- case 'blue':
- readerContent.style.color = 'blue';
- break;
- case 'green':
- readerContent.style.color = 'green';
- break;
- case 'yellow':
- readerContent.style.color = 'yellow';
- break;
- case 'purple':
- readerContent.style.color = 'purple';
- break;
- default:
- readerContent.style.color = '';
- break;
- }
- savePreferences();
- });
+ });
- // ------------------------------
- // START FOCUS MODE IF ACTIVE
- // ------------------------------
- if (focusModeActive) {
- console.log("DEBUG: Page loaded and focus mode active. Starting focus mode.");
- startFocusMode();
- }
+ // ------------------------------
+ // START FOCUS MODE IF ACTIVE
+ // ------------------------------
+ if (focusModeActive) {
+ console.log("DEBUG: Page loaded and focus mode active. Starting focus mode.");
+ startFocusMode();
+ }
- // Annotation mode and highlight/eraser tools
- const highlightToggle = document.getElementById('highlight-toggle');
- const eraserToggle = document.getElementById('eraser-toggle');
- let activeTool = null;
-
- function setActiveTool(tool) {
- activeTool = tool;
- highlightToggle.classList.toggle('bg-primary-200', tool === 'highlight');
- eraserToggle.classList.toggle('bg-primary-200', tool === 'eraser');
- annotationToggle.classList.toggle('bg-primary-200', tool === 'annotation');
- document.body.style.cursor = tool === 'highlight' || tool === 'eraser' || tool === 'annotation' ? 'text' : 'default';
- }
+ // Annotation mode and highlight/eraser tools
+ const highlightToggle = document.getElementById('highlight-toggle');
+ const eraserToggle = document.getElementById('eraser-toggle');
+ let activeTool = null;
+
+ function setActiveTool(tool) {
+ activeTool = tool;
+ highlightToggle.classList.toggle('bg-primary-200', tool === 'highlight');
+ eraserToggle.classList.toggle('bg-primary-200', tool === 'eraser');
+ annotationToggle.classList.toggle('bg-primary-200', tool === 'annotation');
+ document.body.style.cursor = tool === 'highlight' || tool === 'eraser' || tool === 'annotation' ?
+ 'text' : 'default';
+ }
- highlightToggle.addEventListener('click', function() {
- setActiveTool('highlight');
- });
+ highlightToggle.addEventListener('click', function () {
+ setActiveTool('highlight');
+ });
- eraserToggle.addEventListener('click', function() {
- setActiveTool('eraser');
- });
+ eraserToggle.addEventListener('click', function () {
+ setActiveTool('eraser');
+ });
- annotationToggle.addEventListener('click', function() {
- setActiveTool('annotation');
- });
+ annotationToggle.addEventListener('click', function () {
+ setActiveTool('annotation');
+ });
- document.addEventListener('mouseup', function() {
- const selectedText = window.getSelection().toString().trim();
- if (activeTool === 'highlight' && selectedText) {
- highlightText(selectedText);
- savePreferences();
- } else if (activeTool === 'eraser' && selectedText) {
- removeHighlight(selectedText);
- savePreferences();
- } else if (activeTool === 'annotation' && selectedText) {
- addAnnotation(selectedText);
- savePreferences();
- }
- });
+ document.addEventListener('mouseup', function () {
+ const selectedText = window.getSelection().toString().trim();
+ if (activeTool === 'highlight' && selectedText) {
+ highlightText(selectedText);
+ savePreferences();
+ } else if (activeTool === 'eraser' && selectedText) {
+ removeHighlight(selectedText);
+ savePreferences();
+ } else if (activeTool === 'annotation' && selectedText) {
+ addAnnotation(selectedText);
+ savePreferences();
+ }
+ });
- function addAnnotation(text, note = '') {
- console.log('Adding annotation for text:', text);
- const content = readerContent.innerHTML;
- const annotatedContent = content.replace(new RegExp(text, 'gi'), match => `${match}`);
- readerContent.innerHTML = annotatedContent;
- const annotationElement = document.createElement('div');
- annotationElement.className = 'annotation-box';
- annotationElement.innerHTML = `
+ function addAnnotation(text, note = '') {
+ console.log('Adding annotation for text:', text);
+ const content = readerContent.innerHTML;
+ const annotatedContent = content.replace(new RegExp(text, 'gi'), match =>
+ `${match}`);
+ readerContent.innerHTML = annotatedContent;
+ const annotationElement = document.createElement('div');
+ annotationElement.className = 'annotation-box';
+ annotationElement.innerHTML = `
`;
- document.body.appendChild(annotationElement);
- annotationElement.querySelector('.delete-annotation').addEventListener('click', function() {
- annotationElement.remove();
- removeAnnotation(text);
+ document.body.appendChild(annotationElement);
+ annotationElement.querySelector('.delete-annotation').addEventListener('click', function () {
+ annotationElement.remove();
+ removeAnnotation(text);
+ savePreferences();
+ });
+ annotationElement.querySelector('.edit-annotation').addEventListener('click', function () {
+ annotationElement.querySelector('.annotation-note').disabled = false;
+ });
+ annotationElement.querySelector('.save-annotation').addEventListener('click', function () {
+ annotationElement.querySelector('.annotation-note').disabled = true;
+ savePreferences();
+ });
savePreferences();
+ }
+
+ function removeAnnotation(text) {
+ const content = readerContent.innerHTML;
+ const unannotatedContent = content.replace(
+ /(.*?)<\/span>/gi, (match, p1,
+ p2) => {
+ return p1.includes(text) ? p2 : match;
+ });
+ readerContent.innerHTML = unannotatedContent;
+ }
+ });
+ const colorBlindDropdown = document.getElementById('color-blind');
+
+ colorBlindDropdown.addEventListener('change', function () {
+ const selectedValue = this.value;
+ // Get all images within the reader content container
+ const images = document.querySelectorAll('#reader-content img');
+
+ // Remove any previously applied filter classes from all images
+ images.forEach(img => {
+ img.classList.remove('deuteranomaly-filter', 'protanomaly-filter', 'deuteranopia-filter',
+ 'protanopia-filter');
});
- annotationElement.querySelector('.edit-annotation').addEventListener('click', function() {
- annotationElement.querySelector('.annotation-note').disabled = false;
- });
- annotationElement.querySelector('.save-annotation').addEventListener('click', function() {
- annotationElement.querySelector('.annotation-note').disabled = true;
- savePreferences();
+
+ // Apply the appropriate filter based on the user's selection
+ if (selectedValue === 'deuteranomaly') {
+ images.forEach(img => img.classList.add('deuteranomaly-filter'));
+ } else if (selectedValue === 'protanomaly') {
+ images.forEach(img => img.classList.add('protanomaly-filter'));
+ } else if (selectedValue === 'deuteranopia') {
+ images.forEach(img => img.classList.add('deuteranopia-filter'));
+ } else if (selectedValue === 'protanopia') {
+ images.forEach(img => img.classList.add('protanopia-filter'));
+ }
+ // If "default" is selected, no extra filter classes are applied.
+ });
+ document.addEventListener('DOMContentLoaded', function () {
+ // Get button and container elements for each dropdown
+ const btnFontColor = document.getElementById('toggle-font-color');
+ const btnFontFamily = document.getElementById('toggle-font-family');
+ const btnColorBlind = document.getElementById('toggle-color-blind');
+
+ const containerFontColor = document.getElementById('dropdown-font-color');
+ const containerFontFamily = document.getElementById('dropdown-font-family');
+ const containerColorBlind = document.getElementById('dropdown-color-blind');
+
+ // Toggle font color dropdown
+ btnFontColor.addEventListener('click', function () {
+ containerFontColor.classList.toggle('hidden');
});
- savePreferences();
- }
- function removeAnnotation(text) {
- const content = readerContent.innerHTML;
- const unannotatedContent = content.replace(/(.*?)<\/span>/gi, (match, p1, p2) => {
- return p1.includes(text) ? p2 : match;
+ // Toggle font family dropdown
+ btnFontFamily.addEventListener('click', function () {
+ containerFontFamily.classList.toggle('hidden');
});
- readerContent.innerHTML = unannotatedContent;
- }
-});
-const colorBlindDropdown = document.getElementById('color-blind');
-colorBlindDropdown.addEventListener('change', function() {
- const selectedValue = this.value;
- // Get all images within the reader content container
- const images = document.querySelectorAll('#reader-content img');
+ // Toggle color blindness dropdown
+ btnColorBlind.addEventListener('click', function () {
+ containerColorBlind.classList.toggle('hidden');
+ });
+ // Close dropdowns when clicking outside
+ document.addEventListener('click', function (event) {
+ if (!containerFontColor.contains(event.target) && !btnFontColor.contains(event.target)) {
+ containerFontColor.classList.add('hidden');
+ }
+ if (!containerFontFamily.contains(event.target) && !btnFontFamily.contains(event.target)) {
+ containerFontFamily.classList.add('hidden');
+ }
+ if (!containerColorBlind.contains(event.target) && !btnColorBlind.contains(event.target)) {
+ containerColorBlind.classList.add('hidden');
+ }
+ });
- // Remove any previously applied filter classes from all images
- images.forEach(img => {
- img.classList.remove('deuteranomaly-filter', 'protanomaly-filter', 'deuteranopia-filter', 'protanopia-filter');
+ document.getElementById('font-color').addEventListener('change', function () {
+ containerFontColor.classList.add('hidden');
+ });
+ document.getElementById('font-family').addEventListener('change', function () {
+ containerFontFamily.classList.add('hidden');
+ });
+ document.getElementById('color-blind').addEventListener('change', function () {
+ containerColorBlind.classList.add('hidden');
+ });
});
-
- // Apply the appropriate filter based on the user's selection
- if (selectedValue === 'deuteranomaly') {
- images.forEach(img => img.classList.add('deuteranomaly-filter'));
- } else if (selectedValue === 'protanomaly') {
- images.forEach(img => img.classList.add('protanomaly-filter'));
- } else if (selectedValue === 'deuteranopia') {
- images.forEach(img => img.classList.add('deuteranopia-filter'));
- } else if (selectedValue === 'protanopia') {
- images.forEach(img => img.classList.add('protanopia-filter'));
- }
- // If "default" is selected, no extra filter classes are applied.
-});
-document.addEventListener('DOMContentLoaded', function() {
- // Get button and container elements for each dropdown
- const btnFontColor = document.getElementById('toggle-font-color');
- const btnFontFamily = document.getElementById('toggle-font-family');
- const btnColorBlind = document.getElementById('toggle-color-blind');
-
- const containerFontColor = document.getElementById('dropdown-font-color');
- const containerFontFamily = document.getElementById('dropdown-font-family');
- const containerColorBlind = document.getElementById('dropdown-color-blind');
-
- // Toggle font color dropdown
- btnFontColor.addEventListener('click', function() {
- containerFontColor.classList.toggle('hidden');
- });
-
- // Toggle font family dropdown
- btnFontFamily.addEventListener('click', function() {
- containerFontFamily.classList.toggle('hidden');
- });
-
- // Toggle color blindness dropdown
- btnColorBlind.addEventListener('click', function() {
- containerColorBlind.classList.toggle('hidden');
- });
- // Close dropdowns when clicking outside
- document.addEventListener('click', function(event) {
- if (!containerFontColor.contains(event.target) && !btnFontColor.contains(event.target)) {
- containerFontColor.classList.add('hidden');
- }
- if (!containerFontFamily.contains(event.target) && !btnFontFamily.contains(event.target)) {
- containerFontFamily.classList.add('hidden');
- }
- if (!containerColorBlind.contains(event.target) && !btnColorBlind.contains(event.target)) {
- containerColorBlind.classList.add('hidden');
- }
- });
-
- document.getElementById('font-color').addEventListener('change', function() {
- containerFontColor.classList.add('hidden');
- });
- document.getElementById('font-family').addEventListener('change', function() {
- containerFontFamily.classList.add('hidden');
- });
- document.getElementById('color-blind').addEventListener('change', function() {
- containerColorBlind.classList.add('hidden');
- });
-});
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/app/templates/settings.html b/app/templates/settings.html
index 5c27155..0e053e3 100644
--- a/app/templates/settings.html
+++ b/app/templates/settings.html
@@ -16,6 +16,7 @@