Untitled

avatar
unknown
plain_text
9 months ago
3.1 kB
16
Indexable
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Mock Transaction (SAMPLE)</title>
<style>
  :root{
    --blue:#213EAD; --text:#33383d; --muted:#6b6f73;
    --dotted: rgba(107,111,115,0.18); --green:#198754;
    font-family: "Helvetica Neue", Arial, sans-serif;
  }
  html,body{height:100%;margin:0;background:#f4f5f6}
  .screen{max-width:420px;margin:24px auto;background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,0.06)}
  .header{background:linear-gradient(180deg,var(--blue),#2b4ec1);color:#fff;padding:20px 16px;display:flex;align-items:center;justify-content:center;position:relative}
  .icon-left,.icon-right{position:absolute;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;opacity:0.95}
  .icon-left{left:12px}.icon-right{right:12px}
  .header h1{font-size:20px;margin:0;font-weight:600}
  .content{padding:28px 28px 60px 28px;background:#fff;position:relative}
  .row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;gap:12px}
  .label{color:var(--text);font-size:18px;font-weight:500}
  .value{color:var(--muted);font-size:20px;font-weight:600}
  .amount{color:var(--green);font-size:22px;font-weight:700}
  .divider{border-bottom:2px dotted var(--dotted);margin:6px 0 10px 0}
  .watermark{
    position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-20deg);
    font-size:26px;color:rgba(0,0,0,0.07);font-weight:800;pointer-events:none;letter-spacing:6px;
  }
  .note{font-size:12px;color:#a0a4a8;margin-top:6px}
  @media(max-width:420px){.content{padding:20px}.label{font-size:16px}.value{font-size:18px}}
</style>
</head>
<body>
  <div class="screen" role="img" aria-label="Mock transaction details sample">
    <div class="header">
      <div class="icon-left" aria-hidden="true">◀</div>
      <h1>Transaction Details</h1>
      <div class="icon-right" aria-hidden="true">✕</div>
    </div>

    <div class="content">
      <div class="watermark">SAMPLE — NOT A REAL BANK DOCUMENT</div>

      <div class="row" style="align-items:flex-end;">
        <div class="label">Transaction Amount:</div>
        <div class="amount">+ $180.00</div>
      </div>
      <div class="divider" style="margin-bottom:18px;"></div>

      <div class="row">
        <div class="label">Additional Description:</div>
        <div class="value" style="color:var(--text);font-weight:700">DIRECT DEPOSIT HR</div>
      </div>
      <div class="divider"></div>

      <div class="row">
        <div class="label">Transaction Type:</div>
        <div class="value" style="color:var(--text)">CREDIT</div>
      </div>
      <div class="divider"></div>

      <div class="row">
        <div class="label">Posted Date:</div>
        <div class="value" style="color:var(--text)">10/02/2025</div>
      </div>

      <div class="note">This is a fictional mockup for demo/design purposes only.</div>
    </div>
  </div>
</body>
</html>
Editor is loading...
Leave a Comment