HTML ad tag preview - Powered by Ad Reform

Live Preview

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

340x340

30 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="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pembayaran</title>

<style>
* {
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

body {
    margin: 0;
    background: #0e0e12;
    color: #fff;
}

.wrapper {
    max-width: 420px;
    margin: auto;
    padding: 14px;
}

/* TITLE */
.title {
    text-align: center;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}

/* CARD */
.card {
    background: linear-gradient(145deg, #5b4a7a, #7c66b3);
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}

/* TIMER */
.timer {
    display: flex;
    justify-content: space-between;
    background: rgba(0,0,0,0.35);
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

/* QRIS HEADER */
.qris-header {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 14px;
    opacity: 0.9;
}

/* MERCHANT */
.merchant {
    text-align: center;
    margin-top: 8px;
    font-weight: bold;
    font-size: 16px;
}

.trx {
    text-align: center;
    font-size: 12px;
    opacity: 0.8;
}

/* QR */
.qr-wrapper {
    background: #fff;
    border-radius: 12px;
    padding: 10px;
    margin: 14px 0;
}

.qr-wrapper img {
    width: 100%;
    border-radius: 8px;
}

/* BUTTON */
.actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

/* AMOUNT */
.amount {
    margin-top: 8px;
    font-size: 20px;
    font-weight: bold;
}

/* SECTION */
.section {
    background: #17171d;
    margin-top: 14px;
    padding: 14px;
    border-radius: 14px;
    font-size: 14px;
}

.section-title {
    font-weight: bold;
    margin-bottom: 8px;
}

.row {
    display: flex;
    justify-content: space-between;
    margin: 5px 0;
}

ol {
    padding-left: 18px;
    line-height: 1.6;
}
</style>
</head>

<body>

<div class="wrapper">

    <div class="title">Pembayaran</div>

    <div class="card">

        <!-- TIMER -->
        <div class="timer">
            <span>⏱ Batas Pembayaran</span>
            <span id="countdown">--:--</span>
        </div>

        <!-- QRIS HEADER -->
        <div class="qris-header">
            <span>QRIS</span>
            <span>GPN</span>
        </div>

        <!-- MERCHANT -->
        <div class="merchant">SPARKLINGfood</div>
        <div class="trx">KAJTOP-20260413115954</div>

        <!-- QR IMAGE (DARI LINK KAMU) -->
        <div class="qr-wrapper">
            <img src="https://i.ibb.co.com/BMNyvP9/QR-KAJTOP-20260413115954442409-1.png" alt="QRIS">
        </div>

        <!-- ACTION -->
        <div class="actions">
            <button class="btn" onclick="refreshQR()">⟳</button>
            <button class="btn" onclick="downloadQR()">⬇</button>
        </div>

        <!-- TOTAL -->
        <div class="amount" id="total">Rp0</div>

    </div>

    <!-- DETAIL -->
    <div class="section">
        <div class="section-title">Keterangan</div>
        <div class="row">
            <span>Kredit yang Ditambah</span>
            <span id="kredit"></span>
        </div>
        <div class="row">
            <span>Biaya Kredit</span>
            <span id="kreditBiaya"></span>
        </div>
        <div class="row">
            <span>Biaya Admin Bank</span>
            <span id="admin"></span>
        </div>
    </div>

    <!-- INSTRUCTION -->
    <div class="section">
        <div class="section-title">Petunjuk Pembayaran</div>
        <ol>
            <li>Buka aplikasi yang mendukung QRIS</li>
            <li>Pilih menu scan QR</li>
            <li>Scan kode di atas</li>
            <li>Pastikan nominal sesuai</li>
            <li>Konfirmasi pembayaran</li>
        </ol>
    </div>

</div>

<script>
// =====================
// DATA
// =====================
let kredit = 100000;
let biaya = 100000;
let admin = 3000;
let total = biaya + admin;

// =====================
// FORMAT RUPIAH
// =====================
function rp(x){
    return "Rp" + x.toLocaleString("id-ID");
}

// SET DATA
document.getElementById("kredit").innerText = rp(kredit);
document.getElementById("kreditBiaya").innerText = rp(biaya);
document.getElementById("admin").innerText = rp(admin);
document.getElementById("total").innerText = rp(total);

// =====================
// COUNTDOWN 24 JAM
// =====================
let end = new Date().getTime() + (24*60*60*1000);

setInterval(()=>{
    let now = new Date().getTime();
    let sisa = end - now;

    if(sisa <= 0){
        document.getElementById("countdown").innerText = "EXPIRED";
        return;
    }

    let h = Math.floor(sisa/(1000*60*60));
    let m = Math.floor((sisa%(1000*60*60))/(1000*60));
    let s = Math.floor((sisa%(1000*60))/1000);

    document.getElementById("countdown").innerText =
        `${h}j ${m}m ${s}d`;

},1000);

// =====================
// BUTTON ACTION
// =====================
function refreshQR(){
    location.reload(); // nanti bisa diganti API
}

function downloadQR(){
    let link = document.createElement('a');
    link.href = "https://i.ibb.co.com/BMNyvP9/QR-KAJTOP-20260413115954442409-1.png";
    link.download = 'qris.png';
    link.click();
}
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

15KB

Transfer Size

15KB

Content Size

190.0ms

Dom Content Loaded

208.0ms

First Paint

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