HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
300x150
493 Bytes
Share this result

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

Open in browser
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>MECHA vs BUGS</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@500;700&display=swap');

        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            font-family: 'Rajdhani', sans-serif;
            touch-action: none;
        }

        canvas {
            display: block;
        }

        .hud-text {
            font-family: 'Orbitron', sans-serif;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.7);
        }

        .mecha-card {
            background: linear-gradient(135deg, rgba(10, 20, 40, 0.9), rgba(5, 10, 20, 0.95));
            border: 1px solid rgba(0, 255, 255, 0.3);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.1);
            transition: all 0.3s ease;
        }

        .mecha-card:hover {
            transform: translateY(-5px);
            border-color: rgba(0, 255, 255, 0.8);
            box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
        }

        .mecha-card.selected {
            border-color: #00ff00;
            box-shadow: 0 0 30px rgba(0, 255, 0, 0.4);
        }

        .scanline {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.2));
            background-size: 100% 4px;
            pointer-events: none;
            z-index: 50;
            opacity: 0.3;
        }

        .vignette {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, transparent 60%, rgba(0,0,0,0.8) 100%);
            pointer-events: none;
            z-index: 40;
        }

        /* Joystick Styles */
        #joystick-zone {
            position: absolute;
            bottom: 40px;
            left: 40px;
            width: 120px;
            height: 120px;
            z-index: 30;
        }

        .joystick-base {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            position: relative;
        }

        .joystick-knob {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.8), rgba(0, 150, 200, 0.6));
            position: absolute;
            topystick-zone {
            position: absolute;
            bottom: 40px;
            left: 40px;
            width: 120px;
            height: 120px;
            z-index: 30;
        }

        .joystick-base {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            position: relative;
        }

        .joystick-knob {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(0, 255, 255, 0.8), rgba(0, 150, 200, 0.6));
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
            cursor: pointer;
        }

        /* Attack Buttons */
        .attack-btn {
            background: rgba(255, 50, 50, 0.2);
            border: 2px solid rgba(255, 50, 50, 0.5);
            backdrop-filter: blur(5px);
            transition: all 0.1s;
        }

        .attack-btn:active {
            transform: scale(0.95);
            background: rgba(255, 50, 50, 0.5);
            box-shadow: 0 0 30px rgba(255, 50, 50, 0.8);
        }

        .attack-btn.cooldown {
            opacity: 0.5;
            pointer-events: none;
        }

        .bar-container {
            background: rgba(0, 0, 0, 0.6);
            border: 1px solid rgba(255, 255, 255, 0.2);
            position: relative;
            overflow: hidden;
        }

        .bar-fill {
            transition: width 0.2s ease-out;
        }

        .glitch {
            animation: glitch 3s infinite;
        }

        @keyframes glitch {
            0%, 100% { transform: translate(0); }
            20% { transform: translate(-2px, 2px); }
            40% { transform: translate(-2px, -2px); }
            60% { transform: translate(2px, 2px); }
            80% { transform: translate(2px, -2px); }
        }

        .hidden { display: none !important; }
    </style>
</head>
<body class="bg-black text-white select-none">

    <!-- Visual Effects Overlays -->
    <div class="scanline"></div>
    <div class="vignette"></div>

    <!-- Game Canvas -->
    <canvas id="gameCanvas"></canvas>

    <!-- HUD: Top Left Status -->
    <div id="hud" class="absolute top-4 left-4 z-30 hidden">
        <div class="flex flex-col gap-2 w-64">
            <!-- Health Bar -->
            <div class="flex items-center gap-2">
                <span class="text-red-500 font-bold w-16 text-sm">HP</span>
                <div class="bar-container flex-1 h-4 rounded skew-x-[-10deg]">
                    <div id="hp-bar" class="bar-fill h-full bg-gradient-to-r from-red-600 to-red-400 w-full"></div>
                </div>
                <span id="hp-text" class="text-xs w-12 text-right">100%</span>
            </div>
            
            <!-- Shield Bar -->
            <div class="flex items-center gap-2">
                <span class="text-cyan-400 font-bold w-16 text-sm">SHIELD</span>
                <div class="bar-container flex-1 h-4 rounded skew-x-[-10deg]">
                    <div id="shield-bar" class="bar-fill h-full bg-gradient-to-r from-cyan-600 to-cyan-400 w-full"></div>
                </div>
                <span id="shield-text" class="text-xs w-12 text-right">100%</span>
            </div>

            <!-- Wave Info -->
            <div class="mt-2 text-cyan-300 text-sm hud-text">
                WAVE <span id="wave-num" class="text-white text-lg">1</span>
            </div>
            <div class="text-gray-400 text-xs">
                BUGS ELIMINATED: <span id="score" class="text-white">0</span>
            </div>
        </div>
    </div>

    <!-- Joystick (Bottom Left) -->
    <div id="joystick-zone" class="hidden">
        <div class="joystick-base" id="joystick-base">
            <div class="joystick-knob" id="joystick-knob"></div>
        </div>
    </div>

    <!-- Attack Buttons (Bottom Right) -->
    <div id="attack-controls" class="absolute bottom-8 right-8 z-30 flex flex-col gap-3 hidden">
        <button id="atk-1" class="attack-btn w-16 h-16 rounded-full flex items-center justify-center text-xs font-bold text-white">
            ATK 1
        </button>
        <button id="atk-2" class="attack-btn w-16 h-16 rounded-full flex items-center justify-center text-xs font-bold text-white border-yellow-500 bg-yellow-500/20">
            ATK 2
        </button>
        <button id="atk-3" class="attack-btn w-16 h-16 rounded-full flex items-center justify-center text-xs font-bold text-white border-purple-500 bg-purple-500/20">
            ATK 3
        </button>
    </div>

    <!-- Mecha Selection Panel (Center) -->
    <div id="selection-panel" class="absolute inset-0 z-50 flex items-center justify-center bg-black/90 backdrop-blur-sm">
        <div class="max-w-4xl w-full p-8">
            <h1 class="text-5xl font-bold text-center mb-2 hud-text text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600 glitch">
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
133KB
Transfer Size
410KB
Content Size
323.0ms
Dom Content Loaded
532.0ms
First Paint
323.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