114 lines
4.4 KiB
HTML
114 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Quick Payment</title>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
<link rel="icon" href="mobile-payment.png" type="image/png" />
|
||
</head>
|
||
<body>
|
||
<div class="app">
|
||
<!-- ============ FORM (left) ============ -->
|
||
<main class="panel form-panel">
|
||
<header class="panel-head">
|
||
<h1>Create Payment Link</h1>
|
||
<p class="muted">Enter the customer and order details to create a payment link.</p>
|
||
</header>
|
||
|
||
<form id="payment-form" autocomplete="off">
|
||
<div class="field-grid">
|
||
<div class="field">
|
||
<label for="customerName">Customer name <span class="req">*</span></label>
|
||
<input id="customerName" name="customerName" type="text" placeholder="John Smith" required />
|
||
</div>
|
||
<div class="field">
|
||
<label for="email">Email <span class="req">*</span></label>
|
||
<input id="email" name="email" type="email" placeholder="customer@email.com" required />
|
||
</div>
|
||
<div class="field">
|
||
<label for="phone">Phone number <span class="req">*</span></label>
|
||
<input id="phone" name="phone" type="tel" placeholder="+61 4xx xxx xxx" required />
|
||
</div>
|
||
<div class="field">
|
||
<label for="address">Address <span class="req">*</span></label>
|
||
<input id="address" name="address" type="text" placeholder="Street, suburb, city" required />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="items-section">
|
||
<div class="items-head">
|
||
<h2>Items</h2>
|
||
<button type="button" id="add-row" class="btn btn-ghost">+ Add row</button>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table id="items-table">
|
||
<thead>
|
||
<tr>
|
||
<th class="center">SKU <span class="req">*</span></th>
|
||
<th class="center">Name</th>
|
||
<th class="num">Price <span class="req">*</span></th>
|
||
<th class="num">Qty <span class="req">*</span></th>
|
||
<th class="center">Cond<span class="req">*</span></th>
|
||
<th class="num">Subtotal</th>
|
||
<th aria-label="Remove"></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="items-body"></tbody>
|
||
<tfoot>
|
||
<tr>
|
||
<td colspan="5" class="total-label">Total</td>
|
||
<td class="num total-value" id="grand-total">0</td>
|
||
<td></td>
|
||
</tr>
|
||
</tfoot>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="actions">
|
||
<div class="currency-field">
|
||
<label for="currency">Currency</label>
|
||
<select id="currency" name="currency">
|
||
<option value="USD">USD</option>
|
||
<option value="AUD" selected>AUD</option>
|
||
</select>
|
||
</div>
|
||
<button type="submit" id="submit-btn" class="btn btn-primary">
|
||
<span class="btn-label">Create payment link</span>
|
||
<span class="spinner" hidden></span>
|
||
</button>
|
||
</div>
|
||
|
||
<div id="result" class="result" hidden></div>
|
||
</form>
|
||
</main>
|
||
|
||
<!-- ============ HISTORY (right) ============ -->
|
||
<aside class="panel history-panel">
|
||
<header class="panel-head">
|
||
<h2>History</h2>
|
||
<button type="button" id="refresh-history" class="btn btn-ghost btn-sm">↻</button>
|
||
</header>
|
||
<div id="history-list" class="history-list">
|
||
<p class="muted empty">No payments yet.</p>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
|
||
<template id="row-template">
|
||
<tr class="item-row">
|
||
<td data-label="SKU"><input type="text" class="cell-sku" placeholder="SKU" /></td>
|
||
<td data-label="Name"><input type="text" class="cell-name" placeholder="Product name" /></td>
|
||
<td data-label="Price"><input type="number" class="cell-price num" min="0" step="1" placeholder="0" /></td>
|
||
<td data-label="Qty"><input type="number" class="cell-qty num" min="1" step="1" value="1" /></td>
|
||
<td data-label="Condition"><input type="text" class="cell-condition" placeholder="Condition" /></td>
|
||
<td data-label="Subtotal" class="num cell-subtotal">0</td>
|
||
<td><button type="button" class="btn-del" title="Remove row">×</button></td>
|
||
</tr>
|
||
</template>
|
||
|
||
<script src="app.js"></script>
|
||
</body>
|
||
</html>
|