111 lines
5.0 KiB
XML
111 lines
5.0 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 150" width="100%" height="100%">
|
|
<defs>
|
|
<radialGradient id="tg-bg" cx="50%" cy="50%" r="75%">
|
|
<stop offset="0%" stop-color="#0284C7" stop-opacity="0.25"/>
|
|
<stop offset="60%" stop-color="#0F172A" stop-opacity="0.9"/>
|
|
<stop offset="100%" stop-color="#030712" stop-opacity="0.98"/>
|
|
</radialGradient>
|
|
|
|
<linearGradient id="tg-border" x1="0%" y1="0%" x2="100%" y2="0%">
|
|
<stop offset="0%" stop-color="#38BDF8" stop-opacity="0.3"/>
|
|
<stop offset="50%" stop-color="#0284C7" stop-opacity="0.8"/>
|
|
<stop offset="100%" stop-color="#818CF8" stop-opacity="0.3"/>
|
|
</linearGradient>
|
|
|
|
<filter id="tg-glow" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="150">
|
|
<feGaussianBlur stdDeviation="3" result="blur"/>
|
|
<feMerge>
|
|
<feMergeNode in="blur"/>
|
|
<feMergeNode in="SourceGraphic"/>
|
|
</feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<style>
|
|
@keyframes pulseTgDot {
|
|
0%, 100% { transform: scale(1); opacity: 0.9; }
|
|
50% { transform: scale(1.3); opacity: 0.3; }
|
|
}
|
|
@keyframes tgWaveDash {
|
|
0% { stroke-dashoffset: 120; }
|
|
100% { stroke-dashoffset: 0; }
|
|
}
|
|
|
|
.tg-dot { animation: pulseTgDot 2s ease-in-out infinite; }
|
|
.tg-stream { stroke-dasharray: 12 24; animation: tgWaveDash 2.5s linear infinite; }
|
|
|
|
.tg-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 800; font-size: 15px; fill: #FFFFFF; }
|
|
.tg-desc { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-size: 12px; fill: #94A3B8; }
|
|
.tg-cmd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; font-weight: 700; fill: #38BDF8; }
|
|
.tg-btn-txt { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 600; fill: #F8FAFC; }
|
|
.tg-status { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 700; fill: #10B981; }
|
|
</style>
|
|
|
|
<!-- Container Box -->
|
|
<rect width="1200" height="150" rx="14" fill="url(#tg-bg)" stroke="url(#tg-border)" stroke-width="1.5"/>
|
|
|
|
<!-- Left Header with Telegram Icon -->
|
|
<g transform="translate(35, 25)">
|
|
<rect width="44" height="44" rx="10" fill="#0284C7" fill-opacity="0.25" stroke="#38BDF8" stroke-width="1.2"/>
|
|
<text x="11" y="29" font-size="22">📱</text>
|
|
<text x="56" y="20" class="tg-title">Interactive Telegram Bot Management & Remote Control</text>
|
|
<text x="56" y="38" class="tg-desc">Мгновенный контроль роутера из мессенджера: запуск AI Doctor, переключение серверов и списков</text>
|
|
</g>
|
|
|
|
<!-- Animated Connecting Data Track -->
|
|
<g transform="translate(35, 80)">
|
|
<line x1="0" y1="28" x2="1130" y2="28" stroke="#1E293B" stroke-width="1.5"/>
|
|
<line x1="0" y1="28" x2="1130" y2="28" stroke="#38BDF8" stroke-width="2" class="tg-stream" filter="url(#tg-glow)"/>
|
|
</g>
|
|
|
|
<!-- Interactive Telegram Command Badges -->
|
|
<g transform="translate(35, 95)">
|
|
<!-- Cmd 1: /ai_doctor -->
|
|
<g transform="translate(0, 0)">
|
|
<rect width="125" height="32" rx="6" fill="#0B132B" stroke="#0284C7" stroke-width="1"/>
|
|
<text x="12" y="20" class="tg-cmd">/ai_doctor</text>
|
|
</g>
|
|
|
|
<!-- Cmd 2: /fix -->
|
|
<g transform="translate(135, 0)">
|
|
<rect width="90" height="32" rx="6" fill="#0B132B" stroke="#818CF8" stroke-width="1"/>
|
|
<text x="12" y="20" class="tg-cmd" fill="#C084FC">/fix <code></text>
|
|
</g>
|
|
|
|
<!-- Cmd 3: /restart -->
|
|
<g transform="translate(235, 0)">
|
|
<rect width="95" height="32" rx="6" fill="#0B132B" stroke="#10B981" stroke-width="1"/>
|
|
<text x="12" y="20" class="tg-cmd" fill="#34D399">/restart</text>
|
|
</g>
|
|
|
|
<!-- Cmd 4: /status -->
|
|
<g transform="translate(340, 0)">
|
|
<rect width="85" height="32" rx="6" fill="#0B132B" stroke="#F59E0B" stroke-width="1"/>
|
|
<text x="12" y="20" class="tg-cmd" fill="#FBBF24">/status</text>
|
|
</g>
|
|
|
|
<!-- Cmd 5: /backup -->
|
|
<g transform="translate(435, 0)">
|
|
<rect width="90" height="32" rx="6" fill="#0B132B" stroke="#64748B" stroke-width="1"/>
|
|
<text x="12" y="20" class="tg-cmd" fill="#94A3B8">/backup</text>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Right Floating HUD Status Widgets -->
|
|
<g transform="translate(850, 25)">
|
|
<!-- Widget: Telegram Bot Online -->
|
|
<g transform="translate(0, 0)">
|
|
<rect width="140" height="32" rx="6" fill="#0B132B" stroke="#10B981" stroke-width="1"/>
|
|
<circle cx="14" cy="16" r="3.5" fill="#10B981" class="tg-dot"/>
|
|
<text x="26" y="20" class="tg-status">BOT ACTIVE</text>
|
|
</g>
|
|
|
|
<!-- Widget: Ping RTT -->
|
|
<g transform="translate(150, 0)">
|
|
<rect width="130" height="32" rx="6" fill="#0B132B" stroke="#38BDF8" stroke-width="1"/>
|
|
<text x="12" y="20" class="tg-btn-txt" fill="#38BDF8">RTT: 18ms</text>
|
|
<circle cx="115" cy="16" r="3.5" fill="#38BDF8"/>
|
|
</g>
|
|
</g>
|
|
</svg>
|