{{ message }}
Repository navigation
Expand file tree
/
Copy pathhardware-manager.html
More file actions
4255 lines (3878 loc) · 237 KB
/
Copy pathhardware-manager.html
File metadata and controls
4255 lines (3878 loc) · 237 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hardware Manager</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 35px 40px;
text-align: center;
}
.header h1 {
font-size: 36px;
margin-bottom: 10px;
font-weight: 700;
}
.header p {
opacity: 0.95;
font-size: 17px;
font-weight: 400;
}
/* Responsive Tabs */
.tabs {
display: flex;
flex-wrap: wrap;
background: white;
border-bottom: 3px solid #e9ecef;
gap: 0;
padding: 0;
}
.tab {
flex: 1 1 auto;
min-width: 180px;
padding: 18px 25px;
text-align: center;
cursor: pointer;
background: #f8f9fa;
border: none;
border-bottom: 3px solid transparent;
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
color: #6c757d;
position: relative;
}
.tab:hover:not(.tab-disabled) {
background: rgba(102,126,234,.08);
border-bottom-color: #667eea;
color: #667eea;
}
.tab.active {
background: white;
color: #667eea;
border-bottom-color: #667eea;
}
.tab-active-indicator {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 3px;
background: linear-gradient(90deg, #667eea, #764ba2);
border-radius: 3px 3px 0 0;
}
.tab-disabled {
opacity: 0.5;
cursor: not-allowed;
background: #e9ecef;
}
.tab-disabled:hover {
transform: none;
}
/* Content Area */
.content {
padding: 40px;
min-height: 500px;
background: #fafbfc;
}
.tab-content {
display: none;
animation: fadeIn 0.3s ease-out;
}
.tab-content.active {
display: block;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(15px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.btn-loading {
opacity: 0.8;
cursor: not-allowed;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
/* Form Elements */
.form-group {
margin-bottom: 24px;
}
.form-group label {
display: block;
margin-bottom: 10px;
font-weight: 600;
font-size: 15px;
color: #374151;
}
select, input[type="text"], textarea {
width: 100%;
padding: 14px 16px;
border: 2px solid #e5e7eb;
border-radius: 12px;
font-size: 15px;
background: white;
transition: all 0.3s;
color: #374151;
}
select:focus, input:focus, textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102,126,234,.1);
}
/* Buttons */
.btn {
padding: 14px 28px;
border: none;
border-radius: 12px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
transition: all 0.3s;
letter-spacing: 0.3px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
}
.btn-primary:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102,126,234,.4);
}
.btn-success {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
color: white;
}
.btn-success:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(40,167,69,.4);
}
.btn-danger {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
color: white;
}
.btn-danger:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(220,53,69,.4);
}
/* Status Messages */
.status {
padding: 16px;
margin: 15px 0;
border-radius: 8px;
text-align: center;
font-weight: 600;
}
.status-connected {
background: #d4edda;
border: 2px solid #28a745;
color: #155724;
}
.hidden {
display: none;
}
/* Lists */
.printer-list {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
margin: 20px 0;
}
.printer-item {
padding: 18px;
background: white;
border: 2px solid #e9ecef;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.printer-item:hover {
border-color: #506fe4;
box-shadow: 0 2px 8px rgba(80, 111, 228, 0.15);
transform: translateY(-2px);
}
.printer-item.selected {
border-color: #28a745;
background: #e8f5e9;
box-shadow: 0 2px 8px rgba(40, 167, 69, 0.15);
}
.printer-item.default {
border-color: #506fe4;
background: rgba(80, 111, 228, 0.1);
}
.printer-name {
font-weight: 700;
font-size: 16px;
color: #333;
margin-bottom: 6px;
}
.printer-info {
font-size: 13px;
color: #666;
}
.badge {
display: inline-block;
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 700;
margin-left: 8px;
text-transform: uppercase;
}
.badge.default {
background: #506fe4;
color: white;
}
/* Responsive Design */
@media (max-width: 768px) {
.tabs {
flex-direction: column;
}
.tab {
min-width: 100%;
}
.content {
padding: 20px;
}
.printer-list {
grid-template-columns: 1fr;
}
}
.live-data {
font-size: 28px;
font-weight: bold;
color: #506fe4;
margin: 20px 0;
padding: 30px;
background: rgba(80, 111, 228, 0.1);
border: 2px solid #506fe4;
border-radius: 8px;
text-align: center;
}
.port-info {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 8px;
padding: 16px;
margin: 15px 0;
}
h2 {
color: #506fe4;
margin: 25px 0 15px;
font-size: 22px;
font-weight: 600;
}
</style>
<!-- The shop's theme, applied over this window's own styles. See window-theme.js. -->
<link rel="stylesheet" href="window-theme.css">
<script src="window-theme.js"></script>
<link rel="stylesheet" href="desktop-design.css">
<link rel="stylesheet" href="hardware-workspace.css">
</head>
<body class="desktop-window" data-desktop-window="hardware">
<div class="container">
<div class="header">
<h1>🔧 Hardware Manager</h1>
<p>Connections, test printing and diagnostics for this computer.</p>
</div>
<div class="tabs">
<button class="tab active" onclick="switchTab('receipt')">🧾 Receipt Printer</button>
<button class="tab" onclick="switchTab('cash')">💰 Cash Drawer</button>
<button class="tab" onclick="switchTab('weight')">⚖️ Weight Machine</button>
<!-- Only a shop running table service has anything to print a KOT
for; the dashboard mirrors the setting into preferences. -->
<button class="tab" id="kotTabButton" onclick="switchTab('kot')" style="display:none;">Kitchen Printing</button>
<button class="tab" onclick="switchTab('screen')" style="display:none;">📺 Kitchen Display</button>
<button class="tab" onclick="switchTab('sound')" style="display:none;">🔔 Kitchen Sound</button>
<button class="tab" onclick="switchTab('mobile')">📱 Mobile Devices</button>
<button class="tab" onclick="switchTab('scanner')">🔎 Barcode Scanner</button>
</div>
<div class="content">
<!-- Cash Drawer Tab (now default) -->
<!--
Receipt printing lives here rather than in Settings because it
describes this machine, not the shop. Two counters have different
printers attached and often different paper: a shop-wide setting
would have one till overwriting the other's.
Everything about what the receipt SAYS - header, footer, logo,
tax lines - stays in Settings, because that is a shop decision.
-->
<div id="receiptTab" class="tab-content active">
<nav class="printer-nav" role="tablist" aria-label="Receipt printer settings"><button type="button" id="printer-nav-0" role="tab" aria-controls="printer-panel-0" aria-selected="true" tabindex="0" onclick="showPrinterPanel(0)">Printers</button>
<button type="button" id="printer-nav-1" role="tab" aria-controls="printer-panel-1" aria-selected="false" tabindex="-1" onclick="showPrinterPanel(1)">Remote printing</button>
<button type="button" id="printer-nav-2" role="tab" aria-controls="printer-panel-2" aria-selected="false" tabindex="-1" onclick="showPrinterPanel(2)">Diagnostics</button>
<button type="button" id="printer-nav-3" role="tab" aria-controls="printer-panel-3" aria-selected="false" tabindex="-1" onclick="showPrinterPanel(3)">Help</button></nav>
<div id="rpStatus" role="status" style="display:none;"></div>
<section id="printer-panel-0" class="printer-panel" role="tabpanel" aria-labelledby="printer-nav-0">
<div class="printer-card">
<div class="printer-heading"><div><h2>Receipt printers</h2><p class="printer-note">Choose printers, paper size and copies for this computer.</p></div>
<button type="button" onclick="rpLoadPrinters()">Reload printers</button></div>
<div id="rpPrinterList"><p class="printer-note">Loading printers…</p></div>
<div class="printer-actions"><button class="btn btn-primary" onclick="rpSave()">Save settings</button>
<button id="rpTestBtn" onclick="rpTestPrint()">Print test receipt</button>
<span id="rpSummary" role="status" class="printer-note"></span></div>
</div>
<div class="printer-health-strip"><span id="printerHealthSummary" role="status">Checking print service…</span><button type="button" onclick="showPrinterPanel(2, true)">View diagnostics</button></div>
<div class="printer-card">
<div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;">
<div style="font-weight:700;color:#2c3e50;">Captain bill requests</div>
<span id="bpPrinted" style="font-size:13px;color:#6b7280;"></span>
</div>
<div id="bpRows" style="font-size:14px;color:#2c3e50;"></div>
<div id="bpTrouble" style="display:none;margin-top:14px;padding:12px 14px;border-radius:10px;
background:#fef3f2;border:1px solid #fecdca;color:#b42318;font-size:13px;"></div>
<!--
THE BILLS NOBODY CAN ACCOUNT FOR.
The queue parks a job here when the till that took it went
quiet, or when it failed every attempt: it may be on paper,
it may not, and only somebody standing at the printer knows.
The queue has asked that question since it was written and
there was nowhere at all to answer it.
-->
<div id="bpWaiting" style="display:none;margin-top:14px;padding:12px 14px;border-radius:10px;
background:#fffaeb;border:1px solid #fedf89;color:#93370d;font-size:13px;">
<div style="font-weight:700;margin-bottom:8px;">Confirm delivery</div>
<div id="bpWaitingRows"></div>
</div>
</div>
<div class="printer-card">
<div class="printer-heading">
<div style="font-size:15px;font-weight:700;color:#374151;">🧾 Receipt & Bill Prints</div>
<div style="display:flex;gap:8px;align-items:center;">
<input type="date" id="rcptLogDate" aria-label="Receipt log date" style="padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;">
<button onclick="rcptLoadLogs()" class="btn btn-primary" style="padding:8px 16px;font-size:13px;">🔍 Load</button>
</div>
</div>
<div style="background:#fff;border:2px solid #e9ecef;border-radius:12px;overflow:auto;">
<div id="rcptLogsEmpty" style="padding:32px;text-align:center;color:#9ca3af;font-size:14px;">Select a date and click Load to view receipt prints.</div>
<table id="rcptLogsTable" style="display:none;width:100%;border-collapse:collapse;font-size:13px;">
<thead>
<tr style="background:#f8f9fa;border-bottom:2px solid #e9ecef;">
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Time</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Bill</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Document</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">From</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Printers</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Speed</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Result</th>
</tr>
</thead>
<tbody id="rcptLogsBody"></tbody>
</table>
</div>
</div>
</section>
<section id="printer-panel-1" class="printer-panel" role="tabpanel" aria-labelledby="printer-nav-1" hidden><div class="printer-card">
<div style="font-weight:700;color:#2c3e50;margin-bottom:14px;">Remote printing</div>
<div style="font-size:13px;color:#9ca3af;margin-bottom:14px;">For captain devices using mobile data or another network. Devices on shop Wi-Fi connect directly.</div>
<label style="display:flex;gap:10px;align-items:flex-start;cursor:pointer;">
<input type="checkbox" id="cpEnabled" style="margin-top:3px;width:18px;height:18px;">
<span style="font-size:14px;color:#2c3e50;">Enable printing over the internet<span style="display:block;font-size:12px;color:#9ca3af;margin-top:3px;">Enable on one receipt-printing computer per shop.</span>
</span>
</label>
<div style="margin-top:14px;">
<label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;" for="cpApiUrl">
Your shop's internet address
</label>
<input type="text" id="cpApiUrl" placeholder="https://yourshop.posnic.io/api" style="width:100%;padding:12px 14px;border:2px solid #e9ecef;border-radius:10px;font-size:14px;">
<div style="font-size:12px;color:#9ca3af;margin-top:6px;">Use the same shop address as the captain app.</div>
</div>
<!--
THIS COMPUTER'S KEY, FOR PASTING INTO THE SHOP.
Every Posnic installation makes its own printing key the
first time it starts, and a shop's internet server is an
installation: it has a different one. So a till asking
its shop over the internet is turned away every time,
and a refusal used to look exactly like "nothing to
print".
Somebody has to introduce the two, and the key travels
in THIS direction on purpose: a key that starts life on
this machine and is stored by the shop only as a digest
never puts a server secret into a web page.
-->
<div style="margin-top:14px;">
<label style="display:block;font-size:13px;color:#6b7280;margin-bottom:6px;" for="cpTillKey">
This computer's printing key
</label>
<div style="display:flex;gap:10px;align-items:center;">
<input type="text" id="cpTillKey" readonly="" style="flex:1 1 auto;min-width:0;padding:12px 14px;border:2px solid #e9ecef;
border-radius:10px;font-size:13px;font-family:ui-monospace,Consolas,monospace;
background:#f9fafb;color:#374151;">
<button class="btn btn-secondary" id="cpCopyKey" onclick="cpCopyKey()" style="padding:12px 18px;border-radius:10px;white-space:nowrap;">Copy</button>
</div>
<div style="font-size:12px;color:#9ca3af;margin-top:6px;">In your online shop’s Settings → Bill printing, allow this computer’s key.</div>
</div>
<div style="display:flex;gap:12px;align-items:center;margin-top:14px;">
<button class="btn btn-secondary" onclick="cpSave()" style="padding:12px 20px;border-radius:10px;">💾 Save</button>
<span id="cpSummary" style="font-size:13px;color:#6b7280;"></span>
</div>
</div></section>
<section id="printer-panel-2" class="printer-panel" role="tabpanel" aria-labelledby="printer-nav-2" hidden>
<div class="printer-card" id="printerEnvironment"><h2>Computer readiness</h2><p class="printer-note">Read-only checks. No printer data is sent.</p><div id="printerEnvironmentStatus" role="status"></div><div id="printerEnvironmentChecks"></div><ol id="printerEnvironmentSteps"></ol></div>
<div id="windowsRecovery" style="display:none;">
<div class="printer-card"><h2>Print jobs & recovery</h2><p class="printer-note">“Sent to printer” confirms software delivery. Check the paper to confirm printing.</p><div id="wrMessage" role="status"></div><div id="wrJobs" role="status"></div></div>
<div class="printer-card"><h2>Windows printer binding</h2><p class="printer-note">Changes apply to new jobs. Pending jobs keep their original printer and port.</p>
<div class="printer-fields"><label for="wrPrinter">Printer queue<select id="wrPrinter" onchange="wrSelection()"></select></label><label for="wrPort">Expected port<input id="wrPort" placeholder="Detected on first use" maxlength="128"></label><label class="printer-wide" for="wrPnp">Physical USB instance ID (optional)<input id="wrPnp" placeholder="USBPRINT\…" maxlength="512"></label></div>
<label class="printer-check"><input type="checkbox" id="wrInitialize" checked> Initialize ESC/POS before sending</label>
<label class="printer-check"><input type="checkbox" id="wrKeepAlive" checked> Send idle ESC/POS initialization</label>
<p class="printer-note">Supported printers only. Sends a reset after 30 seconds idle, without feed or cut. See Help before enabling.</p>
<button type="button" onclick="wrSave()">Save recovery settings</button>
</div>
<div class="printer-card"><h2>Technical details</h2><h3>Windows queues</h3><pre id="wrHealth"></pre><h3>Idle initialization</h3><pre id="wrKeepAliveStatus"></pre><h3>Last helper diagnostic</h3><pre id="wrDiagnostic"></pre></div>
</div>
</section>
<section id="printer-panel-3" class="printer-panel" role="tabpanel" aria-labelledby="printer-nav-3" hidden>
<div class="printer-card printer-guide"><h2>Printing stops after idle</h2><p class="printer-note">Change one setting at a time and record its original value. Check the queue before sending another copy.</p><ol id="printerEnvironmentSteps"></ol></div>
<div class="printer-card printer-guide"><h2>Power & connections</h2><div id="wrPower"></div><p>For a dedicated counter, keep the computer plugged in and prevent sleep or hibernate while serving. Battery settings affect battery life. Posnic does not change these Windows settings.</p><p>If USB disconnects, inspect the affected USB hub in Device Manager → Properties → Power Management. Temporarily test without “Allow the computer to turn off this device to save power”, where available. Restore it if there is no improvement.</p><p>For extender connections, test with a short direct USB cable across the usual idle period. Initialization cannot restore a device Windows cannot see.</p></div>
<div class="printer-card printer-guide"><h2>About idle initialization</h2><p>ESC @ resets printer state; it is not a guaranteed wake command. Enable only for compatible ESC/POS printers. It pauses during app printing or disconnection. Do not run a separate keep-alive helper alongside it.</p><p class="printer-note">Checks refresh while this page is open. System results may be cached for one minute. Windows recovery controls are available on Windows only.</p></div>
</section>
</div>
<div id="cashTab" class="tab-content">
<!-- Status bar -->
<div id="cdStatus" style="display:none;padding:16px 20px;border-radius:12px;margin-bottom:20px;font-weight:600;font-size:15px;box-shadow:0 2px 8px rgba(0,0,0,0.1);"></div>
<!-- Printer method config -->
<div id="cdPrinterConfig" style="background:#fff;padding:24px;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,0.08);margin-bottom:20px;">
<div class="form-group">
<label style="font-size:16px;font-weight:700;color:#2c3e50;display:block;margin-bottom:12px;">🖨️ Receipt Printer (cash drawer connected to it):</label>
<div style="display:flex;gap:12px;">
<select id="cdPrinterSelect" style="flex:1;padding:14px 16px;border:2px solid #e9ecef;border-radius:10px;font-size:15px;background:#fff;color:#2c3e50;transition:border-color .2s;">
<option value="">-- Load printers --</option>
</select>
<button onclick="cdLoadPrinters()" class="btn btn-primary" style="padding:14px 24px;border-radius:10px;font-weight:600;white-space:nowrap;">🔍 Load</button>
</div>
</div>
</div>
<!-- Pin & auto-open -->
<div style="background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:24px;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,0.08);margin-bottom:20px;">
<div style="display:flex;align-items:center;gap:32px;flex-wrap:wrap;">
<div style="flex:1;min-width:280px;">
<label style="font-size:16px;font-weight:700;color:#2c3e50;display:block;margin-bottom:12px;">📍 Trigger Pin:</label>
<div style="display:flex;gap:20px;">
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;background:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:all .2s;">
<input type="radio" name="cdPin" value="0" checked style="width:18px;height:18px;"> Pin 2 (RJ11)
</label>
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;padding:10px 16px;background:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.08);transition:all .2s;">
<input type="radio" name="cdPin" value="1" style="width:18px;height:18px;"> Pin 5
</label>
</div>
</div>
<div style="display:flex;align-items:center;gap:10px;padding:12px 20px;background:#fff;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,0.08);">
<input type="checkbox" id="cdAutoOpen" style="width:20px;height:20px;">
<label for="cdAutoOpen" style="cursor:pointer;font-weight:600;color:#2c3e50;font-size:15px;">Auto-open on every sale</label>
</div>
</div>
</div>
<!-- Big Open Drawer button -->
<div style="text-align:center;margin:32px 0;">
<button id="cdOpenBtn" onclick="cdOpen()"
style="background:linear-gradient(135deg,#00c853 0%,#69f0ae 100%);color:#fff;border:none;border-radius:20px;padding:28px 80px;font-size:26px;font-weight:800;cursor:pointer;box-shadow:0 8px 30px rgba(0,200,83,0.4);transition:all .3s;letter-spacing:1px;text-transform:uppercase;">
🗃️ Open Cash Drawer
</button>
<div style="margin-top:12px;color:#6c757d;font-size:14px;">Click to test cash drawer connection</div>
</div>
<!-- Save config -->
<div style="border-top:2px solid #e9ecef;padding-top:20px;display:flex;justify-content:flex-end;">
<button onclick="cdSaveConfig()" style="background:linear-gradient(135deg,#007bff 0%,#00d4ff 100%);color:#fff;border:none;border-radius:10px;padding:14px 32px;font-size:16px;font-weight:700;cursor:pointer;box-shadow:0 4px 16px rgba(0,123,255,0.3);transition:all .2s;">💾 Save Settings</button>
</div>
</div>
<!-- Weight Machine Tab -->
<div id="weightTab" class="tab-content">
<div id="portSelection">
<div class="form-group">
<label>📡 Available Serial Ports:</label>
<div style="display:flex;gap:12px;align-items:center;margin-top:6px;">
<button id="listPortsBtn" class="btn btn-primary" style="flex:1;">🔍 Scan for Devices</button>
<label style="display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:500;">
<input type="checkbox" id="enableSimulation" style="width:18px;height:18px;">
<span>🎮 Simulation Mode (no hardware)</span>
</label>
</div>
</div>
<div id="portsDropdownSection" class="form-group hidden">
<label for="portsDropdown">Choose your weight machine:</label>
<select id="portsDropdown">
<option value="">Select a device...</option>
</select>
<div class="port-info" id="selectedPortInfo" style="display: none;"></div>
</div>
<button id="connectToPortBtn" class="btn btn-success hidden" disabled>🔌 Connect to Device</button>
</div>
<div id="connectedState" class="hidden">
<div class="status status-connected">
<div>✅ Connected to Weight Machine</div>
<div id="connectedPortDisplay" style="font-size: 14px; margin-top: 8px;"></div>
</div>
<div id="liveWeightDisplay" class="live-data">
<div style="font-size: 18px; margin-bottom: 12px;">Current Weight:</div>
<div id="weightValue">---.-- kg</div>
<div id="lastUpdate" style="font-size: 13px; margin-top: 12px; opacity: 0.8;"></div>
</div>
<button id="disconnectBtn" class="btn btn-danger">❌ Disconnect</button>
</div>
</div>
<!-- Kitchen Printing Tab -->
<div id="kotTab" class="tab-content">
<div id="kotStatusBar" style="display:none;padding:14px 18px;border-radius:12px;margin-bottom:20px;font-weight:600;font-size:15px;"></div>
<!-- Connected banner -->
<div id="kotConnectedBanner" style="display:none;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;padding:16px 22px;border-radius:14px;margin-bottom:20px;display:none;">
<div style="font-size:17px;font-weight:700;">✅ Kitchen Printing, Active</div>
<div id="kotBannerInfo" style="font-size:13px;margin-top:6px;opacity:.9;"></div>
</div>
<!--
WHAT THE NEW QUEUE HAS BEEN SEEING, while printing nothing.
The kitchen still prints through the old path. Beside it a
queue records what IT believes should print, so the two can
be compared before anything is cut over - and that
comparison had no way out of the database until now. This
panel is the evidence the cutover turns on, and until it
shows a week of agreement the cutover should not happen.
-->
<div id="kotShadowCard" style="display:none;background:#fff;padding:22px 26px;border-radius:16px;
box-shadow:0 4px 16px rgba(0,0,0,0.08);margin-bottom:20px;">
<div style="font-weight:700;color:#2c3e50;margin-bottom:4px;">🔍 Checking the new kitchen queue</div>
<div style="font-size:12.5px;color:#9ca3af;margin-bottom:14px;">
It watches and prints nothing. Your kitchen is still printing the way it always has.
</div>
<div id="kotShadowBody" style="font-size:14px;color:#2c3e50;"></div>
</div>
<!-- Setup card -->
<div id="kotSetupCard" style="background:#fff;padding:26px;border-radius:16px;box-shadow:0 4px 16px rgba(0,0,0,0.08);margin-bottom:20px;">
<div class="form-group">
<label style="font-size:15px;font-weight:700;color:#2c3e50;">🌐 API URL:</label>
<!-- Filled in from the running app. It was typed here as
localhost:5555, which stopped being true when the port
began being derived per installation - and a kitchen
printer that silently stops printing is not noticed
until service. Still editable, because a dedicated
kitchen PC may poll a till on another machine. -->
<input type="text" id="kotApiUrl" placeholder="filled in automatically"
style="margin-top:8px;padding:12px 14px;border:2px solid #e5e7eb;border-radius:10px;font-size:14px;width:100%;">
<div style="font-size:12.5px;color:#9ca3af;margin-top:6px;">
Set automatically. Change it only if this computer prints tickets for a
till running on another machine.
</div>
</div>
<div class="form-group">
<label style="font-size:15px;font-weight:700;color:#2c3e50;">🏪 Branch:</label>
<select id="kotBranchSelect"
style="margin-top:8px;padding:12px 14px;border:2px solid #e5e7eb;border-radius:10px;font-size:14px;width:100%;"></select>
<!-- Kept for the case the list cannot be read (a till still being set
up has no database yet). Hidden whenever branches are known, so
nobody is asked to type an ObjectId by hand. -->
<input type="text" id="kotBranchId" placeholder="Enter Branch ID"
style="display:none;margin-top:8px;padding:12px 14px;border:2px solid #e5e7eb;border-radius:10px;font-size:14px;width:100%;">
<div id="kotBranchHint" style="margin-top:6px;font-size:12px;color:#6b7280;"></div>
</div>
<div class="form-group">
<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
<label style="font-size:15px;font-weight:700;color:#2c3e50;margin:0;">🖨️ KOT Printer(s):</label>
<button onclick="kotLoadPrinters()" class="btn btn-primary" style="padding:8px 16px;font-size:13px;">🔍 Load Printers</button>
</div>
<div id="kotPrinterList"
style="border:2px solid #e5e7eb;border-radius:10px;background:#fafafa;min-height:60px;max-height:200px;overflow-y:auto;padding:6px 4px;">
<div style="padding:14px;color:#9ca3af;font-size:13px;text-align:center;">Click "Load Printers" to list available printers.</div>
</div>
<div id="kotPrinterNote" style="margin-top:8px;padding:10px 14px;border-radius:8px;background:#fff3cd;border:1px solid #ffc107;font-size:12px;color:#856404;display:none;">
🔒 Printer selection is locked while printing is running. Click <strong>Pause printing</strong> to change printer settings.
</div>
</div>
</div>
<p style="color:#526174;font-size:13px;">While kitchen printing is running, Posnic prevents automatic system sleep. Your screen can still turn off or lock. Pause printing to allow normal sleep. Keep Posnic running; this does not prevent USB disconnections.</p>
<!-- Action buttons -->
<div style="display:flex;gap:14px;margin-bottom:24px;">
<button id="kotStartBtn" onclick="kotStart()" class="btn btn-success" style="flex:1;padding:16px;font-size:16px;">▶ Resume kitchen printing</button>
<button id="kotStopBtn" onclick="kotStop()" class="btn btn-danger" style="flex:1;padding:16px;font-size:16px;" disabled>⏹ Pause printing</button>
</div>
<!-- Live status -->
<div style="background:#f8f9fa;border:2px solid #e9ecef;border-radius:12px;padding:20px;">
<div style="font-size:15px;font-weight:700;color:#374151;margin-bottom:12px;">📊 Live Status</div>
<div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;">
<div style="background:#fff;padding:14px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.06);">
<div style="font-size:12px;color:#6c757d;font-weight:600;">STATUS</div>
<div id="kotLiveStatus" style="font-size:15px;font-weight:700;color:#28a745;margin-top:4px;">Idle</div>
</div>
<div style="background:#fff;padding:14px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.06);">
<div style="font-size:12px;color:#6c757d;font-weight:600;">LAST POLL</div>
<div id="kotLastPoll" style="font-size:14px;font-weight:600;color:#374151;margin-top:4px;">, </div>
</div>
<div style="background:#fff;padding:14px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.06);">
<div style="font-size:12px;color:#6c757d;font-weight:600;">BRANCH</div>
<div id="kotLiveBranch" style="font-size:14px;font-weight:600;color:#374151;margin-top:4px;">, </div>
</div>
<div style="background:#fff;padding:14px;border-radius:10px;box-shadow:0 2px 6px rgba(0,0,0,.06);">
<div style="font-size:12px;color:#6c757d;font-weight:600;">PRINTERS</div>
<div id="kotLivePrinters" style="font-size:13px;font-weight:600;color:#374151;margin-top:4px;">, </div>
</div>
</div>
</div>
<!-- KOT Logs section -->
<div style="margin-top:24px;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
<div style="font-size:15px;font-weight:700;color:#374151;">📋 KOT Print Logs</div>
<div style="display:flex;gap:8px;align-items:center;">
<span id="kotAutoRefreshBadge" style="display:none;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#6f42c1;background:#f3e8ff;padding:4px 10px;border-radius:20px;"></span>
<input type="date" id="kotLogDate" style="padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;">
<button onclick="kotLoadLogs()" class="btn btn-primary" style="padding:8px 16px;font-size:13px;">🔍 Load</button>
</div>
</div>
<div id="kotLogsContainer" style="background:#fff;border:2px solid #e9ecef;border-radius:12px;overflow:hidden;">
<div id="kotLogsEmpty" style="padding:32px;text-align:center;color:#9ca3af;font-size:14px;">Select a date and click Load to view logs.</div>
<div id="kotSelectionBar" style="display:none;padding:8px 12px;background:#f3e8ff;border-bottom:1.5px solid #d8b4fe;">
<div style="display:flex;align-items:center;gap:10px;">
<span id="kotSelectionCount" style="font-size:13px;font-weight:700;color:#6f42c1;"></span>
<button onclick="kotDeleteSelected()" style="padding:5px 14px;border:none;border-radius:6px;background:#dc2626;color:#fff;font-weight:700;font-size:12px;cursor:pointer;">🗑️ Delete Selected</button>
<button onclick="kotClearSelection()" style="padding:5px 12px;border:1.5px solid #cbd5e1;border-radius:6px;background:#fff;color:#64748b;font-weight:600;font-size:12px;cursor:pointer;">✕ Clear</button>
</div>
</div>
<table id="kotLogsTable" style="display:none;width:100%;border-collapse:collapse;font-size:13px;">
<thead>
<tr style="background:#f3f4f6;border-bottom:2px solid #e5e7eb;">
<th style="padding:10px 12px;text-align:center;width:36px;">
<input type="checkbox" id="kotSelectAllCb" style="width:15px;height:15px;cursor:pointer;accent-color:#6f42c1;">
</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Time</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Sale ID</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Table</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Type</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">KOT#</th>
<!--
WHO ASKED FOR IT, not which machine printed it.
This column was Device IP, filled from the
till's own os.networkInterfaces(). Identical
on every row, whatever sent the order, so it
looked like it identified the handset and
answered nothing. The question it was being
asked is "did the one from the mobile app
print?", and now it answers that.
-->
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">From</th>
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Printers</th>
<!--
HOW LONG IT TOOK, ON THIS COUNTER.
The order-to-paper numbers behind the
ESC/POS work were measured on one
developer machine with two virtual
printers. A shop needs to be able to read
its own, because the standard set for this
was "every seconds counts here" and nobody
could answer that with anything but a
number off somebody else's laptop.
-->
<th style="padding:10px 12px;text-align:left;font-weight:700;color:#374151;">Speed</th>
<th style="padding:10px 12px;text-align:center;font-weight:700;color:#374151;">Actions</th>
</tr>
</thead>
<tbody id="kotLogsBody"></tbody>
</table>
<div id="kotLogsPagination" style="display:none;padding:10px 14px;border-top:1px solid #e9ecef;"></div>
</div>
</div>
<!--
EVERY RECEIPT THIS TILL TRIED TO PRINT.
Owner: "how can i verif print out ?"
Kitchen tickets have had a log with a screen for a long
time; receipts had the log and no screen, so when a
customer said their bill never came out there was no way
to tell whether the till had tried, which printer it went
to, or what the printer said back.
TRIED counts, not just printed. A receipt that failed is
the one somebody is asking about, and a list of successes
is silent at exactly the moment it is needed.
-->
<div style="margin-top:24px;">
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;">
<div style="font-size:15px;font-weight:700;color:#374151;">🧾 Receipt print log</div>
<div style="display:flex;gap:8px;align-items:center;">
<input type="date" id="rlDate" style="padding:8px 12px;border:2px solid #e5e7eb;border-radius:8px;font-size:13px;">
<button onclick="rlLoad()" class="btn btn-primary" style="padding:8px 16px;font-size:13px;">🔍 Load</button>
</div>
</div>
<div style="background:#fff;border:2px solid #e9ecef;border-radius:12px;overflow:hidden;">
<div id="rlEmpty" style="padding:32px;text-align:center;color:#9ca3af;font-size:14px;">
Pick a date and press Load to see what this computer printed.
</div>
<table id="rlTable" style="display:none;width:100%;border-collapse:collapse;font-size:13px;">
<thead>
<tr style="background:#f3f4f6;border-bottom:2px solid #e5e7eb;">
<th style="padding:10px 12px;text-align:left;">Time</th>
<th style="padding:10px 12px;text-align:left;">What</th>
<th style="padding:10px 12px;text-align:left;">Printer</th>
<th style="padding:10px 12px;text-align:left;">Result</th>
</tr>
</thead>
<tbody id="rlBody"></tbody>
</table>
</div>
</div>
</div>
<!--
RECEIPTS, THE SAME WAY.
Asked for directly: "receipt also will have 1 day log? just to
see what printed ?? or tried to print.. something same like KOT?"
Kitchen tickets have had this for a long time and receipts had
nothing at all. When a customer says their bill never came out,
there was no way to tell whether the till had tried, which
printer it went to, or what the printer said back.
TRIED is the half that matters, so a failed row is shown in red
rather than left out. A log of successes only is silent at
exactly the moment somebody needs it.
-->
<!-- KOT Delete Confirm Modal -->
<div id="kotDeleteConfirmModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10000;align-items:center;justify-content:center;">
<div style="background:#fff;width:360px;max-width:92%;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;">
<div style="background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;padding:18px 22px;display:flex;align-items:center;gap:12px;">
<span style="font-size:22px;">🗑️</span>
<span style="font-size:16px;font-weight:700;">Delete Log Entry</span>
</div>
<div style="padding:22px 24px;">
<p style="margin:0;font-size:14px;color:#374151;line-height:1.6;">Are you sure you want to delete this KOT log entry?<br><span style="color:#6b7280;font-size:12px;">This action cannot be undone.</span></p>
</div>
<div style="padding:14px 22px 20px;display:flex;gap:10px;justify-content:flex-end;">
<button id="kotDeleteCancelBtn" style="padding:9px 20px;border:1.5px solid #dee2e6;border-radius:8px;background:#fff;color:#374151;font-weight:600;font-size:13px;cursor:pointer;">Cancel</button>
<button id="kotDeleteConfirmBtn" style="padding:9px 20px;border:none;border-radius:8px;background:#dc2626;color:#fff;font-weight:700;font-size:13px;cursor:pointer;">🗑️ Delete</button>
</div>
</div>
</div>
<!-- KOT Log Detail Modal -->
<div id="kotDetailModal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;overflow-y:auto;">
<div style="background:#fff;width:480px;max-width:95%;margin:60px auto;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;">
<div style="background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;">
<div style="font-size:17px;font-weight:700;">🖨️ KOT Print Detail</div>
<button onclick="kotCloseModal()" style="background:rgba(255,255,255,.2);border:none;color:#fff;border-radius:50%;width:32px;height:32px;font-size:18px;cursor:pointer;line-height:1;">✕</button>
</div>
<div id="kotDetailBody" style="padding:24px;"></div>
<div style="padding:16px 24px;background:#f8f9fa;display:flex;gap:10px;justify-content:flex-end;">
<button id="kotDetailReprintBtn" onclick="kotReprintFromModal()" class="btn btn-success" style="padding:10px 20px;">🔄 Reprint</button>
<button onclick="kotCloseModal()" class="btn btn-secondary" style="padding:10px 20px;">Close</button>
</div>
</div>
</div>
<!--
Scanner Tab
There is nothing to connect here, and that is the point. A USB
barcode scanner is a keyboard: it types the digits and presses
Enter. It needs no driver and no port, and the item search
already matches on barcode, so a scanner works the moment it is
plugged in.
This tab used to say "coming soon", which told shopkeepers the
opposite of the truth. What it offers instead is the thing that
is actually hard - seeing what the scanner really sent, because
when one misbehaves it is almost always a missing Enter, a
stray prefix, or a keyboard layout turning digits into
something else. All three are obvious the moment you can see
the raw input, and invisible otherwise.
-->
<div id="scannerTab" class="tab-content">
<h2>🔎 Barcode Scanner</h2>
<div class="status" style="background:#d4edda;color:#155724;display:block;">
✓ No setup needed. A USB scanner acts as a keyboard - plug it in and it works.
</div>
<div class="card" style="margin-top:20px;">
<h3 style="margin-top:0;">Test your scanner</h3>
<p style="color:#555;font-size:14px;margin-bottom:14px;">
Click the box and scan any barcode. What the scanner typed appears below,
exactly as the till receives it.
</p>
<input type="text" id="scannerTestInput" autocomplete="off"
placeholder="Click here, then scan a barcode"
style="width:100%;padding:16px;font-size:18px;border:2px solid #d5dae5;
border-radius:10px;font-family:monospace;">
<div id="scannerResult" style="margin-top:18px;display:none;"></div>
<div id="scannerHistory" style="margin-top:18px;"></div>
</div>
<div class="card" style="margin-top:20px;">
<h3 style="margin-top:0;">If a scan does not work</h3>
<ul style="color:#555;font-size:14px;line-height:1.9;margin:0;padding-left:20px;">
<li><strong>Nothing appears at all</strong> - the scanner is not in keyboard
mode. Most scanners ship with a manual containing a "USB HID" or
"keyboard wedge" barcode; scan that one.</li>
<li><strong>Digits appear but the item is not found</strong> - the barcode is
not on any item yet. Add it in the item's Barcode field.</li>
<li><strong>The code appears but nothing happens until you press Enter</strong>
- the scanner is not sending a return. Its manual has a "add Enter
suffix" barcode.</li>
<li><strong>Letters or symbols instead of digits</strong> - the scanner is set
to a different keyboard layout than this computer. Set both to the same.</li>
</ul>
</div>
</div>
<!--
KITCHEN SCREEN
Per machine, like the printer, and for the same reason: two
tills in one shop have different things plugged into them.
The important thing this panel does is tell the truth BEFORE a
television is bought. Owner: "around 5 meter." At five metres a
43 inch screen shows about two orders, which is not a kitchen
display - and the only way anybody finds that out otherwise is
after paying for the mount.
-->
<div id="screenTab" class="tab-content">
<label for="display-language">Language</label><select id="display-language" translate="no"></select>
<h2>📺 Kitchen Display</h2>
<div class="status" style="background:#e7f1ff;color:#1e3a8a;display:block;">
Run an HDMI cable from this computer to a screen in the kitchen.
Choose it below, say how far away the cook stands, and this will tell you
how many orders will actually be readable on it.
</div>
<div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0;">
<button type="button" class="btn" id="screenOrdersRefresh" onclick="refreshKitchenOrders(this)">Refresh active orders</button>
<span id="screenOrdersStatus" role="status" aria-live="polite"></span>
</div>
<p id="screenSaveStatus" role="status" aria-live="polite"></p>
<div id="screenList" style="margin-top:20px;">
<p style="color:#666;font-size:14px;">Looking for screens...</p>
</div>
<div class="card" style="margin-top:20px;">
<h3 style="margin-top:0;">Why the distance matters more than the size</h3>
<p style="color:#555;font-size:14px;line-height:1.6;margin:0;">
Text has to be a certain size <b>on the eye</b>, so doubling the distance
doubles the letter height, and that costs room across <b>and</b> down.
<b>Double the distance, quarter the orders.</b>
Moving a screen closer is almost always cheaper than buying a bigger one,
and a sharper screen does not help at all: a 4K panel the same size has the
same letter height, just with smoother edges.
</p>
</div>
</div>
<!--
THE KITCHEN'S SPEAKER, beside the kitchen's screen.
This lived on the settings page twice, first under Sale and
then under Print, and it was wrong both times. Owner: "this is
about kitchen play right? not restaurant module?"
It is a device on this computer, like the cash drawer, the
weighing scale and the kitchen screen. The person setting it up
is standing at the machine by the pass with a speaker in their
hand, and this is the window they are already in.
PER MACHINE, and that is the whole reason it is here rather
than in shop settings: only the machine at the pass has a
speaker. A shop-wide switch would make the counter talk in
front of customers, somebody would mute the counter, and on
most installs that is the same Windows volume the kitchen's
speaker is on.
-->
<div id="soundTab" class="tab-content">
<div class="sound-heading"><div><h2>Kitchen Sound</h2><p>Send a voice message or read new orders through your kitchen speakers.</p></div><span class="sound-tag">This computer</span></div>
<section class="sound-send sound-panel" aria-labelledby="sound-send-title">
<div><h3 id="sound-send-title">Talk to the kitchen</h3><p>Record, listen, then send. Up to 30 seconds.</p>
<div class="sound-message-actions"><button type="button" class="btn sound-record" id="kitchenTalk">Record message</button><span id="kitchenTalkTimer" role="timer" hidden>0:00</span></div>
<audio id="kitchenTalkPreview" controls hidden aria-label="Recorded message preview"></audio>
You can’t perform that action at this time.