Hugging Face's logo

Spaces:
Pnkj01
/
newbot
Running

App Files Community
newbot / index.html
Pnkj01's picture
Pnkj01
Add 3 files
e653ead verified
Raw
History Blame
38.6 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Free Fire Headshot Configurator PRO</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">
 <style>
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');
body {
 font-family: 'Poppins', sans-serif;
 background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
 min-height: 100vh;
 color: #e2e8f0;
 }
.tech-font {
 font-family: 'Orbitron', sans-serif;
 }
.config-card {
 background: rgba(10, 10, 20, 0.7);
 backdrop-filter: blur(12px);
 border: 1px solid rgba(255, 165, 0, 0.15);
 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
 transition: all 0.3s ease;
 }
.config-card:hover {
 border-color: rgba(255, 165, 0, 0.3);
 box-shadow: 0 8px 32px 0 rgba(255, 165, 0, 0.2);
 }
.slider-thumb::-webkit-slider-thumb {
 -webkit-appearance: none;
 appearance: none;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #ff4500;
 cursor: pointer;
 box-shadow: 0 0 5px rgba(255, 69, 0, 0.8);
 }
.slider-thumb::-moz-range-thumb {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background: #ff4500;
 cursor: pointer;
 box-shadow: 0 0 5px rgba(255, 69, 0, 0.8);
 }
.toggle-checkbox:checked {
 right: 0;
 border-color: #ff4500;
 background-color: #ff4500;
 }
.toggle-checkbox:checked + .toggle-label {
 background-color: rgba(255, 69, 0, 0.3);
 }
.weapon-selector {
 transition: all 0.3s ease;
 position: relative;
 overflow: hidden;
 }
.weapon-selector::before {
 content: '';
 position: absolute;
 top: 0;
 left: -100%;
 width: 100%;
 height: 100%;
 background: linear-gradient(90deg, transparent, rgba(255, 69, 0, 0.4), transparent);
 transition: all 0.5s ease;
 }
.weapon-selector:hover::before {
 left: 100%;
 }
.weapon-selector:hover {
 transform: translateY(-3px);
 box-shadow: 0 5px 15px rgba(255, 69, 0, 0.3);
 }
.weapon-selector.active {
 border-color: #ff4500;
 box-shadow: 0 0 0 3px rgba(255, 69, 0, 0.3);
 background: rgba(255, 69, 0, 0.1);
 }
.pulse-animation {
 animation: pulse 1.5s infinite;
 }
@keyframes pulse {
 0% {
 box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7);
 }
 70% {
 box-shadow: 0 0 0 10px rgba(255, 69, 0, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(255, 69, 0, 0);
 }
 }
.headshot-indicator {
 position: relative;
 width: 24px;
 height: 24px;
 background: rgba(255, 69, 0, 0.2);
 border-radius: 50%;
 display: flex;
 align-items: center;
 justify-content: center;
 }
.headshot-indicator::after {
 content: '';
 position: absolute;
 width: 16px;
 height: 16px;
 background: rgba(255, 69, 0, 0.6);
 border-radius: 50%;
 animation: pulse 2s infinite;
 }
.damage-meter {
 height: 6px;
 background: linear-gradient(90deg, #ff0000, #ff4500, #ff8c00);
 border-radius: 3px;
 margin-top: 4px;
 }
.crosshair-preview {
 width: 100px;
 height: 100px;
 border-radius: 50%;
 background: rgba(0, 0, 0, 0.5);
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 }
.crosshair-center {
 width: 6px;
 height: 6px;
 background: #ff4500;
 border-radius: 50%;
 position: absolute;
 }
.crosshair-line {
 position: absolute;
 background: #ff4500;
 }
.horizontal-line {
 width: 30px;
 height: 2px;
 }
.vertical-line {
 width: 2px;
 height: 30px;
 }
.recoil-pattern {
 width: 100px;
 height: 100px;
 background: rgba(0, 0, 0, 0.5);
 position: relative;
 margin: 0 auto;
 }
.recoil-dot {
 position: absolute;
 width: 4px;
 height: 4px;
 background: #ff4500;
 border-radius: 50%;
 }
.tab-button {
 position: relative;
 overflow: hidden;
 }
.tab-button::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 3px;
 background: #ff4500;
 transition: width 0.3s ease;
 }
.tab-button.active::after {
 width: 100%;
 }
.tab-button.active {
 color: #ff4500;
 font-weight: 600;
 }
.stats-bar {
 height: 8px;
 background: rgba(255, 69, 0, 0.2);
 border-radius: 4px;
 overflow: hidden;
 }
.stats-fill {
 height: 100%;
 background: linear-gradient(90deg, #ff4500, #ff8c00);
 border-radius: 4px;
 }
 </style>
</head>
<body class="text-gray-200">
 <div class="container mx-auto px-4 py-8">
 <div class="text-center mb-10">
 <h1 class="text-5xl font-bold mb-2 bg-gradient-to-r from-orange-500 to-red-600 bg-clip-text text-transparent tech-font">
 <i class="fas fa-crosshairs mr-2"></i> HEADSHOT PRO v2.0
 </h1>
 <p class="text-gray-400 max-w-2xl mx-auto">Advanced tactical configuration for maximum headshot efficiency</p>
<div class="mt-6 flex justify-center gap-4">
 <div class="flex items-center">
 <div class="headshot-indicator mr-2"></div>
 <span class="text-sm">Headshot Mode Active</span>
 </div>
 <div class="flex items-center">
 <i class="fas fa-bolt text-yellow-500 mr-2"></i>
 <span class="text-sm">Aggressive Recoil Control</span>
 </div>
 </div>
 </div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
 <!-- Main Configuration Panel -->
 <div class="config-card rounded-xl p-6 lg:col-span-2">
 <div class="flex justify-between items-center mb-6">
 <h2 class="text-2xl font-semibold flex items-center">
 <i class="fas fa-skull mr-2 text-red-500"></i> Precision Configuration
 </h2>
 <div class="flex items-center space-x-4">
 <div class="flex items-center space-x-2">
 <span class="text-sm">Auto Headshot</span>
 <div class="relative inline-block w-12 mr-2 align-middle select-none">
 <input type="checkbox" id="auto-headshot" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/>
 <label for="auto-headshot" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 </div>
 </div>
 <div class="flex items-center space-x-2">
 <span class="text-sm">Turbo Mode</span>
 <div class="relative inline-block w-12 mr-2 align-middle select-none">
 <input type="checkbox" id="turbo-mode" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
 <label for="turbo-mode" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
 </div>
 </div>
 </div>
 </div>
<!-- Tabs -->
 <div class="flex border-b border-gray-700 mb-6">
 <button class="tab-button active px-4 py-2 text-sm font-medium">Sensitivity</button>
 <button class="tab-button px-4 py-2 text-sm font-medium">Recoil Control</button>
 <button class="tab-button px-4 py-2 text-sm font-medium">Aim Assist</button>
 <button class="tab-button px-4 py-2 text-sm font-medium">Crosshair</button>
 </div>
<!-- Sensitivity Settings -->
 <div class="mb-8">
 <h3 class="text-lg font-medium mb-4 flex items-center">
 <i class="fas fa-bullseye mr-2 text-red-500"></i> Headshot Sensitivity
 </h3>
<div class="space-y-5">
 <div>
 <div class="flex justify-between mb-2">
 <label class="font-medium">Headshot Priority</label>
 <div class="flex items-center">
 <span id="headshot-priority-value" class="text-red-500 font-bold mr-2">85</span>
 <div class="stats-bar w-20">
 <div class="stats-fill" style="width: 85%"></div>
 </div>
 </div>
 </div>
 <input type="range" min="0" max="100" value="85" class="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider-thumb">
 <div class="text-xs text-gray-500 mt-1">Higher values prioritize headshots over body shots</div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <label class="font-medium">Vertical Recoil Compensation</label>
 <div class="flex items-center">
 <span id="vertical-recoil-value" class="text-red-500 font-bold mr-2">75</span>
 <div class="stats-bar w-20">
 <div class="stats-fill" style="width: 75%"></div>
 </div>
 </div>
 </div>
 <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider-thumb">
 <div class="text-xs text-gray-500 mt-1">Automatically counters vertical weapon recoil</div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <label class="font-medium">Horizontal Stabilization</label>
 <div class="flex items-center">
 <span id="horizontal-stabilization-value" class="text-red-500 font-bold mr-2">65</span>
 <div class="stats-bar w-20">
 <div class="stats-fill" style="width: 65%"></div>
 </div>
 </div>
 </div>
 <input type="range" min="0" max="100" value="65" class="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider-thumb">
 <div class="text-xs text-gray-500 mt-1">Reduces horizontal weapon sway for precision</div>
 </div>
<div>
 <div class="flex justify-between mb-2">
 <label class="font-medium">Headshot Snap</label>
 <div class="flex items-center">
 <span id="headshot-snap-value" class="text-red-500 font-bold mr-2">90</span>
 <div class="stats-bar w-20">
 <div class="stats-fill" style="width: 90%"></div>
 </div>
 </div>
 </div>
 <input type="range" min="0" max="100" value="90" class="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider-thumb">
 <div class="text-xs text-gray-500 mt-1">Speed at which aim snaps to head targets</div>
 </div>
 </div>
 </div>
<!-- Weapon Specific Settings -->
 <div class="mb-8">
 <h3 class="text-lg font-medium mb-4 flex items-center">
 <i class="fas fa-gun mr-2 text-red-500"></i> Weapon-Specific Headshot Tuning
 </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <label class="block mb-2 font-medium">Headshot Damage Multiplier</label>
 <div class="damage-meter mb-2"></div>
 <div class="flex justify-between text-xs">
 <span>1.0x</span>
 <span>1.5x</span>
 <span>2.0x</span>
 <span>2.5x</span>
 <span class="text-red-500 font-bold">3.0x</span>
 </div>
 <div class="text-xs text-gray-500 mt-1">Increases headshot damage for selected weapon</div>
 </div>
<div>
 <label class="block mb-2 font-medium">Headshot Hitbox Size</label>
 <div class="flex items-center space-x-4">
 <div class="crosshair-preview">
 <div class="crosshair-center"></div>
 <div class="crosshair-line horizontal-line" style="left: 35px;"></div>
 <div class="crosshair-line horizontal-line" style="right: 35px;"></div>
 <div class="crosshair-line vertical-line" style="top: 35px;"></div>
 <div class="crosshair-line vertical-line" style="bottom: 35px;"></div>
 </div>
 <div>
 <div class="flex items-center mb-2">
 <input type="range" min="1" max="10" value="3" class="w-24 mr-2">
 <span class="text-sm">3</span>
 </div>
 <div class="text-xs text-gray-500">Adjusts hitbox detection size for headshots</div>
 </div>
 </div>
 </div>
<div>
 <label class="block mb-2 font-medium">Recoil Pattern</label>
 <div class="recoil-pattern">
 <!-- Recoil pattern dots would be generated by JS -->
 </div>
 <div class="text-xs text-gray-500 mt-1">Visualization of weapon recoil pattern</div>
 </div>
<div>
 <label class="block mb-2 font-medium">Fire Rate Optimization</label>
 <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
 <option>Standard</option>
 <option selected>Aggressive</option>
 <option>Burst Mode</option>
 <option>Precision Single</option>
 </select>
 <div class="text-xs text-gray-500 mt-1">Optimizes fire rate for headshot efficiency</div>
 </div>
 </div>
 </div>
<!-- Advanced Tactical Settings -->
 <div>
 <h3 class="text-lg font-medium mb-4 flex items-center">
 <i class="fas fa-tachometer-alt mr-2 text-red-500"></i> Tactical Overrides
 </h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
 <div>
 <label class="block mb-2 font-medium">Headshot Lock Duration</label>
 <input type="range" min="0" max="1000" value="300" class="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider-thumb">
 <div class="flex justify-between text-xs mt-1">
 <span>0ms</span>
 <span class="text-red-500">300ms</span>
 <span>1000ms</span>
 </div>
 </div>
<div>
 <label class="block mb-2 font-medium">Target Acquisition Speed</label>
 <input type="range" min="0" max="100" value="80" class="w-full h-2 bg-gray-800 rounded-lg appearance-none cursor-pointer slider-thumb">
 <div class="flex justify-between text-xs mt-1">
 <span>Slow</span>
 <span class="text-red-500">Fast</span>
 <span>Instant</span>
 </div>
 </div>
<div>
 <label class="block mb-2 font-medium">Headshot Sound Alert</label>
 <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
 <option>Off</option>
 <option selected>Beep</option>
 <option>Headshot Sound</option>
 <option>Vibration</option>
 </select>
 </div>
<div>
 <label class="block mb-2 font-medium">Anti-Shake Technology</label>
 <select class="w-full bg-gray-900 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-red-500">
 <option>Off</option>
 <option>Low</option>
 <option selected>Medium</option>
 <option>High</option>
 </select>
 </div>
 </div>
 </div>
 </div>
<!-- Weapon Selector and Presets -->
 <div class="space-y-6">
 <!-- Weapon Selection -->
 <div class="config-card rounded-xl p-6">
 <h2 class="text-xl font-semibold mb-4 flex items-center">
 <i class="fas fa-gun mr-2 text-red-500"></i> Weapon Selection
 </h2>
<div class="grid grid-cols-3 gap-3">
 <div class="weapon-selector active p-3 border-2 border-red-500 rounded-lg bg-gray-900 text-center cursor-pointer transition-all">
 <i class="fas fa-gun text-2xl mb-2 text-red-500"></i>
 <p class="text-sm">Assault Rifle</p>
 <div class="text-xs text-red-400 mt-1">+35% HS</div>
 </div>
 <div class="weapon-selector p-3 border-2 border-transparent rounded-lg bg-gray-900 text-center cursor-pointer transition-all">
 <i class="fas fa-gun text-2xl mb-2"></i>
 <p class="text-sm">SMG</p>
 <div class="text-xs text-gray-500 mt-1">+25% HS</div>
 </div>
 <div class="weapon-selector p-3 border-2 border-transparent rounded-lg bg-gray-900 text-center cursor-pointer transition-all">
 <i class="fas fa-gun text-2xl mb-2"></i>
 <p class="text-sm">Sniper</p>
 <div class="text-xs text-gray-500 mt-1">+50% HS</div>
 </div>
 <div class="weapon-selector p-3 border-2 border-transparent rounded-lg bg-gray-900 text-center cursor-pointer transition-all">
 <i class="fas fa-gun text-2xl mb-2"></i>
 <p class="text-sm">Shotgun</p>
 <div class="text-xs text-gray-500 mt-1">+15% HS</div>
 </div>
 <div class="weapon-selector p-3 border-2 border-transparent rounded-lg bg-gray-900 text-center cursor-pointer transition-all">
 <i class="fas fa-gun text-2xl mb-2"></i>
 <p class="text-sm">LMG</p>
 <div class="text-xs text-gray-500 mt-1">+20% HS</div>
 </div>
 <div class="weapon-selector p-3 border-2 border-transparent rounded-lg bg-gray-900 text-center cursor-pointer transition-all">
 <i class="fas fa-gun text-2xl mb-2"></i>
 <p class="text-sm">Pistol</p>
 <div class="text-xs text-gray-500 mt-1">+30% HS</div>
 </div>
 </div>
<div class="mt-4">
 <h3 class="text-md font-medium mb-2 flex items-center">
 <i class="fas fa-bullseye mr-2 text-red-500"></i> Current Weapon Stats
 </h3>
 <div class="bg-gray-900 rounded-lg p-3">
 <div class="flex justify-between text-sm mb-1">
 <span>Headshot Accuracy:</span>
 <span class="text-red-500 font-bold">78%</span>
 </div>
 <div class="flex justify-between text-sm mb-1">
 <span>Recoil Control:</span>
 <span class="text-red-500 font-bold">85%</span>
 </div>
 <div class="flex justify-between text-sm mb-1">
 <span>Optimal Range:</span>
 <span class="text-red-500 font-bold">50m</span>
 </div>
 <div class="flex justify-between text-sm">
 <span>Headshot Multiplier:</span>
 <span class="text-red-500 font-bold">2.8x</span>
 </div>
 </div>
 </div>
 </div>
<!-- Presets -->
 <div class="config-card rounded-xl p-6">
 <h2 class="text-xl font-semibold mb-4 flex items-center">
 <i class="fas fa-prescription-bottle-alt mr-2 text-red-500"></i> Headshot Presets
 </h2>
<div class="space-y-3">
 <div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg cursor-pointer hover:bg-gray-800 transition border-l-4 border-red-500">
 <div>
 <h4 class="font-medium">Headshot Dominator</h4>
 <p class="text-xs text-gray-400">Max headshot accuracy</p>
 </div>
 <button class="px-3 py-1 bg-red-600 bg-opacity-30 text-red-400 rounded text-sm hover:bg-opacity-50 transition">
 <i class="fas fa-bolt mr-1"></i> Apply
 </button>
 </div>
<div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg cursor-pointer hover:bg-gray-800 transition">
 <div>
 <h4 class="font-medium">Aggressive Spray</h4>
 <p class="text-xs text-gray-400">Close-range headshots</p>
 </div>
 <button class="px-3 py-1 bg-gray-800 rounded text-sm hover:bg-gray-700 transition">
 Apply
 </button>
 </div>
<div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg cursor-pointer hover:bg-gray-800 transition">
 <div>
 <h4 class="font-medium">Sniper Elite</h4>
 <p class="text-xs text-gray-400">One-shot headshots</p>
 </div>
 <button class="px-3 py-1 bg-gray-800 rounded text-sm hover:bg-gray-700 transition">
 Apply
 </button>
 </div>
<div class="flex items-center justify-between p-3 bg-gray-900 rounded-lg cursor-pointer hover:bg-gray-800 transition">
 <div>
 <h4 class="font-medium">Turbo Headhunter</h4>
 <p class="text-xs text-gray-400">Rapid headshot chain</p>
 </div>
 <button class="px-3 py-1 bg-gray-800 rounded text-sm hover:bg-gray-700 transition">
 Apply
 </button>
 </div>
 </div>
 </div>
<!-- Headshot Stats -->
 <div class="config-card rounded-xl p-6">
 <h2 class="text-xl font-semibold mb-4 flex items-center">
 <i class="fas fa-chart-line mr-2 text-red-500"></i> Headshot Performance
 </h2>
<div class="space-y-4">
 <div>
 <div class="flex justify-between mb-1">
 <span class="text-sm">Headshot Accuracy</span>
 <span class="text-sm font-bold text-red-500">78%</span>
 </div>
 <div class="w-full bg-gray-800 rounded-full h-2.5">
 <div class="bg-red-600 h-2.5 rounded-full" style="width: 78%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-1">
 <span class="text-sm">Headshot Kill Ratio</span>
 <span class="text-sm font-bold text-red-500">65%</span>
 </div>
 <div class="w-full bg-gray-800 rounded-full h-2.5">
 <div class="bg-red-600 h-2.5 rounded-full" style="width: 65%"></div>
 </div>
 </div>
<div>
 <div class="flex justify-between mb-1">
 <span class="text-sm">Avg. Headshots per Match</span>
 <span class="text-sm font-bold text-red-500">8.2</span>
 </div>
 <div class="w-full bg-gray-800 rounded-full h-2.5">
 <div class="bg-red-600 h-2.5 rounded-full" style="width: 82%"></div>
 </div>
 </div>
<div class="pt-2 border-t border-gray-800">
 <div class="flex justify-between">
 <span class="text-sm">Total Headshots:</span>
 <span class="text-sm font-bold text-red-500">1,248</span>
 </div>
 <div class="flex justify-between mt-1">
 <span class="text-sm">Best Headshot Streak:</span>
 <span class="text-sm font-bold text-red-500">14</span>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>
<!-- Quick Actions -->
 <div class="mt-8 flex flex-wrap justify-center gap-4">
 <button class="px-8 py-3 bg-gradient-to-r from-red-600 to-orange-600 hover:from-red-700 hover:to-orange-700 rounded-lg font-bold flex items-center pulse-animation">
 <i class="fas fa-skull mr-2"></i> ACTIVATE HEADSHOT MODE
 </button>
 <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-medium flex items-center">
 <i class="fas fa-sliders-h mr-2"></i> Advanced Settings
 </button>
 <button class="px-6 py-3 bg-gray-800 hover:bg-gray-700 rounded-lg font-medium flex items-center">
 <i class="fas fa-robot mr-2"></i> AI Optimization
 </button>
 </div>
 </div>
<script>
 // Update slider values in real-time with more aggressive styling
 document.querySelectorAll('input[type="range"]').forEach(slider => {
 const valueId = slider.id ? slider.id + '-value' : slider.previousElementSibling.querySelector('span').id;
slider.addEventListener('input', function() {
 if (valueId) {
 document.getElementById(valueId).textContent = this.value;
 // Update the stats bar if it exists
 const statsBar = document.getElementById(valueId).nextElementSibling;
 if (statsBar && statsBar.classList.contains('stats-bar')) {
 statsBar.querySelector('.stats-fill').style.width = this.value + '%';
 }
 }
// Make the thumb glow when moving
 this.style.setProperty('--thumb-shadow', '0 0 8px rgba(255, 69, 0, 0.8)');
 setTimeout(() => {
 this.style.setProperty('--thumb-shadow', '0 0 5px rgba(255, 69, 0, 0.8)');
 }, 200);
 });
 });
 // Weapon selection with headshot stats
 const weaponSelectors = document.querySelectorAll('.weapon-selector');
 weaponSelectors.forEach(selector => {
 selector.addEventListener('click', function() {
 weaponSelectors.forEach(s => {
 s.classList.remove('active', 'border-red-500');
 s.querySelector('i').classList.remove('text-red-500');
 s.querySelector('div.text-xs').classList.remove('text-red-400');
 s.querySelector('div.text-xs').classList.add('text-gray-500');
 });
this.classList.add('active', 'border-red-500');
 this.querySelector('i').classList.add('text-red-500');
 this.querySelector('div.text-xs').classList.remove('text-gray-500');
 this.querySelector('div.text-xs').classList.add('text-red-400');
// Update weapon stats display
 const weaponType = this.querySelector('p').textContent.trim();
 updateWeaponStats(weaponType);
 });
 });
 function updateWeaponStats(weaponType) {
 const stats = {
 "Assault Rifle": {
 accuracy: 78,
 recoil: 85,
 range: 50,
 multiplier: 2.8
 },
 "SMG": {
 accuracy: 65,
 recoil: 70,
 range: 25,
 multiplier: 2.2
 },
 "Sniper": {
 accuracy: 90,
 recoil: 60,
 range: 200,
 multiplier: 3.5
 },
 "Shotgun": {
 accuracy: 50,
 recoil: 40,
 range: 15,
 multiplier: 1.8
 },
 "LMG": {
 accuracy: 60,
 recoil: 75,
 range: 60,
 multiplier: 2.0
 },
 "Pistol": {
 accuracy: 70,
 recoil: 65,
 range: 30,
 multiplier: 2.5
 }
 };
const weaponStats = stats[weaponType];
 if (weaponStats) {
 document.querySelectorAll('.weapon-stats div').forEach((stat, index) => {
 const values = Object.values(weaponStats);
 if (index < values.length) {
 stat.querySelector('span:last-child').textContent = values[index] + (index === 2 ? 'm' : (index === 3 ? 'x' : '%'));
 }
 });
 }
 }
 // Tab switching
 const tabs = document.querySelectorAll('.tab-button');
 tabs.forEach(tab => {
 tab.addEventListener('click', function() {
 tabs.forEach(t => t.classList.remove('active'));
 this.classList.add('active');
 // Here you would switch the content panels
 });
 });
 // Generate recoil pattern visualization
 const recoilPattern = document.querySelector('.recoil-pattern');
 if (recoilPattern) {
 // Simple upward recoil pattern
 for (let i = 0; i < 10; i++) {
 const dot = document.createElement('div');
 dot.className = 'recoil-dot';
 dot.style.left = 50 + (Math.random() * 10 - 5) + 'px';
 dot.style.top = 50 - (i * 8) + 'px';
 recoilPattern.appendChild(dot);
 }
 }
 // Turbo mode toggle effect
 const turboToggle = document.getElementById('turbo-mode');
 turboToggle.addEventListener('change', function() {
 if (this.checked) {
 document.querySelector('.pulse-animation').style.animationDuration = '0.7s';
 document.documentElement.style.setProperty('--pulse-color', 'rgba(255, 0, 0, 0.7)');
 } else {
 document.querySelector('.pulse-animation').style.animationDuration = '1.5s';
 document.documentElement.style.setProperty('--pulse-color', 'rgba(255, 69, 0, 0.7)');
 }
 });
 // Auto headshot toggle effect
 const autoHeadshotToggle = document.getElementById('auto-headshot');
 autoHeadshotToggle.addEventListener('change', function() {
 const headshotIndicator = document.querySelector('.headshot-indicator');
 if (this.checked) {
 headshotIndicator.style.display = 'flex';
 headshotIndicator.nextElementSibling.textContent = 'Headshot Mode Active';
 } else {
 headshotIndicator.style.display = 'none';
 headshotIndicator.nextElementSibling.textContent = 'Headshot Mode Inactive';
 }
 });
 // Initialize weapon stats
 updateWeaponStats("Assault Rifle");
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Pnkj01/newbot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>