accessibility fn

public/css/styles.css

@@ -22,6 +22,7 @@ body {
 	background-position: 0px calc(100vh / 2.2);
 	background-size: cover;
 	background-repeat: repeat-x;	
+	
 }
 
 ::-webkit-scrollbar {
@@ -57,12 +58,70 @@ hr {
 }
 
 #access-tab {
-	width: 200px;
+	width: 50px;
-	height: 200px;
+	height: 50px;
 	position: absolute;
 	bottom: 20px;
+	overflow: hidden;
 	right: 20px;
-	background-color: #0075FF;
+}
+
+#access-tab img {
+	height: 100%;
+	width: auto;
+	cursor: pointer;
+}
+
+#access-container {
+	display: none;
+	gap: 10px;
+	flex-direction: column;
+	width: fit-content;
+	height: fit-content;
+	position: absolute;
+	transition: right 0.5s ease-in-out;
+	bottom: 90px;
+	right: -100%;
+}
+
+#access-underline {
+	text-decoration: underline;
+}
+
+#access-grayscale {
+	color: black;
+}
+
+.access-item {
+    opacity: 0;
+    transform: translateX(100%);
+    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
+}
+
+.access-item.animate {
+    opacity: 1;
+    transform: translateX(0);
+}
+
+.access-item.hide {
+    opacity: 0;
+    transform: translateX(100%);
+}
+
+.access-element {
+	border-color: #0075FF;
+	background-size: cover; /* or contain, depending on your preference */
+	background-color: #ffffff;
+	background-repeat:repeat;
+	border-radius: 30px;
+	padding: 10px;
+	padding-left: 25px;
+	padding-right: 25px;
+	border: 1px solid;
+	text-align: center;
+	/* font-family: 'Syne Mono', monospace; */
+	color: #0075FF;
+	cursor: pointer;
 }
 
 #nav-bar {
@@ -105,7 +164,7 @@ hr {
 	padding-top: 0px;
 	flex-direction: row;
 	gap: 50px;
-	padding-bottom: 50px;
+	padding-bottom: 0px;
 	padding-left: 50px;
 	padding-right: 50px;
 	overflow-y: scroll;
@@ -114,12 +173,13 @@ hr {
 }
 
 #index-info {
-	flex-basis: 55%;
+	flex: 5.5;
 	display: flex;
 	flex-direction: column;
 	gap: 25px;
 	padding-top: 25px;
-
+	overflow-y: scroll;
+	padding-bottom: 25px;
 }
 
 #index-info p{
@@ -127,10 +187,12 @@ hr {
 	line-height: 30px;
 	text-align: justify;
 	text-indent: 2rem;
+	flex-wrap: wrap;
+	text-wrap:wrap;
 }
 
 #container-index {
-	flex-basis: 45%;
+	flex: 4.5;
 	min-height: 400px;
 }
 
@@ -157,6 +219,7 @@ hr {
 	font-size: 20px;
 	color:#ffffff;
 	font-weight: 400;
+	flex-wrap: wrap;
 }
 
 .hyperlink {
@@ -648,6 +711,7 @@ animation: 2s fadeInUp;
 		flex-basis: 0%;
 		flex-direction: column-reverse;
 		padding-top: 0px;
+		overflow-y: visible;
 		
 	}
 
@@ -668,6 +732,7 @@ animation: 2s fadeInUp;
 		padding-right: 25px;
 		padding-top: 0px;
 		gap: 0px;
+		overflow-y: scroll;
 	}
 
 	#nav-bar {

public/js/accessibility.js

@@ -1,17 +1,82 @@
-// script.js
 document.addEventListener('DOMContentLoaded', () => {
-    const increaseButton = document.getElementById('access-tab');
+    var accessOpen = false;
+    var grayscale = false;
+    var underline = false;
+    const accessBtn = document.getElementById('access-tab');
+    const accessCtn = document.getElementById('access-container')
+
     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');
+    const elements_underline = document.querySelectorAll('#page-header a, a, .hyperlink, #hyperlink-container a, .hyperlink-header');
+
+    const accessTextIncrease = document.getElementById('access-increase-text-size');
+    const accessTextDecrease = document.getElementById('access-decrease-text-size');
+    const accessUnderline = document.getElementById('access-underline');
+    const accessGrayscale = document.getElementById('access-grayscale');
+    const accessReset = document.getElementById('access-reset');
+
+    const accessItems = document.querySelectorAll('.access-item'); // New: Select access items
+
+    // Map to store original font sizes and line heights
+    const originalStyles = new Map();
+
+    // Store original styles
+    elements.forEach(element => {
+        const computedStyle = window.getComputedStyle(element);
+        originalStyles.set(element, {
+            fontSize: computedStyle.fontSize,
+            lineHeight: computedStyle.lineHeight
+        });
+    });
+
+    accessTextDecrease.addEventListener('click', () => {
+        adjustTextSize(0.9)
+    });
+
+    accessTextIncrease.addEventListener('click', () => {
+        adjustTextSize(1.1)
+    });
+
+    accessGrayscale.addEventListener('click', () => {
+        if (grayscale) {
+            deactivateGS();
+            grayscale = false;
+        } else {
+            activateGS();
+            grayscale = true;
+        }
+    });
 
-    increaseButton.addEventListener('click', () => {
+    accessUnderline.addEventListener('click', () => {
-        console.log("hello")
+        if (underline) {
-        adjustTextSize(1.1); // Increase text size by 10%
+            removeUnderline();
+            underline = false;
+        } else {
+            addUnderline();
+            underline = true;
+        }
     });
 
-    // decreaseButton.addEventListener('click', () => {
+    accessBtn.addEventListener('click', () => {
-    //     adjustTextSize(0.9); // Decrease text size by 10%
+        if (accessOpen) {
-    // });
+            // close i
+            accessCtn.style.display = 'none'
+            accessItems.forEach(item => item.classList.remove('animate')); // Remove animation classes
+            accessOpen = false;
+        } else {
+            // open it
+            
+            setTimeout(() => { // Ensure the display is set before starting the animation
+                accessCtn.style.right = '20px'; // Slide in
+            }, 10);
+             accessCtn.style.display = 'flex';
+            animateAccessItems(); // Animate items
+            accessOpen = true;
+        }
+    });
+
+    accessReset.addEventListener('click', () => {
+        reset();
+    });
 
     function adjustTextSize(factor) {
         elements.forEach(element => {
@@ -24,4 +89,54 @@ document.addEventListener('DOMContentLoaded', () => {
             element.style.lineHeight = `${newSize}px`;
         });  
     }
+
+    function addUnderline() {
+        elements_underline.forEach(element => {
+            element.style.textDecoration = 'underline';
+        });  
+    }
+
+    function removeUnderline() {
+        elements_underline.forEach(element => {
+            element.style.textDecoration = 'none';
+        });  
+    }
+
+    function activateGS() {
+        document.documentElement.style.filter = 'grayscale(1) contrast(150%)';
+    }
+
+    function deactivateGS() {
+        document.documentElement.style.filter = '';
+    }
+
+    function reset() {
+        // Reset grayscale and underline
+        deactivateGS();
+        removeUnderline();
+
+        // Reset text size and line height
+        elements.forEach(element => {
+            if (originalStyles.has(element)) {
+                const { fontSize, lineHeight } = originalStyles.get(element);
+                element.style.fontSize = fontSize;
+                element.style.lineHeight = lineHeight;
+            }
+        });
+
+        // Reset flags
+        grayscale = false;
+        underline = false;
+    }
+
+    function animateAccessItems() {
+        accessItems.forEach((item, index) => {
+            setTimeout(() => {
+                item.classList.add('animate');
+            }, index * 150); // Stagger animation by 100ms per item
+        });
+    }
+    
 });
+
+

templates/base.html

@@ -33,7 +33,16 @@
 <body id="scroll">
 	{% block content %}
 	{% endblock %}
-	<span id="access-tab"></span>
+	<div id="access-container">
+		<div class="access-element access-item" id="access-increase-text-size">+ Text Size</div>
+		<div class="access-element access-item" id="access-decrease-text-size">- Text Size</div>
+		<div class="access-element access-item" id="access-grayscale">Grayscale</div>
+		<div class="access-element access-item" id="access-underline">Links Underline</div>
+		<div class="access-element access-item" id="access-reset">&#x21BA; Reset</div>
+	</div>
+	<div id="access-tab">
+			<img src="{{ url_for('static', filename='images/access.png') }}" title="access">
+	</div>
 	<script type="module" src="{{ url_for('static', filename='js/accessibility.js') }}"></script>
 </body>
 </html>

templates/index.html

@@ -10,6 +10,24 @@
 				<p>
 					Beta is a new festival of art and technology critically engaging with the impact of emerging technologies on society. Taking Ireland’s role as a central node in today's wired world as a starting point, Beta will showcase and celebrate Ireland’s research and artistic communities through a combination of creativity, debate and experimentation. Beta allows members of the public to engage playfully and critically with new technologies essentially beta testing ethical issues facing society.
 				</p>
+				<p>
+					Beta is a new festival of art and technology critically engaging with the impact of emerging technologies on society. Taking Ireland’s role as a central node in today's wired world as a starting point, Beta will showcase and celebrate Ireland’s research and artistic communities through a combination of creativity, debate and experimentation. Beta allows members of the public to engage playfully and critically with new technologies essentially beta testing ethical issues facing society.
+				</p>
+				<p>
+					Beta is a new festival of art and technology critically engaging with the impact of emerging technologies on society. Taking Ireland’s role as a central node in today's wired world as a starting point, Beta will showcase and celebrate Ireland’s research and artistic communities through a combination of creativity, debate and experimentation. Beta allows members of the public to engage playfully and critically with new technologies essentially beta testing ethical issues facing society.
+				</p>
+				<p>
+					Beta is a new festival of art and technology critically engaging with the impact of emerging technologies on society. Taking Ireland’s role as a central node in today's wired world as a starting point, Beta will showcase and celebrate Ireland’s research and artistic communities through a combination of creativity, debate and experimentation. Beta allows members of the public to engage playfully and critically with new technologies essentially beta testing ethical issues facing society.
+				</p>
+				<p>
+					Beta is a new festival of art and technology critically engaging with the impact of emerging technologies on society. Taking Ireland’s role as a central node in today's wired world as a starting point, Beta will showcase and celebrate Ireland’s research and artistic communities through a combination of creativity, debate and experimentation. Beta allows members of the public to engage playfully and critically with new technologies essentially beta testing ethical issues facing society.
+				</p>
+				<p>
+					Beta is a new festival of art and technology critically engaging with the impact of emerging technologies on society. Taking Ireland’s role as a central node in today's wired world as a starting point, Beta will showcase and celebrate Ireland’s research and artistic communities through a combination of creativity, debate and experimentation. Beta allows members of the public to engage playfully and critically with new technologies essentially beta testing ethical issues facing society.
+				</p>
+				<p>
+					Beta is a new festival of art and technology critically engaging with the impact of emerging technologies on society. Taking Ireland’s role as a central node in today's wired world as a starting point, Beta will showcase and celebrate Ireland’s research and artistic communities through a combination of creativity, debate and experimentation. Beta allows members of the public to engage playfully and critically with new technologies essentially beta testing ethical issues facing society.
+				</p>
 			<div id="hyperlink-container">
 				<a href="/exhibitions"><div class="hyperlink">