Hugging Face's logo

Spaces:
S-Dreamer
/
jcsweb
Running

App Files Community
S-Dreamer commited on
Commit
eba98d7
·
verified ·
1 Parent(s): a3e0b69

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1392 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Jcsweb
3
- emoji: 🌍
4
- colorFrom: yellow
5
- colorTo: blue
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: jcsweb
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,1392 @@
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>Jager Computer Solutions | Cybersecurity Experts Brisbane</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
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
11
+ <style>
12
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600&display=swap');
13
+
14
+ * {
15
+ margin: 0;
16
+ padding: 0;
17
+ box-sizing: border-box;
18
+ }
19
+
20
+ body {
21
+ overflow-x: hidden;
22
+ font-family: 'Poppins', sans-serif;
23
+ background-color: #0a0a12;
24
+ color: #f1f1f3;
25
+ }
26
+
27
+ .tech-font {
28
+ font-family: 'Orbitron', sans-serif;
29
+ }
30
+
31
+ .hero-section {
32
+ height: 100vh;
33
+ position: relative;
34
+ }
35
+
36
+ .particle-bg {
37
+ position: absolute;
38
+ top: 0;
39
+ left: 0;
40
+ width: 100%;
41
+ height: 100%;
42
+ z-index: -1;
43
+ }
44
+
45
+ .gradient-text {
46
+ background: linear-gradient(90deg, #00ff9d, #00a8ff, #0072ff);
47
+ -webkit-background-clip: text;
48
+ background-clip: text;
49
+ color: transparent;
50
+ }
51
+
52
+ .gradient-border {
53
+ position: relative;
54
+ }
55
+
56
+ .gradient-border::before {
57
+ content: '';
58
+ position: absolute;
59
+ inset: -2px;
60
+ z-index: -1;
61
+ background: linear-gradient(90deg, #00ff9d, #00a8ff, #0072ff);
62
+ border-radius: inherit;
63
+ padding: 2px;
64
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
65
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
66
+ -webkit-mask-composite: xor;
67
+ mask-composite: exclude;
68
+ }
69
+
70
+ .floating {
71
+ animation: floating 8s ease-in-out infinite;
72
+ }
73
+
74
+ .floating-2 {
75
+ animation: floating 6s ease-in-out infinite 2s;
76
+ }
77
+
78
+ .floating-3 {
79
+ animation: floating 7s ease-in-out infinite 1s;
80
+ }
81
+
82
+ @keyframes floating {
83
+ 0% { transform: translateY(0px) rotate(0deg); }
84
+ 50% { transform: translateY(-30px) rotate(5deg); }
85
+ 100% { transform: translateY(0px) rotate(0deg); }
86
+ }
87
+
88
+ .holographic {
89
+ background: linear-gradient(135deg, rgba(0,255,157,0.1) 0%, rgba(0,168,255,0.1) 50%, rgba(0,114,255,0.1) 100%);
90
+ backdrop-filter: blur(10px);
91
+ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
92
+ border: 1px solid rgba(255, 255, 255, 0.05);
93
+ }
94
+
95
+ .neon-glow {
96
+ text-shadow: 0 0 10px rgba(0, 255, 157, 0.7);
97
+ }
98
+
99
+ .pulse {
100
+ animation: pulse 2s infinite;
101
+ }
102
+
103
+ @keyframes pulse {
104
+ 0% { box-shadow: 0 0 0 0 rgba(0, 255, 157, 0.4); }
105
+ 70% { box-shadow: 0 0 0 15px rgba(0, 255, 157, 0); }
106
+ 100% { box-shadow: 0 0 0 0 rgba(0, 255, 157, 0); }
107
+ }
108
+
109
+ .rotate-x {
110
+ animation: rotate-x 20s infinite linear;
111
+ transform-style: preserve-3d;
112
+ }
113
+
114
+ @keyframes rotate-x {
115
+ 0% { transform: rotateX(0deg); }
116
+ 100% { transform: rotateX(360deg); }
117
+ }
118
+
119
+ .shield-icon {
120
+ perspective: 1000px;
121
+ }
122
+
123
+ .shield-visor {
124
+ background: linear-gradient(45deg, rgba(0,255,157,0.2), rgba(0,168,255,0.4));
125
+ box-shadow: inset 0 0 50px rgba(0,255,157,0.5);
126
+ border-radius: 50%;
127
+ filter: blur(0.5px);
128
+ }
129
+
130
+ .nav-link {
131
+ position: relative;
132
+ }
133
+
134
+ .nav-link::after {
135
+ content: '';
136
+ position: absolute;
137
+ width: 0;
138
+ height: 2px;
139
+ bottom: -5px;
140
+ left: 50%;
141
+ transform: translateX(-50%);
142
+ background: linear-gradient(90deg, #00ff9d, #00a8ff, #0072ff);
143
+ transition: width 0.3s ease;
144
+ }
145
+
146
+ .nav-link:hover::after {
147
+ width: 100%;
148
+ }
149
+
150
+ .scroll-down {
151
+ position: absolute;
152
+ bottom: 30px;
153
+ left: 50%;
154
+ transform: translateX(-50%);
155
+ animation: bounce 2s infinite;
156
+ }
157
+
158
+ @keyframes bounce {
159
+ 0%, 20%, 50%, 80%, 100% {
160
+ transform: translateY(0) translateX(-50%);
161
+ }
162
+ 40% {
163
+ transform: translateY(-20px) translateX(-50%);
164
+ }
165
+ 60% {
166
+ transform: translateY(-10px) translateX(-50%);
167
+ }
168
+ }
169
+
170
+ .feature-panel {
171
+ transform: translateY(100px);
172
+ opacity: 0;
173
+ transition: all 0.6s ease-out;
174
+ }
175
+
176
+ .feature-panel.visible {
177
+ transform: translateY(0);
178
+ opacity: 1;
179
+ }
180
+
181
+ .hologram-effect {
182
+ position: relative;
183
+ }
184
+
185
+ .hologram-effect::before {
186
+ content: '';
187
+ position: absolute;
188
+ bottom: -10px;
189
+ left: 0;
190
+ width: 100%;
191
+ height: 50%;
192
+ background: linear-gradient(to bottom, rgba(0,255,157,0.3), transparent);
193
+ transform: perspective(500px) rotateX(60deg) scaleY(0.8);
194
+ filter: blur(15px);
195
+ z-index: -1;
196
+ }
197
+
198
+ .scanline {
199
+ position: relative;
200
+ overflow: hidden;
201
+ }
202
+
203
+ .scanline::before {
204
+ content: "";
205
+ position: absolute;
206
+ top: 0;
207
+ left: 0;
208
+ width: 100%;
209
+ height: 100%;
210
+ background: linear-gradient(
211
+ to bottom,
212
+ transparent 0%,
213
+ rgba(0, 255, 157, 0.03) 50%,
214
+ transparent 100%
215
+ );
216
+ animation: scanline 5s linear infinite;
217
+ pointer-events: none;
218
+ }
219
+
220
+ @keyframes scanline {
221
+ 0% { transform: translateY(-100%); }
222
+ 100% { transform: translateY(100%); }
223
+ }
224
+
225
+ /* Floating 3D Shapes */
226
+ .floating-cube {
227
+ animation: floating 8s ease-in-out infinite, rotate-x 20s infinite linear;
228
+ transform-style: preserve-3d;
229
+ }
230
+
231
+ .floating-pyramid {
232
+ animation: floating 7s ease-in-out infinite 1s, rotate-y 25s infinite linear reverse;
233
+ transform-style: preserve-3d;
234
+ }
235
+
236
+ .floating-shield {
237
+ animation: floating 9s ease-in-out infinite 2s, rotate-x 30s infinite linear reverse;
238
+ transform-style: preserve-3d;
239
+ }
240
+
241
+ @keyframes rotate-y {
242
+ 0% { transform: rotateY(0deg); }
243
+ 100% { transform: rotateY(360deg); }
244
+ }
245
+
246
+ .noise::before {
247
+ content: "";
248
+ position: absolute;
249
+ top: 0;
250
+ left: 0;
251
+ width: 100%;
252
+ height: 100%;
253
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
254
+ z-index: -1;
255
+ }
256
+
257
+ .cyber-badge {
258
+ position: relative;
259
+ display: inline-block;
260
+ padding: 4px 12px;
261
+ border-radius: 20px;
262
+ font-size: 12px;
263
+ font-weight: 600;
264
+ text-transform: uppercase;
265
+ letter-spacing: 1px;
266
+ background: linear-gradient(90deg, #0072ff, #00a8ff);
267
+ color: white;
268
+ box-shadow: 0 4px 15px rgba(0, 114, 255, 0.3);
269
+ }
270
+
271
+ .cyber-badge::after {
272
+ content: '';
273
+ position: absolute;
274
+ top: -2px;
275
+ left: -2px;
276
+ right: -2px;
277
+ bottom: -2px;
278
+ border-radius: 22px;
279
+ background: linear-gradient(90deg, #00ff9d, #00a8ff, #0072ff);
280
+ z-index: -1;
281
+ opacity: 0.7;
282
+ filter: blur(4px);
283
+ }
284
+
285
+ .lock-icon {
286
+ position: relative;
287
+ width: 60px;
288
+ height: 60px;
289
+ background: linear-gradient(135deg, #00ff9d, #0072ff);
290
+ border-radius: 15px;
291
+ display: flex;
292
+ align-items: center;
293
+ justify-content: center;
294
+ box-shadow: 0 10px 30px rgba(0, 114, 255, 0.3);
295
+ }
296
+
297
+ .lock-icon::before {
298
+ content: '';
299
+ position: absolute;
300
+ top: -5px;
301
+ left: -5px;
302
+ right: -5px;
303
+ bottom: -5px;
304
+ background: linear-gradient(135deg, #00ff9d, #0072ff);
305
+ border-radius: 18px;
306
+ z-index: -1;
307
+ opacity: 0.5;
308
+ filter: blur(10px);
309
+ }
310
+
311
+ .threat-level {
312
+ position: relative;
313
+ height: 8px;
314
+ background: rgba(255, 255, 255, 0.1);
315
+ border-radius: 4px;
316
+ overflow: hidden;
317
+ }
318
+
319
+ .threat-level::before {
320
+ content: '';
321
+ position: absolute;
322
+ top: 0;
323
+ left: 0;
324
+ height: 100%;
325
+ width: 60%;
326
+ background: linear-gradient(90deg, #00ff9d, #ff0000);
327
+ border-radius: 4px;
328
+ animation: threat-pulse 3s infinite;
329
+ }
330
+
331
+ @keyframes threat-pulse {
332
+ 0% { opacity: 0.7; }
333
+ 50% { opacity: 1; }
334
+ 100% { opacity: 0.7; }
335
+ }
336
+ </style>
337
+ </head>
338
+ <body>
339
+ <!-- Background Animation -->
340
+ <div id="vanta-bg" class="particle-bg"></div>
341
+
342
+ <!-- Navigation -->
343
+ <nav class="fixed w-full z-50 bg-black bg-opacity-60 backdrop-filter backdrop-blur-lg border-b border-gray-800">
344
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
345
+ <div class="flex justify-between h-20 items-center">
346
+ <div class="flex-shrink-0 flex items-center">
347
+ <span class="text-2xl font-bold gradient-text tech-font">JAGER COMPUTER SOLUTIONS</span>
348
+ </div>
349
+ <div class="hidden md:block">
350
+ <div class="ml-10 flex items-center space-x-8">
351
+ <a href="#" class="nav-link px-3 py-2 text-sm font-medium">Home</a>
352
+ <a href="#services" class="nav-link px-3 py-2 text-sm font-medium">Services</a>
353
+ <a href="#solutions" class="nav-link px-3 py-2 text-sm font-medium">Solutions</a>
354
+ <a href="#about" class="nav-link px-3 py-2 text-sm font-medium">About</a>
355
+ <a href="#contact" class="nav-link px-3 py-2 text-sm font-medium">Contact</a>
356
+ </div>
357
+ </div>
358
+ <div class="flex items-center">
359
+ <button class="relative overflow-hidden group bg-transparent border-2 border-blue-400 hover:border-green-400 text-white px-6 py-2 rounded-full font-medium transition-all duration-500">
360
+ <span class="relative z-10">Emergency Support</span>
361
+ <span class="absolute inset-0 bg-gradient-to-r from-blue-500 to-green-400 opacity-0 group-hover:opacity-100 transition-all duration-500"></span>
362
+ </button>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </nav>
367
+
368
+ <!-- Hero Section with 3D Model -->
369
+ <section class="hero-section flex items-center justify-center relative overflow-hidden px-4">
370
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
371
+ <div class="text-center lg:text-left">
372
+ <div class="relative inline-block mb-8">
373
+ <div class="absolute -inset-1 bg-gradient-to-r from-blue-400 to-green-400 rounded-xl blur opacity-75"></div>
374
+ <span class="relative px-4 py-2 bg-black rounded-lg text-sm font-medium tech-font">
375
+ BRISBANE'S CYBERSECURITY EXPERTS
376
+ </span>
377
+ </div>
378
+ <h1 class="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 leading-tight tech-font">
379
+ <span class="gradient-text">Secure Your</span> Digital Frontier
380
+ </h1>
381
+ <p class="text-xl text-gray-300 max-w-2xl mb-10">
382
+ Comprehensive cybersecurity solutions tailored for Brisbane businesses. Protecting your data with cutting-edge technology and expert knowledge.
383
+ </p>
384
+ <div class="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start">
385
+ <button class="relative overflow-hidden group px-8 py-4 rounded-full font-medium text-lg bg-gradient-to-r from-blue-500 to-green-400 hover:from-blue-600 hover:to-green-500 transition-all duration-300 transform hover:scale-105">
386
+ <span class="relative z-10">Get Protected</span>
387
+ <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-all duration-500"></span>
388
+ </button>
389
+ <button class="px-8 py-4 rounded-full font-medium text-lg border-2 border-blue-400 hover:border-green-400 text-white hover:text-blue-200 transition-all duration-300 transform hover:scale-105">
390
+ <i class="fas fa-shield-alt mr-2"></i> Free Audit
391
+ </button>
392
+ </div>
393
+
394
+ <div class="mt-10 flex flex-wrap gap-4 justify-center lg:justify-start">
395
+ <div class="flex items-center">
396
+ <div class="w-4 h-4 bg-green-400 rounded-full mr-2 pulse"></div>
397
+ <span class="text-sm text-gray-300">24/7 Monitoring</span>
398
+ </div>
399
+ <div class="flex items-center">
400
+ <div class="w-4 h-4 bg-blue-400 rounded-full mr-2 pulse" style="animation-delay: 0.5s;"></div>
401
+ <span class="text-sm text-gray-300">Certified Experts</span>
402
+ </div>
403
+ <div class="flex items-center">
404
+ <div class="w-4 h-4 bg-green-400 rounded-full mr-2 pulse" style="animation-delay: 1s;"></div>
405
+ <span class="text-sm text-gray-300">Brisbane Based</span>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <!-- 3D Security Shield Display -->
411
+ <div class="relative flex items-center justify-center h-96 lg:h-auto">
412
+ <div class="absolute w-64 h-64 md:w-80 md:h-80 lg:w-96 lg:h-96">
413
+ <div class="floating-shield h-full w-full">
414
+ <!-- Three.js will render here -->
415
+ <canvas id="shieldCanvas" class="h-full w-full"></canvas>
416
+ </div>
417
+ </div>
418
+
419
+ <div class="holographic h-64 w-64 md:h-80 md:w-80 lg:h-96 lg:w-96 rounded-full opacity-90 relative">
420
+ <div class="absolute inset-0 flex items-center justify-center">
421
+ <div class="shield-visor h-3/4 w-3/4 flex items-center justify-center">
422
+ <div class="text-center p-6">
423
+ <div class="lock-icon mx-auto mb-4">
424
+ <i class="fas fa-lock text-2xl text-white"></i>
425
+ </div>
426
+ <h3 class="text-2xl font-bold mb-2 gradient-text tech-font">SECURE</h3>
427
+ <p class="text-xs text-gray-300">THREAT LEVEL: <span class="text-green-400">MEDIUM</span></p>
428
+ <div class="mt-4 h-1 w-16 mx-auto bg-gradient-to-r from-blue-400 to-green-400"></div>
429
+ </div>
430
+ </div>
431
+ </div>
432
+ <div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 w-1/2 h-2 bg-green-400 rounded-full blur-md opacity-60"></div>
433
+ </div>
434
+
435
+ <!-- Floating 3D Shapes -->
436
+ <div class="absolute -left-10 top-1/4 w-16 h-16">
437
+ <div class="floating-cube h-full w-full">
438
+ <canvas id="cubeCanvas" class="h-full w-full"></canvas>
439
+ </div>
440
+ </div>
441
+
442
+ <div class="absolute -right-10 bottom-1/3 w-20 h-20">
443
+ <div class="floating-pyramid h-full w-full">
444
+ <canvas id="pyramidCanvas" class="h-full w-full"></canvas>
445
+ </div>
446
+ </div>
447
+ </div>
448
+
449
+ <!-- Scroll Down Indicator -->
450
+ <div class="scroll-down lg:hidden">
451
+ <a href="#services" class="text-blue-400 hover:text-green-400 transition-colors duration-300">
452
+ <i class="fas fa-chevron-down text-2xl"></i>
453
+ </a>
454
+ </div>
455
+ </div>
456
+ </section>
457
+
458
+ <!-- Security Services Section -->
459
+ <section id="services" class="py-20 relative overflow-hidden px-4">
460
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
461
+ <div class="text-center mb-16">
462
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 tech-font">
463
+ <span class="gradient-text">Security</span> Services
464
+ </h2>
465
+ <p class="text-xl text-gray-300 max-w-4xl mx-auto">
466
+ Comprehensive protection for your business at every level of your digital infrastructure.
467
+ </p>
468
+ </div>
469
+
470
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
471
+ <!-- Service 1 -->
472
+ <div class="feature-panel holographic p-8 rounded-2xl transition-all duration-700 hover:transform hover:scale-105">
473
+ <div class="relative">
474
+ <div class="absolute -left-2 -top-2 w-12 h-12 bg-blue-500 rounded-full opacity-20 blur-sm"></div>
475
+ <div class="relative flex items-center">
476
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-green-400 rounded-lg flex items-center justify-center mr-4">
477
+ <i class="fas fa-shield-alt text-xl"></i>
478
+ </div>
479
+ <h3 class="text-2xl font-bold gradient-text tech-font">Threat Protection</h3>
480
+ </div>
481
+ </div>
482
+ <p class="text-gray-300 mt-6 mb-6">
483
+ Advanced protection against malware, ransomware, and zero-day threats with real-time monitoring and response.
484
+ </p>
485
+ <div class="relative h-40 mt-6 rounded-xl overflow-hidden">
486
+ <canvas id="threatCanvas" class="w-full h-full bg-black/30"></canvas>
487
+ <div class="absolute inset-0 flex items-center justify-center">
488
+ <div class="w-20 h-20 border-2 border-blue-400/50 rounded-full animate-ping opacity-30"></div>
489
+ </div>
490
+ </div>
491
+ <div class="mt-6">
492
+ <span class="cyber-badge">Endpoint Security</span>
493
+ <span class="cyber-badge ml-2">Firewall</span>
494
+ <span class="cyber-badge ml-2">IDS/IPS</span>
495
+ </div>
496
+ </div>
497
+
498
+ <!-- Service 2 -->
499
+ <div class="feature-panel holographic p-8 rounded-2xl transition-all duration-700 delay-100 hover:transform hover:scale-105">
500
+ <div class="relative">
501
+ <div class="absolute -left-2 -top-2 w-12 h-12 bg-green-500 rounded-full opacity-20 blur-sm"></div>
502
+ <div class="relative flex items-center">
503
+ <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-blue-600 rounded-lg flex items-center justify-center mr-4">
504
+ <i class="fas fa-lock text-xl"></i>
505
+ </div>
506
+ <h3 class="text-2xl font-bold gradient-text tech-font">Data Encryption</h3>
507
+ </div>
508
+ </div>
509
+ <p class="text-gray-300 mt-6 mb-6">
510
+ Military-grade encryption for your sensitive data at rest and in transit, ensuring compliance with privacy regulations.
511
+ </p>
512
+ <div class="relative h-40 mt-6 rounded-xl overflow-hidden">
513
+ <div class="absolute inset-0 flex items-center justify-center">
514
+ <div class="w-16 h-16 bg-gradient-to-br from-green-600 to-blue-500 rounded-full flex items-center justify-center pulse">
515
+ <i class="fas fa-key text-2xl"></i>
516
+ </div>
517
+ </div>
518
+ <div class="absolute inset-0">
519
+ <div class="grid grid-cols-5 grid-rows-5 h-full w-full">
520
+ <!-- Grid for encryption effect -->
521
+ <?php for($i=0; $i<25; $i++): ?>
522
+ <div class="border border-gray-700 relative">
523
+ <div class="absolute inset-0 bg-green-500/10 animate-pulse" style="animation-delay: <?= $i*0.1 ?>s; opacity: 0;"></div>
524
+ </div>
525
+ <?php endfor; ?>
526
+ </div>
527
+ </div>
528
+ </div>
529
+ <div class="mt-6">
530
+ <span class="cyber-badge">AES-256</span>
531
+ <span class="cyber-badge ml-2">SSL/TLS</span>
532
+ <span class="cyber-badge ml-2">GDPR</span>
533
+ </div>
534
+ </div>
535
+
536
+ <!-- Service 3 -->
537
+ <div class="feature-panel holographic p-8 rounded-2xl transition-all duration-700 delay-200 hover:transform hover:scale-105">
538
+ <div class="relative">
539
+ <div class="absolute -left-2 -top-2 w-12 h-12 bg-blue-600 rounded-full opacity-20 blur-sm"></div>
540
+ <div class="relative flex items-center">
541
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-600 to-green-500 rounded-lg flex items-center justify-center mr-4">
542
+ <i class="fas fa-user-shield text-xl"></i>
543
+ </div>
544
+ <h3 class="text-2xl font-bold gradient-text tech-font">Access Control</h3>
545
+ </div>
546
+ </div>
547
+ <p class="text-gray-300 mt-6 mb-6">
548
+ Granular identity and access management with multi-factor authentication and privileged access controls.
549
+ </p>
550
+ <div class="relative h-40 mt-6 rounded-xl overflow-hidden">
551
+ <div class="absolute inset-0">
552
+ <div class="grid grid-cols-6 gap-1 h-full w-full p-1">
553
+ <!-- Security blocks animation -->
554
+ <?php for($i=0; $i<36; $i++): ?>
555
+ <div class="bg-gray-800/50 border border-gray-700 rounded-sm animate-pulse" style="animation-delay: <?= $i*0.05 ?>s;"></div>
556
+ <?php endfor; ?>
557
+ </div>
558
+ </div>
559
+ <div class="absolute inset-0 flex items-center justify-center">
560
+ <div class="w-16 h-16 rotate-x">
561
+ <div class="w-full h-full bg-gradient-to-br from-blue-600 to-green-500 flex items-center justify-center">
562
+ <i class="fas fa-fingerprint text-xl"></i>
563
+ </div>
564
+ </div>
565
+ </div>
566
+ </div>
567
+ <div class="mt-6">
568
+ <span class="cyber-badge">MFA</span>
569
+ <span class="cyber-badge ml-2">RBAC</span>
570
+ <span class="cyber-badge ml-2">Zero Trust</span>
571
+ </div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </section>
576
+
577
+ <!-- Security Solutions Section -->
578
+ <section id="solutions" class="py-20 relative overflow-hidden px-4">
579
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
580
+ <div class="text-center mb-16">
581
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 tech-font">
582
+ <span class="gradient-text">Enterprise</span> Solutions
583
+ </h2>
584
+ <p class="text-xl text-gray-300 max-w-4xl mx-auto">
585
+ Tailored cybersecurity solutions designed for Brisbane businesses of all sizes.
586
+ </p>
587
+ </div>
588
+
589
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
590
+ <!-- Solution 1 -->
591
+ <div class="feature-panel holographic rounded-2xl overflow-hidden transition-all duration-700 delay-75 hover:transform hover:scale-105">
592
+ <div class="relative h-64">
593
+ <canvas id="solution1Canvas" class="absolute inset-0 w-full h-full bg-gray-900"></canvas>
594
+ <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
595
+ <div class="absolute bottom-0 left-0 p-6">
596
+ <h3 class="text-2xl font-bold mb-1">SMB Protection</h3>
597
+ <span class="text-sm text-blue-400">Small & Medium Business</span>
598
+ </div>
599
+ </div>
600
+ <div class="p-6">
601
+ <p class="text-gray-300 mb-4">Affordable yet comprehensive security solutions designed specifically for Brisbane's small and medium businesses.</p>
602
+ <div class="mb-4">
603
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
604
+ <span>Threat Coverage</span>
605
+ <span>95%</span>
606
+ </div>
607
+ <div class="threat-level"></div>
608
+ </div>
609
+ <button class="text-blue-400 font-medium flex items-center group">
610
+ <span>View Details</span>
611
+ <i class="fas fa-arrow-right ml-2 group-hover:ml-3 transition-all duration-300"></i>
612
+ </button>
613
+ </div>
614
+ </div>
615
+
616
+ <!-- Solution 2 -->
617
+ <div class="feature-panel holographic rounded-2xl overflow-hidden transition-all duration-700 delay-150 hover:transform hover:scale-105">
618
+ <div class="relative h-64">
619
+ <canvas id="solution2Canvas" class="absolute inset-0 w-full h-full bg-gray-900"></canvas>
620
+ <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
621
+ <div class="absolute bottom-0 left-0 p-6">
622
+ <h3 class="text-2xl font-bold mb-1">Enterprise Suite</h3>
623
+ <span class="text-sm text-green-400">Large Organizations</span>
624
+ </div>
625
+ </div>
626
+ <div class="p-6">
627
+ <p class="text-gray-300 mb-4">End-to-end security infrastructure for large enterprises with complex compliance requirements.</p>
628
+ <div class="mb-4">
629
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
630
+ <span>Threat Coverage</span>
631
+ <span>99.9%</span>
632
+ </div>
633
+ <div class="threat-level" style="width: 90%;"></div>
634
+ </div>
635
+ <button class="text-green-400 font-medium flex items-center group">
636
+ <span>View Details</span>
637
+ <i class="fas fa-arrow-right ml-2 group-hover:ml-3 transition-all duration-300"></i>
638
+ </button>
639
+ </div>
640
+ </div>
641
+
642
+ <!-- Solution 3 -->
643
+ <div class="feature-panel holographic rounded-2xl overflow-hidden transition-all duration-700 delay-300 hover:transform hover:scale-105">
644
+ <div class="relative h-64">
645
+ <canvas id="solution3Canvas" class="absolute inset-0 w-full h-full bg-gray-900"></canvas>
646
+ <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent"></div>
647
+ <div class="absolute bottom-0 left-0 p-6">
648
+ <h3 class="text-2xl font-bold mb-1">Cloud Security</h3>
649
+ <span class="text-sm text-blue-400">AWS | Azure | GCP</span>
650
+ </div>
651
+ </div>
652
+ <div class="p-6">
653
+ <p class="text-gray-300 mb-4">Specialized protection for cloud-native applications and hybrid cloud environments.</p>
654
+ <div class="mb-4">
655
+ <div class="flex justify-between text-sm text-gray-400 mb-1">
656
+ <span>Threat Coverage</span>
657
+ <span>98%</span>
658
+ </div>
659
+ <div class="threat-level" style="width: 80%;"></div>
660
+ </div>
661
+ <button class="text-blue-400 font-medium flex items-center group">
662
+ <span>View Details</span>
663
+ <i class="fas fa-arrow-right ml-2 group-hover:ml-3 transition-all duration-300"></i>
664
+ </button>
665
+ </div>
666
+ </div>
667
+ </div>
668
+
669
+ <div class="text-center mt-12">
670
+ <button class="relative overflow-hidden group px-8 py-4 rounded-full font-medium text-lg bg-transparent border-2 border-blue-400 hover:border-green-400 text-white transition-all duration-300 transform hover:scale-105">
671
+ <span class="relative z-10">View All Solutions</span>
672
+ <span class="absolute inset-0 bg-gradient-to-r from-blue-500 to-green-400 opacity-0 group-hover:opacity-100 transition-all duration-500"></span>
673
+ </button>
674
+ </div>
675
+
676
+ <!-- Security Visualization -->
677
+ <div class="mt-20 relative h-96 rounded-3xl overflow-hidden hologram-effect scanline noise">
678
+ <canvas id="securityVizCanvas" class="absolute inset-0 w-full h-full"></canvas>
679
+ <div class="absolute inset-0 flex items-center justify-center">
680
+ <div class="text-center p-8 max-w-2xl">
681
+ <h3 class="text-3xl md:text-4xl font-bold mb-4 gradient-text tech-font">Security Posture Analysis</h3>
682
+ <p class="text-gray-300 mb-6">Real-time visualization of your security infrastructure and threat landscape.</p>
683
+ <div class="flex justify-center gap-4">
684
+ <button class="px-6 py-2 rounded-full text-sm font-medium bg-blue-500/20 border border-blue-400/50 hover:bg-blue-500/30">Network</button>
685
+ <button class="px-6 py-2 rounded-full text-sm font-medium bg-green-500/20 border border-green-400/50 hover:bg-green-500/30">Cloud</button>
686
+ <button class="px-6 py-2 rounded-full text-sm font-medium bg-blue-600/20 border border-blue-500/50 hover:bg-blue-600/30">Endpoint</button>
687
+ </div>
688
+ </div>
689
+ </div>
690
+ </div>
691
+ </div>
692
+ </section>
693
+
694
+ <!-- Security Stats -->
695
+ <section class="py-20 relative overflow-hidden px-4">
696
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
697
+ <div class="holographic rounded-3xl p-8 md:p-12 grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
698
+ <div>
699
+ <h2 class="text-3xl md:text-5xl font-bold mb-6 tech-font">
700
+ <span class="gradient-text">By The</span> Numbers
701
+ </h2>
702
+ <p class="text-xl text-gray-300 mb-8">
703
+ Our cybersecurity solutions deliver measurable results that matter to your business.
704
+ </p>
705
+ <div class="grid grid-cols-2 gap-6">
706
+ <div>
707
+ <div class="text-4xl font-bold gradient-text mb-2 tech-font">24/7</div>
708
+ <p class="text-gray-400">Security Monitoring</p>
709
+ </div>
710
+ <div>
711
+ <div class="text-4xl font-bold gradient-text mb-2 tech-font">99.99%</div>
712
+ <p class="text-gray-400">Uptime Guarantee</p>
713
+ </div>
714
+ <div>
715
+ <div class="text-4xl font-bold gradient-text mb-2 tech-font">15min</div>
716
+ <p class="text-gray-400">Avg. Response Time</p>
717
+ </div>
718
+ <div>
719
+ <div class="text-4xl font-bold gradient-text mb-2 tech-font">100%</div>
720
+ <p class="text-gray-400">Compliance Success</p>
721
+ </div>
722
+ </div>
723
+ </div>
724
+
725
+ <div class="h-64 md:h-96 relative">
726
+ <canvas id="statsCanvas" class="absolute inset-0 w-full h-full"></canvas>
727
+ </div>
728
+ </div>
729
+ </div>
730
+ </section>
731
+
732
+ <!-- About Section -->
733
+ <section id="about" class="py-20 relative overflow-hidden px-4">
734
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
735
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
736
+ <div class="relative">
737
+ <div class="holographic rounded-3xl p-8 md:p-12 relative overflow-hidden h-full">
738
+ <h2 class="text-3xl md:text-5xl font-bold mb-6 tech-font">
739
+ <span class="gradient-text">Brisbane's</span> Cybersecurity Experts
740
+ </h2>
741
+ <p class="text-gray-300 mb-6">
742
+ Founded in 2015, Jager Computer Solutions has been protecting Brisbane businesses from evolving cyber threats with locally-based expertise and global-standard security solutions.
743
+ </p>
744
+ <div class="space-y-4">
745
+ <div class="flex items-start">
746
+ <div class="flex-shrink-0 mt-1">
747
+ <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-green-400 rounded-full flex items-center justify-center">
748
+ <i class="fas fa-check text-sm"></i>
749
+ </div>
750
+ </div>
751
+ <div class="ml-3">
752
+ <p class="text-gray-300">Certified cybersecurity professionals with CISSP, CISM, and CEH credentials</p>
753
+ </div>
754
+ </div>
755
+ <div class="flex items-start">
756
+ <div class="flex-shrink-0 mt-1">
757
+ <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-green-400 rounded-full flex items-center justify-center">
758
+ <i class="fas fa-check text-sm"></i>
759
+ </div>
760
+ </div>
761
+ <div class="ml-3">
762
+ <p class="text-gray-300">24/7 Security Operations Center monitoring your infrastructure</p>
763
+ </div>
764
+ </div>
765
+ <div class="flex items-start">
766
+ <div class="flex-shrink-0 mt-1">
767
+ <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-green-400 rounded-full flex items-center justify-center">
768
+ <i class="fas fa-check text-sm"></i>
769
+ </div>
770
+ </div>
771
+ <div class="ml-3">
772
+ <p class="text-gray-300">Proven track record with 200+ satisfied Brisbane clients</p>
773
+ </div>
774
+ </div>
775
+ </div>
776
+ <div class="mt-8">
777
+ <button class="relative overflow-hidden group px-8 py-4 rounded-full font-medium text-lg bg-gradient-to-r from-blue-500 to-green-400 hover:from-blue-600 hover:to-green-500 transition-all duration-300 transform hover:scale-105">
778
+ <span class="relative z-10">Our Story</span>
779
+ <span class="absolute inset-0 bg-white opacity-0 group-hover:opacity-10 transition-all duration-500"></span>
780
+ </button>
781
+ </div>
782
+ <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
783
+ <div class="absolute -top-20 -left-20 w-64 h-64 bg-green-500/10 rounded-full blur-3xl"></div>
784
+ </div>
785
+ </div>
786
+
787
+ <div class="relative">
788
+ <div class="h-full w-full rounded-3xl overflow-hidden">
789
+ <canvas id="teamCanvas" class="h-full w-full bg-gray-900"></canvas>
790
+ </div>
791
+ <div class="absolute bottom-8 left-8 right-8 p-6 bg-black/70 backdrop-filter backdrop-blur-sm rounded-xl border border-gray-700">
792
+ <h3 class="text-xl font-bold mb-2 gradient-text tech-font">Meet Our Team</h3>
793
+ <p class="text-gray-300 mb-4">Brisbane-based cybersecurity experts ready to protect your business.</p>
794
+ <div class="flex space-x-4">
795
+ <div class="text-center">
796
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-green-400 rounded-full flex items-center justify-center mx-auto mb-2">
797
+ <i class="fas fa-user-secret"></i>
798
+ </div>
799
+ <span class="text-xs text-gray-300">Security Analysts</span>
800
+ </div>
801
+ <div class="text-center">
802
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-green-400 rounded-full flex items-center justify-center mx-auto mb-2">
803
+ <i class="fas fa-network-wired"></i>
804
+ </div>
805
+ <span class="text-xs text-gray-300">Network Engineers</span>
806
+ </div>
807
+ <div class="text-center">
808
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-green-400 rounded-full flex items-center justify-center mx-auto mb-2">
809
+ <i class="fas fa-laptop-code"></i>
810
+ </div>
811
+ <span class="text-xs text-gray-300">Pen Testers</span>
812
+ </div>
813
+ <div class="text-center">
814
+ <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-green-400 rounded-full flex items-center justify-center mx-auto mb-2">
815
+ <i class="fas fa-headset"></i>
816
+ </div>
817
+ <span class="text-xs text-gray-300">Support</span>
818
+ </div>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ </div>
823
+ </div>
824
+ </section>
825
+
826
+ <!-- Contact Section -->
827
+ <section id="contact" class="py-20 relative overflow-hidden px-4">
828
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
829
+ <div class="text-center mb-16">
830
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 tech-font">
831
+ <span class="gradient-text">Contact</span> Our Team
832
+ </h2>
833
+ <p class="text-xl text-gray-300 max-w-4xl mx-auto">
834
+ Ready to secure your business? Our Brisbane-based team is here to help.
835
+ </p>
836
+ </div>
837
+
838
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
839
+ <div class="holographic rounded-3xl p-8 md:p-12 relative overflow-hidden">
840
+ <form class="space-y-6 relative z-10">
841
+ <div>
842
+ <label for="name" class="block text-sm font-medium text-gray-300 mb-2">Your Name</label>
843
+ <input type="text" id="name" class="w-full px-5 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your name">
844
+ </div>
845
+ <div>
846
+ <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email Address</label>
847
+ <input type="email" id="email" class="w-full px-5 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="your@email.com">
848
+ </div>
849
+ <div>
850
+ <label for="business" class="block text-sm font-medium text-gray-300 mb-2">Business Type</label>
851
+ <select id="business" class="w-full px-5 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
852
+ <option>Select business type</option>
853
+ <option>Small Business (1-50 employees)</option>
854
+ <option>Medium Business (51-200 employees)</option>
855
+ <option>Enterprise (200+ employees)</option>
856
+ <option>Government/Education</option>
857
+ </select>
858
+ </div>
859
+ <div>
860
+ <label for="message" class="block text-sm font-medium text-gray-300 mb-2">Security Needs</label>
861
+ <textarea id="message" rows="4" class="w-full px-5 py-3 bg-gray-900 border border-gray-700 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Tell us about your security requirements..."></textarea>
862
+ </div>
863
+ <button type="submit" class="w-full bg-gradient-to-r from-blue-500 to-green-400 hover:from-blue-600 hover:to-green-500 text-white px-8 py-4 rounded-xl font-medium text-lg transition-all duration-300 transform hover:scale-105">
864
+ Request Consultation
865
+ </button>
866
+ </form>
867
+ <div class="absolute -bottom-20 -right-20 w-64 h-64 bg-blue-500/10 rounded-full blur-3xl"></div>
868
+ <div class="absolute -top-20 -left-20 w-64 h-64 bg-green-500/10 rounded-full blur-3xl"></div>
869
+ </div>
870
+
871
+ <div class="relative">
872
+ <div class="h-full w-full rounded-3xl overflow-hidden">
873
+ <canvas id="contactCanvas" class="h-full w-full bg-gray-900"></canvas>
874
+ </div>
875
+ <div class="absolute bottom-8 left-8 right-8 p-6 bg-black/70 backdrop-filter backdrop-blur-sm rounded-xl border border-gray-700">
876
+ <h3 class="text-xl font-bold mb-4 gradient-text tech-font">Brisbane Office</h3>
877
+ <div class="space-y-4">
878
+ <div class="flex items-start">
879
+ <div class="flex-shrink-0 mt-1">
880
+ <i class="fas fa-map-marker-alt text-blue-400"></i>
881
+ </div>
882
+ <div class="ml-3">
883
+ <p class="text-gray-300">Level 5, 123 Eagle Street, Brisbane QLD 4000</p>
884
+ </div>
885
+ </div>
886
+ <div class="flex items-start">
887
+ <div class="flex-shrink-0 mt-1">
888
+ <i class="fas fa-phone-alt text-blue-400"></i>
889
+ </div>
890
+ <div class="ml-3">
891
+ <p class="text-gray-300">(07) 3123 4567</p>
892
+ </div>
893
+ </div>
894
+ <div class="flex items-start">
895
+ <div class="flex-shrink-0 mt-1">
896
+ <i class="fas fa-envelope text-blue-400"></i>
897
+ </div>
898
+ <div class="ml-3">
899
+ <p class="text-gray-300">security@jagercomputersolutions.com.au</p>
900
+ </div>
901
+ </div>
902
+ <div class="flex items-start">
903
+ <div class="flex-shrink-0 mt-1">
904
+ <i class="fas fa-clock text-blue-400"></i>
905
+ </div>
906
+ <div class="ml-3">
907
+ <p class="text-gray-300">Mon-Fri: 8:30am - 5:30pm<br>Emergency Support: 24/7</p>
908
+ </div>
909
+ </div>
910
+ </div>
911
+ <div class="mt-6 pt-4 border-t border-gray-700">
912
+ <h4 class="text-sm font-medium text-gray-300 mb-3">FOLLOW US</h4>
913
+ <div class="flex space-x-4">
914
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-500 rounded-full flex items-center justify-center transition-all duration-300">
915
+ <i class="fab fa-linkedin-in"></i>
916
+ </a>
917
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-green-500 rounded-full flex items-center justify-center transition-all duration-300">
918
+ <i class="fab fa-twitter"></i>
919
+ </a>
920
+ <a href="#" class="w-10 h-10 bg-gray-800 hover:bg-blue-400 rounded-full flex items-center justify-center transition-all duration-300">
921
+ <i class="fab fa-facebook-f"></i>
922
+ </a>
923
+ </div>
924
+ </div>
925
+ </div>
926
+ </div>
927
+ </div>
928
+ </div>
929
+ </section>
930
+
931
+ <!-- Footer -->
932
+ <footer class="py-12 border-t border-gray-800 relative overflow-hidden px-4">
933
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
934
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-12">
935
+ <div>
936
+ <h4 class="text-xl font-bold gradient-text tech-font mb-4">JAGER COMPUTER SOLUTIONS</h4>
937
+ <p class="text-gray-400 mb-6">Brisbane's trusted cybersecurity partner since 2015.</p>
938
+ <div class="flex space-x-4">
939
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">
940
+ <i class="fab fa-linkedin-in"></i>
941
+ </a>
942
+ <a href="#" class="text-gray-400 hover:text-green-400 transition-colors duration-300">
943
+ <i class="fab fa-twitter"></i>
944
+ </a>
945
+ <a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">
946
+ <i class="fab fa-facebook-f"></i>
947
+ </a>
948
+ </div>
949
+ </div>
950
+ <div>
951
+ <h5 class="text-lg font-bold text-white mb-4">Services</h5>
952
+ <ul class="space-y-2">
953
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Threat Protection</a></li>
954
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Data Encryption</a></li>
955
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Access Control</a></li>
956
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Security Audits</a></li>
957
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Incident Response</a></li>
958
+ </ul>
959
+ </div>
960
+ <div>
961
+ <h5 class="text-lg font-bold text-white mb-4">Company</h5>
962
+ <ul class="space-y-2">
963
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">About Us</a></li>
964
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Our Team</a></li>
965
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Case Studies</a></li>
966
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Blog</a></li>
967
+ <li><a href="#" class="text-gray-400 hover:text-blue-400 transition-colors duration-300">Careers</a></li>
968
+ </ul>
969
+ </div>
970
+ <div>
971
+ <h5 class="text-lg font-bold text-white mb-4">Security Alerts</h5>
972
+ <p class="text-gray-400 mb-4">Subscribe to receive the latest cybersecurity threats and protection tips.</p>
973
+ <form class="flex">
974
+ <input type="email" placeholder="Your email" class="px-4 py-2 bg-gray-800 border border-gray-700 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-transparent w-full">
975
+ <button type="submit" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-green-400 hover:from-blue-600 hover:to-green-500 text-white rounded-r-lg transition-all duration-300">
976
+ <i class="fas fa-paper-plane"></i>
977
+ </button>
978
+ </form>
979
+ </div>
980
+ </div>
981
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
982
+ <p class="text-gray-500 text-sm mb-4 md:mb-0">© 2023 Jager Computer Solutions. All rights reserved.</p>
983
+ <div class="flex space-x-6">
984
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition-colors duration-300">Privacy Policy</a>
985
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition-colors duration-300">Terms of Service</a>
986
+ <a href="#" class="text-gray-500 hover:text-blue-400 text-sm transition-colors duration-300">Security Policy</a>
987
+ </div>
988
+ </div>
989
+ </div>
990
+
991
+ <!-- Floating 3D Shield -->
992
+ <div class="absolute -bottom-20 -right-20 w-40 h-40">
993
+ <canvas id="footerShieldCanvas" class="w-full h-full"></canvas>
994
+ </div>
995
+ </footer>
996
+
997
+ <script>
998
+ // Initialize Vanta.js background (network style for cybersecurity)
999
+ VANTA.NET({
1000
+ el: "#vanta-bg",
1001
+ mouseControls: true,
1002
+ touchControls: true,
1003
+ gyroControls: false,
1004
+ minHeight: 200.00,
1005
+ minWidth: 200.00,
1006
+ scale: 1.00,
1007
+ scaleMobile: 1.00,
1008
+ color: 0x0072ff,
1009
+ backgroundColor: 0x0a0a12,
1010
+ points: 12,
1011
+ maxDistance: 20,
1012
+ spacing: 15
1013
+ });
1014
+
1015
+ // Initialize Three.js 3D models
1016
+ document.addEventListener('DOMContentLoaded', function() {
1017
+ // Shield in Hero Section
1018
+ const shieldCanvas = document.getElementById('shieldCanvas');
1019
+ const shieldScene = new THREE.Scene();
1020
+ const shieldCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1021
+ const shieldRenderer = new THREE.WebGLRenderer({
1022
+ canvas: shieldCanvas,
1023
+ alpha: true,
1024
+ antialias: true
1025
+ });
1026
+
1027
+ // Create a shield-like shape
1028
+ const shieldShape = new THREE.Shape();
1029
+ shieldShape.moveTo(0, 1);
1030
+ shieldShape.quadraticCurveTo(0.5, 1.2, 1, 1);
1031
+ shieldShape.quadraticCurveTo(1.5, 0.8, 1, 0);
1032
+ shieldShape.quadraticCurveTo(0.5, -0.2, 0, 0);
1033
+ shieldShape.quadraticCurveTo(-0.5, -0.2, -1, 0);
1034
+ shieldShape.quadraticCurveTo(-1.5, 0.8, -1, 1);
1035
+ shieldShape.quadraticCurveTo(-0.5, 1.2, 0, 1);
1036
+
1037
+ const extrudeSettings = {
1038
+ steps: 2,
1039
+ depth: 0.2,
1040
+ bevelEnabled: true,
1041
+ bevelThickness: 0.1,
1042
+ bevelSize: 0.1,
1043
+ bevelOffset: 0,
1044
+ bevelSegments: 1
1045
+ };
1046
+
1047
+ const shieldGeometry = new THREE.ExtrudeGeometry(shieldShape, extrudeSettings);
1048
+ const shieldMaterial = new THREE.MeshBasicMaterial({
1049
+ color: 0x0072ff,
1050
+ wireframe: true,
1051
+ transparent: true,
1052
+ opacity: 0.8
1053
+ });
1054
+ const shield = new THREE.Mesh(shieldGeometry, shieldMaterial);
1055
+ shieldScene.add(shield);
1056
+
1057
+ shieldCamera.position.z = 3;
1058
+
1059
+ // Cube in Hero Section
1060
+ const cubeCanvas = document.getElementById('cubeCanvas');
1061
+ const cubeScene = new THREE.Scene();
1062
+ const cubeCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1063
+ const cubeRenderer = new THREE.WebGLRenderer({
1064
+ canvas: cubeCanvas,
1065
+ alpha: true,
1066
+ antialias: true
1067
+ });
1068
+
1069
+ const cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
1070
+ const cubeMaterial = new THREE.MeshBasicMaterial({
1071
+ color: 0x00a8ff,
1072
+ wireframe: true,
1073
+ transparent: true,
1074
+ opacity: 0.6
1075
+ });
1076
+ const cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
1077
+ cubeScene.add(cube);
1078
+
1079
+ cubeCamera.position.z = 3;
1080
+
1081
+ // Pyramid in Hero Section
1082
+ const pyramidCanvas = document.getElementById('pyramidCanvas');
1083
+ const pyramidScene = new THREE.Scene();
1084
+ const pyramidCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1085
+ const pyramidRenderer = new THREE.WebGLRenderer({
1086
+ canvas: pyramidCanvas,
1087
+ alpha: true,
1088
+ antialias: true
1089
+ });
1090
+
1091
+ const pyramidGeometry = new THREE.ConeGeometry(0.8, 1.5, 4);
1092
+ const pyramidMaterial = new THREE.MeshBasicMaterial({
1093
+ color: 0x00ff9d,
1094
+ wireframe: true,
1095
+ transparent: true,
1096
+ opacity: 0.6
1097
+ });
1098
+ const pyramid = new THREE.Mesh(pyramidGeometry, pyramidMaterial);
1099
+ pyramid.rotation.y = Math.PI / 4;
1100
+ pyramidScene.add(pyramid);
1101
+
1102
+ pyramidCamera.position.z = 3;
1103
+
1104
+ // Threat Canvas in Services
1105
+ const threatCanvas = document.getElementById('threatCanvas');
1106
+ const threatScene = new THREE.Scene();
1107
+ const threatCamera = new THREE.PerspectiveCamera(75, 2, 0.1, 1000);
1108
+ const threatRenderer = new THREE.WebGLRenderer({
1109
+ canvas: threatCanvas,
1110
+ alpha: true,
1111
+ antialias: true
1112
+ });
1113
+
1114
+ // Create threat visualization (floating malicious objects)
1115
+ const threatGroup = new THREE.Group();
1116
+
1117
+ // Malware sphere
1118
+ const malwareGeometry = new THREE.SphereGeometry(0.3, 16, 16);
1119
+ const malwareMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
1120
+ const malware = new THREE.Mesh(malwareGeometry, malwareMaterial);
1121
+ malware.position.set(-1, 0, 0);
1122
+ threatGroup.add(malware);
1123
+
1124
+ // Virus torus
1125
+ const virusGeometry = new THREE.TorusGeometry(0.2, 0.1, 16, 32);
1126
+ const virusMaterial = new THREE.MeshBasicMaterial({ color: 0xff5555 });
1127
+ const virus = new THREE.Mesh(virusGeometry, virusMaterial);
1128
+ virus.position.set(1, 0.5, 0);
1129
+ threatGroup.add(virus);
1130
+
1131
+ // Attack vector line
1132
+ const lineGeometry = new THREE.BufferGeometry();
1133
+ const lineVertices = new Float32Array([
1134
+ -2, 0, 0,
1135
+ 2, 0, 0
1136
+ ]);
1137
+ lineGeometry.setAttribute('position', new THREE.BufferAttribute(lineVertices, 3));
1138
+ const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000, transparent: true, opacity: 0.5 });
1139
+ const attackLine = new THREE.Line(lineGeometry, lineMaterial);
1140
+ threatGroup.add(attackLine);
1141
+
1142
+ threatScene.add(threatGroup);
1143
+ threatCamera.position.z = 5;
1144
+ threatRenderer.setSize(threatCanvas.width, threatCanvas.height);
1145
+
1146
+ // Solution 1 Canvas
1147
+ const solution1Canvas = document.getElementById('solution1Canvas');
1148
+ const solution1Scene = new THREE.Scene();
1149
+ const solution1Camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1150
+ const solution1Renderer = new THREE.WebGLRenderer({
1151
+ canvas: solution1Canvas,
1152
+ alpha: true,
1153
+ antialias: true
1154
+ });
1155
+
1156
+ // Create SMB protection visualization (small secure network)
1157
+ const smbGroup = new THREE.Group();
1158
+
1159
+ // Central server
1160
+ const serverGeometry = new THREE.CylinderGeometry(0.3, 0.3, 0.6, 8);
1161
+ const serverMaterial = new THREE.MeshBasicMaterial({ color: 0x00a8ff });
1162
+ const server = new THREE.Mesh(serverGeometry, serverMaterial);
1163
+ server.position.y = 0.3;
1164
+ smbGroup.add(server);
1165
+
1166
+ // Client devices
1167
+ const clientGeometry = new THREE.BoxGeometry(0.3, 0.05, 0.4);
1168
+ const clientMaterial = new THREE.MeshBasicMaterial({ color: 0x0072ff });
1169
+
1170
+ for (let i = 0; i < 4; i++) {
1171
+ const angle = (i / 4) * Math.PI * 2;
1172
+ const client = new THREE.Mesh(clientGeometry, clientMaterial);
1173
+ client.position.x = Math.cos(angle) * 1.5;
1174
+ client.position.z = Math.sin(angle) * 1.5;
1175
+ client.rotation.y = -angle;
1176
+ smbGroup.add(client);
1177
+
1178
+ // Connection lines
1179
+ const lineGeometry = new THREE.BufferGeometry();
1180
+ const vertices = new Float32Array([
1181
+ 0, 0.3, 0,
1182
+ client.position.x, client.position.y, client.position.z
1183
+ ]);
1184
+ lineGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
1185
+ const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff9d, transparent: true, opacity: 0.6 });
1186
+ const line = new THREE.Line(lineGeometry, lineMaterial);
1187
+ smbGroup.add(line);
1188
+ }
1189
+
1190
+ solution1Scene.add(smbGroup);
1191
+ solution1Camera.position.z = 5;
1192
+ solution1Renderer.setSize(solution1Canvas.width, solution1Canvas.height);
1193
+
1194
+ // Solution 2 Canvas
1195
+ const solution2Canvas = document.getElementById('solution2Canvas');
1196
+ const solution2Scene = new THREE.Scene();
1197
+ const solution2Camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1198
+ const solution2Renderer = new THREE.WebGLRenderer({
1199
+ canvas: solution2Canvas,
1200
+ alpha: true,
1201
+ antialias: true
1202
+ });
1203
+
1204
+ // Create enterprise security visualization (complex network)
1205
+ const enterpriseGroup = new THREE.Group();
1206
+
1207
+ // Multiple servers
1208
+ const enterpriseServerGeometry = new THREE.CylinderGeometry(0.2, 0.2, 0.4, 8);
1209
+ const enterpriseServerMaterial = new THREE.MeshBasicMaterial({ color: 0x00a8ff });
1210
+
1211
+ for (let i = 0; i < 3; i++) {
1212
+ for (let j = 0; j < 3; j++) {
1213
+ const server = new THREE.Mesh(enterpriseServerGeometry, enterpriseServerMaterial);
1214
+ server.position.x = (i - 1) * 1.2;
1215
+ server.position.z = (j - 1) * 1.2;
1216
+ server.position.y = 0.2;
1217
+ enterpriseGroup.add(server);
1218
+ }
1219
+ }
1220
+
1221
+ // Connection mesh
1222
+ const enterpriseLineGeometry = new THREE.BufferGeometry();
1223
+ const enterpriseVertices = [];
1224
+
1225
+ for (let i = 0; i < 3; i++) {
1226
+ for (let j = 0; j < 3; j++) {
1227
+ const x1 = (i - 1) * 1.2;
1228
+ const z1 = (j - 1) * 1.2;
1229
+
1230
+ if (i < 2) {
1231
+ const x2 = (i) * 1.2;
1232
+ enterpriseVertices.push(x1, 0.2, z1, x2, 0.2, z1);
1233
+ }
1234
+
1235
+ if (j < 2) {
1236
+ const z2 = (j) * 1.2;
1237
+ enterpriseVertices.push(x1, 0.2, z1, x1, 0.2, z2);
1238
+ }
1239
+ }
1240
+ }
1241
+
1242
+ enterpriseLineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(enterpriseVertices, 3));
1243
+ const enterpriseLineMaterial = new THREE.LineBasicMaterial({ color: 0x00ff9d, transparent: true, opacity: 0.4 });
1244
+ const enterpriseLines = new THREE.LineSegments(enterpriseLineGeometry, enterpriseLineMaterial);
1245
+ enterpriseGroup.add(enterpriseLines);
1246
+
1247
+ solution2Scene.add(enterpriseGroup);
1248
+ solution2Camera.position.z = 5;
1249
+ solution2Camera.position.y = 1;
1250
+ solution2Renderer.setSize(solution2Canvas.width, solution2Canvas.height);
1251
+
1252
+ // Solution 3 Canvas
1253
+ const solution3Canvas = document.getElementById('solution3Canvas');
1254
+ const solution3Scene = new THREE.Scene();
1255
+ const solution3Camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1256
+ const solution3Renderer = new THREE.WebGLRenderer({
1257
+ canvas: solution3Canvas,
1258
+ alpha: true,
1259
+ antialias: true
1260
+ });
1261
+
1262
+ // Create cloud security visualization (cloud with shield)
1263
+ const cloudGroup = new THREE.Group();
1264
+
1265
+ // Cloud shape
1266
+ const cloudGeometry = new THREE.SphereGeometry(0.8, 32, 32);
1267
+ const cloudMaterial = new THREE.MeshBasicMaterial({
1268
+ color: 0x0072ff,
1269
+ wireframe: true,
1270
+ transparent: true,
1271
+ opacity: 0.4
1272
+ });
1273
+ const cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
1274
+ cloudGroup.add(cloud);
1275
+
1276
+ // Shield inside cloud
1277
+ const cloudShieldGeometry = new THREE.SphereGeometry(0.5, 32, 32);
1278
+ const cloudShieldMaterial = new THREE.MeshBasicMaterial({
1279
+ color: 0x00ff9d,
1280
+ wireframe: true
1281
+ });
1282
+ const cloudShield = new THREE.Mesh(cloudShieldGeometry, cloudShieldMaterial);
1283
+ cloudGroup.add(cloudShield);
1284
+
1285
+ // Connection lines
1286
+ for (let i = 0; i < 6; i++) {
1287
+ const angle = (i / 6) * Math.PI * 2;
1288
+ const lineGeometry = new THREE.BufferGeometry();
1289
+ const vertices = new Float32Array([
1290
+ 0, 0, 0,
1291
+ Math.cos(angle) * 2, Math.sin(angle) * 0.5, Math.sin(angle) * 2
1292
+ ]);
1293
+ lineGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
1294
+ const lineMaterial = new THREE.LineBasicMaterial({ color: 0x00a8ff, transparent: true, opacity: 0.3 });
1295
+ const line = new THREE.Line(lineGeometry, lineMaterial);
1296
+ cloudGroup.add(line);
1297
+ }
1298
+
1299
+ solution3Scene.add(cloudGroup);
1300
+ solution3Camera.position.z = 5;
1301
+ solution3Renderer.setSize(solution3Canvas.width, solution3Canvas.height);
1302
+
1303
+ // Security Visualization Canvas
1304
+ const securityVizCanvas = document.getElementById('securityVizCanvas');
1305
+ const securityVizScene = new THREE.Scene();
1306
+ const securityVizCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1307
+ const securityVizRenderer = new THREE.WebGLRenderer({
1308
+ canvas: securityVizCanvas,
1309
+ alpha: true,
1310
+ antialias: true
1311
+ });
1312
+ securityVizRenderer.setSize(securityVizCanvas.width, securityVizCanvas.height);
1313
+
1314
+ // Create security visualization (network with protected zones)
1315
+ const securityVizGroup = new THREE.Group();
1316
+
1317
+ // Protected zone (green sphere)
1318
+ const protectedZoneGeometry = new THREE.SphereGeometry(1.5, 32, 32);
1319
+ const protectedZoneMaterial = new THREE.MeshBasicMaterial({
1320
+ color: 0x00ff9d,
1321
+ wireframe: true,
1322
+ transparent: true,
1323
+ opacity: 0.3
1324
+ });
1325
+ const protectedZone = new THREE.Mesh(protectedZoneGeometry, protectedZoneMaterial);
1326
+ securityVizGroup.add(protectedZone);
1327
+
1328
+ // Network nodes
1329
+ const nodeGeometry = new THREE.SphereGeometry(0.1, 16, 16);
1330
+ const protectedNodeMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff9d });
1331
+ const vulnerableNodeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
1332
+
1333
+ for (let i = 0; i < 50; i++) {
1334
+ const x = (Math.random() - 0.5) * 6;
1335
+ const y = (Math.random() - 0.5) * 6;
1336
+ const z = (Math.random() - 0.5) * 6;
1337
+
1338
+ const distance = Math.sqrt(x*x + y*y + z*z);
1339
+ const isProtected = distance < 1.5;
1340
+
1341
+ const node = new THREE.Mesh(
1342
+ nodeGeometry,
1343
+ isProtected ? protectedNodeMaterial : vulnerableNodeMaterial
1344
+ );
1345
+ node.position.set(x, y, z);
1346
+ securityVizGroup.add(node);
1347
+
1348
+ // Connection lines (only for protected nodes)
1349
+ if (isProtected && i % 5 === 0) {
1350
+ const lineGeometry = new THREE.BufferGeometry();
1351
+ const vertices = new Float32Array([
1352
+ 0, 0, 0,
1353
+ x, y, z
1354
+ ]);
1355
+ lineGeometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
1356
+ const lineMaterial = new THREE.LineBasicMaterial({
1357
+ color: 0x00a8ff,
1358
+ transparent: true,
1359
+ opacity: 0.2
1360
+ });
1361
+ const line = new THREE.Line(lineGeometry, lineMaterial);
1362
+ securityVizGroup.add(line);
1363
+ }
1364
+ }
1365
+
1366
+ securityVizScene.add(securityVizGroup);
1367
+ securityVizCamera.position.z = 8;
1368
+
1369
+ // Stats Canvas
1370
+ const statsCanvas = document.getElementById('statsCanvas');
1371
+ const statsScene = new THREE.Scene();
1372
+ const statsCamera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
1373
+ const statsRenderer = new THREE.WebGLRenderer({
1374
+ canvas: statsCanvas,
1375
+ alpha: true,
1376
+ antialias: true
1377
+ });
1378
+ statsRenderer.setSize(statsCanvas.width, statsCanvas.height);
1379
+
1380
+ // Create stats visualization (growing bars)
1381
+ const statsGroup = new THREE.Group();
1382
+
1383
+ // Create bars
1384
+ const barValues = [1.2, 2.5, 1.8, 3.0];
1385
+ const barColors = [0x0072ff, 0x00a8ff, 0x00ff9d, 0x00a8ff];
1386
+
1387
+ for (let i = 0; i < barValues.length; i++) {
1388
+ const barGeometry = new THREE.BoxGeometry(0.5, barValues[i], 0.5);
1389
+ const barMaterial = new THREE.MeshBasicMaterial({ color: barColors[i] });
1390
+ const bar = new THREE.Mesh(barGeometry, barMaterial);
1391
+ bar.position.x = (i - 1.5) * 1
1392
+ </html>
prompts.txt ADDED
File without changes