knotbin.com
Graphical PDS migrator for AT Protocol
mobile
+24
-18
+14
-14
islands/AirportSign.tsx
components/AirportSign.tsx
+14
-14
islands/AirportSign.tsx
components/AirportSign.tsx
···
1
export default function AirportSign() {
2
return (
3
-
<div class="relative inline-block mb-12">
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">
6
</div>
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">
9
</div>
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)]">
12
{/* Metallic Frame */}
13
-
<div class="bg-gradient-to-b from-slate-600 via-slate-700 to-slate-800 p-2 rounded-[6px]">
14
{/* Inner Frame */}
15
-
<div class="bg-black px-4 py-0.5 rounded-[4px] relative overflow-hidden">
16
{/* Screen Background with Effects */}
17
<div class="absolute inset-0 bg-[#0a0a2f]">
18
{/* Scan lines */}
···
24
</div>
25
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">
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
30
[text-shadow:0_0_20px_rgba(255,255,255,0.2),0_0_40px_rgba(255,255,255,0.1)]
31
relative z-10">
32
ATP INTERNECTIONAL AIRPORT
33
</span>
34
{/* Text glow effect */}
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">
37
ATP INTERNECTIONAL AIRPORT
38
</span>
39
</div>
···
50
</div>
51
</div>
52
53
-
{/* Under Construction Extension BELOW the sign, perfectly matching main sign frame, no outline or padding on top */}
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">
59
UNDER CONSTRUCTION
60
</span>
61
</div>
···
1
export default function AirportSign() {
2
return (
3
+
<div class="relative inline-block mb-8 sm:mb-12">
4
{/* Left Pole */}
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
</div>
7
{/* Right Pole */}
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
</div>
10
{/* Display Board */}
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
{/* Metallic Frame */}
13
+
<div class="bg-gradient-to-b from-slate-600 via-slate-700 to-slate-800 p-1 sm:p-2 rounded-[6px]">
14
{/* Inner Frame */}
15
+
<div class="bg-black px-2 sm:px-4 py-0.5 rounded-[4px] relative overflow-hidden">
16
{/* Screen Background with Effects */}
17
<div class="absolute inset-0 bg-[#0a0a2f]">
18
{/* Scan lines */}
···
24
</div>
25
26
{/* Display Board Text */}
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
<div className="relative text-center">
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
[text-shadow:0_0_20px_rgba(255,255,255,0.2),0_0_40px_rgba(255,255,255,0.1)]
31
relative z-10">
32
ATP INTERNECTIONAL AIRPORT
33
</span>
34
{/* Text glow effect */}
35
<div className="absolute inset-0 blur-[2px] opacity-50">
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
ATP INTERNECTIONAL AIRPORT
38
</span>
39
</div>
···
50
</div>
51
</div>
52
53
+
{/* Under Construction Extension */}
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-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
UNDER CONSTRUCTION
60
</span>
61
</div>
+1
-1
islands/Header.tsx
+1
-1
islands/Header.tsx
···
69
};
70
71
return (
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
<div className="max-w-7xl mx-auto px-4">
74
<div className="flex items-center justify-between py-4">
75
{/* Home Link */}
+9
-3
routes/index.tsx
+9
-3
routes/index.tsx
···
1
import Ticket from "../islands/Ticket.tsx";
2
-
import AirportSign from "../islands/AirportSign.tsx";
3
import SocialLinks from "../islands/SocialLinks.tsx";
4
import { Button } from "../components/Button.tsx";
5
···
24
<Button
25
href="/login"
26
color="blue"
27
-
label="BEGIN YOUR JOURNEY"
28
/>
29
</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">
31
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
</p>
33
<SocialLinks />
···
1
import Ticket from "../islands/Ticket.tsx";
2
+
import AirportSign from "../components/AirportSign.tsx";
3
import SocialLinks from "../islands/SocialLinks.tsx";
4
import { Button } from "../components/Button.tsx";
5
···
24
<Button
25
href="/login"
26
color="blue"
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
+
}}
34
/>
35
</div>
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">
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.
38
</p>
39
<SocialLinks />