HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
65x65
404 Bytes
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>Standard Smart Cheque with Stub</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <style>
        body { background: #e0e0e0; display: flex; flex-direction: column; align-items: center; padding: 20px; font-family: 'Segoe UI', Arial, sans-serif; }
        
        /* পূর্ণাঙ্গ চেকের মাপ (স্ট্যান্ডার্ড মাপ অনুযায়ী) */
        .cheque-book-page {
            display: flex;
            width: 1150px; /* Stub + Main Cheque */
            height: 380px;
            background: white;
            box-shadow: 0 5px 25px rgba(0,0,0,0.2);
            position: relative;
            border: 1px solid #bbb;
            overflow: hidden;
        }

        /* বাম পাশের কাউন্টার ফয়েল (Stub) */
        .stub-section {
            width: 280px;
            border-right: 1.5px dashed #888; /* ছেঁড়ার দাগ */
            padding: 20px;
            box-sizing: border-box;
            background: #fdfdfd;
            position: relative;
        }

        .stub-title { font-size: 16px; font-weight: bold; color: #007b8f; margin-bottom: 20px; text-align: center; border-bottom: 1px solid #eee; padding-bottom: 10px; }
        .stub-field { margin-bottom: 18px; border-bottom: 1px solid #ccc; }
        .stub-label { font-size: 11px; font-weight: bold; color: #555; display: block; }
        .stub-input { border: none; background: transparent; width: 100%; font-size: 14px; outline: none; padding: 2px 0; font-style: italic; }

        /* ডান পাশের মূল চেক */
        .main-cheque-section {
            flex: 1;
            padding: 0;
            display: flex;
            flex-direction: column;
            position: relative;
        }

        /* টপ সেকশন */
        .header { height: 110px; padding: 15px 30px; display: flex; justify-content: space-between; align-items: flex-start; }
        .brand-area { display: flex; align-items: center; }
        .logo-box { width: 45px; height: 35px; background: #007b8f; clip-path: polygon(0 0, 100% 50%, 0 100%, 30% 50%); margin-right: 12px; }
        .brand-text h1 { margin: 0; font-size: 28px; color: #007b8f; font-weight: bold; }
        .brand-text p { margin: 0; font-size: 10px; font-weight: bold; letter-spacing: 1px; color: #334e68; }

        .top-right-info { text-align: right; }
        .serial-input { font-size: 20px; font-weight: bold; border: none; text-align: right; outline: none; margin-bottom: 10px; width: 180px; color: #333; }
        
        /* ডেট বক্স ডিজাইন (ছবির মতো) */
        .date-container { display: flex; align-items: center; justify-content: flex-end; }
        .date-label-main { font-size: 12px; font-weight: bold; color: #007b8f; margin-right: 5px; text-decoration: underline; }
        .date-box-wrap { display: flex; flex-direction: column; align-items: center; }
        .d-box { width: 20px; height: 24px; border: 1px solid #9db1c5; text-align: center; font-size: 15px; font-weight: bold; outline: none; margin-left: -1px; }
        .d-sub { font-size: 8px; font-weight: bold; color: #777; margin-top: 2px; }

        /* মাঝখানের বডি সেকশন (টেক্সচার্ড) */
        .body-section {
            height: 190px;
            background: #e4eff5 url('https://www.transparenttextures.com/patterns/graphy-very-light.png');
            border-top: 2px solid #334e68;
            padding: 20px 30px;
            position: relative;
        }

        .row { display: flex; align-items: flex-end; margin-bottom: 22px; }
        .row label { width: 90px; font-size: 15px; color: #444; font-weight: 500; }
        .row input { flex: 1; border: none; border-bottom: 1px solid #8ba3b4; background: transparent; font-size: 18px; outline: none; padding-bottom: 3px; font-style: italic; }

        .amount-box {
            position: absolute; right: 30px; top: 35px;
            border: 1px solid #334e68; background: #fff;
            width: 190px; height: 55px; display: flex; align-items: center; padding: 0 12px;
        }
        .amount-box span { font-size: 26px; font-weight: bold; margin-right: 8px; color: #334e68; }
        .amount-input { width: 100%; border: none; font-size: 24px; font-weight: bold; outline: none; color: #334e68; }

        .footer-middle { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15px; }
        .user-info { font-weight: bold; font-size: 15px; color: #333; line-height: 1.3; }
        .otp-text { color: #007b8f; font-size: 12px; font-weight: bold; margin-top: 5px; }
        .sign-placeholder { border-top: 1px solid #334e68; width: 220px; text-align: center; font-size: 11px; padding-top: 5px; color: #444; }

        /* নিচের এমআইসিআর (MICR) অংশ */
        .micr-area {
            height: 80px; background: white; border-top: 2px solid #334e68;
            display: flex; justify-content: center; align-items: center;
            font-family: 'Courier New', Courier, monospace; font-size: 22px; letter-spacing: 10px; color: #222;
        }

        .qr-img { position: absolute; right: 30px; top: 35px; width: 65px; height: 65px; }

        .download-btn { margin-top: 20px; padding: 12px 35px; background: #007b8f; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; font-weight: bold; transition: 0.3s; }
        .download-btn:hover { background: #005f6e; }
    </style>
</head>
<body>

    <div id="full-cheque-page" class="cheque-book-page">
        
        <div class="stub-section">
            <div class="stub-title">PayAndPaid RECORD</div>
            <div class="stub-field"><span class="stub-label">DATE</span><input type="text" class="stub-input"></div>
            <div class="stub-field"><span class="stub-label">PAY TO</span><input type="text" class="stub-input"></div>
            <div class="stub-field"><span class="stub-label">THE SUM OF</span><input type="text" class="stub-input"></div>
            <div class="stub-field"><span class="stub-label">AMOUNT (TK)</span><input type="text" class="stub-input"></div>
            <div class="stub-field" style="margin-top: 30px;"><span class="stub-label">BALANCE B/F</span><input type="text" class="stub-input"></div>
            <div style="font-size: 10px; color: #999; position: absolute; bottom: 20px; width: 85%; text-align: center;">
                Serial: PP01 0598238
            </div>
        </div>

        <div class="main-cheque-section">
            <div class="header">
                <div class="brand-area">
                    <div class="logo-box"></div>
                    <div class="brand-text">
                        <h1>PayAndPaid</h1>
                        <p>SMART CHEQUE</p>
                    </div>
                </div>
                <div class="top-right-info">
                    <input type="text" class="serial-input" value="PP01 0598238">
                    <div class="date-container">
                        <span class="date-label-main">DATE:</span>
                        <div class="date-box-wrap"><input class="d-box" maxlength="1"><span class="d-sub">D</span></div>
                        <div class="date-box-wrap"><input class="d-box" maxlength="1"><span class="d-sub">D</span></div>
                        <div class="date-box-wrap"><input class="d-box" maxlength="1" style="margin-left:4px;"><span class="d-sub">M</span></div>
                        <div class="date-box-wrap"><input class="d-box" maxlength="1"><span class="d-sub">M</span></div>
                        <div class="date-box-wrap"><input class="d-box" maxlength="1" style="margin-left:4px;"><span class="d-sub">Y</span></div>
                        <div class="date-box-wrap"><input class="d-box" maxlength="1"><span class="d-sub">Y</span></div>
                        <div class="date-box-wrap"><input class="d-box" maxlength="1"><span class="d-sub">Y</span></div>
                        <div class="date-box-wrap"><input class="d-box" maxlength="1"><span class="d-sub">Y</span></div>
                    </div>
                    <img src="https://api.qrserver.com/v1/create-qr-code/?size=65x65&data=PP010598238" class="qr-img" alt="QR">
                </div>
            </div>

            <div class="body-section">
                <div class="row">
                    <label>Pay To</label>
                    <input type="text" placeholder="">
                </div>
                <div class="row" style="width: 70%;">
                    <label>The Sum of</label>
                    <input type="text" placeholder="">
                </div>

                <div class="amount-box">
                    <span>Tk</span>
                    <input type="text" class="amount-input" placeholder="">
                </div>

                <div class="footer-middle">
                    <div class="user-info">
                        MD EZAZUL HAQUE<br>
                        156 101 0098765
                        <div class="otp-text">Payable at any Branch | <b>OTP Required</b></div>
                    </div>
                    <div class="sign-placeholder">Please Sign Above This Line</div>
                </div>
            </div>

            <div class="micr-area">
                BR156101  0598238  15610100987655  11
            </div>
        </div>
    </div>

    <button class="download-btn" onclick="saveCheque()">Download Full Page (PNG)</button>

    <script>
        function saveCheque() {
            const cheque = document.getElementById('full-cheque-page');
            html2canvas(cheque, { scale: 2 }).then(canvas => {
                let link = document.createElement('a');
                link.download = 'PayAndPaid_Full_Cheque.png';
                link.href = canvas.toDataURL();
                link.click();
            });
        }
    </script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
48KB
Transfer Size
205KB
Content Size
243.0ms
Dom Content Loaded
304.0ms
First Paint
580.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