HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

67x67

3.89 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>AquaLife Store</title>
<style>
body{font-family:Arial;margin:0;background:#eef6fb}
header{background:linear-gradient(90deg,#006d77,#00afb9);color:#fff;text-align:center;padding:15px}
section{padding:20px}
.grid{display:flex;flex-wrap:wrap;gap:15px;justify-content:center}
.card{background:#fff;padding:15px;border-radius:12px;width:200px;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,0.1);transition:0.3s}
.card:hover{transform:translateY(-5px)}
.card:active{transform:scale(0.95);background:#caf0f8}
.card img{width:100%;height:120px;object-fit:cover;border-radius:8px}

/* PROFILE */
.profile{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:10px}
.profile img{width:60px;height:60px;border-radius:50%;border:3px solid #fff}

button{background:#219ebc;color:#fff;border:none;padding:8px 12px;border-radius:6px;cursor:pointer;transition:0.2s}
button:hover{transform:scale(1.05)}
button:active{transform:scale(0.9);background:#0077b6}

.cart{background:#fff;padding:15px;margin-top:20px;border-radius:10px}
.qty-btn{padding:3px 8px;margin:0 3px}
input,textarea{width:100%;padding:8px;margin:5px 0;border-radius:5px;border:1px solid #ccc}
.success{background:#d4edda;color:#155724;padding:10px;margin-top:15px;border-radius:8px}
footer{background:#023047;color:#fff;text-align:center;padding:10px}
</style>
</head>
<body>

<header>
<h1>AquaLife Aquarium Shop</h1>
<p>Live Fish Online Store</p>

<div class="profile">
<img src="https://via.placeholder.com/150" alt="Profile">
<div>
<p>@your_instagram_id</p>
<button onclick="openInsta()">FOLLOW MY INSTAGRAM</button>
</div>
</div>
</header>

<section>
<h2>Fish</h2>
<div class="grid">
<div class="card">
<img src="https://images.unsplash.com/photo-1560807707-8cc77767d783">
<h3>Goldfish</h3>
<p>₹100</p>
<button onclick="addToCart('Goldfish')">Add</button>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1595433562696-1d0a8a6cb3dc">
<h3>Guppy</h3>
<p>₹50</p>
<button onclick="addToCart('Guppy')">Add</button>
</div>
<div class="card">
<img src="https://images.unsplash.com/photo-1575936123452-b67c3203c357">
<h3>Betta</h3>
<p>₹200</p>
<button onclick="addToCart('Betta')">Add</button>
</div>
</div>

<div class="cart">
<h2>Cart</h2>
<ul id="cartList"></ul>

<form name="orders" method="POST" data-netlify="true" onsubmit="handleSubmit(event)">
<input type="hidden" name="form-name" value="orders">

<h3>Customer Details</h3>
<input id="name" name="name" placeholder="Name" required>
<textarea id="address" name="address" placeholder="Address" required></textarea>
<input id="pincode" name="pincode" placeholder="Pincode (6 digits)" required>
<input id="phone" name="phone" placeholder="Phone (10 digits)" required>

<input type="hidden" id="cartData" name="cart">
<input type="hidden" id="mapLinkInput" name="location">

<button type="button" onclick="getLocation()">Get Live Location</button>
<p id="locationText"></p>

<button type="submit">Place Order</button>
</form>

<div id="successBox"></div>
</div>
</section>

<footer>
<p>© 2026 AquaLife</p>
</footer>

<script>
let cart={};
let mapLink="";

function openInsta(){
window.open("https://instagram.com/your_instagram_id","_blank");
}

function addToCart(item){
cart[item]=(cart[item]||0)+1;
displayCart();
}

function changeQty(item,change){
cart[item]+=change;
if(cart[item]<=0) delete cart[item];
displayCart();
}

function displayCart(){
let list=document.getElementById('cartList');
list.innerHTML='';
for(let item in cart){
let li=document.createElement('li');
li.innerHTML=`${item} 
<button class='qty-btn' onclick="changeQty('${item}',-1)">-</button>
${cart[item]}
<button class='qty-btn' onclick="changeQty('${item}',1)">+</button>`;
list.appendChild(li);
}
}

function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(pos=>{
let lat=pos.coords.latitude;
let lng=pos.coords.longitude;
mapLink=`https://www.google.com/maps?q=${lat},${lng}`;
document.getElementById('locationText').innerHTML=`<a href="${mapLink}" target="_blank">Open Location</a>`;
document.getElementById('mapLinkInput').value=mapLink;
});
}else{
alert('Location not supported');
}
}

function handleSubmit(e){
let name=document.getElementById('name').value.trim();
let address=document.getElementById('address').value.trim();
let phone=document.getElementById('phone').value.trim();
let pincode=document.getElementById('pincode').value.trim();

if(address.length < 15){
alert('Enter full address'); e.preventDefault(); return;
}

if(!/^\d{10}$/.test(phone)){
alert('Invalid phone'); e.preventDefault(); return;
}

if(!/^\d{6}$/.test(pincode)){
alert('Invalid pincode'); e.preventDefault(); return;
}

if(Object.keys(cart).length===0){
alert('Add fish'); e.preventDefault(); return;
}

let cartText="";
for(let item in cart){ cartText+= item+" x"+cart[item]+", "; }
document.getElementById('cartData').value=cartText;

let msg=`Order:%0AName:${name}%0AAddress:${address}%0APhone:${phone}%0APincode:${pincode}%0AFish:${cartText}%0ALocation:${mapLink}`;
window.open(`https://wa.me/919789646209?text=${msg}`,'_blank');

let box=document.getElementById('successBox');
box.innerHTML=`<div class='success'>Order Sent Successfully!</div>`;
}
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

3826KB

Transfer Size

3824KB

Content Size

58.0ms

Dom Content Loaded

136.0ms

First Paint

698.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