feat: add contact link to settings, update lake labels and sidebar icons, and enhance KPI flow visualization
This commit is contained in:
@@ -79,10 +79,22 @@ const KpiCards = ({ data, language, lakeName = 'Lipno 1' }: Props) => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Flow Circle */}
|
{/* Flow Circle */}
|
||||||
<div style={{ width: '40px', height: '40px', borderRadius: '50%', border: '4px solid rgba(0, 195, 255, 0.2)', borderTopColor: 'var(--color-cyan)', borderRightColor: 'var(--color-cyan)', display: 'flex', alignItems: 'center', justifyContent: 'center', transform: 'rotate(-45deg)' }}>
|
<div style={{
|
||||||
<span style={{ fontSize: '0.65rem', transform: 'rotate(45deg)', color: 'var(--text-main)', fontWeight: 'bold' }}>
|
width: '70px',
|
||||||
<div style={{ lineHeight: 1 }}>{data.outflow.toFixed(1)}</div>
|
height: '70px',
|
||||||
<div style={{ fontSize: '0.45rem', opacity: 0.7 }}>m³/s</div>
|
borderRadius: '50%',
|
||||||
|
border: `4px solid ${flowDiff >= 0 ? 'rgba(74, 222, 128, 0.2)' : 'rgba(248, 113, 113, 0.2)'}`,
|
||||||
|
borderTopColor: flowDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)',
|
||||||
|
borderRightColor: flowDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
transform: 'rotate(-45deg)',
|
||||||
|
flexShrink: 0
|
||||||
|
}}>
|
||||||
|
<span style={{ transform: 'rotate(45deg)', color: flowDiff >= 0 ? 'var(--color-green)' : 'var(--color-red)', fontWeight: 'bold', textAlign: 'center', lineHeight: 1.2 }}>
|
||||||
|
<div style={{ fontSize: '0.8rem' }}>{flowDiff > 0 ? '+' : ''}{flowDiff.toFixed(1)}</div>
|
||||||
|
<div style={{ fontSize: '0.6rem', opacity: 0.8 }}>m³/s</div>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -114,6 +114,31 @@ const SettingsModal = ({ language, setLanguage, theme, setTheme, onClose }: Prop
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Contact */}
|
||||||
|
<div style={{ marginBottom: '2rem' }}>
|
||||||
|
<label style={{ display: 'block', marginBottom: '0.75rem', color: 'var(--text-muted)', fontSize: '0.85rem', textTransform: 'uppercase', letterSpacing: '1px' }}>
|
||||||
|
{dict.contact}
|
||||||
|
</label>
|
||||||
|
<a
|
||||||
|
href="mailto:info@hladinator.cz"
|
||||||
|
style={{
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '0.5rem',
|
||||||
|
color: 'var(--color-cyan)',
|
||||||
|
fontSize: '0.95rem',
|
||||||
|
textDecoration: 'none',
|
||||||
|
fontWeight: 500,
|
||||||
|
opacity: 0.9,
|
||||||
|
transition: 'opacity 0.2s'
|
||||||
|
}}
|
||||||
|
onMouseOver={(e) => e.currentTarget.style.opacity = '1'}
|
||||||
|
onMouseOut={(e) => e.currentTarget.style.opacity = '0.9'}
|
||||||
|
>
|
||||||
|
✉ info@hladinator.cz
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Buy me a coffee */}
|
{/* Buy me a coffee */}
|
||||||
<div style={{ borderTop: '1px solid var(--border-color)', paddingTop: '1.5rem', textAlign: 'center' }}>
|
<div style={{ borderTop: '1px solid var(--border-color)', paddingTop: '1.5rem', textAlign: 'center' }}>
|
||||||
<a
|
<a
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { useNavigate, useLocation } from 'react-router-dom';
|
import { useNavigate, useLocation } from 'react-router-dom';
|
||||||
import { FiDroplet, FiStar, FiMap, FiSettings, FiMenu, FiChevronLeft, FiChevronRight } from 'react-icons/fi';
|
import { FiDroplet, FiStar, FiMap, FiSettings, FiChevronLeft, FiChevronRight, FiDatabase } from 'react-icons/fi';
|
||||||
import { type Language, t } from '../translations';
|
import { type Language, t } from '../translations';
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -54,7 +54,7 @@ const Sidebar = ({ language, onOpenSettings, isMobileMenuOpen, onCloseMobileMenu
|
|||||||
<span className="sidebar-text">{dict.favorites}</span>
|
<span className="sidebar-text">{dict.favorites}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
|
<div className={`nav-item ${isOverview ? 'active' : ''}`} onClick={() => handleNavigate('/')}>
|
||||||
<FiMenu />
|
<FiDatabase />
|
||||||
<span className="sidebar-text">{dict.lakes}</span>
|
<span className="sidebar-text">{dict.lakes}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className={`nav-item ${isMap ? 'active' : ''}`} onClick={() => handleNavigate('/map')}>
|
<div className={`nav-item ${isMap ? 'active' : ''}`} onClick={() => handleNavigate('/map')}>
|
||||||
|
|||||||
+6
-2
@@ -4,7 +4,7 @@ export const t = {
|
|||||||
en: {
|
en: {
|
||||||
sidebar: {
|
sidebar: {
|
||||||
favorites: 'Favorites',
|
favorites: 'Favorites',
|
||||||
lakes: 'Lakes',
|
lakes: 'Lakes & Reservoirs',
|
||||||
map: 'Map',
|
map: 'Map',
|
||||||
settings: 'Settings'
|
settings: 'Settings'
|
||||||
},
|
},
|
||||||
@@ -46,13 +46,15 @@ export const t = {
|
|||||||
language: 'Language',
|
language: 'Language',
|
||||||
english: 'English',
|
english: 'English',
|
||||||
czech: 'Čeština',
|
czech: 'Čeština',
|
||||||
|
contact: 'Contact',
|
||||||
|
contactPlaceholder: 'Your email address',
|
||||||
buyCoffee: 'Buy Me a Coffee'
|
buyCoffee: 'Buy Me a Coffee'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
cs: {
|
cs: {
|
||||||
sidebar: {
|
sidebar: {
|
||||||
favorites: 'Oblíbené',
|
favorites: 'Oblíbené',
|
||||||
lakes: 'Jezera',
|
lakes: 'Jezera a nádrže',
|
||||||
map: 'Mapa',
|
map: 'Mapa',
|
||||||
settings: 'Nastavení'
|
settings: 'Nastavení'
|
||||||
},
|
},
|
||||||
@@ -94,6 +96,8 @@ export const t = {
|
|||||||
language: 'Jazyk',
|
language: 'Jazyk',
|
||||||
english: 'English',
|
english: 'English',
|
||||||
czech: 'Čeština',
|
czech: 'Čeština',
|
||||||
|
contact: 'Kontakt',
|
||||||
|
contactPlaceholder: 'Vaše e-mailová adresa',
|
||||||
buyCoffee: 'Kup mi kávu'
|
buyCoffee: 'Kup mi kávu'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user