Hugging Face's logo

Spaces:
GregorSaalste
/
undefined
Running

App Files Community
GregorSaalste commited on
Commit
93a4fea
·
verified ·
1 Parent(s): 8d82b73

Now make a department home page (Links to all other departments) also main color should be grey

Browse files
Files changed (3) hide show
  1. departments.html +279 -0
  2. index.html +2 -2
  3. swat.html +2 -2
departments.html ADDED
@@ -0,0 +1,279 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Departments - 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
+ <style>
11
+ body {
12
+ background-color: #121212;
13
+ color: #e0e0e0;
14
+ font-family: 'Helvetica Neue', Arial, sans-serif;
15
+ }
16
+ .department-card {
17
+ background: #252525;
18
+ border: 1px solid #333;
19
+ transition: all 0.2s ease;
20
+ }
21
+ .department-card:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2);
24
+ }
25
+ .hero-section {
26
+ background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('http://static.photos/government/1200x630/45') center/cover no-repeat;
27
+ }
28
+ .btn-primary {
29
+ background: #555;
30
+ color: white;
31
+ border: none;
32
+ }
33
+ .btn-primary:hover {
34
+ background: #444;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body>
39
+ <!-- Header -->
40
+ <header class="fixed w-full z-50 bg-black bg-opacity-90 shadow-lg transform -translate-y-full transition-transform duration-300" id="navbar">
41
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
42
+ <div class="flex items-center">
43
+ <img src="Assets/logo.png" alt="Atlantic Shores Roleplay logo" class="h-[50px] w-[140px]">
44
+ </div>
45
+ <nav class="hidden md:flex space-x-6">
46
+ <a href="https://asrp.us" class="px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
47
+ <i class="fas fa-home mr-2 text-sm"></i> Home
48
+ </a>
49
+ <a href="https://asrp.us#about" class="px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
50
+ <i class="fas fa-info-circle mr-2 text-sm"></i> About
51
+ </a>
52
+ <a href="https://asrp.us/departments" class="px-3 py-2 bg-gray-700 text-white rounded-lg flex items-center">
53
+ <i class="fas fa-building mr-2 text-sm"></i> Departments
54
+ </a>
55
+ <a href="https://docs.google.com/document/d/1smQRxW98qs1LAvXO69y3h4DE5JOkwmAURhBy3I4_usc/edit?tab=t.0" class="px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
56
+ <i class="fas fa-book mr-2 text-sm"></i> Requirements
57
+ </a>
58
+ <a href="https://asrp.us/apply" class="px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
59
+ <i class="fas fa-user-plus mr-2 text-sm"></i> Apply Now
60
+ </a>
61
+ </nav>
62
+ <button class="md:hidden text-gray-300 hover:text-white bg-gray-800 hover:bg-gray-700 p-2 rounded-lg transition-colors duration-300">
63
+ <i class="fas fa-bars text-xl"></i>
64
+ </button>
65
+ </div>
66
+ </header>
67
+
68
+ <!-- Hero Section -->
69
+ <section class="hero-section py-32">
70
+ <div class="container mx-auto px-4 text-center">
71
+ <h1 class="text-4xl md:text-6xl font-bold mb-6 text-gray-100">
72
+ Key West Departments
73
+ </h1>
74
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto text-gray-300 mb-8">
75
+ Explore the specialized departments serving the Atlantic Shores community
76
+ </p>
77
+ </div>
78
+ </section>
79
+
80
+ <!-- Departments Grid -->
81
+ <section class="py-20 bg-gray-900">
82
+ <div class="container mx-auto px-4">
83
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
84
+ <!-- SWAT Department -->
85
+ <a href="/swat.html" class="department-card rounded-lg overflow-hidden">
86
+ <div class="h-48 bg-gray-800 flex items-center justify-center">
87
+ <img src="http://static.photos/patches/640x360/1" alt="SWAT Patch" class="h-32">
88
+ </div>
89
+ <div class="p-6">
90
+ <h3 class="text-xl font-bold mb-2 text-white">SPECIAL WEAPONS AND TACTICS</h3>
91
+ <p class="text-gray-400 mb-4">
92
+ Elite tactical unit handling high-risk operations and special situations.
93
+ </p>
94
+ <div class="flex justify-between text-sm text-gray-500">
95
+ <span><i class="fas fa-users mr-2"></i> 20-25 Operators</span>
96
+ <span class="text-gray-300">Learn More →</span>
97
+ </div>
98
+ </div>
99
+ </a>
100
+
101
+ <!-- Police Department -->
102
+ <a href="#" class="department-card rounded-lg overflow-hidden">
103
+ <div class="h-48 bg-gray-800 flex items-center justify-center">
104
+ <img src="http://static.photos/patches/640x360/2" alt="Police Patch" class="h-32">
105
+ </div>
106
+ <div class="p-6">
107
+ <h3 class="text-xl font-bold mb-2 text-white">POLICE DEPARTMENT</h3>
108
+ <p class="text-gray-400 mb-4">
109
+ Primary law enforcement agency maintaining public safety and order.
110
+ </p>
111
+ <div class="flex justify-between text-sm text-gray-500">
112
+ <span><i class="fas fa-users mr-2"></i> 50-60 Officers</span>
113
+ <span class="text-gray-300">Learn More →</span>
114
+ </div>
115
+ </div>
116
+ </a>
117
+
118
+ <!-- Fire Rescue -->
119
+ <a href="#" class="department-card rounded-lg overflow-hidden">
120
+ <div class="h-48 bg-gray-800 flex items-center justify-center">
121
+ <img src="http://static.photos/patches/640x360/3" alt="Fire Rescue Patch" class="h-32">
122
+ </div>
123
+ <div class="p-6">
124
+ <h3 class="text-xl font-bold mb-2 text-white">FIRE RESCUE</h3>
125
+ <p class="text-gray-400 mb-4">
126
+ Emergency medical services and fire suppression operations.
127
+ </p>
128
+ <div class="flex justify-between text-sm text-gray-500">
129
+ <span><i class="fas fa-users mr-2"></i> 30-35 Personnel</span>
130
+ <span class="text-gray-300">Learn More →</span>
131
+ </div>
132
+ </div>
133
+ </a>
134
+
135
+ <!-- Corrections -->
136
+ <a href="#" class="department-card rounded-lg overflow-hidden">
137
+ <div class="h-48 bg-gray-800 flex items-center justify-center">
138
+ <img src="http://static.photos/patches/640x360/4" alt="Corrections Patch" class="h-32">
139
+ </div>
140
+ <div class="p-6">
141
+ <h3 class="text-xl font-bold mb-2 text-white">CORRECTIONS</h3>
142
+ <p class="text-gray-400 mb-4">
143
+ Detention facility operations and inmate management.
144
+ </p>
145
+ <div class="flex justify-between text-sm text-gray-500">
146
+ <span><i class="fas fa-users mr-2"></i> 15-20 Officers</span>
147
+ <span class="text-gray-300">Learn More →</span>
148
+ </div>
149
+ </div>
150
+ </a>
151
+
152
+ <!-- Highway Patrol -->
153
+ <a href="#" class="department-card rounded-lg overflow-hidden">
154
+ <div class="h-48 bg-gray-800 flex items-center justify-center">
155
+ <img src="http://static.photos/patches/640x360/5" alt="Highway Patrol Patch" class="h-32">
156
+ </div>
157
+ <div class="p-6">
158
+ <h3 class="text-xl font-bold mb-2 text-white">HIGHWAY PATROL</h3>
159
+ <p class="text-gray-400 mb-4">
160
+ Traffic enforcement and highway safety operations.
161
+ </p>
162
+ <div class="flex justify-between text-sm text-gray-500">
163
+ <span><i class="fas fa-users mr-2"></i> 12-15 Troopers</span>
164
+ <span class="text-gray-300">Learn More →</span>
165
+ </div>
166
+ </div>
167
+ </a>
168
+
169
+ <!-- Civilian Operations -->
170
+ <a href="#" class="department-card rounded-lg overflow-hidden">
171
+ <div class="h-48 bg-gray-800 flex items-center justify-center">
172
+ <img src="http://static.photos/patches/640x360/6" alt="Civilian Patch" class="h-32">
173
+ </div>
174
+ <div class="p-6">
175
+ <h3 class="text-xl font-bold mb-2 text-white">CIVILIAN OPERATIONS</h3>
176
+ <p class="text-gray-400 mb-4">
177
+ Support roles and non-sworn positions within the department.
178
+ </p>
179
+ <div class="flex justify-between text-sm text-gray-500">
180
+ <span><i class="fas fa-users mr-2"></i> Varies</span>
181
+ <span class="text-gray-300">Learn More →</span>
182
+ </div>
183
+ </div>
184
+ </a>
185
+ </div>
186
+ </div>
187
+ </section>
188
+
189
+ <!-- Footer -->
190
+ <footer class="py-16 bg-black">
191
+ <div class="container mx-auto px-4">
192
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-12">
193
+ <div class="lg:col-span-2">
194
+ <div class="flex items-center mb-6">
195
+ <img src="Assets/fav.png" alt="Atlantic Shores Logo" class="h-[120px] w-[152px] mr-4">
196
+ <div class="border-l border-gray-600 pl-4">
197
+ <h3 class="text-2xl font-bold text-gray-300">Atlantic Shores Roleplay</h3>
198
+ <p class="text-gray-500 mt-2">17+ Whitelisted FiveM Community</p>
199
+ </div>
200
+ </div>
201
+ <p class="text-gray-500 text-lg max-w-xl">A premier FiveM community based in Key West, Florida, dedicated to creating immersive, realistic roleplay experiences for our members.</p>
202
+ </div>
203
+
204
+ <div>
205
+ <h4 class="text-xl font-semibold mb-6 text-white border-b border-gray-700 pb-2">Quick Links</h4>
206
+ <ul class="space-y-4">
207
+ <li><a href="https://asrp.us" class="text-gray-400 hover:text-white transition-all duration-300 flex items-center group">
208
+ <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Home
209
+ </a></li>
210
+ <li><a href="https://asrp.us/apply" class="text-gray-400 hover:text-white transition-all duration-300 flex items-center group">
211
+ <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Apply Now
212
+ </a></li>
213
+ <li><a href="https://asrp.us/departments" class="text-gray-400 hover:text-white transition-all duration-300 flex items-center group">
214
+ <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Departments
215
+ </a></li>
216
+ <li><a href="https://asrp.us#about" class="text-gray-400 hover:text-white transition-all duration-300 flex items-center group">
217
+ <i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> About Us
218
+ </a></li>
219
+ </ul>
220
+ </div>
221
+
222
+ <div>
223
+ <h4 class="text-xl font-semibold mb-6 text-white border-b border-gray-700 pb-2">Connect With Us</h4>
224
+ <div class="grid grid-cols-2 gap-4">
225
+ <a href="https://discord.gg/js6qx7PbQC" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
226
+ <i class="fab fa-discord text-2xl text-[#5865F2] group-hover:scale-110 transition-transform"></i>
227
+ <p class="text-gray-400 text-sm mt-2">Discord</p>
228
+ </a>
229
+ <a href="https://x.com/ASRP_Official_" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
230
+ <i class="fab fa-twitter text-2xl text-[#1DA1F2] group-hover:scale-110 transition-transform"></i>
231
+ <p class="text-gray-400 text-sm mt-2">Twitter</p>
232
+ </a>
233
+ <a href="https://www.youtube.com/@asrp.online" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
234
+ <i class="fab fa-youtube text-2xl text-[#FF0000] group-hover:scale-110 transition-transform"></i>
235
+ <p class="text-gray-400 text-sm mt-2">YouTube</p>
236
+ </a>
237
+ <a href="https://www.instagram.com/asrp.us/" class="bg-gray-800 hover:bg-gray-700 p-3 rounded-lg text-center transition-all duration-300 group">
238
+ <i class="fab fa-instagram text-2xl text-[#E1306C] group-hover:scale-110 transition-transform"></i>
239
+ <p class="text-gray-400 text-sm mt-2">Instagram</p>
240
+ </a>
241
+ </div>
242
+ </div>
243
+ </div>
244
+
245
+ <div class="border-t border-gray-700 pt-8">
246
+ <div class="flex flex-col lg:flex-row justify-between items-center gap-6">
247
+ <div class="text-center lg:text-left">
248
+ <p class="text-gray-500">&copy; 2023 Atlantic Shores Roleplay. All rights reserved. | Developed By RedneckRyan</p>
249
+ </div>
250
+ <div class="flex items-center space-x-4">
251
+ <div class="flex items-center bg-gray-800 px-4 py-2 rounded-lg">
252
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse"></div>
253
+ <span class="text-gray-300 text-sm">Server: <span class="text-green-400 font-medium">Online</span></span>
254
+ </div>
255
+ <div class="flex items-center">
256
+ <span class="text-gray-500 text-sm">Made in the USA</span>
257
+ <img src="Assets/usa.png" alt="USA" class="h-5 w-5 ml-2">
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </footer>
264
+
265
+ <script>
266
+ // Navbar scroll behavior
267
+ window.addEventListener('scroll', function() {
268
+ const navbar = document.getElementById('navbar');
269
+ if (window.scrollY > 100) {
270
+ navbar.classList.remove('-translate-y-full');
271
+ navbar.classList.add('translate-y-0');
272
+ } else {
273
+ navbar.classList.add('-translate-y-full');
274
+ navbar.classList.remove('translate-y-0');
275
+ }
276
+ });
277
+ </script>
278
+ </body>
279
+ </html>
index.html CHANGED
@@ -124,9 +124,9 @@
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">
131
  <i class="fas fa-book mr-2 text-sm"></i> Requirements
132
  </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/departments" 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">
131
  <i class="fas fa-book mr-2 text-sm"></i> Requirements
132
  </a>
swat.html CHANGED
@@ -142,9 +142,9 @@
142
  <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">
143
  <i class="fas fa-info-circle mr-2 text-sm"></i> About
144
  </a>
145
- <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">
146
  <i class="fas fa-building mr-2 text-sm"></i> Departments
147
- </a>
148
  <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">
149
  <i class="fas fa-book mr-2 text-sm"></i> Requirements
150
  </a>
 
142
  <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">
143
  <i class="fas fa-info-circle mr-2 text-sm"></i> About
144
  </a>
145
+ <a href="https://asrp.us/departments" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
146
  <i class="fas fa-building mr-2 text-sm"></i> Departments
147
+ </a>
148
  <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">
149
  <i class="fas fa-book mr-2 text-sm"></i> Requirements
150
  </a>