Compare commits
5 Commits
c8567da75f
...
7d919979cc
| Author | SHA1 | Date | |
|---|---|---|---|
|
7d919979cc | ||
|
|
784a914ebf | ||
|
|
0df13abfee | ||
|
|
cf169b6b69 | ||
|
|
25066af67c |
@@ -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">
|
||||
|
||||
245
src/App.css
245
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;
|
||||
}
|
||||
|
||||
|
||||
98
src/App.tsx
98
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"/>
|
||||
|
||||
Reference in New Issue
Block a user