commit fefec98284ca2644da3070958323513df2448504 · knotbin.com/airport

fresh.gen.ts

···

       11
       11
        
       import * as $index from "./routes/index.tsx";

     

       12
       12
        
       import * as $login_callback from "./routes/login/callback.tsx";

     

       13
       13
        
       import * as $login_index from "./routes/login/index.tsx";

     

       14
       14
       +
       import * as $AirportSign from "./islands/AirportSign.tsx";

     

       14
       15
        
       import * as $Counter from "./islands/Counter.tsx";

     

       15
       16
        
       import * as $HandleInput from "./islands/HandleInput.tsx";

     

       16
       17
        
       import * as $Header from "./islands/Header.tsx";

     

       17
       18
        
       import * as $OAuthCallback from "./islands/OAuthCallback.tsx";

     

       19
       19
       +
       import * as $Ticket from "./islands/Ticket.tsx";

     

       18
       20
        
       import type { Manifest } from "$fresh/server.ts";

     

       19
       21
        
       

     

       20
       22
        
       const manifest = {

     
···

       30
       32
        
           "./routes/login/index.tsx": $login_index,

     

       31
       33
        
         },

     

       32
       34
        
         islands: {

     

       35
       35
       +
           "./islands/AirportSign.tsx": $AirportSign,

     

       33
       36
        
           "./islands/Counter.tsx": $Counter,

     

       34
       37
        
           "./islands/HandleInput.tsx": $HandleInput,

     

       35
       38
        
           "./islands/Header.tsx": $Header,

     

       36
       39
        
           "./islands/OAuthCallback.tsx": $OAuthCallback,

     

       40
       40
       +
           "./islands/Ticket.tsx": $Ticket,

     

       37
       41
        
         },

     

       38
       42
        
         baseUrl: import.meta.url,

     

       39
       43
        
       } satisfies Manifest;

+52

islands/AirportSign.tsx

···

       1
       1
       +
       export default function AirportSign() {

     

       2
       2
       +
         return (

     

       3
       3
       +
           <div class="relative inline-block mb-12">

     

       4
       4
       +
             {/* Left Pole */}

     

       5
       5
       +
             <div class="absolute left-8 -top-24 w-4 h-24 bg-gradient-to-r from-slate-800 via-slate-600 to-slate-800 rounded-t-lg"></div>

     

       6
       6
       +
             {/* Right Pole */}

     

       7
       7
       +
             <div class="absolute right-8 -top-24 w-4 h-24 bg-gradient-to-r from-slate-800 via-slate-600 to-slate-800 rounded-t-lg"></div>

     

       8
       8
       +
             {/* Display Board */}

     

       9
       9
       +
             <div class="relative bg-gradient-to-b from-slate-800 to-slate-900 p-1 rounded-lg shadow-[0_2px_10px_rgba(0,0,0,0.3)]">

     

       10
       10
       +
               {/* Metallic Frame */}

     

       11
       11
       +
               <div class="bg-gradient-to-b from-slate-600 via-slate-700 to-slate-800 p-2 rounded-[6px]">

     

       12
       12
       +
                 {/* Inner Frame */}

     

       13
       13
       +
                 <div class="bg-black px-4 py-0.5 rounded-[4px] relative overflow-hidden">

     

       14
       14
       +
                   {/* Screen Background with Effects */}

     

       15
       15
       +
                   <div class="absolute inset-0 bg-[#0a0a2f]">

     

       16
       16
       +
                     {/* Scan lines */}

     

       17
       17
       +
                     <div class="absolute inset-0 bg-[linear-gradient(transparent_0%,_rgba(255,255,255,0.02)_50%,_transparent_100%)] bg-[length:100%_4px]"></div>

     

       18
       18
       +
                     {/* Screen noise */}

     

       19
       19
       +
                     <div class="absolute inset-0 opacity-[0.03] [background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMDAiIGhlaWdodD0iMzAwIj48ZmlsdGVyIGlkPSJhIiB4PSIwIiB5PSIwIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjMwMCIgaGVpZ2h0PSIzMDAiIGZpbHRlcj0idXJsKCNhKSIgb3BhY2l0eT0iMC4wNSIvPjwvc3ZnPg==')]"></div>

     

       20
       20
       +
                   </div>

     

       21
       21
       +
       

     

       22
       22
       +
                   {/* Display Board Text */}

     

       23
       23
       +
                   <div className="relative flex justify-center items-center py-2 pb-4 px-4">

     

       24
       24
       +
                     <div className="relative text-center">

     

       25
       25
       +
                       <span

     

       26
       26
       +
                         className="font-mono text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white 

     

       27
       27
       +
                                  [text-shadow:0_0_20px_rgba(255,255,255,0.2),0_0_40px_rgba(255,255,255,0.1)]

     

       28
       28
       +
                                  relative z-10"

     

       29
       29
       +
                       >

     

       30
       30
       +
                         ATP INTERNECTIONAL AIRPORT

     

       31
       31
       +
                       </span>

     

       32
       32
       +
                       {/* Text glow effect */}

     

       33
       33
       +
                       <div className="absolute inset-0 blur-[2px] opacity-50">

     

       34
       34
       +
                         <span

     

       35
       35
       +
                           className="font-mono text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white"

     

       36
       36
       +
                         >

     

       37
       37
       +
                           ATP INTERNECTIONAL AIRPORT

     

       38
       38
       +
                         </span>

     

       39
       39
       +
                       </div>

     

       40
       40
       +
                     </div>

     

       41
       41
       +
                   </div>

     

       42
       42
       +
       

     

       43
       43
       +
                   {/* Screen reflection overlay */}

     

       44
       44
       +
                   <div className="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-white/[0.03]"></div>

     

       45
       45
       +
                   {/* Vignette effect */}

     

       46
       46
       +
                   <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_0%,_rgba(0,0,0,0.2)_100%)]"></div>

     

       47
       47
       +
                 </div>

     

       48
       48
       +
               </div>

     

       49
       49
       +
             </div>

     

       50
       50
       +
           </div>

     

       51
       51
       +
         );

     

       52
       52
       +
       }

+17 -25

islands/Header.tsx

···

       8
       8
        
       

     

       9
       9
        
       export default function Header() {

     

       10
       10
        
         const [user, setUser] = useState<User | null>(null);

     

       11
       11
       -
         const [loading, setLoading] = useState(true);

     

       12
       11
        
       

     

       13
       12
        
         useEffect(() => {

     

       14
       13
        
           if (!IS_BROWSER) return;

     
···

       29
       28
        
             } catch (error) {

     

       30
       29
        
               console.error("Failed to fetch user:", error);

     

       31
       30
        
               setUser(null);

     

       32
       32
       -
             } finally {

     

       33
       33
       -
               setLoading(false);

     

       34
       31
        
             }

     

       35
       32
        
           };

     

       36
       33
        
       

     
···

       56
       53
        
         };

     

       57
       54
        
       

     

       58
       55
        
         return (

     

       59
       59
       -
           <header className="bg-slate-900 text-white relative z-10">

     

       56
       56
       +
           <header className="bg-white dark:bg-slate-900 text-slate-900 dark:text-white relative z-10 border-b border-slate-200 dark:border-slate-800">

     

       60
       57
        
             <div className="max-w-7xl mx-auto px-4">

     

       61
       58
        
               <div className="flex items-center justify-between py-4">

     

       62
       59
        
                 {/* Home Link */}

     

       63
       63
       -
                 <a href="/" className="airport-sign bg-gradient-to-r from-blue-500 to-blue-600 text-white flex items-center px-6 py-3 hover:translate-y-1 transition-all duration-200 hover:shadow-lg hover:from-blue-600 hover:to-blue-700">

     

       60
       60
       +
                 <a href="/" className="airport-sign bg-gradient-to-r from-blue-500 to-blue-600 text-white flex items-center px-6 py-3 hover:translate-y-1 transition-all duration-200 hover:from-blue-600 hover:to-blue-700">

     

       64
       61
        
                   <img src="/icons/plane_bold.svg" alt="Plane" className="w-6 h-6 mr-2" style={{ filter: 'brightness(0) invert(1)' }} />

     

       65
       65
       -
                   <span className="font-bold tracking-wider">AIRPORT</span>

     

       62
       62
       +
                   <span className="font-mono font-bold tracking-wider">AIRPORT</span>

     

       66
       63
        
                 </a>

     

       67
       64
        
       

     

       68
       65
        
                 <div className="flex items-center gap-3">

     

       69
       66
        
                   {/* Departures (Migration) */}

     

       70
       67
        
                   <div className="relative group">

     

       71
       71
       -
                     <a href="/migrate" className="airport-sign bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 flex items-center px-6 py-3 hover:translate-y-1 transition-all duration-200 hover:shadow-lg hover:from-amber-500 hover:to-amber-600">

     

       68
       68
       +
                     <a href="/migrate" className="airport-sign bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 flex items-center px-6 py-3 hover:translate-y-1 transition-all duration-200 hover:from-amber-500 hover:to-amber-600">

     

       72
       69
        
                       <img src="/icons/plane-departure_bold.svg" alt="Departures" className="w-6 h-6 mr-2" style={{ filter: 'brightness(0)' }} />

     

       73
       73
       -
                       <span className="font-bold tracking-wider">DEPARTURES</span>

     

       70
       70
       +
                       <span className="font-mono font-bold tracking-wider">DEPARTURES</span>

     

       74
       71
        
                     </a>

     

       75
       75
       -
                     <div className="absolute top-full left-0 w-full bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 py-3 px-4 transform scale-y-0 origin-top group-hover:scale-y-100 transition-transform duration-200 shadow-lg">

     

       76
       76
       -
                       <div className="text-sm font-medium">Start Migration</div>

     

       77
       77
       -
                     </div>

     

       78
       72
        
                   </div>

     

       79
       73
        
       

     

       80
       74
        
                   {/* Check-in (Login/Profile) */}

     

       81
       81
       -
                   <div className="relative group">

     

       82
       82
       -
                     {loading ? (

     

       83
       83
       -
                       <div className="airport-sign bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 flex items-center px-6 py-3">

     

       84
       84
       -
                         <div className="animate-pulse w-24 h-6 bg-amber-600/30 rounded"></div>

     

       85
       85
       -
                       </div>

     

       86
       86
       -
                     ) : user?.did ? (

     

       87
       87
       -
                       <div className="airport-sign bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 flex items-center px-6 py-3 hover:translate-y-1 transition-all duration-200 hover:shadow-lg hover:from-amber-500 hover:to-amber-600 cursor-pointer">

     

       88
       88
       -
                         <img src="/icons/ticket_bold.svg" alt="Check-in" className="w-6 h-6 mr-2" style={{ filter: 'brightness(0)' }} />

     

       89
       89
       -
                         <span className="font-bold tracking-wider">CHECKED IN</span>

     

       90
       90
       -
                         <div className="absolute top-full right-0 w-56 bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 py-3 px-4 transform scale-y-0 origin-top group-hover:scale-y-100 transition-transform duration-200 shadow-lg rounded-md">

     

       91
       91
       -
                           <div className="text-sm font-medium mb-2 pb-2 border-b border-slate-900/10">

     

       75
       75
       +
                   <div className="relative">

     

       76
       76
       +
                     {user?.did ? (

     

       77
       77
       +
                       <div className="relative group">

     

       78
       78
       +
                         <div className="airport-sign bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 flex items-center px-6 py-3 hover:translate-y-1 transition-all duration-200 hover:from-amber-500 hover:to-amber-600 cursor-pointer">

     

       79
       79
       +
                           <img src="/icons/ticket_bold.svg" alt="Check-in" className="w-6 h-6 mr-2" style={{ filter: 'brightness(0)' }} />

     

       80
       80
       +
                           <span className="font-mono font-bold tracking-wider">CHECKED IN</span>

     

       81
       81
       +
                         </div>

     

       82
       82
       +
                         <div className="absolute opacity-0 translate-y-[-8px] pointer-events-none group-hover:opacity-100 group-hover:translate-y-0 group-hover:pointer-events-auto top-full right-0 w-56 bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 py-3 px-4 rounded-md transition-all duration-200">

     

       83
       83
       +
                           <div className="text-sm font-mono mb-2 pb-2 border-b border-slate-900/10">

     

       92
       84
        
                             <div>{user.handle || 'Anonymous'}</div>

     

       93
       85
        
                             <div className="text-xs opacity-75 truncate">{user.did}</div>

     

       94
       86
        
                           </div>

     

       95
       87
        
                           <button

     

       96
       88
        
                             type="button"

     

       97
       89
        
                             onClick={handleLogout}

     

       98
       98
       -
                             className="text-sm font-medium text-slate-900 hover:text-slate-700 w-full text-left transition-colors"

     

       90
       90
       +
                             className="text-sm font-mono text-slate-900 hover:text-slate-700 w-full text-left transition-colors"

     

       99
       91
        
                           >

     

       100
       92
        
                             Sign Out

     

       101
       93
        
                           </button>

     

       102
       94
        
                         </div>

     

       103
       95
        
                       </div>

     

       104
       96
        
                     ) : (

     

       105
       105
       -
                       <a href="/login" className="airport-sign bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 flex items-center px-6 py-3 hover:translate-y-1 transition-all duration-200 hover:shadow-lg hover:from-amber-500 hover:to-amber-600">

     

       97
       97
       +
                       <a href="/login" className="airport-sign bg-gradient-to-r from-amber-400 to-amber-500 text-slate-900 flex items-center px-6 py-3 hover:translate-y-1 transition-all duration-200 hover:from-amber-500 hover:to-amber-600">

     

       106
       98
        
                         <img src="/icons/ticket_bold.svg" alt="Check-in" className="w-6 h-6 mr-2" style={{ filter: 'brightness(0)' }} />

     

       107
       107
       -
                         <span className="font-bold tracking-wider">CHECK-IN</span>

     

       99
       99
       +
                         <span className="font-mono font-bold tracking-wider">CHECK-IN</span>

     

       108
       100
        
                       </a>

     

       109
       101
        
                     )}

     

       110
       102
        
                   </div>

+91

islands/Ticket.tsx

···

       1
       1
       +
       import { useEffect, useState } from "preact/hooks";

     

       2
       2
       +
       import { IS_BROWSER } from "$fresh/runtime.ts";

     

       3
       3
       +
       

     

       4
       4
       +
       interface User {

     

       5
       5
       +
         did: string;

     

       6
       6
       +
         handle?: string;

     

       7
       7
       +
       }

     

       8
       8
       +
       

     

       9
       9
       +
       export default function Ticket() {

     

       10
       10
       +
         const [user, setUser] = useState<User | null>(null);

     

       11
       11
       +
       

     

       12
       12
       +
         useEffect(() => {

     

       13
       13
       +
           if (!IS_BROWSER) return;

     

       14
       14
       +
       

     

       15
       15
       +
           const fetchUser = async () => {

     

       16
       16
       +
             try {

     

       17
       17
       +
               const response = await fetch("/api/me", {

     

       18
       18
       +
                 credentials: "include",

     

       19
       19
       +
               });

     

       20
       20
       +
               if (!response.ok) {

     

       21
       21
       +
                 throw new Error("Failed to fetch user profile");

     

       22
       22
       +
               }

     

       23
       23
       +
               const userData = await response.json();

     

       24
       24
       +
               setUser(userData ? {

     

       25
       25
       +
                 did: userData.did,

     

       26
       26
       +
                 handle: userData.handle

     

       27
       27
       +
               } : null);

     

       28
       28
       +
             } catch (error) {

     

       29
       29
       +
               console.error("Failed to fetch user:", error);

     

       30
       30
       +
               setUser(null);

     

       31
       31
       +
             }

     

       32
       32
       +
           };

     

       33
       33
       +
       

     

       34
       34
       +
           fetchUser();

     

       35
       35
       +
         }, []);

     

       36
       36
       +
       

     

       37
       37
       +
         return (

     

       38
       38
       +
           <div class="max-w-4xl mx-auto">

     

       39
       39
       +
             <div class="ticket mb-8 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 relative before:absolute before:inset-[1px] before:bg-white dark:before:bg-slate-800 before:-z-10 after:absolute after:inset-0 after:bg-slate-200 dark:after:bg-slate-700 after:-z-20 [clip-path:polygon(0_0,20px_0,100%_0,100%_calc(100%-20px),calc(100%-20px)_100%,0_100%,0_calc(100%-20px),20px_100%)] after:[clip-path:polygon(0_0,20px_0,100%_0,100%_calc(100%-20px),calc(100%-20px)_100%,0_100%,0_calc(100%-20px),20px_100%)]">

     

       40
       40
       +
               <div class="boarding-label text-amber-500 dark:text-amber-400 font-mono font-bold tracking-wider text-sm mb-4">BOARDING PASS</div>

     

       41
       41
       +
               <div class="flex justify-between items-start mb-4">

     

       42
       42
       +
                 <h3 class="text-2xl font-mono">WHAT IS AIRPORT?</h3>

     

       43
       43
       +
                 <div class="text-sm font-mono text-gray-500 dark:text-gray-400">GATE A1</div>

     

       44
       44
       +
               </div>

     

       45
       45
       +
               <div class="passenger-info text-slate-600 dark:text-slate-300 font-mono text-sm mb-4">

     

       46
       46
       +
                 PASSENGER: {(user?.handle || "UNKNOWN").toUpperCase()}

     

       47
       47
       +
                 <br />

     

       48
       48
       +
                 DESTINATION: NEW PDS

     

       49
       49
       +
               </div>

     

       50
       50
       +
               <p class="mb-4">

     

       51
       51
       +
                 Think of Airport as your digital terminal for AT Protocol migrations. We help you smoothly

     

       52
       52
       +
                 transfer your PDS account between different providers – no lost luggage, just a first-class

     

       53
       53
       +
                 experience for your data's journey to its new home.

     

       54
       54
       +
               </p>

     

       55
       55
       +
             </div>

     

       56
       56
       +
       

     

       57
       57
       +
             <div class="ticket bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 p-6 relative before:absolute before:inset-[1px] before:bg-white dark:before:bg-slate-800 before:-z-10 after:absolute after:inset-0 after:bg-slate-200 dark:after:bg-slate-700 after:-z-20 [clip-path:polygon(0_0,20px_0,100%_0,100%_calc(100%-20px),calc(100%-20px)_100%,0_100%,0_calc(100%-20px),20px_100%)] after:[clip-path:polygon(0_0,20px_0,100%_0,100%_calc(100%-20px),calc(100%-20px)_100%,0_100%,0_calc(100%-20px),20px_100%)]">

     

       58
       58
       +
               <div class="boarding-label text-amber-500 dark:text-amber-400 font-mono font-bold tracking-wider text-sm mb-4">FLIGHT DETAILS</div>

     

       59
       59
       +
               <div class="flex justify-between items-start mb-4">

     

       60
       60
       +
                 <h3 class="text-2xl font-mono">GET READY TO FLY</h3>

     

       61
       61
       +
                 <div class="text-sm font-mono text-gray-500 dark:text-gray-400">SEAT: 1A</div>

     

       62
       62
       +
               </div>

     

       63
       63
       +
               <div class="passenger-info mb-4 text-slate-600 dark:text-slate-300 font-mono text-sm">

     

       64
       64
       +
                 CLASS: FIRST CLASS MIGRATION

     

       65
       65
       +
                 <br />

     

       66
       66
       +
                 FLIGHT: ATP-2024

     

       67
       67
       +
               </div>

     

       68
       68
       +
               <ol class="list-decimal list-inside space-y-3">

     

       69
       69
       +
                 <li>Check in with your current PDS credentials</li>

     

       70
       70
       +
                 <li>Select your destination PDS</li>

     

       71
       71
       +
                 <li>Go through our streamlined security check</li>

     

       72
       72
       +
                 <li>Sit back while we handle your data transfer</li>

     

       73
       73
       +
               </ol>

     

       74
       74
       +
               <div class="mt-6 text-sm text-gray-600 dark:text-gray-400 border-t border-dashed pt-4 border-slate-200 dark:border-slate-700">

     

       75
       75
       +
                 Your data travels securely with our top-tier encryption – we're like the TSA, but actually fast.

     

       76
       76
       +
               </div>

     

       77
       77
       +
               <div class="flight-info mt-6 flex items-center justify-between text-slate-600 dark:text-slate-300 font-mono text-sm">

     

       78
       78
       +
                 <div>

     

       79
       79
       +
                   <div class="text-xs text-gray-500 dark:text-gray-400">FROM</div>

     

       80
       80
       +
                   <div>CURRENT PDS</div>

     

       81
       81
       +
                 </div>

     

       82
       82
       +
                 <div class="text-amber-500 dark:text-amber-400">➜</div>

     

       83
       83
       +
                 <div>

     

       84
       84
       +
                   <div class="text-xs text-gray-500 dark:text-gray-400">TO</div>

     

       85
       85
       +
                   <div>NEW PDS</div>

     

       86
       86
       +
                 </div>

     

       87
       87
       +
               </div>

     

       88
       88
       +
             </div>

     

       89
       89
       +
           </div>

     

       90
       90
       +
         );

     

       91
       91
       +
       }

-1

oauth/session.ts

···

       43
       43
        
         }

     

       44
       44
        
       

     

       45
       45
        
         try {

     

       46
       46
       -
           console.log("restoring session: ", session.did);

     

       47
       46
        
           const oauthSession = await oauthClient.restore(session.did);

     

       48
       47
        
           return oauthSession ? new Agent(oauthSession) : null;

     

       49
       48
        
         } catch (err) {

+14 -9

routes/_404.tsx

···

       5
       5
        
           <>

     

       6
       6
        
             <Head>

     

       7
       7
        
               <title>404 - Flight Not Found</title>

     

       8
       8
       +
               <style dangerouslySetInnerHTML={{ __html: `

     

       9
       9
       +
                 :root { --is-dark: 0; }

     

       10
       10
       +
                 @media (prefers-color-scheme: dark) {

     

       11
       11
       +
                   :root { --is-dark: 1; }

     

       12
       12
       +
                 }

     

       13
       13
       +
               `}} />

     

       8
       14
        
             </Head>

     

       9
       9
       -
             <div class="min-h-screen bg-slate-900 px-4 py-16 sm:py-24 mx-auto flex items-center">

     

       10
       10
       -
               <div class="max-w-screen-xl mx-auto flex flex-col items-center justify-center text-center">

     

       15
       15
       +
             <div class="px-4">

     

       16
       16
       +
               <div class="max-w-screen-xl mx-auto flex flex-col items-center text-center">

     

       11
       17
        
                 <div class="relative mb-4">

     

       12
       18
        
                   <img

     

       13
       19
        
                     src="/icons/plane_bold.svg"

     

       14
       14
       -
                     class="w-32 h-32 sm:w-48 sm:h-48 opacity-90"

     

       20
       20
       +
                     class="w-32 h-32 sm:w-35 sm:h-35 brightness-[0.1] dark:invert dark:filter-none"

     

       15
       21
        
                     alt="Plane icon"

     

       16
       16
       -
                     style={{ filter: 'brightness(0) invert(1)' }}

     

       17
       22
        
                   />

     

       18
       23
        
                 </div>

     

       19
       24
        
                 

     

       20
       20
       -
                 <div class="airport-board bg-black/20 backdrop-blur-sm p-8 sm:p-12 rounded-lg border border-white/10">

     

       21
       21
       -
                   <h1 class="text-6xl sm:text-8xl md:text-9xl font-mono tracking-wider text-amber-400 font-bold mb-6">

     

       25
       25
       +
                 <div class="bg-white dark:bg-slate-900 airport-board p-8 sm:p-12 rounded-lg border border-slate-200 dark:border-white/10">

     

       26
       26
       +
                   <h1 class="text-6xl sm:text-8xl md:text-9xl font-mono tracking-wider text-amber-500 dark:text-amber-400 font-bold mb-6">

     

       22
       27
        
                     404

     

       23
       28
        
                   </h1>

     

       24
       29
        
                   <div class="space-y-4">

     

       25
       25
       -
                     <p class="text-2xl sm:text-3xl md:text-4xl font-mono text-white/90">

     

       30
       30
       +
                     <p class="text-2xl sm:text-3xl md:text-4xl font-mono text-slate-900 dark:text-white/90">

     

       26
       31
        
                       FLIGHT NOT FOUND

     

       27
       32
        
                     </p>

     

       28
       28
       -
                     <p class="text-lg sm:text-xl text-white/70 max-w-2xl">

     

       33
       33
       +
                     <p class="text-lg sm:text-xl text-slate-600 dark:text-white/70 max-w-2xl">

     

       29
       34
        
                       We couldn't locate the destination you're looking for. Please check your flight number and try again.

     

       30
       35
        
                     </p>

     

       31
       36
        
                     <div class="mt-8">

     

       32
       37
        
                       <a

     

       33
       38
        
                         href="/"

     

       34
       34
       -
                         class="inline-flex items-center px-8 py-4 bg-amber-400 text-slate-900 rounded-md font-bold text-lg hover:bg-amber-500 transition-colors duration-200"

     

       39
       39
       +
                         class="inline-flex items-center px-8 py-4 bg-amber-500 dark:bg-amber-400 text-slate-900 rounded-md font-bold text-lg hover:bg-amber-600 dark:hover:bg-amber-500 transition-colors duration-200"

     

       35
       40
        
                       >

     

       36
       41
        
                         Return to Terminal

     

       37
       42
        
                       </a>

-6

routes/api/me.ts

···

       2
       2
        
       import { getSessionAgent } from "../../oauth/session.ts";

     

       3
       3
        
       import { resolver } from "../../utils/id-resolver.ts";

     

       4
       4
        
       

     

       5
       5
       -
       interface BskyProfile {

     

       6
       6
       -
         handle: string;

     

       7
       7
       -
         displayName?: string;

     

       8
       8
       -
         description?: string;

     

       9
       9
       -
       }

     

       10
       10
       -
       

     

       11
       5
        
       export const handler: Handlers = {

     

       12
       6
        
         async GET(req, ctx) {

     

       13
       7
        
           const agent = await getSessionAgent(req, ctx);

+20 -64

routes/index.tsx

···

       1
       1
       +
       import Ticket from "../islands/Ticket.tsx";

     

       2
       2
       +
       import AirportSign from "../islands/AirportSign.tsx";

     

       3
       3
       +
       

     

       1
       4
        
       export default function Home() {

     

       2
       5
        
         return (

     

       3
       3
       -
           <div class="px-4 py-8 mx-auto">

     

       4
       4
       -
             <div class="max-w-screen-md mx-auto flex flex-col items-center justify-center">

     

       5
       5
       -
               <h1 class="text-7xl font-normal mb-8 text-center">Welcome to Airport</h1>

     

       6
       6
       +
           <>

     

       7
       7
       +
             <div class="px-4 py-8 mx-auto">

     

       8
       8
       +
               <div class="max-w-screen-lg mx-auto flex flex-col items-center justify-center">

     

       9
       9
       +
                 <AirportSign />

     

       6
       10
        
       

     

       7
       7
       -
               <div class="prose dark:prose-invert max-w-none w-full mb-0">

     

       8
       8
       -
                 <p class="text-xl mb-6 mt-0 text-center text-gray-600 dark:text-gray-300">

     

       9
       9
       -
                   Your gateway to seamless AT Protocol PDS migration

     

       10
       10
       -
                 </p>

     

       11
       11
       -
       

     

       12
       12
       -
                 <div class="ticket mb-8">

     

       13
       13
       -
                   <div class="boarding-label">BOARDING PASS</div>

     

       14
       14
       -
                   <div class="flex justify-between items-start mb-4">

     

       15
       15
       -
                     <h3 class="text-2xl font-normal">WHAT IS AIRPORT?</h3>

     

       16
       16
       -
                     <div class="text-sm text-gray-500">GATE A1</div>

     

       17
       17
       -
                   </div>

     

       18
       18
       -
                   <div class="passenger-info">

     

       19
       19
       -
                     PASSENGER: BLUESKY USER

     

       20
       20
       -
                     <br />

     

       21
       21
       -
                     DESTINATION: NEW PDS

     

       22
       22
       -
                   </div>

     

       23
       23
       -
                   <p class="mb-4">

     

       24
       24
       -
                     Think of Airport as your digital terminal for AT Protocol migrations. We help you smoothly

     

       25
       25
       -
                     transfer your PDS account between different providers – no lost luggage, just a first-class

     

       26
       26
       -
                     experience for your data's journey to its new home.

     

       11
       11
       +
                 <div class="prose dark:prose-invert max-w-none w-full mb-0">

     

       12
       12
       +
                   <p class="text-xl mb-6 mt-0 text-center text-gray-600 dark:text-gray-300">

     

       13
       13
       +
                     Your terminal for seamless AT Protocol PDS migration and backup

     

       27
       14
        
                   </p>

     

       28
       28
       -
                 </div>

     

       29
       15
        
       

     

       30
       30
       -
                 <div class="ticket">

     

       31
       31
       -
                   <div class="boarding-label">FLIGHT DETAILS</div>

     

       32
       32
       -
                   <div class="flex justify-between items-start mb-4">

     

       33
       33
       -
                     <h3 class="text-2xl font-normal">GET READY TO FLY</h3>

     

       34
       34
       -
                     <div class="text-sm text-gray-500">SEAT: 1A</div>

     

       35
       35
       -
                   </div>

     

       36
       36
       -
                   <div class="passenger-info mb-4">

     

       37
       37
       -
                     CLASS: FIRST CLASS MIGRATION

     

       38
       38
       -
                     <br />

     

       39
       39
       -
                     FLIGHT: ATP-2024

     

       40
       40
       -
                   </div>

     

       41
       41
       -
                   <ol class="list-decimal list-inside space-y-3">

     

       42
       42
       -
                     <li>Check in with your current PDS credentials</li>

     

       43
       43
       -
                     <li>Select your destination PDS</li>

     

       44
       44
       -
                     <li>Go through our streamlined security check</li>

     

       45
       45
       -
                     <li>Sit back while we handle your data transfer</li>

     

       46
       46
       -
                   </ol>

     

       47
       47
       -
                   <div class="mt-6 text-sm text-gray-600 dark:text-gray-400 border-t border-dashed pt-4">

     

       48
       48
       -
                     Your data travels securely with our top-tier encryption – we're like the TSA, but actually fast.

     

       49
       49
       -
                   </div>

     

       50
       50
       -
                   <div class="flight-info">

     

       51
       51
       -
                     <div>

     

       52
       52
       -
                       <div class="text-xs text-gray-500">FROM</div>

     

       53
       53
       -
                       <div>CURRENT PDS</div>

     

       54
       54
       -
                     </div>

     

       55
       55
       -
                     <div>➜</div>

     

       56
       56
       -
                     <div>

     

       57
       57
       -
                       <div class="text-xs text-gray-500">TO</div>

     

       58
       58
       -
                       <div>NEW PDS</div>

     

       59
       59
       -
                     </div>

     

       16
       16
       +
                   <Ticket />

     

       17
       17
       +
       

     

       18
       18
       +
                   <div class="mt-8 text-center">

     

       19
       19
       +
                     <a

     

       20
       20
       +
                       href="/login"

     

       21
       21
       +
                       class="inline-flex items-center px-6 py-3 border border-transparent text-lg font-mono rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"

     

       22
       22
       +
                     >

     

       23
       23
       +
                       Begin Your Journey

     

       24
       24
       +
                     </a>

     

       60
       25
        
                   </div>

     

       61
       26
        
                 </div>

     

       62
       62
       -
       

     

       63
       63
       -
                 <div class="mt-8 text-center">

     

       64
       64
       -
                   <a

     

       65
       65
       -
                     href="/login"

     

       66
       66
       -
                     class="inline-flex items-center px-6 py-3 border border-transparent text-lg font-normal rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"

     

       67
       67
       -
                   >

     

       68
       68
       -
                     Begin Your Journey

     

       69
       69
       -
                   </a>

     

       70
       70
       -
                 </div>

     

       71
       27
        
               </div>

     

       72
       28
        
             </div>

     

       73
       73
       -
           </div>

     

       29
       29
       +
           </>

     

       74
       30
        
         );

     

       75
       31
        
       }

static/fonts/din-condensed-bold.ttf

This is a binary file and will not be displayed.

+2 -2

static/icons/plane-departure_bold.svg

···

       1
       1
       -
       <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       2
       2
       -
         <path fill-rule="evenodd" clip-rule="evenodd" d="M50.8224 33.2841L31.008 22.743C29.2561 21.8109 27.1909 21.6663 25.3262 22.345L19.7985 24.3569C19.3667 24.5141 19.2513 25.0706 19.5849 25.3865L34.2839 39.3037L18.5107 45.0447L13.6805 42.0448C12.6378 41.3972 11.3555 41.2642 10.202 41.684L5.45108 43.4133C4.99314 43.5799 4.83855 44.15 5.14954 44.5252L13.9345 55.124C13.9589 55.1535 13.9934 55.1711 14.0299 55.1746C14.0582 55.1928 14.0913 55.2035 14.1264 55.2046L22.9607 55.4824C27.707 55.6317 32.4381 54.874 36.9004 53.2498L63.8001 43.4591C66.6965 42.405 69.3245 40.7247 71.4968 38.5381L72.708 37.3189C73.9986 36.0199 74.4226 34.0923 73.7963 32.3716C73.1701 30.6509 71.6062 29.4468 69.7826 29.2812L68.071 29.1259C65.0014 28.8472 61.9082 29.2493 59.0119 30.3034L50.8224 33.2841Z" fill="#C2CCDE" />

     

       1
       1
       +
       <svg width="80" height="80" viewBox="4 20 70 36" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       2
       2
       +
         <path fill-rule="evenodd" clip-rule="evenodd" d="M50.8224 33.2841L31.008 22.743C29.2561 21.8109 27.1909 21.6663 25.3262 22.345L19.7985 24.3569C19.3667 24.5141 19.2513 25.0706 19.5849 25.3865L34.2839 39.3037L18.5107 45.0447L13.6805 42.0448C12.6378 41.3972 11.3555 41.2642 10.202 41.684L5.45108 43.4133C4.99314 43.5799 4.83855 44.15 5.14954 44.5252L13.9345 55.124C13.9589 55.1535 13.9934 55.1711 14.0299 55.1746C14.0582 55.1928 14.0913 55.2035 14.1264 55.2046L22.9607 55.4824C27.707 55.6317 32.4381 54.874 36.9004 53.2498L63.8001 43.4591C66.6965 42.405 69.3245 40.7247 71.4968 38.5381L72.708 37.3189C73.9986 36.0199 74.4226 34.0923 73.7963 32.3716C73.1701 30.6509 71.6062 29.4468 69.7826 29.2812L68.071 29.1259C65.0014 28.8472 61.9082 29.2493 59.0119 30.3034L50.8224 33.2841Z" fill="#FFFFFF" />

     

       3
       3
        
         <path d="M7 64H75" stroke="#C2CCDE" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" />

     

       4
       4
        
       </svg>

+1 -1

static/icons/plane_bold.svg

···

       1
       1
       -
       <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       1
       1
       +
       <svg width="80" height="80" viewBox="8 10 64 60" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       2
       2
        
         <path fill-rule="evenodd" clip-rule="evenodd" d="M49.4268 34L38.5549 15.0236C37.1294 12.5354 34.4811 11.0005 31.6134 11.0005H29.375C28.6565 11.0005 28.111 11.6475 28.2326 12.3557L31.9471 34H20.5233L16.0054 27.6751C15.2546 26.6239 14.0423 26 12.7505 26H9.80898C9.29425 26 8.91051 26.4746 9.01821 26.9779L11.7909 39.9367C11.7945 39.9493 11.8008 39.9607 11.8091 39.9701C11.809 39.9801 11.809 39.9901 11.809 40L11.8091 40.0295C11.8008 40.039 11.7945 40.0503 11.7909 40.063L9.01821 53.0217C8.91051 53.5251 9.29425 53.9996 9.80898 53.9996H12.7505C14.0423 53.9996 15.2546 53.3757 16.0054 52.3245L20.5229 46H31.9472L28.2326 67.6451C28.111 68.3533 28.6565 69.0003 29.375 69.0003H31.6134C34.4811 69.0003 37.1294 67.4654 38.5549 64.9772L49.4272 46H60.3858C62.8955 46 65.3762 45.4638 67.6618 44.4273L68.0768 44.2391C69.7405 43.4846 70.809 41.8268 70.809 40C70.809 38.1733 69.7405 36.5155 68.0768 35.761L67.6618 35.5728C65.3762 34.5363 62.8955 34 60.3858 34H49.4268Z" fill="#C2CCDE" />

     

       3
       3
        
       </svg>

+3 -3

static/icons/ticket_bold.svg

···

       1
       1
       -
       <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       2
       2
       -
         <path fill-rule="evenodd" clip-rule="evenodd" d="M8 24C8 21.7909 9.79086 20 12 20H68C70.2091 20 72 21.7909 72 24V33.6052C71.6647 33.6578 71.3304 33.7373 71 33.8446C68.3333 34.7111 66.5279 37.1961 66.5279 40C66.5279 42.8039 68.3333 45.2889 71 46.1554C71.3304 46.2627 71.6647 46.3422 72 46.3948V56C72 58.2091 70.2091 60 68 60H12C9.79086 60 8 58.2091 8 56V46.4726C8.66685 46.4727 9.3412 46.3694 10 46.1554C12.6667 45.2889 14.4721 42.8039 14.4721 40C14.4721 37.1961 12.6667 34.7111 10 33.8446C9.3412 33.6306 8.66685 33.5273 8 33.5274V24Z" fill="#C2CCDE" />

     

       3
       3
       -
         <path d="M72 33.6052L72.3097 35.5811C73.2828 35.4286 74 34.5903 74 33.6052H72ZM71 33.8446L70.382 31.9425L70.382 31.9425L71 33.8446ZM71 46.1554L70.382 48.0575H70.382L71 46.1554ZM72 46.3948H74C74 45.4097 73.2828 44.5714 72.3097 44.4189L72 46.3948ZM8 46.4726L8.00027 44.4726C7.46979 44.4725 6.96101 44.6832 6.58588 45.0583C6.21075 45.4333 6 45.9421 6 46.4726H8ZM10 46.1554L10.618 48.0575H10.618L10 46.1554ZM14.4721 40H12.4721H14.4721ZM10 33.8446L10.618 31.9425H10.618L10 33.8446ZM8 33.5274H6C6 34.0579 6.21075 34.5667 6.58588 34.9417C6.96101 35.3168 7.46979 35.5275 8.00027 35.5274L8 33.5274ZM12 18C8.68629 18 6 20.6863 6 24H10C10 22.8954 10.8954 22 12 22V18ZM68 18H12V22H68V18ZM74 24C74 20.6863 71.3137 18 68 18V22C69.1046 22 70 22.8954 70 24H74ZM74 33.6052V24H70V33.6052H74ZM71.6903 31.6294C71.2511 31.6982 70.8136 31.8023 70.382 31.9425L71.618 35.7467C71.8472 35.6723 72.0783 35.6174 72.3097 35.5811L71.6903 31.6294ZM70.382 31.9425C66.8913 33.0767 64.5279 36.3296 64.5279 40H68.5279C68.5279 38.0626 69.7754 36.3454 71.618 35.7467L70.382 31.9425ZM64.5279 40C64.5279 43.6704 66.8913 46.9233 70.382 48.0575L71.618 44.2533C69.7754 43.6546 68.5279 41.9374 68.5279 40H64.5279ZM70.382 48.0575C70.8136 48.1977 71.2511 48.3018 71.6903 48.3706L72.3097 44.4189C72.0783 44.3826 71.8472 44.3277 71.618 44.2533L70.382 48.0575ZM74 56V46.3948H70V56H74ZM68 62C71.3137 62 74 59.3137 74 56H70C70 57.1046 69.1046 58 68 58V62ZM12 62H68V58H12V62ZM6 56C6 59.3137 8.68629 62 12 62V58C10.8954 58 10 57.1046 10 56H6ZM6 46.4726V56H10V46.4726H6ZM9.38197 44.2533C8.92559 44.4015 8.46006 44.4726 8.00027 44.4726L7.99973 48.4726C8.87364 48.4727 9.7568 48.3373 10.618 48.0575L9.38197 44.2533ZM12.4721 40C12.4721 41.9374 11.2246 43.6545 9.38197 44.2533L10.618 48.0575C14.1087 46.9233 16.4721 43.6704 16.4721 40H12.4721ZM9.38197 35.7467C11.2246 36.3454 12.4721 38.0626 12.4721 40H16.4721C16.4721 36.3296 14.1087 33.0767 10.618 31.9425L9.38197 35.7467ZM8.00027 35.5274C8.46006 35.5274 8.92559 35.5985 9.38197 35.7467L10.618 31.9425C9.7568 31.6627 8.87364 31.5273 7.99973 31.5274L8.00027 35.5274ZM6 24V33.5274H10V24H6Z" fill="#C2CCDE" />

     

       1
       1
       +
       <svg width="80" height="80" viewBox="6 18 70 44" fill="none" xmlns="http://www.w3.org/2000/svg">

     

       2
       2
       +
         <path fill-rule="evenodd" clip-rule="evenodd" d="M8 24C8 21.7909 9.79086 20 12 20H68C70.2091 20 72 21.7909 72 24V33.6052C71.6647 33.6578 71.3304 33.7373 71 33.8446C68.3333 34.7111 66.5279 37.1961 66.5279 40C66.5279 42.8039 68.3333 45.2889 71 46.1554C71.3304 46.2627 71.6647 46.3422 72 46.3948V56C72 58.2091 70.2091 60 68 60H12C9.79086 60 8 58.2091 8 56V46.4726C8.66685 46.4727 9.3412 46.3694 10 46.1554C12.6667 45.2889 14.4721 42.8039 14.4721 40C14.4721 37.1961 12.6667 34.7111 10 33.8446C9.3412 33.6306 8.66685 33.5273 8 33.5274V24Z" fill="#FFFFFF" />

     

       3
       3
       +
         <path d="M72 33.6052L72.3097 35.5811C73.2828 35.4286 74 34.5903 74 33.6052H72ZM71 33.8446L70.382 31.9425L70.382 31.9425L71 33.8446ZM71 46.1554L70.382 48.0575H70.382L71 46.1554ZM72 46.3948H74C74 45.4097 73.2828 44.5714 72.3097 44.4189L72 46.3948ZM8 46.4726L8.00027 44.4726C7.46979 44.4725 6.96101 44.6832 6.58588 45.0583C6.21075 45.4333 6 45.9421 6 46.4726H8ZM10 46.1554L10.618 48.0575H10.618L10 46.1554ZM14.4721 40H12.4721H14.4721ZM10 33.8446L10.618 31.9425H10.618L10 33.8446ZM8 33.5274H6C6 34.0579 6.21075 34.5667 6.58588 34.9417C6.96101 35.3168 7.46979 35.5275 8.00027 35.5274L8 33.5274ZM12 18C8.68629 18 6 20.6863 6 24H10C10 22.8954 10.8954 22 12 22V18ZM68 18H12V22H68V18ZM74 24C74 20.6863 71.3137 18 68 18V22C69.1046 22 70 22.8954 70 24H74ZM74 33.6052V24H70V33.6052H74ZM71.6903 31.6294C71.2511 31.6982 70.8136 31.8023 70.382 31.9425L71.618 35.7467C71.8472 35.6723 72.0783 35.6174 72.3097 35.5811L71.6903 31.6294ZM70.382 31.9425C66.8913 33.0767 64.5279 36.3296 64.5279 40H68.5279C68.5279 38.0626 69.7754 36.3454 71.618 35.7467L70.382 31.9425ZM64.5279 40C64.5279 43.6704 66.8913 46.9233 70.382 48.0575L71.618 44.2533C69.7754 43.6546 68.5279 41.9374 68.5279 40H64.5279ZM70.382 48.0575C70.8136 48.1977 71.2511 48.3018 71.6903 48.3706L72.3097 44.4189C72.0783 44.3826 71.8472 44.3277 71.618 44.2533L70.382 48.0575ZM74 56V46.3948H70V56H74ZM68 62C71.3137 62 74 59.3137 74 56H70C70 57.1046 69.1046 58 68 58V62ZM12 62H68V58H12V62ZM6 56C6 59.3137 8.68629 62 12 62V58C10.8954 58 10 57.1046 10 56H6ZM6 46.4726V56H10V46.4726H6ZM9.38197 44.2533C8.92559 44.4015 8.46006 44.4726 8.00027 44.4726L7.99973 48.4726C8.87364 48.4727 9.7568 48.3373 10.618 48.0575L9.38197 44.2533ZM12.4721 40C12.4721 41.9374 11.2246 43.6545 9.38197 44.2533L10.618 48.0575C14.1087 46.9233 16.4721 43.6704 16.4721 40H12.4721ZM9.38197 35.7467C11.2246 36.3454 12.4721 38.0626 12.4721 40H16.4721C16.4721 36.3296 14.1087 33.0767 10.618 31.9425L9.38197 35.7467ZM8.00027 35.5274C8.46006 35.5274 8.92559 35.5985 9.38197 35.7467L10.618 31.9425C9.7568 31.6627 8.87364 31.5273 7.99973 31.5274L8.00027 35.5274ZM6 24V33.5274H10V24H6Z" fill="#FFFFFF" />

     

       4
       4
        
       </svg>

+2 -9

static/styles.css

···

       1
       1
       +
       @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

     

       2
       2
       +
       

     

       1
       3
        
       @font-face {

     

       2
       4
        
           font-family: "Skyfont";

     

       3
       5
        
           src: url("fonts/skyfont.regular.otf") format("opentype");

     
···

       159
       161
        
           transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

     

       160
       162
        
           border-radius: 0.5rem;

     

       161
       163
        
           backdrop-filter: blur(8px);

     

       162
       162
       -
           box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),

     

       163
       163
       -
                       0 2px 4px -1px rgba(0, 0, 0, 0.06);

     

       164
       164
       -
       }

     

       165
       165
       -
       

     

       166
       166
       -
       .airport-sign:hover {

     

       167
       167
       -
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),

     

       168
       168
       -
                       0 4px 6px -2px rgba(0, 0, 0, 0.05);

     

       169
       164
        
       }

     

       170
       165
        
       

     

       171
       166
        
       /* Dropdown panel styles */

     

       172
       167
        
       .airport-sign + div {

     

       173
       168
        
           border-radius: 0.5rem;

     

       174
       169
        
           backdrop-filter: blur(8px);

     

       175
       175
       -
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),

     

       176
       176
       -
                       0 4px 6px -2px rgba(0, 0, 0, 0.05);

     

       177
       170
        
       }

     

       178
       171
        
       

     

       179
       172
        
       /* Remove old texture styles */