Login
jblu

jblu / dod landing page

Last active 1 month ago

Like 0

jblu revised this gist 1 month ago · aef03c6

1 file changed, 97 insertions

index.html (file created)
@@ -0,0 +1,97 @@
1 + <!DOCTYPE html>
2 + <html lang="en" class="bg-[#040805] text-[#39ff14] antialiased selection:bg-[#39ff14] selection:text-black">
3 + <head>
4 + <meta charset="UTF-8">
5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 + <title>SEC-NET // JONBIO_NODE_E3</title>
7 + <!-- FIX: Restored official Tailwind Play CDN link -->
8 + <script src="https://cdn.tailwindcss.com"></script>
9 + <!-- FIX: Restored missing googleapis domain paths for typography -->
10 + <link rel="preconnect" href="https://fonts.googleapis.com">
11 + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12 + <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap" rel="stylesheet">
13 + <style>
14 + body { font-family: 'Share Tech Mono', monospace; }
15 + .crt-scanline {
16 + background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
17 + background-size: 100% 4px, 6px 100%;
18 + }
19 + </style>
20 + </head>
21 + <body class="min-h-screen p-4 md:p-8 flex flex-col justify-between crt-scanline relative overflow-x-hidden selection:bg-[#39ff14]/30">
22 +
23 + <!-- OVERLAY GRID EFFECT -->
24 + <div class="absolute inset-0 bg-[linear-gradient(to_right,#09140a_1px,transparent_1px),linear-gradient(to_bottom,#09140a_1px,transparent_1px)] bg-[size:4rem_4rem] pointer-events-none z-0"></div>
25 +
26 + <!-- 📡 COMMAND HEADER -->
27 + <header class="w-full max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-start md:items-center border-b border-[#39ff14]/30 pb-4 mb-8 z-10 bg-[#040805]/80 backdrop-blur-sm">
28 + <div>
29 + <h1 class="text-xl md:text-2xl font-bold tracking-widest text-[#39ff14] drop-shadow-[0_0_8px_rgba(57,255,20,0.5)]">
30 + [HL-TACTICAL: ACTIVE]
31 + </h1>
32 + <p class="text-xs text-[#39ff14]/60 uppercase tracking-wider">Sub-net Command Hub // OP-REF: SIGMA-9</p>
33 + </div>
34 + <div class="mt-2 md:mt-0 text-left md:text-right text-xs text-[#39ff14]/80 bg-[#0c1a0e] px-3 py-1 border border-[#39ff14]/20 rounded">
35 + <div>HOST_NODE: <span class="text-white">dod.jonb.io</span></div>
36 + <div>STATUS: <span class="text-white animate-pulse">SYS_NOMINAL // SECURE</span></div>
37 + </div>
38 + </header>
39 +
40 + <!-- 📊 CORE OPERATION GRID -->
41 + <main class="w-full max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-6 z-10 my-auto">
42 +
43 + <!-- SIDE DIALS / DIRECTIVES -->
44 + <section class="border border-[#39ff14]/20 bg-[#050c06]/90 p-4 flex flex-col justify-between min-h-[160px]">
45 + <div>
46 + <div class="text-xs uppercase text-[#39ff14]/40 font-bold tracking-widest mb-2">// CORE_DIAGNOSTICS</div>
47 + <div class="text-sm space-y-1">
48 + <div class="flex justify-between"><span>CPU_ARRAY:</span><span class="text-white">Operational</span></div>
49 + <div class="flex justify-between"><span>MEM_POOL:</span><span class="text-white">Operational</span></div>
50 + <div class="flex justify-between"><span>STORAGE:</span><span class="text-white">Operational</span></div>
51 + </div>
52 + </div>
53 + <div class="mt-4 pt-2 border-t border-[#39ff14]/10 text-[10px] text-[#39ff14]/40 uppercase tracking-widest text-right">
54 + SYS-TEMP: NOMINAL
55 + </div>
56 + </section>
57 +
58 + <!-- CENTRAL COMMS MATRIX (Fills remaining grid space) -->
59 + <section class="md:col-span-3 border border-[#39ff14]/40 bg-[#071108]/90 p-6 relative flex flex-col justify-between">
60 + <div class="absolute top-0 right-0 p-2 text-[10px] text-[#39ff14]/30 select-none">GRID_REF: E3-JONBIO</div>
61 +
62 + <div>
63 + <h2 class="text-sm uppercase tracking-widest text-[#39ff14] font-bold border-b border-[#39ff14]/20 pb-2 mb-4">
64 + 📡 NETWORK_TARGET_ROUTER
65 + </h2>
66 + <p class="text-xs text-[#39ff14]/70 mb-4 max-w-xl">
67 + Main operations matrix configured for domain node resolution. Select an authorized peripheral vector below to initialize secure remote sequence.
68 + </p>
69 + </div>
70 +
71 + <!-- Custom Tactical Quicklinks Box -->
72 + <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 mt-2">
73 + <div class="p-3 border border-[#39ff14]/20 bg-[#040805] hover:border-[#39ff14] transition-colors group cursor-pointer">
74 + <span class="text-xs text-[#39ff14]/40 block">[LINK_01]</span>
75 + <span class="text-sm text-white group-hover:text-[#39ff14]">&gt; ROUTE_ROOT_CONSOLE</span>
76 + </div>
77 + <div class="p-3 border border-[#39ff14]/20 bg-[#040805] hover:border-[#39ff14] transition-colors group cursor-pointer">
78 + <span class="text-xs text-[#39ff14]/40 block">[LINK_02]</span>
79 + <span class="text-sm text-white group-hover:text-[#39ff14]">&gt; ENCRYPTED_STORAGE</span>
80 + </div>
81 + </div>
82 + </section>
83 +
84 + </main>
85 +
86 + <!-- 🛠️ FOOTER COMMS -->
87 + <footer class="w-full max-w-7xl mx-auto flex flex-col sm:flex-row justify-between items-start sm:items-center pt-4 mt-8 border-t border-[#39ff14]/20 text-xs text-[#39ff14]/40 gap-2 z-10 bg-[#040805]/80">
88 + <div>
89 + <p>CLASSIFIED MATERIAL // DOMESTIC NETWORK OPERATIONS ONLY</p>
90 + </div>
91 + <div class="text-[11px] tracking-tight">
92 + COMMS_LINK: <span class="text-white select-none">CONNECTED_SECURE_V4</span>
93 + </div>
94 + </footer>
95 +
96 + </body>
97 + </html>