diff options
Diffstat (limited to 'frontend/public')
| -rw-r--r-- | frontend/public/mission-tactical.svg | 335 |
1 files changed, 335 insertions, 0 deletions
diff --git a/frontend/public/mission-tactical.svg b/frontend/public/mission-tactical.svg new file mode 100644 index 0000000..342af2a --- /dev/null +++ b/frontend/public/mission-tactical.svg @@ -0,0 +1,335 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" role="img" aria-label="Tactical observability mesh" + font-family="'JetBrains Mono', 'Inter', monospace"> + <defs> + <!-- Background gradient: deep dusk -> night --> + <radialGradient id="bgGlow" cx="50%" cy="55%" r="65%"> + <stop offset="0%" stop-color="#1a2548"/> + <stop offset="55%" stop-color="#0e1530"/> + <stop offset="100%" stop-color="#070a18"/> + </radialGradient> + <!-- Globe fill: very subtle inner depth --> + <radialGradient id="globeFill" cx="38%" cy="36%" r="65%"> + <stop offset="0%" stop-color="rgba(232,184,122,0.08)"/> + <stop offset="60%" stop-color="rgba(217,106,138,0.04)"/> + <stop offset="100%" stop-color="rgba(11,17,36,0)"/> + </radialGradient> + <!-- Soft glow for active nodes --> + <radialGradient id="nodeGlow"> + <stop offset="0%" stop-color="#e8b87a" stop-opacity="0.85"/> + <stop offset="60%" stop-color="#e8b87a" stop-opacity="0.10"/> + <stop offset="100%" stop-color="#e8b87a" stop-opacity="0"/> + </radialGradient> + <radialGradient id="nodeMag"> + <stop offset="0%" stop-color="#d96a8a" stop-opacity="0.95"/> + <stop offset="60%" stop-color="#d96a8a" stop-opacity="0.10"/> + <stop offset="100%" stop-color="#d96a8a" stop-opacity="0"/> + </radialGradient> + <!-- Scanline pattern --> + <pattern id="scan" width="2" height="3" patternUnits="userSpaceOnUse"> + <rect width="2" height="3" fill="rgba(0,0,0,0)"/> + <rect width="2" height="1" fill="rgba(240,234,223,0.025)"/> + </pattern> + <!-- Pulse animation for the central reticle --> + <filter id="softGlow" x="-50%" y="-50%" width="200%" height="200%"> + <feGaussianBlur stdDeviation="1.6" result="b"/> + <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge> + </filter> + </defs> + + <!-- Backdrop --> + <rect width="600" height="600" fill="url(#bgGlow)"/> + <rect width="600" height="600" fill="url(#scan)"/> + + <!-- Outer hairline frame + corner brackets (matches Heisei UI language) --> + <g stroke="rgba(240,234,223,0.55)" fill="none" stroke-width="1"> + <!-- corner brackets, 18px legs --> + <path d="M14,14 L14,32 M14,14 L32,14"/> + <path d="M586,14 L568,14 M586,14 L586,32"/> + <path d="M14,586 L14,568 M14,586 L32,586"/> + <path d="M586,586 L568,586 M586,586 L586,568"/> + </g> + <rect x="14" y="14" width="572" height="572" fill="none" + stroke="rgba(240,234,223,0.10)" stroke-width="0.5"/> + + <!-- Tactical header strip --> + <g font-size="9" letter-spacing="2.5" fill="rgba(240,234,223,0.55)"> + <text x="32" y="40">SORYU // OBSERVABILITY MESH</text> + <text x="568" y="40" text-anchor="end" fill="#e8b87a">REC <tspan fill="#d96a8a">●</tspan> + <animate attributeName="opacity" values="1;0.4;1" dur="1.4s" repeatCount="indefinite"/> + </text> + </g> + <g font-size="8" letter-spacing="1.8" fill="rgba(240,234,223,0.40)"> + <text x="32" y="54">35.6764°N · 139.6500°E</text> + <text x="568" y="54" text-anchor="end">v1.0.0 / LIVE</text> + </g> + + <!-- Faint grid behind the globe --> + <g stroke="rgba(154,215,224,0.08)" stroke-width="0.5" fill="none"> + <line x1="60" y1="300" x2="540" y2="300"/> + <line x1="300" y1="60" x2="300" y2="540"/> + </g> + + <!-- ============ GLOBE ============ --> + <!-- Centered at (300,320), radius 200 --> + <g transform="translate(300 320)"> + <!-- Filled disc --> + <circle r="200" fill="url(#globeFill)"/> + <!-- Equator + main rings (orthographic projection) --> + <g fill="none" stroke="rgba(232,184,122,0.55)" stroke-width="1.1"> + <circle r="200"/> + </g> + <!-- Latitude ellipses (front-only effect via stroke-dasharray on back) --> + <g fill="none" stroke="rgba(232,184,122,0.42)" stroke-width="0.7"> + <ellipse rx="200" ry="170"/> + <ellipse rx="200" ry="120"/> + <ellipse rx="200" ry="60"/> + <ellipse rx="200" ry="0.4"/> <!-- equator line emphasis --> + </g> + <!-- Longitude ellipses (rotated) --> + <g fill="none" stroke="rgba(232,184,122,0.42)" stroke-width="0.7"> + <ellipse rx="60" ry="200"/> + <ellipse rx="120" ry="200"/> + <ellipse rx="170" ry="200"/> + </g> + <!-- Tilted accent rings for depth --> + <g fill="none" stroke="rgba(217,106,138,0.55)" stroke-width="0.9" + transform="rotate(-22)"> + <ellipse rx="200" ry="80"/> + </g> + <g fill="none" stroke="rgba(154,215,224,0.45)" stroke-width="0.7" + transform="rotate(28)"> + <ellipse rx="200" ry="40"/> + </g> + + <!-- ============ NODES + MESH LINKS ============ --> + <!-- Coordinates roughly evoke continents on a tilted globe --> + <g> + <!-- Mesh links: each path has an id so animated pulses can ride along it. + The arc itself shows a flowing dash pattern, and a glowing dot + travels along it via <animateMotion>. --> + <g fill="none" stroke-linecap="round"> + <!-- arc 1 (amber) NODE-A → TYO --> + <path id="arc1" d="M -120,-70 Q -40,-180 60,-90" + stroke="rgba(232,184,122,0.55)" stroke-width="0.9" + stroke-dasharray="2 6" stroke-dashoffset="0" filter="url(#softGlow)"> + <animate attributeName="stroke-dashoffset" from="0" to="-32" dur="1.6s" repeatCount="indefinite"/> + <animate attributeName="opacity" values="0.65;1;0.65" dur="2.6s" repeatCount="indefinite"/> + </path> + <!-- arc 2 (amber) TYO → SE --> + <path id="arc2" d="M 60,-90 Q 130,-30 150, 60" + stroke="rgba(232,184,122,0.55)" stroke-width="0.9" + stroke-dasharray="2 6" filter="url(#softGlow)"> + <animate attributeName="stroke-dashoffset" from="0" to="-32" dur="1.9s" repeatCount="indefinite"/> + <animate attributeName="opacity" values="0.65;1;0.65" dur="2.9s" repeatCount="indefinite"/> + </path> + <!-- arc 3 (amber) SE → SW --> + <path id="arc3" d="M 150, 60 Q 60,150 -30,130" + stroke="rgba(232,184,122,0.55)" stroke-width="0.9" + stroke-dasharray="2 6" filter="url(#softGlow)"> + <animate attributeName="stroke-dashoffset" from="0" to="-32" dur="2.1s" repeatCount="indefinite"/> + <animate attributeName="opacity" values="0.6;0.95;0.6" dur="3.1s" repeatCount="indefinite"/> + </path> + <!-- arc 4 (amber) SW → NW (closes ring) --> + <path id="arc4" d="M -30,130 Q -120,80 -120,-70" + stroke="rgba(232,184,122,0.55)" stroke-width="0.9" + stroke-dasharray="2 6" filter="url(#softGlow)"> + <animate attributeName="stroke-dashoffset" from="0" to="-32" dur="1.7s" repeatCount="indefinite"/> + <animate attributeName="opacity" values="0.6;0.9;0.6" dur="2.7s" repeatCount="indefinite"/> + </path> + <!-- arc 5 (magenta) NW → SE diagonal --> + <path id="arc5" d="M -120,-70 Q 0,-30 150, 60" + stroke="rgba(217,106,138,0.55)" stroke-width="0.9" + stroke-dasharray="3 7" filter="url(#softGlow)"> + <animate attributeName="stroke-dashoffset" from="0" to="-40" dur="2.4s" repeatCount="indefinite"/> + <animate attributeName="opacity" values="0.55;0.95;0.55" dur="3.4s" repeatCount="indefinite"/> + </path> + <!-- arc 6 (magenta) TYO → SW diagonal --> + <path id="arc6" d="M 60,-90 Q -10, 60 -30,130" + stroke="rgba(217,106,138,0.45)" stroke-width="0.8" + stroke-dasharray="3 7" filter="url(#softGlow)"> + <animate attributeName="stroke-dashoffset" from="0" to="-40" dur="2.8s" repeatCount="indefinite"/> + <animate attributeName="opacity" values="0.5;0.9;0.5" dur="3.8s" repeatCount="indefinite"/> + </path> + </g> + + <!-- Traveling data packets (glowing dots ride each arc). + Each packet is a tiny circle with <animateMotion> referencing + the arc path via <mpath>. Stagger begin times so packets feel asynchronous. --> + <g> + <!-- amber packets --> + <circle r="2.4" fill="#e8b87a" filter="url(#softGlow)"> + <animateMotion dur="2.8s" repeatCount="indefinite" rotate="auto" begin="0s"> + <mpath href="#arc1"/> + </animateMotion> + <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.8s" repeatCount="indefinite"/> + </circle> + <circle r="2.0" fill="#e8b87a" filter="url(#softGlow)"> + <animateMotion dur="2.8s" repeatCount="indefinite" rotate="auto" begin="1.2s"> + <mpath href="#arc1"/> + </animateMotion> + <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.8s" repeatCount="indefinite" begin="1.2s"/> + </circle> + + <circle r="2.4" fill="#e8b87a" filter="url(#softGlow)"> + <animateMotion dur="3.2s" repeatCount="indefinite" rotate="auto" begin="0.4s"> + <mpath href="#arc2"/> + </animateMotion> + <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="3.2s" repeatCount="indefinite" begin="0.4s"/> + </circle> + + <circle r="2.4" fill="#e8b87a" filter="url(#softGlow)"> + <animateMotion dur="3.0s" repeatCount="indefinite" rotate="auto" begin="0.9s"> + <mpath href="#arc3"/> + </animateMotion> + <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="3.0s" repeatCount="indefinite" begin="0.9s"/> + </circle> + + <circle r="2.4" fill="#e8b87a" filter="url(#softGlow)"> + <animateMotion dur="2.6s" repeatCount="indefinite" rotate="auto" begin="1.6s"> + <mpath href="#arc4"/> + </animateMotion> + <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.1;0.9;1" dur="2.6s" repeatCount="indefinite" begin="1.6s"/> + </circle> + + <!-- magenta packets (longer arcs, brighter core) --> + <circle r="2.6" fill="#d96a8a" filter="url(#softGlow)"> + <animateMotion dur="3.6s" repeatCount="indefinite" rotate="auto" begin="0.2s"> + <mpath href="#arc5"/> + </animateMotion> + <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="3.6s" repeatCount="indefinite" begin="0.2s"/> + </circle> + <circle r="2.0" fill="#d96a8a" filter="url(#softGlow)"> + <animateMotion dur="3.6s" repeatCount="indefinite" rotate="auto" begin="2.0s"> + <mpath href="#arc5"/> + </animateMotion> + <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="3.6s" repeatCount="indefinite" begin="2.0s"/> + </circle> + + <circle r="2.4" fill="#d96a8a" filter="url(#softGlow)"> + <animateMotion dur="4.0s" repeatCount="indefinite" rotate="auto" begin="1.0s"> + <mpath href="#arc6"/> + </animateMotion> + <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.08;0.92;1" dur="4.0s" repeatCount="indefinite" begin="1.0s"/> + </circle> + </g> + + <!-- Active nodes (amber primary) --> + <g> + <!-- Tokyo (origin / pulse) --> + <circle cx="60" cy="-90" r="14" fill="url(#nodeGlow)"/> + <circle cx="60" cy="-90" r="3" fill="#e8b87a"/> + <circle cx="60" cy="-90" r="3" fill="none" stroke="#e8b87a" stroke-width="1"> + <animate attributeName="r" values="3;18;3" dur="3s" repeatCount="indefinite"/> + <animate attributeName="opacity" values="1;0;1" dur="3s" repeatCount="indefinite"/> + </circle> + + <!-- Other nodes — subtle independent pulses --> + <circle cx="-120" cy="-70" r="10" fill="url(#nodeGlow)"/> + <circle cx="-120" cy="-70" r="2.4" fill="#e8b87a"> + <animate attributeName="opacity" values="0.7;1;0.7" dur="2.2s" repeatCount="indefinite"/> + </circle> + <circle cx="-120" cy="-70" r="2.4" fill="none" stroke="#e8b87a" stroke-width="0.8"> + <animate attributeName="r" values="2.4;13;2.4" dur="3.4s" repeatCount="indefinite" begin="0.7s"/> + <animate attributeName="opacity" values="0.9;0;0.9" dur="3.4s" repeatCount="indefinite" begin="0.7s"/> + </circle> + + <circle cx="150" cy="60" r="12" fill="url(#nodeMag)"/> + <circle cx="150" cy="60" r="2.6" fill="#d96a8a"> + <animate attributeName="opacity" values="0.7;1;0.7" dur="2.8s" repeatCount="indefinite" begin="0.4s"/> + </circle> + <circle cx="150" cy="60" r="2.6" fill="none" stroke="#d96a8a" stroke-width="0.8"> + <animate attributeName="r" values="2.6;14;2.6" dur="3.6s" repeatCount="indefinite" begin="1.4s"/> + <animate attributeName="opacity" values="0.9;0;0.9" dur="3.6s" repeatCount="indefinite" begin="1.4s"/> + </circle> + + <circle cx="-30" cy="130" r="9" fill="url(#nodeGlow)"/> + <circle cx="-30" cy="130" r="2.2" fill="#e8b87a"> + <animate attributeName="opacity" values="0.7;1;0.7" dur="2.4s" repeatCount="indefinite" begin="1.1s"/> + </circle> + + <!-- Smaller relays — gentle blink so they feel alive --> + <g fill="#9ad7e0"> + <circle cx="-160" cy="40" r="1.6"> + <animate attributeName="opacity" values="0.4;1;0.4" dur="2.0s" repeatCount="indefinite" begin="0.0s"/> + </circle> + <circle cx="20" cy="-160" r="1.6"> + <animate attributeName="opacity" values="0.4;1;0.4" dur="2.4s" repeatCount="indefinite" begin="0.5s"/> + </circle> + <circle cx="170" cy="-30" r="1.6"> + <animate attributeName="opacity" values="0.4;1;0.4" dur="2.8s" repeatCount="indefinite" begin="1.0s"/> + </circle> + <circle cx="-80" cy="170" r="1.6"> + <animate attributeName="opacity" values="0.4;1;0.4" dur="2.2s" repeatCount="indefinite" begin="1.5s"/> + </circle> + <circle cx="100" cy="160" r="1.6"> + <animate attributeName="opacity" values="0.4;1;0.4" dur="2.6s" repeatCount="indefinite" begin="2.0s"/> + </circle> + </g> + </g> + + <!-- Node label (Tokyo origin) --> + <g font-size="7.5" letter-spacing="1.5" fill="rgba(240,234,223,0.78)"> + <line x1="60" y1="-90" x2="120" y2="-130" stroke="rgba(232,184,122,0.55)" stroke-width="0.6"/> + <text x="124" y="-127" fill="#e8b87a">NODE-001 · TYO</text> + <text x="124" y="-117">42ms · 99.998%</text> + </g> + </g> + + <!-- Concentric reticle around the globe --> + <g fill="none" stroke="rgba(232,184,122,0.30)" stroke-width="0.6" stroke-dasharray="2 4"> + <circle r="225"/> + </g> + <g fill="none" stroke="rgba(232,184,122,0.18)" stroke-width="0.5"> + <circle r="245"/> + </g> + </g> + + <!-- ============ HUD CROSSHAIR (centered) ============ --> + <g stroke="rgba(232,184,122,0.55)" stroke-width="0.8" fill="none"> + <line x1="300" y1="100" x2="300" y2="130"/> + <line x1="300" y1="510" x2="300" y2="540"/> + <line x1="80" y1="320" x2="110" y2="320"/> + <line x1="490" y1="320" x2="520" y2="320"/> + </g> + + <!-- ============ Bottom telemetry strip ============ --> + <g transform="translate(0 555)"> + <!-- Mini bar chart --> + <g fill="#9ad7e0" opacity="0.7"> + <rect x="32" y="0" width="3" height="14"/> + <rect x="38" y="4" width="3" height="10"/> + <rect x="44" y="-2" width="3" height="16"/> + <rect x="50" y="2" width="3" height="12"/> + <rect x="56" y="-4" width="3" height="18"/> + <rect x="62" y="0" width="3" height="14"/> + <rect x="68" y="-3" width="3" height="17"/> + <rect x="74" y="1" width="3" height="13"/> + <rect x="80" y="-5" width="3" height="19"/> + <rect x="86" y="-1" width="3" height="15"/> + <rect x="92" y="3" width="3" height="11"/> + <rect x="98" y="-6" width="3" height="20"/> + <rect x="104" y="-2" width="3" height="16"/> + <rect x="110" y="0" width="3" height="14"/> + </g> + <text x="32" y="32" font-size="8" letter-spacing="1.6" fill="rgba(240,234,223,0.45)">TELEMETRY · 1m</text> + + <!-- Stat blocks --> + <g font-size="9" letter-spacing="1.6" fill="rgba(240,234,223,0.7)"> + <text x="240" y="6" fill="rgba(154,215,224,0.85)">VELOCITY</text> + <text x="240" y="22" fill="#f0eadf" font-size="14" letter-spacing="0.5">603 km/h</text> + + <text x="380" y="6" fill="rgba(154,215,224,0.85)">ENERGY</text> + <text x="380" y="22" fill="#f0eadf" font-size="14" letter-spacing="0.5">32.0 MJ</text> + + <text x="500" y="6" fill="rgba(154,215,224,0.85)">UPTIME</text> + <text x="500" y="22" fill="#e8b87a" font-size="14" letter-spacing="0.5">99.998%</text> + </g> + </g> + + <!-- Subtle vertical kanji watermark on the right --> + <g font-family="'Noto Serif JP', serif" font-size="11" letter-spacing="6" + fill="rgba(240,234,223,0.18)" writing-mode="tb"> + <text x="572" y="120">観測</text> + </g> +</svg> |
