92 lines
4.0 KiB
HTML
92 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Bluetooth Label Printer App</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="index.css">
|
|
<link rel="icon" type="image/svg+xml"
|
|
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖨️</text></svg>">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-background" id="appBackground"></div>
|
|
|
|
<div class="container" id="appContainer">
|
|
<header class="app-header">
|
|
<div class="icon-container">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="6 9 6 2 18 2 18 9"></polyline>
|
|
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"></path>
|
|
<rect x="6" y="14" width="12" height="8"></rect>
|
|
</svg>
|
|
</div>
|
|
<h1>Smart Label Printer</h1>
|
|
<p>58mm Thermal Bluetooth Print</p>
|
|
</header>
|
|
|
|
<section class="device-section highlight-box">
|
|
<div class="status-indicator">
|
|
<div class="dot connected"></div>
|
|
<span>Browser Print Ready</span>
|
|
</div>
|
|
<p style="font-size:0.85rem; color: #555;">Use the browser's standard Print dialog. Set Paper Size to 58mm &
|
|
Margins to None.</p>
|
|
</section>
|
|
|
|
<section class="designer-section">
|
|
<h2>Design Label</h2>
|
|
<form id="labelForm">
|
|
<div class="form-group">
|
|
<label for="itemName">Item Name</label>
|
|
<input type="text" id="itemName" placeholder="e.g. Premium Coffee Beans" required maxlength="25">
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="itemPrice">Price</label>
|
|
<input type="text" id="itemPrice" placeholder="e.g. Rp 50.000" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="itemNotes">Additional Notes (Optional)</label>
|
|
<input type="text" id="itemNotes" placeholder="e.g. 500g, Exp: 24/12/26" maxlength="32">
|
|
</div>
|
|
|
|
<div class="preview-container">
|
|
<label>Label Preview (58mm width)</label>
|
|
<div class="label-preview printable-area" id="labelPreview">
|
|
<div class="brand-header">LABEL STORE</div>
|
|
<div class="preview-name" id="previewName">Item Name</div>
|
|
<div class="divider">====================</div>
|
|
<div class="preview-price" id="previewPrice">Rp 0</div>
|
|
<div class="divider">====================</div>
|
|
<div class="preview-notes" id="previewNotes">Notes here</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit" id="printBtn" class="action-btn">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
|
|
stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M6 9V2h12v7" />
|
|
<path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2" />
|
|
<rect x="6" y="14" width="12" height="8" />
|
|
</svg>
|
|
Print via System
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>Built with Vanilla JS & Web Bluetooth API</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |