HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
37.2 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>GTA: Build & Business Simulator</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: 'Segoe UI', sans-serif; background: #000; }
        #ui { position: absolute; top: 10px; left: 10px; color: white; z-index: 10; background: rgba(0,0,0,0.7); padding: 15px; border-radius: 10px; pointer-events: none; border-left: 5px solid #2ecc71; }
        #money-display { color: #2ecc71; font-size: 20px; font-weight: bold; }
        
        #controls { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: space-between; padding: 0 30px; box-sizing: border-box; z-index: 20; }
        .group { display: flex; flex-direction: column; gap: 10px; }
        .btn { width: 70px; height: 70px; background: rgba(255,255,255,0.2); border: 2px solid #fff; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; user-select: none; }
        
        #action-btn { position: absolute; bottom: 120px; right: 30px; width: 120px; height: 50px; background: #f1c40f; color: black; border-radius: 25px; display: none; align-items: center; justify-content: center; font-weight: bold; z-index: 30; }
        .build-menu { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; z-index: 10; }
        .m-btn { padding: 8px; background: #3498db; color: white; border: none; border-radius: 5px; cursor: pointer; }
    </style>
</head>
<body>

<div id="ui">
    <b>CITY TYCOON 3D</b><br>
    CASH: <span id="money-display">$10,000</span><br>
    LEVEL: <span id="level">1</span><br>
    <small>Mode: Walking</small>
</div>

<div class="build-menu">
    <button class="m-btn" onclick="setMode('walk')">🚶 Walk</button>
    <button class="m-btn" onclick="setMode('build')">🏠 Build House</button>
    <button class="m-btn" onclick="setMode('business')">💰 Car Business</button>
</div>

<div id="action-btn">INTERACT [E]</div>

<div id="controls">
    <div class="group">
        <div class="btn" id="up">W</div>
        <div style="display:flex; gap:10px">
            <div class="btn" id="left">A</div>
            <div class="btn" id="down">S</div>
            <div class="btn" id="right">D</div>
        </div>
    </div>
    <div class="group">
        <div class="btn" id="enter" style="background:#e74c3c; width:100px; border-radius:10px;">ENTER CAR</div>
        <div class="btn" id="build" style="background:#2ecc71; width:100px; border-radius:10px; display:none;">PLACE WALL</div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>

<script>
    let scene, camera, renderer, player, clock;
    let moveForward = false, moveBackward = false, moveLeft = false, moveRight = false;
    let objects = [], cars = [], mode = 'walk';
    let money = 10000;

    function init() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0xa0a0a0);
        scene.fog = new THREE.Fog(0xa0a0a0, 10, 100);

        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        clock = new THREE.Clock();

        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // Lighting
        const hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
        hemiLight.position.set(0, 20, 0);
        scene.add(hemiLight);

        // Ground (GTA Map Base)
        const mesh = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000), new THREE.MeshPhongMaterial({ color: 0x333333 }));
        mesh.rotation.x = -Math.PI / 2;
        scene.add(mesh);

        // Create a simple House with a door
        createHouse(15, 0, -20);
        
        // Create a "Car For Sale"
        createCar(5, 0, -10, 0xff0000, 5000);

        // Player (Simple box for now)
        player = new THREE.Group();
        const body = new THREE.Mesh(new THREE.BoxGeometry(1, 2, 1), new THREE.MeshPhongMaterial({color: 0x0000ff}));
        body.position.y = 1;
        player.add(body);
        scene.add(player);

        setupControls();
        animate();
    }

    function createHouse(x, y, z) {
        const group = new THREE.Group();
        // Walls
        const wallMat = new THREE.MeshPhongMaterial({color: 0xecf0f1});
        const wall = new THREE.Mesh(new THREE.BoxGeometry(10, 6, 10), wallMat);
        wall.position.y = 3;
        group.add(wall);
        // Roof
        const roof = new THREE.Mesh(new THREE.ConeGeometry(8, 4, 4), new THREE.MeshPhongMaterial({color: 0xc0392b}));
        roof.position.y = 8;
        roof.rotation.y = Math.PI/4;
        group.add(roof);
        
        group.position.set(x, y, z);
        scene.add(group);
        objects.push({type: 'house', mesh: group});
    }

    function createCar(x, y, z, color, price) {
        const group = new THREE.Group();
        const body = new THREE.Mesh(new THREE.BoxGeometry(2, 1, 4), new THREE.MeshPhongMaterial({color: color}));
        body.position.y = 0.6;
        group.add(body);
        
        group.position.set(x, y, z);
        scene.add(group);
        cars.push({mesh: group, price: price, forSale: true});
    }

    function setMode(m) {
        mode = m;
        document.getElementById('build').style.display = (m === 'build') ? 'flex' : 'none';
        alert("Mode switched to: " + m);
    }

    function setupControls() {
        const btn = (id, action) => {
            const el = document.getElementById(id);
            el.addEventListener('touchstart', () => action(true));
            el.addEventListener('touchend', () => action(false));
        };
        btn('up', (v) => moveForward = v);
        btn('down', (v) => moveBackward = v);
        btn('left', (v) => moveLeft = v);
        btn('right', (v) => moveRight = v);
        
        document.getElementById('enter').onclick = () => {
            // Logic to enter car or house
            checkInteraction();
        };

        document.getElementById('build').onclick = () => {
            if(money >= 500) {
                const wall = new THREE.Mesh(new THREE.BoxGeometry(2, 4, 0.5), new THREE.MeshPhongMaterial({color: 0x95a5a6}));
                wall.position.set(player.position.x, 2, player.position.z - 3);
                scene.add(wall);
                money -= 500;
                updateUI();
            } else { alert("Not enough cash!"); }
        };
    }

    function checkInteraction() {
        cars.forEach(car => {
            let dist = player.position.distanceTo(car.mesh.position);
            if(dist < 5) {
                if(car.forSale) {
                    if(confirm("Buy car for $" + car.price + "?")) {
                        money -= car.price;
                        car.forSale = false;
                        alert("You bought the car! Now you can sell it for higher.");
                        updateUI();
                    }
                } else {
                    alert("Entering Car...");
                    // Logic to drive car
                }
            }
        });
    }

    function updateUI() {
        document.getElementById('money-display').innerText = "$" + money;
    }

    function animate() {
        requestAnimationFrame(animate);
        const delta = clock.getDelta();
        const moveSpeed = 10 * delta;

        if (moveForward) player.translateZ(-moveSpeed);
        if (moveBackward) player.translateZ(moveSpeed);
        if (moveLeft) player.translateX(-moveSpeed);
        if (moveRight) player.translateX(moveSpeed);

        // Camera follow
        camera.position.set(player.position.x, player.position.y + 10, player.position.z + 15);
        camera.lookAt(player.position);

        renderer.render(scene, camera);
    }

    init();
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
127KB
Transfer Size
598KB
Content Size
1,909.0ms
Dom Content Loaded
188.0ms
First Paint
1,909.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests