105 lines
4.6 KiB
HTML
105 lines
4.6 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"></div>
|
|
|
|
<div class="container">
|
|
<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">
|
|
<div class="status-indicator">
|
|
<div id="statusDot" class="dot disconnected"></div>
|
|
<span id="statusText">Disconnected</span>
|
|
</div>
|
|
<button id="connectBtn" class="primary-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="m7 7 10 10-5 5V2l5 5L7 17"></path>
|
|
</svg>
|
|
Connect to Printer
|
|
</button>
|
|
</section>
|
|
|
|
<section class="designer-section">
|
|
<h2>Design Label</h2>
|
|
<form id="labelForm">
|
|
<div class="form-group">
|
|
<label for="labelType">Label Type</label>
|
|
<select id="labelType">
|
|
<option value="standard">Standard Label</option>
|
|
<option value="cable">Cable Wrap (Gulung Rapat)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="itemName" id="itemNameLabel">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" id="itemPriceLabel">Price</label>
|
|
<input type="text" id="itemPrice" placeholder="e.g. Rp 50.000" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="itemNotes" id="itemNotesLabel">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" disabled>
|
|
<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 Bluetooth
|
|
</button>
|
|
</form>
|
|
</section>
|
|
|
|
<footer>
|
|
<p>Built with Vanilla JS & Web Bluetooth API</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
|
|
</html> |