HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
518x519
2.27 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="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Funny Sticker Creator</title>
    <style>
        body {
            font-family: 'Comic Sans MS', cursive, sans-serif; /* Playful font */
            background: linear-gradient(135deg, #ffe6f7, #e6f7ff, #fff9e6); /* Pastel gradient */
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }
        h1 {
            color: #ff6b9d;
            text-shadow: 2px 2px #ffb3ba;
            margin-bottom: 20px;
        }
        .container {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            padding: 20px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            max-width: 600px;
            width: 100%;
        }
        canvas {
            border: 3px solid #ffb3ba;
            border-radius: 10px;
            background: white;
            cursor: crosshair;
        }
        .toolbar {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
        }
        button {
            background: #a8e6cf;
            border: none;
            border-radius: 50px;
            padding: 10px 15px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s, background 0.2s;
        }
        button:hover {
            background: #52b788;
            transform: scale(1.05);
        }
        input, select {
            padding: 8px;
            border-radius: 10px;
            border: 2px solid #ffb3ba;
            margin: 5px;
        }
        .emoji-picker {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 5px;
            margin-top: 10px;
        }
        .emoji {
            font-size: 24px;
            cursor: pointer;
            padding: 5px;
            border-radius: 5px;
            transition: background 0.2s;
        }
        .emoji:hover {
            background: #ffe6f7;
        }
    </style>
</head>
<body>
    <h1>Funny Sticker Creator</h1>
    <div class="container">
        <div class="toolbar">
            <button id="addText">Add Text</button>
            <button id="addCircle">Add Circle</button>
            <button id="addRect">Add Rectangle</button>
            <button id="addHeart">Add Heart</button>
            <button id="clear">Clear Canvas</button>
            <button id="download">Download Sticker</button>
        </div>
        <div id="textOptions" style="display: none;">
            <input type="text" id="textInput" placeholder="Enter funny text">
            <select id="fontSelect">
                <option value="Comic Sans MS">Comic Sans</option>
                <option value="Impact">Impact</option>
                <option value="Arial">Arial</option>
            </select>
            <input type="color" id="colorPicker" value="#ff6b9d">
        </div>
        <div id="emojiPicker" style="display: none;">
            <div class="emoji-picker">
                <span class="emoji" data-emoji="😂">😂</span>
                <span class="emoji" data-emoji="🤣">🤣</span>
                <span class="emoji" data-emoji="😜">😜</span>
                <span class="emoji" data-emoji="🤪">🤪</span>
                <span class="emoji" data-emoji="😎">😎</span>
                <span class="emoji" data-emoji="🐶">🐶</span>
                <span class="emoji" data-emoji="🍕">🍕</span>
                <span class="emoji" data-emoji="🚀">🚀</span>
                <span class="emoji" data-emoji="💩">💩</span>
                <span class="emoji" data-emoji="❤️">❤️</span>
            </div>
        </div>
        <canvas id="stickerCanvas" width="512" height="512"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('stickerCanvas');
        const ctx = canvas.getContext('2d');
        let isDragging = false;
        let dragIndex = -1;
        let offsetX, offsetY;
        let elements = []; // Array to store added elements

        // Add text button
        document.getElementById('addText').addEventListener('click', () => {
            document.getElementById('textOptions').style.display = 'block';
            document.getElementById('emojiPicker').style.display = 'none';
        });

        // Add text on enter
        document.getElementById('textInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                const text = document.getElementById('textInput').value;
                const font = document.getElementById('fontSelect').value;
                const color = document.getElementById('colorPicker').value;
                if (text) {
                    elements.push({ type: 'text', text, font, color, x: 100, y: 100 });
                    redraw();
                    document.getElementById('textInput').value = '';
                }
            }
        });

        // Shape buttons
        document.getElementById('addCircle').addEventListener('click', () => {
            elements.push({ type: 'circle', x: 200, y: 200, radius: 50, color: '#ff6b9d' });
            redraw();
        });

        document.getElementById('addRect').addEventListener('click', () => {
            elements.push({ type: 'rect', x: 150, y: 150, width: 100, height: 100, color: '#a8e6cf' });
            redraw();
        });

        document.getElementById('addHeart').addEventListener('click', () => {
            elements.push({ type: 'heart', x: 250, y: 250, size: 50, color: '#ffb3ba' });
            redraw();
        });

        // Emoji picker
        document.querySelectorAll('.emoji').forEach(emoji => {
            emoji.addEventListener('click', () => {
                elements.push({ type: 'emoji', emoji: emoji.dataset.emoji, x: 300, y: 300 });
                redraw();
            });
        });

        // Clear canvas
        document.getElementById('clear').addEventListener('click', () => {
            elements = [];
            redraw();
        });

        // Download
        document.getElementById('download').addEventListener('click', () => {
            const link = document.createElement('a');
            link.download = 'funny-sticker.png';
            link.href = canvas.toDataURL();
            link.click();
        });

        // Mouse events for dragging
        canvas.addEventListener('mousedown', (e) => {
            const mouseX = e.offsetX;
            const mouseY = e.offsetY;
            for (let i = elements.length - 1; i >= 0; i--) {
                const el = elements[i];
                if (isInsideElement(mouseX, mouseY, el)) {
                    isDragging = true;
                    dragIndex = i;
                    offsetX = mouseX - el.x;
                    offsetY = mouseY - el.y;
                    break;
                }
            }
        });

        canvas.addEventListener('mousemove', (e) => {
            if (isDragging) {
                elements[dragIndex].x = e.offsetX - offsetX;
                elements[dragIndex].y = e.offsetY - offsetY;
                redraw();
            }
        });

        canvas.addEventListener('mouseup', () => {
            isDragging = false;
            dragIndex = -1;
        });

        // Helper to check if mouse is inside element
        function isInsideElement(x, y, el) {
            if (el.type === 'text') {
                ctx.font = `20px ${el.font}`;
                const width = ctx.measureText(el.text).width;
                return x >= el.x && x <= el.x + width && y >= el.y - 20 && y <= el.y;
            } else if (el.type === 'circle') {
                return Math.sqrt((x - el.x) ** 2 + (y - el.y) ** 2) < el.radius;
            } else if (el.type === 'rect') {
                return x >= el.x && x <= el.x + el.width && y >= el.y && y <= el.y + el.height;
            } else if (el.type === 'heart' || el.type === 'emoji') {
                return x >= el.x && x <= el.x + 50 && y >= el.y && y <= el.y + 50;
            }
            return false;
        }

        // Redraw canvas
        function redraw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            elements.forEach(el => {
                ctx.fillStyle = el.color || 'black';
                if (el.type === 'text') {
                    ctx.font = `20px ${el.font}`;
                    ctx.fillText(el.text, el.x, el.y);
                } else if (el.type === 'circle') {
                    ctx.beginPath();
                    ctx.arc(el.x, el.y, el.radius, 0, 2 * Math.PI);
                    ctx.fill();
                } else if (el.type === 'rect') {
                    ctx.fillRect(el.x, el.y, el.width, el.height);
                } else if (el.type === 'heart') {
                    drawHeart(el.x, el.y, el.size);
                } else if (el.type === 'emoji') {
                    ctx.font = '40px serif';
                    ctx.fillText(el.emoji, el.x, el.y);
                }
            });
        }

        // Draw heart shape
        function drawHeart(x, y, size) {
            ctx.beginPath();
            ctx.moveTo(x, y + size / 4);
            ctx.bezierCurveTo(x, y, x - size / 2, y, x - size / 2, y + size / 4);
            ctx.bezierCurveTo(x - size / 2, y + size / 2, x, y + size, x, y + size);
            ctx.bezierCurveTo(x, y + size, x + size / 2, y + size / 2, x + size / 2, y + size / 4);
            ctx.bezierCurveTo(x + size / 2, y, x, y, x, y + size / 4);
            ctx.fill();
        }
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
10KB
Transfer Size
10KB
Content Size
101.0ms
Dom Content Loaded
200.0ms
First Paint
106.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