132 lines
4.7 KiB
Vue
132 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
|
|
</script>
|
|
|
|
<!-- RadarBackground.vue -->
|
|
<template>
|
|
<div class="radar-bg">
|
|
<svg class="radar-svg" viewBox="0 0 800 420"
|
|
preserveAspectRatio="xMidYMid slice"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<defs>
|
|
<radialGradient id="bgGlow" cx="50%" cy="50%" r="50%">
|
|
<stop offset="0%" stop-color="#38bdf8" stop-opacity="0.04"/>
|
|
<stop offset="100%" stop-color="#0a0f1c" stop-opacity="0"/>
|
|
</radialGradient>
|
|
<clipPath id="radarClip">
|
|
<circle cx="400" cy="210" r="208"/>
|
|
</clipPath>
|
|
</defs>
|
|
|
|
<!-- Ambient glow -->
|
|
<ellipse cx="400" cy="210" rx="320" ry="220" fill="url(#bgGlow)"/>
|
|
|
|
<!-- Rings -->
|
|
<circle class="ring" cx="400" cy="210" r="52"/>
|
|
<circle class="ring" cx="400" cy="210" r="104"/>
|
|
<circle class="ring" cx="400" cy="210" r="156"/>
|
|
<circle class="ring" cx="400" cy="210" r="208"/>
|
|
<circle cx="400" cy="210" r="208" fill="none"
|
|
stroke="rgba(56,189,248,0.25)" stroke-width="1"/>
|
|
|
|
<!-- Crosshairs -->
|
|
<line class="crosshair" x1="192" y1="210" x2="608" y2="210"/>
|
|
<line class="crosshair" x1="400" y1="2" x2="400" y2="418"/>
|
|
<line class="crosshair" x1="253" y1="63" x2="547" y2="357" transform="rotate(45,400,210)"/>
|
|
<line class="crosshair" x1="253" y1="63" x2="547" y2="357" transform="rotate(-45,400,210)"/>
|
|
|
|
<!-- Sweep trail + line -->
|
|
<g clip-path="url(#radarClip)">
|
|
<g class="trail">
|
|
<path d="M400,210 L400,2 A208,208 0 0,1 547,63 Z" fill="rgba(56,189,248,0.08)"/>
|
|
<path d="M400,210 L400,2 A208,208 0 0,1 493,42 Z" fill="rgba(56,189,248,0.10)"/>
|
|
<path d="M400,210 L400,2 A208,208 0 0,1 435,4 Z" fill="rgba(56,189,248,0.13)"/>
|
|
</g>
|
|
<g class="sweep">
|
|
<line x1="400" y1="210" x2="400" y2="3"
|
|
stroke="#38bdf8" stroke-width="1.5" stroke-opacity="0.9"/>
|
|
</g>
|
|
</g>
|
|
|
|
<!-- Blip glows -->
|
|
<g clip-path="url(#radarClip)">
|
|
<circle class="blip-glow" cx="470" cy="148" r="8"/>
|
|
<circle class="blip-glow" cx="340" cy="270" r="8"/>
|
|
<circle class="blip-glow" cx="510" cy="230" r="8"/>
|
|
<circle class="blip-glow" cx="378" cy="130" r="8"/>
|
|
<circle class="blip-glow" cx="430" cy="310" r="8"/>
|
|
<circle class="blip-glow" cx="290" cy="185" r="8"/>
|
|
</g>
|
|
|
|
<!-- Blips -->
|
|
<g clip-path="url(#radarClip)">
|
|
<circle class="blip" cx="470" cy="148" r="2.5"/>
|
|
<circle class="blip" cx="340" cy="270" r="2.5"/>
|
|
<circle class="blip" cx="510" cy="230" r="2.5"/>
|
|
<circle class="blip" cx="378" cy="130" r="2.5"/>
|
|
<circle class="blip" cx="430" cy="310" r="2.5"/>
|
|
<circle class="blip" cx="290" cy="185" r="2.5"/>
|
|
</g>
|
|
|
|
</svg>
|
|
|
|
<slot/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* In your component <style> or global CSS */
|
|
|
|
.radar-bg {
|
|
/* just a normal flow wrapper */
|
|
position: relative;
|
|
min-height: 100dvh;
|
|
background: var(--bg);
|
|
}
|
|
.radar-svg {
|
|
position: absolute;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity:0.1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.ring { fill: none; stroke: rgba(56,189,248,0.12); stroke-width: 1; }
|
|
.crosshair { stroke: rgba(56,189,248,0.1); stroke-width: 0.5; }
|
|
.range-label { font-size: 9px; fill: rgba(56,189,248,0.35); font-family: monospace; }
|
|
|
|
/* Sweep */
|
|
.sweep, .trail {
|
|
transform-origin: 400px 210px;
|
|
animation: radar-spin 10s linear infinite;
|
|
}
|
|
|
|
@keyframes radar-spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Blips */
|
|
.blip, .blip-glow {
|
|
animation: blip-fade 4s linear infinite;
|
|
}
|
|
|
|
.blip { fill: #38bdf8; }
|
|
.blip-glow { fill: rgba(56,189,248,0.2); }
|
|
|
|
@keyframes blip-fade {
|
|
0% { opacity: 0; }
|
|
2% { opacity: 1; }
|
|
60% { opacity: 0.5; }
|
|
100%{ opacity: 0; }
|
|
}
|
|
|
|
/* Stagger each blip so they don't all pulse together */
|
|
.blip:nth-child(2), .blip-glow:nth-child(2) { animation-delay: -1.1s; }
|
|
.blip:nth-child(3), .blip-glow:nth-child(3) { animation-delay: -2.3s; }
|
|
.blip:nth-child(4), .blip-glow:nth-child(4) { animation-delay: -0.5s; }
|
|
.blip:nth-child(5), .blip-glow:nth-child(5) { animation-delay: -3.1s; }
|
|
.blip:nth-child(6), .blip-glow:nth-child(6) { animation-delay: -1.8s; }
|
|
</style>
|