text increase button

2 months ago · 133b04bb5e
3 changed files with 39 additions and 0 deletions
--- a/public/css/styles.css
+++ b/public/css/styles.css
@ -9,6 +9,7 @@ body {
 	padding: 0;
 	overflow-x: hidden;
 	overflow-y: hidden;
+	font-size: 16px; /* Base font size */
 }

 #scroll {
@ -55,6 +56,15 @@ hr {
 	overflow-x: hidden;
 }

+#access-tab {
+	width: 200px;
+	height: 200px;
+	position: absolute;
+	bottom: 20px;
+	right: 20px;
+	background-color: #0075FF;
+}
+
 #nav-bar {
 	display: flex;
 	flex-direction: row;
--- a/public/js/accessibility.js
+++ b/public/js/accessibility.js
@ -0,0 +1,27 @@
+// script.js
+document.addEventListener('DOMContentLoaded', () => {
+    const increaseButton = document.getElementById('access-tab');
+    const elements = document.querySelectorAll('.text-content p, #index-info p, #hyperlink-container, #page-header, .list-title, .list-artists, .list-details, #article-title, #article-text, .page-info-title, .page-info-entry, #article-information, #article-book');
+    //const decreaseButton = document.getElementById('decreaseText');
+    
+    increaseButton.addEventListener('click', () => {
+        console.log("hello")
+        adjustTextSize(1.1); // Increase text size by 10%
+    });
+
+    // decreaseButton.addEventListener('click', () => {
+    //     adjustTextSize(0.9); // Decrease text size by 10%
+    // });
+
+    function adjustTextSize(factor) {
+        elements.forEach(element => {
+            // Get the current font size of the element
+            const currentSize = parseFloat(window.getComputedStyle(element, null).getPropertyValue('font-size'));
+            // Calculate the new size based on the factor
+            const newSize = currentSize * factor;
+            // Apply the new size to the element
+            element.style.fontSize = `${newSize}px`;
+            element.style.lineHeight = `${newSize}px`;
+        });  
+    }
+});
--- a/templates/base.html
+++ b/templates/base.html
@ -33,5 +33,7 @@
 <body id="scroll">
 	{% block content %}
 	{% endblock %}
+	<span id="access-tab"></span>
+	<script type="module" src="{{ url_for('static', filename='js/accessibility.js') }}"></script>
 </body>
 </html>