marketing-shibata50/tududi
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Landing page improvement

Browse source
This commit is contained in:
Chris Veleris 2025-07-15 00:37:38 +03:00 • committed by antanst
parent 6e9dd9e6f0
commit 723a6cc562
4 changed files with 336 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

465
index.html
View file

@ -4,48 +4,94 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tududi - Self-Hosted Task & Project Management</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #1e88e5;
--secondary-color: #666666;
--light-color: #f5f5f5;
--dark-color: #212121;
--success-color: #0d47a1;
--primary-color: #2563eb;
--primary-hover: #1d4ed8;
--secondary-color: #64748b;
--accent-color: #06b6d4;
--light-color: #f8fafc;
--dark-color: #0f172a;
--success-color: #059669;
--bg-color: #ffffff;
--text-color: #212121;
--card-bg: #f5f5f5;
--border-color: rgba(0, 0, 0, 0.1);
--button-hover: #1565c0;
--text-color: #1e293b;
--text-muted: #64748b;
--card-bg: #ffffff;
--border-color: rgba(0, 0, 0, 0.08);
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--gradient-primary: linear-gradient(135deg, #e6a968 0%, #d49958 100%);
--gradient-elegant: linear-gradient(135deg, #f0b575 0%, #e0a465 100%);
--gradient-surface: linear-gradient(145deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
}
[data-theme="dark"] {
--primary-color: #42a5f5;
--secondary-color: #aaaaaa;
--light-color: #333333;
--dark-color: #f5f5f5;
--success-color: #64b5f6;
--primary-color: #3b82f6;
--primary-hover: #2563eb;
--secondary-color: #94a3b8;
--accent-color: #06b6d4;
--light-color: #1e293b;
--dark-color: #f1f5f9;
--success-color: #10b981;
--bg-color: #121212;
--text-color: #f5f5f5;
--card-bg: #1e1e1e;
--bg-color: #0f172a;
--text-color: #f1f5f9;
--text-muted: #94a3b8;
--card-bg: #1e293b;
--border-color: rgba(255, 255, 255, 0.1);
--button-hover: #2196f3;
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);
--gradient-primary: linear-gradient(135deg, #e6a968 0%, #d49958 100%);
--gradient-elegant: linear-gradient(135deg, #f0b575 0%, #e0a465 100%);
--gradient-surface: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html {
scroll-behavior: smooth;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
body {
line-height: 1.6;
line-height: 1.7;
color: var(--text-color);
background-color: var(--bg-color);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
font-weight: 400;
transition: all 0.3s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
@ -57,8 +103,10 @@
/* Header */
header {
background-color: var(--bg-color);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid var(--border-color);
position: fixed;
width: 100%;
top: 0;
@ -66,6 +114,22 @@
transition: all 0.3s ease;
}
[data-theme="dark"] header {
background: rgba(15, 23, 42, 0.95);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
header::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: var(--gradient-primary);
opacity: 0.3;
}
nav {
display: flex;
justify-content: space-between;
@ -76,13 +140,34 @@
.logo {
display: flex;
align-items: center;
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
font-size: 1.75rem;
font-weight: 800;
color: #1e293b;
text-decoration: none;
transition: all 0.3s ease;
}
.logo i {
margin-right: 10px;
[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-icon svg {
color: #1e293b;
}
[data-theme="dark"] .logo-icon svg {
color: white;
}
.nav-links {
@ -92,22 +177,42 @@
}
.nav-links li {
margin-left: 30px;
margin-left: 8px;
}
.nav-links a {
text-decoration: none;
color: var(--text-color);
font-weight: 500;
transition: color 0.3s;
transition: all 0.3s ease;
position: relative;
padding: 8px 16px;
border-radius: 8px;
}
.nav-links a::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-primary);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.nav-links a:hover {
color: var(--primary-color);
background: rgba(37, 99, 235, 0.05);
}
.nav-links a:hover::before {
width: 100%;
}
.theme-switch {
margin-left: 30px;
margin-left: 8px;
display: flex;
align-items: center;
}
@ -164,65 +269,117 @@
}
.cta-button {
background-color: var(--primary-color);
background: var(--gradient-primary);
color: white;
padding: 10px 20px;
border-radius: 5px;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s;
transition: all 0.3s ease;
box-shadow: var(--shadow-sm);
}
.cta-button:hover {
background-color: var(--button-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-md);
color: white;
}
/* Hero Section */
.hero {
padding: 150px 0 100px;
padding: 180px 0 120px;
text-align: center;
background-color: var(--bg-color);
background: var(--gradient-primary);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60"><defs><pattern id="hero-pattern" x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1.5" fill="rgba(255,255,255,0.1)"/></pattern></defs><rect width="60" height="60" fill="url(%23hero-pattern)"/></svg>') repeat;
opacity: 0.6;
}
.hero::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 70%);
}
.hero-content {
max-width: 900px;
margin: 0 auto;
position: relative;
z-index: 1;
}
.hero h1 {
font-size: 3rem;
margin-bottom: 20px;
color: var(--text-color);
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 24px;
color: white;
line-height: 1.1;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
animation: fadeInUp 0.8s ease-out;
}
.hero p {
font-size: 1.25rem;
color: var(--secondary-color);
margin-bottom: 30px;
font-size: 1.3rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
line-height: 1.6;
position: relative;
z-index: 1;
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 50px;
margin-bottom: 60px;
flex-wrap: wrap;
position: relative;
z-index: 1;
animation: fadeInUp 0.8s ease-out 0.4s both;
}
.hero-buttons a {
text-decoration: none;
padding: 15px 30px;
border-radius: 5px;
padding: 16px 32px;
border-radius: 12px;
font-weight: 600;
transition: all 0.3s;
font-size: 1.1rem;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.primary-button {
background-color: var(--primary-color);
color: white;
background-color: white;
color: var(--primary-color);
box-shadow: var(--shadow-lg);
}
.primary-button:hover {
background-color: var(--button-hover);
transform: translateY(-2px);
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.secondary-button {
@ -256,71 +413,136 @@
border-radius: 5px;
}
.hero-image-container {
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.hero-image {
max-width: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 100%;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
margin: 0 auto;
transition: all 0.3s ease;
animation: fadeInUp 0.8s ease-out 0.6s both;
}
/* Features */
.features {
padding: 100px 0;
padding: 120px 0;
background-color: var(--light-color);
}
[data-theme="dark"] .features {
background-color: var(--bg-color);
}
.section-header {
text-align: center;
margin-bottom: 60px;
margin-bottom: 80px;
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.section-header h2 {
font-size: 2.5rem;
margin-bottom: 20px;
font-size: 2.4rem;
font-weight: 800;
margin-bottom: 24px;
color: var(--text-color);
line-height: 1.2;
letter-spacing: -0.02em;
}
.section-header p {
font-size: 1.2rem;
color: var(--secondary-color);
font-size: 1.25rem;
color: var(--text-muted);
line-height: 1.6;
max-width: 700px;
margin: 0 auto;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}
.feature-card {
background-color: var(--card-bg);
border-radius: 10px;
padding: 30px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
padding: 24px 20px;
border-radius: 12px;
box-shadow: var(--shadow-md);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-align: left;
border: 1px solid var(--border-color);
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gradient-primary);
transition: all 0.3s ease;
}
.feature-card::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
transition: left 0.5s ease;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-8px) scale(1.02);
box-shadow: var(--shadow-lg);
}
.feature-card:hover::after {
left: 100%;
}
.feature-card:hover::before {
height: 6px;
}
.feature-icon {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 20px;
background: var(--gradient-primary);
color: white;
width: 48px;
height: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
font-size: 1.2rem;
box-shadow: var(--shadow-md);
}
.feature-card h3 {
font-size: 1.5rem;
margin-bottom: 15px;
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 12px;
color: var(--text-color);
line-height: 1.3;
}
.feature-card p {
color: var(--secondary-color);
color: var(--text-muted);
line-height: 1.6;
font-size: 0.9rem;
}
/* Languages Section */
@ -629,13 +851,37 @@
/* Responsive */
@media (max-width: 768px) {
.hero {
padding: 140px 0 80px;
}
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.1rem;
}
.hero-buttons {
flex-direction: column;
gap: 10px;
gap: 12px;
align-items: center;
}
.hero-buttons a {
width: 100%;
max-width: 280px;
text-align: center;
}
.section-header h2 {
font-size: 2.2rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.screenshots-grid {
@ -658,6 +904,12 @@
<div class="container">
<nav>
<div class="logo">
<div class="logo-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="28" height="28">
<circle cx="16" cy="16" r="13" stroke="currentColor" stroke-width="3.5" fill="none"/>
<path d="M10 16l4 4 8-8" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
</div>
<span>tududi</span>
</div>
<ul class="nav-links">
@ -681,8 +933,8 @@
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/mT7QBGssLTo?autoplay=1&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<div class="hero-image-container">
<img src="screenshots/all-dark.png" alt="tududi - Dark Mode Interface" class="hero-image">
</div>
<h1>Task Management Made Simple</h1>
<p>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.</p>
@ -706,42 +958,42 @@
<i class="fas fa-sync-alt"></i>
</div>
<h3>Smart Recurring Tasks</h3>
<p>Sophisticated recurring task system with parent-child relationships. Support for daily, weekly, monthly, and complex patterns. Completion-based recurrence and direct parent editing from any task instance.</p>
<p>Daily, weekly, monthly patterns with completion-based recurrence and parent-child relationships.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-tasks"></i>
</div>
<h3>Advanced Task Management</h3>
<p>Create, update, and organize tasks with rich metadata including priorities, due dates, and custom tags. Smart sorting by name, date, priority, or completion status with powerful filtering options.</p>
<p>Rich metadata with priorities, due dates, and tags. Smart sorting and powerful filtering options.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-sticky-note"></i>
</div>
<h3>Project Documentation</h3>
<p>Attach detailed notes and documentation to any project. Rich text support for meeting notes, project requirements, ideas, and reference materials - all searchable and organized.</p>
<p>Rich text notes for projects with full search and organization capabilities.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-tag"></i>
</div>
<h3>Flexible Tagging System</h3>
<p>Create custom tags for cross-cutting concerns like #urgent, #client-work, or #personal. Tag both tasks and notes for powerful cross-project organization and instant filtering.</p>
<p>Custom tags for tasks and notes with instant filtering and cross-project organization.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-project-diagram"></i>
</div>
<h3>Hierarchical Project Organization</h3>
<p>Structure your work with Areas containing Projects containing Tasks. Perfect for GTD methodology - separate work areas, personal projects, and specific actionable tasks.</p>
<h3>Hierarchical Organization</h3>
<p>GTD-style Areas → Projects → Tasks structure for clear work separation.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
<i class="fas fa-layer-group"></i>
</div>
<h3>Life Area Management</h3>
<p>Organize projects into life areas like Work, Personal, Health, or Learning. Maintain clear boundaries between different aspects of your life while keeping everything in one place.</p>
<p>Organize projects by life areas - Work, Personal, Health, Learning - with clear boundaries.</p>
</div>
<div class="feature-card">
<div class="feature-icon">
@ -907,53 +1159,6 @@
</div>
</section>
<section class="installation" style="background-color: var(--card-bg);">
<div class="container">
<div class="section-header">
<h2>🔄 Intelligent Recurring Tasks</h2>
<p>tududi's recurring task system goes beyond simple repetition. With smart parent-child relationships and flexible scheduling options, manage complex recurring workflows with ease.</p>
</div>
<div class="installation-steps" style="background-color: var(--bg-color);">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-bottom: 40px;">
<div style="text-align: center; padding: 20px;">
<div style="font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px;">
<i class="fas fa-calendar-day"></i>
</div>
<h3 style="color: var(--text-color); margin-bottom: 10px;">Multiple Patterns</h3>
<p style="color: var(--secondary-color); font-size: 0.9rem;">Daily, weekly, monthly, monthly weekday (e.g., "2nd Tuesday"), and monthly last day patterns</p>
</div>
<div style="text-align: center; padding: 20px;">
<div style="font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px;">
<i class="fas fa-check-double"></i>
</div>
<h3 style="color: var(--text-color); margin-bottom: 10px;">Completion-Based</h3>
<p style="color: var(--secondary-color); font-size: 0.9rem;">Next task scheduled based on completion date instead of due date - perfect for flexible routines</p>
</div>
<div style="text-align: center; padding: 20px;">
<div style="font-size: 2.5rem; color: var(--primary-color); margin-bottom: 15px;">
<i class="fas fa-link"></i>
</div>
<h3 style="color: var(--text-color); margin-bottom: 10px;">Parent-Child Linking</h3>
<p style="color: var(--secondary-color); font-size: 0.9rem;">Generated tasks maintain connection to their parent - edit recurrence from any instance</p>
</div>
</div>
<div style="background-color: var(--card-bg); padding: 25px; border-radius: 10px; border-left: 4px solid var(--primary-color);">
<h4 style="color: var(--text-color); margin-bottom: 15px; display: flex; align-items: center;">
<i class="fas fa-lightbulb" style="color: var(--primary-color); margin-right: 10px;"></i>
Example Use Cases
</h4>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; font-size: 0.9rem; color: var(--secondary-color);">
<div><strong style="color: var(--text-color);">Daily:</strong> Take vitamins, review goals</div>
<div><strong style="color: var(--text-color);">Weekly:</strong> Grocery shopping (every Sunday)</div>
<div><strong style="color: var(--text-color);">Monthly:</strong> Pay rent (1st of month)</div>
<div><strong style="color: var(--text-color);">Complex:</strong> Team review (1st Mon of quarter)</div>
<div><strong style="color: var(--text-color);">Flexible:</strong> Car maintenance (completion-based)</div>
<div><strong style="color: var(--text-color);">End Date:</strong> Study plan (until exam date)</div>
</div>
</div>
</div>
</div>
</section>
<section class="screenshots" id="screenshots">
<div class="container">
@ -1062,7 +1267,7 @@
</div>
<div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 40px;">
<a href="https://discord.gg/fkbeJ9CmcH" style="display: inline-block;">
<img src="https://img.shields.io/discord/1234567890?color=7289da&label=Discord&logo=discord&logoColor=white&style=for-the-badge" alt="Join Discord" style="height: 40px; transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
<img src="https://img.shields.io/badge/Discord-Join%20Server-7289da?logo=discord&logoColor=white&style=for-the-badge" alt="Join Discord" style="height: 40px; transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">
</a>
<a href="https://www.reddit.com/r/tududi/" style="display: inline-block;">
<img src="https://img.shields.io/reddit/subreddit-subscribers/tududi?color=ff4500&label=Reddit&logo=reddit&logoColor=white&style=for-the-badge" alt="Join Reddit" style="height: 40px; transition: transform 0.3s ease;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='translateY(0)'">