Skip to content

Đùng vào Free Fire #2471

Description

@Tunk009

Error code

00.03.010

Were you logged in?

Yes

Your username (if logged in)

IAM

Your HTML

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>AIM Free Fire iOS - Custom Crosshair Overlay</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: transparent;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            position: fixed;
            touch-action: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Overlay container - trong suốt để hiển thị game phía sau */
        .overlay-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }

        /* Crosshair chính */
        .crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            pointer-events: none;
        }

        /* Vòng tròn ngoài */
        .circle-outer {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid #00ff00;
            border-radius: 50%;
            box-shadow: 
                0 0 20px rgba(0, 255, 0, 0.8),
                0 0 40px rgba(0, 255, 0, 0.4),
                inset 0 0 20px rgba(0, 255, 0, 0.3);
            animation: pulse-outer 2s ease-in-out infinite;
        }

        /* Vòng tròn trong */
        .circle-inner {
            position: absolute;
            width: 30%;
            height: 30%;
            top: 35%;
            left: 35%;
            border: 2px solid #ff0000;
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
            animation: pulse-inner 1.5s ease-in-out infinite;
        }

        /* Điểm chấm trung tâm */
        .center-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ff0000;
            border-radius: 50%;
            box-shadow: 0 0 10px #ff0000;
        }

        /* 4 đường kẻ */
        .line-top, .line-bottom, .line-left, .line-right {
            position: absolute;
            background: #00ff00;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
        }

        .line-top {
            top: -25px;
            left: 50%;
            width: 2px;
            height: 25px;
            transform: translateX(-50%);
        }

        .line-bottom {
            bottom: -25px;
            left: 50%;
            width: 2px;
            height: 25px;
            transform: translateX(-50%);
        }

        .line-left {
            left: -25px;
            top: 50%;
            height: 2px;
            width: 25px;
            transform: translateY(-50%);
        }

        .line-right {
            right: -25px;
            top: 50%;
            height: 2px;
            width: 25px;
            transform: translateY(-50%);
        }

        /* Hiệu ứng animations */
        @keyframes pulse-outer {
            0%, 100% {
                transform: scale(1);
                border-color: #00ff00;
            }
            50% {
                transform: scale(1.05);
                border-color: #00ffaa;
            }
        }

        @keyframes pulse-inner {
            0%, 100% {
                transform: scale(1);
                border-color: #ff0000;
            }
            50% {
                transform: scale(1.15);
                border-color: #ff4444;
            }
        }

        /* Settings panel */
        .settings-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            padding: 15px;
            pointer-events: auto;
            z-index: 10000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .settings-title {
            color: #00ff00;
            font-size: 14px;
            margin-bottom: 10px;
            text-align: center;
            font-weight: bold;
        }

        .color-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }

        .color-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .color-btn:active {
            transform: scale(0.9);
        }

        .color-green { background: #00ff00; }
        .color-red { background: #ff0000; }
        .color-blue { background: #00ffff; }
        .color-yellow { background: #ffff00; }
        .color-white { background: #ffffff; }
        .color-purple { background: #ff00ff; }

        .size-buttons {
            display: flex;
            gap: 5px;
            justify-content: center;
        }

        .size-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }

        .size-btn:active {
            background: rgba(255, 255, 255, 0.4);
        }

        /* Toggle button */
        .toggle-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 25px;
            padding: 10px 20px;
            pointer-events: auto;
            z-index: 10000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #00ff00;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Overlay container -->
    <div class="overlay-container" id="overlayContainer">
        <div class="crosshair" id="crosshair">
            <div class="circle-outer" id="circleOuter"></div>
            <div class="circle-inner" id="circleInner"></div>
            <div class="center-dot" id="centerDot"></div>
            <div class="line-top" id="lineTop"></div>
            <div class="line-bottom" id="lineBottom"></div>
            <div class="line-left" id="lineLeft"></div>
            <div class="line-right" id="lineRight"></div>
        </div>
    </div>

    <!-- Toggle Button -->
    <button class="toggle-btn" id="toggleBtn" onclick="toggleOverlay()">
        🎯 Toggle AIM
    </button>

    <!-- Settings Panel -->
    <div class="settings-panel" id="settingsPanel">
        <div class="settings-title">⚙️ Cài đặt AIM</div>
        
        <div class="color-buttons">
            <div class="color-btn color-green" onclick="changeColor('#00ff00')"></div>
            <div class="color-btn color-red" onclick="changeColor('#ff0000')"></div>
            <div class="color-btn color-blue" onclick="changeColor('#00ffff')"></div>
            <div class="color-btn color-yellow" onclick="changeColor('#ffff00')"></div>
            <div class="color-btn color-white" onclick="changeColor('#ffffff')"></div>
            <div class="color-btn color-purple" onclick="changeColor('#ff00ff')"></div>
        </div>

        <div class="size-buttons">
            <button class="size-btn" onclick="changeSize('small')">Nhỏ</button>
            <button class="size-btn" onclick="changeSize('medium')">Vừa</button>
            <button class="size-btn" onclick="changeSize('large')">Lớn</button>
        </div>
    </div>

    <script>
        let isOverlayVisible = true;
        let currentColor = '#00ff00';
        let currentScale = 1;

        // Toggle overlay visibility
        function toggleOverlay() {
            const overlay = document.getElementById('overlayContainer');
            const btn = document.getElementById('toggleBtn');
            
            if (isOverlayVisible) {
                overlay.style.display = 'none';
                btn.textContent = '🎯 Show AIM';
                btn.style.color = '#ff0000';
            } else {
                overlay.style.display = 'block';
                btn.textContent = '🎯 Toggle AIM';
                btn.style.color = '#00ff00';
            }
            
            isOverlayVisible = !isOverlayVisible;
        }

        // Change color
        function changeColor(color) {
            currentColor = color;
            
            const outerCircle = document.getElementById('circleOuter');
            const innerCircle = document.getElementById('circleInner');
            const centerDot = document.getElementById('centerDot');
            const lines = document.querySelectorAll('[id^="line"]');
            
            // Update outer circle
            outerCircle.style.borderColor = color;
            outerCircle.style.boxShadow = `
                0 0 20px ${color}80,
                0 0 40px ${color}40,
                inset 0 0 20px ${color}30
            `;
            
            // Update inner circle
            innerCircle.style.borderColor = color;
            innerCircle.style.boxShadow = `0 0 15px ${color}60`;
            
            // Update center dot
            centerDot.style.backgroundColor = color;
            centerDot.style.boxShadow = `0 0 10px ${color}`;
            
            // Update lines
            lines.forEach(line => {
                line.style.backgroundColor = color;
                line.style.boxShadow = `0 0 10px ${color}80`;
            });
        }

        // Change size
        function changeSize(size) {
            const crosshair = document.getElementById('crosshair');
            
            switch(size) {
                case 'small':
                    currentScale = 0.7;
                    crosshair.style.transform = `translate(-50%, -50%) scale(0.7)`;
                    break;
                case 'medium':
                    currentScale = 1;
                    crosshair.style.transform = `translate(-50%, -50%) scale(1)`;
                    break;
                case 'large':
                    currentScale = 1.3;
                    crosshair.style.transform = `translate(-50%, -50%) scale(1.3)`;
                    break;
            }
        }

        // Touch handling for iOS
        let touchStartX = 0;
        let touchStartY = 0;
        let crosshairX = window.innerWidth / 2;
        let crosshairY = window.innerHeight / 2;
        let isDragging = false;

        document.addEventListener('touchstart', (e) => {
            if (e.target.closest('.settings-panel') || e.target.closest('.toggle-btn')) {
                return;
            }
            
            isDragging = true;
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
            
            // Store initial crosshair position
            const crosshair = document.getElementById('crosshair');
            const rect = crosshair.getBoundingClientRect();
            crosshairX = rect.left + rect.width / 2;
            crosshairY = rect.top + rect.height / 2;
        });

        document.addEventListener('touchmove', (e) => {
            if (!isDragging) return;
            e.preventDefault();
            
            const touchX = e.touches[0].clientX;
            const touchY = e.touches[0].clientY;
            
            const deltaX = touchX - touchStartX;
            const deltaY = touchY - touchStartY;
            
            const newX = crosshairX + deltaX;
            const newY = crosshairY + deltaY;
            
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${newX}px`;
            crosshair.style.top = `${newY}px`;
            crosshair.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
        });

        document.addEventListener('touchend', () => {
            isDragging = false;
        });

        // Mouse handling for testing in browser
        document.addEventListener('mousedown', (e) => {
            if (e.target.closest('.settings-panel') || e.target.closest('.toggle-btn')) {
                return;
            }
            
            isDragging = true;
            touchStartX = e.clientX;
            touchStartY = e.clientY;
            
            const crosshair = document.getElementById('crosshair');
            const rect = crosshair.getBoundingClientRect();
            crosshairX = rect.left + rect.width / 2;
            crosshairY = rect.top + rect.height / 2;
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            
            const deltaX = e.clientX - touchStartX;
            const deltaY = e.clientY - touchStartY;
            
            const newX = crosshairX + deltaX;
            const newY = crosshairY + deltaY;
            
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${newX}px`;
            crosshair.style.top = `${newY}px`;
            crosshair.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        // Initialize
        window.addEventListener('load', () => {
            // Set initial position to center
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${window.innerWidth / 2}px`;
            crosshair.style.top = `${window.innerHeight / 2}px`;
        });

        // Handle orientation change
        window.addEventListener('orientationchange', () => {
            setTimeout(() => {
                const crosshair = document.getElementById('crosshair');
                crosshair.style.left = `${window.innerWidth / 2}px`;
                crosshair.style.top = `${window.innerHeight / 2}px`;
            }, 300);
        });

        // Prevent default touch behaviors
        document.addEventListener('touchmove', (e) => {
            if (isDragging) {
                e.preventDefault();
            }
        }, { passive: false });

        console.log('✅ AIM Free Fire iOS Overlay đã sẵn sàng!');
        console.log('📱 Hướng dẫn sử dụng:');
        console.log('1. Mở file trong Safari trên iOS');
        console.log('2. Bấm nút Share > Add to Home Screen');
        console.log('3. Mở app từ Home Screen');
        console.log('4. Bật Guided Access để khóa màn hình');
        console.log('5. Mở Free Fire và điều chỉnh AIM');
    </script>
</body>
</html>

Your JavaScript

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>AIM Free Fire iOS - Custom Crosshair Overlay</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: transparent;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            position: fixed;
            touch-action: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Overlay container - trong suốt để hiển thị game phía sau */
        .overlay-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }

        /* Crosshair chính */
        .crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            pointer-events: none;
        }

        /* Vòng tròn ngoài */
        .circle-outer {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid #00ff00;
            border-radius: 50%;
            box-shadow: 
                0 0 20px rgba(0, 255, 0, 0.8),
                0 0 40px rgba(0, 255, 0, 0.4),
                inset 0 0 20px rgba(0, 255, 0, 0.3);
            animation: pulse-outer 2s ease-in-out infinite;
        }

        /* Vòng tròn trong */
        .circle-inner {
            position: absolute;
            width: 30%;
            height: 30%;
            top: 35%;
            left: 35%;
            border: 2px solid #ff0000;
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
            animation: pulse-inner 1.5s ease-in-out infinite;
        }

        /* Điểm chấm trung tâm */
        .center-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ff0000;
            border-radius: 50%;
            box-shadow: 0 0 10px #ff0000;
        }

        /* 4 đường kẻ */
        .line-top, .line-bottom, .line-left, .line-right {
            position: absolute;
            background: #00ff00;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
        }

        .line-top {
            top: -25px;
            left: 50%;
            width: 2px;
            height: 25px;
            transform: translateX(-50%);
        }

        .line-bottom {
            bottom: -25px;
            left: 50%;
            width: 2px;
            height: 25px;
            transform: translateX(-50%);
        }

        .line-left {
            left: -25px;
            top: 50%;
            height: 2px;
            width: 25px;
            transform: translateY(-50%);
        }

        .line-right {
            right: -25px;
            top: 50%;
            height: 2px;
            width: 25px;
            transform: translateY(-50%);
        }

        /* Hiệu ứng animations */
        @keyframes pulse-outer {
            0%, 100% {
                transform: scale(1);
                border-color: #00ff00;
            }
            50% {
                transform: scale(1.05);
                border-color: #00ffaa;
            }
        }

        @keyframes pulse-inner {
            0%, 100% {
                transform: scale(1);
                border-color: #ff0000;
            }
            50% {
                transform: scale(1.15);
                border-color: #ff4444;
            }
        }

        /* Settings panel */
        .settings-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            padding: 15px;
            pointer-events: auto;
            z-index: 10000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .settings-title {
            color: #00ff00;
            font-size: 14px;
            margin-bottom: 10px;
            text-align: center;
            font-weight: bold;
        }

        .color-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }

        .color-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .color-btn:active {
            transform: scale(0.9);
        }

        .color-green { background: #00ff00; }
        .color-red { background: #ff0000; }
        .color-blue { background: #00ffff; }
        .color-yellow { background: #ffff00; }
        .color-white { background: #ffffff; }
        .color-purple { background: #ff00ff; }

        .size-buttons {
            display: flex;
            gap: 5px;
            justify-content: center;
        }

        .size-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }

        .size-btn:active {
            background: rgba(255, 255, 255, 0.4);
        }

        /* Toggle button */
        .toggle-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 25px;
            padding: 10px 20px;
            pointer-events: auto;
            z-index: 10000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #00ff00;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Overlay container -->
    <div class="overlay-container" id="overlayContainer">
        <div class="crosshair" id="crosshair">
            <div class="circle-outer" id="circleOuter"></div>
            <div class="circle-inner" id="circleInner"></div>
            <div class="center-dot" id="centerDot"></div>
            <div class="line-top" id="lineTop"></div>
            <div class="line-bottom" id="lineBottom"></div>
            <div class="line-left" id="lineLeft"></div>
            <div class="line-right" id="lineRight"></div>
        </div>
    </div>

    <!-- Toggle Button -->
    <button class="toggle-btn" id="toggleBtn" onclick="toggleOverlay()">
        🎯 Toggle AIM
    </button>

    <!-- Settings Panel -->
    <div class="settings-panel" id="settingsPanel">
        <div class="settings-title">⚙️ Cài đặt AIM</div>
        
        <div class="color-buttons">
            <div class="color-btn color-green" onclick="changeColor('#00ff00')"></div>
            <div class="color-btn color-red" onclick="changeColor('#ff0000')"></div>
            <div class="color-btn color-blue" onclick="changeColor('#00ffff')"></div>
            <div class="color-btn color-yellow" onclick="changeColor('#ffff00')"></div>
            <div class="color-btn color-white" onclick="changeColor('#ffffff')"></div>
            <div class="color-btn color-purple" onclick="changeColor('#ff00ff')"></div>
        </div>

        <div class="size-buttons">
            <button class="size-btn" onclick="changeSize('small')">Nhỏ</button>
            <button class="size-btn" onclick="changeSize('medium')">Vừa</button>
            <button class="size-btn" onclick="changeSize('large')">Lớn</button>
        </div>
    </div>

    <script>
        let isOverlayVisible = true;
        let currentColor = '#00ff00';
        let currentScale = 1;

        // Toggle overlay visibility
        function toggleOverlay() {
            const overlay = document.getElementById('overlayContainer');
            const btn = document.getElementById('toggleBtn');
            
            if (isOverlayVisible) {
                overlay.style.display = 'none';
                btn.textContent = '🎯 Show AIM';
                btn.style.color = '#ff0000';
            } else {
                overlay.style.display = 'block';
                btn.textContent = '🎯 Toggle AIM';
                btn.style.color = '#00ff00';
            }
            
            isOverlayVisible = !isOverlayVisible;
        }

        // Change color
        function changeColor(color) {
            currentColor = color;
            
            const outerCircle = document.getElementById('circleOuter');
            const innerCircle = document.getElementById('circleInner');
            const centerDot = document.getElementById('centerDot');
            const lines = document.querySelectorAll('[id^="line"]');
            
            // Update outer circle
            outerCircle.style.borderColor = color;
            outerCircle.style.boxShadow = `
                0 0 20px ${color}80,
                0 0 40px ${color}40,
                inset 0 0 20px ${color}30
            `;
            
            // Update inner circle
            innerCircle.style.borderColor = color;
            innerCircle.style.boxShadow = `0 0 15px ${color}60`;
            
            // Update center dot
            centerDot.style.backgroundColor = color;
            centerDot.style.boxShadow = `0 0 10px ${color}`;
            
            // Update lines
            lines.forEach(line => {
                line.style.backgroundColor = color;
                line.style.boxShadow = `0 0 10px ${color}80`;
            });
        }

        // Change size
        function changeSize(size) {
            const crosshair = document.getElementById('crosshair');
            
            switch(size) {
                case 'small':
                    currentScale = 0.7;
                    crosshair.style.transform = `translate(-50%, -50%) scale(0.7)`;
                    break;
                case 'medium':
                    currentScale = 1;
                    crosshair.style.transform = `translate(-50%, -50%) scale(1)`;
                    break;
                case 'large':
                    currentScale = 1.3;
                    crosshair.style.transform = `translate(-50%, -50%) scale(1.3)`;
                    break;
            }
        }

        // Touch handling for iOS
        let touchStartX = 0;
        let touchStartY = 0;
        let crosshairX = window.innerWidth / 2;
        let crosshairY = window.innerHeight / 2;
        let isDragging = false;

        document.addEventListener('touchstart', (e) => {
            if (e.target.closest('.settings-panel') || e.target.closest('.toggle-btn')) {
                return;
            }
            
            isDragging = true;
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
            
            // Store initial crosshair position
            const crosshair = document.getElementById('crosshair');
            const rect = crosshair.getBoundingClientRect();
            crosshairX = rect.left + rect.width / 2;
            crosshairY = rect.top + rect.height / 2;
        });

        document.addEventListener('touchmove', (e) => {
            if (!isDragging) return;
            e.preventDefault();
            
            const touchX = e.touches[0].clientX;
            const touchY = e.touches[0].clientY;
            
            const deltaX = touchX - touchStartX;
            const deltaY = touchY - touchStartY;
            
            const newX = crosshairX + deltaX;
            const newY = crosshairY + deltaY;
            
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${newX}px`;
            crosshair.style.top = `${newY}px`;
            crosshair.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
        });

        document.addEventListener('touchend', () => {
            isDragging = false;
        });

        // Mouse handling for testing in browser
        document.addEventListener('mousedown', (e) => {
            if (e.target.closest('.settings-panel') || e.target.closest('.toggle-btn')) {
                return;
            }
            
            isDragging = true;
            touchStartX = e.clientX;
            touchStartY = e.clientY;
            
            const crosshair = document.getElementById('crosshair');
            const rect = crosshair.getBoundingClientRect();
            crosshairX = rect.left + rect.width / 2;
            crosshairY = rect.top + rect.height / 2;
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            
            const deltaX = e.clientX - touchStartX;
            const deltaY = e.clientY - touchStartY;
            
            const newX = crosshairX + deltaX;
            const newY = crosshairY + deltaY;
            
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${newX}px`;
            crosshair.style.top = `${newY}px`;
            crosshair.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        // Initialize
        window.addEventListener('load', () => {
            // Set initial position to center
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${window.innerWidth / 2}px`;
            crosshair.style.top = `${window.innerHeight / 2}px`;
        });

        // Handle orientation change
        window.addEventListener('orientationchange', () => {
            setTimeout(() => {
                const crosshair = document.getElementById('crosshair');
                crosshair.style.left = `${window.innerWidth / 2}px`;
                crosshair.style.top = `${window.innerHeight / 2}px`;
            }, 300);
        });

        // Prevent default touch behaviors
        document.addEventListener('touchmove', (e) => {
            if (isDragging) {
                e.preventDefault();
            }
        }, { passive: false });

        console.log('✅ AIM Free Fire iOS Overlay đã sẵn sàng!');
        console.log('📱 Hướng dẫn sử dụng:');
        console.log('1. Mở file trong Safari trên iOS');
        console.log('2. Bấm nút Share > Add to Home Screen');
        console.log('3. Mở app từ Home Screen');
        console.log('4. Bật Guided Access để khóa màn hình');
        console.log('5. Mở Free Fire và điều chỉnh AIM');
    </script>
</body>
</html>

Your CSS

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>AIM Free Fire iOS - Custom Crosshair Overlay</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background: transparent;
            overflow: hidden;
            height: 100vh;
            width: 100vw;
            position: fixed;
            touch-action: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* Overlay container - trong suốt để hiển thị game phía sau */
        .overlay-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 9999;
        }

        /* Crosshair chính */
        .crosshair {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            pointer-events: none;
        }

        /* Vòng tròn ngoài */
        .circle-outer {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 3px solid #00ff00;
            border-radius: 50%;
            box-shadow: 
                0 0 20px rgba(0, 255, 0, 0.8),
                0 0 40px rgba(0, 255, 0, 0.4),
                inset 0 0 20px rgba(0, 255, 0, 0.3);
            animation: pulse-outer 2s ease-in-out infinite;
        }

        /* Vòng tròn trong */
        .circle-inner {
            position: absolute;
            width: 30%;
            height: 30%;
            top: 35%;
            left: 35%;
            border: 2px solid #ff0000;
            border-radius: 50%;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.6);
            animation: pulse-inner 1.5s ease-in-out infinite;
        }

        /* Điểm chấm trung tâm */
        .center-dot {
            position: absolute;
            width: 6px;
            height: 6px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #ff0000;
            border-radius: 50%;
            box-shadow: 0 0 10px #ff0000;
        }

        /* 4 đường kẻ */
        .line-top, .line-bottom, .line-left, .line-right {
            position: absolute;
            background: #00ff00;
            box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);
        }

        .line-top {
            top: -25px;
            left: 50%;
            width: 2px;
            height: 25px;
            transform: translateX(-50%);
        }

        .line-bottom {
            bottom: -25px;
            left: 50%;
            width: 2px;
            height: 25px;
            transform: translateX(-50%);
        }

        .line-left {
            left: -25px;
            top: 50%;
            height: 2px;
            width: 25px;
            transform: translateY(-50%);
        }

        .line-right {
            right: -25px;
            top: 50%;
            height: 2px;
            width: 25px;
            transform: translateY(-50%);
        }

        /* Hiệu ứng animations */
        @keyframes pulse-outer {
            0%, 100% {
                transform: scale(1);
                border-color: #00ff00;
            }
            50% {
                transform: scale(1.05);
                border-color: #00ffaa;
            }
        }

        @keyframes pulse-inner {
            0%, 100% {
                transform: scale(1);
                border-color: #ff0000;
            }
            50% {
                transform: scale(1.15);
                border-color: #ff4444;
            }
        }

        /* Settings panel */
        .settings-panel {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 15px;
            padding: 15px;
            pointer-events: auto;
            z-index: 10000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .settings-title {
            color: #00ff00;
            font-size: 14px;
            margin-bottom: 10px;
            text-align: center;
            font-weight: bold;
        }

        .color-buttons {
            display: flex;
            gap: 8px;
            margin-bottom: 10px;
        }

        .color-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 2px solid white;
            cursor: pointer;
            transition: all 0.3s;
        }

        .color-btn:active {
            transform: scale(0.9);
        }

        .color-green { background: #00ff00; }
        .color-red { background: #ff0000; }
        .color-blue { background: #00ffff; }
        .color-yellow { background: #ffff00; }
        .color-white { background: #ffffff; }
        .color-purple { background: #ff00ff; }

        .size-buttons {
            display: flex;
            gap: 5px;
            justify-content: center;
        }

        .size-btn {
            background: rgba(255, 255, 255, 0.2);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 12px;
        }

        .size-btn:active {
            background: rgba(255, 255, 255, 0.4);
        }

        /* Toggle button */
        .toggle-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.8);
            border-radius: 25px;
            padding: 10px 20px;
            pointer-events: auto;
            z-index: 10000;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: #00ff00;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- Overlay container -->
    <div class="overlay-container" id="overlayContainer">
        <div class="crosshair" id="crosshair">
            <div class="circle-outer" id="circleOuter"></div>
            <div class="circle-inner" id="circleInner"></div>
            <div class="center-dot" id="centerDot"></div>
            <div class="line-top" id="lineTop"></div>
            <div class="line-bottom" id="lineBottom"></div>
            <div class="line-left" id="lineLeft"></div>
            <div class="line-right" id="lineRight"></div>
        </div>
    </div>

    <!-- Toggle Button -->
    <button class="toggle-btn" id="toggleBtn" onclick="toggleOverlay()">
        🎯 Toggle AIM
    </button>

    <!-- Settings Panel -->
    <div class="settings-panel" id="settingsPanel">
        <div class="settings-title">⚙️ Cài đặt AIM</div>
        
        <div class="color-buttons">
            <div class="color-btn color-green" onclick="changeColor('#00ff00')"></div>
            <div class="color-btn color-red" onclick="changeColor('#ff0000')"></div>
            <div class="color-btn color-blue" onclick="changeColor('#00ffff')"></div>
            <div class="color-btn color-yellow" onclick="changeColor('#ffff00')"></div>
            <div class="color-btn color-white" onclick="changeColor('#ffffff')"></div>
            <div class="color-btn color-purple" onclick="changeColor('#ff00ff')"></div>
        </div>

        <div class="size-buttons">
            <button class="size-btn" onclick="changeSize('small')">Nhỏ</button>
            <button class="size-btn" onclick="changeSize('medium')">Vừa</button>
            <button class="size-btn" onclick="changeSize('large')">Lớn</button>
        </div>
    </div>

    <script>
        let isOverlayVisible = true;
        let currentColor = '#00ff00';
        let currentScale = 1;

        // Toggle overlay visibility
        function toggleOverlay() {
            const overlay = document.getElementById('overlayContainer');
            const btn = document.getElementById('toggleBtn');
            
            if (isOverlayVisible) {
                overlay.style.display = 'none';
                btn.textContent = '🎯 Show AIM';
                btn.style.color = '#ff0000';
            } else {
                overlay.style.display = 'block';
                btn.textContent = '🎯 Toggle AIM';
                btn.style.color = '#00ff00';
            }
            
            isOverlayVisible = !isOverlayVisible;
        }

        // Change color
        function changeColor(color) {
            currentColor = color;
            
            const outerCircle = document.getElementById('circleOuter');
            const innerCircle = document.getElementById('circleInner');
            const centerDot = document.getElementById('centerDot');
            const lines = document.querySelectorAll('[id^="line"]');
            
            // Update outer circle
            outerCircle.style.borderColor = color;
            outerCircle.style.boxShadow = `
                0 0 20px ${color}80,
                0 0 40px ${color}40,
                inset 0 0 20px ${color}30
            `;
            
            // Update inner circle
            innerCircle.style.borderColor = color;
            innerCircle.style.boxShadow = `0 0 15px ${color}60`;
            
            // Update center dot
            centerDot.style.backgroundColor = color;
            centerDot.style.boxShadow = `0 0 10px ${color}`;
            
            // Update lines
            lines.forEach(line => {
                line.style.backgroundColor = color;
                line.style.boxShadow = `0 0 10px ${color}80`;
            });
        }

        // Change size
        function changeSize(size) {
            const crosshair = document.getElementById('crosshair');
            
            switch(size) {
                case 'small':
                    currentScale = 0.7;
                    crosshair.style.transform = `translate(-50%, -50%) scale(0.7)`;
                    break;
                case 'medium':
                    currentScale = 1;
                    crosshair.style.transform = `translate(-50%, -50%) scale(1)`;
                    break;
                case 'large':
                    currentScale = 1.3;
                    crosshair.style.transform = `translate(-50%, -50%) scale(1.3)`;
                    break;
            }
        }

        // Touch handling for iOS
        let touchStartX = 0;
        let touchStartY = 0;
        let crosshairX = window.innerWidth / 2;
        let crosshairY = window.innerHeight / 2;
        let isDragging = false;

        document.addEventListener('touchstart', (e) => {
            if (e.target.closest('.settings-panel') || e.target.closest('.toggle-btn')) {
                return;
            }
            
            isDragging = true;
            touchStartX = e.touches[0].clientX;
            touchStartY = e.touches[0].clientY;
            
            // Store initial crosshair position
            const crosshair = document.getElementById('crosshair');
            const rect = crosshair.getBoundingClientRect();
            crosshairX = rect.left + rect.width / 2;
            crosshairY = rect.top + rect.height / 2;
        });

        document.addEventListener('touchmove', (e) => {
            if (!isDragging) return;
            e.preventDefault();
            
            const touchX = e.touches[0].clientX;
            const touchY = e.touches[0].clientY;
            
            const deltaX = touchX - touchStartX;
            const deltaY = touchY - touchStartY;
            
            const newX = crosshairX + deltaX;
            const newY = crosshairY + deltaY;
            
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${newX}px`;
            crosshair.style.top = `${newY}px`;
            crosshair.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
        });

        document.addEventListener('touchend', () => {
            isDragging = false;
        });

        // Mouse handling for testing in browser
        document.addEventListener('mousedown', (e) => {
            if (e.target.closest('.settings-panel') || e.target.closest('.toggle-btn')) {
                return;
            }
            
            isDragging = true;
            touchStartX = e.clientX;
            touchStartY = e.clientY;
            
            const crosshair = document.getElementById('crosshair');
            const rect = crosshair.getBoundingClientRect();
            crosshairX = rect.left + rect.width / 2;
            crosshairY = rect.top + rect.height / 2;
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            
            const deltaX = e.clientX - touchStartX;
            const deltaY = e.clientY - touchStartY;
            
            const newX = crosshairX + deltaX;
            const newY = crosshairY + deltaY;
            
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${newX}px`;
            crosshair.style.top = `${newY}px`;
            crosshair.style.transform = `translate(-50%, -50%) scale(${currentScale})`;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
        });

        // Initialize
        window.addEventListener('load', () => {
            // Set initial position to center
            const crosshair = document.getElementById('crosshair');
            crosshair.style.left = `${window.innerWidth / 2}px`;
            crosshair.style.top = `${window.innerHeight / 2}px`;
        });

        // Handle orientation change
        window.addEventListener('orientationchange', () => {
            setTimeout(() => {
                const crosshair = document.getElementById('crosshair');
                crosshair.style.left = `${window.innerWidth / 2}px`;
                crosshair.style.top = `${window.innerHeight / 2}px`;
            }, 300);
        });

        // Prevent default touch behaviors
        document.addEventListener('touchmove', (e) => {
            if (isDragging) {
                e.preventDefault();
            }
        }, { passive: false });

        console.log('✅ AIM Free Fire iOS Overlay đã sẵn sàng!');
        console.log('📱 Hướng dẫn sử dụng:');
        console.log('1. Mở file trong Safari trên iOS');
        console.log('2. Bấm nút Share > Add to Home Screen');
        console.log('3. Mở app từ Home Screen');
        console.log('4. Bật Guided Access để khóa màn hình');
        console.log('5. Mở Free Fire và điều chỉnh AIM');
    </script>
</body>
</html>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions