Delight: Add micro-interactions and entrance animations

- Stat cards lift on hover (translateY -2px + shadow elevation) - Metric cards lift on hover - Chart cards fade-up with staggered delays on mount - All animations respect prefers-reduced-motion (already in place) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Colorize: Add dark mode with system/dark/light toggle
2026-03-25 18:30:21 +03:00 · 2026-03-25 18:29:39 +03:00 · 2026-03-25 18:28:34 +03:00 · 2026-03-25 18:27:27 +03:00 · 2026-03-25 18:23:04 +03:00
3 changed files with 257 additions and 95 deletions
--- a/index.html
+++ b/index.html
@@ -4,13 +4,8 @@
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="/logo192.png" />
-    <link rel="manifest" href="/manifest.json" />
+    <meta name="theme-color" content="#f8fafc" />
+    <meta name="description" content="HiHala Data Dashboard — Museum analytics, visitor tracking, and revenue insights" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet">
--- a/src/App.css
+++ b/src/App.css
@@ -17,11 +17,86 @@
  --danger: #dc2626;
  --danger-light: #fee2e2;
  --gold: #b8860b;
+  --brand-icon: #3b82f6;
+  --brand-text: #1e3a5f;
+  --text-inverse: #ffffff;
+  --warning-bg: #fef3c7;
+  --warning-text: #92400e;
+  --warning-border: #fcd34d;
+  --accent-hover: #1d4ed8;
+  --purple: #7c3aed;
+  --muted-light: #f1f5f9;
+  --dark-surface: #1e293b;
+  --dark-muted: #94a3b8;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow: 0 4px 12px rgba(0,0,0,0.08);
  --radius: 12px;
 }

+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --bg: #0f172a;
+    --surface: #1e293b;
+    --border: #334155;
+    --text-primary: #f1f5f9;
+    --text-secondary: #cbd5e1;
+    --text-muted: #94a3b8;
+    --accent: #3b82f6;
+    --primary: #3b82f6;
+    --accent-light: #1e3a5f;
+    --success: #34d399;
+    --success-light: #064e3b;
+    --danger: #f87171;
+    --danger-light: #7f1d1d;
+    --brand-icon: #60a5fa;
+    --brand-text: #93c5fd;
+    --text-inverse: #0f172a;
+    --warning-bg: #451a03;
+    --warning-text: #fbbf24;
+    --warning-border: #78350f;
+    --accent-hover: #60a5fa;
+    --purple: #a78bfa;
+    --muted-light: #1e293b;
+    --dark-surface: #0f172a;
+    --dark-muted: #64748b;
+    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+    --shadow: 0 4px 12px rgba(0,0,0,0.4);
+    color-scheme: dark;
+  }
+}
+
+/* Manual theme override */
+:root[data-theme="dark"] {
+  --bg: #0f172a;
+  --surface: #1e293b;
+  --border: #334155;
+  --text-primary: #f1f5f9;
+  --text-secondary: #cbd5e1;
+  --text-muted: #94a3b8;
+  --accent: #3b82f6;
+  --primary: #3b82f6;
+  --accent-light: #1e3a5f;
+  --success: #34d399;
+  --success-light: #064e3b;
+  --danger: #f87171;
+  --danger-light: #7f1d1d;
+  --brand-icon: #60a5fa;
+  --brand-text: #93c5fd;
+  --text-inverse: #0f172a;
+  --warning-bg: #451a03;
+  --warning-text: #fbbf24;
+  --warning-border: #78350f;
+  --accent-hover: #60a5fa;
+  --purple: #a78bfa;
+  --muted-light: #1e293b;
+  --dark-surface: #0f172a;
+  --dark-muted: #64748b;
+  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
+  --shadow: 0 4px 12px rgba(0,0,0,0.4);
+  color-scheme: dark;
+}
+
 * {
  margin: 0;
  padding: 0;
@@ -72,7 +147,7 @@ html[dir="rtl"] {
 .error-container button {
  padding: 10px 20px;
  background: var(--text-primary);
-  color: white;
+  color: var(--text-inverse);
  border: none;
  border-radius: 6px;
  cursor: pointer;
@@ -84,6 +159,17 @@ html[dir="rtl"] {
  background: var(--text-secondary);
 }

+.error-container button:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.error-message {
+  max-width: 400px;
+  text-align: center;
+  color: var(--text-muted);
+}
+
 /* Empty State */
 .empty-state {
  display: flex;
@@ -118,7 +204,7 @@ html[dir="rtl"] {
 .empty-state-action {
  padding: 10px 20px;
  background: var(--primary);
-  color: white;
+  color: var(--text-inverse);
  border: none;
  border-radius: 8px;
  font-weight: 500;
@@ -128,29 +214,10 @@ html[dir="rtl"] {
 }

 .empty-state-action:hover {
-  background: #1d4ed8;
+  background: var(--accent-hover);
 }

-/* Skeleton Loader */
-.skeleton {
-  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
-  background-size: 200% 100%;
-  animation: skeleton-loading 1.5s infinite;
-  border-radius: 4px;
-}

-@keyframes skeleton-loading {
-  0% { background-position: 200% 0; }
-  100% { background-position: -200% 0; }
-}
-
-.skeleton-text {
-  height: 1em;
-  margin-bottom: 0.5em;
-}
-
-.skeleton-text.lg { height: 2em; width: 60%; }
-.skeleton-text.sm { height: 0.75em; width: 40%; }

 /* Navigation */
 .nav-bar {
@@ -181,14 +248,14 @@ html[dir="rtl"] {
 }

 .nav-brand-icon {
-  color: #3b82f6;
+  color: var(--brand-icon);
 }

 .nav-brand-text {
  font-family: 'DM Sans', 'Inter', -apple-system, sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
-  color: #1e3a5f;
+  color: var(--brand-text);
  letter-spacing: -0.02em;
 }

@@ -197,13 +264,13 @@ html[dir="rtl"] {
  -webkit-appearance: none;
  background: transparent;
  border: none;
-  color: #3b82f6;
+  color: var(--brand-icon);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  cursor: pointer;
  padding: 2px 20px 2px 6px;
-  margin-left: 4px;
+  margin-inline-start: 4px;
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
@@ -216,18 +283,19 @@ html[dir="rtl"] {
 }

 .data-source-select:focus {
-  outline: none;
+  outline: 2px solid var(--accent);
+  outline-offset: 1px;
  background-color: rgba(59, 130, 246, 0.12);
 }

 .data-source-select option {
-  color: #1e3a5f;
-  background: white;
+  color: var(--brand-text);
+  background: var(--surface);
  font-weight: 500;
 }

 .data-source-select option:disabled {
-  color: #94a3b8;
+  color: var(--text-muted);
 }

 .nav-links {
@@ -267,7 +335,7 @@ html[dir="rtl"] {

 .nav-link.active {
  background: var(--primary);
-  color: white;
+  color: var(--text-inverse);
  border-color: var(--primary);
 }

@@ -315,12 +383,12 @@ html[dir="rtl"] .nav-lang-toggle {
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
-  background: #fef3c7;
-  color: #92400e;
+  background: var(--warning-bg);
+  color: var(--warning-text);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
-  border: 1px solid #fcd34d;
+  border: 1px solid var(--warning-border);
 }

 .offline-badge svg {
@@ -441,6 +509,12 @@ html[dir="rtl"] .nav-lang-toggle {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
 }

 .stat-card h3 {
@@ -476,14 +550,24 @@ html[dir="rtl"] .nav-lang-toggle {
  margin-bottom: 32px;
 }

+@keyframes fadeUp {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .chart-card {
  background: var(--surface);
  padding: 24px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  position: relative;
+  animation: fadeUp 0.4s ease-out both;
 }

+.chart-card:nth-child(2) { animation-delay: 0.05s; }
+.chart-card:nth-child(3) { animation-delay: 0.1s; }
+.chart-card:nth-child(4) { animation-delay: 0.15s; }
+
 .toggle-corner {
  position: absolute;
  top: 20px;
@@ -526,7 +610,7 @@ html[dir="rtl"] .nav-lang-toggle {
 }

 .chart-container {
-  height: 380px;
+  height: clamp(280px, 30vw, 420px);
  position: relative;
 }

@@ -552,7 +636,7 @@ table th {
  border-bottom: 2px solid var(--border);
 }

-table th:first-child { text-align: left; }
+table th:first-child { text-align: start; }

 table td {
  padding: 14px 12px;
@@ -561,7 +645,7 @@ table td {
  color: var(--text-secondary);
 }

-table td:first-child { text-align: left; }
+table td:first-child { text-align: start; }

 table tbody tr:hover {
  background: var(--bg);
@@ -570,7 +654,7 @@ table tbody tr:hover {
 .bold { font-weight: 700; color: var(--text-primary); }
 .muted { color: var(--text-muted); }
 .primary { color: var(--accent); font-weight: 600; }
-.purple { color: #7c3aed; font-weight: 600; }
+.purple { color: var(--purple); font-weight: 600; }
 .positive { color: var(--success); font-weight: 600; }
 .negative { color: var(--danger); font-weight: 600; }

@@ -673,7 +757,8 @@ table tbody tr:hover {

 .control-group select:focus,
 .control-group input[type="date"]:focus {
-  outline: none;
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
  border-color: var(--accent);
 }

@@ -766,6 +851,12 @@ table tbody tr:hover {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: var(--shadow);
 }

 .metric-card h4 {
@@ -831,8 +922,8 @@ table tbody tr:hover {
 }

 .metric-change.pending {
-  background: var(--muted-light, #f1f5f9);
-  color: var(--text-muted, #64748b);
+  background: var(--muted-light);
+  color: var(--text-muted);
 }

 .metric-change .pending-msg {
@@ -1019,9 +1110,15 @@ table tbody tr:hover {
  width: 8px;
  height: 8px;
  border-radius: 4px;
-  padding: 0;
+  padding: 8px;
+  background-clip: content-box;
  cursor: pointer;
  transition: all 0.3s ease;
+  min-width: 24px;
+  min-height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

 .carousel-dot .dot-label {
@@ -1070,7 +1167,7 @@ table tbody tr:hover {
 }

 .carousel-dots.labeled .carousel-dot.active .dot-label {
-  color: white;
+  color: var(--text-inverse);
 }

 /* Chart Sections */
@@ -1507,11 +1604,11 @@ table tbody tr:hover {

 .btn-primary {
  background: var(--accent);
-  color: white;
+  color: var(--text-inverse);
 }

 .btn-primary:hover {
-  background: #2563eb;
+  background: var(--accent);
 }

 .btn-secondary {
@@ -1555,7 +1652,7 @@ table tbody tr:hover {
  margin-top: 16px;
  padding: 8px 16px;
  background: var(--accent);
-  color: white;
+  color: var(--text-inverse);
  border: none;
  border-radius: 6px;
  cursor: pointer;
@@ -1641,8 +1738,8 @@ table tbody tr:hover {
 }

 .slide-actions button.delete:hover {
-  background: #fee2e2;
-  color: #dc2626;
+  background: var(--danger-light);
+  color: var(--danger);
 }

 /* Slide Editor */
@@ -1679,7 +1776,8 @@ table tbody tr:hover {

 .editor-section input:focus,
 .editor-section select:focus {
-  outline: none;
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
  border-color: var(--accent);
 }

@@ -1779,7 +1877,7 @@ table tbody tr:hover {
  left: 0;
  right: 0;
  bottom: 0;
-  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
+  background: linear-gradient(135deg, var(--text-primary) 0%, var(--dark-surface) 100%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
@@ -1795,7 +1893,7 @@ table tbody tr:hover {
 }

 .preview-title {
-  color: #f8fafc;
+  color: var(--bg);
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 40px;
@@ -1824,11 +1922,11 @@ table tbody tr:hover {
 }

 .preview-content .preview-kpis .kpi-label {
-  color: #94a3b8;
+  color: var(--dark-muted);
 }

 .preview-footer {
-  color: #64748b;
+  color: var(--text-muted);
  font-size: 14px;
  margin-top: 40px;
 }
@@ -1844,7 +1942,7 @@ table tbody tr:hover {
 .preview-controls button {
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.1);
-  color: white;
+  color: var(--text-inverse);
  border: none;
  border-radius: 8px;
  cursor: pointer;
@@ -1937,12 +2035,12 @@ html[dir="rtl"] .chart-header-with-export {
 }

 /* Download button - always top corner, outside normal flow */
-.chart-export-btn,
-.chart-export-btn.visible {
-  position: absolute !important;
-  top: 0 !important;
-  right: 0 !important;
-  left: auto !important;
+.exportable-chart-wrapper .chart-export-btn,
+.exportable-chart-wrapper .chart-export-btn.visible {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: auto;
  z-index: 10;
  width: 32px;
  height: 32px;
@@ -1959,10 +2057,10 @@ html[dir="rtl"] .chart-header-with-export {
  flex-shrink: 0;
 }

-html[dir="rtl"] .chart-export-btn,
-html[dir="rtl"] .chart-export-btn.visible {
-  right: auto !important;
-  left: 0 !important;
+html[dir="rtl"] .exportable-chart-wrapper .chart-export-btn,
+html[dir="rtl"] .exportable-chart-wrapper .chart-export-btn.visible {
+  right: auto;
+  left: 0;
 }

 .chart-export-btn:hover {
@@ -1988,6 +2086,21 @@ html[dir="rtl"] .chart-export-btn.visible {
  text-align: left !important;
 }

+/* ========================================
+   Reduced Motion
+   ======================================== */
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+  .carousel-track {
+    transition: none;
+  }
+}
+
 /* ========================================
   Loading Skeleton
   ======================================== */
@@ -2011,7 +2124,7 @@ html[dir="rtl"] .chart-export-btn.visible {
 }

 .skeleton-card {
-  background: #f1f5f9;
+  background: var(--muted-light);
  border-radius: 12px;
  padding: 20px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
@@ -2022,7 +2135,7 @@ html[dir="rtl"] .chart-export-btn.visible {
 }

 .skeleton-line {
-  background: #e2e8f0;
+  background: var(--border);
  border-radius: 6px;
 }

--- a/src/App.tsx
+++ b/src/App.tsx
@@ -44,6 +44,30 @@ function App() {
  const [showDataLabels, setShowDataLabels] = useState<boolean>(false);
  const [includeVAT, setIncludeVAT] = useState<boolean>(true);
  const [dataSource, setDataSource] = useState<string>('museums');
+  const [theme, setTheme] = useState<string>(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('hihala_theme') || 'system';
+    }
+    return 'system';
+  });
+
+  useEffect(() => {
+    const root = document.documentElement;
+    if (theme === 'system') {
+      root.removeAttribute('data-theme');
+    } else {
+      root.setAttribute('data-theme', theme);
+    }
+    localStorage.setItem('hihala_theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prev => {
+      if (prev === 'system') return 'dark';
+      if (prev === 'dark') return 'light';
+      return 'system';
+    });
+  };
  
  const dataSources: DataSource[] = [
    { id: 'museums', labelKey: 'dataSources.museums', enabled: true },
@@ -95,7 +119,7 @@ function App() {
    return (
      <div className="error-container" dir={dir}>
        <h2>{t('app.error')}</h2>
-        <p style={{maxWidth: '400px', textAlign: 'center', color: '#64748b'}}>
+        <p className="error-message">
          {t(`errors.${error.type}`)}
        </p>
        <button onClick={() => loadData()}>{t('app.retry')}</button>
@@ -106,10 +130,10 @@ function App() {
  return (
    <Router>
      <div className="app" dir={dir}>
-        <nav className="nav-bar">
+        <nav className="nav-bar" aria-label={t('nav.dashboard')}>
          <div className="nav-content">
            <div className="nav-brand">
-              <svg className="nav-brand-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+              <svg className="nav-brand-icon" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <rect x="3" y="3" width="7" height="7" rx="1"/>
                <rect x="14" y="3" width="7" height="4" rx="1"/>
                <rect x="3" y="14" width="7" height="7" rx="1"/>
@@ -117,10 +141,11 @@ function App() {
              </svg>
              <span className="nav-brand-text">
                HiHala Data
-                <select 
+                <select
                  className="data-source-select"
                  value={dataSource}
                  onChange={e => setDataSource(e.target.value)}
+                  aria-label={t('dataSources.museums')}
                >
                  {dataSources.map(src => (
                    <option key={src.id} value={src.id} disabled={!src.enabled}>
@@ -132,7 +157,7 @@ function App() {
            </div>
            <div className="nav-links">
              <NavLink to="/">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <rect x="3" y="3" width="7" height="9" rx="1"/>
                  <rect x="14" y="3" width="7" height="5" rx="1"/>
                  <rect x="14" y="12" width="7" height="9" rx="1"/>
@@ -141,7 +166,7 @@ function App() {
                {t('nav.dashboard')}
              </NavLink>
              <NavLink to="/comparison">
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <line x1="18" y1="20" x2="18" y2="10"/>
                  <line x1="12" y1="20" x2="12" y2="4"/>
                  <line x1="6" y1="20" x2="6" y2="14"/>
@@ -164,24 +189,42 @@ function App() {
                  {t('app.offline') || 'Offline'}
                </span>
              )}
-              <button 
+              <button
                className={`nav-refresh-btn ${refreshing ? 'refreshing' : ''}`}
                onClick={handleRefresh}
                disabled={refreshing}
+                aria-label={t('app.refresh') || 'Refresh data'}
                title={t('app.refresh') || 'Refresh data'}
              >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <polyline points="23 4 23 10 17 10"/>
                  <polyline points="1 20 1 14 7 14"/>
                  <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
                </svg>
              </button>
-              <button 
+              <button
+                className="nav-lang-toggle"
+                onClick={toggleTheme}
+                aria-label={`Theme: ${theme}`}
+                title={`Theme: ${theme}`}
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  {theme === 'dark' ? (
+                    <><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></>
+                  ) : theme === 'light' ? (
+                    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
+                  ) : (
+                    <><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 0 0 20V2z"/></>
+                  )}
+                </svg>
+              </button>
+              <button
                className="nav-lang-toggle"
                onClick={switchLanguage}
+                aria-label={t('language.switch')}
                title="Switch language"
              >
-                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <circle cx="12" cy="12" r="10"/>
                  <line x1="2" y1="12" x2="22" y2="12"/>
                  <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
@@ -192,18 +235,20 @@ function App() {
          </div>
        </nav>
        
-        <Suspense fallback={<LoadingSkeleton />}>
-          <Routes>
-            <Route path="/" element={<Dashboard data={data} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} includeVAT={includeVAT} setIncludeVAT={setIncludeVAT} />} />
-            <Route path="/comparison" element={<Comparison data={data} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} includeVAT={includeVAT} setIncludeVAT={setIncludeVAT} />} />
-            <Route path="/slides" element={<Slides data={data} />} />
-          </Routes>
-        </Suspense>
+        <main>
+          <Suspense fallback={<LoadingSkeleton />}>
+            <Routes>
+              <Route path="/" element={<Dashboard data={data} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} includeVAT={includeVAT} setIncludeVAT={setIncludeVAT} />} />
+              <Route path="/comparison" element={<Comparison data={data} showDataLabels={showDataLabels} setShowDataLabels={setShowDataLabels} includeVAT={includeVAT} setIncludeVAT={setIncludeVAT} />} />
+              <Route path="/slides" element={<Slides data={data} />} />
+            </Routes>
+          </Suspense>
+        </main>
        
        {/* Mobile Bottom Navigation */}
-        <nav className="mobile-nav">
+        <nav className="mobile-nav" aria-label="Mobile navigation">
          <NavLink to="/" className="mobile-nav-item">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <rect x="3" y="3" width="7" height="9" rx="1"/>
              <rect x="14" y="3" width="7" height="5" rx="1"/>
              <rect x="14" y="12" width="7" height="9" rx="1"/>
@@ -212,18 +257,27 @@ function App() {
            <span>{t('nav.dashboard')}</span>
          </NavLink>
          <NavLink to="/comparison" className="mobile-nav-item">
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <line x1="18" y1="20" x2="18" y2="10"/>
              <line x1="12" y1="20" x2="12" y2="4"/>
              <line x1="6" y1="20" x2="6" y2="14"/>
            </svg>
            <span>{t('nav.compare')}</span>
          </NavLink>
-          <button 
+          <NavLink to="/slides" className="mobile-nav-item">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <rect x="2" y="3" width="20" height="14" rx="2"/>
+              <line x1="8" y1="21" x2="16" y2="21"/>
+              <line x1="12" y1="17" x2="12" y2="21"/>
+            </svg>
+            <span>{t('nav.slides')}</span>
+          </NavLink>
+          <button
            className="mobile-nav-item"
            onClick={switchLanguage}
+            aria-label={t('language.switch')}
          >
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
              <circle cx="12" cy="12" r="10"/>
              <line x1="2" y1="12" x2="22" y2="12"/>
              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>
Author	SHA1	Message	Date
fahed	7d919979cc	Delight: Add micro-interactions and entrance animations All checks were successful Deploy HiHala Dashboard / deploy (push) Successful in 6s Details - Stat cards lift on hover (translateY -2px + shadow elevation) - Metric cards lift on hover - Chart cards fade-up with staggered delays on mount - All animations respect prefers-reduced-motion (already in place) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-25 18:30:21 +03:00
fahed	784a914ebf	Colorize: Add dark mode with system/dark/light toggle - Add prefers-color-scheme: dark media query for automatic dark mode - Add data-theme attribute for manual override (persisted to localStorage) - 3-state cycle: system → dark → light → system - Theme toggle button in nav with contextual icon (sun/moon/half) - Dark palette: slate-900 bg, slate-800 surfaces, adjusted text/accent/success/danger Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-25 18:29:39 +03:00
fahed	0df13abfee	Polish + Optimize: Clean metadata, remove !important, prune unused CSS - Update theme-color to match brand (#f8fafc), fix stale CRA description - Remove manifest.json and logo192.png references (not used) - Replace !important on chart export buttons with higher specificity selectors - Remove unused .skeleton-text and .skeleton-loading CSS classes - Remove duplicate skeleton animation keyframes Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-25 18:28:34 +03:00
fahed	cf169b6b69	Normalize + Adapt: CSS tokens, RTL fixes, mobile nav, fluid charts Normalize: - Add 10+ new CSS variables (brand-icon, brand-text, text-inverse, warning-*, etc.) - Replace 35+ hardcoded hex colors with CSS variable references Adapt: - Add Slides link to mobile bottom nav (was unreachable on mobile) - Fix RTL table alignment: text-align left → start - Make chart height fluid: 380px → clamp(280px, 30vw, 420px) - Fix carousel dot touch targets to minimum 24px - Fix margin-left → margin-inline-start for RTL Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-25 18:27:27 +03:00
fahed	25066af67c	Harden: Fix critical accessibility issues - Add aria-labels to icon-only buttons (refresh, language toggle) - Add aria-hidden to decorative SVGs - Add aria-label to data source select - Replace outline:none with visible focus rings on all inputs/selects - Add <main> landmark for screen reader navigation - Add prefers-reduced-motion: disable all animations for vestibular safety - Move error message inline style to CSS class - Add aria-label to both nav landmarks Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-03-25 18:23:04 +03:00