commit bcd3157faa02f73e22c0befc2303c4be1e9ec81a · knotbin.com/airport

+14 -14

islands/AirportSign.tsx components/AirportSign.tsx

···

       1
       1
        
       export default function AirportSign() {

     

       2
       2
        
         return (

     

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

     

       3
       3
       +
           <div class="relative inline-block mb-8 sm: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">

     

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

     

       6
       6
        
             </div>

     

       7
       7
        
             {/* Right Pole */}

     

       8
       8
       -
             <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">

     

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

     

       9
       9
        
             </div>

     

       10
       10
        
             {/* Display Board */}

     

       11
       11
       -
             <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)]">

     

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

     

       12
       12
        
               {/* Metallic Frame */}

     

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

     

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

     

       14
       14
        
                 {/* Inner Frame */}

     

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

     

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

     

       16
       16
        
                   {/* Screen Background with Effects */}

     

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

     

       18
       18
        
                     {/* Scan lines */}

     
···

       24
       24
        
                   </div>

     

       25
       25
        
       

     

       26
       26
        
                   {/* Display Board Text */}

     

       27
       27
       -
                   <div className="relative flex justify-center items-center py-1 sm:py-2 pb-2 sm:pb-4 px-2 sm:px-4">

     

       27
       27
       +
                   <div className="relative flex justify-center items-center py-0.5 sm:py-2 pb-1 sm:pb-4 px-1 sm:px-4">

     

       28
       28
        
                     <div className="relative text-center">

     

       29
       29
       -
                       <span className="font-mono text-[2em] sm:text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white 

     

       29
       29
       +
                       <span className="font-mono text-[1.5em] sm:text-[2em] md:text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white 

     

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

     

       31
       31
        
                                  relative z-10">

     

       32
       32
        
                         ATP INTERNECTIONAL AIRPORT

     

       33
       33
        
                       </span>

     

       34
       34
        
                       {/* Text glow effect */}

     

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

     

       36
       36
       -
                         <span className="font-mono text-[2em] sm:text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white">

     

       36
       36
       +
                         <span className="font-mono text-[1.5em] sm:text-[2em] md:text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white">

     

       37
       37
        
                           ATP INTERNECTIONAL AIRPORT

     

       38
       38
        
                         </span>

     

       39
       39
        
                       </div>

     
···

       50
       50
        
               </div>

     

       51
       51
        
             </div>

     

       52
       52
        
       

     

       53
       53
       -
             {/* Under Construction Extension BELOW the sign, perfectly matching main sign frame, no outline or padding on top */}

     

       53
       53
       +
             {/* Under Construction Extension */}

     

       54
       54
        
             <div className="absolute left-1/2 top-full -translate-x-1/2">

     

       55
       55
       -
               <div className="bg-gradient-to-b from-slate-800 to-slate-900 pb-1 px-1 rounded-b-lg rounded-t-none shadow-[0_2px_10px_rgba(0,0,0,0.3)] border-t-0">

     

       56
       56
       -
                 <div className="bg-gradient-to-b from-slate-600 via-slate-700 to-slate-800 pb-2 px-2 rounded-b-[6px] rounded-t-none border-t-0">

     

       57
       57
       -
                   <div className="bg-black px-4 pt-0 pb-0.5 rounded-b-[4px] rounded-t-none border-t-0">

     

       58
       58
       -
                     <span className="font-mono text-sm font-medium tracking-wider text-yellow-400 [text-shadow:0_0_10px_rgba(255,255,0,0.3)] animate-pulse">

     

       55
       55
       +
               <div className="bg-gradient-to-b from-slate-800 to-slate-900 pb-0.5 sm:pb-1 px-0.5 sm:px-1 rounded-b-lg rounded-t-none shadow-[0_2px_10px_rgba(0,0,0,0.3)] border-t-0">

     

       56
       56
       +
                 <div className="bg-gradient-to-b from-slate-600 via-slate-700 to-slate-800 pb-1 sm:pb-2 px-1 sm:px-2 rounded-b-[6px] rounded-t-none border-t-0">

     

       57
       57
       +
                   <div className="bg-black px-2 sm:px-4 pt-0 pb-0.5 rounded-b-[4px] rounded-t-none border-t-0">

     

       58
       58
       +
                     <span className="font-mono text-xs sm:text-sm font-medium tracking-wider text-yellow-400 [text-shadow:0_0_10px_rgba(255,255,0,0.3)] animate-pulse">

     

       59
       59
        
                       UNDER CONSTRUCTION

     

       60
       60
        
                     </span>

     

       61
       61
        
                   </div>

+1 -1

islands/Header.tsx

···

       69
       69
        
         };

     

       70
       70
        
       

     

       71
       71
        
         return (

     

       72
       72
       -
           <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">

     

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

     

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

     

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

     

       75
       75
        
                 {/* Home Link */}

+9 -3

routes/index.tsx

···

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

     

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

     

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

     

       3
       3
        
       import SocialLinks from "../islands/SocialLinks.tsx";

     

       4
       4
        
       import { Button } from "../components/Button.tsx";

     

       5
       5
        
       

     
···

       24
       24
        
                     <Button

     

       25
       25
        
                       href="/login"

     

       26
       26
        
                       color="blue"

     

       27
       27
       -
                       label="BEGIN YOUR JOURNEY"

     

       27
       27
       +
                       label="MOBILE NOT SUPPORTED"

     

       28
       28
       +
                       className="opacity-50 cursor-not-allowed sm:opacity-100 sm:cursor-pointer"

     

       29
       29
       +
                       onClick={(e: MouseEvent) => {

     

       30
       30
       +
                         if (window.innerWidth < 640) {

     

       31
       31
       +
                           e.preventDefault();

     

       32
       32
       +
                         }

     

       33
       33
       +
                       }}

     

       28
       34
        
                     />

     

       29
       35
        
                   </div>

     

       30
       30
       -
                   <p class="font-mono text-lg sm:text-xl mb-4 mt-4 sm:mb-6 mt-0 text-center text-gray-600 dark:text-gray-300">

     

       36
       36
       +
                   <p class="font-mono text-lg sm:text-xl mb-4 mt-4 sm:mb-6 text-center text-gray-600 dark:text-gray-300">

     

       31
       37
        
                     Airport is made with love by <a class="text-blue-500 hover:underline" href="https://bsky.app/profile/knotbin.com">Roscoe</a> for <a class="text-blue-500 hover:underline" href="https://sprk.so">Spark</a>, a new short-video platform for AT Protocol.

     

       32
       38
        
                   </p>

     

       33
       39
        
                   <SocialLinks />