sikang99 commited on
Commit
3bca243
·
verified ·
1 Parent(s): 5a3f0d3

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +802 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Coforce Ai Sample Page
3
- emoji: 👀
4
- colorFrom: red
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: coforce-ai-sample-page
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,802 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CoForce.AI - Military Battlefield Management Technology</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
11
+
12
+ :root {
13
+ --primary: #00c2ff;
14
+ --secondary: #ff3d00;
15
+ --dark: #0a0a1a;
16
+ --darker: #050510;
17
+ }
18
+
19
+ body {
20
+ font-family: 'Roboto', sans-serif;
21
+ background-color: var(--darker);
22
+ color: white;
23
+ overflow-x: hidden;
24
+ }
25
+
26
+ .orbitron {
27
+ font-family: 'Orbitron', sans-serif;
28
+ }
29
+
30
+ .gradient-text {
31
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
32
+ -webkit-background-clip: text;
33
+ background-clip: text;
34
+ color: transparent;
35
+ }
36
+
37
+ .gradient-bg {
38
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
39
+ }
40
+
41
+ .nav-link {
42
+ position: relative;
43
+ }
44
+
45
+ .nav-link::after {
46
+ content: '';
47
+ position: absolute;
48
+ width: 0;
49
+ height: 2px;
50
+ bottom: -2px;
51
+ left: 0;
52
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
53
+ transition: width 0.3s ease;
54
+ }
55
+
56
+ .nav-link:hover::after {
57
+ width: 100%;
58
+ }
59
+
60
+ .tech-card {
61
+ background: rgba(255, 255, 255, 0.05);
62
+ backdrop-filter: blur(10px);
63
+ border: 1px solid rgba(255, 255, 255, 0.1);
64
+ transition: all 0.3s ease;
65
+ }
66
+
67
+ .tech-card:hover {
68
+ transform: translateY(-5px);
69
+ box-shadow: 0 10px 20px rgba(0, 194, 255, 0.2);
70
+ border-color: var(--primary);
71
+ }
72
+
73
+ .glow {
74
+ box-shadow: 0 0 15px rgba(0, 194, 255, 0.5);
75
+ }
76
+
77
+ .hexagon {
78
+ clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
79
+ }
80
+
81
+ .pulse {
82
+ animation: pulse 2s infinite;
83
+ }
84
+
85
+ @keyframes pulse {
86
+ 0% {
87
+ box-shadow: 0 0 0 0 rgba(0, 194, 255, 0.7);
88
+ }
89
+ 70% {
90
+ box-shadow: 0 0 0 10px rgba(0, 194, 255, 0);
91
+ }
92
+ 100% {
93
+ box-shadow: 0 0 0 0 rgba(0, 194, 255, 0);
94
+ }
95
+ }
96
+
97
+ .radar {
98
+ position: relative;
99
+ width: 200px;
100
+ height: 200px;
101
+ border-radius: 50%;
102
+ background: linear-gradient(90deg, rgba(0, 194, 255, 0.1), rgba(0, 194, 255, 0.05));
103
+ overflow: hidden;
104
+ }
105
+
106
+ .radar::before {
107
+ content: '';
108
+ position: absolute;
109
+ width: 50%;
110
+ height: 50%;
111
+ background: linear-gradient(45deg, transparent 75%, rgba(0, 194, 255, 0.7));
112
+ top: 0;
113
+ left: 0;
114
+ animation: radar-beam 4s linear infinite;
115
+ transform-origin: bottom right;
116
+ border-radius: 100% 0 0 0;
117
+ }
118
+
119
+ @keyframes radar-beam {
120
+ 0% {
121
+ transform: rotate(0deg);
122
+ }
123
+ 100% {
124
+ transform: rotate(360deg);
125
+ }
126
+ }
127
+
128
+ .grid-line {
129
+ position: absolute;
130
+ background: rgba(0, 194, 255, 0.1);
131
+ }
132
+
133
+ .grid-line:nth-child(1) {
134
+ width: 100%;
135
+ height: 1px;
136
+ top: 50%;
137
+ }
138
+
139
+ .grid-line:nth-child(2) {
140
+ width: 1px;
141
+ height: 100%;
142
+ left: 50%;
143
+ }
144
+
145
+ .grid-line:nth-child(3),
146
+ .grid-line:nth-child(4),
147
+ .grid-line:nth-child(5),
148
+ .grid-line:nth-child(6) {
149
+ width: 100%;
150
+ height: 100%;
151
+ border: 1px solid rgba(0, 194, 255, 0.1);
152
+ border-radius: 50%;
153
+ }
154
+
155
+ .grid-line:nth-child(3) {
156
+ width: 80%;
157
+ height: 80%;
158
+ top: 10%;
159
+ left: 10%;
160
+ }
161
+
162
+ .grid-line:nth-child(4) {
163
+ width: 60%;
164
+ height: 60%;
165
+ top: 20%;
166
+ left: 20%;
167
+ }
168
+
169
+ .grid-line:nth-child(5) {
170
+ width: 40%;
171
+ height: 40%;
172
+ top: 30%;
173
+ left: 30%;
174
+ }
175
+
176
+ .grid-line:nth-child(6) {
177
+ width: 20%;
178
+ height: 20%;
179
+ top: 40%;
180
+ left: 40%;
181
+ }
182
+
183
+ .blob {
184
+ position: absolute;
185
+ width: 300px;
186
+ height: 300px;
187
+ background: linear-gradient(45deg, var(--primary), var(--secondary));
188
+ border-radius: 50%;
189
+ filter: blur(100px);
190
+ opacity: 0.2;
191
+ z-index: -1;
192
+ }
193
+
194
+ .blob-1 {
195
+ top: -100px;
196
+ left: -100px;
197
+ }
198
+
199
+ .blob-2 {
200
+ bottom: -100px;
201
+ right: -100px;
202
+ }
203
+ </style>
204
+ </head>
205
+ <body class="min-h-screen">
206
+ <!-- Navigation -->
207
+ <nav class="fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-lg border-b border-gray-800">
208
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
209
+ <div class="flex items-center justify-between h-16">
210
+ <div class="flex items-center">
211
+ <div class="flex-shrink-0">
212
+ <div class="flex items-center">
213
+ <div class="hexagon w-10 h-10 gradient-bg flex items-center justify-center">
214
+ <span class="orbitron font-bold text-white">CF</span>
215
+ </div>
216
+ <span class="ml-3 orbitron text-2xl font-bold gradient-text">CoForce<span class="text-white">.AI</span></span>
217
+ </div>
218
+ </div>
219
+ <div class="hidden md:block">
220
+ <div class="ml-10 flex items-baseline space-x-8">
221
+ <a href="#home" class="nav-link text-white px-3 py-2 text-sm font-medium">Home</a>
222
+ <a href="#solutions" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Solutions</a>
223
+ <a href="#technology" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Technology</a>
224
+ <a href="#about" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">About</a>
225
+ <a href="#contact" class="nav-link text-gray-300 hover:text-white px-3 py-2 text-sm font-medium">Contact</a>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ <div class="hidden md:block">
230
+ <div class="ml-4 flex items-center md:ml-6">
231
+ <button class="gradient-bg text-white px-6 py-2 rounded-md orbitron font-medium hover:opacity-90 transition">
232
+ Request Demo
233
+ </button>
234
+ </div>
235
+ </div>
236
+ <div class="-mr-2 flex md:hidden">
237
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
238
+ <span class="sr-only">Open main menu</span>
239
+ <i class="fas fa-bars"></i>
240
+ </button>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Mobile menu -->
246
+ <div class="hidden md:hidden" id="mobile-menu">
247
+ <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
248
+ <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-gray-900">Home</a>
249
+ <a href="#solutions" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Solutions</a>
250
+ <a href="#technology" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Technology</a>
251
+ <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">About</a>
252
+ <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-gray-700">Contact</a>
253
+ <button class="block w-full text-left px-3 py-2 rounded-md text-base font-medium gradient-bg text-white">
254
+ Request Demo
255
+ </button>
256
+ </div>
257
+ </div>
258
+ </nav>
259
+
260
+ <!-- Hero Section -->
261
+ <section id="home" class="relative pt-32 pb-20 md:pt-40 md:pb-28 px-4 sm:px-6 lg:px-8 overflow-hidden">
262
+ <div class="blob blob-1"></div>
263
+ <div class="blob blob-2"></div>
264
+
265
+ <div class="max-w-7xl mx-auto">
266
+ <div class="md:flex md:items-center md:justify-between">
267
+ <div class="md:w-1/2 mb-12 md:mb-0">
268
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 orbitron">
269
+ <span class="gradient-text">Battlefield</span><br>
270
+ <span class="text-white">Management</span><br>
271
+ <span class="gradient-text">Redefined</span>
272
+ </h1>
273
+ <p class="text-lg text-gray-300 mb-8 max-w-lg">
274
+ CoForce.AI delivers next-generation AI-powered command and control systems for modern warfare. Our technology provides real-time situational awareness, predictive analytics, and autonomous decision support.
275
+ </p>
276
+ <div class="flex flex-wrap gap-4">
277
+ <button class="gradient-bg text-white px-8 py-3 rounded-md orbitron font-medium hover:opacity-90 transition">
278
+ Explore Solutions
279
+ </button>
280
+ <button class="border border-gray-600 text-white px-8 py-3 rounded-md orbitron font-medium hover:bg-gray-800 transition">
281
+ Watch Demo
282
+ </button>
283
+ </div>
284
+ </div>
285
+ <div class="md:w-1/2 flex justify-center">
286
+ <div class="relative">
287
+ <div class="radar">
288
+ <div class="grid-line"></div>
289
+ <div class="grid-line"></div>
290
+ <div class="grid-line"></div>
291
+ <div class="grid-line"></div>
292
+ <div class="grid-line"></div>
293
+ <div class="grid-line"></div>
294
+ </div>
295
+ <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-gray-900 rounded-lg glow"></div>
296
+ <div class="absolute -top-10 -right-10 w-24 h-24 bg-gray-900 rounded-lg glow"></div>
297
+ </div>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </section>
302
+
303
+ <!-- Trusted By Section -->
304
+ <section class="py-12 bg-gray-900 bg-opacity-50">
305
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
306
+ <p class="text-center text-gray-400 mb-8 orbitron">TRUSTED BY MILITARY FORCES WORLDWIDE</p>
307
+ <div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center justify-center">
308
+ <div class="flex justify-center">
309
+ <img src="https://via.placeholder.com/150x80?text=US+DoD" alt="US Department of Defense" class="h-16 opacity-70 hover:opacity-100 transition">
310
+ </div>
311
+ <div class="flex justify-center">
312
+ <img src="https://via.placeholder.com/150x80?text=NATO" alt="NATO" class="h-16 opacity-70 hover:opacity-100 transition">
313
+ </div>
314
+ <div class="flex justify-center">
315
+ <img src="https://via.placeholder.com/150x80?text=UK+MoD" alt="UK Ministry of Defense" class="h-16 opacity-70 hover:opacity-100 transition">
316
+ </div>
317
+ <div class="flex justify-center">
318
+ <img src="https://via.placeholder.com/150x80?text=Australia" alt="Australian Defence Force" class="h-16 opacity-70 hover:opacity-100 transition">
319
+ </div>
320
+ <div class="flex justify-center">
321
+ <img src="https://via.placeholder.com/150x80?text=Canada" alt="Canadian Armed Forces" class="h-16 opacity-70 hover:opacity-100 transition">
322
+ </div>
323
+ </div>
324
+ </div>
325
+ </section>
326
+
327
+ <!-- Solutions Section -->
328
+ <section id="solutions" class="py-20 px-4 sm:px-6 lg:px-8">
329
+ <div class="max-w-7xl mx-auto">
330
+ <div class="text-center mb-16">
331
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 orbitron gradient-text">MILITARY SOLUTIONS</h2>
332
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
333
+ Our comprehensive suite of battlefield management systems provides commanders with unprecedented situational awareness and decision superiority.
334
+ </p>
335
+ </div>
336
+
337
+ <div class="grid md:grid-cols-3 gap-8">
338
+ <div class="tech-card p-8 rounded-xl">
339
+ <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
340
+ <i class="fas fa-radar text-white text-2xl"></i>
341
+ </div>
342
+ <h3 class="text-xl font-bold mb-3 orbitron">Tactical Awareness System</h3>
343
+ <p class="text-gray-300 mb-4">
344
+ Real-time tracking of friendly and enemy forces with predictive movement analysis and threat assessment.
345
+ </p>
346
+ <a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
347
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
348
+ </a>
349
+ </div>
350
+
351
+ <div class="tech-card p-8 rounded-xl">
352
+ <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
353
+ <i class="fas fa-robot text-white text-2xl"></i>
354
+ </div>
355
+ <h3 class="text-xl font-bold mb-3 orbitron">Autonomous C2</h3>
356
+ <p class="text-gray-300 mb-4">
357
+ AI-driven command and control that provides optimized course of action recommendations in real-time.
358
+ </p>
359
+ <a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
360
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
361
+ </a>
362
+ </div>
363
+
364
+ <div class="tech-card p-8 rounded-xl">
365
+ <div class="w-16 h-16 gradient-bg rounded-lg flex items-center justify-center mb-6">
366
+ <i class="fas fa-network-wired text-white text-2xl"></i>
367
+ </div>
368
+ <h3 class="text-xl font-bold mb-3 orbitron">Joint Force Integration</h3>
369
+ <p class="text-gray-300 mb-4">
370
+ Seamless interoperability between land, air, sea, and cyber forces for unified operations.
371
+ </p>
372
+ <a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center">
373
+ Learn more <i class="fas fa-arrow-right ml-2"></i>
374
+ </a>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </section>
379
+
380
+ <!-- Technology Section -->
381
+ <section id="technology" class="py-20 bg-gray-900 bg-opacity-50 px-4 sm:px-6 lg:px-8">
382
+ <div class="max-w-7xl mx-auto">
383
+ <div class="md:flex items-center">
384
+ <div class="md:w-1/2 mb-12 md:mb-0">
385
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 orbitron gradient-text">ADVANCED BATTLEFIELD AI</h2>
386
+ <p class="text-gray-300 mb-6">
387
+ CoForce.AI leverages cutting-edge artificial intelligence and machine learning to process vast amounts of battlefield data, providing commanders with clear, actionable insights.
388
+ </p>
389
+ <ul class="space-y-4">
390
+ <li class="flex items-start">
391
+ <div class="flex-shrink-0 mt-1">
392
+ <div class="gradient-bg w-6 h-6 rounded-full flex items-center justify-center">
393
+ <i class="fas fa-check text-white text-xs"></i>
394
+ </div>
395
+ </div>
396
+ <p class="ml-3 text-gray-300">
397
+ <span class="font-medium text-white">Predictive Analytics</span> - Anticipate enemy movements and potential threats before they emerge
398
+ </p>
399
+ </li>
400
+ <li class="flex items-start">
401
+ <div class="flex-shrink-0 mt-1">
402
+ <div class="gradient-bg w-6 h-6 rounded-full flex items-center justify-center">
403
+ <i class="fas fa-check text-white text-xs"></i>
404
+ </div>
405
+ </div>
406
+ <p class="ml-3 text-gray-300">
407
+ <span class="font-medium text-white">Multi-Domain Integration</span> - Unified view across all operational domains
408
+ </p>
409
+ </li>
410
+ <li class="flex items-start">
411
+ <div class="flex-shrink-0 mt-1">
412
+ <div class="gradient-bg w-6 h-6 rounded-full flex items-center justify-center">
413
+ <i class="fas fa-check text-white text-xs"></i>
414
+ </div>
415
+ </div>
416
+ <p class="ml-3 text-gray-300">
417
+ <span class="font-medium text-white">Secure Communications</span> - Quantum-resistant encryption for all data transmissions
418
+ </p>
419
+ </li>
420
+ </ul>
421
+ </div>
422
+ <div class="md:w-1/2 md:pl-12">
423
+ <div class="relative">
424
+ <div class="bg-gray-800 rounded-xl p-4 glow">
425
+ <div class="bg-black rounded-lg overflow-hidden">
426
+ <div class="bg-gray-900 h-8 flex items-center px-4">
427
+ <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
428
+ <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
429
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
430
+ </div>
431
+ <div class="p-4">
432
+ <div class="grid grid-cols-3 gap-4 mb-4">
433
+ <div class="bg-gray-800 rounded p-2 text-center">
434
+ <div class="text-xs text-gray-400">FRIENDLY</div>
435
+ <div class="text-xl font-bold text-green-400 orbitron">247</div>
436
+ </div>
437
+ <div class="bg-gray-800 rounded p-2 text-center">
438
+ <div class="text-xs text-gray-400">NEUTRAL</div>
439
+ <div class="text-xl font-bold text-yellow-400 orbitron">83</div>
440
+ </div>
441
+ <div class="bg-gray-800 rounded p-2 text-center">
442
+ <div class="text-xs text-gray-400">HOSTILE</div>
443
+ <div class="text-xl font-bold text-red-400 orbitron">112</div>
444
+ </div>
445
+ </div>
446
+ <div class="h-64 bg-gray-800 rounded mb-4 relative overflow-hidden">
447
+ <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black opacity-30"></div>
448
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 rounded-full border-2 border-dashed border-blue-400"></div>
449
+ <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-64 h-64 rounded-full border border-blue-400 opacity-30"></div>
450
+ <div class="absolute top-1/4 left-1/4 w-3 h-3 rounded-full bg-green-400 pulse"></div>
451
+ <div class="absolute top-1/3 left-2/3 w-3 h-3 rounded-full bg-green-400 pulse"></div>
452
+ <div class="absolute top-2/3 left-1/3 w-3 h-3 rounded-full bg-red-400 pulse"></div>
453
+ <div class="absolute top-3/4 left-3/4 w-3 h-3 rounded-full bg-red-400 pulse"></div>
454
+ <div class="absolute top-1/2 left-1/4 w-3 h-3 rounded-full bg-yellow-400 pulse"></div>
455
+ </div>
456
+ <div class="flex justify-between text-xs text-gray-400">
457
+ <div>THREAT LEVEL: <span class="text-yellow-400">ELEVATED</span></div>
458
+ <div>LAST UPDATE: <span class="text-white">00:23:45</span></div>
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ <div class="absolute -bottom-6 -right-6 w-24 h-24 bg-gray-900 rounded-lg glow"></div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+ </section>
469
+
470
+ <!-- Stats Section -->
471
+ <section class="py-16 px-4 sm:px-6 lg:px-8">
472
+ <div class="max-w-7xl mx-auto">
473
+ <div class="grid md:grid-cols-4 gap-8 text-center">
474
+ <div class="p-6">
475
+ <div class="text-4xl md:text-5xl font-bold mb-2 orbitron gradient-text">15+</div>
476
+ <div class="text-gray-300">Countries Deployed</div>
477
+ </div>
478
+ <div class="p-6">
479
+ <div class="text-4xl md:text-5xl font-bold mb-2 orbitron gradient-text">24/7</div>
480
+ <div class="text-gray-300">Operational Support</div>
481
+ </div>
482
+ <div class="p-6">
483
+ <div class="text-4xl md:text-5xl font-bold mb-2 orbitron gradient-text">99.99%</div>
484
+ <div class="text-gray-300">System Uptime</div>
485
+ </div>
486
+ <div class="p-6">
487
+ <div class="text-4xl md:text-5xl font-bold mb-2 orbitron gradient-text">0</div>
488
+ <div class="text-gray-300">Security Breaches</div>
489
+ </div>
490
+ </div>
491
+ </div>
492
+ </section>
493
+
494
+ <!-- About Section -->
495
+ <section id="about" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 bg-opacity-50">
496
+ <div class="max-w-7xl mx-auto">
497
+ <div class="text-center mb-16">
498
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 orbitron gradient-text">ABOUT CoForce.AI</h2>
499
+ <p class="text-xl text-gray-300 max-w-3xl mx-auto">
500
+ Founded by former special operations personnel and AI researchers, we bridge the gap between cutting-edge technology and real-world military needs.
501
+ </p>
502
+ </div>
503
+
504
+ <div class="md:flex items-center">
505
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
506
+ <div class="relative">
507
+ <img src="https://via.placeholder.com/600x400?text=CoForce.AI+Team" alt="CoForce.AI Team" class="rounded-lg w-full">
508
+ <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-gray-800 rounded-lg glow"></div>
509
+ </div>
510
+ </div>
511
+ <div class="md:w-1/2">
512
+ <h3 class="text-2xl font-bold mb-4 orbitron">Our Mission</h3>
513
+ <p class="text-gray-300 mb-6">
514
+ To revolutionize military decision-making through artificial intelligence, reducing casualties and increasing operational effectiveness.
515
+ </p>
516
+ <div class="mb-6">
517
+ <div class="flex items-center mb-4">
518
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center mr-4">
519
+ <i class="fas fa-shield-alt text-white"></i>
520
+ </div>
521
+ <div>
522
+ <h4 class="font-bold text-white">Security First</h4>
523
+ <p class="text-gray-300 text-sm">All systems designed with military-grade security from the ground up</p>
524
+ </div>
525
+ </div>
526
+ <div class="flex items-center mb-4">
527
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center mr-4">
528
+ <i class="fas fa-brain text-white"></i>
529
+ </div>
530
+ <div>
531
+ <h4 class="font-bold text-white">AI Expertise</h4>
532
+ <p class="text-gray-300 text-sm">PhD-level researchers specializing in defense applications of AI</p>
533
+ </div>
534
+ </div>
535
+ <div class="flex items-center">
536
+ <div class="gradient-bg w-10 h-10 rounded-full flex items-center justify-center mr-4">
537
+ <i class="fas fa-medal text-white"></i>
538
+ </div>
539
+ <div>
540
+ <h4 class="font-bold text-white">Proven Experience</h4>
541
+ <p class="text-gray-300 text-sm">Team members with decades of combined military service</p>
542
+ </div>
543
+ </div>
544
+ </div>
545
+ <button class="border border-gray-600 text-white px-6 py-2 rounded-md orbitron font-medium hover:bg-gray-800 transition">
546
+ Meet Our Team
547
+ </button>
548
+ </div>
549
+ </div>
550
+ </div>
551
+ </section>
552
+
553
+ <!-- Testimonials -->
554
+ <section class="py-20 px-4 sm:px-6 lg:px-8">
555
+ <div class="max-w-7xl mx-auto">
556
+ <div class="text-center mb-16">
557
+ <h2 class="text-3xl md:text-4xl font-bold mb-4 orbitron gradient-text">TRUSTED BY MILITARY LEADERS</h2>
558
+ </div>
559
+
560
+ <div class="grid md:grid-cols-3 gap-8">
561
+ <div class="tech-card p-8 rounded-xl">
562
+ <div class="flex items-center mb-6">
563
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
564
+ <i class="fas fa-user-secret text-gray-300"></i>
565
+ </div>
566
+ <div>
567
+ <h4 class="font-bold text-white">General M. Richardson</h4>
568
+ <p class="text-gray-400 text-sm">US Army (Ret.)</p>
569
+ </div>
570
+ </div>
571
+ <p class="text-gray-300 italic">
572
+ "CoForce.AI's predictive analytics gave our units a decisive advantage during operations. The system anticipated enemy movements with uncanny accuracy."
573
+ </p>
574
+ <div class="mt-4 flex">
575
+ <i class="fas fa-star text-yellow-400"></i>
576
+ <i class="fas fa-star text-yellow-400"></i>
577
+ <i class="fas fa-star text-yellow-400"></i>
578
+ <i class="fas fa-star text-yellow-400"></i>
579
+ <i class="fas fa-star text-yellow-400"></i>
580
+ </div>
581
+ </div>
582
+
583
+ <div class="tech-card p-8 rounded-xl">
584
+ <div class="flex items-center mb-6">
585
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
586
+ <i class="fas fa-user-tie text-gray-300"></i>
587
+ </div>
588
+ <div>
589
+ <h4 class="font-bold text-white">Admiral J. Kowalski</h4>
590
+ <p class="text-gray-400 text-sm">Royal Navy</p>
591
+ </div>
592
+ </div>
593
+ <p class="text-gray-300 italic">
594
+ "The joint force integration capabilities have transformed how we coordinate between naval, air, and special operations forces. A game-changer for modern warfare."
595
+ </p>
596
+ <div class="mt-4 flex">
597
+ <i class="fas fa-star text-yellow-400"></i>
598
+ <i class="fas fa-star text-yellow-400"></i>
599
+ <i class="fas fa-star text-yellow-400"></i>
600
+ <i class="fas fa-star text-yellow-400"></i>
601
+ <i class="fas fa-star text-yellow-400"></i>
602
+ </div>
603
+ </div>
604
+
605
+ <div class="tech-card p-8 rounded-xl">
606
+ <div class="flex items-center mb-6">
607
+ <div class="w-12 h-12 rounded-full bg-gray-700 flex items-center justify-center mr-4">
608
+ <i class="fas fa-user-astronaut text-gray-300"></i>
609
+ </div>
610
+ <div>
611
+ <h4 class="font-bold text-white">Colonel A. Petrov</h4>
612
+ <p class="text-gray-400 text-sm">NATO Consultant</p>
613
+ </div>
614
+ </div>
615
+ <p class="text-gray-300 italic">
616
+ "In 20 years of military service, I've never seen a command and control system as intuitive and powerful as CoForce.AI's platform. It's the future of battlefield management."
617
+ </p>
618
+ <div class="mt-4 flex">
619
+ <i class="fas fa-star text-yellow-400"></i>
620
+ <i class="fas fa-star text-yellow-400"></i>
621
+ <i class="fas fa-star text-yellow-400"></i>
622
+ <i class="fas fa-star text-yellow-400"></i>
623
+ <i class="fas fa-star-half-alt text-yellow-400"></i>
624
+ </div>
625
+ </div>
626
+ </div>
627
+ </div>
628
+ </section>
629
+
630
+ <!-- Contact Section -->
631
+ <section id="contact" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900 bg-opacity-50">
632
+ <div class="max-w-7xl mx-auto">
633
+ <div class="md:flex">
634
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
635
+ <h2 class="text-3xl md:text-4xl font-bold mb-6 orbitron gradient-text">CONTACT OUR TEAM</h2>
636
+ <p class="text-gray-300 mb-8">
637
+ For inquiries about our battlefield management systems or to schedule a confidential demonstration, please contact us using the form or information below.
638
+ </p>
639
+ <div class="space-y-4">
640
+ <div class="flex items-start">
641
+ <div class="flex-shrink-0 mt-1">
642
+ <div class="gradient-bg w-8 h-8 rounded-full flex items-center justify-center">
643
+ <i class="fas fa-map-marker-alt text-white text-sm"></i>
644
+ </div>
645
+ </div>
646
+ <p class="ml-3 text-gray-300">
647
+ <span class="font-medium text-white">Headquarters:</span><br>
648
+ 1600 Defense Way, Suite 450<br>
649
+ Arlington, VA 22202
650
+ </p>
651
+ </div>
652
+ <div class="flex items-start">
653
+ <div class="flex-shrink-0 mt-1">
654
+ <div class="gradient-bg w-8 h-8 rounded-full flex items-center justify-center">
655
+ <i class="fas fa-phone-alt text-white text-sm"></i>
656
+ </div>
657
+ </div>
658
+ <p class="ml-3 text-gray-300">
659
+ <span class="font-medium text-white">Secure Line:</span><br>
660
+ +1 (703) 555-0199
661
+ </p>
662
+ </div>
663
+ <div class="flex items-start">
664
+ <div class="flex-shrink-0 mt-1">
665
+ <div class="gradient-bg w-8 h-8 rounded-full flex items-center justify-center">
666
+ <i class="fas fa-envelope text-white text-sm"></i>
667
+ </div>
668
+ </div>
669
+ <p class="ml-3 text-gray-300">
670
+ <span class="font-medium text-white">General Inquiries:</span><br>
671
+ info@coforce.ai
672
+ </p>
673
+ </div>
674
+ </div>
675
+ </div>
676
+ <div class="md:w-1/2">
677
+ <form class="tech-card p-8 rounded-xl">
678
+ <div class="mb-6">
679
+ <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Full Name</label>
680
+ <input type="text" id="name" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
681
+ </div>
682
+ <div class="mb-6">
683
+ <label for="organization" class="block text-sm font-medium text-gray-300 mb-2">Organization</label>
684
+ <input type="text" id="organization" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
685
+ </div>
686
+ <div class="mb-6">
687
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email</label>
688
+ <input type="email" id="email" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500">
689
+ </div>
690
+ <div class="mb-6">
691
+ <label for="message" class="block text-sm font-medium text-gray-300 mb-2">Message</label>
692
+ <textarea id="message" rows="4" class="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
693
+ </div>
694
+ <div class="mb-6">
695
+ <div class="flex items-start">
696
+ <div class="flex items-center h-5">
697
+ <input id="secure" name="secure" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded bg-gray-800">
698
+ </div>
699
+ <div class="ml-3 text-sm">
700
+ <label for="secure" class="font-medium text-gray-300">This message contains no classified information</label>
701
+ </div>
702
+ </div>
703
+ </div>
704
+ <button type="submit" class="w-full gradient-bg text-white px-6 py-3 rounded-md orbitron font-medium hover:opacity-90 transition">
705
+ Send Secure Message
706
+ </button>
707
+ </form>
708
+ </div>
709
+ </div>
710
+ </div>
711
+ </section>
712
+
713
+ <!-- Footer -->
714
+ <footer class="bg-black py-12 px-4 sm:px-6 lg:px-8">
715
+ <div class="max-w-7xl mx-auto">
716
+ <div class="md:flex md:items-center md:justify-between">
717
+ <div class="flex justify-center md:justify-start mb-8 md:mb-0">
718
+ <div class="flex items-center">
719
+ <div class="hexagon w-10 h-10 gradient-bg flex items-center justify-center">
720
+ <span class="orbitron font-bold text-white">CF</span>
721
+ </div>
722
+ <span class="ml-3 orbitron text-2xl font-bold gradient-text">CoForce<span class="text-white">.AI</span></span>
723
+ </div>
724
+ </div>
725
+ <div class="flex justify-center md:justify-end space-x-6">
726
+ <a href="#" class="text-gray-400 hover:text-white">
727
+ <i class="fab fa-twitter"></i>
728
+ </a>
729
+ <a href="#" class="text-gray-400 hover:text-white">
730
+ <i class="fab fa-linkedin"></i>
731
+ </a>
732
+ <a href="#" class="text-gray-400 hover:text-white">
733
+ <i class="fab fa-youtube"></i>
734
+ </a>
735
+ </div>
736
+ </div>
737
+ <div class="mt-8 border-t border-gray-800 pt-8 md:flex md:items-center md:justify-between">
738
+ <div class="text-center md:text-left mb-4 md:mb-0">
739
+ <p class="text-sm text-gray-400">
740
+ &copy; 2023 CoForce.AI Defense Technologies. All rights reserved.
741
+ </p>
742
+ </div>
743
+ <div class="flex justify-center md:justify-end space-x-6">
744
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Privacy Policy</a>
745
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Terms of Service</a>
746
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Security</a>
747
+ <a href="#" class="text-sm text-gray-400 hover:text-white">Compliance</a>
748
+ </div>
749
+ </div>
750
+ </div>
751
+ </footer>
752
+
753
+ <script>
754
+ // Mobile menu toggle
755
+ document.getElementById('mobile-menu-button').addEventListener('click', function() {
756
+ const menu = document.getElementById('mobile-menu');
757
+ if (menu.classList.contains('hidden')) {
758
+ menu.classList.remove('hidden');
759
+ this.innerHTML = '<i class="fas fa-times"></i>';
760
+ } else {
761
+ menu.classList.add('hidden');
762
+ this.innerHTML = '<i class="fas fa-bars"></i>';
763
+ }
764
+ });
765
+
766
+ // Smooth scrolling for anchor links
767
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
768
+ anchor.addEventListener('click', function (e) {
769
+ e.preventDefault();
770
+
771
+ const targetId = this.getAttribute('href');
772
+ if (targetId === '#') return;
773
+
774
+ const targetElement = document.querySelector(targetId);
775
+ if (targetElement) {
776
+ window.scrollTo({
777
+ top: targetElement.offsetTop - 80,
778
+ behavior: 'smooth'
779
+ });
780
+
781
+ // Close mobile menu if open
782
+ const mobileMenu = document.getElementById('mobile-menu');
783
+ if (!mobileMenu.classList.contains('hidden')) {
784
+ mobileMenu.classList.add('hidden');
785
+ document.getElementById('mobile-menu-button').innerHTML = '<i class="fas fa-bars"></i>';
786
+ }
787
+ }
788
+ });
789
+ });
790
+
791
+ // Add shadow to navbar on scroll
792
+ window.addEventListener('scroll', function() {
793
+ const nav = document.querySelector('nav');
794
+ if (window.scrollY > 10) {
795
+ nav.classList.add('shadow-lg');
796
+ } else {
797
+ nav.classList.remove('shadow-lg');
798
+ }
799
+ });
800
+ </script>
801
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - <a href="https://enzostvs-deepsite.hf.space?remix=sikang99/coforce-ai-sample-page" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
802
+ </html>