HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
500x501
1.75 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">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DINGA TV - GIF متحرك</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #0a0014;
            font-family: 'Segoe UI', Tahoma, sans-serif;
            flex-direction: column;
            gap: 30px;
            padding: 20px;
        }

        .preview-container {
            background: #0a0014;
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 0 60px rgba(106, 44, 255, 0.3);
            border: 1px solid rgba(106, 44, 255, 0.2);
        }

        canvas {
            display: block;
            border-radius: 12px;
            width: 500px;
            height: 500px;
        }

        .controls {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .btn {
            padding: 14px 32px;
            border: none;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .btn-primary {
            background: linear-gradient(90deg, #6a2cff, #8b35ff);
            color: #fff;
            box-shadow: 0 0 30px rgba(106, 44, 255, 0.3);
        }

        .btn-primary:hover {
            transform: scale(1.05);
            box-shadow: 0 0 50px rgba(106, 44, 255, 0.5);
        }

        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.2);
        }

        .btn-success {
            background: linear-gradient(90deg, #00d4ff, #00ff88);
            color: #0a0014;
            box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
        }

        .btn-success:hover {
            transform: scale(1.05);
            box-shadow: 0 0 50px rgba(0, 212, 255, 0.5);
        }

        .status {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            text-align: center;
            padding: 10px 20px;
            background: rgba(106, 44, 255, 0.1);
            border-radius: 10px;
            border: 1px solid rgba(106, 44, 255, 0.1);
            min-width: 200px;
        }

        @media (max-width: 600px) {
            canvas {
                width: 100%;
                height: auto;
                aspect-ratio: 1/1;
            }
            .btn {
                padding: 10px 20px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>

    <div class="preview-container">
        <canvas id="logoCanvas" width="500" height="500"></canvas>
    </div>

    <div class="controls">
        <button class="btn btn-primary" onclick="playAnimation()">▶ تشغيل</button>
        <button class="btn btn-secondary" onclick="pauseAnimation()">⏸ إيقاف</button>
        <button class="btn btn-success" onclick="downloadGIF()">📥 تحميل GIF</button>
        <button class="btn btn-secondary" onclick="downloadPNG()">🖼 تحميل PNG</button>
    </div>

    <div class="status" id="status">⏳ جاري التحميل...</div>

    <script>
        // ============================================================
        // إعدادات الشعار
        // ============================================================
        const canvas = document.getElementById('logoCanvas');
        const ctx = canvas.getContext('2d');
        const W = 500, H = 500;
        let frame = 0;
        let animationId = null;
        let isPlaying = true;

        // ألوان الشعار
        const COLORS = {
            gold: '#FFD700',
            orange: '#FF6B00',
            purple: '#6A2CFF',
            lightPurple: '#8B35FF',
            blue: '#00D4FF',
            green: '#00FF88',
            red: '#FF4444',
            dark: '#0A0014'
        };

        // ============================================================
        // دوال الرسم
        // ============================================================
        function drawRing(x, y, radius, startColor, endColor, rotation, lineWidth = 3) {
            const gradient = ctx.createConicGradient(rotation, x, y);
            gradient.addColorStop(0, startColor);
            gradient.addColorStop(0.5, endColor);
            gradient.addColorStop(1, startColor);
            
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2);
            ctx.strokeStyle = gradient;
            ctx.lineWidth = lineWidth;
            ctx.stroke();
        }

        function drawParticles(time) {
            const particles = [
                { angle: 0, radius: 180, size: 4, color: COLORS.gold, speed: 0.5 },
                { angle: 1.5, radius: 200, size: 3, color: COLORS.purple, speed: 0.7 },
                { angle: 3, radius: 160, size: 5, color: COLORS.blue, speed: 0.3 },
                { angle: 4.5, radius: 220, size: 3, color: COLORS.green, speed: 0.6 },
                { angle: 0.8, radius: 190, size: 4, color: COLORS.orange, speed: 0.4 },
                { angle: 2.3, radius: 170, size: 3, color: COLORS.red, speed: 0.8 },
                { angle: 3.7, radius: 210, size: 4, color: COLORS.lightPurple, speed: 0.5 },
                { angle: 5.2, radius: 185, size: 3, color: COLORS.gold, speed: 0.6 },
            ];

            particles.forEach((p, i) => {
                const angle = p.angle + time * p.speed + i * 0.8;
                const x = W/2 + Math.cos(angle) * p.radius;
                const y = H/2 + Math.sin(angle) * p.radius;
                
                const glow = ctx.createRadialGradient(x, y, 0, x, y, p.size * 3);
                glow.addColorStop(0, p.color);
                glow.addColorStop(1, 'transparent');
                
                ctx.beginPath();
                ctx.arc(x, y, p.size, 0, Math.PI * 2);
                ctx.fillStyle = p.color;
                ctx.fill();
                ctx.shadowColor = p.color;
                ctx.shadowBlur = 15;
                ctx.fill();
                ctx.shadowBlur = 0;
            });
        }

        function drawLogo(time) {
            // مسح الخلفية
            ctx.clearRect(0, 0, W, H);

            // خلفية متوهجة
            const glow = ctx.createRadialGradient(W/2, H/2, 0, W/2, H/2, 250);
            glow.addColorStop(0, 'rgba(106, 44, 255, 0.15)');
            glow.addColorStop(1, 'transparent');
            ctx.fillStyle = glow;
            ctx.fillRect(0, 0, W, H);

            // حلقات دوارة
            const rotation1 = time * 0.3;
            const rotation2 = -time * 0.25;
            const rotation3 = time * 0.4;
            const rotation4 = -time * 0.35;

            drawRing(W/2, H/2, 220, COLORS.purple, COLORS.lightPurple, rotation1, 3);
            drawRing(W/2, H/2, 185, COLORS.gold, COLORS.orange, rotation2, 3);
            drawRing(W/2, H/2, 150, COLORS.red, COLORS.blue, rotation3, 3);
            drawRing(W/2, H/2, 115, COLORS.green, COLORS.purple, rotation4, 3);

            // جسيمات
            drawParticles(time);

            // ظل النص
            ctx.shadowColor = 'rgba(255, 215, 0, 0.3)';
            ctx.shadowBlur = 40;

            // نص DINGA
            const gradient1 = ctx.createLinearGradient(0, 200, 500, 300);
            gradient1.addColorStop(0, COLORS.gold);
            gradient1.addColorStop(0.3, COLORS.orange);
            gradient1.addColorStop(0.6, COLORS.gold);
            gradient1.addColorStop(0.8, COLORS.orange);
            gradient1.addColorStop(1, COLORS.gold);

            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = 'bold 85px "Segoe UI", Arial, sans-serif';
            ctx.fillStyle = gradient1;
            
            // تأثير نبض
            const scale = 1 + Math.sin(time * 1.5) * 0.02;
            ctx.save();
            ctx.translate(W/2, H/2 - 10);
            ctx.scale(scale, scale);
            ctx.fillText('DINGA', 0, -20);
            ctx.restore();

            // نص TV
            const gradient2 = ctx.createLinearGradient(0, 250, 500, 350);
            gradient2.addColorStop(0, COLORS.purple);
            gradient2.addColorStop(0.5, COLORS.blue);
            gradient2.addColorStop(1, COLORS.purple);

            ctx.font = 'bold 45px "Segoe UI", Arial, sans-serif';
            ctx.fillStyle = gradient2;
            ctx.shadowColor = 'rgba(106, 44, 255, 0.3)';
            ctx.shadowBlur = 30;
            ctx.fillText('TV', W/2, 40);

            // السطر السفلي
            ctx.shadowBlur = 0;
            ctx.font = '14px "Segoe UI", Arial, sans-serif';
            ctx.fillStyle = `rgba(255, 255, 255, ${0.3 + Math.sin(time * 1.2) * 0.2})`;
            ctx.letterSpacing = '12px';
            ctx.fillText('✦ البث المباشر ✦', W/2, 105);

            // تحديث الحالة
            document.getElementById('status').textContent = `🎬 تشغيل | الإطار: ${Math.floor(frame)}`;
        }

        // ============================================================
        // دورة التشغيل
        // ============================================================
        function animate(timestamp) {
            frame++;
            const time = timestamp / 1000;
            drawLogo(time);
            
            if (isPlaying) {
                animationId = requestAnimationFrame(animate);
            }
        }

        function playAnimation() {
            if (!isPlaying) {
                isPlaying = true;
                animationId = requestAnimationFrame(animate);
                document.getElementById('status').textContent = '▶ تشغيل...';
            }
        }

        function pauseAnimation() {
            if (isPlaying) {
                isPlaying = false;
                if (animationId) {
                    cancelAnimationFrame(animationId);
                    animationId = null;
                }
                document.getElementById('status').textContent = '⏸ متوقف';
            }
        }

        // ============================================================
        // تحميل PNG
        // ============================================================
        function downloadPNG() {
            const link = document.createElement('a');
            link.download = 'DINGA_TV_Logo.png';
            link.href = canvas.toDataURL('image/png');
            link.click();
            document.getElementById('status').textContent = '✅ تم تحميل PNG';
            setTimeout(() => {
                document.getElementById('status').textContent = '▶ تشغيل...';
            }, 2000);
        }

        // ============================================================
        // تحميل GIF (محاكاة - يوجه المستخدم)
        // ============================================================
        function downloadGIF() {
            const status = document.getElementById('status');
            status.textContent = '⏳ جاري تحضير GIF...';
            
            setTimeout(() => {
                status.textContent = `
                📥 لتحميل GIF احترافي:
                
                1️⃣ استخدم أداة تسجيل الشاشة (OBS أو Win+G)
                2️⃣ سجل الشعار المتحرك لمدة 3-5 ثواني
                3️⃣ ارفع الفيديو على EZGIF.com
                4️⃣ ضبط الإعدادات: حجم 500×500، سرعة عادية
                5️⃣ حمّل GIF النهائي
                
                🎯 أو استخدم Canva لتصميم GIF مباشر
                `;
                
                // فتح EZGIF في تبويب جديد
                window.open('https://ezgif.com/video-to-gif', '_blank');
            }, 1000);
        }

        // ============================================================
        // تشغيل تلقائي
        // ============================================================
        setTimeout(() => {
            isPlaying = true;
            animationId = requestAnimationFrame(animate);
            document.getElementById('status').textContent = '▶ تشغيل...';
        }, 500);

        // ============================================================
        // دعم لوحة المفاتيح
        // ============================================================
        document.addEventListener('keydown', (e) => {
            if (e.key === ' ') {
                e.preventDefault();
                if (isPlaying) {
                    pauseAnimation();
                } else {
                    playAnimation();
                }
            }
            if (e.key === 'p' || e.key === 'P') {
                downloadPNG();
            }
        });

        console.log('✨ DINGA TV - شعار متحرك');
        console.log('🎮 اضغط Space للتشغيل/الإيقاف');
        console.log('🖼 اضغط P لتحميل PNG');
    </script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
14KB
Transfer Size
14KB
Content Size
125.0ms
Dom Content Loaded
208.0ms
First Paint
125.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