Login
jblu

jblu / dod landing page

Last active 1 month ago

Like 0
index.html Raw
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>
98