yoinkkk/ExcaliDash
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

New Icon/Logo

Browse Source
This commit is contained in:
Zimeng Xiong
2025-11-22 09:45:20 -08:00
parent 0c843eb37d
commit 05d472189c
11 changed files with 806 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/favicon-dark.svg
+66
View File
@@ -0,0 +1,66 @@
<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.stroke-main { stroke: #E2E8F0; }
.fill-teal { fill: #134E4A; } /* teal-900 */
.stroke-teal { stroke: #2DD4BF; } /* teal-400 */
.fill-orange { fill: #7C2D12; } /* orange-900 */
.stroke-orange { stroke: #FB923C; } /* orange-400 */
.fill-purple { fill: #581C87; } /* purple-900 */
.stroke-purple { stroke: #A78BFA; } /* purple-400 */
.stroke-red { stroke: #F87171; } /* red-400 */
.fill-pencil-body { fill: #FACC15; } /* yellow-400 */
.fill-pencil-eraser { fill: #F472B6; } /* pink-400 */
.fill-pencil-collar { fill: #475569; } /* slate-600 */
.fill-pencil-tip { fill: #E2E8F0; }
</style>
<defs>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- Group: The Dashboard Grid (2x2) -->
<g class="stroke-main" stroke-width="32" stroke-linecap="round" stroke-linejoin="round">
<!-- Top Left: Bar Chart -->
<rect class="fill-teal" x="40" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<path class="stroke-teal" d="M100 180 V 140"></path>
<path class="stroke-teal" d="M140 180 V 100"></path>
<path class="stroke-teal" d="M180 180 V 160"></path>
<!-- Top Right: Pie Chart -->
<rect class="fill-orange" x="272" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<circle class="stroke-orange" cx="372" cy="140" r="50" stroke-width="24"></circle>
<!-- Slice -->
<path class="stroke-orange" d="M372 140 L 405 105" stroke-width="12"></path>
<!-- Bottom Left: List/Text -->
<rect class="fill-purple" x="40" y="272" width="200" height="200" rx="32" stroke-width="24"></rect>
<line class="stroke-purple" x1="80" y1="332" x2="200" y2="332"></line>
<line class="stroke-purple" x1="80" y1="372" x2="160" y2="372"></line>
<line class="stroke-purple" x1="80" y1="412" x2="180" y2="412"></line>
<!-- Bottom Right: The "Creation" Zone -->
<!-- Dashed placeholder for the item being created -->
<rect class="stroke-red" x="272" y="272" width="200" height="200" rx="32" fill="none"
stroke-width="24" stroke-dasharray="30 30"></rect>
</g>
<!-- The Pencil (Floating over the bottom right) -->
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
<!-- Body -->
<path class="fill-pencil-body stroke-main" d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
stroke-width="24" stroke-linejoin="round"></path>
<!-- Eraser -->
<path class="fill-pencil-eraser stroke-main"
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z" stroke-width="24"
stroke-linejoin="round"></path>
<!-- Collar -->
<rect class="fill-pencil-collar stroke-main" x="-25" y="-100" width="50" height="30"
stroke-width="24" stroke-linejoin="round"></rect>
<!-- Tip Lead -->
<path class="fill-pencil-tip" d="M-8 108 L0 120 L8 108 Z"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

frontend/public/favicon-light.svg
+66
View File
@@ -0,0 +1,66 @@
<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.stroke-main { stroke: #2D3748; }
.fill-teal { fill: #E6FFFA; }
.stroke-teal { stroke: #38B2AC; }
.fill-orange { fill: #FFFAF0; }
.stroke-orange { stroke: #DD6B20; }
.fill-purple { fill: #FAF5FF; }
.stroke-purple { stroke: #805AD5; }
.stroke-red { stroke: #E53E3E; }
.fill-pencil-body { fill: #F6E05E; }
.fill-pencil-eraser { fill: #F687B3; }
.fill-pencil-collar { fill: #CBD5E0; }
.fill-pencil-tip { fill: #2D3748; }
</style>
<defs>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- Group: The Dashboard Grid (2x2) -->
<g class="stroke-main" stroke-width="32" stroke-linecap="round" stroke-linejoin="round">
<!-- Top Left: Bar Chart -->
<rect class="fill-teal" x="40" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<path class="stroke-teal" d="M100 180 V 140"></path>
<path class="stroke-teal" d="M140 180 V 100"></path>
<path class="stroke-teal" d="M180 180 V 160"></path>
<!-- Top Right: Pie Chart -->
<rect class="fill-orange" x="272" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<circle class="stroke-orange" cx="372" cy="140" r="50" stroke-width="24"></circle>
<!-- Slice -->
<path class="stroke-orange" d="M372 140 L 405 105" stroke-width="12"></path>
<!-- Bottom Left: List/Text -->
<rect class="fill-purple" x="40" y="272" width="200" height="200" rx="32" stroke-width="24"></rect>
<line class="stroke-purple" x1="80" y1="332" x2="200" y2="332"></line>
<line class="stroke-purple" x1="80" y1="372" x2="160" y2="372"></line>
<line class="stroke-purple" x1="80" y1="412" x2="180" y2="412"></line>
<!-- Bottom Right: The "Creation" Zone -->
<!-- Dashed placeholder for the item being created -->
<rect class="stroke-red" x="272" y="272" width="200" height="200" rx="32" fill="none"
stroke-width="24" stroke-dasharray="30 30"></rect>
</g>
<!-- The Pencil (Floating over the bottom right) -->
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
<!-- Body -->
<path class="fill-pencil-body stroke-main" d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
stroke-width="24" stroke-linejoin="round"></path>
<!-- Eraser -->
<path class="fill-pencil-eraser stroke-main"
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z" stroke-width="24"
stroke-linejoin="round"></path>
<!-- Collar -->
<rect class="fill-pencil-collar stroke-main" x="-25" y="-100" width="50" height="30"
stroke-width="24" stroke-linejoin="round"></rect>
<!-- Tip Lead -->
<path class="fill-pencil-tip" d="M-8 108 L0 120 L8 108 Z"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.4 KiB

frontend/public/favicon.svg
+80 -19
View File
@@ -1,20 +1,81 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.shadow { fill: black; }
.box { fill: #4f46e5; stroke: black; }
@media (prefers-color-scheme: dark) {
.shadow { fill: rgba(255, 255, 255, 0.2); }
.box { fill: #262626; stroke: #404040; }
}
</style>
<rect class="shadow" x="4" y="4" width="26" height="26" rx="6"/>
<rect class="box" x="2" y="2" width="26" height="26" rx="6" stroke-width="2"/>
<g transform="translate(7, 7)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<rect width="7" height="7" x="3" y="3" rx="1" />
<rect width="7" height="7" x="14" y="3" rx="1" />
<rect width="7" height="7" x="14" y="14" rx="1" />
<rect width="7" height="7" x="3" y="14" rx="1" />
</svg>
</g>
<svg width="100%" height="100%" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<style>
.stroke-main { stroke: #2D3748; }
.fill-teal { fill: #E6FFFA; }
.stroke-teal { stroke: #38B2AC; }
.fill-orange { fill: #FFFAF0; }
.stroke-orange { stroke: #DD6B20; }
.fill-purple { fill: #FAF5FF; }
.stroke-purple { stroke: #805AD5; }
.stroke-red { stroke: #E53E3E; }
.fill-pencil-body { fill: #F6E05E; }
.fill-pencil-eraser { fill: #F687B3; }
.fill-pencil-collar { fill: #CBD5E0; }
.fill-pencil-tip { fill: #2D3748; }
@media (prefers-color-scheme: dark) {
.stroke-main { stroke: #E2E8F0; }
.fill-teal { fill: #134E4A; } /* teal-900 */
.stroke-teal { stroke: #2DD4BF; } /* teal-400 */
.fill-orange { fill: #7C2D12; } /* orange-900 */
.stroke-orange { stroke: #FB923C; } /* orange-400 */
.fill-purple { fill: #581C87; } /* purple-900 */
.stroke-purple { stroke: #A78BFA; } /* purple-400 */
.stroke-red { stroke: #F87171; } /* red-400 */
.fill-pencil-body { fill: #FACC15; } /* yellow-400 */
.fill-pencil-eraser { fill: #F472B6; } /* pink-400 */
.fill-pencil-collar { fill: #475569; } /* slate-600 */
.fill-pencil-tip { fill: #E2E8F0; }
}
</style>
<defs>
<filter id="softShadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur in="SourceAlpha" stdDeviation="8"></feGaussianBlur>
<feOffset dx="4" dy="8" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<!-- Group: The Dashboard Grid (2x2) -->
<g class="stroke-main" stroke-width="32" stroke-linecap="round" stroke-linejoin="round">
<!-- Top Left: Bar Chart -->
<rect class="fill-teal" x="40" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<path class="stroke-teal" d="M100 180 V 140"></path>
<path class="stroke-teal" d="M140 180 V 100"></path>
<path class="stroke-teal" d="M180 180 V 160"></path>
<!-- Top Right: Pie Chart -->
<rect class="fill-orange" x="272" y="40" width="200" height="200" rx="32" stroke-width="24"></rect>
<circle class="stroke-orange" cx="372" cy="140" r="50" stroke-width="24"></circle>
<!-- Slice -->
<path class="stroke-orange" d="M372 140 L 405 105" stroke-width="12"></path>
<!-- Bottom Left: List/Text -->
<rect class="fill-purple" x="40" y="272" width="200" height="200" rx="32" stroke-width="24"></rect>
<line class="stroke-purple" x1="80" y1="332" x2="200" y2="332"></line>
<line class="stroke-purple" x1="80" y1="372" x2="160" y2="372"></line>
<line class="stroke-purple" x1="80" y1="412" x2="180" y2="412"></line>
<!-- Bottom Right: The "Creation" Zone -->
<!-- Dashed placeholder for the item being created -->
<rect class="stroke-red" x="272" y="272" width="200" height="200" rx="32" fill="none"
stroke-width="24" stroke-dasharray="30 30"></rect>
</g>
<!-- The Pencil (Floating over the bottom right) -->
<g transform="translate(380, 380) rotate(-45)" filter="url(#softShadow)">
<!-- Body -->
<path class="fill-pencil-body stroke-main" d="M-25 -100 L-25 80 L0 120 L25 80 L25 -100 Z"
stroke-width="24" stroke-linejoin="round"></path>
<!-- Eraser -->
<path class="fill-pencil-eraser stroke-main"
d="M-25 -100 L-25 -130 C-25 -150, 25 -150, 25 -130 L25 -100 Z" stroke-width="24"
stroke-linejoin="round"></path>
<!-- Collar -->
<rect class="fill-pencil-collar stroke-main" x="-25" y="-100" width="50" height="30"
stroke-width="24" stroke-linejoin="round"></rect>
<!-- Tip Lead -->
<path class="fill-pencil-tip" d="M-8 108 L0 120 L8 108 Z"></path>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 910 B

After

Width:  |  Height:  |  Size: 4.1 KiB