Files
RelayOps/docs/mockups/concept-2-dark.svg
2026-06-07 02:32:28 +03:00

87 lines
7.4 KiB
XML

<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="1024" viewBox="0 0 1440 1024" fill="none">
<rect width="1440" height="1024" fill="#090C13"/>
<rect x="24" y="24" width="1392" height="976" rx="40" fill="url(#bg)"/>
<defs>
<linearGradient id="bg" x1="120" y1="60" x2="1220" y2="940" gradientUnits="userSpaceOnUse">
<stop stop-color="#101728"/>
<stop offset="1" stop-color="#0B1020"/>
</linearGradient>
</defs>
<rect x="44" y="44" width="1352" height="936" rx="34" fill="rgba(255,255,255,0.02)" stroke="rgba(255,255,255,0.07)"/>
<text x="72" y="96" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="34" font-weight="700">Server Panel</text>
<text x="72" y="132" fill="#8AA0B7" font-family="Segoe UI, Arial" font-size="18">Dark command center</text>
<rect x="72" y="168" width="1296" height="80" rx="26" fill="#101826" stroke="#1B2637"/>
<text x="106" y="216" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="28" font-weight="700">Operational Flow</text>
<text x="390" y="216" fill="#8AA0B7" font-family="Segoe UI, Arial" font-size="18">Services first, actions second, context always visible.</text>
<rect x="1208" y="187" width="72" height="40" rx="20" fill="#243041"/>
<circle cx="1230" cy="207" r="14" fill="#F8FAFC"/>
<rect x="1292" y="187" width="72" height="40" rx="20" fill="#F97316"/>
<circle cx="1342" cy="207" r="14" fill="#111827"/>
<rect x="72" y="274" width="280" height="654" rx="30" fill="#0E1624" stroke="#1B2637"/>
<rect x="380" y="274" width="640" height="654" rx="30" fill="#0E1624" stroke="#1B2637"/>
<rect x="1048" y="274" width="320" height="654" rx="30" fill="#0E1624" stroke="#1B2637"/>
<text x="102" y="324" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="26" font-weight="700">Fleet Pulse</text>
<text x="102" y="354" fill="#8AA0B7" font-family="Segoe UI, Arial" font-size="17">Global signals at a glance</text>
<rect x="102" y="392" width="220" height="118" rx="24" fill="#111D2E"/>
<rect x="102" y="530" width="220" height="118" rx="24" fill="#111D2E"/>
<rect x="102" y="668" width="220" height="118" rx="24" fill="#111D2E"/>
<text x="126" y="430" fill="#7DD3FC" font-family="Segoe UI, Arial" font-size="16">Services up</text>
<text x="126" y="480" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="48" font-weight="700">18/21</text>
<text x="126" y="568" fill="#F59E0B" font-family="Segoe UI, Arial" font-size="16">Attention</text>
<text x="126" y="618" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="48" font-weight="700">3</text>
<text x="126" y="706" fill="#60A5FA" font-family="Segoe UI, Arial" font-size="16">Recent actions</text>
<text x="126" y="756" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="48" font-weight="700">12</text>
<text x="410" y="324" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="26" font-weight="700">Service Grid</text>
<text x="410" y="354" fill="#8AA0B7" font-family="Segoe UI, Arial" font-size="17">Dense enough for operations, calm enough for daily use.</text>
<rect x="410" y="394" width="580" height="96" rx="24" fill="#101B2A"/>
<rect x="410" y="506" width="580" height="96" rx="24" fill="#101B2A"/>
<rect x="410" y="618" width="580" height="96" rx="24" fill="#2A180E"/>
<rect x="410" y="730" width="580" height="96" rx="24" fill="#101B2A"/>
<circle cx="446" cy="442" r="10" fill="#22C55E"/>
<circle cx="446" cy="554" r="10" fill="#22C55E"/>
<circle cx="446" cy="666" r="10" fill="#F59E0B"/>
<circle cx="446" cy="778" r="10" fill="#22C55E"/>
<text x="470" y="436" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="24" font-weight="700">nginx</text>
<text x="470" y="464" fill="#8AA0B7" font-family="Segoe UI, Arial" font-size="17">active • 12 ms health route</text>
<text x="470" y="548" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="24" font-weight="700">app</text>
<text x="470" y="576" fill="#8AA0B7" font-family="Segoe UI, Arial" font-size="17">container healthy • last deploy 14 min ago</text>
<text x="470" y="660" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="24" font-weight="700">postgres</text>
<text x="470" y="688" fill="#F5B971" font-family="Segoe UI, Arial" font-size="17">memory growth trend • action suggested</text>
<text x="470" y="772" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="24" font-weight="700">redis</text>
<text x="470" y="800" fill="#8AA0B7" font-family="Segoe UI, Arial" font-size="17">queue ready • no pending failures</text>
<rect x="804" y="420" width="72" height="42" rx="15" fill="#1F2937"/>
<rect x="888" y="420" width="88" height="42" rx="15" fill="#F97316"/>
<rect x="804" y="532" width="72" height="42" rx="15" fill="#1F2937"/>
<rect x="888" y="532" width="88" height="42" rx="15" fill="#F97316"/>
<rect x="804" y="644" width="72" height="42" rx="15" fill="#3A2A1E"/>
<rect x="888" y="644" width="88" height="42" rx="15" fill="#F59E0B"/>
<rect x="804" y="756" width="72" height="42" rx="15" fill="#1F2937"/>
<rect x="888" y="756" width="88" height="42" rx="15" fill="#F97316"/>
<text x="822" y="447" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="16" font-weight="700">Logs</text>
<text x="906" y="447" fill="#FFF7ED" font-family="Segoe UI, Arial" font-size="16" font-weight="700">Restart</text>
<text x="822" y="559" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="16" font-weight="700">Logs</text>
<text x="906" y="559" fill="#FFF7ED" font-family="Segoe UI, Arial" font-size="16" font-weight="700">Restart</text>
<text x="822" y="671" fill="#FED7AA" font-family="Segoe UI, Arial" font-size="16" font-weight="700">Logs</text>
<text x="916" y="671" fill="#111827" font-family="Segoe UI, Arial" font-size="16" font-weight="700">Review</text>
<text x="822" y="783" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="16" font-weight="700">Logs</text>
<text x="906" y="783" fill="#FFF7ED" font-family="Segoe UI, Arial" font-size="16" font-weight="700">Restart</text>
<text x="1078" y="324" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="26" font-weight="700">Action Feed</text>
<text x="1078" y="354" fill="#8AA0B7" font-family="Segoe UI, Arial" font-size="17">Everything recent, nothing hidden</text>
<rect x="1078" y="396" width="260" height="108" rx="24" fill="#111D2E"/>
<rect x="1078" y="524" width="260" height="108" rx="24" fill="#111D2E"/>
<rect x="1078" y="652" width="260" height="108" rx="24" fill="#111D2E"/>
<rect x="1078" y="780" width="260" height="108" rx="24" fill="#111D2E"/>
<text x="1102" y="434" fill="#60A5FA" font-family="Segoe UI, Arial" font-size="16">Restart / nginx</text>
<text x="1102" y="464" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="20" font-weight="700">completed cleanly</text>
<text x="1102" y="562" fill="#7DD3FC" font-family="Consolas, monospace" font-size="15">app: deploy complete</text>
<text x="1102" y="590" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="20" font-weight="700">health back to green</text>
<text x="1102" y="690" fill="#F59E0B" font-family="Segoe UI, Arial" font-size="16">postgres alert</text>
<text x="1102" y="718" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="20" font-weight="700">investigate memory spike</text>
<text x="1102" y="818" fill="#A78BFA" font-family="Segoe UI, Arial" font-size="16">theme mode</text>
<text x="1102" y="846" fill="#F8FAFC" font-family="Segoe UI, Arial" font-size="20" font-weight="700">shared layout, dual skins</text>
</svg>