From 26a0024207d4016539c446a43e70f201c1607c70 Mon Sep 17 00:00:00 2001 From: Chris Date: Sun, 2 Nov 2025 00:18:40 +0200 Subject: [PATCH] Add new logos (#463) * Add new logos * fixup! Add new logos * fixup! fixup! Add new logos * Setup login screen * fixup! Setup login screen --- README.md | 34 ++-- frontend/App.tsx | 5 +- frontend/components/About.tsx | 20 ++- frontend/components/Login.tsx | 146 ++++++++++++------ frontend/components/Navbar.tsx | 16 +- frontend/components/Sidebar/SidebarHeader.tsx | 18 ++- index.html | 49 +++--- package-lock.json | 83 +++++++++- package.json | 1 + public/favicon-16.png | Bin 0 -> 1430 bytes public/favicon-32.png | Bin 0 -> 1962 bytes public/favicon-48.png | Bin 0 -> 2523 bytes public/favicon-dark.ico | Bin 1086 -> 15086 bytes public/favicon-light.ico | Bin 1086 -> 15086 bytes public/favicon.ico | Bin 1086 -> 15086 bytes public/favicon.png | Bin 0 -> 1962 bytes public/favicon.svg | 23 --- public/icon-logo.png | Bin 0 -> 66164 bytes public/index.html | 15 +- public/login-gfx.png | Bin 0 -> 1704442 bytes public/manifest.json | 23 ++- public/wide-logo-dark.png | Bin 0 -> 27492 bytes public/wide-logo-light.png | Bin 0 -> 17646 bytes webpack.config.js | 12 ++ 24 files changed, 298 insertions(+), 147 deletions(-) create mode 100644 public/favicon-16.png create mode 100644 public/favicon-32.png create mode 100644 public/favicon-48.png create mode 100644 public/favicon.png delete mode 100644 public/favicon.svg create mode 100644 public/icon-logo.png create mode 100644 public/login-gfx.png create mode 100644 public/wide-logo-dark.png create mode 100644 public/wide-logo-light.png diff --git a/README.md b/README.md index de9c372..b6c634c 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,14 @@ -# πŸ“ tududi +

+ tududi +

-`tududi` is the self-hosted task management tool that puts you in control. Organize your life and projects with a clear, hierarchical structure, -smart recurring tasks, and seamless Telegram integration. Get focused, stay productive, and keep your data private. +

+

Productivity made simple

+

Organize your life and projects with a clear, hierarchical structure,
+ smart recurring tasks, and seamless Telegram integration.
+ Get focused, stay productive, and keep your data private. +

+

![Light Mode Screenshot](screenshots/all-light.png) @@ -23,12 +30,12 @@ For the thinking behind tududi, read: - **Task Management**: Create, update, and delete tasks. Mark tasks as completed and view them by different filters (Today, Upcoming, Someday). Order them by Name, Due Date, Date Created, or Priority. - **Subtasks**: Break down complex tasks into smaller, manageable subtasks with progress tracking and seamless navigation. - **Recurring Tasks**: Comprehensive recurring task system with intelligent parent-child relationships: - - **Multiple Recurrence Patterns**: Daily, weekly, monthly, monthly on specific weekdays, and monthly last day - - **Completion-Based Recurrence**: Option to repeat based on completion date rather than due date - - **Smart Parent-Child Linking**: Generated task instances maintain connection to their original recurring pattern - - **Direct Parent Editing**: Edit recurrence settings directly from any generated task instance - - **Flexible Scheduling**: Set custom intervals (every 2 weeks, every 3 months, etc.) - - **End Date Control**: Optional end dates for recurring series + - **Multiple Recurrence Patterns**: Daily, weekly, monthly, monthly on specific weekdays, and monthly last day + - **Completion-Based Recurrence**: Option to repeat based on completion date rather than due date + - **Smart Parent-Child Linking**: Generated task instances maintain connection to their original recurring pattern + - **Direct Parent Editing**: Edit recurrence settings directly from any generated task instance + - **Flexible Scheduling**: Set custom intervals (every 2 weeks, every 3 months, etc.) + - **End Date Control**: Optional end dates for recurring series - **Project Sharing & Collaboration**: Share projects with team members and collaborate effectively - **Quick Notes**: Create, update, delete, or assign text notes to projects. - **Tags**: Create tags for tasks and notes to enhance organization. @@ -38,9 +45,9 @@ For the thinking behind tududi, read: - **Responsive Design**: Accessible from various devices, ensuring a consistent experience across desktops, tablets, and mobile phones. - **Multi-Language Support**: Available in 24 languages with full localization support for a truly global productivity experience. - **Telegram Integration**: - - Create tasks directly through Telegram messages - - Receive daily digests of your tasks - - Quick capture of ideas and todos on the go + - Create tasks directly through Telegram messages + - Receive daily digests of your tasks + - Quick capture of ideas and todos on the go ## πŸ—ΊοΈ Roadmap @@ -119,6 +126,7 @@ Contributions to tududi are welcome! Whether it's bug fixes, new features, docum 6. Push to your fork and open a Pull Request **Read our [Contributing Guide](.github/CONTRIBUTING.md) for:** + - Development setup and workflow - Code standards and best practices - Testing requirements @@ -142,7 +150,7 @@ Join the tududi community: ## 🌟 Please check my other projects! - **[Reconya](https://reconya.com)** - Network reconnaissance and asset discovery tool -- **[BreachHarbor](https://breachharbor.com)** - Cybersecurity suite for digital asset protection +- **[BreachHarbor](https://breachharbor.com)** - Cybersecurity suite for digital asset protection - **[Hevetra](https://hevetra.com)** - Digital tracking for child health milestones # Screenshots diff --git a/frontend/App.tsx b/frontend/App.tsx index 5da0124..a56830d 100644 --- a/frontend/App.tsx +++ b/frontend/App.tsx @@ -253,7 +253,10 @@ const App: React.FC = () => { /> } /> - } /> + } + /> { +interface AboutProps { + isDarkMode?: boolean; +} + +const About: React.FC = ({ isDarkMode = false }) => { const { t } = useTranslation(); const [version, setVersion] = useState('0.3'); @@ -33,9 +37,17 @@ const About: React.FC = () => {
{/* Logo and Version */}
-

- tududi -

+
+ tududi +

{t('about.version', 'Version')} {version}

diff --git a/frontend/components/Login.tsx b/frontend/components/Login.tsx index 342c3c9..527ffc2 100644 --- a/frontend/components/Login.tsx +++ b/frontend/components/Login.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import i18n from 'i18next'; import { useTranslation } from 'react-i18next'; @@ -9,6 +9,16 @@ const Login: React.FC = () => { const [error, setError] = useState(null); const navigate = useNavigate(); const { t } = useTranslation(); + const [isDarkMode] = useState(() => { + const storedPreference = localStorage.getItem('isDarkMode'); + return storedPreference !== null + ? storedPreference === 'true' + : window.matchMedia('(prefers-color-scheme: dark)').matches; + }); + + useEffect(() => { + document.documentElement.classList.toggle('dark', isDarkMode); + }, [isDarkMode]); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); @@ -45,56 +55,96 @@ const Login: React.FC = () => { }; return ( -
-

tududi

-
- {error && ( -
{error}
- )} -
-
- - setEmail(e.target.value)} - className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" - required + <> + {/* Navbar */} + + + {/* Main Content */} +
+
+ {/* Left side - Login Form */} +
+
+

+ {t('auth.login', 'Login')} +

+ {error && ( +
+ {error} +
+ )} + +
+ + + setEmail(e.target.value) + } + className="w-full px-4 py-2 border dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" + required + /> +
+
+ + + setPassword(e.target.value) + } + className="w-full px-4 py-2 border dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100" + required + /> +
+ + +
+
+ + {/* Right side - Graphic */} +
+ Login illustration
-
- - setPassword(e.target.value)} - className="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" - required - /> -
- - +
-
+ ); }; diff --git a/frontend/components/Navbar.tsx b/frontend/components/Navbar.tsx index 731b75d..171fe9b 100644 --- a/frontend/components/Navbar.tsx +++ b/frontend/components/Navbar.tsx @@ -31,6 +31,7 @@ const Navbar: React.FC = ({ isSidebarOpen, setIsSidebarOpen, openTaskModal, + isDarkMode, }) => { const { t } = useTranslation(); const [isDropdownOpen, setIsDropdownOpen] = useState(false); @@ -164,12 +165,17 @@ const Navbar: React.FC = ({ - - t - tududi - + tududi
diff --git a/frontend/components/Sidebar/SidebarHeader.tsx b/frontend/components/Sidebar/SidebarHeader.tsx index 1eab15c..9eb6186 100644 --- a/frontend/components/Sidebar/SidebarHeader.tsx +++ b/frontend/components/Sidebar/SidebarHeader.tsx @@ -1,13 +1,25 @@ import React from 'react'; -const SidebarHeader: React.FC = () => { +interface SidebarHeaderProps { + isDarkMode: boolean; +} + +const SidebarHeader: React.FC = ({ isDarkMode }) => { return ( ); diff --git a/index.html b/index.html index e063a4a..6ede090 100644 --- a/index.html +++ b/index.html @@ -150,34 +150,33 @@ .logo { display: flex; align-items: center; - font-size: 1.75rem; - font-weight: 800; - color: #1e293b; text-decoration: none; transition: all 0.3s ease; } - [data-theme="dark"] .logo { - color: white; - } - .logo:hover { transform: translateY(-1px); } - .logo-icon { - margin-right: 8px; - display: flex; - align-items: center; - justify-content: center; + .logo-image { + height: 36px; + width: auto; } - .logo-icon svg { - color: #1e293b; + .logo-light { + display: block; } - [data-theme="dark"] .logo-icon svg { - color: white; + .logo-dark { + display: none; + } + + [data-theme="dark"] .logo-light { + display: none; + } + + [data-theme="dark"] .logo-dark { + display: block; } .nav-links { @@ -1002,13 +1001,8 @@ padding: 15px 0; } - .logo { - font-size: 1.5rem; - } - - .logo-icon svg { - width: 24px; - height: 24px; + .logo-image { + height: 28px; } .nav-links { @@ -1292,13 +1286,8 @@