Mirror/intercept
1
0
Fork 0
mirror of https://github.com/smittix/intercept.git synced 2026-04-24 06:40:00 -07:00
Code Issues Packages Projects Releases Wiki Activity

feat: Add pulsating ring effect for tracked aircraft/vessels

Browse Source 
Makes it much clearer which vehicle is being tracked on the map by adding
two animated concentric rings that pulse outward from the selected marker.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Smittix
2026-01-29 09:07:47 +00:00
parent 9f7dc8f995
commit c67fa39e30
4 changed files with 104 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
static/css/ais_dashboard.css
View File

@@ -759,6 +759,55 @@ body {
filter: drop-shadow(0 0 8px rgba(255,255,255,0.8)) !important;
}
/* ============================================
TRACKED VESSEL PULSATING RING
============================================ */
.vessel-marker.selected {
position: relative;
}
.tracking-ring {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 2px solid var(--accent-cyan);
border-radius: 50%;
animation: tracking-pulse 1.5s ease-out infinite;
pointer-events: none;
}
.tracking-ring-inner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 28px;
height: 28px;
border: 1px solid var(--accent-cyan);
border-radius: 50%;
animation: tracking-pulse 1.5s ease-out infinite 0.3s;
pointer-events: none;
}
@keyframes tracking-pulse {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
border-color: rgba(74, 158, 255, 1);
}
50% {
opacity: 0.6;
}
100% {
transform: translate(-50%, -50%) scale(1.8);
opacity: 0;
border-color: rgba(74, 158, 255, 0);
}
}
/* Range rings */
.range-ring {
fill: none;