#I LOVE YOU EVERDAY#

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Saraswati Housing Company - Payment Voucher</title>
  <style>
    * {
      box-sizing: border-box
    }

body {
      margin: 0;
      padding: 30px;
      background: #eef1f5;
      font-family: Arial;
      color: #222
    }

.voucher {
      max-width: 900px;
      margin: auto;
      background: white;
      padding: 40px;
      box-shadow: 0 3px 18px #0002
    }

header {
      display: flex;
      justify-content: space-between;
      border-bottom: 3px solid #244a73;
      padding-bottom: 15px
    }

.brand {
      display: flex;
      gap: 15px;
      align-items: center
    }

.logo {
      width: 105px
    }

.company h1 {
      margin: 0;
      color: #173b63;
      font-size: 25px
    }

.company p {
      margin: 5px 0;
      font-size: 12px;
      color: #666
    }

.title {
      text-align: right
    }

.title h2 {
      margin: 0;
      color: #244a73;
      font-size: 28px
    }

.title p {
      font-size: 12px
    }

.box {
      border: 1px solid #d5dbe2;
      border-radius: 5px;
      padding: 14px;
      margin-top: 20px
    }

.box h3 {
      margin: 0 0 12px;
      color: #244a73;
      font-size: 13px;
      text-transform: uppercase
    }

.grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 15px
    }

.field {
      font-size: 13px;
      margin: 9px 0
    }

.label {
      font-weight: bold;
      display: inline-block;
      min-width: 145px
    }

.edit {
      outline: 0
    }

.edit:focus {
      background: #fff4b8
    }

.amount {
      border: 2px solid #244a73;
      text-align: center;
      margin-top: 20px;
      padding: 18px
    }

.amount small {
      color: #666
    }

.amount strong {
      display: block;
      color: #173b63;
      font-size: 28px;
      margin: 8px
    }

.amount span {
      font-size: 12px
    }

table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px
    }

th {
      background: #244a73;
      color: #fff;
      padding: 10px;
      font-size: 12px;
      text-align: left
    }

td {
      border: 1px solid #d5dbe2;
      padding: 10px;
      font-size: 12px
    }

.money {
      text-align: right
    }

.center {
      text-align: center
    }

.note {
      margin-top: 22px;
      border-top: 1px solid #d5dbe2;
      padding-top: 14px
    }

.note h3 {
      color: #244a73;
      font-size: 13px
    }

.note p {
      font-size: 11px;
      line-height: 1.5
    }

.sign {
      display: flex;
      justify-content: space-between;
      margin-top: 65px
    }

.sig {
      width: 180px;
      text-align: center;
      border-top: 1px solid #555;
      padding-top: 7px;
      font-size: 11px
    }

.footer {
      text-align: center;
      color: #777;
      font-size: 10px;
      margin-top: 28px
    }

.actions {
      position: fixed;
      right: 15px;
      top: 15px
    }

button {
      border: 0;
      padding: 9px 14px;
      background: #244a73;
      color: #fff;
      border-radius: 4px;
      font-weight: bold
    }

button+button {
      background: #555
    }

@media print {
      body {
        padding: 0;
        background: white
      }

.voucher {
        box-shadow: none
      }

.actions {
        display: none
      }
    }

@media(max-width:700px) {
      .voucher {
        padding: 20px
      }

.grid,
      header {
        display: block
      }

.title {
        text-align: left;
        margin-top: 15px
      }
    }
  </style>
</head>

<body>
  <div class="actions"><button onclick="print()">Print / Save PDF</button>
    <button onclick="window.close()">Close Window</button></div>
  <div class="voucher">
    <header>
      <div class="brand"><img class="logo"
          src="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAAA8AAD/4QNvaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjMtYzAxMSA2Ni4xNDU2NjEsIDIwMTIvMDIvMDYtMTQ6NTY6MjcgICAgICAgICI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NUNENDMxNkY5RERERjAxMTkyOTA4RjgyNUYyNTAzMTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MjQzMzg1RTREREE0MTFGMEIwMzZEOTlGRTNDODZDODEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MjQzMzg1RTNEREE0MTFGMEIwMzZEOTlGRTNDODZDODEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4NkU1MEFFN0REQTMxMUYwQUFCMDlGNDUwRDQ0OEE3RiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4NkU1MEFFOEREQTMxMUYwQUFCMDlGNDUwRDQ0OEE3RiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6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">
        <div class="company">
          <h1>Saraswati Housing Company</h1>
          <p class="edit" contenteditable="true">Address: Enter company address
            here</p>
          <p class="edit" contenteditable="true">Phone: __________________ |
            Email: __________________</p>
          <p class="edit" contenteditable="true">GSTIN / Registration No.:
            __________________</p>
        </div>
      </div>
      <div class="title">
        <h2>PAYMENT VOUCHER</h2>
        <p><b>Voucher No:</b> <span class="edit"
            contenteditable="true">PV-0001</span></p>
        <p><b>Date:</b> <span class="edit"
            contenteditable="true">DD/MM/YYYY</span></p>
      </div>
    </header>

<div class="box">
      <h3>Payment Received From</h3>
      <div class="grid">
        <div>
          <div class="field"><span class="label">Name:</span><span class="edit"
              contenteditable="true">Customer / Allottee Name</span></div>
          <div class="field"><span class="label">Address:</span><span
              class="edit" contenteditable="true">Customer Address</span></div>
          <div class="field"><span class="label">Phone:</span><span class="edit"
              contenteditable="true">Customer Phone</span></div>
        </div>
        <div>
          <div class="field"><span class="label">Project:</span><span
              class="edit" contenteditable="true">Project Name</span></div>
          <div class="field"><span class="label">Flat / Unit No.:</span><span
              class="edit" contenteditable="true">Flat / Unit</span></div>
          <div class="field"><span class="label">Agreement No.:</span><span
              class="edit" contenteditable="true">Agreement No.</span></div>
        </div>
      </div>
    </div>

<div class="amount"><small>AMOUNT RECEIVED</small><strong class="edit"
        contenteditable="true">₹ 0.00</strong><span><b>Amount in Words:</b>
        <span class="edit" contenteditable="true">Rupees
          __________________________________ Only</span></span></div>

<table>
      <tr>
        <th>Payment Type</th>
        <th>Payment Mode</th>
        <th>Reference / Cheque / UTR No.</th>
        <th>Payment Date</th>
      </tr>
      <tr>
        <td class="edit" contenteditable="true">Advance / Installment</td>
        <td class="edit" contenteditable="true">Cash / Cheque / Bank / UPI</td>
        <td class="edit" contenteditable="true">Reference Number</td>
        <td class="edit" contenteditable="true">DD/MM/YYYY</td>
      </tr>
    </table>

<div class="box">
      <h3>Payment Allocation</h3>
      <table style="margin-top:0">
        <tr>
          <th>#</th>
          <th>Against</th>
          <th>Amount</th>
          <th>Remarks</th>
        </tr>
        <tr>
          <td class="center">1</td>
          <td class="edit" contenteditable="true">Booking Advance</td>
          <td class="money edit" contenteditable="true">₹ 0.00</td>
          <td class="edit" contenteditable="true">—</td>
        </tr>
        <tr>
          <td class="center">2</td>
          <td class="edit" contenteditable="true">Installment No. / Demand</td>
          <td class="money edit" contenteditable="true">₹ 0.00</td>
          <td class="edit" contenteditable="true">—</td>
        </tr>
        <tr>
          <td class="center">3</td>
          <td class="edit" contenteditable="true">Other Charges</td>
          <td class="money edit" contenteditable="true">₹ 0.00</td>
          <td class="edit" contenteditable="true">—</td>
        </tr>
        <tr>
          <td colspan="2" class="money"><b>Total</b></td>
          <td class="money edit" contenteditable="true"><b>₹ 0.00</b></td>
          <td></td>
        </tr>
      </table>
    </div>

<div class="grid">
      <div class="box">
        <h3>Account / Balance</h3>
        <div class="field"><span class="label">Previous Balance:</span><span
            class="edit" contenteditable="true">₹ 0.00</span></div>
        <div class="field"><span class="label">Current Payment:</span><span
            class="edit" contenteditable="true">₹ 0.00</span></div>
        <div class="field"><span class="label">Balance After
            Payment:</span><span class="edit" contenteditable="true">₹
            0.00</span></div>
      </div>
      <div class="box">
        <h3>Received By</h3>
        <div class="field"><span class="label">Employee:</span><span
            class="edit" contenteditable="true">________________</span></div>
        <div class="field"><span class="label">Department:</span><span
            class="edit" contenteditable="true">________________</span></div>
      </div>
    </div>

<div class="note">
      <h3>Notes / Remarks</h3>
      <p class="edit" contenteditable="true">Payment received towards the
        property / housing agreement mentioned above.</p>
      <p class="edit" contenteditable="true">This voucher is subject to
        realization where applicable.</p>
      <p class="edit" contenteditable="true">Customer is requested to preserve
        this voucher for future reference.</p>
    </div>
    <div class="sign">
      <div class="sig">Customer / Allottee Signature</div>
      <div class="sig">Prepared By</div>
      <div class="sig">Authorized Signatory</div>
    </div>
    <div class="footer">Saraswati Housing Company • This is a computer-generated
      payment voucher.</div>
  </div>
</body>

</html>