knotbin.com / airport
Graphical PDS migrator for AT Protocol
fork atom

mobile

knotbin.com bcd3157f beb35e15

options
unified split
Changed files
+24 -18
components
AirportSign.tsx
islands
Header.tsx
routes
index.tsx
+14 -14
islands/AirportSign.tsx components/AirportSign.tsx
··· 1 1 export default function AirportSign() { 2 2 return ( 3 - <div class="relative inline-block mb-12"> 3 + <div class="relative inline-block mb-8 sm:mb-12"> 4 4 {/* Left Pole */} 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 + <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 - <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 + <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 - <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 + <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 - <div class="bg-gradient-to-b from-slate-600 via-slate-700 to-slate-800 p-2 rounded-[6px]"> 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 - <div class="bg-black px-4 py-0.5 rounded-[4px] relative overflow-hidden"> 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 - <div className="relative flex justify-center items-center py-1 sm:py-2 pb-2 sm:pb-4 px-2 sm:px-4"> 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 - <span className="font-mono text-[2em] sm:text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white 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 - <span className="font-mono text-[2em] sm:text-[3em] font-semibold tracking-[0.12em] leading-[0.9] text-white"> 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 - {/* Under Construction Extension BELOW the sign, perfectly matching main sign frame, no outline or padding on top */} 53 + {/* Under Construction Extension */} 54 54 <div className="absolute left-1/2 top-full -translate-x-1/2"> 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 - <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 - <div className="bg-black px-4 pt-0 pb-0.5 rounded-b-[4px] rounded-t-none border-t-0"> 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 + <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 + <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 + <div className="bg-black px-2 sm:px-4 pt-0 pb-0.5 rounded-b-[4px] rounded-t-none border-t-0"> 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 - <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 + <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 - import AirportSign from "../islands/AirportSign.tsx"; 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 - label="BEGIN YOUR JOURNEY" 27 + label="MOBILE NOT SUPPORTED" 28 + className="opacity-50 cursor-not-allowed sm:opacity-100 sm:cursor-pointer" 29 + onClick={(e: MouseEvent) => { 30 + if (window.innerWidth < 640) { 31 + e.preventDefault(); 32 + } 33 + }} 28 34 /> 29 35 </div> 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 + <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 />