File size: 4,937 Bytes
93c24ec | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 500" width="800" height="500">
<defs>
<linearGradient id="darkBg" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" style="stop-color:#111827"/>
<stop offset="100%" style="stop-color:#1F2937"/>
</linearGradient>
<linearGradient id="cardDark" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#1F2937"/>
<stop offset="100%" style="stop-color:#111827"/>
</linearGradient>
<filter id="glow">
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
<feMerge>
<feMergeNode in="coloredBlur"/>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
</defs>
<!-- Dark Background -->
<rect width="800" height="500" fill="url(#darkBg)"/>
<!-- Header -->
<rect y="0" width="800" height="60" fill="#1F2937"/>
<circle cx="40" cy="30" r="18" fill="#4F46E5"/>
<text x="40" y="35" font-family="Arial" font-size="11" fill="white" text-anchor="middle" font-weight="bold">TF</text>
<text x="65" y="35" font-family="Arial" font-size="16" font-weight="bold" fill="#818CF8">TaskFlow</text>
<!-- Dark Mode Toggle -->
<rect x="680" y="15" width="100" height="30" rx="15" fill="#4F46E5"/>
<circle cx="715" cy="30" r="12" fill="#FFFFFF"/>
<text x="745" y="35" font-family="Arial" font-size="12" fill="white" text-anchor="middle">☀️ فاتح</text>
<!-- Sidebar -->
<rect x="0" y="60" width="200" height="440" fill="#1F2937"/>
<rect x="20" y="90" width="160" height="36" rx="8" fill="#4F46E5" filter="url(#glow)"/>
<rect x="20" y="140" width="160" height="36" rx="8" fill="#374151"/>
<rect x="20" y="190" width="160" height="36" rx="8" fill="#374151"/>
<rect x="20" y="240" width="160" height="36" rx="8" fill="#374151"/>
<rect x="20" y="290" width="160" height="36" rx="8" fill="#374151"/>
<!-- Stats Cards -->
<rect x="230" y="90" width="170" height="100" rx="12" fill="url(#cardDark)" stroke="#374151"/>
<circle cx="280" cy="125" r="24" fill="#1E3A5F"/>
<circle cx="280" cy="125" r="14" fill="#3B82F6"/>
<rect x="320" y="110" width="60" height="24" rx="4" fill="#E5E7EB"/>
<rect x="320" y="145" width="50" height="12" rx="4" fill="#6B7280"/>
<rect x="420" y="90" width="170" height="100" rx="12" fill="url(#cardDark)" stroke="#374151"/>
<circle cx="470" cy="125" r="24" fill="#064E3B"/>
<circle cx="470" cy="125" r="14" fill="#10B981"/>
<rect x="510" y="110" width="60" height="24" rx="4" fill="#E5E7EB"/>
<rect x="510" y="145" width="50" height="12" rx="4" fill="#6B7280"/>
<rect x="610" y="90" width="170" height="100" rx="12" fill="url(#cardDark)" stroke="#374151"/>
<circle cx="660" cy="125" r="24" fill="#78350F"/>
<circle cx="660" cy="125" r="14" fill="#F59E0B"/>
<rect x="700" y="110" width="60" height="24" rx="4" fill="#E5E7EB"/>
<rect x="700" y="145" width="50" height="12" rx="4" fill="#6B7280"/>
<!-- Chart Section -->
<rect x="230" y="210" width="550" height="270" rx="12" fill="url(#cardDark)" stroke="#374151"/>
<text x="250" y="245" font-family="Arial" font-size="14" font-weight="bold" fill="#E5E7EB">نظرة عامة على المهام</text>
<!-- Donut Chart -->
<circle cx="440" cy="350" r="70" fill="none" stroke="#4F46E5" stroke-width="30" stroke-dasharray="60 110"/>
<circle cx="440" cy="350" r="70" fill="none" stroke="#3B82F6" stroke-width="30" stroke-dasharray="90 110" stroke-dashoffset="-60"/>
<circle cx="440" cy="350" r="70" fill="none" stroke="#F59E0B" stroke-width="30" stroke-dasharray="40 110" stroke-dashoffset="-150"/>
<circle cx="440" cy="350" r="45" fill="#1F2937"/>
<!-- Legend -->
<rect x="560" y="310" width="100" height="20" rx="4" fill="#4F46E5"/>
<rect x="670" y="314" width="60" height="12" rx="4" fill="#6B7280"/>
<rect x="560" y="345" width="100" height="20" rx="4" fill="#3B82F6"/>
<rect x="670" y="349" width="60" height="12" rx="4" fill="#6B7280"/>
<rect x="560" y="380" width="100" height="20" rx="4" fill="#F59E0B"/>
<rect x="670" y="384" width="60" height="12" rx="4" fill="#6B7280"/>
<rect x="560" y="415" width="100" height="20" rx="4" fill="#10B981"/>
<rect x="670" y="419" width="60" height="12" rx="4" fill="#6B7280"/>
<!-- Floating Elements -->
<rect x="50" y="400" width="150" height="60" rx="8" fill="#1F2937" stroke="#4F46E5" opacity="0.8"/>
<text x="125" y="430" font-family="Arial" font-size="12" fill="#E5E7EB" text-anchor="middle">✨ الوضع الداكن</text>
<text x="125" y="448" font-family="Arial" font-size="9" fill="#9CA3AF" text-anchor="middle">مريح للعين</text>
<!-- Theme Switcher Preview -->
<rect x="600" y="440" width="180" height="40" rx="20" fill="#4F46E5"/>
<circle cx="630" cy="460" r="16" fill="#FFFFFF"/>
<text x="660" y="465" font-family="Arial" font-size="10" fill="white" text-anchor="middle">🌙 داكن</text>
</svg>
|