mirror of
https://github.com/MinaSaad1/pbi-cli
synced 2026-04-21 13:37:19 +00:00
fix: redesign auto-sync SVG with centered equal-width cards and larger icons
This commit is contained in:
MinaSaad1
parent
9cfab6329d
commit
32aad78e5d
1 changed files with 86 additions and 84 deletions
|
|
@ -1,4 +1,4 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="340" viewBox="0 0 850 340">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="850" height="380" viewBox="0 0 850 380">
|
||||
<defs>
|
||||
<linearGradient id="sync-glow" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#06d6a0" stop-opacity="0"/>
|
||||
|
|
@ -11,107 +11,109 @@
|
|||
|
||||
<!-- Title -->
|
||||
<text x="425" y="30" font-family="'Segoe UI', Arial, sans-serif" font-size="20" fill="#06d6a0" text-anchor="middle" font-weight="bold">Desktop Auto-Sync</text>
|
||||
<text x="425" y="50" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">Your report changes appear in Desktop automatically. Your modeling work is preserved.</text>
|
||||
<text x="425" y="52" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e" text-anchor="middle">Report changes appear in Desktop automatically. Your modeling work is preserved.</text>
|
||||
|
||||
<rect x="80" y="60" width="690" height="1" fill="url(#sync-glow)"/>
|
||||
<!-- ============ 4 Steps: equal width, centered ============ -->
|
||||
<!-- Card width=160, arrow gap=30, total = 4*160 + 3*30 = 730, start x = (850-730)/2 = 60 -->
|
||||
|
||||
<!-- ============ Step 1: CLI writes PBIR ============ -->
|
||||
<rect x="20" y="80" width="155" height="120" rx="10" fill="#161b22" stroke="#58a6ff" stroke-width="1.5"/>
|
||||
<!-- Step number -->
|
||||
<circle cx="42" cy="100" r="12" fill="#58a6ff"/>
|
||||
<text x="42" y="105" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#0d1117" text-anchor="middle" font-weight="bold">1</text>
|
||||
<text x="105" y="104" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#58a6ff" text-anchor="middle" font-weight="bold">CLI Writes</text>
|
||||
<!-- File icon with pencil -->
|
||||
<g transform="translate(60, 118)">
|
||||
<rect x="0" y="0" width="36" height="44" rx="3" fill="none" stroke="#58a6ff" stroke-width="1.5"/>
|
||||
<line x1="8" y1="12" x2="28" y2="12" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
|
||||
<line x1="8" y1="20" x2="28" y2="20" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
|
||||
<line x1="8" y1="28" x2="20" y2="28" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
|
||||
<!-- Step 1: CLI Writes -->
|
||||
<rect x="60" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#58a6ff" stroke-width="1.5"/>
|
||||
<!-- Step badge -->
|
||||
<circle cx="140" cy="100" r="14" fill="#58a6ff"/>
|
||||
<text x="140" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">1</text>
|
||||
<text x="140" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#58a6ff" text-anchor="middle" font-weight="bold">CLI Writes</text>
|
||||
<!-- File icon -->
|
||||
<g transform="translate(110, 140)">
|
||||
<rect x="0" y="0" width="32" height="40" rx="3" fill="none" stroke="#58a6ff" stroke-width="1.5"/>
|
||||
<line x1="7" y1="11" x2="25" y2="11" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
|
||||
<line x1="7" y1="19" x2="25" y2="19" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
|
||||
<line x1="7" y1="27" x2="18" y2="27" stroke="#58a6ff" stroke-width="1" stroke-opacity="0.4"/>
|
||||
<!-- Pencil -->
|
||||
<line x1="30" y1="32" x2="42" y2="20" stroke="#06d6a0" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="42" cy="20" r="2" fill="#06d6a0"/>
|
||||
<line x1="26" y1="30" x2="38" y2="18" stroke="#06d6a0" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="38" cy="18" r="2.5" fill="#06d6a0"/>
|
||||
</g>
|
||||
<text x="97" y="180" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">page.json</text>
|
||||
<text x="97" y="193" font-family="'Courier New', Courier, monospace" font-size="10" fill="#8b949e" text-anchor="middle">visual.json</text>
|
||||
<text x="140" y="200" font-family="'Courier New', Courier, monospace" font-size="11" fill="#8b949e" text-anchor="middle">page.json</text>
|
||||
<text x="140" y="215" font-family="'Courier New', Courier, monospace" font-size="11" fill="#8b949e" text-anchor="middle">visual.json</text>
|
||||
<text x="140" y="230" font-family="'Courier New', Courier, monospace" font-size="11" fill="#8b949e" text-anchor="middle">filters</text>
|
||||
|
||||
<!-- Arrow 1 > 2 -->
|
||||
<line x1="180" y1="140" x2="205" y2="140" stroke="#F2C811" stroke-width="2"/>
|
||||
<polygon points="210,140 203,135 203,145" fill="#F2C811"/>
|
||||
<line x1="225" y1="155" x2="248" y2="155" stroke="#F2C811" stroke-width="2.5"/>
|
||||
<polygon points="253,155 245,149 245,161" fill="#F2C811"/>
|
||||
|
||||
<!-- ============ Step 2: Snapshot ============ -->
|
||||
<rect x="215" y="80" width="155" height="120" rx="10" fill="#161b22" stroke="#F2C811" stroke-width="1.5"/>
|
||||
<circle cx="237" cy="100" r="12" fill="#F2C811"/>
|
||||
<text x="237" y="105" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#0d1117" text-anchor="middle" font-weight="bold">2</text>
|
||||
<text x="305" y="104" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#F2C811" text-anchor="middle" font-weight="bold">Snapshot</text>
|
||||
<!-- Camera/snapshot icon -->
|
||||
<g transform="translate(257, 118)">
|
||||
<rect x="0" y="8" width="44" height="32" rx="4" fill="none" stroke="#F2C811" stroke-width="1.5"/>
|
||||
<circle cx="22" cy="24" r="10" fill="none" stroke="#F2C811" stroke-width="1.5"/>
|
||||
<circle cx="22" cy="24" r="4" fill="#F2C811" opacity="0.4"/>
|
||||
<rect x="14" y="4" width="16" height="8" rx="2" fill="none" stroke="#F2C811" stroke-width="1"/>
|
||||
<!-- Step 2: Snapshot -->
|
||||
<rect x="258" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#F2C811" stroke-width="1.5"/>
|
||||
<circle cx="338" cy="100" r="14" fill="#F2C811"/>
|
||||
<text x="338" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">2</text>
|
||||
<text x="338" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#F2C811" text-anchor="middle" font-weight="bold">Snapshot</text>
|
||||
<!-- Camera icon -->
|
||||
<g transform="translate(308, 140)">
|
||||
<rect x="0" y="10" width="50" height="34" rx="5" fill="none" stroke="#F2C811" stroke-width="1.5"/>
|
||||
<circle cx="25" cy="27" r="11" fill="none" stroke="#F2C811" stroke-width="1.5"/>
|
||||
<circle cx="25" cy="27" r="5" fill="#F2C811" opacity="0.3"/>
|
||||
<rect x="16" y="4" width="18" height="10" rx="3" fill="none" stroke="#F2C811" stroke-width="1.2"/>
|
||||
</g>
|
||||
<text x="292" y="180" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Captures your</text>
|
||||
<text x="292" y="193" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">PBIR changes</text>
|
||||
<text x="338" y="205" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e" text-anchor="middle">Captures your</text>
|
||||
<text x="338" y="221" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#F2C811" text-anchor="middle" font-weight="600">PBIR changes</text>
|
||||
|
||||
<!-- Arrow 2 > 3 -->
|
||||
<line x1="375" y1="140" x2="400" y2="140" stroke="#F2C811" stroke-width="2"/>
|
||||
<polygon points="405,140 398,135 398,145" fill="#F2C811"/>
|
||||
<line x1="423" y1="155" x2="446" y2="155" stroke="#F2C811" stroke-width="2.5"/>
|
||||
<polygon points="451,155 443,149 443,161" fill="#F2C811"/>
|
||||
|
||||
<!-- ============ Step 3: Desktop Saves ============ -->
|
||||
<rect x="410" y="80" width="155" height="120" rx="10" fill="#161b22" stroke="#06d6a0" stroke-width="1.5"/>
|
||||
<circle cx="432" cy="100" r="12" fill="#06d6a0"/>
|
||||
<text x="432" y="105" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#0d1117" text-anchor="middle" font-weight="bold">3</text>
|
||||
<text x="503" y="104" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#06d6a0" text-anchor="middle" font-weight="bold">Desktop Saves</text>
|
||||
<!-- Floppy/save icon with checkmark -->
|
||||
<g transform="translate(453, 118)">
|
||||
<rect x="0" y="0" width="40" height="40" rx="4" fill="none" stroke="#06d6a0" stroke-width="1.5"/>
|
||||
<rect x="8" y="0" width="24" height="14" rx="2" fill="none" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<rect x="6" y="24" width="28" height="14" rx="2" fill="#06d6a0" opacity="0.15"/>
|
||||
<!-- Checkmark -->
|
||||
<polyline points="12,32 18,38 30,26" fill="none" stroke="#06d6a0" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<!-- Step 3: Desktop Saves -->
|
||||
<rect x="456" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#06d6a0" stroke-width="1.5"/>
|
||||
<circle cx="536" cy="100" r="14" fill="#06d6a0"/>
|
||||
<text x="536" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">3</text>
|
||||
<text x="536" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0" text-anchor="middle" font-weight="bold">Desktop Saves</text>
|
||||
<!-- Save icon with checkmark -->
|
||||
<g transform="translate(508, 140)">
|
||||
<rect x="0" y="0" width="44" height="44" rx="5" fill="none" stroke="#06d6a0" stroke-width="1.5"/>
|
||||
<rect x="10" y="0" width="24" height="16" rx="3" fill="none" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<rect x="7" y="26" width="30" height="16" rx="3" fill="#06d6a0" opacity="0.12"/>
|
||||
<!-- Large checkmark -->
|
||||
<polyline points="14,36 20,42 32,28" fill="none" stroke="#06d6a0" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<text x="487" y="180" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Preserves your</text>
|
||||
<text x="487" y="193" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#06d6a0" text-anchor="middle" font-weight="600">modeling work</text>
|
||||
<text x="536" y="205" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e" text-anchor="middle">Preserves your</text>
|
||||
<text x="536" y="221" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#06d6a0" text-anchor="middle" font-weight="600">modeling work</text>
|
||||
|
||||
<!-- Arrow 3 > 4 -->
|
||||
<line x1="570" y1="140" x2="595" y2="140" stroke="#F2C811" stroke-width="2"/>
|
||||
<polygon points="600,140 593,135 593,145" fill="#F2C811"/>
|
||||
<line x1="621" y1="155" x2="644" y2="155" stroke="#F2C811" stroke-width="2.5"/>
|
||||
<polygon points="649,155 641,149 641,161" fill="#F2C811"/>
|
||||
|
||||
<!-- ============ Step 4: Re-apply + Reopen ============ -->
|
||||
<rect x="605" y="80" width="225" height="120" rx="10" fill="#161b22" stroke="#d97757" stroke-width="1.5"/>
|
||||
<circle cx="627" cy="100" r="12" fill="#d97757"/>
|
||||
<text x="627" y="105" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#0d1117" text-anchor="middle" font-weight="bold">4</text>
|
||||
<text x="735" y="104" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#d97757" text-anchor="middle" font-weight="bold">Re-apply + Reopen</text>
|
||||
<!-- Step 4: Re-apply + Reopen -->
|
||||
<rect x="654" y="75" width="160" height="165" rx="10" fill="#161b22" stroke="#d97757" stroke-width="1.5"/>
|
||||
<circle cx="734" cy="100" r="14" fill="#d97757"/>
|
||||
<text x="734" y="106" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#0d1117" text-anchor="middle" font-weight="bold">4</text>
|
||||
<text x="734" y="128" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#d97757" text-anchor="middle" font-weight="bold">Reopen</text>
|
||||
<!-- Refresh/cycle icon -->
|
||||
<g transform="translate(680, 118)">
|
||||
<path d="M 20,2 A 18,18 0 1,1 2,20" fill="none" stroke="#d97757" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<polygon points="20,2 14,0 16,8" fill="#d97757"/>
|
||||
<path d="M 20,38 A 18,18 0 1,1 38,20" fill="none" stroke="#06d6a0" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<polygon points="20,38 26,40 24,32" fill="#06d6a0"/>
|
||||
<!-- Center PBI icon -->
|
||||
<rect x="13" y="13" width="5" height="14" rx="1" fill="#F2C811" opacity="0.6"/>
|
||||
<rect x="19" y="17" width="5" height="10" rx="1" fill="#F2C811" opacity="0.8"/>
|
||||
<rect x="25" y="20" width="5" height="7" rx="1" fill="#F2C811"/>
|
||||
<g transform="translate(706, 140)">
|
||||
<path d="M 24,2 A 22,22 0 1,1 2,24" fill="none" stroke="#d97757" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<polygon points="24,2 17,0 19,9" fill="#d97757"/>
|
||||
<path d="M 24,46 A 22,22 0 1,1 46,24" fill="none" stroke="#06d6a0" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<polygon points="24,46 31,48 29,39" fill="#06d6a0"/>
|
||||
<!-- Center PBI mini icon -->
|
||||
<rect x="16" y="15" width="6" height="18" rx="1" fill="#F2C811" opacity="0.6"/>
|
||||
<rect x="23" y="20" width="6" height="13" rx="1" fill="#F2C811" opacity="0.8"/>
|
||||
<rect x="30" y="24" width="6" height="9" rx="1" fill="#F2C811"/>
|
||||
</g>
|
||||
<text x="717" y="180" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#8b949e" text-anchor="middle">Restores PBIR changes,</text>
|
||||
<text x="717" y="193" font-family="'Segoe UI', Arial, sans-serif" font-size="11" fill="#d97757" text-anchor="middle" font-weight="600">Desktop reopens fresh</text>
|
||||
<text x="734" y="205" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e" text-anchor="middle">PBIR restored,</text>
|
||||
<text x="734" y="221" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#d97757" text-anchor="middle" font-weight="600">Desktop reopens</text>
|
||||
|
||||
<!-- ============ Bottom: Before/After comparison ============ -->
|
||||
<rect x="80" y="218" width="690" height="1" fill="url(#sync-glow)"/>
|
||||
<!-- ============ Bottom comparison ============ -->
|
||||
<rect x="60" y="258" width="730" height="1" fill="url(#sync-glow)"/>
|
||||
|
||||
<!-- Before -->
|
||||
<rect x="50" y="235" width="350" height="85" rx="8" fill="#161b22" stroke="#ff6b6b" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<text x="225" y="258" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#ff6b6b" text-anchor="middle" font-weight="bold">Without Auto-Sync</text>
|
||||
<text x="80" y="280" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#ff6b6b">✗</text>
|
||||
<text x="98" y="280" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">Close Desktop manually after every change</text>
|
||||
<text x="80" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#ff6b6b">✗</text>
|
||||
<text x="98" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#8b949e">Risk losing unsaved modeling work</text>
|
||||
<!-- Without -->
|
||||
<rect x="60" y="275" width="350" height="85" rx="8" fill="#161b22" stroke="#ff6b6b" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<text x="235" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#ff6b6b" text-anchor="middle" font-weight="bold">Without Auto-Sync</text>
|
||||
<text x="90" y="324" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#ff6b6b">✗</text>
|
||||
<text x="110" y="324" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e">Close Desktop manually every time</text>
|
||||
<text x="90" y="346" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#ff6b6b">✗</text>
|
||||
<text x="110" y="346" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#8b949e">Risk losing unsaved modeling work</text>
|
||||
|
||||
<!-- After -->
|
||||
<rect x="450" y="235" width="350" height="85" rx="8" fill="#161b22" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<text x="625" y="258" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0" text-anchor="middle" font-weight="bold">With Auto-Sync</text>
|
||||
<text x="480" y="280" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0">✓</text>
|
||||
<text x="498" y="280" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e6edf3">Desktop reopens automatically</text>
|
||||
<text x="480" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="14" fill="#06d6a0">✓</text>
|
||||
<text x="498" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="12" fill="#e6edf3">All your work is preserved -- both layers</text>
|
||||
<!-- With -->
|
||||
<rect x="440" y="275" width="350" height="85" rx="8" fill="#161b22" stroke="#06d6a0" stroke-width="1" stroke-opacity="0.5"/>
|
||||
<text x="615" y="300" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#06d6a0" text-anchor="middle" font-weight="bold">With Auto-Sync</text>
|
||||
<text x="470" y="324" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#06d6a0">✓</text>
|
||||
<text x="490" y="324" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#e6edf3">Desktop reopens automatically</text>
|
||||
<text x="470" y="346" font-family="'Segoe UI', Arial, sans-serif" font-size="15" fill="#06d6a0">✓</text>
|
||||
<text x="490" y="346" font-family="'Segoe UI', Arial, sans-serif" font-size="13" fill="#e6edf3">All work preserved -- both layers</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 8.6 KiB After Width: | Height: | Size: 8.7 KiB |
Loading…
Reference in a new issue