From ea9994cff7acc3c67970454ac69569c2a4d61846 Mon Sep 17 00:00:00 2001 From: "DANUSHKA\\danus" Date: Tue, 1 Apr 2025 10:01:09 +0200 Subject: [PATCH 1/6] initiated --- about.html | 80 ++++- css/styles.css | 833 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 57 +++- js/accordian.js | 75 +++++ 4 files changed, 1037 insertions(+), 8 deletions(-) create mode 100644 js/accordian.js diff --git a/about.html b/about.html index 5adbad6..922cafe 100644 --- a/about.html +++ b/about.html @@ -1,10 +1,82 @@ - + - About + About - Website Feedback - - + + + + +
+
+

About Our Website Feedback Initiative.

+

+ We are committed to making our website accessible to everyone. Your + feedback helps us improve and create a better experience for all + users. +

+
+ Accessibility illustration +
+ +
+

Accessibility Features

+
+
+

+ +

+ +
+ +
+

+ +

+ +
+
+
+
+
+ + + + \ No newline at end of file diff --git a/css/styles.css b/css/styles.css index e69de29..87be80d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -0,0 +1,833 @@ +/* Base styles with accessibility considerations */ +:root { + --primary-color: #2c3e50; + --background-color: #ffffff; + --accent-color: #0040a3; + /* Darker blue for better contrast */ + --error-color: #e74c3c; + --success-color: #27ae60; + --focus-outline: 3px solid var(--accent-color); + --focus-ring-color: rgba(0, 86, 179, 0.5); + --progress-bg: #edf2f7; + --text-color: #2c3e50; + --border-color: #e2e8f0; + --hover-bg: rgba(0, 0, 0, 0.05); + --transition-speed: 0.3s; +} + +/* Apply box-sizing border-box to all elements */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Checkbox styling */ +.checkbox-container { + display: flex; + align-items: center; + margin-bottom: 0.5rem; +} + +.checkbox-container input[type='checkbox'] { + width: auto; + margin-right: 0.5rem; +} + +select { + width: 100%; + padding: 0.5rem; + font-size: 1rem; + border-radius: 4px; + border: 1px solid var(--primary-color); +} + +.checkbox-container label { + margin-bottom: 0; +} + +.intro-section { + display: flex; + gap: 1rem; + align-items: center; + justify-content: space-between; +} + +/* Base styles for readability */ +body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, + sans-serif; + line-height: 1.6; + color: var(--primary-color); + background-color: var(--background-color); + margin: 0; + font-size: 16px; + max-width: 800px; + margin: 0 auto; + display: flex; + flex-direction: column; + min-height: 100vh; +} + +/* Skip link with enhanced visibility */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--accent-color); + color: white; + padding: 8px; + z-index: 100; + transition: top 0.3s; +} + +.skip-link:focus { + top: 0; + outline: var(--focus-outline); + outline-offset: 2px; +} + +/* Enhanced focus styles */ +:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; + border-radius: 2px; +} + +/* Progress bar styles */ +.quiz-progress { + margin: 2rem 0; +} + +/* Images */ +.decorative-image, +.info-image { + max-width: 15rem; + height: auto; + margin: 1rem 0; + border-radius: 4px; +} + +.progress-bar { + background-color: var(--progress-bg); + border-radius: 8px; + height: 20px; + overflow: hidden; + position: relative; +} + +.progress-fill { + background-color: var(--primary-color); + height: 100%; + transition: width 0.3s ease; + border-radius: 8px; +} + +.progress-text { + margin-top: 0.5rem; + text-align: center; + font-weight: 500; +} + +/* Question groups */ +.question-group { + margin-bottom: 2rem; + padding: 1rem; + border: 1px solid #e2e8f0; + border-radius: 8px; + background-color: #f8fafc; +} + +.question-heading { + color: var(--primary-color); + margin-bottom: 1rem; + font-size: 1.1rem; +} + +/* Form elements */ +fieldset { + border: 1px solid var(--primary-color); + margin: 1em 0; + padding: 1em; + border-radius: 4px; +} + +legend { + font-weight: bold; + padding: 0.5em 1em; + color: var(--primary-color); + background-color: #f8fafc; + border: 1px solid var(--primary-color); + border-radius: 4px; +} + +.radio-group { + margin: 1em 0; +} + +/* Enhanced radio button styling */ +.radio-option { + position: relative; + padding: 0.75em; + margin: 0.5em 0; + border-radius: 4px; + transition: background-color 0.2s; + display: flex; + align-items: center; +} + +.radio-option:hover { + background-color: rgba(44, 62, 80, 0.1); +} + +/* Custom radio button styling */ +input[type='radio'] { + margin-right: 0.75em; + width: 20px; + height: 20px; +} + +input[type='radio']:focus-visible+label { + outline: var(--focus-outline); + outline-offset: 2px; + border-radius: 2px; +} + +input[type='radio']+label { + cursor: pointer; + padding: 4px 8px; + border-radius: 4px; + transition: background-color 0.2s; + flex: 1; +} + +/* Instructions section */ +.quiz-instructions { + background-color: #f8f9fa; + padding: 1em; + margin: 1em 0; + border-left: 4px solid var(--accent-color); + border-radius: 0 4px 4px 0; +} + +/* Submit button */ +.form-controls { + margin-top: 2rem; + text-align: center; +} + +.submit-button { + background-color: var(--primary-color); + color: white; + border: none; + padding: 12px 24px; + font-size: 1rem; + cursor: pointer; + border-radius: 4px; + transition: background-color 0.2s, transform 0.1s; + font-weight: 500; +} + +.submit-button:hover { + background-color: #34495e; +} + +.submit-button:active { + transform: scale(0.98); +} + +.submit-button:focus-visible { + outline: var(--focus-outline); + outline-offset: 2px; +} + +/* Results section */ +#results { + margin-top: 2rem; + padding: 1.5rem; + border-radius: 8px; + background-color: #f8fafc; + border: 1px solid var(--primary-color); + margin-bottom: 3rem; +} + +.feedback-details { + margin-top: 1rem; + padding: 1rem; + border-radius: 4px; +} + +#feedback-form { + margin-bottom: 3rem; +} + +/* Utility classes */ +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* High contrast mode */ +@media (prefers-contrast: more) { + :root { + --primary-color: #000000; + --background-color: #ffffff; + --accent-color: #0000ff; + --error-color: #ff0000; + --success-color: #008000; + --text-color: #000000; + --border-color: #000000; + --hover-bg: #000000; + --focus-outline: 3px solid #000000; + --focus-ring-color: #000000; + --progress-bg: #ffffff; + } + + body { + background-color: var(--background-color); + color: var(--text-color); + } + + a { + color: var(--accent-color); + text-decoration: underline; + } + + button, + input, + select, + textarea { + border: 2px solid var(--text-color); + background-color: var(--background-color); + color: var(--text-color); + } + + fieldset { + border: 2px solid var(--text-color); + } + + legend { + border: 2px solid var(--text-color); + background-color: var(--background-color); + } + + .radio-option:hover, + .checkbox-container:hover { + background-color: var(--hover-bg); + } + + .progress-bar { + border: 2px solid var(--text-color); + } + + .progress-fill { + background-color: var(--text-color); + } +} + +/* Reduced motion */ +@media (prefers-reduced-motion: reduce) { + * { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } + + .progress-fill { + transition: none; + } + + .skip-link { + transition: none; + } + + button, + input, + select, + textarea { + transition: none; + } +} + +/* Add a class for manual high contrast toggle */ +.high-contrast-mode { + --primary-color: #000000 !important; + --background-color: #ffffff !important; + --accent-color: #0000ff !important; + --error-color: #ff0000 !important; + --success-color: #008000 !important; + --text-color: #000000 !important; + --border-color: #000000 !important; + --hover-bg: #000000 !important; + --focus-outline: 3px solid #000000 !important; + --focus-ring-color: #000000 !important; + --progress-bg: #ffffff !important; +} + +/* Basic responsive design */ +@media (max-width: 600px) { + fieldset { + padding: 0.5em; + } + + header { + padding: 1.25rem; + } + + nav ul { + gap: 0.75rem; + } +} + +/* User Info Form */ +#user-info { + margin-bottom: 2rem; + padding: 1.5rem; + background-color: #f8fafc; + border-radius: 8px; + border: 1px solid #e2e8f0; +} + +.form-control { + margin-bottom: 1.5rem; + position: relative; +} + +.form-control label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--primary-color); +} + +.form-control input { + width: 100%; + padding: 0.75rem; + font-size: 1rem; + border: 1px solid var(--primary-color); + border-radius: 4px; + transition: border-color 0.2s, box-shadow 0.2s; + box-sizing: border-box; +} + +.form-control input:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 0 3px var(--focus-ring-color); +} + +.form-control input[aria-invalid='true'] { + border-color: var(--error-color); +} + +.form-control input[aria-invalid='true']:focus { + box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.25); +} + +.error { + color: var(--error-color); + font-size: 0.875rem; + margin-top: 0.25rem; +} + +.hint { + color: var(--secondary-color); + font-size: 0.875rem; + margin-top: 0.25rem; +} + +/* Introduction section and images */ +#introduction { + padding: 2rem; + margin-bottom: 2rem; + background-color: #f8fafc; + border-radius: 12px; +} + +#introduction h2 { + color: var(--primary-color); + font-size: 2rem; + margin-bottom: 1.5rem; +} + +#introduction p { + max-width: 800px; + margin: 0 auto 2rem; +} + +.hero-images { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + margin: 2rem 0; +} + +.decorative-image, +.info-image { + max-width: 100%; + height: auto; + border-radius: 8px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +.info-image { + padding: 1rem; + background: white; +} + +@media (min-width: 768px) { + .hero-images { + flex-direction: row; + justify-content: center; + gap: 3rem; + } + + .decorative-image, + .info-image { + width: 45%; + max-width: 400px; + } +} + +/* Full-width banner */ +#banner { + margin: -20px -20px 2rem; + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + overflow: hidden; +} + +#banner img { + width: 100%; + height: 200px; + object-fit: cover; +} + +h1, +h2 { + margin-bottom: 1rem; +} + +nav ul { + list-style: none; + padding: 0; + display: flex; + gap: 1rem; +} + +nav a { + color: var(--accent-color); + text-decoration: none; +} + +nav a:hover { + text-decoration: underline; +} + +/* About page specific styles */ +#about { + padding: 3rem; + background-color: #f8fafc; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); +} + +#about h2 { + color: #2c3e50; + font-size: 2.5rem; + margin-bottom: 1.5rem; + border-bottom: 3px solid #3498db; + padding-bottom: 0.5rem; + display: inline-block; +} + +#about p { + font-size: 1.2rem; + line-height: 1.8; + color: #34495e; + margin-bottom: 2rem; + max-width: 700px; +} + +#about .hero-images { + margin: 3rem 0; + display: flex; + justify-content: center; +} + +#about .hero-images img { + max-width: 100%; + height: auto; + border-radius: 12px; + box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease; +} + +#about .hero-images img:hover { + transform: scale(1.02); +} + +/* Header improvements */ +#header { + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + background-color: var(--primary-color); + color: white; + padding: 2rem 0; +} + +#header .header-content { + max-width: 800px; + margin: 0 auto; + padding: 0 1rem; +} + +#header h1 { + color: white; + margin-bottom: 1rem; +} + +#header nav ul { + list-style: none; + padding: 0; + margin: 1rem 0; + display: flex; + gap: 2rem; +} + +#header nav a { + color: white; + text-decoration: none; + font-size: 1.1rem; + font-weight: 500; + padding: 0.5rem 1rem; + border-radius: 6px; + transition: opacity var(--transition-speed); +} + +#header nav a:hover { + opacity: 0.8; + background-color: rgba(255, 255, 255, 0.1); +} + +@media (max-width: 600px) { + #header { + padding: 1.5rem 0; + } + + #header nav ul { + gap: 1rem; + } +} + +/* Accordion Styles */ +.accordion-container { + margin: 2rem 0; + max-width: 800px; +} + +.accordion-container h3 { + margin-bottom: 1rem; + color: var(--primary-color); +} + +.accordion { + border: 1px solid var(--border-color); + border-radius: 4px; +} + +.accordion-item { + border-bottom: 1px solid var(--border-color); +} + +.accordion-item:last-child { + border-bottom: none; +} + +/* Remove margins from h4 in accordion items */ +.accordion-item h4 { + margin: 0; +} + +.accordion-button { + width: 100%; + padding: 2rem; + background: none; + border: none; + text-align: left; + font-size: 1.1rem; + font-weight: 600; + color: var(--primary-color); + cursor: pointer; + display: flex; + justify-content: space-between; + align-items: center; + transition: background-color var(--transition-speed) ease; +} + +.accordion-button:hover { + background-color: var(--hover-bg); +} + +.accordion-button:focus-visible { + outline: var(--focus-outline); + outline-offset: -2px; +} + +.accordion-icon { + display: inline-block; + width: 1.2rem; + height: 1.2rem; + position: relative; + transition: transform var(--transition-speed) ease; +} + +.accordion-icon::before, +.accordion-icon::after { + content: ''; + position: absolute; + background-color: currentColor; + transition: transform var(--transition-speed) ease; +} + +.accordion-icon::before { + width: 2px; + height: 1.2rem; + left: 50%; + transform: translateX(-50%); +} + +.accordion-icon::after { + width: 1.2rem; + height: 2px; + top: 50%; + transform: translateY(-50%); +} + +.accordion-button[aria-expanded='true'] .accordion-icon::before { + transform: translateX(-50%) rotate(90deg); +} + +.accordion-content { + padding: 0 1rem; + overflow: hidden; + transition: max-height var(--transition-speed) ease-out; +} + +.accordion-content[hidden] { + display: none; +} + +.accordion-content:not([hidden]) { + padding-bottom: 1rem; +} + +/* High contrast mode support */ +.high-contrast-mode .accordion-button { + border: 2px solid var(--primary-color); + margin: 0.5rem; +} + +.high-contrast-mode .accordion-button:hover { + background-color: var(--primary-color); + color: white; +} + +/* Footer styles */ +footer { + width: 100vw; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + background-color: var(--primary-color); + color: white; + padding: 2rem 0; + margin-top: auto; +} + +.footer-content { + max-width: 800px; + margin: 0 auto; + padding: 0 1rem; + display: grid; + gap: 2rem; +} + +.footer-content nav { + margin-bottom: 1rem; +} + +.footer-content h3 { + color: white; + margin-bottom: 1rem; + font-size: 1.2rem; +} + +.footer-content ul { + list-style: none; + padding: 0; + margin: 0; +} + +.footer-content a { + color: white; + text-decoration: none; + padding: 0.5rem 0; + display: block; + transition: opacity var(--transition-speed); +} + +.footer-content a:hover { + opacity: 0.8; +} + +.footer-info { + grid-column: 1 / -1; + text-align: center; + padding-top: 1rem; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +@media (max-width: 600px) { + footer { + padding-bottom: 4rem; + } + + .footer-info { + margin-bottom: 10rem; + } + + .footer-content { + grid-template-columns: 1fr; + text-align: center; + } + + .footer-content nav { + margin-bottom: 2rem; + } +} + +/* Reduced motion support */ +@media (prefers-reduced-motion: reduce) { + + .accordion-button, + .accordion-icon, + .accordion-icon::before, + .accordion-icon::after, + .accordion-content { + transition: none; + } +} \ No newline at end of file diff --git a/index.html b/index.html index a9a33db..cb97c79 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,62 @@ - + - Title + Leave feedback -

This is the starting point.

+ + + +
+ +
+

Introduction

+

+ We value your feedback! Help us improve our website by sharing your + experience. +

+
+ +
+
+
+ + + - + \ No newline at end of file diff --git a/js/accordian.js b/js/accordian.js new file mode 100644 index 0000000..88250cd --- /dev/null +++ b/js/accordian.js @@ -0,0 +1,75 @@ +function initAccordion() { + const accordion = document.querySelector('.accordion'); + if (!accordion) return; + + const buttons = accordion.querySelectorAll('.accordion-button'); + + buttons.forEach((button, index) => { + button.addEventListener('keydown', (event) => { + const targetId = button.getAttribute('aria-controls'); + const targetPanel = document.getElementById(targetId); + + switch (event.key) { + case 'ArrowDown': + case 'ArrowRight': + event.preventDefault(); + const nextButton = buttons[(index + 1) % buttons.length]; + nextButton.focus(); + break; + case 'ArrowUp': + case 'ArrowLeft': + event.preventDefault(); + const prevButton = + buttons[(index - 1 + buttons.length) % buttons.length]; + prevButton.focus(); + break; + case 'Home': + event.preventDefault(); + buttons[0].focus(); + break; + case 'End': + event.preventDefault(); + buttons[buttons.length - 1].focus(); + break; + case ' ': + case 'Enter': + event.preventDefault(); + togglePanel(button, targetPanel); + break; + } + }); + + button.addEventListener('click', () => { + const targetId = button.getAttribute('aria-controls'); + const targetPanel = document.getElementById(targetId); + togglePanel(button, targetPanel); + }); + }); + + function togglePanel(button, panel) { + const isExpanded = button.getAttribute('aria-expanded') === 'true'; + const newExpandedState = !isExpanded; + + button.setAttribute('aria-expanded', newExpandedState); + + if (newExpandedState) { + panel.hidden = false; + + requestAnimationFrame(() => { + panel.style.maxHeight = panel.scrollHeight + 'px'; + }); + } else { + panel.style.maxHeight = '0'; + + panel.addEventListener( + 'transitionend', + () => { + panel.hidden = true; + }, + { once: true } + ); + } + } +} + +document.addEventListener('DOMContentLoaded', initAccordion); \ No newline at end of file From a15345689da2d62b79b619ef77f1de8ad0ba21b3 Mon Sep 17 00:00:00 2001 From: "DANUSHKA\\danus" Date: Tue, 1 Apr 2025 16:10:32 +0200 Subject: [PATCH 2/6] form added --- index.html | 144 ++++++++++++++++++++++++++++++++--------------------- js/main.js | 106 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 194 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index cb97c79..94496a4 100644 --- a/index.html +++ b/index.html @@ -1,62 +1,94 @@ - - - - Leave feedback - - - - - - -
- -
-

Introduction

-

- We value your feedback! Help us improve our website by sharing your - experience. -

-
- -
-
-
- -
-
- + +
+ +
-
+ + + + + + + + + - - \ No newline at end of file diff --git a/js/main.js b/js/main.js index e69de29..7093227 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,106 @@ +document.addEventListener('DOMContentLoaded', () => { + const introsection = document.getElementById('introduction'); + const userInnfoSection = document.getElementById('user-info'); + const announcer = document.getElementById('announcer'); + const intronContinueButton = document.getElementById('intro-continue'); + const UserInfoForm = document.getElementById('user-info-form'); + intronContinueButton.addEventListener('click', () => { + + introsection.hidden = true; + userInnfoSection.hidden = false; + window.location.hash = '#user-info'; + document - getElementById('name').focus(); + announcer.textContent = 'Please enter your name and email address.'; + + }); + + const emailInput = document.getElementById('email'); + const UserInfoInput = document.getElementById('user-info-form'); + const nameInput = document.getElementById('name'); + const emailError = document.getElementById('email-error'); + const nameError = document.getElementById('name-error'); + let userName = ''; + + function clearError(input, errorElement) { + input.removeAttribute('aria-invalid'); + input.removeAttribute('aria-describedby'); + errorElement.textContent = ''; + errorElement.hidden = true; + } + + + function showError(input, errorElement, message) { + input.setAttribute('aria-invalid', 'true'); + // input.setAttribute('aria-describedby', errorElement.id); + errorElement.textContent = message; + errorElement.hidden = false; + } + + function isValidEmail(email) { + return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); + } + + nameInput.addEventListener('input', () => { + if (nameInput.valid.trim()) { + clearError(nameInput, nameError); + + } else { + showError(nameInput, nameError, 'Please enter your name.'); + } + }); + emailInput.addEventListener('input', () => { + if (emailInput.value.trim()) { + + if (isValidEmail(emailInput.value)) { + clearError(emailInput, emailError); + } + } + + /* } else { + showError(emailInput, emailError, 'Please enter a valid email address.'); + } */ + }); + + + UserInfoForm.addEventListener('submit', (e) => { + e.preventDefault(); + let isValid = true; + if(!nameInput.value.trim()){ + showError(nameInput,nameError,'Please enter your name.'); + isValid = false; + nameInput.focus(); + }else{ + clearError(nameInput,nameError); + } + + + if(!emailInput.value.trim()){ + showError(emailInput,emailError,'Please enter your email address.'); + isValid = false; + if(!nameError.textContent){ + emailInput.focus(); + } + + }else if(!isValidEmail(emailInput.value.trim())){ + showError(emailInput,emailError,'Please enter a valid email address.'); + isValid = false; + if(!nameError.textContent){ + emailInput.focus(); + } + } + else{ + clearError(emailInput,emailError); + } + + if (isValid) { + userName = nameInput.value.trim(); + userInnfoSection.hidden = true; + const welcomeMessage = `we move to feedback section, ${userName}!`; + announcer.textContent = welcomeMessage; + document.getElementById('welcome').textContent = welcomeMessage; + document.getElementById('continue').focus(); + } + + }); + +}); \ No newline at end of file From 654d89256eccf8c5cfa5d2890f41d517b752a7c9 Mon Sep 17 00:00:00 2001 From: "DANUSHKA\\danus" Date: Thu, 3 Apr 2025 14:57:06 +0200 Subject: [PATCH 3/6] feedback forma added --- index.html | 81 ++++++++++++++++++++++++++++++-- js/main.js | 134 ++++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 196 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 94496a4..11e5c25 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@

Introduction

- + - + + + + + + + + + + + + +