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

2026-08-15 20:30:11 +03:00
parent 9280708363
commit 954596c26f
5 changed files with 330 additions and 30 deletions
@@ -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>