875 lines
32 KiB
HTML
875 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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="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;
|
|
|
|
--bg-color: #ffffff;
|
|
--text-color: #212121;
|
|
--card-bg: #f5f5f5;
|
|
--border-color: rgba(0, 0, 0, 0.1);
|
|
--button-hover: #1565c0;
|
|
}
|
|
|
|
[data-theme="dark"] {
|
|
--primary-color: #42a5f5;
|
|
--secondary-color: #aaaaaa;
|
|
--light-color: #333333;
|
|
--dark-color: #f5f5f5;
|
|
--success-color: #64b5f6;
|
|
|
|
--bg-color: #121212;
|
|
--text-color: #f5f5f5;
|
|
--card-bg: #1e1e1e;
|
|
--border-color: rgba(255, 255, 255, 0.1);
|
|
--button-hover: #2196f3;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
line-height: 1.6;
|
|
color: var(--text-color);
|
|
background-color: var(--bg-color);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 0 15px;
|
|
}
|
|
|
|
/* Header */
|
|
header {
|
|
background-color: var(--bg-color);
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
z-index: 1000;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.logo i {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.nav-links {
|
|
display: flex;
|
|
list-style: none;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-links li {
|
|
margin-left: 30px;
|
|
}
|
|
|
|
.nav-links a {
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
font-weight: 500;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.nav-links a:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.theme-switch {
|
|
margin-left: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.theme-switch-label {
|
|
margin-right: 10px;
|
|
font-size: 0.9rem;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.switch {
|
|
position: relative;
|
|
display: inline-block;
|
|
width: 50px;
|
|
height: 24px;
|
|
}
|
|
|
|
.switch input {
|
|
opacity: 0;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.slider {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: #ccc;
|
|
transition: .4s;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.slider:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 16px;
|
|
width: 16px;
|
|
left: 4px;
|
|
bottom: 4px;
|
|
background-color: white;
|
|
transition: .4s;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
input:checked + .slider {
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
input:checked + .slider:before {
|
|
transform: translateX(26px);
|
|
}
|
|
|
|
.cta-button {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
padding: 10px 20px;
|
|
border-radius: 5px;
|
|
font-weight: 600;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.cta-button:hover {
|
|
background-color: var(--button-hover);
|
|
color: white;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
padding: 150px 0 100px;
|
|
text-align: center;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
.hero-content {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: 3rem;
|
|
margin-bottom: 20px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.hero p {
|
|
font-size: 1.25rem;
|
|
color: var(--secondary-color);
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.hero-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.hero-buttons a {
|
|
text-decoration: none;
|
|
padding: 15px 30px;
|
|
border-radius: 5px;
|
|
font-weight: 600;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.primary-button {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.primary-button:hover {
|
|
background-color: var(--button-hover);
|
|
}
|
|
|
|
.secondary-button {
|
|
border: 2px solid var(--primary-color);
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
.secondary-button:hover {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.hero-image {
|
|
max-width: 100%;
|
|
border-radius: 10px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
margin: 0 auto;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* Features */
|
|
.features {
|
|
padding: 100px 0;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
.section-header {
|
|
text-align: center;
|
|
margin-bottom: 60px;
|
|
}
|
|
|
|
.section-header h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 20px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.section-header p {
|
|
font-size: 1.2rem;
|
|
color: var(--secondary-color);
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.features-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 30px;
|
|
}
|
|
|
|
.feature-card {
|
|
background-color: var(--card-bg);
|
|
border-radius: 10px;
|
|
padding: 30px;
|
|
text-align: center;
|
|
transition: transform 0.3s, box-shadow 0.3s;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
transform: translateY(-10px);
|
|
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.feature-icon {
|
|
font-size: 2.5rem;
|
|
color: var(--primary-color);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.feature-card h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 15px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
/* Screenshots */
|
|
.screenshots {
|
|
padding: 100px 0;
|
|
background-color: var(--card-bg);
|
|
}
|
|
|
|
.screenshots-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 30px;
|
|
margin-top: 50px;
|
|
}
|
|
|
|
.screenshot {
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.screenshot img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.screenshot:hover img {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
/* Installation */
|
|
.installation {
|
|
padding: 100px 0;
|
|
background-color: var(--bg-color);
|
|
}
|
|
|
|
.installation-steps {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background-color: var(--card-bg);
|
|
border-radius: 10px;
|
|
padding: 40px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.step {
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.step:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.step-number {
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
margin-right: 15px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.step-content h3 {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 10px;
|
|
color: var(--text-color);
|
|
}
|
|
|
|
.step-content p {
|
|
color: var(--secondary-color);
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
code {
|
|
background-color: #f0f0f0;
|
|
padding: 10px 15px;
|
|
border-radius: 5px;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
display: block;
|
|
margin: 15px 0;
|
|
white-space: pre-wrap;
|
|
color: #333;
|
|
}
|
|
|
|
[data-theme="dark"] code {
|
|
background-color: #2a2a2a;
|
|
color: #f0f0f0;
|
|
}
|
|
|
|
/* CTA */
|
|
.cta {
|
|
padding: 100px 0;
|
|
background-color: var(--primary-color);
|
|
color: white;
|
|
text-align: center;
|
|
}
|
|
|
|
.cta h2 {
|
|
font-size: 2.5rem;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.cta p {
|
|
font-size: 1.2rem;
|
|
max-width: 700px;
|
|
margin: 0 auto 30px;
|
|
}
|
|
|
|
.cta-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.cta-white {
|
|
background-color: white;
|
|
color: var(--primary-color);
|
|
padding: 15px 30px;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.cta-white:hover {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.cta-outline {
|
|
border: 2px solid white;
|
|
color: white;
|
|
padding: 15px 30px;
|
|
border-radius: 5px;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.cta-outline:hover {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background-color: #212121;
|
|
color: white;
|
|
padding: 60px 0 30px;
|
|
}
|
|
|
|
.footer-content {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 40px;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.footer-column h3 {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 20px;
|
|
position: relative;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.footer-column h3::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: 50px;
|
|
height: 2px;
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
.footer-links {
|
|
list-style: none;
|
|
}
|
|
|
|
.footer-links li {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.footer-links a {
|
|
color: #b0b0b0;
|
|
text-decoration: none;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.footer-links a:hover {
|
|
color: white;
|
|
}
|
|
|
|
.footer-bottom {
|
|
text-align: center;
|
|
padding-top: 30px;
|
|
border-top: 1px solid var(--border-color);
|
|
color: #b0b0b0;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.social-icons {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.social-icons a {
|
|
color: white;
|
|
font-size: 1.2rem;
|
|
transition: color 0.3s;
|
|
}
|
|
|
|
.social-icons a:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 768px) {
|
|
.hero h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.hero-buttons {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.screenshots-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
}
|
|
|
|
.theme-switch {
|
|
margin-left: 0;
|
|
margin-top: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body data-theme="dark">
|
|
<header>
|
|
<div class="container">
|
|
<nav>
|
|
<div class="logo">
|
|
<i class="fas fa-check-square"></i>
|
|
<span>tududi</span>
|
|
</div>
|
|
<ul class="nav-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#screenshots">Screenshots</a></li>
|
|
<li><a href="#installation">Installation</a></li>
|
|
<li class="theme-switch">
|
|
<span class="theme-switch-label"><i class="fas fa-moon"></i></span>
|
|
<label class="switch">
|
|
<input type="checkbox" id="theme-toggle" checked>
|
|
<span class="slider"></span>
|
|
</label>
|
|
</li>
|
|
<li><a href="https://github.com/chrisvel/tududi" class="cta-button">GitHub</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<div class="container">
|
|
<div class="hero-content">
|
|
<h1>Task Management Made Simple</h1>
|
|
<p>Self-hosted task management with hierarchical organization (Areas > Projects > Tasks), multi-language support, and Telegram integration. Built with React/TypeScript frontend and functional programming Express.js backend.</p>
|
|
<div class="hero-buttons">
|
|
<a href="https://github.com/chrisvel/tududi" class="primary-button">View on GitHub</a>
|
|
<a href="#installation" class="secondary-button">Quick Install</a>
|
|
</div>
|
|
<img src="screenshots/all-light.png" alt="tududi Screenshot" class="hero-image" id="hero-screenshot">
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="features" id="features">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Powerful Features for Modern Productivity</h2>
|
|
<p>tududi combines the simplicity of personal task management with the power of professional project organization. Built for individuals and teams who value privacy, control, and efficiency.</p>
|
|
</div>
|
|
<div class="features-grid">
|
|
<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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</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>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-calendar-check"></i>
|
|
</div>
|
|
<h3>Intelligent Due Date Management</h3>
|
|
<p>Set due dates with smart categorization: Today's priorities, Upcoming deadlines, and Someday tasks. Visual indicators and automatic sorting keep you focused on what matters now.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-language"></i>
|
|
</div>
|
|
<h3>Multi-Language Support</h3>
|
|
<p>Available in multiple languages including English, German, Greek, Spanish, Japanese, and Ukrainian among others.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-paper-plane"></i>
|
|
</div>
|
|
<h3>Telegram Integration</h3>
|
|
<p>Create tasks directly through Telegram messages, receive daily digests of your tasks, and quick capture ideas on the go. Never miss important deadlines with automated notifications.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-mobile-alt"></i>
|
|
</div>
|
|
<h3>Responsive Design</h3>
|
|
<p>Seamlessly works across all devices - desktop, tablet, and mobile. Dark and light themes with automatic system preference detection.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-server"></i>
|
|
</div>
|
|
<h3>Self-Hosted Privacy</h3>
|
|
<p>Keep your data completely private and under your control. No cloud dependencies, no data mining, no subscription fees - just your own secure installation.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-filter"></i>
|
|
</div>
|
|
<h3>Smart Filtering & Search</h3>
|
|
<p>Advanced filtering by status, priority, due dates, tags, and projects. Quick search functionality to find exactly what you need instantly.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">
|
|
<i class="fas fa-chart-line"></i>
|
|
</div>
|
|
<h3>Productivity Insights</h3>
|
|
<p>Track your progress with task completion statistics, project timelines, and productivity patterns to optimize your workflow.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="screenshots" id="screenshots">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Clean, Intuitive Interface</h2>
|
|
<p>Experience tududi's thoughtfully designed interface that adapts to your workflow. Dark and light themes, responsive design, and distraction-free focus on what matters most.</p>
|
|
</div>
|
|
<div class="screenshots-grid">
|
|
<div class="screenshot">
|
|
<img src="screenshots/all-light.png" alt="Light Mode - Desktop">
|
|
</div>
|
|
<div class="screenshot">
|
|
<img src="screenshots/all-dark.png" alt="Dark Mode - Desktop">
|
|
</div>
|
|
<div class="screenshot">
|
|
<img src="screenshots/mobile-all-light.png" alt="Light Mode - Mobile">
|
|
</div>
|
|
<div class="screenshot">
|
|
<img src="screenshots/mobile-all-dark.png" alt="Dark Mode - Mobile">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<section class="installation" id="installation">
|
|
<div class="container">
|
|
<div class="section-header">
|
|
<h2>Easy Self-Hosted Setup</h2>
|
|
<p>Deploy tududi in minutes with Docker. No complex configuration, no external dependencies - just pull, configure, and run. Your data stays completely under your control.</p>
|
|
</div>
|
|
<div class="installation-steps">
|
|
<div class="step">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<h3>Pull the latest image</h3>
|
|
<p>First, pull the latest Docker image:</p>
|
|
<code>docker pull chrisvel/tududi:latest</code>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h3>Create a session secret (optional)</h3>
|
|
<p>Generate a random session secret:</p>
|
|
<code>openssl rand -hex 64</code>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h3>Run the Docker container</h3>
|
|
<p>Launch the application with your configuration:</p>
|
|
<code>docker run \
|
|
-e TUDUDI_USER_EMAIL=myemail@example.com \
|
|
-e TUDUDI_USER_PASSWORD=mysecurepassword \
|
|
-e TUDUDI_SESSION_SECRET=your_generated_hash_here \
|
|
-e TUDUDI_INTERNAL_SSL_ENABLED=false \
|
|
-v ~/tududi_db:/usr/src/app/tududi_db \
|
|
-p 9292:9292 \
|
|
-d chrisvel/tududi:latest</code>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">4</div>
|
|
<div class="step-content">
|
|
<h3>Access the application</h3>
|
|
<p>Navigate to <a href="https://localhost:9292" style="color: var(--primary-color);">https://localhost:9292</a> and login with your credentials.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="cta">
|
|
<div class="container">
|
|
<h2>Take Control of Your Productivity</h2>
|
|
<p>Join thousands of users who've chosen privacy and control over their task management. Start your self-hosted tududi instance today and experience distraction-free productivity.</p>
|
|
<div class="cta-buttons">
|
|
<a href="https://github.com/chrisvel/tududi" class="cta-white">View on GitHub</a>
|
|
<a href="https://github.com/chrisvel/tududi/issues" class="cta-outline">Report Issues</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="installation" style="padding: 50px 0; background-color: var(--bg-color);">
|
|
<div class="container">
|
|
<div class="installation-steps" style="text-align: center;">
|
|
<h3 style="color: var(--text-color); margin-bottom: 30px;">Check my other projects</h3>
|
|
<div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; max-width: 900px; margin: 0 auto;">
|
|
<a href="https://reconya-ai.com" style="display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-color); text-decoration: none; padding: 20px; border: 1px solid var(--border-color); border-radius: 12px; transition: all 0.3s ease; background-color: var(--card-bg); text-align: center; min-width: 200px;" onmouseover="this.style.borderColor='var(--primary-color)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(--border-color)'; this.style.transform='translateY(0)'">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
|
<i class="fas fa-network-wired" style="font-size: 1.2rem; color: var(--primary-color);"></i>
|
|
<span style="font-weight: 600; font-size: 1.1rem;">Reconya AI</span>
|
|
<i class="fas fa-external-link-alt" style="font-size: 0.8rem; opacity: 0.7;"></i>
|
|
</div>
|
|
<p style="font-size: 0.9rem; color: var(--secondary-color); margin: 0; line-height: 1.4;">Network reconnaissance and asset discovery tool</p>
|
|
</a>
|
|
<a href="https://breachharbor.com" style="display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-color); text-decoration: none; padding: 20px; border: 1px solid var(--border-color); border-radius: 12px; transition: all 0.3s ease; background-color: var(--card-bg); text-align: center; min-width: 200px;" onmouseover="this.style.borderColor='var(--primary-color)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(--border-color)'; this.style.transform='translateY(0)'">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
|
<i class="fas fa-shield-alt" style="font-size: 1.2rem; color: var(--primary-color);"></i>
|
|
<span style="font-weight: 600; font-size: 1.1rem;">BreachHarbor</span>
|
|
<i class="fas fa-external-link-alt" style="font-size: 0.8rem; opacity: 0.7;"></i>
|
|
</div>
|
|
<p style="font-size: 0.9rem; color: var(--secondary-color); margin: 0; line-height: 1.4;">Cybersecurity suite for digital asset protection</p>
|
|
</a>
|
|
<a href="https://hevetra.com" style="display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-color); text-decoration: none; padding: 20px; border: 1px solid var(--border-color); border-radius: 12px; transition: all 0.3s ease; background-color: var(--card-bg); text-align: center; min-width: 200px;" onmouseover="this.style.borderColor='var(--primary-color)'; this.style.transform='translateY(-2px)'" onmouseout="this.style.borderColor='var(--border-color)'; this.style.transform='translateY(0)'">
|
|
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
|
|
<i class="fas fa-baby" style="font-size: 1.2rem; color: var(--primary-color);"></i>
|
|
<span style="font-weight: 600; font-size: 1.1rem;">Hevetra</span>
|
|
<i class="fas fa-external-link-alt" style="font-size: 0.8rem; opacity: 0.7;"></i>
|
|
</div>
|
|
<p style="font-size: 0.9rem; color: var(--secondary-color); margin: 0; line-height: 1.4;">Digital tracking for child health milestones</p>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-content">
|
|
<div class="footer-column">
|
|
<h3>tududi</h3>
|
|
<p>Self-hosted task management with functional programming architecture, hierarchical organization, and multi-language support.</p>
|
|
<div class="social-icons">
|
|
<a href="https://github.com/chrisvel/tududi"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-column">
|
|
<h3>Links</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="#features">Features</a></li>
|
|
<li><a href="#screenshots">Screenshots</a></li>
|
|
<li><a href="#installation">Installation</a></li>
|
|
<li><a href="https://github.com/chrisvel/tududi">GitHub Repository</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-column">
|
|
<h3>Resources</h3>
|
|
<ul class="footer-links">
|
|
<li><a href="https://github.com/chrisvel/tududi#-getting-started">Documentation</a></li>
|
|
<li><a href="https://github.com/users/chrisvel/projects/2">Roadmap</a></li>
|
|
<li><a href="https://github.com/chrisvel/tududi/issues">Issues</a></li>
|
|
<li><a href="https://github.com/chrisvel/tududi#-contributing">Contributing</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>© 2025 tududi. All rights reserved.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// Dark mode toggle functionality
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
|
|
// Check for saved theme preference or use system preference
|
|
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');
|
|
const savedTheme = localStorage.getItem('theme');
|
|
|
|
// If saved theme is dark or system prefers dark and no saved preference
|
|
if (savedTheme === 'dark' || (!savedTheme && prefersDarkScheme.matches)) {
|
|
document.body.setAttribute('data-theme', 'dark');
|
|
themeToggle.checked = true;
|
|
document.querySelector('.theme-switch-label i').classList.remove('fa-moon');
|
|
document.querySelector('.theme-switch-label i').classList.add('fa-sun');
|
|
document.getElementById('hero-screenshot').src = "screenshots/all-dark.png";
|
|
}
|
|
|
|
// Theme toggle event listener
|
|
themeToggle.addEventListener('change', function() {
|
|
if (this.checked) {
|
|
document.body.setAttribute('data-theme', 'dark');
|
|
localStorage.setItem('theme', 'dark');
|
|
document.querySelector('.theme-switch-label i').classList.remove('fa-moon');
|
|
document.querySelector('.theme-switch-label i').classList.add('fa-sun');
|
|
document.getElementById('hero-screenshot').src = "screenshots/all-dark.png";
|
|
} else {
|
|
document.body.removeAttribute('data-theme');
|
|
localStorage.setItem('theme', 'light');
|
|
document.querySelector('.theme-switch-label i').classList.remove('fa-sun');
|
|
document.querySelector('.theme-switch-label i').classList.add('fa-moon');
|
|
document.getElementById('hero-screenshot').src = "screenshots/all-light.png";
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|