270 lines
17 KiB
XML
270 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; }
|
||
|
|
.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);
|
||
|
|
}
|
||
|
|
.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:#F5A623;stop-opacity:0.3" />
|
||
|
|
<stop offset="50%" style="stop-color:#BD10E0;stop-opacity:0.3" />
|
||
|
|
<stop offset="100%" style="stop-color:#7ED321;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">Drive - File Management Flow</text>
|
||
|
|
<text x="700" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" class="secondary-text">Cloud storage with drag-and-drop, sharing, and organization</text>
|
||
|
|
|
||
|
|
<!-- Phase Labels -->
|
||
|
|
<text x="180" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Navigation</text>
|
||
|
|
<text x="500" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Actions</text>
|
||
|
|
<text x="900" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Storage</text>
|
||
|
|
<text x="1200" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="secondary-text">Display</text>
|
||
|
|
|
||
|
|
<!-- MAIN FLOW DIAGRAM -->
|
||
|
|
<g id="main-flow">
|
||
|
|
|
||
|
|
<!-- Sidebar Navigation -->
|
||
|
|
<g transform="translate(80, 160)">
|
||
|
|
<rect x="0" y="0" width="200" height="200" rx="6.5" fill="none" class="neon-orange"/>
|
||
|
|
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="600" class="main-text">Sidebar</text>
|
||
|
|
<line x1="20" y1="45" x2="180" y2="45" class="neon-orange" stroke-width="1" opacity="0.5"/>
|
||
|
|
|
||
|
|
<!-- Nav items -->
|
||
|
|
<rect x="20" y="60" width="160" height="28" rx="4" fill="none" class="neon-blue" stroke-width="1.5"/>
|
||
|
|
<text x="100" y="80" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="main-text">My Drive</text>
|
||
|
|
|
||
|
|
<rect x="20" y="95" width="160" height="28" rx="4" fill="none" class="neon-orange" stroke-width="1.5" opacity="0.6"/>
|
||
|
|
<text x="100" y="115" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Starred</text>
|
||
|
|
|
||
|
|
<rect x="20" y="130" width="160" height="28" rx="4" fill="none" class="neon-orange" stroke-width="1.5" opacity="0.6"/>
|
||
|
|
<text x="100" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Recent</text>
|
||
|
|
|
||
|
|
<rect x="20" y="165" width="160" height="28" rx="4" fill="none" class="neon-orange" stroke-width="1.5" opacity="0.6"/>
|
||
|
|
<text x="100" y="185" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Trash</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Action Buttons -->
|
||
|
|
<g transform="translate(350, 160)">
|
||
|
|
<rect x="0" y="0" width="300" height="70" rx="6.5" fill="none" class="neon-purple"/>
|
||
|
|
<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">+ New</text>
|
||
|
|
<text x="150" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Upload Files | New Folder</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- File Operations Grid -->
|
||
|
|
<g transform="translate(350, 260)">
|
||
|
|
<!-- Upload -->
|
||
|
|
<rect x="0" y="0" width="140" height="55" rx="6.5" fill="none" class="neon-blue"/>
|
||
|
|
<text x="70" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Upload</text>
|
||
|
|
<text x="70" y="43" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Drag & Drop</text>
|
||
|
|
|
||
|
|
<!-- Download -->
|
||
|
|
<rect x="155" y="0" width="140" height="55" rx="6.5" fill="none" class="neon-green"/>
|
||
|
|
<text x="225" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Download</text>
|
||
|
|
<text x="225" y="43" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Single/Batch</text>
|
||
|
|
|
||
|
|
<!-- Rename -->
|
||
|
|
<rect x="0" y="70" width="140" height="55" rx="6.5" fill="none" class="neon-cyan"/>
|
||
|
|
<text x="70" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Rename</text>
|
||
|
|
<text x="70" y="113" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Edit name</text>
|
||
|
|
|
||
|
|
<!-- Move/Copy -->
|
||
|
|
<rect x="155" y="70" width="140" height="55" rx="6.5" fill="none" class="neon-orange"/>
|
||
|
|
<text x="225" y="95" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Move / Copy</text>
|
||
|
|
<text x="225" y="113" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Organize</text>
|
||
|
|
|
||
|
|
<!-- Share -->
|
||
|
|
<rect x="0" y="140" width="140" height="55" rx="6.5" fill="none" class="neon-purple"/>
|
||
|
|
<text x="70" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Share</text>
|
||
|
|
<text x="70" y="183" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Get link</text>
|
||
|
|
|
||
|
|
<!-- Delete -->
|
||
|
|
<rect x="155" y="140" width="140" height="55" rx="6.5" fill="none" class="neon-blue" stroke-dasharray="3.9,3.9"/>
|
||
|
|
<text x="225" y="165" text-anchor="middle" font-family="Arial, sans-serif" font-size="15" font-weight="500" class="main-text">Delete</text>
|
||
|
|
<text x="225" y="183" text-anchor="middle" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Move to Trash</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Storage Backend -->
|
||
|
|
<g transform="translate(750, 160)">
|
||
|
|
<rect x="0" y="0" width="200" height="70" rx="6.5" fill="none" class="neon-green"/>
|
||
|
|
<text x="100" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="500" class="main-text">SeaweedFS</text>
|
||
|
|
<text x="100" y="52" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Object Storage</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- API Layer -->
|
||
|
|
<g transform="translate(750, 260)">
|
||
|
|
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-cyan"/>
|
||
|
|
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">REST API</text>
|
||
|
|
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">/api/v1/drive/*</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Metadata -->
|
||
|
|
<g transform="translate(750, 345)">
|
||
|
|
<rect x="0" y="0" width="200" height="60" rx="6.5" fill="none" class="neon-purple"/>
|
||
|
|
<text x="100" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">PostgreSQL</text>
|
||
|
|
<text x="100" y="45" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">File Metadata</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- File Display -->
|
||
|
|
<g transform="translate(1050, 160)">
|
||
|
|
<rect x="0" y="0" width="250" height="250" rx="6.5" fill="none" class="neon-cyan"/>
|
||
|
|
<text x="125" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" font-weight="600" class="main-text">File View</text>
|
||
|
|
<line x1="20" y1="45" x2="230" y2="45" class="neon-cyan" stroke-width="1" opacity="0.5"/>
|
||
|
|
|
||
|
|
<!-- View toggle -->
|
||
|
|
<rect x="20" y="55" width="60" height="30" rx="4" fill="none" class="neon-blue" stroke-width="1.5"/>
|
||
|
|
<text x="50" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="main-text">Grid</text>
|
||
|
|
|
||
|
|
<rect x="90" y="55" width="60" height="30" rx="4" fill="none" class="neon-cyan" stroke-width="1.5" opacity="0.6"/>
|
||
|
|
<text x="120" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">List</text>
|
||
|
|
|
||
|
|
<!-- Breadcrumb -->
|
||
|
|
<text x="20" y="110" font-family="Arial, sans-serif" font-size="12" class="secondary-text">My Drive / Projects / 2024</text>
|
||
|
|
|
||
|
|
<!-- File grid preview -->
|
||
|
|
<rect x="20" y="125" width="65" height="55" rx="4" fill="none" class="neon-orange" stroke-width="1.5"/>
|
||
|
|
<text x="52" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" class="secondary-text">📁 Docs</text>
|
||
|
|
|
||
|
|
<rect x="95" y="125" width="65" height="55" rx="4" fill="none" class="neon-blue" stroke-width="1.5"/>
|
||
|
|
<text x="127" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" class="secondary-text">📄 Report</text>
|
||
|
|
|
||
|
|
<rect x="170" y="125" width="65" height="55" rx="4" fill="none" class="neon-green" stroke-width="1.5"/>
|
||
|
|
<text x="202" y="160" text-anchor="middle" font-family="Arial, sans-serif" font-size="11" class="secondary-text">🖼 Image</text>
|
||
|
|
|
||
|
|
<!-- Storage bar -->
|
||
|
|
<text x="20" y="210" font-family="Arial, sans-serif" font-size="12" class="secondary-text">Storage Used</text>
|
||
|
|
<rect x="20" y="220" width="210" height="10" rx="5" fill="none" class="neon-cyan" stroke-width="1"/>
|
||
|
|
<rect x="22" y="222" width="84" height="6" rx="3" fill="#7ED321" opacity="0.7"/>
|
||
|
|
<text x="130" y="235" font-family="Arial, sans-serif" font-size="11" class="secondary-text">4.2 GB of 10 GB</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Arrows -->
|
||
|
|
<line x1="280" y1="260" x2="345" y2="260" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
|
||
|
|
<line x1="650" y1="290" x2="745" y2="250" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
|
||
|
|
<line x1="950" y1="195" x2="1045" y2="195" class="arrow-color" stroke-width="2.6" marker-end="url(#arrow)" opacity="0.7"/>
|
||
|
|
|
||
|
|
<!-- API to Storage -->
|
||
|
|
<line x1="850" y1="260" x2="850" y2="235" class="arrow-color" stroke-width="1.5" opacity="0.5"/>
|
||
|
|
<!-- API to Metadata -->
|
||
|
|
<line x1="850" y1="320" x2="850" y2="340" class="arrow-color" stroke-width="1.5" opacity="0.5"/>
|
||
|
|
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- PROGRESS INDICATOR -->
|
||
|
|
<g id="progress-legend" transform="translate(0, 470)">
|
||
|
|
<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-orange" 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="500" cy="70" r="12" class="neon-purple" fill="none" stroke-width="3"/>
|
||
|
|
<text x="500" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">2</text>
|
||
|
|
|
||
|
|
<circle cx="850" cy="70" r="12" class="neon-green" fill="none" stroke-width="3"/>
|
||
|
|
<text x="850" y="75" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" class="main-text">3</text>
|
||
|
|
|
||
|
|
<circle cx="1150" cy="70" r="12" class="neon-cyan" fill="none" stroke-width="3"/>
|
||
|
|
<text x="1150" 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="488" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
|
||
|
|
<line x1="512" y1="70" x2="838" y2="70" class="arrow-color" stroke-width="2" opacity="0.3"/>
|
||
|
|
<line x1="862" y1="70" x2="1138" 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">Navigate</text>
|
||
|
|
<text x="200" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Browse folders</text>
|
||
|
|
|
||
|
|
<text x="500" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Action</text>
|
||
|
|
<text x="500" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Upload, move, share</text>
|
||
|
|
|
||
|
|
<text x="850" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">Store</text>
|
||
|
|
<text x="850" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Save to cloud</text>
|
||
|
|
|
||
|
|
<text x="1150" y="130" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="500" class="main-text">View</text>
|
||
|
|
<text x="1150" y="150" text-anchor="middle" font-family="Arial, sans-serif" font-size="13" class="secondary-text">Grid or list display</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
<!-- Features Legend -->
|
||
|
|
<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-orange" stroke-width="2"/>
|
||
|
|
<text x="25" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Drag-and-drop upload</text>
|
||
|
|
|
||
|
|
<rect x="250" y="20" width="16" height="16" rx="3" fill="none" class="neon-purple" stroke-width="2"/>
|
||
|
|
<text x="275" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Context menu actions</text>
|
||
|
|
|
||
|
|
<rect x="500" y="20" width="16" height="16" rx="3" fill="none" class="neon-green" stroke-width="2"/>
|
||
|
|
<text x="525" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">SeaweedFS object storage</text>
|
||
|
|
|
||
|
|
<rect x="780" y="20" width="16" height="16" rx="3" fill="none" class="neon-cyan" stroke-width="2"/>
|
||
|
|
<text x="805" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Grid/List view toggle</text>
|
||
|
|
|
||
|
|
<rect x="1020" y="20" width="16" height="16" rx="3" fill="none" class="neon-blue" stroke-width="2"/>
|
||
|
|
<text x="1045" y="33" font-family="Arial, sans-serif" font-size="14" class="secondary-text">Star & label files</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">Ctrl+U = Upload | Ctrl+N = New Folder | Delete = Trash | Ctrl+C/V = Copy/Paste | Enter = Open</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/v1/drive/list | POST /api/v1/drive/upload | DELETE /api/v1/drive/file | PUT /api/v1/drive/move</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-get="/api/v1/drive/list" hx-target="#file-list" hx-trigger="load, click" hx-swap="innerHTML"</text>
|
||
|
|
</g>
|
||
|
|
|
||
|
|
</svg>
|