168 lines
6.6 KiB
XML
168 lines
6.6 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512">
|
|
<defs>
|
|
<!-- Background gradient -->
|
|
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#2563eb;stop-opacity:1" />
|
|
<stop offset="50%" style="stop-color:#3b82f6;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#1d4ed8;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<!-- Calendar body gradient -->
|
|
<linearGradient id="calendarGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#ffffff;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#f1f5f9;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<!-- Header gradient -->
|
|
<linearGradient id="headerGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#3b82f6;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#2563eb;stop-opacity:1" />
|
|
</linearGradient>
|
|
|
|
<!-- Today highlight gradient -->
|
|
<radialGradient id="todayGradient" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" style="stop-color:#60a5fa;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#3b82f6;stop-opacity:1" />
|
|
</radialGradient>
|
|
|
|
<!-- Drop shadow -->
|
|
<filter id="dropShadow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feDropShadow dx="4" dy="8" stdDeviation="6" flood-color="#1e293b" flood-opacity="0.3"/>
|
|
</filter>
|
|
|
|
<!-- Inner shadow -->
|
|
<filter id="innerShadow" x="-50%" y="-50%" width="200%" height="200%">
|
|
<feOffset dx="0" dy="2"/>
|
|
<feGaussianBlur stdDeviation="4" result="offset-blur"/>
|
|
<feFlood flood-color="#334155" flood-opacity="0.15"/>
|
|
<feComposite in2="offset-blur" operator="in"/>
|
|
<feMerge>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
<feMergeNode/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<!-- Background circle -->
|
|
<circle cx="256" cy="256" r="240" fill="url(#bgGradient)" filter="url(#dropShadow)"/>
|
|
|
|
<!-- Calendar container -->
|
|
<rect x="96" y="80" width="320" height="352" rx="24" ry="24"
|
|
fill="url(#calendarGradient)"
|
|
stroke="#e2e8f0"
|
|
stroke-width="4"
|
|
filter="url(#innerShadow)"/>
|
|
|
|
<!-- Calendar header -->
|
|
<rect x="96" y="80" width="320" height="80" rx="24" ry="24"
|
|
fill="url(#headerGradient)"/>
|
|
<rect x="96" y="136" width="320" height="24"
|
|
fill="url(#headerGradient)"/>
|
|
|
|
<!-- Binding rings -->
|
|
<circle cx="160" cy="64" r="12" fill="#64748b" stroke="#475569" stroke-width="2"/>
|
|
<circle cx="256" cy="64" r="12" fill="#64748b" stroke="#475569" stroke-width="2"/>
|
|
<circle cx="352" cy="64" r="12" fill="#64748b" stroke="#475569" stroke-width="2"/>
|
|
|
|
<!-- Binding ring holes -->
|
|
<circle cx="160" cy="64" r="6" fill="#334155"/>
|
|
<circle cx="256" cy="64" r="6" fill="#334155"/>
|
|
<circle cx="352" cy="64" r="6" fill="#334155"/>
|
|
|
|
<!-- Month/Year text area -->
|
|
<rect x="120" y="100" width="272" height="40" rx="8" ry="8" fill="#ffffff" opacity="0.9"/>
|
|
|
|
<!-- Calendar grid -->
|
|
<g stroke="#cbd5e1" stroke-width="1" opacity="0.6">
|
|
<!-- Vertical lines -->
|
|
<line x1="141" y1="160" x2="141" y2="416"/>
|
|
<line x1="186" y1="160" x2="186" y2="416"/>
|
|
<line x1="231" y1="160" x2="231" y2="416"/>
|
|
<line x1="276" y1="160" x2="276" y2="416"/>
|
|
<line x1="321" y1="160" x2="321" y2="416"/>
|
|
<line x1="366" y1="160" x2="366" y2="416"/>
|
|
|
|
<!-- Horizontal lines -->
|
|
<line x1="96" y1="196" x2="416" y2="196"/>
|
|
<line x1="96" y1="232" x2="416" y2="232"/>
|
|
<line x1="96" y1="268" x2="416" y2="268"/>
|
|
<line x1="96" y1="304" x2="416" y2="304"/>
|
|
<line x1="96" y1="340" x2="416" y2="340"/>
|
|
<line x1="96" y1="376" x2="416" y2="376"/>
|
|
</g>
|
|
|
|
<!-- Day of week labels area -->
|
|
<rect x="96" y="160" width="320" height="36" fill="#f8fafc" opacity="0.8"/>
|
|
|
|
<!-- Sample dates -->
|
|
<g fill="#64748b" font-family="Arial, sans-serif" font-size="16" font-weight="500" text-anchor="middle">
|
|
<!-- Week days (abbreviated) -->
|
|
<text x="118" y="182" fill="#475569" font-size="12">M</text>
|
|
<text x="163" y="182" fill="#475569" font-size="12">T</text>
|
|
<text x="208" y="182" fill="#475569" font-size="12">W</text>
|
|
<text x="253" y="182" fill="#475569" font-size="12">T</text>
|
|
<text x="298" y="182" fill="#475569" font-size="12">F</text>
|
|
<text x="343" y="182" fill="#475569" font-size="12">S</text>
|
|
<text x="388" y="182" fill="#475569" font-size="12">S</text>
|
|
|
|
<!-- Sample date numbers -->
|
|
<text x="118" y="218">1</text>
|
|
<text x="163" y="218">2</text>
|
|
<text x="208" y="218">3</text>
|
|
<text x="253" y="218">4</text>
|
|
<text x="298" y="218">5</text>
|
|
<text x="343" y="218">6</text>
|
|
<text x="388" y="218">7</text>
|
|
|
|
<text x="118" y="254">8</text>
|
|
<text x="163" y="254">9</text>
|
|
<text x="208" y="254">10</text>
|
|
<text x="253" y="254">11</text>
|
|
<text x="298" y="254">12</text>
|
|
<text x="343" y="254">13</text>
|
|
<text x="388" y="254">14</text>
|
|
|
|
<text x="118" y="290">15</text>
|
|
<text x="163" y="290">16</text>
|
|
<text x="208" y="290">17</text>
|
|
</g>
|
|
|
|
<!-- Today highlight (day 18) -->
|
|
<circle cx="253" cy="285" r="18" fill="url(#todayGradient)" opacity="0.9"/>
|
|
<text x="253" y="291" fill="white" font-family="Arial, sans-serif" font-size="16" font-weight="600" text-anchor="middle">18</text>
|
|
|
|
<!-- Additional date numbers -->
|
|
<g fill="#64748b" font-family="Arial, sans-serif" font-size="16" font-weight="500" text-anchor="middle">
|
|
<text x="298" y="290">19</text>
|
|
<text x="343" y="290">20</text>
|
|
<text x="388" y="290">21</text>
|
|
|
|
<text x="118" y="326">22</text>
|
|
<text x="163" y="326">23</text>
|
|
<text x="208" y="326">24</text>
|
|
<text x="253" y="326">25</text>
|
|
<text x="298" y="326">26</text>
|
|
<text x="343" y="326">27</text>
|
|
<text x="388" y="326">28</text>
|
|
|
|
<text x="118" y="362">29</text>
|
|
<text x="163" y="362">30</text>
|
|
<text x="208" y="362">31</text>
|
|
</g>
|
|
|
|
<!-- Event indicators -->
|
|
<circle cx="163" cy="244" r="3" fill="#10b981"/>
|
|
<circle cx="298" cy="244" r="3" fill="#f59e0b"/>
|
|
<circle cx="343" cy="280" r="3" fill="#ef4444"/>
|
|
<circle cx="118" cy="316" r="3" fill="#8b5cf6"/>
|
|
|
|
<!-- Small OpenWall branding element -->
|
|
<g transform="translate(360, 380)" opacity="0.4">
|
|
<circle cx="16" cy="16" r="12" fill="#3b82f6"/>
|
|
<rect x="10" y="10" width="12" height="12" rx="2" fill="white" opacity="0.8"/>
|
|
<rect x="12" y="12" width="8" height="2" fill="#3b82f6"/>
|
|
<circle cx="14" cy="16" r="1" fill="#3b82f6"/>
|
|
<circle cx="18" cy="16" r="1" fill="#3b82f6"/>
|
|
</g>
|
|
</svg>
|