281 lines
17 KiB
XML
281 lines
17 KiB
XML
|
<svg width="1400" height="900" xmlns="http://www.w3.org/2000/svg">
|
||
|
|
<style>
|
||
|
|
/* Light theme defaults */
|
||
|
|
.neon-blue { stroke: #4A90E2; stroke-width: 2.6; }
|
||
|
|
.neon-orange { stroke: #F5A623; stroke-width: 2.6; }
|
||
|
|
.neon-purple { stroke: #BD10E0; stroke-width: 2.6; }
|
||
|
|
.neon-green { stroke: #7ED321; stroke-width: 2.6; }
|
||
|
|
.neon-cyan { stroke: #50E3C2; stroke-width: 2.6; }
|
||
|
|
.neon-red { stroke: #E74C3C; stroke-width: 2.6; }
|
||
|
|
.main-text { fill: #1a1a1a; }
|
||
|
|
.secondary-text { fill: #666; }
|
||
|
|
.arrow-color { stroke: #666; fill: #666; }
|
||
|
|
|
||
|
|
@media (prefers-color-scheme: dark) {
|
||
|
|
.neon-blue {
|
||
|
|
stroke: #00D4FF;
|
||
|
|
stroke-width: 2.8;
|
||
|
|
filter: drop-shadow(0 0 4px #00D4FF) drop-shadow(0 0 8px #00A0FF);
|
||
|
|
}
|
||
|
|
.neon-orange {
|
||
|
|
stroke: #FF9500;
|
||
|
|
stroke-width: 2.8;
|
||
|
|
filter: drop-shadow(0 0 4px #FF9500) drop-shadow(0 0 8px #FF7700);
|
||
|
|
}
|
||
|
|
.neon-purple {
|
||
|
|
stroke: #E040FB;
|
||
|
|
stroke-width: 2.8;
|
||
|
|
filter: drop-shadow(0 0 4px #E040FB) drop-shadow(0 0 8px #D500F9);
|
||
|
|
}
|
||
|
|
.neon-green {
|
||
|
|
stroke: #00FF88;
|
||
|
|
stroke-width: 2.8;
|
||
|
|
filter: drop-shadow(0 0 4px #00FF88) drop-shadow(0 0 8px #00E676);
|
||
|
|
}
|
||
|
|
.neon-cyan {
|
||
|
|
stroke: #00E5EA;
|
||
|
|
stroke-width: 2.8;
|
||
|
|
filter: drop-shadow(0 0 4px #00E5EA) drop-shadow(0 0 8px #00BCD4);
|
||
|
|
}
|
||
|
|
.neon-red {
|
||
|
|
stroke: #FF6B6B;
|
||
|
|
stroke-width: 2.8;
|
||
|
|
filter: drop-shadow(0 0 4px #FF6B6B) drop-shadow(0 0 8px #FF5252);
|
||
|
|
}
|
||
|
|
.main-text { fill: #FFFFFF; }
|
||
|
|
.secondary-text { fill: #B0B0B0; }
|
||
|
|
.arrow-color { stroke: #B0B0B0; fill: #B0B0B0; }
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<defs>
|
||
|
|
<marker id="arrow" markerWidth="13" markerHeight="13" refX="11.7" refY="3.9" orient="auto" markerUnits="strokeWidth">
|
||
|
|
<path d="M0,0 L0,7.8 L11.7,3.9 z" class="arrow-color"/>
|
||
|
|
</marker>
|
||
|
|
<linearGradient id="flowGradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||
|
|
<stop offset="0%" style="stop-color:#7ED321;stop-opacity:0.3" />
|
||
|
|
<stop offset="50%" style="stop-color:#F5A623;stop-opacity:0.3" />
|
||
|
|
<stop offset="100%" style="stop-color:#4A90E2;stop-opacity:0.3" />
|
||
|
|
</linearGradient>
|
||
|
|
</defs>
|
||
|
|
|
||
|
|
<!-- Title -->
|
||
|
|
<text x="700" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="600" class="main-text">Tasks - To-Do Management Flow</text>
|
||
|
|
<text x="700" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Create, organize, and track your tasks with categories and priorities</text>
|
||
|
|
|
||
|
|
<!-- Phase Labels -->
|
||
|
|
<text x="200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Create</text>
|
||
|
|
<text x="550" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Organize</text>
|
||
|
|
<text x="900" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Track</text>
|
||
|
|
<text x="1200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Complete</text>
|
||
|
|
|
||
|
|
<!-- MAIN FLOW DIAGRAM -->
|
||
|
|
<g id="main-flow">
|
||
|
|
|
||
|
|
<!-- Add Task Form -->
|
||
|
|
<g transform="translate(80, 160)">
|
||
|
|
<rect x="0" y="0" width="240" height="150" rx="6.5" fill="none" class="neon-green"/>
|
||
|
|
<text x="120" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="600" class="main-text">Add Task</text>
|
||
|
|
<line x1="20" y1="45" x2="220" y2="45" class="neon-green" stroke-width="1" opacity="0.5"/>
|
||
|
|
|
||
|
|
<!-- Input field -->
|
||
|
|
<rect x="20" y="60" width="200" height="35" rx="4" fill="none" class="neon-cyan" stroke-width="1.5"/>
|
||
|
|
<text x="30" y="83" font-family="Arial, sans-serif" font-size="13" class="secondary-text">What needs to be done?</text>
|
||
|
|
|
||
|
|
<!-- Category & Date -->
|
||
|
|
<rect x="20" y="105" width="90" height="30" rx="4" fill="none" class="neon-orange" stroke-width="1.5"/>
|
||
|
|
<text x="65" y="125" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Category</text>
|
||
|
|
|
||
|
|
<rect x="120" y="105" width="100" height="30" rx="4" fill="none" class="neon-purple" stroke-width="1.5"/>
|
||
|
|
<text x="170" y="125" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Due Date</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Filter Tabs -->
|
||
|
|
<g transform="translate(400, 160)">
|
||
|
|
<rect x="0" y="0" width="300" height="70" rx="6.5" fill="none" class="neon-orange"/>
|
||
|
|
<text x="150" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Filter Tabs</text>
|
||
|
|
|
||
|
|
<!-- Tab buttons -->
|
||
|
|
<rect x="15" y="38" width="55" height="24" rx="4" fill="none" class="neon-blue" stroke-width="2"/>
|
||
|
|
<text x="42" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" class="main-text">All</text>
|
||
|
|
|
||
|
|
<rect x="80" y="38" width="55" height="24" rx="4" fill="none" class="neon-orange" stroke-width="1.5" opacity="0.7"/>
|
||
|
|
<text x="107" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" class="secondary-text">Active</text>
|
||
|
|
|
||
|
|
<rect x="145" y="38" width="55" height="24" rx="4" fill="none" class="neon-green" stroke-width="1.5" opacity="0.7"/>
|
||
|
|
<text x="172" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" class="secondary-text">Done</text>
|
||
|
|
|
||
|
|
<rect x="210" y="38" width="75" height="24" rx="4" fill="none" class="neon-red" stroke-width="1.5" opacity="0.7"/>
|
||
|
|
<text x="247" y="55" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" class="secondary-text">Priority</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Categories -->
|
||
|
|
<g transform="translate(400, 260)">
|
||
|
|
<rect x="0" y="0" width="300" height="100" rx="6.5" fill="none" class="neon-purple"/>
|
||
|
|
<text x="150" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Categories</text>
|
||
|
|
|
||
|
|
<circle cx="40" cy="55" r="10" fill="none" class="neon-blue" stroke-width="2"/>
|
||
|
|
<text x="60" y="60" font-family="Arial, sans-serif" font-size="12" class="main-text">Work</text>
|
||
|
|
|
||
|
|
<circle cx="120" cy="55" r="10" fill="none" class="neon-green" stroke-width="2"/>
|
||
|
|
<text x="140" y="60" font-family="Arial, sans-serif" font-size="12" class="main-text">Personal</text>
|
||
|
|
|
||
|
|
<circle cx="220" cy="55" r="10" fill="none" class="neon-orange" stroke-width="2"/>
|
||
|
|
<text x="240" y="60" font-family="Arial, sans-serif" font-size="12" class="main-text">Shopping</text>
|
||
|
|
|
||
|
|
<circle cx="80" cy="85" r="10" fill="none" class="neon-red" stroke-width="2"/>
|
||
|
|
<text x="100" y="90" font-family="Arial, sans-serif" font-size="12" class="main-text">Health</text>
|
||
|
|
|
||
|
|
<circle cx="180" cy="85" r="10" fill="none" class="neon-cyan" stroke-width="2"/>
|
||
|
|
<text x="200" y="90" font-family="Arial, sans-serif" font-size="12" class="main-text">Custom</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Task List -->
|
||
|
|
<g transform="translate(780, 160)">
|
||
|
|
<rect x="0" y="0" width="240" height="200" rx="6.5" fill="none" class="neon-cyan"/>
|
||
|
|
<text x="120" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Task List</text>
|
||
|
|
<line x1="20" y1="40" x2="220" y2="40" class="neon-cyan" stroke-width="1" opacity="0.5"/>
|
||
|
|
|
||
|
|
<!-- Task items -->
|
||
|
|
<rect x="15" y="50" width="20" height="20" rx="4" fill="none" class="neon-green" stroke-width="2"/>
|
||
|
|
<text x="45" y="65" font-family="Arial, sans-serif" font-size="13" class="main-text">Review report</text>
|
||
|
|
<circle cx="210" cy="60" r="6" fill="none" class="neon-red" stroke-width="2"/>
|
||
|
|
|
||
|
|
<rect x="15" y="85" width="20" height="20" rx="4" fill="none" class="neon-orange" stroke-width="2"/>
|
||
|
|
<text x="45" y="100" font-family="Arial, sans-serif" font-size="13" class="main-text">Call client</text>
|
||
|
|
<circle cx="210" cy="95" r="6" fill="none" class="neon-orange" stroke-width="2"/>
|
||
|
|
|
||
|
|
<rect x="15" y="120" width="20" height="20" rx="4" fill="none" class="neon-blue" stroke-width="2"/>
|
||
|
|
<text x="45" y="135" font-family="Arial, sans-serif" font-size="13" class="main-text">Update docs</text>
|
||
|
|
<circle cx="210" cy="130" r="6" fill="none" class="neon-green" stroke-width="2"/>
|
||
|
|
|
||
|
|
<rect x="15" y="155" width="20" height="20" rx="4" fill="none" class="neon-green" stroke-width="2"/>
|
||
|
|
<path d="M20 165 L25 170 L32 160" fill="none" class="neon-green" stroke-width="2" stroke-linecap="round"/>
|
||
|
|
<text x="45" y="170" font-family="Arial, sans-serif" font-size="13" class="secondary-text" text-decoration="line-through">Send email</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Stats / Completion -->
|
||
|
|
<g transform="translate(1080, 160)">
|
||
|
|
<rect x="0" y="0" width="220" height="200" rx="6.5" fill="none" class="neon-blue"/>
|
||
|
|
<text x="110" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Stats</text>
|
||
|
|
<line x1="20" y1="40" x2="200" y2="40" class="neon-blue" stroke-width="1" opacity="0.5"/>
|
||
|
|
|
||
|
|
<!-- Stats boxes -->
|
||
|
|
<rect x="20" y="55" width="80" height="55" rx="6" fill="none" class="neon-cyan" stroke-width="1.5"/>
|
||
|
|
<text x="60" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="600" class="main-text">12</text>
|
||
|
|
<text x="60" y="100" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Total</text>
|
||
|
|
|
||
|
|
<rect x="115" y="55" width="80" height="55" rx="6" fill="none" class="neon-orange" stroke-width="1.5"/>
|
||
|
|
<text x="155" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="600" class="main-text">5</text>
|
||
|
|
<text x="155" y="100" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Active</text>
|
||
|
|
|
||
|
|
<rect x="20" y="125" width="80" height="55" rx="6" fill="none" class="neon-green" stroke-width="1.5"/>
|
||
|
|
<text x="60" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="600" class="main-text">7</text>
|
||
|
|
<text x="60" y="170" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Completed</text>
|
||
|
|
|
||
|
|
<rect x="115" y="125" width="80" height="55" rx="6" fill="none" class="neon-red" stroke-width="1.5"/>
|
||
|
|
<text x="155" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="600" class="main-text">2</text>
|
||
|
|
<text x="155" y="170" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Overdue</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Arrows -->
|
||
|
|
<line x1="320" y1="235" x2="395" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
|
||
|
|
<line x1="700" y1="195" x2="775" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
|
||
|
|
<line x1="1020" y1="260" x2="1075" y2="260" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
|
||
|
|
|
||
|
|
<!-- Filter to List -->
|
||
|
|
<line x1="550" y1="230" x2="550" y2="255" class="arrow-color" stroke-width="1.5" opacity="0.5"/>
|
||
|
|
<line x1="700" y1="310" x2="775" y2="280" class="arrow-color" stroke-width="2" stroke-dasharray="3.9,3.9" marker-end="url(#arrow)" opacity="0.5"/>
|
||
|
|
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- PROGRESS INDICATOR -->
|
||
|
|
<g id="progress-legend" transform="translate(0, 420)">
|
||
|
|
<rect x="100" y="30" width="1200" height="80" fill="url(#flowGradient)" rx="10" opacity="0.2"/>
|
||
|
|
|
||
|
|
<!-- Stage markers -->
|
||
|
|
<circle cx="200" cy="70" r="12" class="neon-green" fill="none" stroke-width="3"/>
|
||
|
|
<text x="200" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">1</text>
|
||
|
|
|
||
|
|
<circle cx="530" cy="70" r="12" class="neon-orange" fill="none" stroke-width="3"/>
|
||
|
|
<text x="530" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">2</text>
|
||
|
|
|
||
|
|
<circle cx="870" cy="70" r="12" class="neon-cyan" fill="none" stroke-width="3"/>
|
||
|
|
<text x="870" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">3</text>
|
||
|
|
|
||
|
|
<circle cx="1200" cy="70" r="12" class="neon-blue" fill="none" stroke-width="3"/>
|
||
|
|
<text x="1200" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">4</text>
|
||
|
|
|
||
|
|
<!-- Connecting lines -->
|
||
|
|
<line x1="212" y1="70" x2="518" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
|
||
|
|
<line x1="542" y1="70" x2="858" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
|
||
|
|
<line x1="882" y1="70" x2="1188" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
|
||
|
|
|
||
|
|
<!-- Stage labels -->
|
||
|
|
<text x="200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Add Task</text>
|
||
|
|
<text x="200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Enter description</text>
|
||
|
|
|
||
|
|
<text x="530" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Categorize</text>
|
||
|
|
<text x="530" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Set priority & date</text>
|
||
|
|
|
||
|
|
<text x="870" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Track</text>
|
||
|
|
<text x="870" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">View & filter tasks</text>
|
||
|
|
|
||
|
|
<text x="1200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Complete</text>
|
||
|
|
<text x="1200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Check off done</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Priority Legend -->
|
||
|
|
<g transform="translate(100, 600)">
|
||
|
|
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Priority Levels:</text>
|
||
|
|
|
||
|
|
<circle cx="20" cy="30" r="8" fill="none" class="neon-red" stroke-width="2.5"/>
|
||
|
|
<text x="35" y="35" font-family="Arial, sans-serif" font-size="14" class="secondary-text">High - Must do today</text>
|
||
|
|
|
||
|
|
<circle cx="220" cy="30" r="8" fill="none" class="neon-orange" stroke-width="2.5"/>
|
||
|
|
<text x="235" y="35" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Medium - Important</text>
|
||
|
|
|
||
|
|
<circle cx="440" cy="30" r="8" fill="none" class="neon-green" stroke-width="2.5"/>
|
||
|
|
<text x="455" y="35" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Low - Can wait</text>
|
||
|
|
|
||
|
|
<circle cx="640" cy="30" r="8" fill="none" class="neon-blue" stroke-width="2.5"/>
|
||
|
|
<text x="655" y="35" font-family="Arial, sans-serif" font-size="14" class="secondary-text">None - No deadline</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Features -->
|
||
|
|
<g transform="translate(100, 670)">
|
||
|
|
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Key Features:</text>
|
||
|
|
|
||
|
|
<rect x="0" y="20" width="16" height="16" rx="3" fill="none" class="neon-green" stroke-width="2"/>
|
||
|
|
<text x="25" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Click checkbox to complete</text>
|
||
|
|
|
||
|
|
<rect x="280" y="20" width="16" height="16" rx="3" fill="none" class="neon-orange" stroke-width="2"/>
|
||
|
|
<text x="305" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Filter by status or category</text>
|
||
|
|
|
||
|
|
<rect x="560" y="20" width="16" height="16" rx="3" fill="none" class="neon-purple" stroke-width="2"/>
|
||
|
|
<text x="585" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Set due dates with calendar</text>
|
||
|
|
|
||
|
|
<rect x="840" y="20" width="16" height="16" rx="3" fill="none" class="neon-cyan" stroke-width="2"/>
|
||
|
|
<text x="865" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Real-time stats dashboard</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Keyboard shortcuts -->
|
||
|
|
<g transform="translate(100, 730)">
|
||
|
|
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Shortcuts:</text>
|
||
|
|
<text x="100" y="0" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Enter = Add task | Space = Toggle complete | Delete = Remove task | Tab = Next field</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- API Endpoints -->
|
||
|
|
<g transform="translate(100, 770)">
|
||
|
|
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">Endpoints:</text>
|
||
|
|
<text x="100" y="0" font-family="monospace, sans-serif" font-size="13" class="secondary-text">GET /api/tasks | POST /api/tasks | PATCH /api/tasks/:id | DELETE /api/tasks/:id</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- HTMX Attributes -->
|
||
|
|
<g transform="translate(100, 810)">
|
||
|
|
<text x="0" y="0" font-family="Arial, sans-serif" font-size="16" font-weight="600" class="main-text">HTMX:</text>
|
||
|
|
<text x="100" y="0" font-family="monospace, sans-serif" font-size="13" class="secondary-text">hx-post="/api/tasks" hx-target="#task-list" hx-swap="afterbegin" hx-on::after-request="this.reset()"</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
</svg>
|