dredgy/FlightsAPI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Converted to TS, add import

Browse Source
This commit is contained in:
josh
2026-04-03 18:14:42 +10:00
parent 89135a554a
commit 063a393168
23 changed files with 644 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Components/FlightsGoneBy/GlassBox.vue
+22
View File
@@ -0,0 +1,22 @@
<script setup lang="ts">
</script>
<template>
<div class="glass-box glass glass-border">
<slot />
</div>
</template>
<style scoped>
.glass-box {
width: 50%;
height: 50dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap:1em;
padding: 2em;
}
</style>
resources/js/Components/FlightsGoneBy/MainFooter.vue
+20
View File
@@ -0,0 +1,20 @@
<script setup lang="ts">
</script>
<template>
<footer class="glass">
&copy; FlightsGoneBy. All rights reserved.
</footer>
</template>
<style scoped>
/* Footer = ~5dvh */
footer {
flex: 0 0 5dvh;
min-height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
</style>
resources/js/Components/FlightsGoneBy/MainHeader.vue
+54
View File
@@ -0,0 +1,54 @@
<script setup lang="ts">
import {Link} from "@inertiajs/vue3";
import { usePage } from '@inertiajs/vue3'
import type { SharedProps } from '@/Types/types'
const props = usePage<SharedProps>().props
</script>
<template>
<header class="glass">
<h1>FlightsGoneBy</h1>
<nav>
<Link v-if="props.canLogin && !props.auth.user" :href="route('login')">Log In</Link>
<Link v-if="props.canRegister && !props.auth.user" :href="route('register')">Register</Link>
<Link v-if="props.auth.user">Welcome {{props.auth.user.name}}</Link>
</nav>
</header>
</template>
<style scoped>
header {
display:flex;
align-content: center;
justify-content: center;
flex: 0 0 5dvh;
min-height: 40px; /* prevents it getting too tiny */
align-items: center;
padding: 0 1rem;
}
header h1 {
flex-basis: 25%;
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.08em;
color: var(--accent);
cursor: pointer;
}
header nav{
flex-basis: 75%;
display: flex;
align-content: center;
justify-content: flex-end;
padding: 0 1em;
gap: 1rem;
}
header nav a {
height: 100%;
}
</style>
resources/js/Components/FlightsGoneBy/Radar.vue
+132
View File
@@ -0,0 +1,132 @@
<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 {
position: fixed;
inset: 0;
background: var(--bg);
overflow: hidden;
z-index: 0;
}
.radar-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity:0.1
}
.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>