Codewithsalty commited on
Commit
4e3de37
·
verified ·
1 Parent(s): fbda5d9

Create a high-end, luxurious frontend website for an AI-powered defense and security toolkit called "SurakhshaAI," developed for the URAAN Pakistan Techathon in the Defense and Strategic domain. The website should embody a professional, patriotic theme inspired by Pakistan's national colors—deep green (#006600) as primary, white (#FFFFFF) for accents, gold (#FFD700) for highlights, and navy blue (#000080) for tech/security elements—to evoke national pride, security, and innovation. Use elegant sans-serif fonts like Montserrat or Poppins for headings and Roboto for body text, with subtle gradients (e.g., green-to-navy) for backgrounds to give a premium, high-tech feel.

Browse files

The site structure includes:

Homepage: A hero section with a full-screen animated background video of abstract AI surveillance visuals (e.g., glowing maps of Pakistan borders fading in/out). Include a luxurious logo ("SurakhshaAI" in gold with a shield icon), tagline ("Integrated AI Defense Toolkit for Pakistan's Security"), and animated call-to-action button ("Explore Modules") that pulses gently on hover. Below, feature three card sections for the modules with parallax scrolling effects, each card flipping on hover to reveal details.
Threat Intelligence Module Page: Dedicated to an AI agent detecting anti-Pakistan sentiment. Include an interactive demo form where users input text/URLs, and upon submission, simulate detection with loading animations (e.g., spinning shield icon). Use luxurious buttons like 3D-embossed "Analyze" with glow effects and smooth fade-in results display.
Cyber Defense Module Page: For the Network Intrusion Detection System. Feature a dashboard-like interface with animated charts (e.g., real-time threat radar pulsing in green/gold) and input fields for network logs. Buttons should have ripple effects on click, with high-end tooltips on hover.
Border Anomaly Detection Module Page: For video surveillance analytics. Include a video upload/demo section with drag-and-drop interface, where uploaded videos trigger animated processing (e.g., progress bar with particle effects). Display results in a grid of highlighted anomaly frames with zoom-in animations.
About/Contact Page: Overview of URAAN Pakistan integration, with animated timeline of phases (e.g., Phase 1-3 scrolling reveals). Include a contact form with luxurious input fields (border glow on focus) and submit button with confetti success animation.
Navigation: Sticky top navbar with smooth slide-down animation on scroll, including dropdown menus with fade-in items. Add a footer with social links, credits, and subtle wave animation.
Global Features: Full animations using CSS/GSAP-like effects—smooth page transitions (fade/slide), hover zooms on images/cards, particle backgrounds on sections, and parallax scrolling. Ensure responsiveness for mobile/desktop, dark mode toggle (navy base for luxury), accessibility (ARIA labels), and SEO optimization. Use modern frameworks like React or HTML/CSS/JS for code generation, with clean, modular code.

Files changed (3) hide show
  1. README.md +7 -4
  2. index.html +384 -18
  3. threat-intelligence.html +372 -0
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Surakhshaai Shieldtech Patriot
3
- emoji: 📉
4
  colorFrom: blue
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: SurakhshaAI ShieldTech Patriot 🛡️
 
3
  colorFrom: blue
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,385 @@
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>SurakhshaAI - AI Defense Toolkit for Pakistan</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Poppins:wght@400;500&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ pakgreen: '#006600',
19
+ pakgold: '#FFD700',
20
+ pakblue: '#000080',
21
+ },
22
+ fontFamily: {
23
+ montserrat: ['Montserrat', 'sans-serif'],
24
+ poppins: ['Poppins', 'sans-serif'],
25
+ roboto: ['Roboto', 'sans-serif'],
26
+ },
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ .hero-video {
33
+ position: absolute;
34
+ top: 0;
35
+ left: 0;
36
+ width: 100%;
37
+ height: 100%;
38
+ object-fit: cover;
39
+ z-index: -1;
40
+ opacity: 0.4;
41
+ }
42
+ .flip-card {
43
+ perspective: 1000px;
44
+ }
45
+ .flip-card-inner {
46
+ transition: transform 0.8s;
47
+ transform-style: preserve-3d;
48
+ }
49
+ .flip-card:hover .flip-card-inner {
50
+ transform: rotateY(180deg);
51
+ }
52
+ .flip-card-front, .flip-card-back {
53
+ position: absolute;
54
+ width: 100%;
55
+ height: 100%;
56
+ backface-visibility: hidden;
57
+ }
58
+ .flip-card-back {
59
+ transform: rotateY(180deg);
60
+ }
61
+ .pulse-glow {
62
+ animation: pulse 2s infinite;
63
+ }
64
+ @keyframes pulse {
65
+ 0% {
66
+ box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
67
+ }
68
+ 70% {
69
+ box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
70
+ }
71
+ 100% {
72
+ box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
73
+ }
74
+ }
75
+ .nav-transition {
76
+ transition: all 0.3s ease;
77
+ }
78
+ .gradient-bg {
79
+ background: linear-gradient(135deg, #006600 0%, #000080 100%);
80
+ }
81
+ </style>
82
+ </head>
83
+ <body class="font-roboto bg-white text-gray-800">
84
+ <!-- Sticky Navbar -->
85
+ <nav class="fixed w-full z-50 nav-transition bg-white shadow-md">
86
+ <div class="container mx-auto px-6 py-3">
87
+ <div class="flex items-center justify-between">
88
+ <div class="flex items-center">
89
+ <div class="flex items-center">
90
+ <i data-feather="shield" class="text-pakgold w-8 h-8 mr-2"></i>
91
+ <span class="font-montserrat font-bold text-2xl text-pakgreen">Surakhsha<span class="text-pakblue">AI</span></span>
92
+ </div>
93
+ </div>
94
+ <div class="hidden md:flex items-center space-x-8">
95
+ <a href="#" class="text-pakgreen font-poppins font-medium hover:text-pakgold">Home</a>
96
+ <a href="#" class="text-pakgreen font-poppins font-medium hover:text-pakgold">Modules</a>
97
+ <a href="#" class="text-pakgreen font-poppins font-medium hover:text-pakgold">About</a>
98
+ <a href="#" class="text-pakgreen font-poppins font-medium hover:text-pakgold">Contact</a>
99
+ <button class="bg-pakgreen text-white px-6 py-2 rounded-full font-poppins hover:bg-pakblue transition duration-300">
100
+ Demo
101
+ </button>
102
+ </div>
103
+ <div class="md:hidden">
104
+ <button class="text-pakgreen focus:outline-none">
105
+ <i data-feather="menu"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </nav>
111
+
112
+ <!-- Hero Section -->
113
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
114
+ <video autoplay muted loop class="hero-video">
115
+ <source src="https://static.videezy.com/system/resources/previews/000/039/582/original/Network_010.mp4" type="video/mp4">
116
+ </video>
117
+ <div class="container mx-auto px-6 z-10 text-center">
118
+ <div class="max-w-4xl mx-auto">
119
+ <div class="flex justify-center mb-6">
120
+ <i data-feather="shield" class="w-16 h-16 text-pakgold"></i>
121
+ </div>
122
+ <h1 class="font-montserrat font-bold text-5xl md:text-6xl text-white mb-4">
123
+ <span class="text-pakgreen">Surakhsha</span><span class="text-pakblue">AI</span>
124
+ </h1>
125
+ <p class="font-poppins text-xl text-white mb-8">
126
+ Integrated AI Defense Toolkit for Pakistan's Security
127
+ </p>
128
+ <button class="pulse-glow bg-pakgold text-pakgreen font-poppins font-bold px-8 py-3 rounded-full hover:bg-white transition duration-300">
129
+ Explore Modules
130
+ </button>
131
+ </div>
132
+ </div>
133
+ </section>
134
+
135
+ <!-- Modules Section -->
136
+ <section class="py-20 bg-gradient-to-b from-white to-gray-100">
137
+ <div class="container mx-auto px-6">
138
+ <div class="text-center mb-16">
139
+ <h2 class="font-montserrat font-bold text-4xl text-pakgreen mb-4">Our Defense Modules</h2>
140
+ <p class="font-poppins text-lg text-gray-600 max-w-2xl mx-auto">
141
+ Cutting-edge AI solutions tailored for Pakistan's security needs
142
+ </p>
143
+ </div>
144
+
145
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
146
+ <!-- Threat Intelligence Card -->
147
+ <div class="flip-card h-96">
148
+ <div class="flip-card-inner h-full rounded-xl shadow-xl">
149
+ <div class="flip-card-front bg-white rounded-xl p-8 flex flex-col items-center justify-center border-2 border-pakgreen">
150
+ <div class="bg-pakgreen p-4 rounded-full mb-6">
151
+ <i data-feather="eye" class="w-10 h-10 text-white"></i>
152
+ </div>
153
+ <h3 class="font-montserrat font-bold text-2xl text-pakgreen mb-2">Threat Intelligence</h3>
154
+ <p class="font-poppins text-gray-600 text-center">
155
+ Real-time analysis of potential security threats
156
+ </p>
157
+ </div>
158
+ <div class="flip-card-back bg-pakgreen rounded-xl p-8 flex flex-col items-center justify-center text-white">
159
+ <h3 class="font-montserrat font-bold text-2xl mb-4">Key Features</h3>
160
+ <ul class="font-poppins text-center space-y-2">
161
+ <li>AI-powered threat detection</li>
162
+ <li>Real-time alerts</li>
163
+ <li>Pattern recognition</li>
164
+ <li>Automated reporting</li>
165
+ </ul>
166
+ <button class="mt-6 bg-pakgold text-pakgreen px-6 py-2 rounded-full font-poppins hover:bg-white transition duration-300">
167
+ Learn More
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Cyber Defense Card -->
174
+ <div class="flip-card h-96">
175
+ <div class="flip-card-inner h-full rounded-xl shadow-xl">
176
+ <div class="flip-card-front bg-white rounded-xl p-8 flex flex-col items-center justify-center border-2 border-pakblue">
177
+ <div class="bg-pakblue p-4 rounded-full mb-6">
178
+ <i data-feather="lock" class="w-10 h-10 text-white"></i>
179
+ </div>
180
+ <h3 class="font-montserrat font-bold text-2xl text-pakblue mb-2">Cyber Defense</h3>
181
+ <p class="font-poppins text-gray-600 text-center">
182
+ Advanced protection against digital threats
183
+ </p>
184
+ </div>
185
+ <div class="flip-card-back bg-pakblue rounded-xl p-8 flex flex-col items-center justify-center text-white">
186
+ <h3 class="font-montserrat font-bold text-2xl mb-4">Key Features</h3>
187
+ <ul class="font-poppins text-center space-y-2">
188
+ <li>Network monitoring</li>
189
+ <li>Intrusion prevention</li>
190
+ <li>Vulnerability scanning</li>
191
+ <li>Incident response</li>
192
+ </ul>
193
+ <button class="mt-6 bg-pakgold text-pakblue px-6 py-2 rounded-full font-poppins hover:bg-white transition duration-300">
194
+ Learn More
195
+ </button>
196
+ </div>
197
+ </div>
198
+ </div>
199
+
200
+ <!-- Border Anomaly Card -->
201
+ <div class="flip-card h-96">
202
+ <div class="flip-card-inner h-full rounded-xl shadow-xl">
203
+ <div class="flip-card-front bg-white rounded-xl p-8 flex flex-col items-center justify-center border-2 border-pakgold">
204
+ <div class="bg-pakgold p-4 rounded-full mb-6">
205
+ <i data-feather="map" class="w-10 h-10 text-white"></i>
206
+ </div>
207
+ <h3 class="font-montserrat font-bold text-2xl text-pakgold mb-2">Border Anomaly</h3>
208
+ <p class="font-poppins text-gray-600 text-center">
209
+ AI-powered surveillance for national borders
210
+ </p>
211
+ </div>
212
+ <div class="flip-card-back gradient-bg rounded-xl p-8 flex flex-col items-center justify-center text-white">
213
+ <h3 class="font-montserrat font-bold text-2xl mb-4">Key Features</h3>
214
+ <ul class="font-poppins text-center space-y-2">
215
+ <li>Motion detection</li>
216
+ <li>Object recognition</li>
217
+ <li>Automated alerts</li>
218
+ <li>Geo-tracking</li>
219
+ </ul>
220
+ <button class="mt-6 bg-pakgold text-pakgreen px-6 py-2 rounded-full font-poppins hover:bg-white transition duration-300">
221
+ Learn More
222
+ </button>
223
+ </div>
224
+ </div>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </section>
229
+
230
+ <!-- About Section -->
231
+ <section class="py-20 bg-pakgreen text-white">
232
+ <div class="container mx-auto px-6">
233
+ <div class="flex flex-col md:flex-row items-center">
234
+ <div class="md:w-1/2 mb-10 md:mb-0">
235
+ <h2 class="font-montserrat font-bold text-4xl mb-6">Developed for <span class="text-pakgold">URAAN</span> Pakistan Techathon</h2>
236
+ <p class="font-poppins text-lg mb-8">
237
+ SurakhshaAI represents the cutting edge of defense technology, proudly developed as part of Pakistan's URAAN initiative to foster innovation in national security.
238
+ </p>
239
+ <div class="space-y-6">
240
+ <div class="flex items-start">
241
+ <div class="bg-pakgold p-2 rounded-full mr-4">
242
+ <i data-feather="flag" class="w-5 h-5 text-pakgreen"></i>
243
+ </div>
244
+ <div>
245
+ <h3 class="font-montserrat font-bold text-xl mb-1">Patriotic Foundation</h3>
246
+ <p class="font-poppins">Built with Pakistan's security needs at heart</p>
247
+ </div>
248
+ </div>
249
+ <div class="flex items-start">
250
+ <div class="bg-pakgold p-2 rounded-full mr-4">
251
+ <i data-feather="cpu" class="w-5 h-5 text-pakgreen"></i>
252
+ </div>
253
+ <div>
254
+ <h3 class="font-montserrat font-bold text-xl mb-1">AI-Powered</h3>
255
+ <p class="font-poppins">Leveraging machine learning for proactive defense</p>
256
+ </div>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ <div class="md:w-1/2 flex justify-center">
261
+ <div class="relative">
262
+ <div class="absolute -top-6 -left-6 w-64 h-64 border-4 border-pakgold opacity-20"></div>
263
+ <div class="absolute -bottom-6 -right-6 w-64 h-64 border-4 border-pakgold opacity-20"></div>
264
+ <img src="http://static.photos/technology/640x360/42" alt="AI Defense Technology" class="relative z-10 rounded-lg shadow-xl w-full max-w-md">
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </section>
270
+
271
+ <!-- CTA Section -->
272
+ <section class="py-20 bg-gray-100">
273
+ <div class="container mx-auto px-6 text-center">
274
+ <h2 class="font-montserrat font-bold text-4xl text-pakgreen mb-6">Ready to Secure Our Nation?</h2>
275
+ <p class="font-poppins text-lg text-gray-600 max-w-2xl mx-auto mb-10">
276
+ Join us in revolutionizing Pakistan's defense capabilities with AI-powered security solutions.
277
+ </p>
278
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
279
+ <button class="bg-pakgreen text-white px-8 py-3 rounded-full font-poppins font-bold hover:bg-pakblue transition duration-300">
280
+ Request Demo
281
+ </button>
282
+ <button class="bg-white text-pakgreen border-2 border-pakgreen px-8 py-3 rounded-full font-poppins font-bold hover:bg-pakgreen hover:text-white transition duration-300">
283
+ Contact Us
284
+ </button>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Footer -->
290
+ <footer class="bg-pakblue text-white py-12">
291
+ <div class="container mx-auto px-6">
292
+ <div class="flex flex-col md:flex-row justify-between">
293
+ <div class="mb-8 md:mb-0">
294
+ <div class="flex items-center mb-4">
295
+ <i data-feather="shield" class="w-8 h-8 text-pakgold mr-2"></i>
296
+ <span class="font-montserrat font-bold text-2xl">Surakhsha<span class="text-pakgold">AI</span></span>
297
+ </div>
298
+ <p class="font-poppins max-w-xs">
299
+ AI-powered defense solutions for a secure Pakistan.
300
+ </p>
301
+ <div class="flex space-x-4 mt-4">
302
+ <a href="#" class="text-white hover:text-pakgold transition duration-300">
303
+ <i data-feather="twitter"></i>
304
+ </a>
305
+ <a href="#" class="text-white hover:text-pakgold transition duration-300">
306
+ <i data-feather="facebook"></i>
307
+ </a>
308
+ <a href="#" class="text-white hover:text-pakgold transition duration-300">
309
+ <i data-feather="linkedin"></i>
310
+ </a>
311
+ <a href="#" class="text-white hover:text-pakgold transition duration-300">
312
+ <i data-feather="github"></i>
313
+ </a>
314
+ </div>
315
+ </div>
316
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
317
+ <div>
318
+ <h3 class="font-montserrat font-bold text-lg mb-4">Modules</h3>
319
+ <ul class="font-poppins space-y-2">
320
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Threat Intelligence</a></li>
321
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Cyber Defense</a></li>
322
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Border Anomaly</a></li>
323
+ </ul>
324
+ </div>
325
+ <div>
326
+ <h3 class="font-montserrat font-bold text-lg mb-4">Company</h3>
327
+ <ul class="font-poppins space-y-2">
328
+ <li><a href="#" class="hover:text-pakgold transition duration-300">About</a></li>
329
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Team</a></li>
330
+ <li><a href="#" class="hover:text-pakgold transition duration-300">URAAN</a></li>
331
+ </ul>
332
+ </div>
333
+ <div>
334
+ <h3 class="font-montserrat font-bold text-lg mb-4">Legal</h3>
335
+ <ul class="font-poppins space-y-2">
336
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Privacy</a></li>
337
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Terms</a></li>
338
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Security</a></li>
339
+ </ul>
340
+ </div>
341
+ </div>
342
+ </div>
343
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
344
+ <p class="font-poppins mb-4 md:mb-0">© 2023 SurakhshaAI. All rights reserved.</p>
345
+ <div class="flex space-x-6">
346
+ <a href="#" class="font-poppins hover:text-pakgold transition duration-300">Privacy Policy</a>
347
+ <a href="#" class="font-poppins hover:text-pakgold transition duration-300">Terms of Service</a>
348
+ <a href="#" class="font-poppins hover:text-pakgold transition duration-300">Contact Us</a>
349
+ </div>
350
+ </div>
351
+ </div>
352
+ </footer>
353
+
354
+ <script>
355
+ // GSAP animations
356
+ gsap.from(".hero-video", {duration: 2, opacity: 0, scale: 1.2});
357
+ gsap.from("nav", {duration: 1, y: -100, opacity: 0});
358
+ gsap.from(".flip-card", {
359
+ duration: 1,
360
+ y: 50,
361
+ opacity: 0,
362
+ stagger: 0.2,
363
+ scrollTrigger: {
364
+ trigger: ".flip-card",
365
+ start: "top 80%",
366
+ }
367
+ });
368
+
369
+ // Navbar scroll effect
370
+ window.addEventListener('scroll', function() {
371
+ const nav = document.querySelector('nav');
372
+ if (window.scrollY > 50) {
373
+ nav.classList.add('bg-white', 'shadow-lg');
374
+ nav.classList.remove('bg-transparent');
375
+ } else {
376
+ nav.classList.add('bg-transparent');
377
+ nav.classList.remove('bg-white', 'shadow-lg');
378
+ }
379
+ });
380
+
381
+ // Initialize Feather Icons
382
+ feather.replace();
383
+ </script>
384
+ </body>
385
  </html>
threat-intelligence.html ADDED
@@ -0,0 +1,372 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Threat Intelligence Module | SurakhshaAI</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
12
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Poppins:wght@400;500&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
13
+ <script>
14
+ tailwind.config = {
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ pakgreen: '#006600',
19
+ pakgold: '#FFD700',
20
+ pakblue: '#000080',
21
+ },
22
+ fontFamily: {
23
+ montserrat: ['Montserrat', 'sans-serif'],
24
+ poppins: ['Poppins', 'sans-serif'],
25
+ roboto: ['Roboto', 'sans-serif'],
26
+ },
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ .analyze-btn {
33
+ background: linear-gradient(135deg, #FFD700 0%, #006600 100%);
34
+ box-shadow: 0 4px 15px rgba(0, 102, 0, 0.3);
35
+ transition: all 0.3s ease;
36
+ transform-style: preserve-3d;
37
+ }
38
+ .analyze-btn:hover {
39
+ transform: translateY(-3px) scale(1.02);
40
+ box-shadow: 0 8px 20px rgba(0, 102, 0, 0.4);
41
+ }
42
+ .analyze-btn:active {
43
+ transform: translateY(1px);
44
+ }
45
+ .input-glow:focus {
46
+ box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.5);
47
+ border-color: #FFD700;
48
+ }
49
+ .shield-spin {
50
+ animation: spin 1.5s linear infinite;
51
+ }
52
+ @keyframes spin {
53
+ 0% { transform: rotate(0deg); }
54
+ 100% { transform: rotate(360deg); }
55
+ }
56
+ .result-card {
57
+ transition: all 0.5s ease;
58
+ transform-origin: top center;
59
+ }
60
+ .result-card.show {
61
+ opacity: 1;
62
+ transform: scaleY(1);
63
+ }
64
+ </style>
65
+ </head>
66
+ <body class="font-roboto bg-gray-50">
67
+ <!-- Navbar -->
68
+ <nav class="fixed w-full z-50 bg-white shadow-lg">
69
+ <div class="container mx-auto px-6 py-3">
70
+ <div class="flex items-center justify-between">
71
+ <div class="flex items-center">
72
+ <div class="flex items-center">
73
+ <i data-feather="shield" class="text-pakgold w-8 h-8 mr-2"></i>
74
+ <span class="font-montserrat font-bold text-2xl text-pakgreen">Surakhsha<span class="text-pakblue">AI</span></span>
75
+ </div>
76
+ </div>
77
+ <div class="hidden md:flex items-center space-x-8">
78
+ <a href="index.html" class="text-gray-600 font-poppins font-medium hover:text-pakgreen">Home</a>
79
+ <a href="#" class="text-pakgreen font-poppins font-medium">Modules</a>
80
+ <a href="#" class="text-gray-600 font-poppins font-medium hover:text-pakgreen">About</a>
81
+ <a href="#" class="text-gray-600 font-poppins font-medium hover:text-pakgreen">Contact</a>
82
+ <button class="bg-pakgreen text-white px-6 py-2 rounded-full font-poppins hover:bg-pakblue transition duration-300">
83
+ Demo
84
+ </button>
85
+ </div>
86
+ <div class="md:hidden">
87
+ <button class="text-gray-600 focus:outline-none">
88
+ <i data-feather="menu"></i>
89
+ </button>
90
+ </div>
91
+ </div>
92
+ </div>
93
+ </nav>
94
+
95
+ <!-- Hero Section -->
96
+ <section class="pt-32 pb-20 bg-gradient-to-r from-pakgreen to-pakblue text-white">
97
+ <div class="container mx-auto px-6">
98
+ <div class="flex flex-col md:flex-row items-center">
99
+ <div class="md:w-1/2 mb-10 md:mb-0">
100
+ <h1 class="font-montserrat font-bold text-4xl md:text-5xl mb-6">Threat Intelligence Module</h1>
101
+ <p class="font-poppins text-xl mb-8">
102
+ Advanced AI-powered analysis to detect and neutralize security threats before they impact Pakistan's safety.
103
+ </p>
104
+ <div class="flex items-center space-x-4">
105
+ <div class="bg-pakgold text-pakgreen px-4 py-1 rounded-full font-poppins font-bold">
106
+ Real-time
107
+ </div>
108
+ <div class="bg-pakgold text-pakgreen px-4 py-1 rounded-full font-poppins font-bold">
109
+ AI-Powered
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <div class="md:w-1/2 flex justify-center">
114
+ <div class="relative">
115
+ <div class="absolute -top-6 -left-6 w-64 h-64 border-4 border-pakgold opacity-20"></div>
116
+ <div class="absolute -bottom-6 -right-6 w-64 h-64 border-4 border-pakgold opacity-20"></div>
117
+ <img src="http://static.photos/technology/640x360/43" alt="Threat Intelligence" class="relative z-10 rounded-lg shadow-xl w-full max-w-md">
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </section>
123
+
124
+ <!-- Demo Section -->
125
+ <section class="py-20 bg-white">
126
+ <div class="container mx-auto px-6">
127
+ <div class="max-w-4xl mx-auto">
128
+ <div class="text-center mb-16">
129
+ <h2 class="font-montserrat font-bold text-3xl text-pakgreen mb-4">Interactive Threat Analysis</h2>
130
+ <p class="font-poppins text-gray-600">
131
+ Enter text or URL to analyze for potential security threats using our AI system
132
+ </p>
133
+ </div>
134
+
135
+ <div class="bg-gray-50 rounded-xl p-8 shadow-lg border border-gray-200">
136
+ <div class="mb-6">
137
+ <label class="font-poppins font-medium text-gray-700 block mb-2">Enter suspicious content</label>
138
+ <textarea class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-pakgold input-glow" rows="5" placeholder="Paste suspicious text or URL here..."></textarea>
139
+ </div>
140
+
141
+ <div class="flex justify-center mb-8">
142
+ <button id="analyzeBtn" class="analyze-btn text-white font-poppins font-bold px-10 py-4 rounded-full relative overflow-hidden">
143
+ <span class="relative z-10">Analyze Threat</span>
144
+ <div class="absolute inset-0 bg-gradient-to-r from-pakgold to-pakgreen opacity-0 hover:opacity-100 transition duration-300"></div>
145
+ </button>
146
+ </div>
147
+
148
+ <div id="loadingIndicator" class="hidden flex flex-col items-center justify-center py-10">
149
+ <div class="relative mb-6">
150
+ <i data-feather="shield" class="w-16 h-16 text-pakgreen shield-spin"></i>
151
+ </div>
152
+ <p class="font-poppins text-gray-600">Analyzing content for potential threats...</p>
153
+ </div>
154
+
155
+ <div id="resultContainer" class="hidden">
156
+ <div class="result-card opacity-0 transform scale-y-0 bg-white rounded-xl shadow-md border border-gray-200 p-6 mb-6">
157
+ <div class="flex items-center mb-4">
158
+ <div class="bg-pakgreen p-2 rounded-full mr-4">
159
+ <i data-feather="alert-triangle" class="w-6 h-6 text-white"></i>
160
+ </div>
161
+ <h3 class="font-montserrat font-bold text-xl text-pakgreen">Analysis Results</h3>
162
+ </div>
163
+ <div class="space-y-4">
164
+ <div class="flex items-start">
165
+ <div class="bg-pakgold p-1 rounded-full mr-3 mt-1">
166
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
167
+ </div>
168
+ <div>
169
+ <h4 class="font-poppins font-medium">Threat Level</h4>
170
+ <div class="w-full bg-gray-200 rounded-full h-2.5 mt-1">
171
+ <div class="bg-red-600 h-2.5 rounded-full" style="width: 75%"></div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ <div class="flex items-start">
176
+ <div class="bg-pakgold p-1 rounded-full mr-3 mt-1">
177
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
178
+ </div>
179
+ <div>
180
+ <h4 class="font-poppins font-medium">Keywords Detected</h4>
181
+ <div class="flex flex-wrap gap-2 mt-2">
182
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">attack</span>
183
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">exploit</span>
184
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">vulnerability</span>
185
+ <span class="bg-red-100 text-red-800 text-xs font-medium px-2.5 py-0.5 rounded">target</span>
186
+ </div>
187
+ </div>
188
+ </div>
189
+ <div class="flex items-start">
190
+ <div class="bg-pakgold p-1 rounded-full mr-3 mt-1">
191
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
192
+ </div>
193
+ <div>
194
+ <h4 class="font-poppins font-medium">Recommended Action</h4>
195
+ <p class="text-sm text-gray-600 mt-1">This content shows high threat indicators. Recommend immediate review by security team and potential blocking of related network traffic.</p>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+ </section>
205
+
206
+ <!-- Features Section -->
207
+ <section class="py-20 bg-gray-50">
208
+ <div class="container mx-auto px-6">
209
+ <div class="text-center mb-16">
210
+ <h2 class="font-montserrat font-bold text-3xl text-pakgreen mb-4">Advanced Threat Detection Features</h2>
211
+ <p class="font-poppins text-gray-600 max-w-2xl mx-auto">
212
+ Our AI system leverages multiple techniques to identify potential security threats
213
+ </p>
214
+ </div>
215
+
216
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
217
+ <div class="bg-white rounded-xl p-8 shadow-md border border-gray-200">
218
+ <div class="bg-pakgreen bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
219
+ <i data-feather="activity" class="w-8 h-8 text-pakgreen"></i>
220
+ </div>
221
+ <h3 class="font-montserrat font-bold text-xl text-pakgreen mb-3">Pattern Recognition</h3>
222
+ <p class="font-poppins text-gray-600">
223
+ Identifies known threat patterns and attack signatures across multiple data sources.
224
+ </p>
225
+ </div>
226
+
227
+ <div class="bg-white rounded-xl p-8 shadow-md border border-gray-200">
228
+ <div class="bg-pakgreen bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
229
+ <i data-feather="trending-up" class="w-8 h-8 text-pakgreen"></i>
230
+ </div>
231
+ <h3 class="font-montserrat font-bold text-xl text-pakgreen mb-3">Anomaly Detection</h3>
232
+ <p class="font-poppins text-gray-600">
233
+ Flags unusual behavior and deviations from normal patterns that may indicate threats.
234
+ </p>
235
+ </div>
236
+
237
+ <div class="bg-white rounded-xl p-8 shadow-md border border-gray-200">
238
+ <div class="bg-pakgreen bg-opacity-10 p-4 rounded-full w-16 h-16 flex items-center justify-center mb-6">
239
+ <i data-feather="alert-octagon" class="w-8 h-8 text-pakgreen"></i>
240
+ </div>
241
+ <h3 class="font-montserrat font-bold text-xl text-pakgreen mb-3">Predictive Analysis</h3>
242
+ <p class="font-poppins text-gray-600">
243
+ Uses machine learning to predict potential future threats based on current trends.
244
+ </p>
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </section>
249
+
250
+ <!-- CTA Section -->
251
+ <section class="py-20 bg-pakgreen text-white">
252
+ <div class="container mx-auto px-6 text-center">
253
+ <h2 class="font-montserrat font-bold text-3xl mb-6">Ready to Enhance Pakistan's Security?</h2>
254
+ <p class="font-poppins text-xl max-w-2xl mx-auto mb-10">
255
+ Our Threat Intelligence Module provides the advanced protection our nation deserves.
256
+ </p>
257
+ <button class="bg-pakgold text-pakgreen font-poppins font-bold px-8 py-3 rounded-full hover:bg-white transition duration-300">
258
+ Request Full Demo
259
+ </button>
260
+ </div>
261
+ </section>
262
+
263
+ <!-- Footer -->
264
+ <footer class="bg-pakblue text-white py-12">
265
+ <div class="container mx-auto px-6">
266
+ <div class="flex flex-col md:flex-row justify-between">
267
+ <div class="mb-8 md:mb-0">
268
+ <div class="flex items-center mb-4">
269
+ <i data-feather="shield" class="w-8 h-8 text-pakgold mr-2"></i>
270
+ <span class="font-montserrat font-bold text-2xl">Surakhsha<span class="text-pakgold">AI</span></span>
271
+ </div>
272
+ <p class="font-poppins max-w-xs">
273
+ AI-powered defense solutions for a secure Pakistan.
274
+ </p>
275
+ <div class="flex space-x-4 mt-4">
276
+ <a href="#" class="text-white hover:text-pakgold transition duration-300">
277
+ <i data-feather="twitter"></i>
278
+ </a>
279
+ <a href="#" class="text-white hover:text-pakgold transition duration-300">
280
+ <i data-feather="facebook"></i>
281
+ </a>
282
+ <a href="#" class="text-white hover:text-pakgold transition duration-300">
283
+ <i data-feather="linkedin"></i>
284
+ </a>
285
+ <a href="#" class="text-white hover:text-pakgold transition duration-300">
286
+ <i data-feather="github"></i>
287
+ </a>
288
+ </div>
289
+ </div>
290
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
291
+ <div>
292
+ <h3 class="font-montserrat font-bold text-lg mb-4">Modules</h3>
293
+ <ul class="font-poppins space-y-2">
294
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Threat Intelligence</a></li>
295
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Cyber Defense</a></li>
296
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Border Anomaly</a></li>
297
+ </ul>
298
+ </div>
299
+ <div>
300
+ <h3 class="font-montserrat font-bold text-lg mb-4">Company</h3>
301
+ <ul class="font-poppins space-y-2">
302
+ <li><a href="index.html" class="hover:text-pakgold transition duration-300">Home</a></li>
303
+ <li><a href="#" class="hover:text-pakgold transition duration-300">About</a></li>
304
+ <li><a href="#" class="hover:text-pakgold transition duration-300">URAAN</a></li>
305
+ </ul>
306
+ </div>
307
+ <div>
308
+ <h3 class="font-montserrat font-bold text-lg mb-4">Legal</h3>
309
+ <ul class="font-poppins space-y-2">
310
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Privacy</a></li>
311
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Terms</a></li>
312
+ <li><a href="#" class="hover:text-pakgold transition duration-300">Security</a></li>
313
+ </ul>
314
+ </div>
315
+ </div>
316
+ </div>
317
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
318
+ <p class="font-poppins mb-4 md:mb-0">© 2023 SurakhshaAI. All rights reserved.</p>
319
+ <div class="flex space-x-6">
320
+ <a href="#" class="font-poppins hover:text-pakgold transition duration-300">Privacy Policy</a>
321
+ <a href="#" class="font-poppins hover:text-pakgold transition duration-300">Terms of Service</a>
322
+ <a href="#" class="font-poppins hover:text-pakgold transition duration-300">Contact Us</a>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ </footer>
327
+
328
+ <script>
329
+ // Initialize Feather Icons
330
+ feather.replace();
331
+
332
+ // Demo analysis simulation
333
+ document.getElementById('analyzeBtn').addEventListener('click', function() {
334
+ const loadingIndicator = document.getElementById('loadingIndicator');
335
+ const resultContainer = document.getElementById('resultContainer');
336
+
337
+ // Show loading indicator
338
+ loadingIndicator.classList.remove('hidden');
339
+
340
+ // Hide button during analysis
341
+ this.classList.add('hidden');
342
+
343
+ // Simulate analysis delay
344
+ setTimeout(() => {
345
+ loadingIndicator.classList.add('hidden');
346
+ resultContainer.classList.remove('hidden');
347
+
348
+ // Animate result card in
349
+ const resultCard = document.querySelector('.result-card');
350
+ resultCard.classList.add('show');
351
+ gsap.fromTo(resultCard,
352
+ { opacity: 0, scaleY: 0 },
353
+ { opacity: 1, scaleY: 1, duration: 0.8, ease: "back.out" }
354
+ );
355
+
356
+ // Show button again
357
+ this.classList.remove('hidden');
358
+ }, 2500);
359
+ });
360
+
361
+ // Navbar scroll effect
362
+ window.addEventListener('scroll', function() {
363
+ const nav = document.querySelector('nav');
364
+ if (window.scrollY > 50) {
365
+ nav.classList.add('bg-white', 'shadow-lg');
366
+ } else {
367
+ nav.classList.add('bg-white', 'shadow-lg');
368
+ }
369
+ });
370
+ </script>
371
+ </body>
372
+ </html>