feat: Initial commit - Hladinator (Water Reservoir Dashboard)

- Setup React project with Vite and TypeScript - Built dynamic UI supporting Dark/Light mode and CS/EN localization - Added Lakes Overview grid with mock data for 40+ reservoirs - Created interactive Recharts charts for water levels and flow rates - Designed fully responsive premium mobile layout with custom SVG KPIs - Developed TypeScript scraper scripts to fetch reservoir data
2026-06-05 21:36:38 +02:00
parent ac43c24f20
commit a5bd4985d1
22 changed files with 4369 additions and 958 deletions
@@ -0,0 +1,142 @@
+import { FiX, FiMoon, FiSun, FiGlobe, FiCoffee } from 'react-icons/fi';
+import { type Language, t } from '../translations';
+
+interface Props {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  theme: 'dark' | 'light';
+  setTheme: (theme: 'dark' | 'light') => void;
+  onClose: () => void;
+}
+
+const SettingsModal = ({ language, setLanguage, theme, setTheme, onClose }: Props) => {
+  const dict = t[language].settings;
+
+  return (
+    <div style={{
+      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+      backgroundColor: 'rgba(0, 0, 0, 0.75)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      zIndex: 1000,
+      backdropFilter: 'blur(4px)'
+    }}>
+      <div style={{
+        backgroundColor: 'var(--bg-card)',
+        border: '1px solid var(--border-color)',
+        borderRadius: '1rem',
+        padding: '2rem',
+        width: '90%',
+        maxWidth: '400px',
+        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.5)'
+      }}>
+        {/* Header */}
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
+          <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', margin: 0 }}>{dict.title}</h2>
+          <button 
+            onClick={onClose}
+            style={{
+              background: 'transparent', border: 'none', color: 'var(--text-muted)',
+              cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center',
+              padding: '0.5rem', borderRadius: '50%'
+            }}
+          >
+            <FiX size={24} />
+          </button>
+        </div>
+
+        {/* Theme Setting */}
+        <div style={{ marginBottom: '1.5rem' }}>
+          <label style={{ display: 'block', marginBottom: '0.75rem', color: 'var(--text-muted)', fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '1px' }}>
+            {dict.theme}
+          </label>
+          <div style={{ display: 'flex', gap: '1rem' }}>
+            <button
+              onClick={() => setTheme('dark')}
+              style={{
+                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
+                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
+                border: theme === 'dark' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
+                backgroundColor: theme === 'dark' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
+                color: theme === 'dark' ? 'var(--color-cyan)' : 'var(--text-main)',
+                cursor: 'pointer', transition: 'all 0.2s'
+              }}
+            >
+              <FiMoon /> {dict.dark}
+            </button>
+            <button
+              onClick={() => setTheme('light')}
+              style={{
+                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
+                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
+                border: theme === 'light' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
+                backgroundColor: theme === 'light' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
+                color: theme === 'light' ? 'var(--color-cyan)' : 'var(--text-main)',
+                cursor: 'pointer', transition: 'all 0.2s'
+              }}
+            >
+              <FiSun /> {dict.light}
+            </button>
+          </div>
+        </div>
+
+        {/* Language Setting */}
+        <div style={{ marginBottom: '2rem' }}>
+          <label style={{ display: 'block', marginBottom: '0.75rem', color: 'var(--text-muted)', fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '1px' }}>
+            {dict.language}
+          </label>
+          <div style={{ display: 'flex', gap: '1rem' }}>
+            <button
+              onClick={() => setLanguage('en')}
+              style={{
+                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
+                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
+                border: language === 'en' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
+                backgroundColor: language === 'en' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
+                color: language === 'en' ? 'var(--color-cyan)' : 'var(--text-main)',
+                cursor: 'pointer', transition: 'all 0.2s'
+              }}
+            >
+              <FiGlobe /> {dict.english}
+            </button>
+            <button
+              onClick={() => setLanguage('cs')}
+              style={{
+                flex: 1, padding: '0.75rem', borderRadius: '0.5rem',
+                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem',
+                border: language === 'cs' ? '1px solid var(--color-cyan)' : '1px solid var(--border-color)',
+                backgroundColor: language === 'cs' ? 'rgba(6, 182, 212, 0.1)' : 'transparent',
+                color: language === 'cs' ? 'var(--color-cyan)' : 'var(--text-main)',
+                cursor: 'pointer', transition: 'all 0.2s'
+              }}
+            >
+              <FiGlobe /> {dict.czech}
+            </button>
+          </div>
+        </div>
+
+        {/* Buy me a coffee */}
+        <div style={{ borderTop: '1px solid var(--border-color)', paddingTop: '1.5rem', textAlign: 'center' }}>
+          <a
+            href="#"
+            target="_blank"
+            rel="noreferrer"
+            style={{
+              display: 'inline-flex', alignItems: 'center', gap: '0.5rem',
+              padding: '0.75rem 1.5rem', borderRadius: '2rem',
+              backgroundColor: '#FFDD00', color: '#000000', fontWeight: 'bold',
+              textDecoration: 'none', transition: 'transform 0.2s'
+            }}
+            onMouseOver={(e) => e.currentTarget.style.transform = 'scale(1.05)'}
+            onMouseOut={(e) => e.currentTarget.style.transform = 'scale(1)'}
+          >
+            <FiCoffee size={20} />
+            {dict.buyCoffee}
+          </a>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default SettingsModal;