File size: 12,718 Bytes
450f64a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FF Headshot Booster 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>
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #1a202c;
}
::-webkit-scrollbar-thumb {
background: #4a5568;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #718096;
}
/* Custom range slider */
input[type="range"] {
-webkit-appearance: none;
height: 8px;
background: #4a5568;
border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #4299e1;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body class="bg-gray-900 text-gray-200 min-h-screen flex flex-col">
<div class="container mx-auto px-4 py-8 flex-grow">
<!-- Header -->
<header class="text-center mb-8">
<h1 class="text-3xl font-bold text-blue-400 mb-2">FF Headshot Booster Pro</h1>
<p class="text-gray-400">Optimize your Free Fire headshot performance</p>
</header>
<!-- Main Content -->
<div class="max-w-md mx-auto bg-gray-800 rounded-xl shadow-lg overflow-hidden p-6 space-y-6">
<!-- Headshot Mode -->
<div class="space-y-2">
<h2 class="text-xl font-semibold text-purple-400 flex items-center">
<i class="fas fa-crosshairs mr-2"></i> Headshot Mode
</h2>
<div class="flex space-x-2">
<button id="mode-normal" class="mode-btn bg-blue-600 hover:bg-blue-500 flex-grow py-2 rounded-lg transition">Normal</button>
<button id="mode-max" class="mode-btn bg-blue-600 hover:bg-blue-500 flex-grow py-2 rounded-lg transition">Max</button>
<button id="mode-pro" class="mode-btn bg-blue-600 hover:bg-blue-500 flex-grow py-2 rounded-lg transition">Pro</button>
</div>
</div>
<!-- Sensitivity Slider -->
<div class="space-y-2">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold text-green-400 flex items-center">
<i class="fas fa-sliders-h mr-2"></i> Sensitivity
</h2>
<span id="sensitivity-value" class="text-xl font-bold">50</span>
</div>
<input type="range" id="sensitivity" min="0" max="100" value="50" class="w-full">
</div>
<!-- Toggle Features -->
<div class="space-y-4">
<h2 class="text-xl font-semibold text-yellow-400 flex items-center">
<i class="fas fa-cog mr-2"></i> Features
</h2>
<div class="flex items-center justify-between">
<span class="text-lg">Aim Assist</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="aim-assist" class="sr-only peer" checked>
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
</label>
</div>
<div class="flex items-center justify-between">
<span class="text-lg">Gyroscope</span>
<label class="relative inline-flex items-center cursor-pointer">
<input type="checkbox" id="gyroscope" class="sr-only peer">
<div class="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-500"></div>
</label>
</div>
</div>
<!-- DPI Preset -->
<div class="space-y-2">
<h2 class="text-xl font-semibold text-red-400 flex items-center">
<i class="fas fa-mouse-pointer mr-2"></i> DPI Preset
</h2>
<div class="flex space-x-2">
<button id="dpi-low" class="dpi-btn bg-red-600 hover:bg-red-500 flex-grow py-2 rounded-lg transition">Low (320)</button>
<button id="dpi-default" class="dpi-btn bg-red-600 hover:bg-red-500 flex-grow py-2 rounded-lg transition active">Default (480)</button>
<button id="dpi-high" class="dpi-btn bg-red-600 hover:bg-red-500 flex-grow py-2 rounded-lg transition">High (640)</button>
</div>
</div>
<!-- HUD Layout -->
<div class="space-y-2">
<h2 class="text-xl font-semibold text-pink-400 flex items-center">
<i class="fas fa-th-large mr-2"></i> HUD Layout
</h2>
<div class="flex space-x-2">
<button id="hud-default" class="hud-btn bg-pink-600 hover:bg-pink-500 flex-grow py-2 rounded-lg transition active">Default</button>
<button id="hud-3finger" class="hud-btn bg-pink-600 hover:bg-pink-500 flex-grow py-2 rounded-lg transition">3 Finger</button>
<button id="hud-4finger" class="hud-btn bg-pink-600 hover:bg-pink-500 flex-grow py-2 rounded-lg transition">4 Finger</button>
</div>
</div>
<!-- Apply Button -->
<button id="apply-btn" class="w-full bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-500 hover:to-blue-500 text-white font-bold py-3 px-4 rounded-lg shadow-lg transition transform hover:scale-105">
<i class="fas fa-check-circle mr-2"></i> Apply Config
</button>
<!-- Config Output -->
<div class="space-y-2">
<h2 class="text-xl font-semibold text-teal-400 flex items-center">
<i class="fas fa-code mr-2"></i> Config Output
</h2>
<textarea id="config-output" class="w-full h-32 bg-gray-700 text-gray-200 p-3 rounded-lg resize-none" readonly></textarea>
<button id="copy-btn" class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg transition">
<i class="fas fa-copy mr-2"></i> Copy Config
</button>
</div>
</div>
</div>
<!-- Footer -->
<footer class="text-center py-4 text-gray-500 text-sm">
<p>FF Headshot Booster Pro v1.0</p>
</footer>
<!-- Toast Notification -->
<div id="toast" class="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-green-600 text-white px-6 py-3 rounded-lg shadow-lg hidden transition-opacity duration-300">
<i class="fas fa-check-circle mr-2"></i> Configuration applied successfully!
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Current configuration
const config = {
mode: 'normal',
sensitivity: 50,
aimAssist: true,
gyroscope: false,
dpi: 480,
hud: 'default'
};
// Mode selection
const modeButtons = document.querySelectorAll('.mode-btn');
modeButtons.forEach(btn => {
btn.addEventListener('click', function() {
modeButtons.forEach(b => b.classList.remove('bg-blue-700', 'ring-2', 'ring-blue-400'));
this.classList.add('bg-blue-700', 'ring-2', 'ring-blue-400');
config.mode = this.id.split('-')[1];
});
});
document.getElementById('mode-normal').click();
// Sensitivity slider
const sensitivitySlider = document.getElementById('sensitivity');
const sensitivityValue = document.getElementById('sensitivity-value');
sensitivitySlider.addEventListener('input', function() {
sensitivityValue.textContent = this.value;
config.sensitivity = parseInt(this.value);
});
// Toggle features
document.getElementById('aim-assist').addEventListener('change', function() {
config.aimAssist = this.checked;
});
document.getElementById('gyroscope').addEventListener('change', function() {
config.gyroscope = this.checked;
});
// DPI selection
const dpiButtons = document.querySelectorAll('.dpi-btn');
dpiButtons.forEach(btn => {
btn.addEventListener('click', function() {
dpiButtons.forEach(b => b.classList.remove('bg-red-700', 'ring-2', 'ring-red-400'));
this.classList.add('bg-red-700', 'ring-2', 'ring-red-400');
const dpi = this.id.split('-')[1];
config.dpi = dpi === 'low' ? 320 : dpi === 'default' ? 480 : 640;
});
});
document.getElementById('dpi-default').click();
// HUD selection
const hudButtons = document.querySelectorAll('.hud-btn');
hudButtons.forEach(btn => {
btn.addEventListener('click', function() {
hudButtons.forEach(b => b.classList.remove('bg-pink-700', 'ring-2', 'ring-pink-400'));
this.classList.add('bg-pink-700', 'ring-2', 'ring-pink-400');
config.hud = this.id.split('-')[1];
});
});
document.getElementById('hud-default').click();
// Apply config
document.getElementById('apply-btn').addEventListener('click', function() {
const configOutput = document.getElementById('config-output');
configOutput.value = JSON.stringify(config, null, 2);
// Show toast notification
const toast = document.getElementById('toast');
toast.classList.remove('hidden');
toast.classList.add('opacity-100');
setTimeout(() => {
toast.classList.remove('opacity-100');
setTimeout(() => toast.classList.add('hidden'), 300);
}, 3000);
});
// Copy config
document.getElementById('copy-btn').addEventListener('click', function() {
const configOutput = document.getElementById('config-output');
if (configOutput.value) {
configOutput.select();
document.execCommand('copy');
// Change button text temporarily
const originalText = this.innerHTML;
this.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!';
setTimeout(() => {
this.innerHTML = originalText;
}, 2000);
}
});
});
</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/sd" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |