Save user flights

database/migrations/2026_04_05_092130_fix_timezones.php

@@ -0,0 +1,51 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    private array $timezones = [
+        176   => 'Antarctica/Macquarie',
+        1012  => 'America/Iqaluit',
+        1129  => 'America/Iqaluit',
+        1153  => 'America/Iqaluit',
+        9241  => 'Asia/Anadyr',
+        9245  => 'Asia/Anadyr',
+        9364  => 'Europe/Moscow',
+        9365  => 'Asia/Krasnoyarsk',
+        11018 => 'Asia/Ulaanbaatar',
+        11019 => 'Asia/Ulaanbaatar',
+    ];
+
+    public function up(): void
+    {
+        // 1. Populate timezones for the specific airports that were missing them
+        foreach ($this->timezones as $id => $timezone) {
+            DB::table('airports')
+                ->where('id', $id)
+                ->whereNull('timezone')
+                ->update(['timezone' => $timezone]);
+        }
+
+        // 2. Make the timezone column non-nullable
+        Schema::table('airports', function (Blueprint $table) {
+            $table->string('timezone')->nullable(false)->change();
+        });
+    }
+
+    public function down(): void
+    {
+        // 1. Revert the column back to nullable first
+        Schema::table('airports', function (Blueprint $table) {
+            $table->string('timezone')->nullable()->change();
+        });
+
+        // 2. Null out only the rows we populated
+        DB::table('airports')
+            ->whereIn('id', array_keys($this->timezones))
+            ->update(['timezone' => null]);
+    }
+};

resources/css/app.css

@@ -13,6 +13,21 @@
 
 }
 
+a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a:visited {
+    color: var(--accent);
+}
+
+a:hover {
+    text-decoration: underline;
+    text-decoration-color: rgba(56, 189, 248, 0.4);
+    text-underline-offset: 3px;
+}
+
 .glass {
     background: rgba(17, 24, 39, 0.2);        /* --surface at 60% */
     -webkit-backdrop-filter: blur(12px) saturate(180%);

resources/js/Components/FlightsGoneBy/AppLink.vue

@@ -0,0 +1,33 @@
+<!-- AppLink.vue -->
+<script setup lang="ts">
+import { Link } from "@inertiajs/vue3";
+
+defineProps<{
+    href: string;
+}>();
+</script>
+
+<template>
+    <Link :href="href" class="app-link">
+        <slot />
+    </Link>
+</template>
+
+<style scoped>
+.app-link {
+    color: var(--accent);
+    text-decoration: none;
+    transition: color 0.15s ease, text-decoration-color 0.15s ease;
+    text-underline-offset: 3px;
+}
+
+.app-link:visited {
+    color: var(--accent);
+}
+
+.app-link:hover {
+    color: var(--accent-soft);
+    text-decoration: underline;
+    text-decoration-color: rgba(56, 189, 248, 0.4);
+}
+</style>

resources/js/Components/FlightsGoneBy/GlassBox.vue

@@ -15,8 +15,7 @@ defineProps<{
 
 <style scoped>
 .glass-box {
-    width: 50%;
+    width: clamp(280px, 100%, 700px);
-    min-height: 50dvh;
     gap: 1em;
     padding: 2em;
 }
@@ -32,4 +31,11 @@ p {
     opacity: 0.7;
     margin-bottom: 1rem;
 }
+
+@media (max-width: 600px) {
+    .glass-box {
+        padding: 1.25em;
+        min-height: unset;
+    }
+}
 </style>

resources/js/Components/FlightsGoneBy/MainHeader.vue

@@ -1,54 +1,170 @@
 <script setup lang="ts">
-
 import { Link } from "@inertiajs/vue3";
 import { usePage } from '@inertiajs/vue3'
 import type { SharedProps } from '@/Types/types'
+import { ref } from 'vue'
 
 const props = usePage<SharedProps>().props
-
+const menuOpen = ref(false)
 </script>
 
 <template>
     <header class="glass">
-        <h1>FlightsGoneBy</h1>
+        <Link href="/" class="brand">FlightsGoneBy</Link>
-        <nav>
+
-            <Link v-if="!props.auth.user" :href="route('login')">Log In</Link>
+        <!-- Desktop nav -->
-            <Link v-if="!props.auth.user" :href="route('register')">Register</Link>
+        <nav class="nav-desktop">
-            <Link v-if="props.auth.user">Welcome {{props.auth.user.name}}</Link>
+            <template v-if="!props.auth.user">
+                <Link :href="route('login')" class="nav-link">Log In</Link>
+                <Link :href="route('register')" class="nav-link nav-link--highlight">Register</Link>
+            </template>
+            <span v-else class="nav-link nav-link--greeting">Welcome, {{ props.auth.user.name }}</span>
         </nav>
+
+        <!-- Hamburger (mobile only) -->
+        <button class="hamburger" :class="{ open: menuOpen }" @click="menuOpen = !menuOpen" aria-label="Toggle menu">
+            <span /><span /><span />
+        </button>
+
+        <!-- Mobile drawer -->
+        <Transition name="slide">
+            <nav v-if="menuOpen" class="nav-mobile" @click="menuOpen = false">
+                <template v-if="!props.auth.user">
+                    <Link :href="route('login')" class="nav-link">Log In</Link>
+                    <Link :href="route('register')" class="nav-link nav-link--highlight">Register</Link>
+                </template>
+                <span v-else class="nav-link nav-link--greeting">Welcome, {{ props.auth.user.name }}</span>
+            </nav>
+        </Transition>
     </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;
+    flex: 0 0 5dvh;
+    min-height: 48px;
+    padding: 0 1.25rem;
+    position: relative;
+    z-index: 10;
 }
 
-header h1 {
+.brand {
-    flex-basis: 25%;
+    margin-right: auto;
-    margin: 0;
+    font-size: 1.25rem;
-    font-size: 1.5rem;
+    font-weight: 700;
     letter-spacing: 0.08em;
     color: var(--accent);
+    text-decoration: none;
+}
+
+/* Shared nav link base */
+.nav-link {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.3em 0.75em;
+    font-size: 0.875rem;
+    font-weight: 500;
+    letter-spacing: 0.04em;
+    text-decoration: none;
+    color: var(--text);
+    border-radius: 4px;
+    transition: color 0.15s ease, background 0.15s ease;
+}
+
+.nav-link:visited {
+    color: var(--text);
+}
+
+.nav-link:hover {
+    color: var(--accent);
+    background: rgba(56, 189, 248, 0.07);
+}
+
+/* Highlighted CTA-style link */
+.nav-link--highlight {
+    border: 1px solid rgba(56, 189, 248, 0.35);
+    color: var(--accent);
+}
+
+.nav-link--highlight:visited {
+    color: var(--accent);
+}
+
+.nav-link--highlight:hover {
+    background: rgba(56, 189, 248, 0.12);
+}
+
+.nav-link--greeting {
+    opacity: 0.7;
+    font-size: 0.85rem;
+    cursor: default;
+}
+
+/* Desktop nav */
+.nav-desktop {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+/* Hamburger */
+.hamburger {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    width: 36px;
+    height: 36px;
+    padding: 6px;
+    background: none;
+    border: none;
     cursor: pointer;
 }
 
-header nav{
+.hamburger span {
-    flex-basis: 75%;
+    display: block;
-    display: flex;
+    width: 100%;
-    align-content: center;
+    height: 1.5px;
-    justify-content: flex-end;
+    background: var(--text);
-    padding: 0 1em;
+    border-radius: 2px;
-    gap: 1rem;
+    transition: transform 0.2s ease, opacity 0.2s ease;
+    transform-origin: center;
 }
 
-header nav a {
+.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
-    height: 100%;
+.hamburger.open span:nth-child(2) { opacity: 0; }
+.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
+
+/* Mobile nav drawer */
+.nav-mobile {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    padding: 0.75rem 1rem;
+    background: var(--bg);
+    border-bottom: 1px solid rgba(56, 189, 248, 0.1);
+    z-index: 20;
+}
+
+.slide-enter-from,
+.slide-leave-to {
+    opacity: 0;
+    transform: translateY(-6px);
+}
+
+.slide-enter-active,
+.slide-leave-active {
+    transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+@media (max-width: 600px) {
+    .nav-desktop { display: none; }
+    .hamburger { display: flex; }
 }
 </style>

resources/js/Components/FlightsGoneBy/Radar.vue

@@ -78,13 +78,11 @@
 /* In your component <style> or global CSS */
 
 .radar-bg {
-    position: fixed;
+    /* just a normal flow wrapper */
-    inset: 0;
+    position: relative;
+    min-height: 100dvh;
     background: var(--bg);
-    overflow: hidden;
-    z-index: 0;
 }
-
 .radar-svg {
     position: absolute;
     inset: 0;

resources/js/Dockerfile

@@ -0,0 +1,4 @@
+FROM ubuntu:latest
+LABEL authors="josh"
+
+ENTRYPOINT ["top", "-b"]

resources/js/Layouts/MainLayout.vue

@@ -16,13 +16,13 @@ router.on('success', () => {
 <template>
     <Radar>
         <div class="layoutContainer">
-            <MainHeader />
+            <MainHeader :key="transitionKey" />
             <Transition name="fade" mode="out-in">
                 <main id="pageContainer" :key="transitionKey">
                     <slot />
                 </main>
             </Transition>
-            <MainFooter />
+            <MainFooter :key="transitionKey" />
         </div>
     </Radar>
 </template>
@@ -34,11 +34,17 @@ router.on('success', () => {
     min-height: 100dvh;
     background: var(--bg);
     color: var(--text);
+    overflow-y: auto;
+}
+
+header,
+footer {
+    flex: 0 0 5dvh;
+    min-height: 3rem;
 }
 
 main {
-    flex: 1 0 90dvh;
+    flex: 1 1 auto;
-    min-height: 0;
     padding: 1rem;
     background: transparent;
     display: flex;
@@ -47,16 +53,8 @@ main {
     align-items: center;
 }
 
-
 .fade-enter-from,
-.fade-leave-to {
+.fade-leave-to { opacity: 0; }
-    opacity: 0;
-    transform: translateY(10px);
-}
-
 .fade-enter-active,
-.fade-leave-active {
+.fade-leave-active { transition: opacity 0.2s ease; }
-    transition: opacity 0.3s ease, transform 0.3s ease;
-}
-
 </style>

resources/js/app.ts

@@ -9,7 +9,7 @@ import vuetify from './plugins/vuetify';
 import '@mdi/font/css/materialdesignicons.css'
 import 'flag-icons/css/flag-icons.min.css'
 
-const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+const appName = document.querySelector('meta[name="app-name"]')?.getAttribute('content') || 'Laravel';
 
 createInertiaApp({
     title: (title) => `${title} | ${appName}`,

resources/views/app.blade.php

@@ -4,6 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="csrf-token" content="{{ csrf_token() }}">
+        <meta name="app-name" content="{{ config('app.name') }}">
         <title inertia>{{ config('app.name', 'Laravel') }}</title>
 
         <!-- Fonts -->