Spaces:
Running
Running
| <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.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .department-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background: linear-gradient(90deg, #e4355b, #e38c26); | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #e4355b, #e38c26); | |
| background-size: 200% auto; | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| transition: background-position 0.5s ease; | |
| } | |
| .gradient-text:hover { | |
| background-position: 100% center; | |
| } | |
| .swat-hero { | |
| 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; | |
| } | |
| </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-32 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-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent"> | |
| Special Weapons And Tactics | |
| </h1> | |
| <p class="text-xl md:text-2xl max-w-3xl mx-auto text-gray-300 mb-8"> | |
| Elite tactical units of Atlantic Shores Roleplay, serving Key West with precision and professionalism | |
| </p> | |
| <div class="flex flex-wrap justify-center gap-4"> | |
| <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"> | |
| <i class="fas fa-user-plus mr-2"></i> Apply to SWAT | |
| </a> | |
| <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"> | |
| <i class="fas fa-arrow-left mr-2"></i> 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="py-20 bg-gradient-to-b from-gray-950 to-black"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent"> | |
| About Our SWAT Division | |
| </h2> | |
| <p class="max-w-3xl mx-auto text-gray-400 text-lg"> | |
| Comprised of four specialized tactical teams, our SWAT division handles 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-2xl font-bold mb-4 text-white">Mission Statement</h3> | |
| <p class="text-gray-400 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-2xl 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-circle text-[#e38c26] 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/military/640x360/123" alt="SWAT Training" class="rounded-lg shadow-lg"> | |
| <img src="http://static.photos/technology/640x360/456" alt="SWAT Equipment" class="rounded-lg shadow-lg mt-8"> | |
| <img src="http://static.photos/people/640x360/789" alt="SWAT Team" class="rounded-lg shadow-lg"> | |
| <img src="http://static.photos/cityscape/640x360/321" alt="SWAT Operations" class="rounded-lg shadow-lg mt-8"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- SWAT Teams Section --> | |
| <section class="py-20 bg-gradient-to-b from-black to-gray-950"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent"> | |
| Our Tactical Teams | |
| </h2> | |
| <p class="max-w-2xl mx-auto text-gray-400"> | |
| Four specialized units within our SWAT division, each with unique capabilities and responsibilities | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Team Alpha --> | |
| <div class="department-card bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700"> | |
| <div class="h-48 bg-gradient-to-br from-[#23d7d6] to-[#327aaf] flex items-center justify-center"> | |
| <div class="text-5xl font-bold text-white">A</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-blue-400">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 bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700"> | |
| <div class="h-48 bg-red-800 flex items-center justify-center"> | |
| <div class="text-5xl font-bold text-white">B</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-red-400">Team Bravo</h3> | |
| <p class="text-gray-400 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 bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700"> | |
| <div class="h-48 bg-gradient-to-br from-purple-700 to-purple-900 flex items-center justify-center"> | |
| <div class="text-5xl font-bold text-white">C</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-purple-400">Team Charlie</h3> | |
| <p class="text-gray-400 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 bg-gray-800 rounded-lg overflow-hidden hover:bg-gray-700"> | |
| <div class="h-48 bg-gradient-to-br from-orange-600 to-orange-800 flex items-center justify-center"> | |
| <div class="text-5xl font-bold text-white">D</div> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold mb-2 text-orange-400">Team Delta</h3> | |
| <p class="text-gray-400 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="py-20 bg-gradient-to-b from-gray-950 to-black"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-[#e4355b] to-[#e38c26] bg-clip-text text-transparent"> | |
| SWAT Requirements | |
| </h2> | |
| <p class="max-w-2xl mx-auto text-gray-400"> | |
| Rigorous standards to ensure only the most qualified candidates join our elite division | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto"> | |
| <!-- Requirement 1 --> | |
| <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300"> | |
| <div class="text-4xl mb-4"> | |
| <i class="fas fa-shield-alt gradient-text"></i> | |
| </div> | |
| <h3 class="text-xl 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="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300"> | |
| <div class="text-4xl mb-4"> | |
| <i class="fas fa-dumbbell gradient-text"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Physical Fitness</h3> | |
| <p class="text-gray-400"> | |
| Must pass rigorous physical fitness tests including strength, endurance, and agility assessments. | |
| </p> | |
| </div> | |
| <!-- Requirement 3 --> | |
| <div class="bg-gray-800 rounded-lg p-8 hover:bg-gray-700 transition duration-300"> | |
| <div class="text-4xl mb-4"> | |
| <i class="fas fa-brain gradient-text"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3 text-white">Psychological Evaluation</h3> | |
| <p class="text-gray-400"> | |
| 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 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"> | |
| <i class="fas fa-file-alt mr-2"></i> Apply to SWAT Division | |
| </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">© 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> |