docs(readme): анимированные лазерные разделители разделов, ЭКГ-монитор AI Doctor и интерактивный терминал установки

This commit is contained in:
Dushnilin
2026-08-15 20:30:11 +03:00
parent 9280708363
commit 954596c26f
5 changed files with 330 additions and 30 deletions
+92
View File
@@ -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 &amp; 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

+56
View File
@@ -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

+74
View File
@@ -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 &amp; 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 &lt;(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