Added Charts

2026-04-11 17:30:16 +10:00
parent 7a07616f03
commit e83fd3bdca
24 changed files with 2915 additions and 39 deletions
@@ -0,0 +1,60 @@
+<template>
+    <AirportToolTip :airport="airport">
+        <div class="airport-marker arrival">
+            <div class="airport-marker__dot" />
+            <div class="airport-marker__ring" />
+        </div>
+    </AirportToolTip>
+</template>
+
+<script setup lang="ts">
+import type {Airport} from "@/Types/types";
+import AirportToolTip from "@/Components/FlightsGoneBy/AirportToolTip.vue";
+
+defineProps<{
+    airport: Airport
+}>()
+</script>
+
+<style>
+.airport-marker {
+    position: relative;
+    width: 16px;
+    height: 16px;
+}
+
+/* ── arrival ────────────────────────────────────────────────────────────────── */
+.airport-marker.arrival .airport-marker__dot {
+    position: absolute;
+    inset: 4px;
+    background: #4da6ff;
+    border-radius: 50%;
+    box-shadow: 0 0 6px rgba(77, 166, 255, 0.8);
+}
+.airport-marker.arrival .airport-marker__ring {
+    position: absolute;
+    inset: 0;
+    border: 1px solid rgba(77, 166, 255, 0.5);
+    border-radius: 50%;
+    animation: pm-pulse 2.2s ease-out infinite;
+}
+
+/* ── departure ──────────────────────────────────────────────────────────────── */
+.airport-marker.departure {
+    width: 10px;
+    height: 10px;
+}
+.airport-marker.departure .airport-marker__dot {
+    position: absolute;
+    inset: 0;
+    background: #ff9f4a;
+    border-radius: 50%;
+    border: 2px solid rgba(255, 159, 74, 0.4);
+    box-shadow: 0 0 8px rgba(255, 159, 74, 0.6);
+}
+
+@keyframes pm-pulse {
+    0%   { transform: scale(1);   opacity: 0.7; }
+    100% { transform: scale(2.5); opacity: 0;   }
+}
+</style>