HTML ad tag preview - Powered by Ad Reform

Live Preview

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

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

Open in browser
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>متلازمة أنجلمان - عرض 3D تفاعلي</title>
    <style>
        body { 
            margin: 0; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            color: white;
        }
        #info { 
            position: absolute; 
            top: 20px; 
            right: 20px; 
            width: 300px; 
            background: rgba(0,0,0,0.7); 
            padding: 20px; 
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        #info h2 { margin: 0 0 15px 0; text-align: center; }
        .fact { 
            margin: 10px 0; 
            padding: 10px; 
            background: rgba(255,255,255,0.1); 
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
        }
        .fact:hover { background: rgba(255,255,255,0.3); transform: scale(1.02); }
        #controls { 
            position: absolute; 
            bottom: 20px; 
            left: 20px; 
            color: white;
        }
    </style>
</head>
<body>
    <div id="info">
        <h2>🧠 متلازمة أنجلمان</h2>
        <div class="fact" onclick="showInfo(1)">ما هي المتلازمة؟</div>
        <div class="fact" onclick="showInfo(2)">الأسباب الجينية</div>
        <div class="fact" onclick="showInfo(3)">الأعراض الرئيسية</div>
        <div class="fact" onclick="showInfo(4)">العلاج والدعم</div>
        <div class="fact" onclick="showInfo(5)">إحصائيات</div>
    </div>

    <div id="controls">
        <p>🖱️ اسحب للدوران | 🎯 انقر على النموذج | 📱 لمس للتفاعل</p>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    
    <script>
        // المشهد الأساسي
        const scene = new THREE.Scene();
        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.setClearColor(0x000000, 0);
        document.body.appendChild(renderer.domElement);

        // التحكم
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true;

        // إضاءة
        const ambientLight = new THREE.AmbientLight(0x404040, 0.6);
        scene.add(ambientLight);
        const pointLight = new THREE.PointLight(0x00aaff, 1, 100);
        pointLight.position.set(10, 10, 10);
        scene.add(pointLight);

        // نموذج الدماغ الرئيسي (مكعب مع تدرج)
        const brainGeometry = new THREE.SphereGeometry(3, 32, 32);
        const brainMaterial = new THREE.MeshPhongMaterial({
            color: 0x4a90e2,
            shininess: 100,
            transparent: true,
            opacity: 0.9
        });
        const brain = new THREE.Mesh(brainGeometry, brainMaterial);
        scene.add(brain);

        // الجين المفقود (حلقة حمراء)
        const geneGeometry = new THREE.TorusGeometry(1.5, 0.3, 16, 100);
        const geneMaterial = new THREE.MeshBasicMaterial({ color: 0xff4444 });
        const missingGene = new THREE.Mesh(geneGeometry, geneMaterial);
        missingGene.rotation.x = Math.PI / 2;
        missingGene.position.y = 1.2;
        scene.add(missingGene);

        // طفل سعيد (رأس بسيط)
        const childGeometry = new THREE.SphereGeometry(1.2, 16, 16);
        const childMaterial = new THREE.MeshLambertMaterial({ color: 0xffd700 });
        const childHead = new THREE.Mesh(childGeometry, childMaterial);
        childHead.position.set(-4, 0, 0);
        scene.add(childHead);

        // عيون الطفل
        const eyeGeometry = new THREE.SphereGeometry(0.15, 8, 8);
        const eyeMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
        const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
        leftEye.position.set(-4.1, 0.3, 0.8);
        const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial);
        rightEye.position.set(-3.9, 0.3, 0.8);
        scene.add(leftEye, rightEye);

        // فم مبتسم
        const smileGeometry = new THREE.TorusGeometry(0.4, 0.1, 8, 20);
        const smileMaterial = new THREE.MeshBasicMaterial({ color: 0xff69b4 });
        const smile = new THREE.Mesh(smileGeometry, smileMaterial);
        smile.position.set(-4, -0.3, 0.7);
        smile.rotation.x = Math.PI;
        scene.add(smile);

        // جزيئات دوّارة
        const particles = new THREE.BufferGeometry();
        const particleCount = 200;
        const positions = new Float32Array(particleCount * 3);
        for (let i = 0; i < particleCount * 3; i++) {
            positions[i] = (Math.random() - 0.5) * 20;
        }
        particles.setAttribute('position', new THREE.BufferAttribute(positions, 3));
        const particleMaterial = new THREE.PointsMaterial({ color: 0x00ff88, size: 0.1 });
        const particleSystem = new THREE.Points(particles, particleMaterial);
        scene.add(particleSystem);

        camera.position.z = 8;

        // معلومات تفاعلية
        const facts = {
            1: "متلازمة أنجلمان اضطراب عصبي نادر يصيب 1 من كل 15,000 طفل. تُعرف بـ 'الضحك السعيد'.",
            2: "سببها حذف جين UBE3A على الكروموسوم 15 الأمي (70% من الحالات).",
            3: "أعراض: نقص كلام، نوبات صرع، مشية رقص، ضحك متكرر، حب الموسيقى.",
            4: "علاج داعم: علاج فيزيائي، تواصل بصري، أدوية للصرع.",
            5: "80-90% يعانون صرع، متوسط العمر طبيعي مع الدعم."
        };

        function showInfo(id) {
            alert(facts[id]);
        }

        // الرسوم المتحركة
        function animate() {
            requestAnimationFrame(animate);
            
            brain.rotation.y += 0.01;
            missingGene.rotation.z += 0.02;
            childHead.rotation.y += 0.005;
            smile.rotation.z += 0.03;
            particleSystem.rotation.y += 0.002;
            
            controls.update();
            renderer.render(scene, camera);
        }
        animate();

        // استجابة للشاشة
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // تفاعل النقر
        const raycaster = new THREE.Raycaster();
        const mouse = new THREE.Vector2();

        window.addEventListener('click', (event) => {
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
            
            raycaster.setFromCamera(mouse, camera);
            const intersects = raycaster.intersectObjects(scene.children);
            
            if (intersects.length > 0) {
                // تأثير توهج عند النقر
                const object = intersects[0].object;
                object.material.emissive = new THREE.Color(0x444444);
                setTimeout(() => {
                    object.material.emissive = new THREE.Color(0x000000);
                }, 200);
            }
        });
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
133KB
Transfer Size
623KB
Content Size
1,123.0ms
Dom Content Loaded
288.0ms
First Paint
1,123.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