undefined / swat.html
GregorSaalste's picture
Make the hero background image a slideshow that changes automatically
fbe0bbb verified
Raw
History Blame Contribute Delete
25.3 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SWAT - Atlantic Shores Roleplay</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="icon" href="Assets/fav.png"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<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">
<link rel="canonical" href="https://asrp.us/swat.html">
<!-- SEO Meta Tags -->
<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.">
<meta name="keywords" content="SWAT, Atlantic Shores Roleplay, FiveM, GTA V Roleplay, Key West, Florida Roleplay, Tactical Units, Special Weapons">
<meta name="robots" content="index, follow">
<!-- Open Graph Tags -->
<meta property="og:type" content="website">
<meta property="og:title" content="SWAT - Atlantic Shores Roleplay">
<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.">
<meta property="og:image" content="https://asrp.us/Assets/Heya.png">
<meta property="og:url" content="https://asrp.us/swat.html">
<meta property="og:site_name" content="Atlantic Shores Roleplay">
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="SWAT - Atlantic Shores Roleplay">
<meta name="twitter:description" content="SWAT Division of Atlantic Shores Roleplay - Elite tactical units serving Key West, Florida">
<meta name="twitter:image" content="https://asrp.us/Assets/Heya.png">
<style>
::selection {
background: #e4355b;
color: white;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: #1a1a1a;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(#e4355b, #e38c26);
border-radius: 6px;
border: 3px solid #1a1a1a;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(#e38c26, #e4355b);
}
body {
cursor: url('Assets/cursor.png') 16 16, auto;
}
a:hover, button:hover {
cursor: url('Assets/cursor2.png') 0 0, auto;
}
.department-card {
transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255,255,255,0.1);
backdrop-filter: blur(10px);
background: rgba(15, 15, 15, 0.7);
}
.department-card:hover {
transform: translateY(-5px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
border-color: rgba(255,255,255,0.2);
}
.gradient-text {
color: #005288;
text-shadow: none;
}
.swat-hero {
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;
}
section {
padding: 3rem 0;
}
body {
background: #121212;
color: #e0e0e0;
font-family: 'Helvetica Neue', Arial, sans-serif;
}
.bg-gradient-to-b {
background: #1e1e1e;
border-bottom: 1px solid #333;
}
.department-card {
background: #252525;
border: 1px solid #333;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
transition: all 0.2s ease;
}
.department-card:hover {
transform: translateY(-3px);
box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.btn-primary {
background: #005288;
color: white;
border: none;
}
.btn-primary:hover {
background: #003d66;
}
.btn-outline {
border: 1px solid #005288;
color: #005288;
}
.btn-outline:hover {
background: #f1f8ff;
}
</style>
</head>
<body class="bg-black text-gray-100 font-sans">
<!-- Header with Logo and Navigation -->
<header class="fixed w-full z-50 bg-black bg-opacity-90 shadow-lg transform -translate-y-full transition-transform duration-300" id="navbar">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<img src="Assets/logo.png" alt="Atlantic Shores Roleplay logo" class="h-[50px] w-[140px]" align=left>
</div>
<nav class="hidden md:flex space-x-6">
<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">
<i class="fas fa-home mr-2 text-sm"></i> Home
</a>
<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">
<i class="fas fa-info-circle mr-2 text-sm"></i> About
</a>
<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">
<i class="fas fa-building mr-2 text-sm"></i> Departments
</a>
<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">
<i class="fas fa-book mr-2 text-sm"></i> Requirements
</a>
<a href="https://asrp.us/apply" class="nav-link px-3 py-2 text-gray-300 hover:text-white rounded-lg transition-all duration-300 flex items-center">
<i class="fas fa-user-plus mr-2 text-sm"></i> Apply Now
</a>
</nav>
<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">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</header>
<!-- Hero Section -->
<section class="swat-hero py-20 relative overflow-hidden">
<div class="slideshow-container absolute inset-0 w-full h-full">
<div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/45')"></div>
<div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/46')"></div>
<div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/47')"></div>
<div class="slide fade" style="background-image: url('http://static.photos/government/1200x630/48')"></div>
</div>
<div class="container mx-auto px-4 text-center relative z-10">
<h1 class="text-3xl md:text-4xl font-bold mb-6 gradient-text">
SPECIAL WEAPONS AND TACTICS UNIT
</h1>
<p class="text-lg md:text-xl max-w-3xl mx-auto text-gray-400 mb-8">
Official tactical response division serving Key West, Florida
</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="https://asrp.us/apply" class="px-8 py-3 btn-primary rounded font-semibold">
<i class="fas fa-user-plus mr-2"></i> Apply to SWAT
</a>
<a href="https://asrp.us#dept" class="px-8 py-3 btn-outline rounded font-semibold">
<i class="fas fa-arrow-left mr-2"></i> View All Departments
</a>
</div>
</div>
</section>
<style>
.slideshow-container {
position: relative;
background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7));
}
.slide {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.fade {
opacity: 1;
}
</style>
<script>
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
function showSlides() {
for (let i = 0; i < slides.length; i++) {
slides[i].style.opacity = 0;
}
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].style.opacity = 1;
setTimeout(showSlides, 5000); // Change image every 5 seconds
}
// Initialize first slide
slides[0].style.opacity = 1;
setTimeout(showSlides, 5000);
</script>
<!-- About SWAT Section -->
<section class="bg-gradient-to-b bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text">
ABOUT THE SWAT DIVISION
</h2>
<p class="max-w-3xl mx-auto text-gray-400">
Specialized tactical unit handling high-risk situations with precision and professionalism
</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<h3 class="text-xl font-bold mb-4 text-white">MISSION STATEMENT</h3>
<p class="text-gray-700 mb-6">
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.
</p>
<h3 class="text-xl font-bold mb-4 text-white">CORE VALUES</h3>
<ul class="space-y-3 text-gray-400">
<li class="flex items-start">
<i class="fas fa-check text-gray-600 mt-1 mr-3"></i>
<span>Tactical Excellence in all operations</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
<span>Unwavering commitment to public safety</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
<span>Professionalism in every interaction</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-[#e38c26] mt-1 mr-3"></i>
<span>Continuous training and improvement</span>
</li>
</ul>
</div>
<div class="grid grid-cols-2 gap-4">
<img src="http://static.photos/government/640x360/123" alt="SWAT Training" class="rounded shadow">
<img src="http://static.photos/government/640x360/456" alt="SWAT Equipment" class="rounded shadow mt-4">
<img src="http://static.photos/government/640x360/789" alt="SWAT Team" class="rounded shadow">
<img src="http://static.photos/government/640x360/321" alt="SWAT Operations" class="rounded shadow mt-4">
</div>
</div>
</div>
</section>
<!-- SWAT Teams Section -->
<section class="bg-gradient-to-b">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text">
TACTICAL TEAMS
</h2>
<p class="max-w-2xl mx-auto text-gray-400">
Specialized units within the SWAT division
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
<!-- Team Alpha -->
<div class="department-card rounded overflow-hidden">
<div class="h-48 bg-gray-800 flex items-center justify-center">
<img src="http://static.photos/patches/640x360/1" alt="Team Alpha Patch" class="h-32">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-white">TEAM ALPHA</h3>
<p class="text-gray-400 mb-4">
Primary assault team specializing in direct entry operations and high-risk warrant service.
</p>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-users mr-2"></i>
<span>6-8 Operators</span>
</div>
</div>
</div>
<!-- Team Bravo -->
<div class="department-card rounded overflow-hidden">
<div class="h-48 bg-gray-800 flex items-center justify-center">
<img src="http://static.photos/patches/640x360/2" alt="Team Bravo Patch" class="h-32">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-white">TEAM BRAVO</h3>
<p class="text-gray-700 mb-4">
Sniper and reconnaissance team providing overwatch and precision engagement capabilities.
</p>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-users mr-2"></i>
<span>4-6 Operators</span>
</div>
</div>
</div>
<!-- Team Charlie -->
<div class="department-card rounded overflow-hidden">
<div class="h-48 bg-gray-800 flex items-center justify-center">
<img src="http://static.photos/patches/640x360/3" alt="Team Charlie Patch" class="h-32">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-white">TEAM CHARLIE</h3>
<p class="text-gray-700 mb-4">
Breaching and entry specialists equipped with advanced tools for complex operations.
</p>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-users mr-2"></i>
<span>4-5 Operators</span>
</div>
</div>
</div>
<!-- Team Delta -->
<div class="department-card rounded overflow-hidden">
<div class="h-48 bg-gray-800 flex items-center justify-center">
<img src="http://static.photos/patches/640x360/4" alt="Team Delta Patch" class="h-32">
</div>
<div class="p-6">
<h3 class="text-xl font-bold mb-2 text-white">TEAM DELTA</h3>
<p class="text-gray-700 mb-4">
Crisis negotiation and tactical medical support team ensuring peaceful resolutions.
</p>
<div class="flex items-center text-sm text-gray-500">
<i class="fas fa-users mr-2"></i>
<span>3-5 Operators</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Requirements Section -->
<section class="bg-gradient-to-b">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-2xl md:text-3xl font-bold mb-4 gradient-text">
REQUIREMENTS
</h2>
<p class="max-w-2xl mx-auto text-gray-700">
Minimum qualifications for SWAT candidates
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto px-4">
<!-- Requirement 1 -->
<div class="department-card rounded p-6">
<div class="text-3xl mb-4">
<i class="fas fa-shield-alt text-gray-600"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-white">LAW ENFORCEMENT EXPERIENCE</h3>
<p class="text-gray-400">
Minimum of 6 months active service in a law enforcement department with excellent performance record.
</p>
</div>
<!-- Requirement 2 -->
<div class="department-card rounded p-6">
<div class="text-3xl mb-4">
<i class="fas fa-dumbbell text-gray-600"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-white">PHYSICAL FITNESS</h3>
<p class="text-gray-700">
Must pass rigorous physical fitness tests including strength, endurance, and agility assessments.
</p>
</div>
<!-- Requirement 3 -->
<div class="department-card rounded p-6">
<div class="text-3xl mb-4">
<i class="fas fa-brain text-gray-600"></i>
</div>
<h3 class="text-lg font-bold mb-3 text-white">PSYCHOLOGICAL EVALUATION</h3>
<p class="text-gray-700">
Must successfully complete psychological screening to ensure mental stability under pressure.
</p>
</div>
</div>
<div class="text-center mt-12">
<a href="https://asrp.us/apply" class="inline-block px-8 py-3 btn-primary rounded font-semibold">
<i class="fas fa-file-alt mr-2"></i> SUBMIT APPLICATION
</a>
</div>
</div>
</section>
<!-- Footer -->
<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;">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-12">
<div class="lg:col-span-2">
<div class="flex items-center mb-6">
<img src="Assets/fav.png" alt="Atlantic Shores Logo" class="h-[120px] w-[152px] mr-4">
<div class="border-l border-gray-600 pl-4">
<h3 class="text-2xl font-bold bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent">Atlantic Shores Roleplay</h3>
<p class="text-gray-400 mt-2">17+ Whitelisted FiveM Community</p>
</div>
</div>
<p class="text-gray-400 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>
</div>
<div>
<h4 class="text-xl font-semibold mb-6 text-white border-b border-gray-700 pb-2">Quick Links</h4>
<ul class="space-y-4">
<li><a href="https://asrp.us" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
<i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Home
</a></li>
<li><a href="https://asrp.us/apply" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
<i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Apply Now
</a></li>
<li><a href="https://asrp.us#dept" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
<i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> Departments
</a></li>
<li><a href="https://asrp.us#about" class="text-gray-400 hover:text-[#e38c26] transition-all duration-300 flex items-center group">
<i class="fas fa-arrow-right mr-3 text-sm group-hover:translate-x-1 transition-transform"></i> About Us
</a></li>
</ul>
</div>
<div>
<h4 class="text-xl font-semibold mb-6 text-white border-b border-gray-700 pb-2">Connect With Us</h4>
<div class="grid grid-cols-2 gap-4">
<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">
<i class="fab fa-discord text-2xl text-[#5865F2] group-hover:scale-110 transition-transform"></i>
<p class="text-gray-400 text-sm mt-2">Discord</p>
</a>
<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">
<i class="fab fa-twitter text-2xl text-[#1DA1F2] group-hover:scale-110 transition-transform"></i>
<p class="text-gray-400 text-sm mt-2">Twitter</p>
</a>
<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">
<i class="fab fa-youtube text-2xl text-[#FF0000] group-hover:scale-110 transition-transform"></i>
<p class="text-gray-400 text-sm mt-2">YouTube</p>
</a>
<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">
<i class="fab fa-instagram text-2xl text-[#E1306C] group-hover:scale-110 transition-transform"></i>
<p class="text-gray-400 text-sm mt-2">Instagram</p>
</a>
</div>
</div>
</div>
<div class="border-t border-gray-700 pt-8">
<div class="flex flex-col lg:flex-row justify-between items-center gap-6">
<div class="text-center lg:text-left">
<p class="text-gray-500">&copy; 2023 Atlantic Shores Roleplay. All rights reserved. | Developed By RedneckRyan</p>
</div>
<div class="flex items-center space-x-4">
<div class="flex items-center bg-gray-800 px-4 py-2 rounded-lg">
<div class="w-3 h-3 rounded-full bg-green-500 mr-2 animate-pulse"></div>
<span class="text-gray-300 text-sm">Server: <span class="text-green-400 font-medium">Online</span></span>
</div>
<div class="flex items-center">
<span class="text-gray-500 text-sm">Made in the USA</span>
<img src="Assets/usa.png" alt="USA" class="h-5 w-5 ml-2">
</div>
</div>
</div>
</div>
</div>
</footer>
<script>
// Navbar scroll behavior
let lastScroll = 0;
window.addEventListener('scroll', function() {
const currentScroll = window.pageYOffset;
const navbar = document.getElementById('navbar');
if (currentScroll <= 100) {
navbar.classList.add('-translate-y-full');
navbar.classList.remove('translate-y-0');
return;
}
if (currentScroll > lastScroll) {
navbar.classList.add('-translate-y-full');
navbar.classList.remove('translate-y-0');
} else {
navbar.classList.remove('-translate-y-full');
navbar.classList.add('translate-y-0');
}
lastScroll = currentScroll;
});
</script>
</body>
</html>