HTML ad tag preview - Powered by Ad Reform

Live Preview

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

415x415

16.3 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">
<title>Aesthetic Budget Dashboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<style>
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f5f5f7;
    padding: 20px;
}

/* HEADER */
.header {
    background: linear-gradient(135deg, #8E8DFF, #C6A4FF);
    color: white;
    padding: 24px;
    border-radius: 24px;
    font-size: 26px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* GRID */
.grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

/* CARD GLASS */
.card {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(14px);
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

/* BIG CARD */
.big {
    grid-column: span 2;
}

.card h3 {
    font-size: 15px;
    color: #666;
    margin-bottom: 12px;
}

/* METRIC */
.metric {
    font-size: 28px;
    font-weight: 600;
}

/* BADGE */
.badge {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
}

.income { background:#E6F4EA; color:#2E7D32;}
.expenses { background:#FDECEA; color:#C62828;}
.bills { background:#E8F0FE; color:#1565C0;}
.savings { background:#F3E5F5; color:#6A1B9A;}

/* TABLE */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

td {
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
}

tr:last-child td {
    border-bottom: none;
}

.green { color:#2E7D32; font-weight:500;}
.red { color:#C62828; font-weight:500;}

</style>
</head>

<body>

<div class="header">November — Budget Dashboard</div>

<div class="grid">

<!-- PIE -->
<div class="card">
    <h3>Cash Allocation</h3>
    <canvas id="pieChart"></canvas>
</div>

<!-- LEFT -->
<div class="card">
    <h3>Left to Spend</h3>
    <div class="metric" id="left"></div>
</div>

<!-- SAVING -->
<div class="card">
    <h3>Saving Rate</h3>
    <div class="metric" id="rate"></div>
</div>

<!-- BAR -->
<div class="card big">
    <h3>Budget vs Actual</h3>
    <canvas id="barChart"></canvas>
</div>

<!-- TABLE -->
<div class="card big">
    <h3>Transactions</h3>
    <table id="table"></table>
</div>

</div>

<script>

// DATA
const data = [
{d:"2 Nov",c:"Income",s:"Food Cart",a:210},
{d:"5 Nov",c:"Expenses",s:"Food",a:50},
{d:"3 Nov",c:"Bills",s:"Water",a:325.69},
{d:"7 Nov",c:"Bills",s:"Electricity",a:30},
{d:"7 Nov",c:"Income",s:"Salary",a:210},
{d:"19 Nov",c:"Bills",s:"Rent",a:580},
{d:"11 Nov",c:"Expenses",s:"Side Income",a:210},
{d:"6 Nov",c:"Bills",s:"Internet",a:300},
{d:"14 Nov",c:"Expenses",s:"Food",a:47.9},
{d:"14 Nov",c:"Bills",s:"Personal",a:382},
{d:"19 Nov",c:"Savings",s:"Car",a:100},
{d:"20 Nov",c:"Bills",s:"Gym",a:100},
];

let income=0,expenses=0,bills=0,savings=0;

data.forEach(x=>{
 if(x.c=="Income") income+=x.a;
 if(x.c=="Expenses") expenses+=x.a;
 if(x.c=="Bills") bills+=x.a;
 if(x.c=="Savings") savings+=x.a;
});

const left = income-(expenses+bills+savings);
const rate = ((savings/income)*100).toFixed(0);

// TEXT
document.getElementById("left").innerText = left.toFixed(2);
document.getElementById("rate").innerText = rate+"%";

// TABLE
const table = document.getElementById("table");
data.forEach(x=>{
 table.innerHTML += `
 <tr>
   <td>${x.d}</td>
   <td><span class="badge ${x.c.toLowerCase()}">${x.c}</span></td>
   <td>${x.s}</td>
   <td class="${x.c=='Income'?'green':'red'}">${x.a}</td>
 </tr>`;
});

// PIE
new Chart(pieChart,{
 type:'doughnut',
 data:{
  labels:["Expenses","Bills","Savings"],
  datasets:[{
    data:[expenses,bills,savings],
    backgroundColor:["#FF6B6B","#4D8BFF","#B388FF"]
  }]
 },
 options:{
  plugins:{legend:{display:false}},
  cutout:"70%"
 }
});

// BAR
new Chart(barChart,{
 type:'bar',
 data:{
  labels:["Income","Expenses","Bills","Savings"],
  datasets:[{
   data:[income,expenses,bills,savings],
   borderRadius:8
  }]
 },
 options:{
  plugins:{legend:{display:false}},
 }
});

</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

75KB

Transfer Size

208KB

Content Size

251.0ms

Dom Content Loaded

432.0ms

First Paint

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