|
| 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>Rust Plugins - HUB</title> |
| 7 | + <link rel="icon" href="./assets/favicon.png" type="image/x-icon"> |
| 8 | + <!-- Load Tailwind CSS via CDN --> |
| 9 | + <link rel="stylesheet" href="./CSS/Info.css"> |
| 10 | + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap" rel="stylesheet"> |
| 11 | + |
| 12 | +</head> |
| 13 | +<body> |
| 14 | + |
| 15 | +<!-- Load Icons (lucide) for the missing icon placeholders --> |
| 16 | +<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script> |
| 17 | + |
| 18 | +<header class="navbar"> |
| 19 | + <div class="navbar-left"> |
| 20 | + <button class="hamburger" aria-label="Toggle menu"> |
| 21 | + <span></span><span></span><span></span> |
| 22 | + </button> |
| 23 | + <nav> |
| 24 | + <ul> |
| 25 | + <li><a href="https://erasmusdev.github.io/FlockersDevHub" class="text-white hover:text-accent-color font-semibold transition duration-200 uppercase tracking-widest">HOME</a></li> |
| 26 | + <li><a href="software.html" class="text-white hover:text-accent-color font-semibold transition duration-200 uppercase tracking-widest">SOFTWARE</a></li> |
| 27 | + <li><a href="ReshadeProfiles.html" class="text-white hover:text-accent-color font-semibold transition duration-200 uppercase tracking-widest">RESHADES</a></li> |
| 28 | + <li><a href="rust-plugins.html" class="text-accent-color font-semibold transition duration-200 uppercase tracking-widest border-b-2 border-accent-color pb-1">RUST PLUGINS</a></li> |
| 29 | + |
| 30 | + <li class="mobile-socials"> |
| 31 | + <a href="https://discord.gg/vXhUaJNYum" class="icon-link"><img src="./assets/Discord.png" alt="Discord"><span>DISCORD</span></a> |
| 32 | + <a href="https://www.youtube.com/@FlockersDesign" class="icon-link"><img src="./assets/Youtube.png" alt="YouTube"><span>YOUTUBE</span></a> |
| 33 | + <a href="https://www.twitch.tv/flockersdesign" class="icon-link"><img src="./assets/Twitch.png" alt="Twitch"><span>TWITCH</span></a> |
| 34 | + </li> |
| 35 | + </ul> |
| 36 | + </nav> |
| 37 | + </div> |
| 38 | + |
| 39 | + <div class="navbar-right"> |
| 40 | + <a href="https://discord.gg/vXhUaJNYum" class="icon-link"><img src="./assets/Discord.png" alt="Discord" style="filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.4));"><span>DISCORD</span></a> |
| 41 | + <a href="https://www.youtube.com/@FlockersDesign" class="icon-link"><img src="./assets/Youtube.png" alt="YouTube" style="filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.4));"><span>YOUTUBE</span></a> |
| 42 | + <a href="https://www.twitch.tv/flockersdesign" class="icon-link"><img src="./assets/Twitch.png" alt="Twitch" style="filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.4));"><span>TWITCH</span></a> |
| 43 | + </div> |
| 44 | +</header> |
| 45 | + |
| 46 | +<section class="hero-section relative h-[50vh] flex items-center justify-center pt-20"> |
| 47 | + <canvas id="particle-canvas"></canvas> |
| 48 | + <video autoplay muted loop playsinline id="bg-video"> |
| 49 | + <!-- Placeholder for original video. Replace with your actual path. --> |
| 50 | + <source src="./movies/HeaderVideo.mp4" type="video/mp4" onerror="this.onerror=null;this.parentElement.style.backgroundColor='#1a202c'"> |
| 51 | + Your browser does not support HTML5 video. |
| 52 | + </video> |
| 53 | + <div class="hero-overlay"></div> |
| 54 | + |
| 55 | + <div class="hero-content relative z-10 text-center"> |
| 56 | + <div class="main-logo-container"> |
| 57 | + <p class="large-brand-name text-5xl sm:text-7xl lg:text-8xl font-black uppercase text-accent-color tracking-widest drop-shadow-lg mb-2">RUST PLUGINS</p> |
| 58 | + <p class="text-lg sm:text-xl font-light tracking-widest text-white/80">CUSTOM. OPTIMIZED. GAME-CHANGING.</p> |
| 59 | + </div> |
| 60 | + </div> |
| 61 | +</section> |
| 62 | + |
| 63 | + |
| 64 | +<section class="content-feed-container py-16 px-6 lg:px-12"> |
| 65 | + |
| 66 | + <div class="full-width-banner bg-gray-800/50 py-4 mb-12 border-y-2 border-accent-color/50"> |
| 67 | + <div class="banner-content text-center"> |
| 68 | + <p class="text-xl sm:text-2xl font-bold tracking-[0.3em] uppercase text-accent-color/90">ENHANCE YOUR RUST SERVER WITH CUSTOM PLUGINS.</p> |
| 69 | + </div> |
| 70 | + </div> |
| 71 | + |
| 72 | + <h2 class="section-protocol-title text-3xl font-extrabold uppercase mb-10 text-center text-white border-b-2 border-gray-700 pb-2 mx-auto max-w-5xl">AVAILABLE PLUGINS</h2> |
| 73 | + |
| 74 | + <div class="core-provisions-grid"> |
| 75 | + |
| 76 | + <!-- CARD 1: MakeItRain --> |
| 77 | + <a href="./MakeItRain.html" class="protocol-card"> |
| 78 | + <div class="card-image-container"> |
| 79 | + <img src="./assets/MakeItRain.png" class="protocol-card-image active" alt="MakeItRain Plugin"> |
| 80 | + <div class="image-detail-overlay">OXIDE/UMOD</div> |
| 81 | + <div class="animated-border-left"></div> |
| 82 | + </div> |
| 83 | + <div class="protocol-card-content"> |
| 84 | + <div class="card-header-icon-small"> |
| 85 | + <h3>[FD] MAKEITRAIN</h3> |
| 86 | + </div> |
| 87 | + <div class="card-tagline">UNIVERSAL GATHERING MULTIPLIER</div> |
| 88 | + |
| 89 | + <div class="data-block"> |
| 90 | + <p class="card-description"> |
| 91 | + Change gathering rates by category instead of editing individual items. Control ore, stone, wood, scrap, components, and more with simple commands. Perfect for pre-wipe events. |
| 92 | + </p> |
| 93 | + </div> |
| 94 | + <span class="read-more-styled">more info →</span> |
| 95 | + </div> |
| 96 | + </a> |
| 97 | + |
| 98 | + </div> |
| 99 | +</section> |
| 100 | + |
| 101 | +<script> |
| 102 | + // Hamburger menu |
| 103 | + const hamburger = document.querySelector('.hamburger'); |
| 104 | + const nav = document.querySelector('.navbar-left nav'); |
| 105 | + hamburger.addEventListener('click', () => { |
| 106 | + nav.classList.toggle('active'); |
| 107 | + hamburger.classList.toggle('open'); |
| 108 | + }); |
| 109 | + |
| 110 | + // === Particle Canvas === |
| 111 | + const canvas = document.getElementById('particle-canvas'); |
| 112 | + const ctx = canvas.getContext('2d'); |
| 113 | + let particles = []; |
| 114 | + |
| 115 | + function resizeCanvas() { |
| 116 | + canvas.width = window.innerWidth; |
| 117 | + canvas.height = window.innerHeight; |
| 118 | + } |
| 119 | + |
| 120 | + class Particle { |
| 121 | + constructor() { |
| 122 | + this.x = Math.random() * canvas.width; |
| 123 | + this.y = Math.random() * canvas.height; |
| 124 | + this.size = Math.random() * 2 + 1; |
| 125 | + this.speedX = Math.random() * 1 - 0.5; |
| 126 | + this.speedY = Math.random() * 1 - 0.5; |
| 127 | + } |
| 128 | + |
| 129 | + update() { |
| 130 | + this.x += this.speedX; |
| 131 | + this.y += this.speedY; |
| 132 | + |
| 133 | + if (this.x > canvas.width || this.x < 0) this.speedX *= -1; |
| 134 | + if (this.y > canvas.height || this.y < 0) this.speedY *= -1; |
| 135 | + } |
| 136 | + |
| 137 | + draw() { |
| 138 | + ctx.fillStyle = 'rgba(0, 174, 255, 0.5)'; |
| 139 | + ctx.beginPath(); |
| 140 | + ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); |
| 141 | + ctx.fill(); |
| 142 | + } |
| 143 | + } |
| 144 | + |
| 145 | + function initParticles() { |
| 146 | + particles = []; |
| 147 | + const particleCount = Math.min(100, Math.floor((canvas.width * canvas.height) / 10000)); |
| 148 | + for (let i = 0; i < particleCount; i++) { |
| 149 | + particles.push(new Particle()); |
| 150 | + } |
| 151 | + } |
| 152 | + |
| 153 | + function animateParticles() { |
| 154 | + ctx.clearRect(0, 0, canvas.width, canvas.height); |
| 155 | + particles.forEach(particle => { |
| 156 | + particle.update(); |
| 157 | + particle.draw(); |
| 158 | + }); |
| 159 | + requestAnimationFrame(animateParticles); |
| 160 | + } |
| 161 | + |
| 162 | + window.addEventListener('resize', () => { |
| 163 | + resizeCanvas(); |
| 164 | + initParticles(); |
| 165 | + }); |
| 166 | + |
| 167 | + resizeCanvas(); |
| 168 | + initParticles(); |
| 169 | + animateParticles(); |
| 170 | +</script> |
| 171 | + |
| 172 | +</body> |
| 173 | +</html> |
0 commit comments