Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Free Fire Max Auto Headshot Config Generator</title> | |
| <script src="https://cdn.jsdelivr.net/npm/react@18.0.0/umd/react.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/react-dom@18.0.0/umd/react-dom.development.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@babel/standalone/babel.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| } | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .binary-display { | |
| font-family: 'Courier New', monospace; | |
| letter-spacing: 2px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 10px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="root"></div> | |
| <script type="text/babel"> | |
| const { useState, useEffect } = React; | |
| function App() { | |
| const [characterName, setCharacterName] = useState(''); | |
| const [headBoneId, setHeadBoneId] = useState(''); | |
| const [binaryOutput, setBinaryOutput] = useState(''); | |
| const [configFile, setConfigFile] = useState(''); | |
| const [selectedCharacter, setSelectedCharacter] = useState(''); | |
| const [showSuccess, setShowSuccess] = useState(false); | |
| const characterDatabase = { | |
| 'Adam': { headBoneId: '123', bodyBoneId: '456' }, | |
| 'Alok': { headBoneId: '234', bodyBoneId: '567' }, | |
| 'Andrew': { headBoneId: '345', bodyBoneId: '678' }, | |
| 'Antonio': { headBoneId: '456', bodyBoneId: '789' }, | |
| 'Bella': { headBoneId: '567', bodyBoneId: '890' }, | |
| 'Brooklyn': { headBoneId: '678', bodyBoneId: '901' }, | |
| 'Carlo': { headBoneId: '789', bodyBoneId: '012' }, | |
| 'Clu': { headBoneId: '890', bodyBoneId: '123' }, | |
| 'Dasha': { headBoneId: '901', bodyBoneId: '234' }, | |
| 'Dj Alok': { headBoneId: '012', bodyBoneId: '345' }, | |
| 'Elio': { headBoneId: '123', bodyBoneId: '456' }, | |
| 'El Primo': { headBoneId: '234', bodyBoneId: '567' }, | |
| 'Fernando': { headBoneId: '345', bodyBoneId: '678' }, | |
| 'Franko': { headBoneId: '456', bodyBoneId: '789' }, | |
| 'Garena': { headBoneId: '567', bodyBoneId: '890' }, | |
| 'Hayato': { headBoneId: '678', bodyBoneId: '901' }, | |
| 'Jai': { headBoneId: '789', bodyBoneId: '012' }, | |
| 'Jessica': { headBoneId: '890', bodyBoneId: '123' }, | |
| 'K': { headBoneId: '901', bodyBoneId: '234' }, | |
| 'Kelly': { headBoneId: '012', bodyBoneId: '345' }, | |
| 'Kla': { headBoneId: '123', bodyBoneId: '456' }, | |
| 'Lara': { headBoneId: '234', bodyBoneId: '567' }, | |
| 'Lesley': { headBoneId: '345', bodyBoneId: '678' }, | |
| 'Ling': { headBoneId: '456', bodyBoneId: '789' }, | |
| 'Luna': { headBoneId: '567', bodyBoneId: '890' }, | |
| 'Moco': { headBoneId: '678', bodyBoneId: '901' }, | |
| 'Nana': { headBoneId: '789', bodyBoneId: '012' }, | |
| 'Natalie': { headBoneId: '890', bodyBoneId: '123' }, | |
| 'Omar': { headBoneId: '901', bodyBoneId: '234' }, | |
| 'P': { headBoneId: '012', bodyBoneId: '345' }, | |
| 'Paloma': { headBoneId: '123', bodyBoneId: '456' }, | |
| 'Penny': { headBoneId: '234', bodyBoneId: '567' }, | |
| 'Phoveus': { headBoneId: '345', bodyBoneId: '678' }, | |
| 'Rafaela': { headBoneId: '456', bodyBoneId: '789' }, | |
| 'R-T': { headBoneId: '567', bodyBoneId: '890' }, | |
| 'S': { headBoneId: '678', bodyBoneId: '901' }, | |
| 'Saber': { headBoneId: '789', bodyBoneId: '012' }, | |
| 'Sandy': { headBoneId: '890', bodyBoneId: '123' }, | |
| 'Shani': { headBoneId: '901', bodyBoneId: '234' }, | |
| 'Skye': { headBoneId: '012', bodyBoneId: '345' }, | |
| 'Slayer': { headBoneId: '123', bodyBoneId: '456' }, | |
| 'Smile': { headBoneId: '234', bodyBoneId: '567' }, | |
| 'Spectra': { headBoneId: '345', bodyBoneId: '678' }, | |
| 'T': { headBoneId: '456', bodyBoneId: '789' }, | |
| 'Tara': { headBoneId: '567', bodyBoneId: '890' }, | |
| 'Thunde': { headBoneId: '678', bodyBoneId: '901' }, | |
| 'W': { headBoneId: '789', bodyBoneId: '012' }, | |
| 'Wanwan': { headBoneId: '890', bodyBoneId: '123' }, | |
| 'Yin': { headBoneId: '901', bodyBoneId: '234' }, | |
| 'Yve': { headBoneId: '012', bodyBoneId: '345' }, | |
| 'Zilong': { headBoneId: '123', bodyBoneId: '456' } | |
| }; | |
| const convertToBinary = (decimal) => { | |
| if (!decimal) return ''; | |
| const num = parseInt(decimal); | |
| if (isNaN(num)) return ''; | |
| return num.toString(2).padStart(16, '0'); | |
| }; | |
| const generateConfig = () => { | |
| if (!headBoneId) { | |
| alert('Please enter a valid head bone ID'); | |
| return; | |
| } | |
| const binary = convertToBinary(headBoneId); | |
| setBinaryOutput(binary); | |
| const config = `# Free Fire Max Auto Headshot Configuration | |
| # Character: ${characterName || 'Custom'} | |
| # Head Bone ID: ${headBoneId} | |
| # Binary: ${binary} | |
| [AutoAim] | |
| Enabled=1 | |
| BoneTarget=Head | |
| BoneID=${headBoneId} | |
| BinaryTarget=${binary} | |
| Priority=High | |
| Accuracy=95 | |
| ReactionTime=0.1 | |
| SmoothAim=1 | |
| FOV=90 | |
| `; | |
| setConfigFile(config); | |
| setShowSuccess(true); | |
| setTimeout(() => setShowSuccess(false), 3000); | |
| }; | |
| const downloadConfig = () => { | |
| if (!configFile) return; | |
| const blob = new Blob([configFile], { type: 'text/plain' }); | |
| const url = window.URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = `ffmax_headshot_${characterName || 'custom'}_${Date.now()}.cfg`; | |
| document.body.appendChild(a); | |
| a.click(); | |
| document.body.removeChild(a); | |
| window.URL.revokeObjectURL(url); | |
| }; | |
| const selectCharacter = (charName) => { | |
| const charData = characterDatabase[charName]; | |
| if (charData) { | |
| setCharacterName(charName); | |
| setHeadBoneId(charData.headBoneId); | |
| setSelectedCharacter(charName); | |
| } | |
| }; | |
| return ( | |
| <div className="min-h-screen gradient-bg"> | |
| <div className="container mx-auto px-4 py-8"> | |
| {/* Header */} | |
| <div className="text-center mb-8"> | |
| <h1 className="text-4xl font-bold text-white mb-2">Free Fire Max Auto Headshot Config Generator</h1> | |
| <p className="text-white/80">Create optimized headshot configuration files using bone IDs</p> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" className="text-white underline mt-2 inline-block">Built with anycoder</a> | |
| </div> | |
| {/* Main Content */} | |
| <div className="max-w-6xl mx-auto"> | |
| <div className="grid lg:grid-cols-2 gap-8"> | |
| {/* Left Panel - Input */} | |
| <div className="glass-effect rounded-2xl p-6"> | |
| <h2 className="text-2xl font-semibold text-white mb-6">Configuration Settings</h2> | |
| {/* Character Selection */} | |
| <div className="mb-6"> | |
| <label className="block text-white/90 mb-2 font-medium">Select Character</label> | |
| <div className="grid grid-cols-3 gap-2"> | |
| {Object.keys(characterDatabase).map(char => ( | |
| <button | |
| key={char} | |
| onClick={() => selectCharacter(char)} | |
| className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${ | |
| selectedCharacter === char | |
| ? 'bg-white/20 text-white' | |
| : 'bg-white/10 text-white/70 hover:bg-white/15' | |
| }`} | |
| > | |
| {char} | |
| </button> | |
| ))} | |
| </div> | |
| </div> | |
| {/* Custom Character Input */} | |
| <div className="mb-6"> | |
| <label className="block text-white/90 mb-2 font-medium">Custom Character Name</label> | |
| <input | |
| type="text" | |
| value={characterName} | |
| onChange={(e) => setCharacterName(e.target.value)} | |
| placeholder="Enter character name" | |
| className="w-full px-4 py-2 rounded-lg bg-white/10 text-white placeholder-white/50 border border-white/20 focus:outline-none focus:border-white/40" | |
| /> | |
| </div> | |
| {/* Head Bone ID */} | |
| <div className="mb-6"> | |
| <label className="block text-white/90 mb-2 font-medium">Head Bone ID (Decimal)</label> | |
| <input | |
| type="text" | |
| value={headBoneId} | |
| onChange={(e) => setHeadBoneId(e.target.value)} | |
| placeholder="Enter head bone ID (e.g., 123)" | |
| className="w-full px-4 py-2 rounded-lg bg-white/10 text-white placeholder-white/50 border border-white/20 focus:outline-none focus:border-white/40" | |
| /> | |
| <p className="text-white/60 text-sm mt-1">Enter the decimal value of the head bone ID</p> | |
| </div> | |
| {/* Generate Button */} | |
| <button | |
| onClick={generateConfig} | |
| className="w-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-semibold py-3 rounded-lg hover:from-purple-600 hover:to-pink-600 transition-all transform hover:scale-105" | |
| > | |
| Generate Configuration | |
| </button> | |
| {/* Success Message */} | |
| {showSuccess && ( | |
| <div className="mt-4 p-3 bg-green-500/20 border border-green-500/50 rounded-lg"> | |
| <p className="text-green-300 text-center">✓ Configuration generated successfully!</p> | |
| </div> | |
| )} | |
| </div> | |
| {/* Right Panel - Output */} | |
| <div className="glass-effect rounded-2xl p-6"> | |
| <h2 className="text-2xl font-semibold text-white mb-6">Generated Output</h2> | |
| {/* Binary Display */} | |
| <div className="mb-6"> | |
| <h3 className="text-white/90 font-medium mb-2">Binary Representation</h3> | |
| <div className="bg-black/30 rounded-lg p-4"> | |
| <pre className="binary-display text-green-400 text-lg"> | |
| {binaryOutput || 'Binary will appear here...'} | |
| </pre> | |
| </div> | |
| </div> | |
| {/* Configuration File */} | |
| <div className="mb-6"> | |
| <div className="flex justify-between items-center mb-2"> | |
| <h3 className="text-white/90 font-medium">Configuration File</h3> | |
| <button | |
| onClick={downloadConfig} | |
| className="px-4 py-1 bg-blue-500/20 text-blue-300 rounded-lg hover:bg-blue-500/30 transition-all text-sm" | |
| > | |
| Download | |
| </button> | |
| </div> | |
| <div className="bg-black/30 rounded-lg p-4 h-64 overflow-y-auto custom-scrollbar"> | |
| <pre className="text-white/80 text-sm"> | |
| {configFile || '// Configuration will appear here...'} | |
| </pre> | |
| </div> | |
| </div> | |
| {/* Info Panel */} | |
| <div className="bg-white/10 rounded-lg p-4"> | |
| <h3 className="text-white/90 font-medium mb-2">How It Works</h3> | |
| <ul className="text-white/70 text-sm space-y-1"> | |
| <li>• Enter the character's head bone ID in decimal format</li> | |
| <li>• The tool converts it to 16-bit binary representation</li> | |
| <li>• Generates a configuration file for auto-aim targeting</li> | |
| <li>• Download the .cfg file for your game mod</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| {/* Footer */} | |
| <div className="mt-8 text-center text-white/60 text-sm"> | |
| <p>For educational purposes only. Use responsibly and in accordance with game terms of service.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| ReactDOM.render(<App />, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |