Hugging Face's logo

Spaces:
GregorSaalste
/
undefined
Running

App Files Community
GregorSaalste commited on
Commit
79eb17b
·
verified ·
1 Parent(s): 1c6afd0

Lets change the style of the page BUT keep the footer and header EXACTLY THE SAME

Browse files
Files changed (2) hide show
  1. index.html +177 -435
  2. swat.html +66 -60
index.html CHANGED
@@ -1,142 +1,82 @@
1
-
2
  <!DOCTYPE html>
3
  <html lang="en">
4
  <head>
5
  <meta charset="UTF-8">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
- <title>Atlantic Shores Roleplay | Whitelisted FiveM Server</title>
8
  <script src="https://cdn.tailwindcss.com"></script>
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
- <!-- Basic Tags-->
11
- <link rel="icon" href="Assets/fav.png"/>
12
-
13
- <!-- Basic Tags-->
14
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
15
- <link rel="preconnect" href="https://fonts.googleapis.com">
16
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
17
- <link href="https://fonts.googleapis.com/css2?family=Gruppo&family=IBM+Plex+Sans+Condensed:ital,wght@1,200&family=Kanit:wght@100&family=Lato&family=Play&family=Roboto&display=swap" rel="stylesheet">
18
- <link rel="canonical" href="https://asrp.us">
19
-
20
- <meta charset="UTF-8">
21
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
22
-
23
- <!-- SEO Meta Tags -->
24
- <meta name="description" content="Atlantic Shores Roleplay is a FiveM community for players aged 17 and older, set in Key West, Florida. Join a realistic roleplay experience today!">
25
- <meta name="keywords" content="Atlantic Shores Roleplay, FiveM, GTA V Roleplay, Key West, Florida Roleplay, 17+ Community, Realistic Roleplay">
26
- <meta name="robots" content="index, follow">
27
-
28
- <!-- Open Graph Tags -->
29
- <meta property="og:type" content="website">
30
- <meta property="og:title" content="Atlantic Shores Roleplay">
31
- <meta property="og:description" content="Atlantic Shores Roleplay is a FiveM community for players aged 17 and older, set in Key West, Florida. Join a realistic roleplay experience today!">
32
- <meta property="og:image" content="https://asrp.us/Assets/Heya.png">
33
- <meta property="og:url" content="https://asrp.us">
34
- <meta property="og:site_name" content="Atlantic Shores Roleplay">
35
-
36
- <!-- Twitter Card Tags -->
37
- <meta name="twitter:card" content="summary_large_image">
38
- <meta name="twitter:title" content="Atlantic Shores Roleplay">
39
- <meta name="twitter:description" content="Atlantic Shores Roleplay is a 17+ FiveM Community based in Key West, Florida">
40
- <meta name="twitter:image" content="https://asrp.us/Assets/Heya.png">
41
-
42
- <!-- Structured Data (Schema.org) -->
43
- <script type="application/ld+json">
44
- {
45
- "@context": "https://schema.org",
46
- "@type": "Organization",
47
- "url": "https://asrp.us",
48
- "logo": "https://asrp.us/Assets/logo.png",
49
- "name": "Atlantic Shores Roleplay",
50
- "description": "Atlantic Shores Roleplay is a FiveM community for players aged 17 and older, set in Key West, Florida. Join a realistic roleplay experience today!",
51
- "sameAs": [
52
- "https://facebook.com/AtlanticShoresRP",
53
- "https://twitter.com/AtlanticShoresRP"
54
- ]
55
- }
56
- </script>
57
- <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
58
- <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
59
- <style>
60
- ::selection {
61
- background: #e4355b; /* fallback solid color */
62
- color: white;
63
- }
64
- /* Custom Scrollbar */
65
  ::-webkit-scrollbar {
66
  width: 12px;
67
  }
 
68
  ::-webkit-scrollbar-track {
69
  background: #1a1a1a;
70
  }
 
71
  ::-webkit-scrollbar-thumb {
72
  background: linear-gradient(#e4355b, #e38c26);
73
  border-radius: 6px;
74
  border: 3px solid #1a1a1a;
75
  }
 
76
  ::-webkit-scrollbar-thumb:hover {
77
  background: linear-gradient(#e38c26, #e4355b);
78
  }
79
- body {
80
- cursor: url('Assets/cursor.png') 16 16, auto;
81
- a:hover, button:hover {
82
- cursor: url('Assets/cursor2.png') 0 0, auto;
83
- }
84
- }
85
- /* ---------- video/hero ---------- */
86
- .video-background {
87
- position: relative;
88
- width: 100%;
89
- height: 100vh; /* full viewport height */
90
- overflow: hidden;
91
- }
92
-
93
- .video-background video {
94
- position: absolute;
95
- top: 50%;
96
- left: 50%;
97
- transform: translate(-50%, -50%);
98
- min-width: 100%;
99
- min-height: 100%;
100
- width: auto;
101
- height: auto;
102
- object-fit: cover; /* keep proportions and fill */
103
- z-index: 0;
104
- }
105
-
106
- .video-overlay {
107
- position: absolute;
108
- top: 0;
109
- left: 0;
110
- width: 100%;
111
- height: 100%;
112
- background-color: rgba(0,0,0,0.6);
113
- z-index: 1;
114
- }
115
-
116
- .content {
117
- position: relative;
118
- z-index: 2;
119
- }
120
- .counter-item {
121
- transition: all 0.3s ease;
122
- }
123
- .transition-all {
124
- transition-property: all;
125
  }
126
- .counter-item:hover {
127
- transform: translateY(-5px);
 
128
  }
 
129
  .department-card {
130
  transition: all 0.3s ease;
131
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
132
  }
 
133
  .department-card:hover {
134
  transform: translateY(-10px);
135
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
136
  }
 
137
  .nav-link {
138
  position: relative;
139
  }
 
140
  .nav-link::after {
141
  content: '';
142
  position: absolute;
@@ -147,9 +87,11 @@ body {
147
  background: linear-gradient(90deg, #e4355b, #e38c26);
148
  transition: width 0.3s ease;
149
  }
 
150
  .nav-link:hover::after {
151
  width: 100%;
152
  }
 
153
  .gradient-text {
154
  background: linear-gradient(90deg, #e4355b, #e38c26);
155
  background-size: 200% auto;
@@ -158,32 +100,18 @@ body {
158
  -webkit-text-fill-color: transparent;
159
  transition: background-position 0.5s ease;
160
  }
 
161
  .gradient-text:hover {
162
  background-position: 100% center;
163
  }
164
- .made-in-usa {
165
- margin-left: 20px;
166
- }
167
-
168
- .made-in-usa-logo {
169
- max-width: 70px;
170
- height: auto;
171
- }
172
-
173
- #orb-container {
174
- position: absolute;
175
- top: 0;
176
- left: 0;
177
- width: 100%;
178
- height: 100%;
179
- pointer-events: none; /* let mouse still interact with buttons */
180
- z-index: 1; /* above video but below overlay text */
181
- }
182
-
183
  </style>
184
  </head>
185
  <body class="bg-black text-gray-100 font-sans">
186
- <!-- Header with Logo and Navigation (Hidden by default) -->
187
  <header class="fixed w-full z-50 bg-black bg-opacity-90 shadow-lg transform -translate-y-full transition-transform duration-300" id="navbar">
188
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
189
  <div class="flex items-center">
@@ -193,10 +121,10 @@ height: auto;
193
  <a href="https://asrp.us" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
194
  <i class="fas fa-home mr-2 text-sm"></i> Home
195
  </a>
196
- <a href="#about" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
197
  <i class="fas fa-info-circle mr-2 text-sm"></i> About
198
  </a>
199
- <a href="#dept" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
200
  <i class="fas fa-building mr-2 text-sm"></i> Departments
201
  </a>
202
  <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
@@ -211,173 +139,157 @@ height: auto;
211
  </button>
212
  </div>
213
  </header>
214
- <!-- Hero Section with Video Background -->
215
- <section class="video-background">
216
- <video autoplay muted loop>
217
- <source src="Assets/AboutUs.mp4" type="video/mp4">
218
- Your browser does not support the video tag.
219
- </video>
220
- <div class="video-overlay"></div>
221
 
222
- <!-- Orb Canvas -->
223
- <div id="orb-container"></div>
224
- <div class="content h-full flex flex-col justify-center items-center text-center px-4">
225
- <div class="max-w-4xl mx-auto">
226
- <div class="mb-10 flex flex-col items-center">
227
- <img src="Assets/logo.png" alt="Atlantic Shores Roleplay" class="h-[150px] w-[400px] mb-8 animate-pulse" style="filter: drop-shadow(0 0 10px rgba(228, 53, 91, 0.7))">
228
- <div class="flex items-center">
229
- <div class="text-left pr-6 border-r border-gray-500">
230
- <p class="text-xl md:text-2xl font-bold gradient-text">Unleashing Passion,<br>Redefining Reality</p>
231
- </div>
232
- <div class="text-left pl-6 text-gray-300">
233
- <p class="text-lg md:text-xl">Established in early 2023, we are dedicated to creating a unique, realistic, inclusive and authentic Florida based community</p>
234
- </div>
235
- </div>
236
-
237
- <div class="flex flex-wrap justify-center gap-4 mb-16">
238
- <a href="https://asrp.us/apply" class="px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] rounded-full font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#e4355b]/30">
239
- <i class="fas fa-user-plus mr-2"></i> Apply Now
240
- </a>
241
- <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="px-8 py-3 bg-transparent border-2 border-orange-500 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:bg-orange-500 hover:bg-opacity-10 hover:border-orange-400">
242
- <i class="fas fa-book-open mr-2"></i> Requirements
243
- </a>
244
- </div>
245
-
246
- <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-8 w-full max-w-5xl mx-auto">
247
- <div class="counter-item bg-gray-900 bg-opacity-70 p-6 rounded-lg w-full">
248
- <div class="text-xl md:text-3xl font-bold gradient-text" id="playerCount">0</div>
249
- <div class="text-gray-400">Arrests</div>
250
- </div>
251
- <div class="counter-item bg-gray-900 bg-opacity-70 p-6 rounded-lg w-full">
252
- <div class="text-xl md:text-3xl font-bold gradient-text">5000+</div>
253
- <div class="text-gray-400">Citations</div>
254
- </div>
255
- <div class="counter-item bg-gray-900 bg-opacity-70 p-6 rounded-lg w-full">
256
- <div class="text-xl md:text-3xl font-bold gradient-text">2 Years</div>
257
- <div class="text-gray-400">Of Service</div>
258
- </div>
259
- <div class="counter-item bg-gray-900 bg-opacity-70 p-6 rounded-lg w-full">
260
- <div class="text-xl md:text-3xl font-bold gradient-text">100%</div>
261
- <div class="text-gray-400">Whitelisted</div>
262
- </div>
263
- </div>
264
- </div>
265
- </div>
266
- </section>
267
-
268
- <!-- SWAT Section -->
269
- <section class="py-20 bg-gradient-to-b from-black to-gray-950">
270
- <div class="container mx-auto px-4">
271
- <div class="text-center mb-16">
272
- <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Special Weapons And Tactics</h2>
273
- <p class="max-w-2xl mx-auto text-gray-400">Elite tactical units serving Key West with precision and professionalism</p>
274
- </div>
275
-
276
- <div class="flex justify-center">
277
- <a href="https://asrp.us/swat.html" class="px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] rounded-full font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#e4355b]/30">
278
- <i class="fas fa-bullseye mr-2"></i> Learn About SWAT
279
  </a>
280
  </div>
281
  </div>
282
  </section>
283
- <!-- About Us Section -->
 
284
  <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
285
  <div class="container mx-auto px-4">
286
  <div class="text-center mb-16">
287
- <h2 id="about" class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Our Community</h2>
288
- <p class="max-w-4xl mx-auto text-gray-400">What Sets Us Apart.</p>
 
 
 
 
289
  </div>
290
 
291
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
292
  <div>
293
- <h3 class="text-2xl font-bold mb-4 text-white">Our Mission</h3>
294
- <p class="text-gray-400 mb-6">Our mission is to create an immersive, well-balanced roleplay environment rooted in the unique setting of Key West, Florida. We aim to provide a space where players can enjoy realistic law enforcement, emergency services, and civilian experiences, all while fostering community, creativity, and respect for quality roleplay. Every department, from public safety to private security, plays a part in keeping the world alive and engaging and we're committed to maintaining a server where that effort shows.</p>
 
 
295
 
296
- <h3 class="text-2xl font-bold mb-4 text-white">What We Offer</h3>
297
  <ul class="space-y-3 text-gray-400">
298
  <li class="flex items-start">
299
  <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
300
- <span>Whitelisted, high-quality roleplay with active staff</span>
301
  </li>
302
  <li class="flex items-start">
303
  <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
304
- <span>Custom Assets And Active Development</span>
305
  </li>
306
  <li class="flex items-start">
307
  <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
308
- <span>Multiple Departments And Sub-Divisons</span>
309
  </li>
310
  <li class="flex items-start">
311
  <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
312
- <span>Fun And Engaging Roleplay</span>
313
  </li>
314
  </ul>
315
  </div>
316
- <iframe width="560" height="315" src="https://www.youtube.com/embed/o8SovrWRHYQ?si=mfDSI_iCPkuDqmk_" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 
 
 
 
317
  </div>
318
  </div>
319
  </section>
320
 
321
- <!-- Departments Section -->
322
  <section class="py-20 bg-gradient-to-b from-black to-gray-950">
323
  <div class="container mx-auto px-4">
324
  <div class="text-center mb-16">
325
- <h2 id="dept" class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Our Departments</h2>
326
- <p class="max-w-2xl mx-auto text-gray-400">Be Who You Want To Be.</p>
 
 
 
 
327
  </div>
328
 
329
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8">
330
- <!-- LSPD -->
331
  <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
332
- <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center" oncontextmenu="return false;">
333
- <img src="Assets/Depts/lspd.png" alt="LSPD Logo" class="h-32 w-32 object-contain">
334
  </div>
335
  <div class="p-6">
336
- <h3 class="text-xl font-bold mb-2 text-blue-400">Los Santos Police Department</h3>
337
- <p class="text-gray-400 mb-4">We will ensure public safety, enforce the law with integrity, and provide extraordinary service.</p>
338
- </div>
339
- </div>
340
- <!-- BCSO -->
341
- <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
342
- <div class="h-48 bg-blue-800 flex items-center justify-center" oncontextmenu="return false;">
343
- <img src="Assets/Depts/BCSO.png" alt="BCSO Logo" class="h-32 w-32 object-contain">
344
- </div>
345
- <div class="p-6">
346
- <h3 class="text-xl font-bold mb-2 text-blue-400">Blaine County Sheriff's Office</h3>
347
- <p class="text-gray-400 mb-4">The Blaine County Sheriff’s Office is committed to excellence in law enforcement, ensuring the safety of our residents and visitors</p>
348
  </div>
349
  </div>
350
- <!-- EMS -->
 
351
  <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
352
- <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center" oncontextmenu="return false;">
353
- <img src="Assets/Depts/SAHP.png" alt="EMS Logo" class="h-32 w-32 object-contain">
354
  </div>
355
  <div class="p-6">
356
- <h3 class="text-xl font-bold mb-2 text-blue-400">San Andreas Highway Patrol</h3>
357
- <p class="text-gray-400 mb-4">The San Andreas Highway Patrol Is Dedicated To Protecting The Visitors And Residents Of San Andreas</p>
 
 
 
 
 
 
358
  </div>
359
  </div>
360
- <!-- DOJ -->
 
361
  <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
362
- <div class="h-48 bg-purple-900 flex items-center justify-center" oncontextmenu="return false;">
363
- <img src="Assets/Depts/civ.png" alt="DOJ Logo" class="h-32 w-32 object-contain">
364
  </div>
365
  <div class="p-6">
366
- <h3 class="text-xl font-bold mb-2 text-purple-400">Civilian Operations</h3>
367
- <p class="text-gray-400 mb-4">It is our ambition to ensure San Andreas comes to life in a manner that all can enjoy and participate in.</p>
 
 
 
 
 
 
368
  </div>
369
  </div>
370
- <!-- Fire Department -->
 
371
  <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
372
- <div class="h-48 bg-orange-900 flex items-center justify-center" oncontextmenu="return false;">
373
- <img src="Assets/Depts/FIRE.png" alt="Fire Department Logo" class="h-32 w-32 object-contain">
374
  </div>
375
  <div class="p-6">
376
- <h3 class="text-xl font-bold mb-2 text-orange-400">Fire Operations</h3>
377
- <p class="text-gray-400 mb-4">The mission of San Andreas Fire Operations is to ensure our citizen and visitors safety</p>
 
 
 
 
 
 
378
  </div>
379
  </div>
380
- </div>
381
  </div>
382
  </section>
383
 
@@ -385,46 +297,57 @@ height: auto;
385
  <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
386
  <div class="container mx-auto px-4">
387
  <div class="text-center mb-16">
388
- <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Community Requirements</h2>
389
- <p class="max-w-2xl mx-auto text-gray-400">What you'll need to join our community</p>
 
 
 
 
390
  </div>
391
 
392
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
393
  <!-- Requirement 1 -->
394
  <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
395
  <div class="text-4xl mb-4">
396
- <i class="fas fa-microphone gradient-text"></i>
397
  </div>
398
- <h3 class="text-xl font-bold mb-3 text-white">Microphone</h3>
399
- <p class="text-gray-400">A working microphone is required for all members to ensure quality roleplay.</p>
 
 
400
  </div>
401
 
402
  <!-- Requirement 2 -->
403
  <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
404
  <div class="text-4xl mb-4">
405
- <i class="fas fa-user-check gradient-text"></i>
406
  </div>
407
- <h3 class="text-xl font-bold mb-3 text-white">Age Requirement</h3>
408
- <p class="text-gray-400">You must be at least 17 years old to join our community.</p>
 
 
409
  </div>
410
 
411
  <!-- Requirement 3 -->
412
  <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
413
  <div class="text-4xl mb-4">
414
- <i class="fas fa-gamepad gradient-text"></i>
415
  </div>
416
- <h3 class="text-xl font-bold mb-3 text-white">FiveM Ready</h3>
417
- <p class="text-gray-400">You'll need a legitimate copy of GTA V and FiveM installed to play on our server.</p>
 
 
418
  </div>
419
  </div>
420
 
421
  <div class="text-center mt-12">
422
- <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="inline-block px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] hover:from-[#ed2d57] hover:to-[#fc8e0d] rounded-full font-semibold transition duration-300 transform hover:scale-105 shadow-lg">
423
- <i class="fas fa-info-circle mr-2"></i> Full Requirements Guide
424
  </a>
425
  </div>
426
  </div>
427
  </section>
 
428
  <!-- Footer -->
429
  <footer class="py-16 bg-cover bg-center" style="background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url('Assets/footer.png') center/cover no-repeat;">
430
  <div class="container mx-auto px-4">
@@ -449,10 +372,10 @@ height: auto;
449
  <li><a href="https://asrp.us/apply" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
450
  <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Apply Now
451
  </a></li>
452
- <li><a href="#dept" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
453
  <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Departments
454
  </a></li>
455
- <li><a href="#about" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
456
  <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> About Us
457
  </a></li>
458
  </ul>
@@ -500,16 +423,6 @@ height: auto;
500
  </div>
501
  </div>
502
  </footer>
503
- <style>
504
- .gallery-slides {
505
- display: flex;
506
- width: 300%;
507
- }
508
- .gallery-slide {
509
- flex: 0 0 33.333%;
510
- transition: transform 0.5s ease;
511
- }
512
- </style>
513
 
514
  <script>
515
  // Navbar scroll behavior
@@ -518,193 +431,22 @@ height: auto;
518
  const currentScroll = window.pageYOffset;
519
  const navbar = document.getElementById('navbar');
520
 
521
- if (currentScroll <= 100) { // Only hide when at very top of page
522
  navbar.classList.add('-translate-y-full');
523
  navbar.classList.remove('translate-y-0');
524
  return;
525
  }
526
 
527
  if (currentScroll > lastScroll) {
528
- // Scrolling down
529
  navbar.classList.add('-translate-y-full');
530
  navbar.classList.remove('translate-y-0');
531
  } else {
532
- // Scrolling up
533
  navbar.classList.remove('-translate-y-full');
534
  navbar.classList.add('translate-y-0');
535
  }
536
 
537
  lastScroll = currentScroll;
538
  });
539
-
540
- // Image Gallery Functionality
541
- document.addEventListener('DOMContentLoaded', function() {
542
- const slides = document.querySelector('.gallery-slides');
543
- const prevBtn = document.querySelector('.gallery-prev');
544
- const nextBtn = document.querySelector('.gallery-next');
545
- const indicators = document.querySelectorAll('.gallery-indicator');
546
- let currentIndex = 0;
547
- let slideInterval;
548
-
549
- function goToSlide(index) {
550
- slides.style.transform = `translateX(-${index * 100}%)`;
551
- currentIndex = index;
552
- updateIndicators();
553
- }
554
-
555
- function nextSlide() {
556
- currentIndex = (currentIndex + 1) % 3;
557
- goToSlide(currentIndex);
558
- }
559
-
560
- function prevSlide() {
561
- currentIndex = (currentIndex - 1 + 3) % 3;
562
- goToSlide(currentIndex);
563
- }
564
-
565
- function updateIndicators() {
566
- indicators.forEach((indicator, index) => {
567
- indicator.classList.toggle('bg-blue-500', index === currentIndex);
568
- indicator.classList.toggle('bg-gray-600', index !== currentIndex);
569
- });
570
- }
571
-
572
- function startAutoSlide() {
573
- slideInterval = setInterval(nextSlide, 5000);
574
- }
575
-
576
- function stopAutoSlide() {
577
- clearInterval(slideInterval);
578
- }
579
-
580
- // Event listeners
581
- nextBtn.addEventListener('click', () => {
582
- stopAutoSlide();
583
- nextSlide();
584
- startAutoSlide();
585
- });
586
-
587
- prevBtn.addEventListener('click', () => {
588
- stopAutoSlide();
589
- prevSlide();
590
- startAutoSlide();
591
- });
592
-
593
- indicators.forEach(indicator => {
594
- indicator.addEventListener('click', () => {
595
- stopAutoSlide();
596
- goToSlide(parseInt(indicator.dataset.slide));
597
- startAutoSlide();
598
- });
599
- });
600
-
601
- // Start auto sliding
602
- startAutoSlide();
603
-
604
- // Pause on hover
605
- const gallery = document.querySelector('.gallery-slides');
606
- gallery.addEventListener('mouseenter', stopAutoSlide);
607
- gallery.addEventListener('mouseleave', startAutoSlide);
608
- });
609
-
610
- // Animated counter for player count
611
- function animateCounter(elementId, target, duration = 2000) {
612
- const element = document.getElementById(elementId);
613
- const start = 0;
614
- const increment = target / (duration / 16);
615
- let current = start;
616
-
617
- const timer = setInterval(() => {
618
- current += increment;
619
- if (current >= target) {
620
- clearInterval(timer);
621
- current = target;
622
- }
623
- element.textContent = Math.floor(current);
624
- document.getElementById('footerPlayerCount').textContent = Math.floor(current);
625
- }, 16);
626
- }
627
-
628
- // Start counters when page loads
629
- window.addEventListener('load', () => {
630
- // Simulate 87 players online
631
- animateCounter('playerCount', 3000);
632
- });
633
  </script>
634
- <script>
635
- // Prevent right-click on entire document
636
- document.addEventListener('contextmenu', function(e) {
637
- if (e.target.tagName === 'IMG') {
638
- e.preventDefault();
639
- }
640
- });
641
- </script>
642
- <script src="https://unpkg.com/ogl"></script>
643
- <script>
644
- (function() {
645
- const container = document.getElementById('orb-container');
646
- if (!container) return;
647
-
648
- const renderer = new ogl.Renderer({ alpha: true, premultipliedAlpha: false });
649
- const gl = renderer.gl;
650
- gl.clearColor(0, 0, 0, 0);
651
- container.appendChild(gl.canvas);
652
-
653
- const geometry = new ogl.Triangle(gl);
654
-
655
- const program = new ogl.Program(gl, {
656
- vertex: `
657
- precision highp float;
658
- attribute vec2 position;
659
- attribute vec2 uv;
660
- varying vec2 vUv;
661
- void main() {
662
- vUv = uv;
663
- gl_Position = vec4(position, 0.0, 1.0);
664
- }
665
- `,
666
- fragment: `
667
- precision highp float;
668
- uniform float iTime;
669
- uniform vec3 iResolution;
670
- varying vec2 vUv;
671
- void main() {
672
- vec2 uv = vUv * 2.0 - 1.0;
673
- float r = length(uv);
674
- float a = atan(uv.y, uv.x);
675
- float glow = 0.2 / abs(0.4 - r);
676
- vec3 col = 0.5 + 0.5 * cos(iTime + a + vec3(0,2,4));
677
- gl_FragColor = vec4(col * glow, glow);
678
- }
679
- `,
680
- uniforms: {
681
- iTime: { value: 0 },
682
- iResolution: { value: new ogl.Vec3(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height) }
683
- }
684
- });
685
-
686
- const mesh = new ogl.Mesh(gl, { geometry, program });
687
-
688
- function resize() {
689
- const dpr = window.devicePixelRatio || 1;
690
- const width = container.clientWidth;
691
- const height = container.clientHeight;
692
- renderer.setSize(width * dpr, height * dpr);
693
- gl.canvas.style.width = width + 'px';
694
- gl.canvas.style.height = height + 'px';
695
- program.uniforms.iResolution.value.set(gl.canvas.width, gl.canvas.height, gl.canvas.width / gl.canvas.height);
696
- }
697
- window.addEventListener('resize', resize);
698
- resize();
699
-
700
- let lastTime = 0;
701
- function update(t) {
702
- requestAnimationFrame(update);
703
- program.uniforms.iTime.value = t * 0.001;
704
- renderer.render({ scene: mesh });
705
- }
706
- requestAnimationFrame(update);
707
- })();
708
- </script>
709
  </body>
710
- </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>SWAT - Atlantic Shores Roleplay</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
+ <link rel="icon" href="Assets/fav.png"/>
10
+ <link rel="preconnect" href="https://fonts.googleapis.com">
11
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
12
+ <link href="https://fonts.googleapis.com/css2?family=Gruppo&family=IBM+Plex+Sans+Condensed:ital,wght@1,200&family=Kanit:wght@100&family=Lato&family=Play&family=Roboto&display=swap" rel="stylesheet">
13
+ <link rel="canonical" href="https://asrp.us/swat.html">
14
+
15
+ <!-- SEO Meta Tags -->
16
+ <meta name="description" content="SWAT Division of Atlantic Shores Roleplay - Elite tactical units serving Key West, Florida. Join our specialized teams for high-risk operations.">
17
+ <meta name="keywords" content="SWAT, Atlantic Shores Roleplay, FiveM, GTA V Roleplay, Key West, Florida Roleplay, Tactical Units, Special Weapons">
18
+ <meta name="robots" content="index, follow">
19
+
20
+ <!-- Open Graph Tags -->
21
+ <meta property="og:type" content="website">
22
+ <meta property="og:title" content="SWAT - Atlantic Shores Roleplay">
23
+ <meta property="og:description" content="SWAT Division of Atlantic Shores Roleplay - Elite tactical units serving Key West, Florida. Join our specialized teams for high-risk operations.">
24
+ <meta property="og:image" content="https://asrp.us/Assets/Heya.png">
25
+ <meta property="og:url" content="https://asrp.us/swat.html">
26
+ <meta property="og:site_name" content="Atlantic Shores Roleplay">
27
+
28
+ <!-- Twitter Card Tags -->
29
+ <meta name="twitter:card" content="summary_large_image">
30
+ <meta name="twitter:title" content="SWAT - Atlantic Shores Roleplay">
31
+ <meta name="twitter:description" content="SWAT Division of Atlantic Shores Roleplay - Elite tactical units serving Key West, Florida">
32
+ <meta name="twitter:image" content="https://asrp.us/Assets/Heya.png">
33
+
34
+ <style>
35
+ ::selection {
36
+ background: #e4355b;
37
+ color: white;
38
+ }
39
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
40
  ::-webkit-scrollbar {
41
  width: 12px;
42
  }
43
+
44
  ::-webkit-scrollbar-track {
45
  background: #1a1a1a;
46
  }
47
+
48
  ::-webkit-scrollbar-thumb {
49
  background: linear-gradient(#e4355b, #e38c26);
50
  border-radius: 6px;
51
  border: 3px solid #1a1a1a;
52
  }
53
+
54
  ::-webkit-scrollbar-thumb:hover {
55
  background: linear-gradient(#e38c26, #e4355b);
56
  }
57
+
58
+ body {
59
+ cursor: url('Assets/cursor.png') 16 16, auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
60
  }
61
+
62
+ a:hover, button:hover {
63
+ cursor: url('Assets/cursor2.png') 0 0, auto;
64
  }
65
+
66
  .department-card {
67
  transition: all 0.3s ease;
68
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
69
  }
70
+
71
  .department-card:hover {
72
  transform: translateY(-10px);
73
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
74
  }
75
+
76
  .nav-link {
77
  position: relative;
78
  }
79
+
80
  .nav-link::after {
81
  content: '';
82
  position: absolute;
 
87
  background: linear-gradient(90deg, #e4355b, #e38c26);
88
  transition: width 0.3s ease;
89
  }
90
+
91
  .nav-link:hover::after {
92
  width: 100%;
93
  }
94
+
95
  .gradient-text {
96
  background: linear-gradient(90deg, #e4355b, #e38c26);
97
  background-size: 200% auto;
 
100
  -webkit-text-fill-color: transparent;
101
  transition: background-position 0.5s ease;
102
  }
103
+
104
  .gradient-text:hover {
105
  background-position: 100% center;
106
  }
107
+
108
+ .swat-hero {
109
+ background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('http://static.photos/black/1200x630/45') center/cover no-repeat;
110
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
111
  </style>
112
  </head>
113
  <body class="bg-black text-gray-100 font-sans">
114
+ <!-- Header with Logo and Navigation -->
115
  <header class="fixed w-full z-50 bg-black bg-opacity-90 shadow-lg transform -translate-y-full transition-transform duration-300" id="navbar">
116
  <div class="container mx-auto px-4 py-3 flex justify-between items-center">
117
  <div class="flex items-center">
 
121
  <a href="https://asrp.us" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
122
  <i class="fas fa-home mr-2 text-sm"></i> Home
123
  </a>
124
+ <a href="https://asrp.us#about" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
125
  <i class="fas fa-info-circle mr-2 text-sm"></i> About
126
  </a>
127
+ <a href="https://asrp.us#dept" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
128
  <i class="fas fa-building mr-2 text-sm"></i> Departments
129
  </a>
130
  <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
 
139
  </button>
140
  </div>
141
  </header>
 
 
 
 
 
 
 
142
 
143
+ <!-- Hero Section -->
144
+ <section class="swat-hero py-32">
145
+ <div class="container mx-auto px-4 text-center">
146
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
147
+ Special Weapons And Tactics
148
+ </h1>
149
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto text-gray-300 mb-8">
150
+ Elite tactical units of Atlantic Shores Roleplay, serving Key West with precision and professionalism
151
+ </p>
152
+ <div class="flex flex-wrap justify-center gap-4">
153
+ <a href="https://asrp.us/apply" class="px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] rounded-full font-semibold transition-all duration-300 hover:scale-105 shadow-lg hover:shadow-xl hover:shadow-[#e4355b]/30">
154
+ <i class="fas fa-user-plus mr-2"></i> Apply to SWAT
155
+ </a>
156
+ <a href="https://asrp.us#dept" class="px-8 py-3 bg-transparent border-2 border-orange-500 rounded-full font-semibold transition-all duration-300 hover:scale-105 hover:bg-orange-500 hover:bg-opacity-10 hover:border-orange-400">
157
+ <i class="fas fa-arrow-left mr-2"></i> All Departments
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  </a>
159
  </div>
160
  </div>
161
  </section>
162
+
163
+ <!-- About SWAT Section -->
164
  <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
165
  <div class="container mx-auto px-4">
166
  <div class="text-center mb-16">
167
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
168
+ About Our SWAT Division
169
+ </h2>
170
+ <p class="max-w-3xl mx-auto text-gray-400 text-lg">
171
+ Comprised of four specialized tactical teams, our SWAT division handles high-risk situations with precision and professionalism
172
+ </p>
173
  </div>
174
 
175
  <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
176
  <div>
177
+ <h3 class="text-2xl font-bold mb-4 text-white">Mission Statement</h3>
178
+ <p class="text-gray-400 mb-6">
179
+ The Atlantic Shores Roleplay SWAT Division is committed to providing specialized tactical response to high-risk situations that exceed the capabilities of standard law enforcement units. We operate with the highest standards of professionalism, precision, and dedication to public safety.
180
+ </p>
181
 
182
+ <h3 class="text-2xl font-bold mb-4 text-white">Core Values</h3>
183
  <ul class="space-y-3 text-gray-400">
184
  <li class="flex items-start">
185
  <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
186
+ <span>Tactical Excellence in all operations</span>
187
  </li>
188
  <li class="flex items-start">
189
  <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
190
+ <span>Unwavering commitment to public safety</span>
191
  </li>
192
  <li class="flex items-start">
193
  <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
194
+ <span>Professionalism in every interaction</span>
195
  </li>
196
  <li class="flex items-start">
197
  <i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
198
+ <span>Continuous training and improvement</span>
199
  </li>
200
  </ul>
201
  </div>
202
+ <div class="grid grid-cols-2 gap-4">
203
+ <img src="http://static.photos/military/640x360/123" alt="SWAT Training" class="rounded-lg shadow-lg">
204
+ <img src="http://static.photos/technology/640x360/456" alt="SWAT Equipment" class="rounded-lg shadow-lg mt-8">
205
+ <img src="http://static.photos/people/640x360/789" alt="SWAT Team" class="rounded-lg shadow-lg">
206
+ <img src="http://static.photos/cityscape/640x360/321" alt="SWAT Operations" class="rounded-lg shadow-lg mt-8">
207
+ </div>
208
  </div>
209
  </div>
210
  </section>
211
 
212
+ <!-- SWAT Teams Section -->
213
  <section class="py-20 bg-gradient-to-b from-black to-gray-950">
214
  <div class="container mx-auto px-4">
215
  <div class="text-center mb-16">
216
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
217
+ Our Tactical Teams
218
+ </h2>
219
+ <p class="max-w-2xl mx-auto text-gray-400">
220
+ Four specialized units within our SWAT division, each with unique capabilities and responsibilities
221
+ </p>
222
  </div>
223
 
224
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
225
+ <!-- Team Alpha -->
226
  <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
227
+ <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center">
228
+ <div class="text-5xl font-bold text-white">A</div>
229
  </div>
230
  <div class="p-6">
231
+ <h3 class="text-xl font-bold mb-2 text-blue-400">Team Alpha</h3>
232
+ <p class="text-gray-400 mb-4">
233
+ Primary assault team specializing in direct entry operations and high-risk warrant service.
234
+ </p>
235
+ <div class="flex items-center text-sm text-gray-500">
236
+ <i class="fas fa-users mr-2"></i>
237
+ <span>6-8 Operators</span>
238
+ </div>
 
 
 
 
239
  </div>
240
  </div>
241
+
242
+ <!-- Team Bravo -->
243
  <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
244
+ <div class="h-48 bg-red-800 flex items-center justify-center">
245
+ <div class="text-5xl font-bold text-white">B</div>
246
  </div>
247
  <div class="p-6">
248
+ <h3 class="text-xl font-bold mb-2 text-red-400">Team Bravo</h3>
249
+ <p class="text-gray-400 mb-4">
250
+ Sniper and reconnaissance team providing overwatch and precision engagement capabilities.
251
+ </p>
252
+ <div class="flex items-center text-sm text-gray-500">
253
+ <i class="fas fa-users mr-2"></i>
254
+ <span>4-6 Operators</span>
255
+ </div>
256
  </div>
257
  </div>
258
+
259
+ <!-- Team Charlie -->
260
  <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
261
+ <div class="h-48 bg-gradient-to-br from-purple-700 to-purple-900 flex items-center justify-center">
262
+ <div class="text-5xl font-bold text-white">C</div>
263
  </div>
264
  <div class="p-6">
265
+ <h3 class="text-xl font-bold mb-2 text-purple-400">Team Charlie</h3>
266
+ <p class="text-gray-400 mb-4">
267
+ Breaching and entry specialists equipped with advanced tools for complex operations.
268
+ </p>
269
+ <div class="flex items-center text-sm text-gray-500">
270
+ <i class="fas fa-users mr-2"></i>
271
+ <span>4-5 Operators</span>
272
+ </div>
273
  </div>
274
  </div>
275
+
276
+ <!-- Team Delta -->
277
  <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
278
+ <div class="h-48 bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center">
279
+ <div class="text-5xl font-bold text-white">D</div>
280
  </div>
281
  <div class="p-6">
282
+ <h3 class="text-xl font-bold mb-2 text-orange-400">Team Delta</h3>
283
+ <p class="text-gray-400 mb-4">
284
+ Crisis negotiation and tactical medical support team ensuring peaceful resolutions.
285
+ </p>
286
+ <div class="flex items-center text-sm text-gray-500">
287
+ <i class="fas fa-users mr-2"></i>
288
+ <span>3-5 Operators</span>
289
+ </div>
290
  </div>
291
  </div>
292
+ </div>
293
  </div>
294
  </section>
295
 
 
297
  <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
298
  <div class="container mx-auto px-4">
299
  <div class="text-center mb-16">
300
+ <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
301
+ SWAT Requirements
302
+ </h2>
303
+ <p class="max-w-2xl mx-auto text-gray-400">
304
+ Rigorous standards to ensure only the most qualified candidates join our elite division
305
+ </p>
306
  </div>
307
 
308
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
309
  <!-- Requirement 1 -->
310
  <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
311
  <div class="text-4xl mb-4">
312
+ <i class="fas fa-shield-alt gradient-text"></i>
313
  </div>
314
+ <h3 class="text-xl font-bold mb-3 text-white">Law Enforcement Experience</h3>
315
+ <p class="text-gray-400">
316
+ Minimum of 6 months active service in a law enforcement department with excellent performance record.
317
+ </p>
318
  </div>
319
 
320
  <!-- Requirement 2 -->
321
  <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
322
  <div class="text-4xl mb-4">
323
+ <i class="fas fa-dumbbell gradient-text"></i>
324
  </div>
325
+ <h3 class="text-xl font-bold mb-3 text-white">Physical Fitness</h3>
326
+ <p class="text-gray-400">
327
+ Must pass rigorous physical fitness tests including strength, endurance, and agility assessments.
328
+ </p>
329
  </div>
330
 
331
  <!-- Requirement 3 -->
332
  <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
333
  <div class="text-4xl mb-4">
334
+ <i class="fas fa-brain gradient-text"></i>
335
  </div>
336
+ <h3 class="text-xl font-bold mb-3 text-white">Psychological Evaluation</h3>
337
+ <p class="text-gray-400">
338
+ Must successfully complete psychological screening to ensure mental stability under pressure.
339
+ </p>
340
  </div>
341
  </div>
342
 
343
  <div class="text-center mt-12">
344
+ <a href="https://asrp.us/apply" class="inline-block px-8 py-3 bg-gradient-to-r from-[#e4355b] to-[#e38c26] hover:from-[#ed2d57] hover:to-[#fc8e0d] rounded-full font-semibold transition duration-300 transform hover:scale-105 shadow-lg">
345
+ <i class="fas fa-file-alt mr-2"></i> Apply to SWAT Division
346
  </a>
347
  </div>
348
  </div>
349
  </section>
350
+
351
  <!-- Footer -->
352
  <footer class="py-16 bg-cover bg-center" style="background: linear-gradient(rgba(0,0,0,0.9), rgba(0,0,0,0.9)), url('Assets/footer.png') center/cover no-repeat;">
353
  <div class="container mx-auto px-4">
 
372
  <li><a href="https://asrp.us/apply" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
373
  <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Apply Now
374
  </a></li>
375
+ <li><a href="https://asrp.us#dept" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
376
  <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Departments
377
  </a></li>
378
+ <li><a href="https://asrp.us#about" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
379
  <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> About Us
380
  </a></li>
381
  </ul>
 
423
  </div>
424
  </div>
425
  </footer>
 
 
 
 
 
 
 
 
 
 
426
 
427
  <script>
428
  // Navbar scroll behavior
 
431
  const currentScroll = window.pageYOffset;
432
  const navbar = document.getElementById('navbar');
433
 
434
+ if (currentScroll <= 100) {
435
  navbar.classList.add('-translate-y-full');
436
  navbar.classList.remove('translate-y-0');
437
  return;
438
  }
439
 
440
  if (currentScroll > lastScroll) {
 
441
  navbar.classList.add('-translate-y-full');
442
  navbar.classList.remove('translate-y-0');
443
  } else {
 
444
  navbar.classList.remove('-translate-y-full');
445
  navbar.classList.add('translate-y-0');
446
  }
447
 
448
  lastScroll = currentScroll;
449
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
450
  </script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
451
  </body>
452
+ </html>
swat.html CHANGED
@@ -62,53 +62,64 @@
62
  a:hover, button:hover {
63
  cursor: url('Assets/cursor2.png') 0 0, auto;
64
  }
65
-
66
  .department-card {
67
- transition: all 0.3s ease;
68
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
 
 
69
  }
70
 
71
  .department-card:hover {
72
- transform: translateY(-10px);
73
- box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
74
- }
75
-
76
- .nav-link {
77
- position: relative;
78
- }
79
-
80
- .nav-link::after {
81
- content: '';
82
- position: absolute;
83
- width: 0;
84
- height: 2px;
85
- bottom: -2px;
86
- left: 0;
87
- background: linear-gradient(90deg, #e4355b, #e38c26);
88
- transition: width 0.3s ease;
89
- }
90
-
91
- .nav-link:hover::after {
92
- width: 100%;
93
  }
94
 
95
  .gradient-text {
96
- background: linear-gradient(90deg, #e4355b, #e38c26);
97
  background-size: 200% auto;
98
  background-clip: text;
99
  -webkit-background-clip: text;
100
  -webkit-text-fill-color: transparent;
101
- transition: background-position 0.5s ease;
102
  }
103
-
104
- .gradient-text:hover {
105
- background-position: 100% center;
 
 
106
  }
107
 
108
  .swat-hero {
109
- background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('http://static.photos/black/1200x630/45') center/cover no-repeat;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  }
111
- </style>
112
  </head>
113
  <body class="bg-black text-gray-100 font-sans">
114
  <!-- Header with Logo and Navigation -->
@@ -139,10 +150,9 @@
139
  </button>
140
  </div>
141
  </header>
142
-
143
  <!-- Hero Section -->
144
- <section class="swat-hero py-32">
145
- <div class="container mx-auto px-4 text-center">
146
  <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
147
  Special Weapons And Tactics
148
  </h1>
@@ -159,10 +169,9 @@
159
  </div>
160
  </div>
161
  </section>
162
-
163
  <!-- About SWAT Section -->
164
- <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
165
- <div class="container mx-auto px-4">
166
  <div class="text-center mb-16">
167
  <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
168
  About Our SWAT Division
@@ -208,10 +217,9 @@
208
  </div>
209
  </div>
210
  </section>
211
-
212
  <!-- SWAT Teams Section -->
213
- <section class="py-20 bg-gradient-to-b from-black to-gray-950">
214
- <div class="container mx-auto px-4">
215
  <div class="text-center mb-16">
216
  <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
217
  Our Tactical Teams
@@ -223,8 +231,8 @@
223
 
224
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
225
  <!-- Team Alpha -->
226
- <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
227
- <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center">
228
  <div class="text-5xl font-bold text-white">A</div>
229
  </div>
230
  <div class="p-6">
@@ -240,8 +248,8 @@
240
  </div>
241
 
242
  <!-- Team Bravo -->
243
- <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
244
- <div class="h-48 bg-red-800 flex items-center justify-center">
245
  <div class="text-5xl font-bold text-white">B</div>
246
  </div>
247
  <div class="p-6">
@@ -257,8 +265,8 @@
257
  </div>
258
 
259
  <!-- Team Charlie -->
260
- <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
261
- <div class="h-48 bg-gradient-to-br from-purple-700 to-purple-900 flex items-center justify-center">
262
  <div class="text-5xl font-bold text-white">C</div>
263
  </div>
264
  <div class="p-6">
@@ -274,8 +282,8 @@
274
  </div>
275
 
276
  <!-- Team Delta -->
277
- <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700">
278
- <div class="h-48 bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center">
279
  <div class="text-5xl font-bold text-white">D</div>
280
  </div>
281
  <div class="p-6">
@@ -292,10 +300,9 @@
292
  </div>
293
  </div>
294
  </section>
295
-
296
  <!-- Requirements Section -->
297
- <section class="py-20 bg-gradient-to-b from-gray-950 to-black">
298
- <div class="container mx-auto px-4">
299
  <div class="text-center mb-16">
300
  <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
301
  SWAT Requirements
@@ -304,11 +311,10 @@
304
  Rigorous standards to ensure only the most qualified candidates join our elite division
305
  </p>
306
  </div>
307
-
308
- <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
309
- <!-- Requirement 1 -->
310
- <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
311
- <div class="text-4xl mb-4">
312
  <i class="fas fa-shield-alt gradient-text"></i>
313
  </div>
314
  <h3 class="text-xl font-bold mb-3 text-white">Law Enforcement Experience</h3>
@@ -318,8 +324,8 @@
318
  </div>
319
 
320
  <!-- Requirement 2 -->
321
- <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
322
- <div class="text-4xl mb-4">
323
  <i class="fas fa-dumbbell gradient-text"></i>
324
  </div>
325
  <h3 class="text-xl font-bold mb-3 text-white">Physical Fitness</h3>
@@ -329,8 +335,8 @@
329
  </div>
330
 
331
  <!-- Requirement 3 -->
332
- <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300">
333
- <div class="text-4xl mb-4">
334
  <i class="fas fa-brain gradient-text"></i>
335
  </div>
336
  <h3 class="text-xl font-bold mb-3 text-white">Psychological Evaluation</h3>
 
62
  a:hover, button:hover {
63
  cursor: url('Assets/cursor2.png') 0 0, auto;
64
  }
 
65
  .department-card {
66
+ transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
67
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
68
+ border: 1px solid rgba(255,255,255,0.1);
69
+ backdrop-filter: blur(10px);
70
+ background: rgba(15, 15, 15, 0.7);
71
  }
72
 
73
  .department-card:hover {
74
+ transform: translateY(-5px) scale(1.02);
75
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
76
+ border-color: rgba(255,255,255,0.2);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
77
  }
78
 
79
  .gradient-text {
80
+ background: linear-gradient(135deg, #00d4ff, #090979, #7700ff);
81
  background-size: 200% auto;
82
  background-clip: text;
83
  -webkit-background-clip: text;
84
  -webkit-text-fill-color: transparent;
85
+ animation: gradientFlow 6s ease infinite;
86
  }
87
+
88
+ @keyframes gradientFlow {
89
+ 0% { background-position: 0% 50%; }
90
+ 50% { background-position: 100% 50%; }
91
+ 100% { background-position: 0% 50%; }
92
  }
93
 
94
  .swat-hero {
95
+ background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(0,0,0,0.9)), url('http://static.photos/military/1200x630/45') center/cover no-repeat;
96
+ clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
97
+ padding-bottom: 10rem;
98
+ }
99
+
100
+ section {
101
+ padding: 6rem 0;
102
+ position: relative;
103
+ }
104
+
105
+ section::before {
106
+ content: '';
107
+ position: absolute;
108
+ top: 0;
109
+ left: 0;
110
+ right: 0;
111
+ height: 1px;
112
+ background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
113
+ }
114
+
115
+ body {
116
+ background: radial-gradient(circle at center, #0a0a1a 0%, #000000 100%);
117
+ }
118
+
119
+ .bg-gradient-to-b {
120
+ background: linear-gradient(to bottom, #0a0a1a, #000000);
121
  }
122
+ </style>
123
  </head>
124
  <body class="bg-black text-gray-100 font-sans">
125
  <!-- Header with Logo and Navigation -->
 
150
  </button>
151
  </div>
152
  </header>
 
153
  <!-- Hero Section -->
154
+ <section class="swat-hero py-40">
155
+ <div class="container mx-auto px-4 text-center">
156
  <h1 class="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
157
  Special Weapons And Tactics
158
  </h1>
 
169
  </div>
170
  </div>
171
  </section>
 
172
  <!-- About SWAT Section -->
173
+ <section class="bg-gradient-to-b">
174
+ <div class="container mx-auto px-4">
175
  <div class="text-center mb-16">
176
  <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
177
  About Our SWAT Division
 
217
  </div>
218
  </div>
219
  </section>
 
220
  <!-- SWAT Teams Section -->
221
+ <section class="bg-gradient-to-b">
222
+ <div class="container mx-auto px-4">
223
  <div class="text-center mb-16">
224
  <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
225
  Our Tactical Teams
 
231
 
232
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
233
  <!-- Team Alpha -->
234
+ <div class="department-card rounded-xl overflow-hidden">
235
+ <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center">
236
  <div class="text-5xl font-bold text-white">A</div>
237
  </div>
238
  <div class="p-6">
 
248
  </div>
249
 
250
  <!-- Team Bravo -->
251
+ <div class="department-card rounded-xl overflow-hidden">
252
+ <div class="h-48 bg-red-800 flex items-center justify-center">
253
  <div class="text-5xl font-bold text-white">B</div>
254
  </div>
255
  <div class="p-6">
 
265
  </div>
266
 
267
  <!-- Team Charlie -->
268
+ <div class="department-card rounded-xl overflow-hidden">
269
+ <div class="h-48 bg-gradient-to-br from-purple-700 to-purple-900 flex items-center justify-center">
270
  <div class="text-5xl font-bold text-white">C</div>
271
  </div>
272
  <div class="p-6">
 
282
  </div>
283
 
284
  <!-- Team Delta -->
285
+ <div class="department-card rounded-xl overflow-hidden">
286
+ <div class="h-48 bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center">
287
  <div class="text-5xl font-bold text-white">D</div>
288
  </div>
289
  <div class="p-6">
 
300
  </div>
301
  </div>
302
  </section>
 
303
  <!-- Requirements Section -->
304
+ <section class="bg-gradient-to-b">
305
+ <div class="container mx-auto px-4">
306
  <div class="text-center mb-16">
307
  <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">
308
  SWAT Requirements
 
311
  Rigorous standards to ensure only the most qualified candidates join our elite division
312
  </p>
313
  </div>
314
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-4">
315
+ <!-- Requirement 1 -->
316
+ <div class="department-card rounded-xl p-8 transition-all">
317
+ <div class="text-4xl mb-4">
 
318
  <i class="fas fa-shield-alt gradient-text"></i>
319
  </div>
320
  <h3 class="text-xl font-bold mb-3 text-white">Law Enforcement Experience</h3>
 
324
  </div>
325
 
326
  <!-- Requirement 2 -->
327
+ <div class="department-card rounded-xl p-8 transition-all">
328
+ <div class="text-4xl mb-4">
329
  <i class="fas fa-dumbbell gradient-text"></i>
330
  </div>
331
  <h3 class="text-xl font-bold mb-3 text-white">Physical Fitness</h3>
 
335
  </div>
336
 
337
  <!-- Requirement 3 -->
338
+ <div class="department-card rounded-xl p-8 transition-all">
339
+ <div class="text-4xl mb-4">
340
  <i class="fas fa-brain gradient-text"></i>
341
  </div>
342
  <h3 class="text-xl font-bold mb-3 text-white">Psychological Evaluation</h3>