Skip to content

Commit 6db5bdf

Browse files
TobiasMue91TobiasMue91
committed
- test
1 parent 500ddd0 commit 6db5bdf

File tree

1 file changed

+103
-0
lines changed

1 file changed

+103
-0
lines changed

‎tools/label_editor.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏷️</text></svg>">
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7+
<meta name="description" content="Create and print simple 9mm labels online.">
8+
<title>9mm Label Printer</title>
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
</head>
11+
<body class="bg-gray-100 text-gray-800 font-sans">
12+
<div class="container mx-auto px-4 py-8 max-w-2xl">
13+
<h1 class="text-3xl font-bold text-center mb-6">9mm Label Printer</h1>
14+
<div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
15+
<div class="mb-4">
16+
<label class="block text-sm font-bold mb-2" for="labelText">Label Text:</label>
17+
<textarea id="labelText" class="w-full py-2 px-3 border rounded" rows="2"></textarea>
18+
</div>
19+
<div class="flex flex-wrap justify-center gap-2 mb-4">
20+
<button id="fontSizeInc" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Increase Font</button>
21+
<button id="fontSizeDec" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">Decrease Font</button>
22+
<button id="toggleBold" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">Toggle Bold</button>
23+
</div>
24+
<div class="mb-4">
25+
<label class="block text-sm font-bold mb-2" for="labelPreview">Label Preview:</label>
26+
<div id="labelPreviewContainer" class="border bg-white p-2 flex items-center justify-center" style="height: 36px;">
27+
<div id="labelPreview" class="overflow-hidden text-black" style="width: 100%; height: 9mm;"></div>
28+
</div>
29+
</div>
30+
<div class="flex justify-between items-center">
31+
<button id="printLabel" class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded">Print Label</button>
32+
<span id="charCount" class="text-sm">Characters: 0</span>
33+
</div>
34+
</div>
35+
</div>
36+
<script>
37+
const labelText = document.getElementById('labelText');
38+
const labelPreview = document.getElementById('labelPreview');
39+
const fontSizeInc = document.getElementById('fontSizeInc');
40+
const fontSizeDec = document.getElementById('fontSizeDec');
41+
const toggleBold = document.getElementById('toggleBold');
42+
const printLabel = document.getElementById('printLabel');
43+
const charCount = document.getElementById('charCount');
44+
45+
let fontSize = 12;
46+
let isBold = false;
47+
48+
function updatePreview() {
49+
labelPreview.style.fontSize = `${fontSize}px`;
50+
labelPreview.style.fontWeight = isBold ? 'bold' : 'normal';
51+
labelPreview.textContent = labelText.value;
52+
charCount.textContent = `Characters: ${labelText.value.length}`;
53+
}
54+
55+
labelText.addEventListener('input', updatePreview);
56+
fontSizeInc.addEventListener('click', () => { fontSize = Math.min(fontSize + 1, 20); updatePreview(); });
57+
fontSizeDec.addEventListener('click', () => { fontSize = Math.max(fontSize - 1, 6); updatePreview(); });
58+
toggleBold.addEventListener('click', () => { isBold = !isBold; updatePreview(); });
59+
60+
printLabel.addEventListener('click', () => {
61+
const printWindow = window.open('', '_blank');
62+
printWindow.document.write(`
63+
<html>
64+
<head>
65+
<title>Print 9mm Label</title>
66+
<style>
67+
@page { size: auto; margin: 0; }
68+
body { margin: 0; }
69+
#printContent {
70+
width: 100%;
71+
height: 9mm;
72+
font-family: Arial, sans-serif;
73+
font-size: ${fontSize}px;
74+
font-weight: ${isBold ? 'bold' : 'normal'};
75+
display: flex;
76+
align-items: center;
77+
overflow: hidden;
78+
white-space: nowrap;
79+
}
80+
</style>
81+
</head>
82+
<body>
83+
<div id="printContent">${labelText.value}</div>
84+
<script>
85+
window.onload = function() {
86+
window.print();
87+
window.onafterprint = function() {
88+
window.close();
89+
};
90+
};
91+
<\/script>
92+
</body>
93+
</html>
94+
`);
95+
printWindow.document.close();
96+
});
97+
98+
// Initialize preview
99+
updatePreview();
100+
</script>
101+
<script src="../sidebar.js"></script>
102+
</body>
103+
</html>

0 commit comments

Comments
 (0)