docs(readme): анимированные лазерные разделители разделов, ЭКГ-монитор AI Doctor и интерактивный терминал установки
This commit is contained in:
@@ -0,0 +1,92 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 160" width="100%" height="100%">
|
||||
<defs>
|
||||
<radialGradient id="ai-bg" cx="50%" cy="50%" r="75%">
|
||||
<stop offset="0%" stop-color="#1E1B4B" stop-opacity="0.6"/>
|
||||
<stop offset="60%" stop-color="#0F172A" stop-opacity="0.85"/>
|
||||
<stop offset="100%" stop-color="#050814" stop-opacity="0.95"/>
|
||||
</radialGradient>
|
||||
|
||||
<linearGradient id="ai-border" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#8B5CF6" stop-opacity="0.2"/>
|
||||
<stop offset="50%" stop-color="#C084FC" stop-opacity="0.8"/>
|
||||
<stop offset="100%" stop-color="#00F0FF" stop-opacity="0.2"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="ecg-glow" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="160">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<style>
|
||||
@keyframes ecgScan {
|
||||
0% { stroke-dashoffset: 400; }
|
||||
100% { stroke-dashoffset: 0; }
|
||||
}
|
||||
@keyframes pulseAiDot {
|
||||
0%, 100% { transform: scale(1); opacity: 0.9; }
|
||||
50% { transform: scale(1.3); opacity: 0.3; }
|
||||
}
|
||||
@keyframes cardShimmer {
|
||||
0%, 100% { stroke-opacity: 0.3; }
|
||||
50% { stroke-opacity: 0.85; }
|
||||
}
|
||||
|
||||
.ecg-line { stroke-dasharray: 40 80; animation: ecgScan 3s linear infinite; }
|
||||
.ai-dot { animation: pulseAiDot 2s ease-in-out infinite; }
|
||||
.ai-box { animation: cardShimmer 3s ease-in-out infinite; }
|
||||
|
||||
.ai-title { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 800; font-size: 15px; fill: #FFFFFF; }
|
||||
.ai-desc { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 500; font-size: 12px; fill: #94A3B8; }
|
||||
.ai-badge { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 700; fill: #C084FC; }
|
||||
.ai-metric { 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="160" rx="14" fill="url(#ai-bg)" stroke="url(#ai-border)" stroke-width="1.5" class="ai-box"/>
|
||||
|
||||
<!-- Left Side: AI Doctor Core HUD -->
|
||||
<g transform="translate(35, 30)">
|
||||
<rect width="44" height="44" rx="10" fill="#6B21A8" fill-opacity="0.25" stroke="#C084FC" stroke-width="1.2"/>
|
||||
<text x="12" y="28" font-size="20">🤖</text>
|
||||
<text x="56" y="20" class="ai-title">Tachyon AI Doctor v2.5 & Auto-Healing Engine</text>
|
||||
<text x="56" y="38" class="ai-desc">Интеллектуальная многоуровневая диагностика, 13 Quick Fix кодов и предотвращение сбоев</text>
|
||||
</g>
|
||||
|
||||
<!-- Animated ECG / Health Monitor Wave Across Center -->
|
||||
<g transform="translate(35, 95)">
|
||||
<!-- Background Grid Line -->
|
||||
<line x1="0" y1="20" x2="1130" y2="20" stroke="#1E293B" stroke-width="1.5"/>
|
||||
|
||||
<!-- ECG Pulse Path -->
|
||||
<path d="M 0,20 L 180,20 L 200,5 L 215,35 L 230,10 L 245,28 L 260,20 L 480,20 L 500,5 L 515,35 L 530,10 L 545,28 L 560,20 L 780,20 L 800,5 L 815,35 L 830,10 L 845,28 L 860,20 L 1130,20"
|
||||
fill="none" stroke="#10B981" stroke-width="2" class="ecg-line" filter="url(#ecg-glow)"/>
|
||||
</g>
|
||||
|
||||
<!-- Quick Status Badges on Right -->
|
||||
<g transform="translate(720, 25)">
|
||||
<!-- Badge 1: NTP Sync -->
|
||||
<g transform="translate(0, 0)">
|
||||
<rect width="125" height="30" rx="6" fill="#0B132B" stroke="#818CF8" stroke-width="1"/>
|
||||
<circle cx="12" cy="15" r="3.5" fill="#10B981" class="ai-dot"/>
|
||||
<text x="24" y="19" class="ai-metric">NTP SYNC: OK</text>
|
||||
</g>
|
||||
|
||||
<!-- Badge 2: Conntrack -->
|
||||
<g transform="translate(135, 0)">
|
||||
<rect width="135" height="30" rx="6" fill="#0B132B" stroke="#818CF8" stroke-width="1"/>
|
||||
<circle cx="12" cy="15" r="3.5" fill="#10B981" class="ai-dot"/>
|
||||
<text x="24" y="19" class="ai-metric">CONNTRACK: OK</text>
|
||||
</g>
|
||||
|
||||
<!-- Badge 3: MTU Tuning -->
|
||||
<g transform="translate(280, 0)">
|
||||
<rect width="135" height="30" rx="6" fill="#0B132B" stroke="#818CF8" stroke-width="1"/>
|
||||
<circle cx="12" cy="15" r="3.5" fill="#10B981" class="ai-dot"/>
|
||||
<text x="24" y="19" class="ai-metric">MTU TUNED: OK</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.3 KiB |
@@ -0,0 +1,56 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 32" width="100%" height="32">
|
||||
<defs>
|
||||
<linearGradient id="divider-grad" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#00F0FF" stop-opacity="0"/>
|
||||
<stop offset="25%" stop-color="#00F0FF" stop-opacity="0.3"/>
|
||||
<stop offset="50%" stop-color="#8B5CF6" stop-opacity="0.9"/>
|
||||
<stop offset="75%" stop-color="#C084FC" stop-opacity="0.3"/>
|
||||
<stop offset="100%" stop-color="#00F0FF" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="laser-pulse" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#00F0FF" stop-opacity="0"/>
|
||||
<stop offset="50%" stop-color="#00F0FF" stop-opacity="1"/>
|
||||
<stop offset="100%" stop-color="#8B5CF6" stop-opacity="0"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="laser-glow" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="32">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<style>
|
||||
@keyframes laserDash {
|
||||
0% { stroke-dashoffset: 240; }
|
||||
100% { stroke-dashoffset: 0; }
|
||||
}
|
||||
@keyframes coreDiamondPulse {
|
||||
0%, 100% { transform: scale(1) rotate(45deg); opacity: 0.8; }
|
||||
50% { transform: scale(1.3) rotate(45deg); opacity: 1; filter: drop-shadow(0 0 6px #00F0FF); }
|
||||
}
|
||||
@keyframes ringPulse {
|
||||
0% { r: 4; opacity: 0.9; }
|
||||
100% { r: 14; opacity: 0; }
|
||||
}
|
||||
|
||||
.laser-line { stroke-dasharray: 20 60; animation: laserDash 2.5s linear infinite; }
|
||||
.diamond-center { transform-origin: 600px 16px; animation: coreDiamondPulse 2.4s ease-in-out infinite; }
|
||||
.signal-wave { transform-origin: 600px 16px; animation: ringPulse 2.4s cubic-bezier(0.1, 0.8, 0.3, 1) infinite; }
|
||||
</style>
|
||||
|
||||
<!-- Background Base Track -->
|
||||
<line x1="100" y1="16" x2="1100" y2="16" stroke="url(#divider-grad)" stroke-width="1.5" stroke-opacity="0.4"/>
|
||||
|
||||
<!-- Animated Laser Beams -->
|
||||
<line x1="150" y1="16" x2="570" y2="16" stroke="url(#laser-pulse)" stroke-width="2.5" class="laser-line" filter="url(#laser-glow)"/>
|
||||
<line x1="630" y1="16" x2="1050" y2="16" stroke="url(#laser-pulse)" stroke-width="2.5" class="laser-line" filter="url(#laser-glow)"/>
|
||||
|
||||
<!-- Central Tachyon Diamond Core -->
|
||||
<circle cx="600" cy="16" r="4" fill="none" stroke="#00F0FF" stroke-width="1.5" class="signal-wave"/>
|
||||
<rect x="595" y="11" width="10" height="10" rx="1.5" fill="#0F172A" stroke="#00F0FF" stroke-width="1.5" class="diamond-center"/>
|
||||
<circle cx="600" cy="16" r="2.5" fill="#C084FC" filter="url(#laser-glow)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -0,0 +1,74 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 130" width="100%" height="100%">
|
||||
<defs>
|
||||
<linearGradient id="term-bg" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stop-color="#0F172A" stop-opacity="0.95"/>
|
||||
<stop offset="100%" stop-color="#020617" stop-opacity="0.98"/>
|
||||
</linearGradient>
|
||||
|
||||
<linearGradient id="term-border" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" stop-color="#00F0FF" stop-opacity="0.3"/>
|
||||
<stop offset="50%" stop-color="#38BDF8" stop-opacity="0.7"/>
|
||||
<stop offset="100%" stop-color="#818CF8" stop-opacity="0.3"/>
|
||||
</linearGradient>
|
||||
|
||||
<filter id="cursor-glow" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="130">
|
||||
<feGaussianBlur stdDeviation="3" result="blur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="blur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
|
||||
<style>
|
||||
@keyframes blinkCursor {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0; }
|
||||
}
|
||||
@keyframes streamInstall {
|
||||
0% { stroke-dashoffset: 120; }
|
||||
100% { stroke-dashoffset: 0; }
|
||||
}
|
||||
|
||||
.term-cursor { animation: blinkCursor 1s step-start infinite; }
|
||||
.term-stream { stroke-dasharray: 10 20; animation: streamInstall 2s linear infinite; }
|
||||
|
||||
.term-title { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; fill: #64748B; font-weight: 600; }
|
||||
.term-prompt { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 14px; font-weight: 700; fill: #10B981; }
|
||||
.term-cmd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 14px; font-weight: 600; fill: #F8FAFC; }
|
||||
.term-badge { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; font-weight: 700; fill: #00F0FF; }
|
||||
</style>
|
||||
|
||||
<!-- Terminal Window Base -->
|
||||
<rect width="1200" height="130" rx="12" fill="url(#term-bg)" stroke="url(#term-border)" stroke-width="1.5"/>
|
||||
|
||||
<!-- Terminal Window Controls Header -->
|
||||
<g transform="translate(20, 16)">
|
||||
<circle cx="8" cy="8" r="5" fill="#EF4444"/>
|
||||
<circle cx="24" cy="8" r="5" fill="#F59E0B"/>
|
||||
<circle cx="40" cy="8" r="5" fill="#10B981"/>
|
||||
<text x="60" y="12" class="term-title">router@openwrt:~# one-liner installation & auto-migration</text>
|
||||
</g>
|
||||
|
||||
<!-- Separator Line -->
|
||||
<line x1="0" y1="36" x2="1200" y2="36" stroke="#1E293B" stroke-width="1"/>
|
||||
|
||||
<!-- Command Line Display -->
|
||||
<g transform="translate(30, 75)">
|
||||
<text x="0" y="0" class="term-prompt">root@router:~#</text>
|
||||
<text x="140" y="0" class="term-cmd">sh <(wget -O - https://raw.githubusercontent.com/Dushnilin/tachyon/main/install.sh)</text>
|
||||
<!-- Blinking Cursor Box -->
|
||||
<rect x="915" y="-14" width="8" height="16" fill="#00F0FF" class="term-cursor" filter="url(#cursor-glow)"/>
|
||||
</g>
|
||||
|
||||
<!-- Bottom Fast-Deploy Info -->
|
||||
<g transform="translate(30, 108)">
|
||||
<text x="0" y="0" class="term-title">⚡ Instant ucode compilation | Auto-migrates from Forkop / Podkop | Zero-reboot activation</text>
|
||||
</g>
|
||||
|
||||
<!-- Right Status Tag -->
|
||||
<g transform="translate(1010, 58)">
|
||||
<rect width="160" height="32" rx="6" fill="#0369A1" fill-opacity="0.2" stroke="#00F0FF" stroke-width="1"/>
|
||||
<text x="14" y="20" class="term-badge">ONE-CLICK DEPLOY</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
Reference in New Issue
Block a user