diff --git a/public/css/styles.css b/public/css/styles.css
index 4a4bf22..371907c 100644
--- a/public/css/styles.css
+++ b/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;
- height: 200px;
+ width: 50px;
+ 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 {
diff --git a/public/images/access.png b/public/images/access.png
new file mode 100644
index 0000000..41ae6ae
Binary files /dev/null and b/public/images/access.png differ
diff --git a/public/js/accessibility.js b/public/js/accessibility.js
index b3bd19e..2cf9b6b 100644
--- a/public/js/accessibility.js
+++ b/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');
-
- increaseButton.addEventListener('click', () => {
- console.log("hello")
- adjustTextSize(1.1); // Increase text size by 10%
+ 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
+ });
});
- // decreaseButton.addEventListener('click', () => {
- // adjustTextSize(0.9); // Decrease text size by 10%
- // });
+ accessTextDecrease.addEventListener('click', () => {
+ adjustTextSize(0.9)
+ });
+
+ accessTextIncrease.addEventListener('click', () => {
+ adjustTextSize(1.1)
+ });
+
+ accessGrayscale.addEventListener('click', () => {
+ if (grayscale) {
+ deactivateGS();
+ grayscale = false;
+ } else {
+ activateGS();
+ grayscale = true;
+ }
+ });
+
+ accessUnderline.addEventListener('click', () => {
+ if (underline) {
+ removeUnderline();
+ underline = false;
+ } else {
+ addUnderline();
+ underline = true;
+ }
+ });
+
+ accessBtn.addEventListener('click', () => {
+ 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`;
});
}
-});
\ No newline at end of file
+
+ 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
+ });
+ }
+
+});
+
+
diff --git a/templates/base.html b/templates/base.html
index ca24a67..07571b6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -33,7 +33,16 @@
{% block content %}
{% endblock %}
-
+
+
+ Text Size
+
- Text Size
+
Grayscale
+
Links Underline
+
↺ Reset
+
+
 }} "access")
+