Skip to content

add language add night theme add animation add settings #59

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nikozarserg-boop wants to merge 4 commits into
base: master
Choose a base branch
from
Open

add language add night theme add animation add settings #59

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
eede09c
upgrade Logic and all
nikozarserg-boop Jan 19, 2026
3800f5e
Night Theme fix
nikozarserg-boop Jan 20, 2026
f47ffc1
fix Theme
nikozarserg-boop Jan 20, 2026
832bedc
fix amination
nikozarserg-boop Jan 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion client/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,16 @@
]
},
"devDependencies": {
"@types/babel__generator": "^7.27.0",
"@types/babel__template": "^7.4.4",
"@types/babel__traverse": "^7.28.0",
"@types/d3-color": "^3.1.3",
"@types/d3-path": "^3.1.1",
"@types/eslint": "^9.6.1",
"@types/estree": "^1.0.8",
"@types/istanbul-lib-report": "^3.0.3",
"@types/yargs-parser": "^21.0.3",
"ajv": "^8.17.1",
"autoprefixer": "^10.4.22",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.17"
Expand All @@ -60,4 +70,3 @@
}
}
}

168 changes: 150 additions & 18 deletions client/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
import { io, Socket } from 'socket.io-client';
import { Login } from './components/Login';
import { Dashboard } from './components/Dashboard';
import { Language, getTranslation } from './i18n';
import { Globe, Sun, Moon } from 'lucide-react';

// Create socket with autoConnect disabled so we can add listeners before connecting
const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:3001';
Expand All @@ -20,6 +22,16 @@ export interface ConnectionState {

function App() {
const [isConnected, setIsConnected] = useState(socket.connected);
const [language, setLanguage] = useState<Language>(() => {
const saved = localStorage.getItem('language');
return (saved as Language) || 'en';
});
const [langButtonAnimating, setLangButtonAnimating] = useState(false);
const [theme, setTheme] = useState<'light' | 'dark'>(() => {
const saved = localStorage.getItem('theme');
return (saved as 'light' | 'dark') || 'light';
});
const [themeButtonAnimating, setThemeButtonAnimating] = useState(false);
const [connectionState, setConnectionState] = useState<ConnectionState>({
whatsapp: false,
signal: false,
Expand Down Expand Up @@ -108,32 +120,152 @@ function App() {
};
}, []);

const handleLanguageChange = (lang: Language) => {
setLangButtonAnimating(true);
setLanguage(lang);
localStorage.setItem('language', lang);

// Reset animation after 500ms
setTimeout(() => {
setLangButtonAnimating(false);
}, 500);
};

const handleThemeChange = () => {
setThemeButtonAnimating(true);
const newTheme = theme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);

// Reset animation after 500ms
setTimeout(() => {
setThemeButtonAnimating(false);
}, 500);
};

return (
<div className="min-h-screen bg-gray-100 p-8">
<div className={`min-h-screen p-8 transition-colors duration-300 ${
theme === 'dark'
? 'bg-gray-900 text-gray-100'
: 'bg-gray-100 text-gray-900'
}`}>
<div className="max-w-6xl mx-auto">
<header className="mb-8 flex justify-between items-center">
<h1 className="text-3xl font-bold text-gray-900">Activity Tracker</h1>
<div className="flex items-center gap-2">
<div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
<span className="text-sm text-gray-600">{isConnected ? 'Server Connected' : 'Disconnected'}</span>
{isConnected && (
<>
<div className="w-px h-4 bg-gray-300 mx-2" />
<div className={`w-3 h-3 rounded-full ${connectionState.whatsapp ? 'bg-green-500' : 'bg-yellow-500'}`} />
<span className="text-sm text-gray-600">WhatsApp</span>
<div className="w-px h-4 bg-gray-300 mx-2" />
<div className={`w-3 h-3 rounded-full ${connectionState.signal ? 'bg-green-500' : 'bg-yellow-500'}`} />
<span className="text-sm text-gray-600">Signal</span>
</>
)}
<header className="mb-8 flex flex-wrap justify-between items-center gap-4">
<h1 className={`text-2xl sm:text-3xl font-bold whitespace-nowrap ${
theme === 'dark' ? 'text-white' : 'text-gray-900'
}`}>{getTranslation(language, 'title')}</h1>
<div className="flex flex-wrap items-center gap-3">
{/* Theme Toggle */}
<button
onClick={handleThemeChange}
className={`group relative p-3 rounded-full border-2 transition-all duration-500 flex items-center justify-center ${
themeButtonAnimating ? 'scale-110' : ''
} ${
theme === 'dark'
? 'bg-gray-900 border-indigo-600'
: 'bg-gradient-to-br from-amber-50 to-blue-50 border-amber-300'
}`}
style={{
boxShadow: theme === 'dark'
? '0 0 20px rgba(99, 102, 241, 0.3), inset 0 0 15px rgba(99, 102, 241, 0.1)'
: '0 0 20px rgba(217, 119, 6, 0.3), inset 0 0 15px rgba(217, 119, 6, 0.1)',
transition: 'all 500ms ease-out'
}}
title={theme === 'light' ? 'Switch to Dark Mode' : 'Switch to Light Mode'}
>
<div className="relative w-6 h-6">
<Sun
size={24}
className={`absolute inset-0 text-amber-500 transition-all duration-500 ${
theme === 'light'
? 'opacity-100 rotate-0 scale-100'
: 'opacity-0 rotate-90 scale-0'
}`}
/>
<Moon
size={24}
className={`absolute inset-0 text-indigo-500 transition-all duration-500 ${
theme === 'dark'
? 'opacity-100 rotate-0 scale-100'
: 'opacity-0 -rotate-90 scale-0'
}`}
/>
</div>
</button>

{/* Language Switcher */}
<div
className={`relative inline-flex items-center rounded-full p-1 w-fit border-2 ${
theme === 'dark'
? 'bg-gray-900 border-gray-700'
: 'bg-gray-50 border-blue-200'
}`}
style={{
boxShadow: language === 'en'
? `0 0 20px rgba(59, 130, 246, 0.3), inset 0 0 20px rgba(59, 130, 246, 0.1)`
: `0 0 20px rgba(79, 70, 229, 0.3), inset 0 0 20px rgba(79, 70, 229, 0.1)`,
transition: 'box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1)'
}}
>
{/* Animated Background Slider */}
<div
className={`absolute top-1 bottom-1 w-16 bg-gradient-to-r from-blue-500 via-blue-600 to-indigo-600 rounded-full ${
language === 'en' ? 'left-1' : 'left-16'
}`}
style={{
boxShadow: language === 'en'
? '0 8px 25px rgba(59, 130, 246, 0.5)'
: '0 8px 25px rgba(79, 70, 229, 0.5)',
transition: 'all 500ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 500ms cubic-bezier(0.4, 0, 0.2, 1)'
}}
/>

<button
onClick={() => handleLanguageChange('en')}
className={`relative px-4 py-2 text-sm font-bold rounded-full flex items-center justify-center transition-all duration-500 z-10 w-16 ${
language === 'en'
? 'text-white'
: `${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`
}`}
title="English"
>
<span className="font-semibold">EN</span>
</button>
<button
onClick={() => handleLanguageChange('ru')}
className={`relative px-4 py-2 text-sm font-bold rounded-full flex items-center justify-center transition-all duration-500 z-10 w-16 ${
language === 'ru'
? 'text-white'
: `${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`
}`}
title="Русский"
>
<span className="font-semibold">РУ</span>
</button>
</div>

<div className="flex items-center gap-2">
<div className={`w-3 h-3 rounded-full ${isConnected ? 'bg-green-500' : 'bg-red-500'}`} />
<span className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>{isConnected ? getTranslation(language, 'serverConnected') : getTranslation(language, 'disconnected')}</span>
{isConnected && (
<>
<div className={`w-px h-4 mx-2 ${theme === 'dark' ? 'bg-gray-600' : 'bg-gray-300'}`} />
<div className={`w-3 h-3 rounded-full ${connectionState.whatsapp ? 'bg-green-500' : 'bg-yellow-500'}`} />
<span className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>WhatsApp</span>
<div className={`w-px h-4 mx-2 ${theme === 'dark' ? 'bg-gray-600' : 'bg-gray-300'}`} />
<div className={`w-3 h-3 rounded-full ${connectionState.signal ? 'bg-green-500' : 'bg-yellow-500'}`} />
<span className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>Signal</span>
</>
)}
</div>
</div>
</header>

<main>
{!isAnyPlatformReady ? (
<Login connectionState={connectionState} />
<Login connectionState={connectionState} language={language} theme={theme} />
) : (
<Dashboard connectionState={connectionState} />
<Dashboard connectionState={connectionState} language={language} theme={theme} />
)}
</main>
</div>
Expand Down
Loading