HTML ad tag preview - Powered by Ad Reform

Live Preview

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

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

Open in browser

html_code = '''<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ماريو ولويجي - انترو الأخوات</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            overflow: hidden;
            background: #0a0a0a;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        #canvas-container {
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        #intro-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 4rem;
            font-weight: 900;
            text-shadow: 0 0 20px #ff0000, 0 0 40px #00ff00, 0 0 60px rgba(255,255,255,0.5);
            opacity: 0;
            pointer-events: none;
            z-index: 100;
            text-align: center;
            white-space: nowrap;
        }
        #intro-text .subtitle {
            font-size: 1.5rem;
            color: #ffd700;
            text-shadow: 0 0 10px #ffd700;
            margin-top: 10px;
            display: block;
        }
        #timer {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #fff;
            font-size: 1.2rem;
            z-index: 100;
            background: rgba(0,0,0,0.5);
            padding: 10px 20px;
            border-radius: 20px;
            border: 2px solid #ffd700;
        }
        #controls-hint {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.6);
            font-size: 0.9rem;
            z-index: 100;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>
    <div id="canvas-container"></div>
    <div id="timer">⏱️ 00:00</div>
    <div id="intro-text">
        الأخوات
        <span class="subtitle">ماريو & لويجي</span>
    </div>
    <div id="controls-hint">🖱️ حرك الماوس للتحكم في الكاميرا | 🖱️ انقر للقفز</div>

    <script>
        // Scene setup
        const scene = new THREE.Scene();
        scene.fog = new THREE.FogExp2(0x0a0a0a, 0.02);
        
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
        renderer.toneMapping = THREE.ACESFilmicToneMapping;
        document.getElementById('canvas-container').appendChild(renderer.domElement);

        // Lighting
        const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
        scene.add(ambientLight);

        const redLight = new THREE.PointLight(0xff0000, 2, 50);
        redLight.position.set(-5, 5, 5);
        redLight.castShadow = true;
        scene.add(redLight);

        const greenLight = new THREE.PointLight(0x00ff00, 2, 50);
        greenLight.position.set(5, 5, 5);
        greenLight.castShadow = true;
        scene.add(greenLight);

        const mainLight = new THREE.DirectionalLight(0xffffff, 1);
        mainLight.position.set(0, 10, 10);
        mainLight.castShadow = true;
        scene.add(mainLight);

        const spotLight = new THREE.SpotLight(0xffd700, 2);
        spotLight.position.set(0, 15, 0);
        spotLight.angle = Math.PI / 4;
        spotLight.penumbra = 0.5;
        scene.add(spotLight);

        // Ground
        const groundGeometry = new THREE.PlaneGeometry(100, 100);
        const groundMaterial = new THREE.MeshStandardMaterial({ 
            color: 0x1a1a1a,
            roughness: 0.8,
            metalness: 0.2
        });
        const ground = new THREE.Mesh(groundGeometry, groundMaterial);
        ground.rotation.x = -Math.PI / 2;
        ground.position.y = -2;
        ground.receiveShadow = true;
        scene.add(ground);

        // Grid helper for retro feel
        const gridHelper = new THREE.GridHelper(100, 50, 0xff0000, 0x00ff00);
        gridHelper.position.y = -1.9;
        scene.add(gridHelper);

        // Load textures
        const textureLoader = new THREE.TextureLoader();
        
        // Mario texture (using a colored placeholder since we can't load external images directly in this environment)
        const marioCanvas = document.createElement('canvas');
        marioCanvas.width = 512;
        marioCanvas.height = 512;
        const marioCtx = marioCanvas.getContext('2d');
        
        // Draw Mario-like character
        marioCtx.fillStyle = '#ff0000';
        marioCtx.fillRect(0, 0, 512, 512);
        marioCtx.fillStyle = '#0000ff';
        marioCtx.fillRect(100, 200, 312, 200);
        marioCtx.fillStyle = '#ffcc99';
        marioCtx.beginPath();
        marioCtx.arc(256, 150, 80, 0, Math.PI * 2);
        marioCtx.fill();
        marioCtx.fillStyle = '#000';
        marioCtx.fillRect(200, 180, 112, 30);
        marioCtx.fillStyle = '#fff';
        marioCtx.fillRect(220, 130, 30, 30);
        marioCtx.fillRect(262, 130, 30, 30);
        marioCtx.fillStyle = '#0000ff';
        marioCtx.fillRect(220, 135, 15, 15);
        marioCtx.fillRect(262, 135, 15, 15);
        
        const marioTexture = new THREE.CanvasTexture(marioCanvas);

        // Luigi texture
        const luigiCanvas = document.createElement('canvas');
        luigiCanvas.width = 512;
        luigiCanvas.height = 512;
        const luigiCtx = luigiCanvas.getContext('2d');
        
        luigiCtx.fillStyle = '#00aa00';
        luigiCtx.fillRect(0, 0, 512, 512);
        luigiCtx.fillStyle = '#0000ff';
        luigiCtx.fillRect(100, 200, 312, 200);
        luigiCtx.fillStyle = '#ffcc99';
        luigiCtx.beginPath();
        luigiCtx.arc(256, 150, 80, 0, Math.PI * 2);
        luigiCtx.fill();
        luigiCtx.fillStyle = '#000';
        luigiCtx.fillRect(200, 180, 112, 30);
        luigiCtx.fillStyle = '#fff';
        luigiCtx.fillRect(220, 130, 30, 30);
        luigiCtx.fillRect(262, 130, 30, 30);
        luigiCtx.fillStyle = '#0000ff';
        luigiCtx.fillRect(220, 135, 15, 15);
        luigiCtx.fillRect(262, 135, 15, 15);
        
        const luigiTexture = new THREE.CanvasTexture(luigiCanvas);

        // Create character sprites
        const spriteMaterial = new THREE.SpriteMaterial({ map: marioTexture });
        const marioSprite = new THREE.Sprite(spriteMaterial);
        marioSprite.scale.set(4, 4, 1);
        marioSprite.position.set(-3, 0, 0);
        scene.add(marioSprite);

        const luigiSpriteMaterial = new THREE.SpriteMaterial({ map: luigiTexture });
        const luigiSprite = new THREE.Sprite(luigiSpriteMaterial);
        luigiSprite.scale.set(4, 4, 1);
        luigiSprite.position.set(3, 0, 0);
        scene.add(luigiSprite);

        // Create shields
        const shieldGeometry = new THREE.CylinderGeometry(1.5, 1.5, 0.2, 32);
        
        const marioShieldMaterial = new THREE.MeshStandardMaterial({
            color: 0xff0000,
            metalness: 0.8,
            roughness: 0.2,
            emissive: 0xff0000,
            emissiveIntensity: 0.3
        });
        const marioShield = new THREE.Mesh(shieldGeometry, marioShieldMaterial);
        marioShield.position.set(-2, 1, 1);
        marioShield.rotation.x = Math.PI / 2;
        marioShield.castShadow = true;
        scene.add(marioShield);

        const luigiShieldMaterial = new THREE.MeshStandardMaterial({
            color: 0x00ff00,
            metalness: 0.8,
            roughness: 0.2,
            emissive: 0x00ff00,
            emissiveIntensity: 0.3
        });
        const luigiShield = new THREE.Mesh(shieldGeometry, luigiShieldMaterial);
        luigiShield.position.set(2, 1, 1);
        luigiShield.rotation.x = Math.PI / 2;
        luigiShield.castShadow = true;
        scene.add(luigiShield);

        // Shield emblems
        const emblemGeometry = new THREE.CircleGeometry(0.8, 32);
        const marioEmblemMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff });
        const marioEmblem = new THREE.Mesh(emblemGeometry, marioEmblemMaterial);
        marioEmblem.position.set(0, 0.11, 0);
        marioShield.add(marioEmblem);

        const luigiEmblem = new THREE.Mesh(emblemGeometry, marioEmblemMaterial);
        luigiEmblem.position.set(0, 0.11, 0);
        luigiShield.add(luigiEmblem);

        // Particle system
        const particleCount = 200;
        const particlesGeometry = new THREE.BufferGeometry();
        const positions = new Float32Array(particleCount * 3);
        const colors = new Float32Array(particleCount * 3);
        
        for (let i = 0; i < particleCount; i++) {
            positions[i * 3] = (Math.random() - 0.5) * 20;
            positions[i * 3 + 1] = Math.random() * 10;
            positions[i * 3 + 2] = (Math.random() - 0.5) * 20;
            
            const color = Math.random() > 0.5 ? new THREE.Color(0xff0000) : new THREE.Color(0x00ff00);
            colors[i * 3] = color.r;
            colors[i * 3 + 1] = color.g;
            colors[i * 3 + 2] = color.b;
        }
        
        particlesGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        particlesGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
        
        const particlesMaterial = new THREE.PointsMaterial({
            size: 0.1,
            vertexColors: true,
            transparent: true,
            opacity: 0.8,
            blending: THREE.AdditiveBlending
        });
        
        const particles = new THREE.Points(particlesGeometry, particlesMaterial);
        scene.add(particles);

        // Animation variables
        let startTime = Date.now();
        let isJumping = false;
        let jumpStartTime = 0;
        
        // Mouse control
        let mouseX = 0;
        let mouseY = 0;
        
        document.addEventListener('mousemove', (event) => {
            mouseX = (event.clientX / window.innerWidth) * 2 - 1;
            mouseY = -(event.clientY / window.innerHeight) * 2 + 1;
        });
        
        document.addEventListener('click', () => {
            if (!isJumping) {
                isJumping = true;
                jumpStartTime = Date.now();
            }
        });

        // Timer update
        const timerElement = document.getElementById('timer');
        const introText = document.getElementById('intro-text');

        function updateTimer() {
            const elapsed = (Date.now() - startTime) / 1000;
            const seconds = Math.floor(elapsed);
            const ms = Math.floor((elapsed % 1) * 100);
            timerElement.textContent = `⏱️ ${seconds.toString().padStart(2, '0')}:${ms.toString().padStart(2, '0')}`;
            
            // Show text at 7 seconds
            if (elapsed > 7 && elapsed < 10) {
                const progress = (elapsed - 7) / 3;
                introText.style.opacity = progress;
                introText.style.transform = `translate(-50%, -50%) scale(${0.5 + progress * 0.5})`;
            } else if (elapsed >= 10) {
                introText.style.opacity = 1;
                introText.style.transform = 'translate(-50%, -50%) scale(1)';
            }
        }

        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            
            const elapsed = (Date.now() - startTime) / 1000;
            const time = Date.now() * 0.001;
            
            // Camera movement based on mouse
            camera.position.x += (mouseX * 5 - camera.position.x) * 0.05;
            camera.position.y += (mouseY * 2 + 2 - camera.position.y) * 0.05;
            camera.lookAt(0, 0, 0);
            
            // Character animations
            marioSprite.position.y = Math.sin(time * 3) * 0.5;
            luigiSprite.position.y = Math.sin(time * 3 + Math.PI) * 0.5;
            
            // Shield animations
            marioShield.rotation.z = time * 2;
            marioShield.position.y = 1 + Math.sin(time * 2) * 0.3;
            
            luigiShield.rotation.z = -time * 2;
            luigiShield.position.y = 1 + Math.sin(time * 2 + Math.PI) * 0.3;
            
            // Jump animation
            if (isJumping) {
                const jumpElapsed = (Date.now() - jumpStartTime) / 1000;
                if (jumpElapsed < 1) {
                    const jumpHeight = Math.sin(jumpElapsed * Math.PI) * 3;
                    marioSprite.position.y += jumpHeight;
                    luigiSprite.position.y += jumpHeight;
                } else {
                    isJumping = false;
                }
            }
            
            // Particle animation
            const positions = particles.geometry.attributes.position.array;
            for (let i = 0; i < particleCount; i++) {
                positions[i * 3 + 1] += Math.sin(time + i) * 0.02;
                if (positions[i * 3 + 1] > 10) positions[i * 3 + 1] = 0;
            }
            particles.geometry.attributes.position.needsUpdate = true;
            particles.rotation.y = time * 0.1;
            
            // Light animation
            redLight.intensity = 2 + Math.sin(time * 5) * 0.5;
            greenLight.intensity = 2 + Math.sin(time * 5 + Math.PI) * 0.5;
            
            // Camera intro animation (first 3 seconds)
            if (elapsed < 3) {
                const introProgress = elapsed / 3;
                camera.position.z = 20 - introProgress * 15;
                camera.position.y = 5 - introProgress * 3;
            }
            
            updateTimer();
            renderer.render(scene, camera);
        }

        // Handle window resize
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        animate();
    </script>
</body>
</html>'''

# Save the HTML file
with open('/mnt/agents/output/mario_luigi_intro.html', 'w', encoding='utf-8') as f:
    f.write(html_code)

print("✅ تم إنشاء الانترو بنجاح!")
print("📁 الملف محفوظ في: /mnt/agents/output/mario_luigi_intro.html")
print("\n🎮 مميزات الانترو:")
print("   • مشهد 3D تفاعلي باستخدام Three.js")
print("   • ماريو (أحمر) ولويجي (أخضر) مع دروع متحركة")
print("   • نظام جزيئات ملون")
print("   • إضاءة ديناميكية حمراء وخضراء")
print("   • تحكم بالكاميرا بالماوس")
print("   • قفزة عند النقر")
print("   • نص 'الأخوات - ماريو & لويجي' يظهر في الثانية 7")
print("   • عداد زمني للـ 10 ثواني")
print("\n💡 لاستخدامه كفيديو: افتح الملف في المتصفح وسجل الشاشة بـ OBS أو أي screen recorder")
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
134KB
Transfer Size
605KB
Content Size
4,916.0ms
Dom Content Loaded
108.0ms
First Paint
4,916.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