feat: add disclaimer modal, update lake data, and improve component interactions

2026-06-06 20:35:47 +02:00
parent a67a2247c3
commit 231961da19
48 changed files with 1238 additions and 133 deletions
@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import { type Language, t } from '../translations';
+import { TbSwimming, TbSailboat } from 'react-icons/tb';
+
+interface Props {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+}
+
+export const DisclaimerModal = ({ language, setLanguage }: Props) => {
+  const [show, setShow] = useState(false);
+
+  useEffect(() => {
+    const isAccepted = localStorage.getItem('hladinator_disclaimer_accepted');
+    if (!isAccepted) {
+      setShow(true);
+    }
+  }, []);
+
+  const handleAccept = () => {
+    localStorage.setItem('hladinator_disclaimer_accepted', 'true');
+    setShow(false);
+  };
+
+  if (!show) return null;
+
+  return (
+    <div style={{
+      position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
+      backgroundColor: 'rgba(0,0,0,0.8)',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      zIndex: 999999, padding: '1.5rem', backdropFilter: 'blur(4px)'
+    }}>
+      <div style={{
+        backgroundColor: 'var(--bg-card)',
+        borderRadius: '12px',
+        padding: '2rem',
+        maxWidth: '550px',
+        width: '100%',
+        boxShadow: '0 10px 30px rgba(0,0,0,0.5)',
+        display: 'flex', flexDirection: 'column', gap: '1.5rem',
+        border: '1px solid var(--border-color)',
+        color: 'var(--text-main)',
+        maxHeight: '90vh',
+        overflowY: 'auto'
+      }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+          <h2 style={{ fontSize: '1.5rem', fontWeight: 'bold', margin: 0, color: 'var(--color-cyan)' }}>
+            {t[language].disclaimer.title}
+          </h2>
+          <div style={{ display: 'flex', gap: '0.25rem', backgroundColor: 'rgba(0,0,0,0.2)', padding: '4px', borderRadius: '8px' }}>
+            <button 
+              onClick={() => setLanguage('cs')}
+              style={{ background: language === 'cs' ? 'var(--color-cyan)' : 'transparent', color: language === 'cs' ? '#fff' : 'var(--text-muted)', border: 'none', padding: '4px 8px', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold', transition: '0.2s' }}
+            >
+              CS
+            </button>
+            <button 
+              onClick={() => setLanguage('en')}
+              style={{ background: language === 'en' ? 'var(--color-cyan)' : 'transparent', color: language === 'en' ? '#fff' : 'var(--text-muted)', border: 'none', padding: '4px 8px', borderRadius: '4px', cursor: 'pointer', fontWeight: 'bold', transition: '0.2s' }}
+            >
+              EN
+            </button>
+          </div>
+        </div>
+        
+        <p style={{ margin: 0, lineHeight: 1.5 }}>
+          {t[language].disclaimer.text1}
+        </p>
+        <p style={{ margin: 0, lineHeight: 1.5, color: 'var(--text-muted)' }}>
+          {t[language].disclaimer.text2}
+        </p>
+
+        <div style={{
+          marginTop: '0.5rem', padding: '1rem',
+          backgroundColor: 'rgba(255,255,255,0.03)',
+          borderRadius: '8px', display: 'flex', flexDirection: 'column', gap: '1rem'
+        }}>
+          <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+            <div style={{ display: 'flex', gap: '0.25rem', marginTop: '0.25rem' }}>
+              <TbSwimming size={24} color="var(--color-green)" />
+              <TbSailboat size={24} color="var(--color-green)" />
+            </div>
+            <div style={{ fontSize: '0.9rem', color: 'var(--text-muted)', lineHeight: 1.4 }}>
+              <div style={{ color: 'var(--text-main)', fontWeight: 'bold', marginBottom: '0.2rem' }}>{language === 'cs' ? 'Zelené ikony (Povoleno)' : 'Green icons (Allowed)'}</div>
+              <ul style={{ margin: 0, paddingLeft: '1.2rem' }}>
+                <li>{t[language].disclaimer.swimDesc}</li>
+                <li>{t[language].disclaimer.sailDesc}</li>
+              </ul>
+            </div>
+          </div>
+          
+          <div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
+            <div style={{ display: 'flex', gap: '0.25rem', marginTop: '0.25rem' }}>
+              <TbSwimming size={24} color="var(--color-red)" />
+              <TbSailboat size={24} color="var(--color-red)" />
+            </div>
+            <div style={{ fontSize: '0.9rem', color: 'var(--text-muted)', lineHeight: 1.4 }}>
+              <div style={{ color: 'var(--text-main)', fontWeight: 'bold', marginBottom: '0.2rem' }}>{language === 'cs' ? 'Červené ikony (Zakázáno)' : 'Red icons (Forbidden)'}</div>
+              {t[language].disclaimer.forbiddenDesc}
+            </div>
+          </div>
+        </div>
+
+        <button 
+          onClick={handleAccept}
+          style={{
+            marginTop: '1rem',
+            padding: '1rem',
+            backgroundColor: 'var(--color-cyan)',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '8px',
+            fontSize: '1.1rem',
+            fontWeight: 'bold',
+            cursor: 'pointer',
+            transition: 'opacity 0.2s'
+          }}
+          onMouseOver={(e) => e.currentTarget.style.opacity = '0.9'}
+          onMouseOut={(e) => e.currentTarget.style.opacity = '1'}
+        >
+          {t[language].disclaimer.button}
+        </button>
+      </div>
+    </div>
+  );
+};