🔐 Zaloguj się aby edytować
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aria stany</title>
<style>
body{
font-family: sans-serif;
background-color: #f4f4f4;
padding: 2rem;
}
.tabs{
max-width: 700px;
margin: auto;
background-color: white;
border-radius: 10px;
padding: 1rem;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.tablist{
display: flex;
gap: 1rem;
margin-bottom: 1rem;
}
.tablist button{
background-color: #ddd;
border: none;
padding: 1rem;
cursor: pointer;
}
.tablist button[aria-selected="true"]{
background-color: #0077dd;
color: white;
}
.tabpanel{
display: none;
}
.tabpanel[aria-hidden="false"]{
display: block;
}
.tabpanel:focus{
outline: none;
}
.progressbar{
background-color: #eee;
height: 20px;
overflow: hidden;
}
.progress{
background-color: #0077dd;
height: 100%;
width: 0%;
transition: width 0.3s ease;
}
.percent-text{
margin-top: 0.5rem;
}
dialog[open]{
border-radius: 10px;
padding: 1rem;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.checkbox {
display: flex;
align-items: center;
padding: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
margin-bottom: 0.5rem;
cursor: pointer;
}
.checkbox:focus {
outline: 3px solid #007acc;
}
.checkbox .icon {
width: 20px;
height: 20px;
margin-right: 0.5rem;
border: 2px solid #007acc;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
background: white;
}
.checkbox[aria-checked="true"] .icon::before {
content: '\2713';
}
.checkbox[aria-checked="mixed"] .icon::before {
content: '\2013';
}
.checkbox[aria-checked="false"] .icon::before {
content: '';
}
.checkbox[data-group="all"] {
margin-left: 1.5rem;
}
</style>
</head>
<body>
<div class="tabs">
<div role="tablist" aria-label="Zakładki" class="tablist">
<button role="tab" id="tab1" aria-controls="panel1" aria-selected="true" tabindex="0">
Ustawienia
</button>
<button role="tab" id="tab2" aria-controls="panel2" aria-selected="false">
Pasek postępu
</button>
<button role="tab" id="tab3" aria-controls="panel3" aria-selected="false">
Wyszukiwarka
</button>
</div>
<div id="panel1" role="tabpanel" aria-labelledby="tab1" aria-hidden="false" class="tabpanel" tabindex="-1">
<p>Zarządzaj preferencjami powiadomień:</p>
<button onclick="openDialog()">Edytuj ustawienia</button>
<dialog id="myDialog" role="dialog" aria-modal="true" tabindex="-1" aria-labelledby="dialogTitle">
<h2 id="dialogTitle">Preferencje powiadomień</h2>
<div role="checkbox" class="checkbox" tabindex="0" aria-checked="mixed" id="allCheckbox">
<span class="icon"></span>Wszystkie powiadomienia
</div>
<div role="checkbox" class="checkbox" tabindex="0" aria-checked="false" data-group="all">
<span class="icon"></span>E-mail
</div>
<div role="checkbox" class="checkbox" tabindex="0" aria-checked="false" data-group="all">
<span class="icon"></span>SMS
</div>
<button onClick="closeDialog()">Zamknij</button>
</dialog>
</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" aria-hidden="true" class="tabpanel" tabindex="-1">
<p>Postęp ładowania danych:</p>
<div role="progressbar" id="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" aria-label="Postęp" class="progressbar">
<div class="progress" id="progress"></div>
</div>
<div id="percentText" class="percent-text" aria-live="polite">Postęp: 0%</div>
</div>
<div id="panel3" role="tabpanel" aria-labelledby="tab3" aria-hidden="true" class="tabpanel" tabindex="-1">
<h2>Wyszukiwarka użytkowników:</h2>
<p>Wpisz co najmniej 3 litery, aby rozpocząć wyszukiwanie.</p>
<section role="search">
<label for="searchInput">Szukaj po imieniu lub nazwisku:</label>
<input type="search" id="searchInput" placeholder="np.: Jan">
<button onclick="searchUsers()">Szukaj</button>
<div id="searchMessage" aria-live="polite"></div>
<ul id="results" class="results" role="region" aria-live="polite" aria-label="Wyniki wyszukiwania"></ul>
</section>
</div>
</div>
<script>
const tabs = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
tab.setAttribute('aria-selected', 'true');
panels.forEach(panel => panel.setAttribute('aria-hidden', 'true'));
const activePanel = document.getElementById(tab.getAttribute('aria-controls'));
activePanel.setAttribute('aria-hidden', 'false');
activePanel.focus();
if (tab.id === 'tab2') {
const bar = document.getElementById('progress');
const container = document.getElementById('progressbar');
const text = document.getElementById('percentText');
let value = 0;
let step = 0;
const steps = [20, 40, 60, 80, 100];
bar.style.width = '0%';
container.setAttribute('aria-valuenow', '0');
text.textContent = 'Postęp: 0%';
setTimeout(() => {
const interval = setInterval(() => {
value = steps[step];
bar.style.width = value + '%';
container.setAttribute('aria-valuenow', value);
text.textContent = 'Postęp: ' + value + '%';
step++;
if (step >= steps.length) clearInterval(interval);
}, 3000);
}, 5000);
}
});
});
function openDialog() {
const dialog = document.getElementById('myDialog');
dialog.showModal();
dialog.focus();
}
function closeDialog() {
document.getElementById('myDialog').close();
}
document.querySelectorAll('[role="checkbox"]').forEach(el => {
el.addEventListener('click', toggleCheckbox);
el.addEventListener('keydown', e => {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
toggleCheckbox.call(el);
}
});
});
function toggleCheckbox() {
let current = this.getAttribute('aria-checked');
let newState;
if (this.id === 'allCheckbox') {
newState = current === 'true' ? 'false' : 'true';
this.setAttribute('aria-checked', newState);
document.querySelectorAll('[data-group="all"]').forEach(el => el.setAttribute('aria-checked', newState));
} else {
newState = current === 'true' ? 'false' : 'true';
this.setAttribute('aria-checked', newState);
const all = document.getElementById('allCheckbox');
const children = Array.from(document.querySelectorAll('[data-group="all"]'));
const checked = children.filter(el => el.getAttribute('aria-checked') === 'true').length;
if (checked === 0) all.setAttribute('aria-checked', 'false');
else if (checked === children.length) all.setAttribute('aria-checked', 'true');
else all.setAttribute('aria-checked', 'mixed');
}
}
const users = ["Jan Kowalski", "Adam Kowalski", "Marcin Nowak", "Anna Nowak", "Zenon Nowak", "Tomasz Zieliński", "Katarzyna Wiśniewska"];
function searchUsers() {
const input = document.getElementById('searchInput').value.toLowerCase();
const results = document.getElementById('results');
results.innerHTML = '';
const filtered = users.filter(name => name.toLowerCase().includes(input));
if (filtered.length > 0) {
filtered.forEach(user => {
const li = document.createElement('li');
li.textContent = user;
results.appendChild(li);
});
} else {
const li = document.createElement('li');
li.textContent = 'Brak wyników.';
results.appendChild(li);
}
}
</script>
</body>
</html>