146 أسطر
8.8 KiB
XML
146 أسطر
8.8 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 520" font-family="Segoe UI, Arial, sans-serif">
|
|
<defs>
|
|
<linearGradient id="dbg" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#0f172a"/>
|
|
<stop offset="100%" style="stop-color:#1e293b"/>
|
|
</linearGradient>
|
|
</defs>
|
|
|
|
<!-- Background -->
|
|
<rect width="900" height="520" fill="url(#dbg)" rx="12"/>
|
|
|
|
<!-- Title bar -->
|
|
<rect x="0" y="0" width="900" height="50" fill="#181b24" rx="12"/>
|
|
<rect x="0" y="20" width="900" height="30" fill="#181b24"/>
|
|
<text x="30" y="33" fill="#e2e8f0" font-size="16" font-weight="700">Mithal.space Monitor</text>
|
|
<text x="200" y="33" fill="#64748b" font-size="11">Real-time Website Health</text>
|
|
<circle cx="820" cy="25" r="8" fill="#22c55e"/>
|
|
<text x="835" y="29" fill="#94a3b8" font-size="10">Live</text>
|
|
<text x="870" y="29" fill="#94a3b8" font-size="10">30s</text>
|
|
|
|
<!-- Status Cards Row -->
|
|
<!-- Card 1: Status -->
|
|
<rect x="20" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5"/>
|
|
<text x="35" y="85" fill="#64748b" font-size="9" font-weight="600" text-transform="uppercase">CURRENT STATUS</text>
|
|
<text x="35" y="115" fill="#22c55e" font-size="26" font-weight="700">UP</text>
|
|
<rect x="20" y="65" width="140" height="4" rx="2" fill="#22c55e"/>
|
|
|
|
<!-- Card 2: Latency -->
|
|
<rect x="175" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="190" y="85" fill="#64748b" font-size="9" font-weight="600">HTTP LATENCY</text>
|
|
<text x="190" y="115" fill="#e2e8f0" font-size="26" font-weight="700">142</text>
|
|
<text x="260" y="115" fill="#64748b" font-size="10">ms</text>
|
|
|
|
<!-- Card 3: DNS -->
|
|
<rect x="330" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="345" y="85" fill="#64748b" font-size="9" font-weight="600">DNS LOOKUP</text>
|
|
<text x="345" y="115" fill="#e2e8f0" font-size="26" font-weight="700">23</text>
|
|
<text x="395" y="115" fill="#64748b" font-size="10">ms</text>
|
|
|
|
<!-- Card 4: SSL -->
|
|
<rect x="485" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="500" y="85" fill="#64748b" font-size="9" font-weight="600">SSL REMAINING</text>
|
|
<text x="500" y="115" fill="#22c55e" font-size="26" font-weight="700">47</text>
|
|
<text x="550" y="115" fill="#64748b" font-size="10">days</text>
|
|
|
|
<!-- Card 5: Search -->
|
|
<rect x="640" y="65" width="140" height="80" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="655" y="85" fill="#64748b" font-size="9" font-weight="600">SEARCH RESPONSE</text>
|
|
<text x="655" y="115" fill="#e2e8f0" font-size="26" font-weight="700">312</text>
|
|
<text x="720" y="115" fill="#64748b" font-size="10">ms</text>
|
|
|
|
<!-- Card 6: Uptime -->
|
|
<rect x="795" y="65" width="90" height="80" rx="10" fill="#1e293b" stroke="#22c55e" stroke-width="1.5"/>
|
|
<text x="805" y="85" fill="#64748b" font-size="8" font-weight="600">UPTIME 24H</text>
|
|
<text x="805" y="115" fill="#22c55e" font-size="22" font-weight="700">99.8%</text>
|
|
|
|
<!-- Latency Chart -->
|
|
<rect x="20" y="160" width="530" height="200" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="40" y="185" fill="#94a3b8" font-size="11" font-weight="600">Latency (Last Hour)</text>
|
|
<!-- Chart grid lines -->
|
|
<line x1="60" y1="200" x2="530" y2="200" stroke="#2a2d3a" stroke-width="0.5"/>
|
|
<line x1="60" y1="230" x2="530" y2="230" stroke="#2a2d3a" stroke-width="0.5"/>
|
|
<line x1="60" y1="260" x2="530" y2="260" stroke="#2a2d3a" stroke-width="0.5"/>
|
|
<line x1="60" y1="290" x2="530" y2="290" stroke="#2a2d3a" stroke-width="0.5"/>
|
|
<line x1="60" y1="320" x2="530" y2="320" stroke="#2a2d3a" stroke-width="0.5"/>
|
|
<!-- Y-axis labels -->
|
|
<text x="50" y="204" fill="#64748b" font-size="8" text-anchor="end">500</text>
|
|
<text x="50" y="234" fill="#64748b" font-size="8" text-anchor="end">400</text>
|
|
<text x="50" y="264" fill="#64748b" font-size="8" text-anchor="end">300</text>
|
|
<text x="50" y="294" fill="#64748b" font-size="8" text-anchor="end">200</text>
|
|
<text x="50" y="324" fill="#64748b" font-size="8" text-anchor="end">100</text>
|
|
<!-- Line chart -->
|
|
<polyline points="70,290 100,285 130,280 160,275 190,270 220,265 250,260 280,255 310,250 340,245 370,240 400,235 430,230 460,225 490,220 520,215" fill="none" stroke="#4361ee" stroke-width="2"/>
|
|
<!-- Fill under line -->
|
|
<polyline points="70,290 100,285 130,280 160,275 190,270 220,265 250,260 280,255 310,250 340,245 370,240 400,235 430,230 460,225 490,220 520,215 520,330 70,330" fill="rgba(67,97,238,0.1)"/>
|
|
<!-- Data points -->
|
|
<circle cx="70" cy="290" r="3" fill="#4361ee"/>
|
|
<circle cx="190" cy="270" r="3" fill="#4361ee"/>
|
|
<circle cx="310" cy="250" r="3" fill="#4361ee"/>
|
|
<circle cx="430" cy="230" r="3" fill="#4361ee"/>
|
|
<circle cx="520" cy="215" r="3" fill="#4361ee"/>
|
|
<!-- X-axis labels -->
|
|
<text x="70" y="348" fill="#64748b" font-size="8" text-anchor="middle">14:00</text>
|
|
<text x="190" y="348" fill="#64748b" font-size="8" text-anchor="middle">14:15</text>
|
|
<text x="310" y="348" fill="#64748b" font-size="8" text-anchor="middle">14:30</text>
|
|
<text x="430" y="348" fill="#64748b" font-size="8" text-anchor="middle">14:45</text>
|
|
<text x="520" y="348" fill="#64748b" font-size="8" text-anchor="middle">15:00</text>
|
|
|
|
<!-- Search Response Chart -->
|
|
<rect x="565" y="160" width="320" height="200" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="585" y="185" fill="#94a3b8" font-size="11" font-weight="600">Search Response Time</text>
|
|
<!-- Bar chart -->
|
|
<rect x="590" y="260" width="25" height="70" rx="3" fill="rgba(34,197,94,0.6)"/>
|
|
<rect x="625" y="240" width="25" height="90" rx="3" fill="rgba(34,197,94,0.6)"/>
|
|
<rect x="660" y="250" width="25" height="80" rx="3" fill="rgba(34,197,94,0.6)"/>
|
|
<rect x="695" y="230" width="25" height="100" rx="3" fill="rgba(34,197,94,0.6)"/>
|
|
<rect x="730" y="245" width="25" height="85" rx="3" fill="rgba(34,197,94,0.6)"/>
|
|
<rect x="765" y="255" width="25" height="75" rx="3" fill="rgba(34,197,94,0.6)"/>
|
|
<rect x="800" y="235" width="25" height="95" rx="3" fill="rgba(34,197,94,0.6)"/>
|
|
<rect x="835" y="248" width="25" height="82" rx="3" fill="rgba(34,197,94,0.6)"/>
|
|
|
|
<!-- Table Section -->
|
|
<rect x="20" y="375" width="865" height="135" rx="10" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
|
<text x="40" y="400" fill="#94a3b8" font-size="11" font-weight="600">Latest 10 Checks</text>
|
|
|
|
<!-- Table header -->
|
|
<rect x="35" y="410" width="835" height="22" fill="#0f172a" rx="4"/>
|
|
<text x="55" y="425" fill="#64748b" font-size="8" font-weight="600">TIMESTAMP</text>
|
|
<text x="200" y="425" fill="#64748b" font-size="8" font-weight="600">HTTP</text>
|
|
<text x="280" y="425" fill="#64748b" font-size="8" font-weight="600">LATENCY</text>
|
|
<text x="370" y="425" fill="#64748b" font-size="8" font-weight="600">DNS</text>
|
|
<text x="450" y="425" fill="#64748b" font-size="8" font-weight="600">SSL</text>
|
|
<text x="540" y="425" fill="#64748b" font-size="8" font-weight="600">SEARCH</text>
|
|
<text x="640" y="425" fill="#64748b" font-size="8" font-weight="600">STATUS</text>
|
|
|
|
<!-- Table row 1 -->
|
|
<text x="55" y="445" fill="#94a3b8" font-size="8">2026-07-27 15:00:12</text>
|
|
<text x="200" y="445" fill="#e2e8f0" font-size="8">200</text>
|
|
<text x="280" y="445" fill="#e2e8f0" font-size="8">142ms</text>
|
|
<text x="370" y="445" fill="#e2e8f0" font-size="8">23ms</text>
|
|
<text x="450" y="445" fill="#22c55e" font-size="8">47d</text>
|
|
<text x="540" y="445" fill="#e2e8f0" font-size="8">312ms</text>
|
|
<rect x="640" y="435" width="38" height="14" rx="7" fill="#0d3329"/>
|
|
<text x="659" y="445" text-anchor="middle" fill="#22c55e" font-size="7" font-weight="600">UP</text>
|
|
|
|
<!-- Table row 2 -->
|
|
<text x="55" y="462" fill="#94a3b8" font-size="8">2026-07-27 14:59:12</text>
|
|
<text x="200" y="462" fill="#e2e8f0" font-size="8">200</text>
|
|
<text x="280" y="462" fill="#e2e8f0" font-size="8">138ms</text>
|
|
<text x="370" y="462" fill="#e2e8f0" font-size="8">21ms</text>
|
|
<text x="450" y="462" fill="#22c55e" font-size="8">47d</text>
|
|
<text x="540" y="462" fill="#e2e8f0" font-size="8">298ms</text>
|
|
<rect x="640" y="452" width="38" height="14" rx="7" fill="#0d3329"/>
|
|
<text x="659" y="462" text-anchor="middle" fill="#22c55e" font-size="7" font-weight="600">UP</text>
|
|
|
|
<!-- Table row 3 -->
|
|
<text x="55" y="479" fill="#94a3b8" font-size="8">2026-07-27 14:58:12</text>
|
|
<text x="200" y="479" fill="#e2e8f0" font-size="8">200</text>
|
|
<text x="280" y="479" fill="#e2e8f0" font-size="8">155ms</text>
|
|
<text x="370" y="479" fill="#e2e8f0" font-size="8">25ms</text>
|
|
<text x="450" y="479" fill="#22c55e" font-size="8">47d</text>
|
|
<text x="540" y="479" fill="#e2e8f0" font-size="8">341ms</text>
|
|
<rect x="640" y="469" width="38" height="14" rx="7" fill="#0d3329"/>
|
|
<text x="659" y="479" text-anchor="middle" fill="#22c55e" font-size="7" font-weight="600">UP</text>
|
|
</svg>
|
