HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
146x19
2.36 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>AGBshop - Premium Sticker Shop</title>
    <style>
        /* [Previous styles remain the same; adding new ones below] */
        /* ... (copy all previous CSS here for completeness) ... */

        /* New Styles for Functionality */
        .search-bar {
            text-align: center;
            margin: 20px 0;
        }
        .search-bar input {
            padding: 10px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        .cart-icon {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #2e8b57;
            color: white;
            padding: 10px;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2em;
        }
        .cart-modal, .product-modal, .login-modal, .checkout-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        .modal-content {
            background: white;
            padding: 20px;
            border-radius: 10px;
            max-width: 500px;
            width: 90%;
            max-height: 80%;
            overflow-y: auto;
        }
        .modal-content h3 {
            margin-bottom: 15px;
        }
        .cart-item {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
        }
        .quantity {
            display: flex;
            align-items: center;
        }
        .quantity button {
            background: #2e8b57;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        .wishlist {
            margin: 20px 0;
            text-align: center;
        }
        .wishlist-item {
            background: #f9f9f9;
            padding: 10px;
            margin: 5px;
            border-radius: 5px;
            display: inline-block;
        }
        .contact {
            margin: 40px 0;
            text-align: center;
        }
        .contact form {
            max-width: 400px;
            margin: 0 auto;
        }
        .contact input, .contact textarea {
            width: 100%;
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        /* Mobile adjustments */
        @media (max-width: 768px) {
            .search-bar input {
                width: 80%;
            }
            .cart-icon {
                top: 10px;
                right: 10px;
            }
        }
    </style>
</head>
<body>
    <header>
        <div class="logo">AGBshop</div>
        <nav>
            <a href="#home">Home</a>
            <a href="#collections">Collections</a>
            <a href="#best-stickers">Best Stickers</a>
            <a href="#bundles">Bundles</a>
            <a href="#contact">Contact</a>
            <a href="#" onclick="openLoginModal()">Login</a>
        </nav>
        <div class="cart-icon" onclick="openCartModal()">🛒 <span id="cart-count">0</span></div>
    </header>

    <div class="container">
        <!-- Search Bar -->
        <div class="search-bar">
            <input type="text" id="search-input" placeholder="Search stickers (e.g., Holographic)">
            <button onclick="filterCollections()">Search</button>
        </div>

        <!-- Hero Section -->
        <section class="hero" id="home">
            <div class="hero-content">
                <h1>Stick Your Style On</h1>
                <a href="#collections" class="btn">Shop Now</a>
            </div>
        </section>

        <!-- Featured Collections -->
        <section class="collections" id="collections">
            <div class="collection-item" data-type="Holographic" onclick="openProductModal('Holographic Vibes', 'Eye-catching holographic stickers.', 'https://via.placeholder.com/250x200?text=Holographic+Sticker', 3.99)">
                <img src="https://via.placeholder.com/250x200?text=Holographic+Sticker" alt="Holographic Sticker">
                <h3>Holographic Vibes</h3>
                <p>$3.99</p>
                <button class="btn" onclick="addToCart('Holographic Vibes', 3.99)">Add to Cart</button>
            </div>
            <!-- Repeat for other items with similar onclick for modals/carts -->
            <div class="collection-item" data-type="Matte" onclick="openProductModal('Matte Essentials', 'Subtle matte vinyl stickers.', 'https://via.placeholder.com/250x200?text=Matte+Sticker', 2.99)">
                <img src="https://via.placeholder.com/250x200?text=Matte+Sticker" alt="Matte Sticker">
                <h3>Matte Essentials</h3>
                <p>$2.99</p>
                <button class="btn" onclick="addToCart('Matte Essentials', 2.99)">Add to Cart</button>
            </div>
            <div class="collection-item" data-type="Die-Cut" onclick="openProductModal('Die-Cut Designs', 'Custom-shaped die-cut stickers.', 'https://via.placeholder.com/250x200?text=Die-Cut+Sticker', 4.49)">
                <img src="https://via.placeholder.com/250x200?text=Die-Cut+Sticker" alt="Die-Cut Sticker">
                <h3>Die-Cut Designs</h3>
                <p>$4.49</p>
                <button class="btn" onclick="addToCart('Die-Cut Designs', 4.49)">Add to Cart</button>
            </div>
            <div class="collection-item" data-type="Glow" onclick="openProductModal('Glow-in-the-Dark', 'Fun glow stickers.', 'https://via.placeholder.com/250x200?text=Glow+Sticker', 3.49)">
                <img src="https://via.placeholder.com/250x200?text=Glow+Sticker" alt="Glow Sticker">
                <h3>Glow-in-the-Dark</h3>
                <p>$3.49</p>
                <button class="btn" onclick="addToCart('Glow-in-the-Dark', 3.49)">Add to Cart</button>
            </div>
        </section>

        <!-- Best Sticker Types (unchanged, but added onclick for modals) -->
        <section class="best-stickers" id="best-stickers">
            <h2>Best Sticker Types for 2026</h2>
            <p>Discover the top sticker trends...</p>
            <div class="best-stickers-grid">
                <div class="sticker-type">
                    <img src="https://via.placeholder.com/300x150?text=Holographic+Stickers" alt="Holographic Stickers">
                    <h3>Holographic Stickers</h3>
                    <p>...</p>
                    <div class="pros"><strong>Pros:</strong>...</div>
                    <div class="tips"><strong>Tips:</strong>...</div>
                    <a href="#" class="btn" onclick="openProductModal('Holographic Stickers', 'Detailed description.', 'https://via.placeholder.com/300x150?text=Holographic+Stickers', 3.99)">Learn More</a>
                </div>
                <!-- Repeat for other types -->
            </div>
        </section>

        <!-- Bundle Builder -->
        <section class="bundle-builder" id="bundles">
            <h2>Sticker Bundle Builder</h2>
            <p>Mix & Match for 20% Off</p>
            <div class="bundle-options">
                <div class="bundle-option" onclick="addToBundle('Holographic')">Holographic</div>
                <div class="bundle-option" onclick="addToBundle('Matte')">Matte</div>
                <div class="bundle-option" onclick="addToBundle('Die-Cut')">Die-Cut</div>
            </div>
            <p id="bundle-list">Your Bundle: None selected</p>
            <button class="btn" onclick="addBundleToCart()">Add Bundle to Cart</button>
        </section>

        <!-- Wishlist -->
        <section class="wishlist">
            <h2>Your Wishlist</h2>
            <div id="wishlist-items"></div>
        </section>

        <!-- Contact -->
        <section class="contact" id="contact">
            <h2>Contact Us</h2>
            <form onsubmit="sendMessage(event)">
                <input type="text" id="name" placeholder="Your Name" required>
                <input type="email" id="email" placeholder="Your Email" required>
                <textarea id="message" placeholder="Your Message" required></textarea>
                <button type="submit" class="btn">Send</button>
            </form>
        </section>

        <!-- Trending Now (unchanged) -->
    </div>

    <!-- Modals -->
    <div class="cart-modal" id="cart-modal">
        <div class="modal-content">
            <h3>Your Cart</h3>
            <div id="cart-items"></div>
            <button class="btn" onclick="checkout()">Checkout</button>
            <button onclick="closeModal('cart-modal')">Close</button>
        </div>
    </div>

    <div class="product-modal" id="product-modal">
        <div class="modal-content">
            <h3 id="product-title"></h3>
            <img id="product-image" src="" alt="Product" style="width:100%; margin:10px 0;">
            <p id="product-desc"></p>
            <p id="product-price"></p>
            <button class="btn" onclick="addToCartFromModal()">Add to Cart</button>
            <button class="btn" onclick="addToWishlist()">Add to Wishlist</button>
            <button onclick="closeModal('product-modal')">Close</button>
        </div>
    </div>

    <div class="login-modal" id="login-modal">
        <div class="modal-content">
            <h3>Login</h3>
            <input type="text" id="username" placeholder="Username">
            <input type="password" id="password" placeholder="Password">
            <button class="btn" onclick="login()">Login</button>
            <button onclick="closeModal('login-modal')">Close</button>
        </div>
    </div>

    <div class="checkout-modal" id="checkout-modal">
        <div class="modal-content">
            <h3>Checkout</h3>
            <form onsubmit="processCheckout(event)">
                <input type="text" placeholder="Name" required>
                <input type="text" placeholder="Address" required>
                <input type="text" placeholder="Card Number (Mock)" required>
                <button type="submit" class="btn">Complete Purchase</button>
            </form>
            <button onclick="closeModal('checkout-modal')">Close</button>
        </div>
    </div>

    <footer>
        <p>&copy; 2023 AGBshop. All rights reserved.</p>
        <a href="#">Privacy Policy</a> | <a href="#">Shipping Info</a>
        <a href="#">Instagram</a> | <a href="#">TikTok</a>
    </footer>

    <script>
        // Global variables
        let cart = JSON.parse(localStorage.getItem('cart')) || [];
        let wishlist = JSON.parse(localStorage.getItem('wishlist')) || [];
        let bundle = [];
        let currentProduct = {};

        // Update cart count
        function updateCartCount() {
            document.getElementById('cart-count').textContent = cart.length;
        }

        // Add to cart
        function addToCart(name, price) {
            cart.push({ name, price, quantity: 1 });
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartCount();
            alert('Added to cart!');
        }

        // Open cart modal
        function openCartModal() {
            const cartItems = document.getElementById('cart-items');
            cartItems.innerHTML = '';
            cart.forEach((item, index) => {
                cartItems.innerHTML += `
                    <div class="cart-item">
                        <span>${item.name} - $${item.price}</span>
                        <div class="quantity">
                            <button onclick="changeQuantity(${index}, -1)">-</button>
                            <span>${item.quantity}</span>
                            <button onclick="changeQuantity(${index}, 1)">+</button>
                        </div>
                    </div>
                `;
            });
            document.getElementById('cart-modal').style.display = 'flex';
        }

        // Change quantity
        function changeQuantity(index, delta) {
            cart[index].quantity += delta;
            if (cart[index].quantity <= 0) cart.splice(index, 1);
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartCount();
            openCartModal();
        }

        // Checkout
        function checkout() {
            document.getElementById('checkout-modal').style.display = 'flex';
        }

        // Process checkout
        function processCheckout(event) {
            event.preventDefault();
            alert('Purchase successful! (Mock)');
            cart = [];
            localStorage.setItem('cart', JSON.stringify(cart));
            updateCartCount();
            closeModal('checkout-modal');
            closeModal('cart-modal');
        }

        // Product modal
        function openProductModal(title, desc, img, price) {
            currentProduct = { title, desc, img, price };
            document.getElementById('product-title').textContent = title;
            document.getElementById('product-desc').textContent = desc;
            document.getElementById('product-image').src = img;
            document.getElementById('product-price').textContent = `$${price}`;
            document.getElementById('product-modal').style.display = 'flex';
        }

        // Add from modal
        function addToCartFromModal() {
            addToCart(currentProduct.title, currentProduct.price);
            closeModal('product-modal');
        }

        // Wishlist
        function addToWishlist() {
            wishlist.push(currentProduct);
            localStorage.setItem('wishlist', JSON.stringify(wishlist));
            updateWishlist();
            closeModal('product-modal');
        }

        function updateWishlist() {
            const wishlistItems = document.getElementById('wishlist-items');
            wishlistItems.innerHTML = '';
            wishlist.forEach(item => {
                wishlistItems.innerHTML += `<div class="wishlist-item">${item.title} - $${item.price}</div>`;
            });
        }

        // Bundle
        function addToBundle(type) {
            bundle.push(type);
            document.getElementById('bundle-list').textContent = 'Your Bundle: ' + bundle.join(', ');
        }

        function addBundleToCart() {
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
15KB
Transfer Size
15KB
Content Size
115.0ms
Dom Content Loaded
196.0ms
First Paint
233.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