fmard/pdf-api
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <title>Receipt - {{ receipt_number | default('RCP-0001') }}</title>6 <style>7 * { margin: 0; padding: 0; box-sizing: border-box; }8 body {9 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;10 padding: 40px;11 color: #1f2937;12 font-size: 13px;13 line-height: 1.5;14 max-width: 400px;15 margin: 0 auto;16 }17 .store-header {18 text-align: center;19 padding-bottom: 20px;20 border-bottom: 2px dashed #d1d5db;21 margin-bottom: 16px;22 }23 .store-header h1 {24 font-size: 20px;25 color: #4f46e5;26 margin-bottom: 4px;27 }28 .store-header p { font-size: 11px; color: #6b7280; }29 .receipt-meta {30 display: flex;31 justify-content: space-between;32 padding: 12px 0;33 border-bottom: 1px solid #e5e7eb;34 margin-bottom: 16px;35 font-size: 12px;36 }37 .receipt-meta .left { text-align: left; }38 .receipt-meta .right { text-align: right; }39 .receipt-meta span { display: block; color: #6b7280; }40 .receipt-meta strong { color: #1f2937; }41 .items-section { margin-bottom: 16px; }42 .item-row {43 display: flex;44 justify-content: space-between;45 padding: 8px 0;46 border-bottom: 1px dotted #e5e7eb;47 }48 .item-row .item-name { flex: 1; }49 .item-row .item-qty { width: 60px; text-align: center; color: #6b7280; }50 .item-row .item-price { width: 80px; text-align: right; font-weight: 500; }51 .divider-dashed {52 border: none;53 border-top: 2px dashed #d1d5db;54 margin: 16px 0;55 }56 .totals { margin-bottom: 16px; }57 .total-row {58 display: flex;59 justify-content: space-between;60 padding: 4px 0;61 font-size: 12px;62 }63 .total-row.grand {64 font-size: 18px;65 font-weight: 700;66 color: #4f46e5;67 padding: 10px 0;68 border-top: 2px solid #4f46e5;69 margin-top: 8px;70 }71 .payment-info {72 background: #f9fafb;73 padding: 12px;74 border-radius: 6px;75 margin-bottom: 16px;76 }77 .payment-info .row {78 display: flex;79 justify-content: space-between;80 font-size: 12px;81 padding: 3px 0;82 }83 .payment-info .row span:first-child { color: #6b7280; }84 .footer {85 text-align: center;86 padding-top: 16px;87 border-top: 2px dashed #d1d5db;88 }89 .footer p { font-size: 11px; color: #6b7280; margin-bottom: 4px; }90 .footer .thank-you {91 font-size: 14px;92 font-weight: 600;93 color: #4f46e5;94 margin-top: 8px;95 }96 </style>97</head>98<body>99 <div class="store-header">100 <h1>{{ store_name | default('Store Name') }}</h1>101 <p>{{ store_address | default('123 Main Street, City') }}</p>102 <p>Tel: {{ store_phone | default('+62 812 3456 7890') }}</p>103 </div>104 105 <div class="receipt-meta">106 <div class="left">107 <span>Receipt #</span>108 <strong>{{ receipt_number | default('RCP-0001') }}</strong>109 </div>110 <div class="right">111 <span>{{ date | default('2025-01-01') }}</span>112 <strong>{{ time | default('14:30') }}</strong>113 </div>114 </div>115 116 <div class="items-section">117 {% set ns = namespace(subtotal=0) %}118 {% for item in items | default([{'name': 'Sample Item', 'qty': 1, 'price': 25000}]) %}119 {% set line_total = item.qty * item.price %}120 {% set ns.subtotal = ns.subtotal + line_total %}121 <div class="item-row">122 <span class="item-name">{{ item.name }}</span>123 <span class="item-qty">x{{ item.qty }}</span>124 <span class="item-price">{{ "{:,.0f}".format(line_total) }}</span>125 </div>126 {% endfor %}127 </div>128 129 <hr class="divider-dashed">130 131 <div class="totals">132 <div class="total-row">133 <span>Subtotal</span>134 <span>{{ "{:,.0f}".format(ns.subtotal) }}</span>135 </div>136 <div class="total-row grand">137 <span>Total</span>138 <span>{{ "{:,.0f}".format(ns.subtotal) }}</span>139 </div>140 </div>141 142 <div class="payment-info">143 <div class="row">144 <span>Payment Method</span>145 <span>{{ payment_method | default('Cash') }}</span>146 </div>147 <div class="row">148 <span>Amount Paid</span>149 <span>{{ "{:,.0f}".format(amount_paid | default(ns.subtotal)) }}</span>150 </div>151 <div class="row">152 <span>Change</span>153 <span>{{ "{:,.0f}".format((amount_paid | default(ns.subtotal)) - ns.subtotal) }}</span>154 </div>155 {% if cashier | default('') %}156 <div class="row">157 <span>Cashier</span>158 <span>{{ cashier }}</span>159 </div>160 {% endif %}161 </div>162 163 {% if notes | default('') %}164 <div style="text-align: center; margin-bottom: 12px;">165 <p style="font-size: 11px; color: #6b7280;">{{ notes }}</p>166 </div>167 {% endif %}168 169 <div class="footer">170 <p>Thank you for your purchase!</p>171 <p class="thank-you">{{ store_name | default('Store Name') }}</p>172 </div>173</body>174</html>