Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Headshot Master - Free Fire Headshot Configuration</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> | |
| .weapon-selector.active { | |
| background-color: #3b82f6; | |
| color: white; | |
| } | |
| .range-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| } | |
| .range-slider::-moz-range-thumb { | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #3b82f6; | |
| cursor: pointer; | |
| } | |
| .headshot-indicator { | |
| transition: all 0.3s ease; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Header --> | |
| <header class="mb-10 text-center"> | |
| <h1 class="text-4xl font-bold mb-2 bg-gradient-to-r from-red-500 to-blue-500 bg-clip-text text-transparent">HEADSHOT MASTER</h1> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Ultimate configuration tool for perfect headshots in Free Fire. Adjust settings for each weapon to maximize your headshot accuracy.</p> | |
| </header> | |
| <!-- Main Content --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Weapon Selection --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-gun mr-3 text-blue-400"></i> Weapon Selection | |
| </h2> | |
| <div class="grid grid-cols-2 gap-3 mb-6"> | |
| <button class="weapon-selector active bg-blue-600 text-white py-3 px-4 rounded-lg flex items-center justify-center transition-all" data-weapon="ar"> | |
| <i class="fas fa-rifle mr-2"></i> AR | |
| </button> | |
| <button class="weapon-selector bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg flex items-center justify-center transition-all" data-weapon="smg"> | |
| <i class="fas fa-gun mr-2"></i> SMG | |
| </button> | |
| <button class="weapon-selector bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg flex items-center justify-center transition-all" data-weapon="sniper"> | |
| <i class="fas fa-crosshairs mr-2"></i> Sniper | |
| </button> | |
| <button class="weapon-selector bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg flex items-center justify-center transition-all" data-weapon="shotgun"> | |
| <i class="fas fa-burst mr-2"></i> Shotgun | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-lg font-semibold mb-3 flex items-center"> | |
| <i class="fas fa-bullseye mr-2 text-red-400"></i> Headshot Accuracy | |
| </h3> | |
| <div class="flex items-center justify-center mb-2"> | |
| <div class="headshot-indicator w-40 h-40 bg-gray-700 rounded-full flex items-center justify-center relative border-4 border-red-500"> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 bg-red-500 rounded-full"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-white rounded-full z-10"></div> | |
| <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-2 h-2 bg-black rounded-full z-20"></div> | |
| </div> | |
| </div> | |
| <p class="text-center text-sm text-gray-400">Current headshot rate: <span class="text-green-400 font-bold">87%</span></p> | |
| </div> | |
| </div> | |
| <!-- Configuration Panel --> | |
| <div class="bg-gray-800 rounded-xl p-6 shadow-lg lg:col-span-2"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-sliders-h mr-3 text-purple-400"></i> Headshot Configuration | |
| </h2> | |
| <div class="space-y-6"> | |
| <!-- Sensitivity --> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium flex items-center"> | |
| <i class="fas fa-bullseye mr-2 text-yellow-400"></i> Headshot Sensitivity | |
| </label> | |
| <span class="text-blue-400 font-bold" id="sensitivity-value">75</span> | |
| </div> | |
| <input type="range" min="1" max="100" value="75" class="w-full range-slider" id="sensitivity-slider"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Low</span> | |
| <span>Medium</span> | |
| <span>High</span> | |
| </div> | |
| </div> | |
| <!-- Aim Assist --> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium flex items-center"> | |
| <i class="fas fa-crosshairs mr-2 text-green-400"></i> Headshot Aim Assist | |
| </label> | |
| <span class="text-blue-400 font-bold" id="aim-assist-value">85</span> | |
| </div> | |
| <input type="range" min="1" max="100" value="85" class="w-full range-slider" id="aim-assist-slider"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>Weak</span> | |
| <span>Balanced</span> | |
| <span>Aggressive</span> | |
| </div> | |
| </div> | |
| <!-- Recoil Control --> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium flex items-center"> | |
| <i class="fas fa-arrows-up-down mr-2 text-red-400"></i> Recoil Compensation | |
| </label> | |
| <span class="text-blue-400 font-bold" id="recoil-value">65</span> | |
| </div> | |
| <input type="range" min="1" max="100" value="65" class="w-full range-slider" id="recoil-slider"> | |
| <div class="flex justify-between text-xs text-gray-400 mt-1"> | |
| <span>None</span> | |
| <span>Moderate</span> | |
| <span>Strong</span> | |
| </div> | |
| </div> | |
| <!-- Advanced Options --> | |
| <div class="pt-4 border-t border-gray-700"> | |
| <h3 class="text-lg font-semibold mb-4 flex items-center"> | |
| <i class="fas fa-cog mr-2 text-blue-400"></i> Advanced Headshot Settings | |
| </h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <!-- First Shot Accuracy --> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium flex items-center text-sm"> | |
| <i class="fas fa-bullseye mr-2 text-purple-400"></i> First Shot Accuracy | |
| </label> | |
| <span class="text-blue-400 font-bold text-sm" id="first-shot-value">90</span> | |
| </div> | |
| <input type="range" min="1" max="100" value="90" class="w-full range-slider" id="first-shot-slider"> | |
| </div> | |
| <!-- Head Tracking --> | |
| <div> | |
| <div class="flex justify-between items-center mb-2"> | |
| <label class="font-medium flex items-center text-sm"> | |
| <i class="fas fa-eye mr-2 text-green-400"></i> Head Tracking | |
| </label> | |
| <span class="text-blue-400 font-bold text-sm" id="tracking-value">80</span> | |
| </div> | |
| <input type="range" min="1" max="100" value="80" class="w-full range-slider" id="tracking-slider"> | |
| </div> | |
| <!-- Headshot Priority --> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <input type="checkbox" id="headshot-priority" class="mr-2 h-4 w-4" checked> | |
| <label for="headshot-priority" class="font-medium flex items-center text-sm"> | |
| <i class="fas fa-skull mr-2 text-red-400"></i> Headshot Priority | |
| </label> | |
| </div> | |
| <p class="text-xs text-gray-400">Prioritize headshots over body shots</p> | |
| </div> | |
| <!-- Predictive Aiming --> | |
| <div> | |
| <div class="flex items-center mb-2"> | |
| <input type="checkbox" id="predictive-aim" class="mr-2 h-4 w-4" checked> | |
| <label for="predictive-aim" class="font-medium flex items-center text-sm"> | |
| <i class="fas fa-brain mr-2 text-yellow-400"></i> Predictive Aiming | |
| </label> | |
| </div> | |
| <p class="text-xs text-gray-400">Predict enemy head movement</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="mt-8 flex flex-col sm:flex-row gap-3"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg flex-1 flex items-center justify-center transition-all"> | |
| <i class="fas fa-save mr-2"></i> Save Configuration | |
| </button> | |
| <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg flex-1 flex items-center justify-center transition-all"> | |
| <i class="fas fa-upload mr-2"></i> Load Preset | |
| </button> | |
| <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg flex-1 flex items-center justify-center transition-all"> | |
| <i class="fas fa-play mr-2"></i> Test in Practice | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Stats Section --> | |
| <div class="mt-12 bg-gray-800 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-chart-line mr-3 text-green-400"></i> Headshot Performance | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <!-- Headshot Rate --> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-bullseye mr-2 text-red-400"></i> Headshot Rate | |
| </h3> | |
| <span class="text-green-400 font-bold">87%</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-2.5"> | |
| <div class="bg-red-500 h-2.5 rounded-full" style="width: 87%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-2">+12% from default settings</p> | |
| </div> | |
| <!-- Accuracy Improvement --> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-crosshairs mr-2 text-blue-400"></i> Accuracy Improvement | |
| </h3> | |
| <span class="text-green-400 font-bold">35%</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-2.5"> | |
| <div class="bg-blue-500 h-2.5 rounded-full" style="width: 35%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-2">More precise head targeting</p> | |
| </div> | |
| <!-- Kill Efficiency --> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <h3 class="font-medium flex items-center"> | |
| <i class="fas fa-skull mr-2 text-purple-400"></i> Kill Efficiency | |
| </h3> | |
| <span class="text-green-400 font-bold">2.3s</span> | |
| </div> | |
| <div class="w-full bg-gray-600 rounded-full h-2.5"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 76%"></div> | |
| </div> | |
| <p class="text-xs text-gray-400 mt-2">Average time to headshot kill</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tips Section --> | |
| <div class="mt-12 bg-gradient-to-r from-blue-900 to-purple-900 rounded-xl p-6 shadow-lg"> | |
| <h2 class="text-2xl font-bold mb-6 flex items-center"> | |
| <i class="fas fa-lightbulb mr-3 text-yellow-400"></i> Pro Headshot Tips | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-black bg-opacity-30 p-4 rounded-lg"> | |
| <h3 class="font-bold text-lg mb-2 flex items-center"> | |
| <i class="fas fa-crosshairs mr-2 text-red-400"></i> Aim Placement | |
| </h3> | |
| <p class="text-gray-300">Always aim at neck level when moving. The natural recoil will bring your shots up to the head. This configuration enhances that effect.</p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 p-4 rounded-lg"> | |
| <h3 class="font-bold text-lg mb-2 flex items-center"> | |
| <i class="fas fa-arrows-up-down mr-2 text-blue-400"></i> Recoil Control | |
| </h3> | |
| <p class="text-gray-300">Pull down slightly when firing automatic weapons. Our recoil compensation settings will help, but manual control improves consistency.</p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 p-4 rounded-lg"> | |
| <h3 class="font-bold text-lg mb-2 flex items-center"> | |
| <i class="fas fa-running mr-2 text-green-400"></i> Movement | |
| </h3> | |
| <p class="text-gray-300">Strafe while shooting to make yourself harder to hit while maintaining headshot accuracy. The head tracking setting helps with this.</p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 p-4 rounded-lg"> | |
| <h3 class="font-bold text-lg mb-2 flex items-center"> | |
| <i class="fas fa-brain mr-2 text-yellow-400"></i> Prediction | |
| </h3> | |
| <p class="text-gray-300">Anticipate enemy movement. The predictive aiming setting helps, but developing game sense will make your headshots unstoppable.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Weapon selection | |
| const weaponSelectors = document.querySelectorAll('.weapon-selector'); | |
| weaponSelectors.forEach(selector => { | |
| selector.addEventListener('click', () => { | |
| weaponSelectors.forEach(s => s.classList.remove('active', 'bg-blue-600', 'text-white')); | |
| weaponSelectors.forEach(s => s.classList.add('bg-gray-700', 'hover:bg-gray-600')); | |
| selector.classList.add('active', 'bg-blue-600', 'text-white'); | |
| selector.classList.remove('bg-gray-700', 'hover:bg-gray-600'); | |
| // Update headshot indicator based on weapon | |
| const headshotIndicator = document.querySelector('.headshot-indicator'); | |
| const weapon = selector.dataset.weapon; | |
| if (weapon === 'ar') { | |
| headshotIndicator.style.transform = 'scale(1)'; | |
| headshotIndicator.querySelector('.text-green-400').textContent = '87%'; | |
| } else if (weapon === 'smg') { | |
| headshotIndicator.style.transform = 'scale(0.9)'; | |
| headshotIndicator.querySelector('.text-green-400').textContent = '75%'; | |
| } else if (weapon === 'sniper') { | |
| headshotIndicator.style.transform = 'scale(1.1)'; | |
| headshotIndicator.querySelector('.text-green-400').textContent = '95%'; | |
| } else if (weapon === 'shotgun') { | |
| headshotIndicator.style.transform = 'scale(0.8)'; | |
| headshotIndicator.querySelector('.text-green-400').textContent = '65%'; | |
| } | |
| }); | |
| }); | |
| // Slider functionality | |
| const sliders = [ | |
| { id: 'sensitivity-slider', valueId: 'sensitivity-value' }, | |
| { id: 'aim-assist-slider', valueId: 'aim-assist-value' }, | |
| { id: 'recoil-slider', valueId: 'recoil-value' }, | |
| { id: 'first-shot-slider', valueId: 'first-shot-value' }, | |
| { id: 'tracking-slider', valueId: 'tracking-value' } | |
| ]; | |
| sliders.forEach(slider => { | |
| const sliderElement = document.getElementById(slider.id); | |
| const valueElement = document.getElementById(slider.valueId); | |
| sliderElement.addEventListener('input', () => { | |
| valueElement.textContent = sliderElement.value; | |
| // Update headshot indicator based on settings | |
| const headshotIndicator = document.querySelector('.headshot-indicator'); | |
| const sensitivity = document.getElementById('sensitivity-slider').value; | |
| const aimAssist = document.getElementById('aim-assist-slider').value; | |
| // Calculate a "headshot effectiveness" score | |
| const effectiveness = (parseInt(sensitivity) + parseInt(aimAssist)) / 2; | |
| const scale = 0.8 + (effectiveness / 100) * 0.4; | |
| headshotIndicator.style.transform = `scale(${scale})`; | |
| // Update headshot rate display | |
| const headshotRate = Math.min(95, 70 + (effectiveness / 100) * 30); | |
| document.querySelector('.headshot-indicator + p span').textContent = `${Math.round(headshotRate)}%`; | |
| document.querySelectorAll('.bg-red-500').forEach(el => { | |
| el.style.width = `${Math.round(headshotRate)}%`; | |
| }); | |
| }); | |
| }); | |
| // Checkbox functionality | |
| document.getElementById('headshot-priority').addEventListener('change', function() { | |
| if (this.checked) { | |
| document.querySelector('.headshot-indicator').classList.add('border-red-500'); | |
| document.querySelector('.headshot-indicator').classList.remove('border-gray-500'); | |
| } else { | |
| document.querySelector('.headshot-indicator').classList.remove('border-red-500'); | |
| document.querySelector('.headshot-indicator').classList.add('border-gray-500'); | |
| } | |
| }); | |
| document.getElementById('predictive-aim').addEventListener('change', function() { | |
| const trackingSlider = document.getElementById('tracking-slider'); | |
| if (this.checked) { | |
| trackingSlider.disabled = false; | |
| trackingSlider.parentElement.classList.remove('opacity-50'); | |
| } else { | |
| trackingSlider.disabled = true; | |
| trackingSlider.parentElement.classList.add('opacity-50'); | |
| } | |
| }); | |
| </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=Pankajpegu07/headfffd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |