wehub-resource-sync
91e75e620b
CI: cua-driver distro-compat matrix / debian:12 (glibc 2.36) (push) Has been cancelled
CI: SPDX Headers / Check SPDX headers (warn-only) (push) Has been cancelled
CD: Docs MCP Server / build (linux/amd64) (push) Has been cancelled
CD: Docs MCP Server / build (linux/arm64) (push) Has been cancelled
CD: Docs MCP Server / merge (push) Has been cancelled
CI: cua-driver distro-compat matrix / Resolve release version (push) Has been cancelled
CI: cua-driver distro-compat matrix / fedora:41 (glibc 2.40) (push) Has been cancelled
CI: cua-driver distro-compat matrix / rockylinux:9 (glibc 2.34) (push) Has been cancelled
CI: cua-driver distro-compat matrix / ubuntu:22.04 (glibc 2.35) (push) Has been cancelled
CI: cua-driver distro-compat matrix / ubuntu:24.04 (glibc 2.39) (push) Has been cancelled
CI: cua-driver distro-compat matrix / Distro compat summary (push) Has been cancelled
CI: Rust Linux unit / Rust Linux unit and compile (push) Has been cancelled
CI: Rust Windows unit / Rust Windows unit and compile (push) Has been cancelled
CI: Nix Linux Rust source / Nix / compositor build (push) Has been cancelled
CI: Nix Linux Rust source / Nix / driver package (push) Has been cancelled
CI: Nix Linux Rust source / Nix / Rust unit tests (push) Has been cancelled
194 lines
7.0 KiB
HTML
194 lines
7.0 KiB
HTML
<main
|
|
class="flex flex-col h-full w-full p-6 overflow-auto"
|
|
role="main"
|
|
aria-label="Toggle switch settings interface"
|
|
>
|
|
<div class="max-w-md mx-auto w-full">
|
|
<h1 class="text-xl font-semibold text-gray-900 mb-6">Settings</h1>
|
|
|
|
<div class="bg-white border border-gray-300 rounded-lg shadow-sm divide-y divide-gray-200">
|
|
<!-- Notifications Toggle -->
|
|
<div class="p-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<iconify-icon
|
|
icon="mdi:bell"
|
|
class="text-gray-600"
|
|
style="font-size: 1.5rem"
|
|
></iconify-icon>
|
|
<div>
|
|
<p class="font-medium text-gray-900">Notifications</p>
|
|
<p class="text-sm text-gray-500">Enable push notifications</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="toggle-notifications"
|
|
class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
role="switch"
|
|
aria-checked="false"
|
|
aria-label="Toggle notifications"
|
|
data-setting="notifications"
|
|
>
|
|
<span
|
|
class="toggle-thumb inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Dark Mode Toggle -->
|
|
<div class="p-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<iconify-icon
|
|
icon="mdi:weather-night"
|
|
class="text-gray-600"
|
|
style="font-size: 1.5rem"
|
|
></iconify-icon>
|
|
<div>
|
|
<p class="font-medium text-gray-900">Dark Mode</p>
|
|
<p class="text-sm text-gray-500">Use dark theme</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="toggle-dark_mode"
|
|
class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
role="switch"
|
|
aria-checked="false"
|
|
aria-label="Toggle dark mode"
|
|
data-setting="dark_mode"
|
|
>
|
|
<span
|
|
class="toggle-thumb inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Auto Save Toggle -->
|
|
<div class="p-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<iconify-icon
|
|
icon="mdi:content-save-auto"
|
|
class="text-gray-600"
|
|
style="font-size: 1.5rem"
|
|
></iconify-icon>
|
|
<div>
|
|
<p class="font-medium text-gray-900">Auto Save</p>
|
|
<p class="text-sm text-gray-500">Automatically save changes</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="toggle-auto_save"
|
|
class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
role="switch"
|
|
aria-checked="true"
|
|
aria-label="Toggle auto save"
|
|
data-setting="auto_save"
|
|
>
|
|
<span
|
|
class="toggle-thumb inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- WiFi Toggle -->
|
|
<div class="p-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<iconify-icon
|
|
icon="mdi:wifi"
|
|
class="text-gray-600"
|
|
style="font-size: 1.5rem"
|
|
></iconify-icon>
|
|
<div>
|
|
<p class="font-medium text-gray-900">WiFi</p>
|
|
<p class="text-sm text-gray-500">Connect to wireless networks</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="toggle-wifi"
|
|
class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full bg-gray-300 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
role="switch"
|
|
aria-checked="false"
|
|
aria-label="Toggle WiFi"
|
|
data-setting="wifi"
|
|
>
|
|
<span
|
|
class="toggle-thumb inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Bluetooth Toggle -->
|
|
<div class="p-4 flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<iconify-icon
|
|
icon="mdi:bluetooth"
|
|
class="text-gray-600"
|
|
style="font-size: 1.5rem"
|
|
></iconify-icon>
|
|
<div>
|
|
<p class="font-medium text-gray-900">Bluetooth</p>
|
|
<p class="text-sm text-gray-500">Connect to devices</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
id="toggle-bluetooth"
|
|
class="toggle-switch relative inline-flex h-6 w-11 items-center rounded-full bg-blue-600 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
|
|
role="switch"
|
|
aria-checked="true"
|
|
aria-label="Toggle Bluetooth"
|
|
data-setting="bluetooth"
|
|
>
|
|
<span
|
|
class="toggle-thumb inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-6"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded">
|
|
<p class="text-sm text-blue-800">
|
|
<iconify-icon icon="mdi:information" class="text-blue-600"></iconify-icon>
|
|
Click the toggle switches to change settings
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Store toggle states globally for evaluation
|
|
window.__toggleStates = {
|
|
notifications: false,
|
|
dark_mode: false,
|
|
auto_save: true, // Initially on
|
|
wifi: false,
|
|
bluetooth: true, // Initially on
|
|
};
|
|
|
|
// Add click handlers to all toggle switches
|
|
const toggles = document.querySelectorAll('.toggle-switch');
|
|
toggles.forEach((toggle) => {
|
|
toggle.addEventListener('click', function () {
|
|
const setting = this.getAttribute('data-setting');
|
|
const currentState = window.__toggleStates[setting];
|
|
const newState = !currentState;
|
|
|
|
// Update state
|
|
window.__toggleStates[setting] = newState;
|
|
|
|
// Update UI
|
|
const thumb = this.querySelector('.toggle-thumb');
|
|
if (newState) {
|
|
this.classList.remove('bg-gray-300');
|
|
this.classList.add('bg-blue-600');
|
|
thumb.classList.remove('translate-x-1');
|
|
thumb.classList.add('translate-x-6');
|
|
this.setAttribute('aria-checked', 'true');
|
|
} else {
|
|
this.classList.remove('bg-blue-600');
|
|
this.classList.add('bg-gray-300');
|
|
thumb.classList.remove('translate-x-6');
|
|
thumb.classList.add('translate-x-1');
|
|
this.setAttribute('aria-checked', 'false');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</main>
|