Repository: Hestenb62/_legacy_backup
Author: Hesten Berger
Commit Message: updated accessibility page Signed-off-by: Hesten Berger
URL: https://github.com/Hestenb62/_legacy_backup/commit/02146f1082b7c2de3a87aa001497bf661c225f61
Code Changes:
diff --git a/assets/css/components/fixed-tools.css b/assets/css/components/fixed-tools.css
index b4206fc..540aae5 100644
--- a/assets/css/components/fixed-tools.css
+++ b/assets/css/components/fixed-tools.css
@@ -1251,4 +1251,60 @@
background: #ffffff;
color: #000000;
}
+
+ /* Offline Connectivity Status Pill */
+ .hl-offline-pill {
+ position: fixed;
+ bottom: 1.5rem;
+ left: 1.5rem;
+ z-index: 9999;
+ display: inline-flex;
+ align-items: center;
+ gap: 0.65rem;
+ padding: 0.65rem 1.15rem;
+ border-radius: 9999px;
+ font-size: 0.85rem;
+ font-weight: 600;
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
+ transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+ pointer-events: auto;
+ }
+
+ .hl-offline-pill.hidden {
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(1.5rem);
+ pointer-events: none;
+ }
+
+ .hl-offline-pill.is-offline {
+ background: #451a03;
+ color: #fef3c7;
+ border: 1px solid #f59e0b;
+ }
+
+ .hl-offline-pill.is-online {
+ background: #064e3b;
+ color: #d1fae5;
+ border: 1px solid #10b981;
+ }
+
+ [data-theme="dark"] .hl-offline-pill.is-offline,
+ .dark .hl-offline-pill.is-offline {
+ background: #451a03;
+ color: #fef3c7;
+ border-color: #d97706;
+ }
+
+ [data-theme="high-contrast"] .hl-offline-pill,
+ .high-contrast .hl-offline-pill {
+ background: #000000 !important;
+ color: #ffffff !important;
+ border: 2px solid #ffffff !important;
+ box-shadow: none !important;
+ }
+ [data-theme="high-contrast"] .hl-offline-pill i,
+ .high-contrast .hl-offline-pill i {
+ color: #ffff00 !important;
+ }
}
diff --git a/assets/css/pages/accessibility.css b/assets/css/pages/accessibility.css
index 91e0621..f5e28f2 100644
--- a/assets/css/pages/accessibility.css
+++ b/assets/css/pages/accessibility.css
@@ -971,6 +971,307 @@
font-weight: 800 !important;
}
+ /* ====================================================================
+ READING FLUENCY BENCHMARK TOOL
+ ==================================================================== */
+ .benchmark-wrapper {
+ background: var(--color-bg-surface, #ffffff);
+ border: 1px solid var(--color-border, #e2e8f0);
+ border-radius: 1.5rem;
+ padding: 2rem;
+ margin: 2rem 0;
+ box-shadow: var(--shadow-md);
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ }
+
+ .benchmark-header-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 1rem;
+ }
+
+ .benchmark-tag {
+ font-size: 0.75rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ padding: 0.3rem 0.75rem;
+ border-radius: 9999px;
+ background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+ color: var(--color-primary);
+ }
+
+ .benchmark-controls-bar {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
+ gap: 1rem;
+ background: var(--color-bg-subtle, #f8fafc);
+ border: 1px solid var(--color-border, #e2e8f0);
+ border-radius: 1rem;
+ padding: 1rem 1.25rem;
+ }
+
+ .benchmark-mode-select {
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.5rem;
+ border: 1px solid var(--color-border);
+ background: var(--color-bg-surface);
+ color: var(--color-text-main);
+ font-size: 0.875rem;
+ font-weight: 600;
+ }
+
+ .benchmark-timer-box {
+ font-family: ui-monospace, monospace;
+ font-size: 1.5rem;
+ font-weight: 800;
+ color: var(--color-primary, #3b82f6);
+ min-width: 100px;
+ text-align: center;
+ background: var(--color-bg-surface);
+ border: 1px solid var(--color-border);
+ border-radius: 0.5rem;
+ padding: 0.35rem 0.75rem;
+ }
+
+ .benchmark-passage-box {
+ background: var(--color-bg-surface);
+ border: 2px solid var(--color-border);
+ border-radius: 1rem;
+ padding: 1.75rem;
+ font-size: 1.1rem;
+ line-height: 1.8;
+ color: var(--color-text-main);
+ position: relative;
+ min-height: 160px;
+ }
+
+ .benchmark-passage-box.is-blurred {
+ filter: blur(5px);
+ user-select: none;
+ pointer-events: none;
+ opacity: 0.6;
+ }
+
+ .benchmark-overlay-prompt {
+ position: absolute;
+ inset: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: rgba(0, 0, 0, 0.05);
+ border-radius: 1rem;
+ font-weight: 700;
+ font-size: 1.1rem;
+ color: var(--color-primary);
+ z-index: 5;
+ }
+
+ .benchmark-results-card {
+ background: var(--color-bg-subtle, #f8fafc);
+ border: 1px solid var(--color-border);
+ border-radius: 1rem;
+ padding: 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .benchmark-metrics-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+ gap: 1rem;
+ }
+
+ .benchmark-metric-item {
+ background: var(--color-bg-surface);
+ border: 1px solid var(--color-border);
+ border-radius: 0.75rem;
+ padding: 0.85rem;
+ text-align: center;
+ }
+
+ .benchmark-metric-val {
+ font-size: 1.5rem;
+ font-weight: 800;
+ color: var(--color-primary);
+ line-height: 1.2;
+ }
+
+ .benchmark-metric-lbl {
+ font-size: 0.75rem;
+ font-weight: 600;
+ color: var(--color-text-muted);
+ text-transform: uppercase;
+ margin-top: 0.25rem;
+ }
+
+ /* ====================================================================
+ IEP / 504 ACCOMMODATION PROFILE EXPORTER
+ ==================================================================== */
+ .iep-generator-wrapper {
+ background: var(--color-bg-surface, #ffffff);
+ border: 1px solid var(--color-border, #e2e8f0);
+ border-radius: 1.5rem;
+ padding: 2rem;
+ margin: 2rem 0;
+ box-shadow: var(--shadow-md);
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ }
+
+ .iep-brief-card {
+ background: var(--color-bg-surface);
+ border: 2px solid var(--color-primary);
+ border-radius: 1rem;
+ padding: 1.75rem;
+ position: relative;
+ }
+
+ .iep-brief-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ flex-wrap: wrap;
+ border-bottom: 2px solid var(--color-border);
+ padding-bottom: 1rem;
+ margin-bottom: 1.25rem;
+ gap: 1rem;
+ }
+
+ .iep-brief-title {
+ font-size: 1.3rem;
+ font-weight: 800;
+ margin: 0;
+ color: var(--color-text-main);
+ }
+
+ .iep-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ gap: 1.25rem;
+ margin-bottom: 1.25rem;
+ }
+
+ .iep-section-box {
+ background: var(--color-bg-subtle, #f8fafc);
+ border: 1px solid var(--color-border);
+ border-radius: 0.75rem;
+ padding: 1rem;
+ }
+
+ .iep-section-box h4 {
+ font-size: 0.875rem;
+ font-weight: 700;
+ margin: 0 0 0.5rem 0;
+ color: var(--color-text-main);
+ display: flex;
+ align-items: center;
+ gap: 0.4rem;
+ }
+
+ .iep-section-box h4 i {
+ color: var(--color-primary);
+ }
+
+ .iep-list {
+ margin: 0;
+ padding-left: 1.25rem;
+ font-size: 0.875rem;
+ color: var(--color-text-muted);
+ line-height: 1.6;
+ }
+
+ /* Themes for Benchmark & IEP */
+ [data-theme="dark"] .benchmark-wrapper,
+ [data-theme="dark"] .iep-generator-wrapper,
+ .dark .benchmark-wrapper,
+ .dark .iep-generator-wrapper {
+ background: #1e293b;
+ border-color: #334155;
+ }
+ [data-theme="dark"] .benchmark-controls-bar,
+ [data-theme="dark"] .benchmark-results-card,