diff --git a/.main.js.swp b/.main.js.swp
deleted file mode 100644
index 0be77d7..0000000
Binary files a/.main.js.swp and /dev/null differ
diff --git a/.vscode/launch.json b/.vscode/launch.json
index 1d4b431..60024dd 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -5,7 +5,7 @@
 	"version": "0.2.0",
 	"configurations": [
 		{
-			"type": "pwa-node",
+			"type": "node",
 			"request": "launch",
 			"name": "Launch Program",
 			"skipFiles": [
@@ -13,7 +13,7 @@
 			],
 			"program": "${workspaceFolder}\\main.js",
 			"env": {
-				"port": "666",
+				"port": "3000",
 				"table_count": "12",
 				"code": null //"666"
 			}
diff --git a/README.md b/README.md
index b399a60..c7d59df 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,75 @@
-As of 2022-07-06, I have no intention to bring this project back to the limelight.  I designed Bring Back Buffets to address buffet closures dring Covid closures in early 2021.  This was before vaccines were available.  Though the codebase was complete enough to work in a pro*dev*ction environment, I was not successful in advertising to buffet owners.
+As of 2022-07-06, I have no intention to bring this project back to the limelight. I designed Bring Back Buffets to address buffet closures dring Covid closures in early 2021. This was before vaccines were available. Though the codebase was complete enough to work somewhere between a development and a production environment, I was not successful in advertising to buffet owners.
 
 ---
 
-## Let's *Bring Buffets Back to Business* with an in-house mobile ordering solution!
-1.	Customer(s) request a table and pay up-front.
-2.	Cashier hands receipt to customers(s) with an order code and table number.
-3.	Customer(s) place their buffet orders on their mobile devices.
-4.	A server will make the requested order and bring it to the table.
+## Let's _Bring Buffets Back to Business_ with an in-house mobile ordering solution!
+
+1. Customer(s) request a table and pay up-front.
+2. Cashier hands receipt to customers(s) with an order code and table number.
+3. Customer(s) place their buffet orders on their mobile devices.
+4. A server will make the requested order and bring it to the table.
+
+## Example of Use
+
+### `./tble.csv`
+
+The program automatically determines how many tables to have the system manage. The `tble` column shows what to name each table for the cashier's view. The `code` field contains the unique access code for each table and should be entered by the customer. The `time` field shows a Unix timestamp for when that table was released.
+
+```csv
+tble,code,time
+1,4900,1614589670430
+2,,
+3,,
+4,,
+5,,
+6,,
+7,,
+8,,
+9,,
+10,,
+11,,
+12,,
+```
+
+### `./menu.csv`
+
+The `name` column is the name of each food item as viewed by the customer. The `shortname` field is shown in the expedite page and shouldn't be more than 8 characters long. The `limit` field, if not left blank, dictates an upper limit to the number of servings customers can request per visit to the customer page.
+
+```csv
+name,shortname,limit,unit,image
+Orange Chicken,ORNGCHKN,,sp.,https://farm5.staticflickr.com/4015/4655017334_45f4fffb54_z.jpg
+Broccoli Beef,BROCBEEF,,sp.,https://www.itsmydish.com/wp-content/uploads/2015/12/broccoli-beef-final2.jpg
+Fried Squid,FRDSQUID,,sp.,https://farm3.staticflickr.com/2669/4189339625_93029fa024_z.jpg
+Cheese Wontons,CHZWNTON,,sp.,http://2.bp.blogspot.com/-W-c9y2E3c9E/UCBq6mrCnHI/AAAAAAAAD9A/f7fqM7L2YgA/w1200-h630-p-k-no-nu/IMG_3133.JPG
+Sesame Balls,SESAMEBL,,sp.,http://2.bp.blogspot.com/_tbCqVl2yqf8/Sdfjr2TFUGI/AAAAAAAAAcg/D8DRET6u7wI/w1200-h630-p-k-no-nu/sesame+balls+003-2.jpg
+```
+
+### localhost:3000/cashier
+
+<p align="center">
+  <img src="screenshots/cashier_list.png" />
+</p>
+
+### localhost:3000/menu
+
+<p align="center">
+  <img src="screenshots/customer_init.png" />
+</p>
+
+<p align="center">
+  <img src="screenshots/customer_code_entered.png" />
+</p>
+
+<p align="center">
+  <img src="screenshots/customer_selection.png" />
+</p>
+
+<p align="center">
+  <img src="screenshots/customer_confirmation.png" />
+</p>
+
+### localhost:3000/display
+
+<p align="center">
+  <img src="screenshots/expedite_order.png" />
+</p>
diff --git a/disp.html b/disp.html
index 6369c05..1446d23 100644
--- a/disp.html
+++ b/disp.html
@@ -1,215 +1,218 @@
-<!DOCTYPE html>
-
-<head>
-	<meta content="width=device-width,initial-scale=1" />
-	<style>
-		@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-		@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-		* {
-			font-family: monospace;
-		}
-
-		@media (pointer:coarse) {
-			body {
-				zoom: 150%
-			}
-		}
-
-		#display {
-			display: flex;
-			padding: 30pt 30pt 100pt;
-			align-content: flex-start;
-			flex-direction: column;
-			box-sizing: border-box;
-			overflow-x: scroll;
-			flex-wrap: wrap;
-			position: fixed;
-			height: 100%;
-			width: 100%;
-		}
-
-		#display>* {
-			width: min(calc(36vw - 50pt), 200pt);
-			box-sizing: border-box;
-			height: 30pt;
-		}
-
-		.head {
-			background-image: linear-gradient(green, darkgreen);
-			padding: 6.4pt 10pt;
-		}
-
-		.head.late {
-			background-image: linear-gradient(red, darkred);
-		}
-
-		.head.ubmp {
-			background-image: linear-gradient(lightseagreen, darkcyan);
-		}
-
-		.item.sel {
-			background-image: linear-gradient(khaki, darkkhaki);
-		}
-
-		.tble {
-			font-style: italic;
-			color: white;
-			font-size: 13pt;
-		}
-
-		.time {
-			float: right;
-			color: white;
-			font-size: 13pt;
-		}
-
-		.item {
-			font-size: 13pt;
-			padding: 6pt 10pt;
-			background-image: linear-gradient(white, #eee);
-		}
-
-		.plte-subb {
-			margin: 0 0 6pt;
-			padding: 0 0 6pt;
-			font-size: 12pt;
-		}
-
-		.plte-subb:not(:last-child) {
-			border-bottom: solid 1pt lightgrey;
-		}
-
-		#footer {
-			justify-content: space-between;
-			background-color: #eee;
-			box-sizing: border-box;
-			padding: 5pt 20%;
-			position: fixed;
-			display: flex;
-			width: 100%;
-			height: 40pt;
-			bottom: 0;
-		}
-
-		#footer>button {
-			font-size: 13pt;
-		}
-	</style>
-</head>
-
-<body>
-	<div id="display">
-	</div>
-	<footer id="footer">
-		<button message="bump0">Bump #1</button>
-		<button message="bump1">Bump #2</button>
-		<button message="bump2">Bump #3</button>
-		<button message="bump3">Bump #4</button>
-		<button message="bump4">Bump #5</button>
-		<button message="unbump">Recall</button>
-	</footer>
-	<script>
-		const pnel_lst = []
-		const time_lst = []
-
-		function createPnels(ordr) {
-			var ps = []
-			function clk() {
-				if (ps[0].classList.contains('sel'))
-					for (let p of ps) p.classList.remove('sel')
-				else for (let p of ps) p.classList.add('sel')
-			}
-			function dbl(event) {
-				event.stopPropagation()
-				var i = pnel_lst.indexOf(ps)
-				ws.send(`bump${i}`)
-			}
-
-			var plte = ordr.plte
-			var head = document.createElement('div')
-			var time = document.createElement('div')
-			var tble = document.createElement('div')
-			tble.innerText = `Table #${ordr.tble}`
-			head.className = 'head'
-			time.className = 'time'
-			tble.className = 'tble'
-			head.append(time, tble)
-			head.ondblclick = dbl
-			head.onclick = clk
-			ps.push(head)
-
-			for (let [n, c] of Object.entries(plte)) {
-				var i = document.createElement('div')
-				i.innerText = `[${c}] ${n}`
-				i.className = 'item'
-				i.ondblclick = dbl
-				i.onclick = clk
-				ps.push(i)
-			}
-			var b = document.createElement('div')
-			b.className = 'bffr'
-			ps.push(b)
-			return ps
-		}
-
-		function tick(lst_idx) {
-			if (time_lst[lst_idx] === undefined) return
-			var e = pnel_lst[lst_idx][0].getElementsByClassName('time')[0]
-			var t = ++time_lst[lst_idx], m = ~~(t / 60), s = ('' + t % 60).padStart(2, 0)
-			if (t == 5 * 60) pnel_lst[lst_idx][0].className.add('late')
-			e.innerText = `${m}:${s}`
-		}
-
-		function add(ordr) {
-			var ps = createPnels(ordr)
-			var i = pnel_lst.push(ps)
-			time_lst.push(0)
-			for (let p of ps)
-				disp.append(p)
-			tick(i - 1)
-		}
-
-		function bump(idx) {
-			time_lst.splice(idx, 1)
-			for (let p of pnel_lst.splice(idx, 1)[0]) p.remove()
-		}
-
-		function ubmp(ordr) {
-			var ps = createPnels(ordr)
-			ps[0].classList.add('ubmp')
-			time_lst.unshift(undefined)
-			pnel_lst.unshift(ps)
-			for (let p of ps.reverse())
-				disp.prepend(p)
-			tick(0)
-		}
-
-		setInterval(() => {
-			for (let i in pnel_lst) tick(i)
-		}, 1000)
-
-		const req = new XMLHttpRequest()
-		const disp = document.getElementById('display')
-		const foot = document.getElementById('footer')
-		req.open('GET', document.location, false)
-		req.send(null)
-
-		const code = req.getResponseHeader('auth-code')
-		const ws = new WebSocket('ws://localhost:8081')
-		ws.onopen = () => ws.send(code)
-
-		ws.onmessage = (e) => {
-			var d = JSON.parse(e.data)
-			var adds = d.adds, idxs = d.idxs
-			for (let c = 0; c < adds.length || c < idxs.length; c++) {
-				if (!adds[c]) bump(idxs[c])
-				else if (idxs[c] == undefined) add(adds[c])
-				else if (idxs[c] == 0) ubmp(adds[c])
-			}
-		}
-
-		for (let n of foot.childNodes)
-			n.onclick = () => ws.send(n.getAttribute('message'))
-	</script>
-</body>
\ No newline at end of file
+<!DOCTYPE html>
+
+<head>
+	<meta content="width=device-width,initial-scale=1" />
+	<style>
+		@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+		@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+		* {
+			font-family: monospace;
+		}
+
+		@media (pointer: coarse) {
+			body {
+				zoom: 150%;
+			}
+		}
+
+		body {
+			margin: 0;
+		}
+
+		#display {
+			display: flex;
+			padding: 30pt 30pt 100pt;
+			align-content: flex-start;
+			flex-direction: column;
+			box-sizing: border-box;
+			overflow-x: scroll;
+			flex-wrap: wrap;
+			position: fixed;
+			height: 100%;
+			width: 100%;
+		}
+
+		#display > * {
+			width: min(calc(36vw - 50pt), 200pt);
+			box-sizing: border-box;
+			height: 30pt;
+		}
+
+		.head {
+			background-image: linear-gradient(green, darkgreen);
+			padding: 6.4pt 10pt;
+		}
+
+		.head.late {
+			background-image: linear-gradient(red, darkred);
+		}
+
+		.head.ubmp {
+			background-image: linear-gradient(lightseagreen, darkcyan);
+		}
+
+		.item.sel {
+			background-image: linear-gradient(khaki, darkkhaki);
+		}
+
+		.tble {
+			font-style: italic;
+			color: white;
+			font-size: 13pt;
+		}
+
+		.time {
+			float: right;
+			color: white;
+			font-size: 13pt;
+		}
+
+		.item {
+			font-size: 13pt;
+			padding: 6pt 10pt;
+			background-image: linear-gradient(white, #eee);
+		}
+
+		.plte-subb {
+			margin: 0 0 6pt;
+			padding: 0 0 6pt;
+			font-size: 12pt;
+		}
+
+		.plte-subb:not(:last-child) {
+			border-bottom: solid 1pt lightgrey;
+		}
+
+		#footer {
+			bottom: 0;
+			justify-content: space-around;
+			background-color: #eee;
+			box-sizing: border-box;
+			padding: 5pt min(20%, 10pt);
+			position: fixed;
+			display: flex;
+			width: 100%;
+			height: 40pt;
+		}
+
+		#footer > button {
+			min-width: fit-content;
+			font-size: 13pt;
+		}
+	</style>
+</head>
+
+<body>
+	<div id="display"></div>
+	<footer id="footer">
+		<button message="bump0">Bump #1</button>
+		<button message="bump1">Bump #2</button>
+		<button message="bump2">Bump #3</button>
+		<button message="bump3">Bump #4</button>
+		<button message="bump4">Bump #5</button>
+		<button message="unbump">Recall</button>
+	</footer>
+	<script>
+		const pnel_lst = [];
+		const time_lst = [];
+
+		function createPnels(ordr) {
+			var ps = [];
+			function clk() {
+				if (ps[0].classList.contains("sel")) for (let p of ps) p.classList.remove("sel");
+				else for (let p of ps) p.classList.add("sel");
+			}
+			function dbl(event) {
+				event.stopPropagation();
+				var i = pnel_lst.indexOf(ps);
+				ws.send(`bump${i}`);
+			}
+
+			var plte = ordr.plte;
+			var head = document.createElement("div");
+			var time = document.createElement("div");
+			var tble = document.createElement("div");
+			tble.innerText = `Table #${ordr.tble}`;
+			head.className = "head";
+			time.className = "time";
+			tble.className = "tble";
+			head.append(time, tble);
+			head.ondblclick = dbl;
+			head.onclick = clk;
+			ps.push(head);
+
+			for (let [n, c] of Object.entries(plte)) {
+				var i = document.createElement("div");
+				i.innerText = `[${c}] ${n}`;
+				i.className = "item";
+				i.ondblclick = dbl;
+				i.onclick = clk;
+				ps.push(i);
+			}
+			var b = document.createElement("div");
+			b.className = "bffr";
+			ps.push(b);
+			return ps;
+		}
+
+		function tick(lst_idx) {
+			if (time_lst[lst_idx] === undefined) return;
+			var e = pnel_lst[lst_idx][0].getElementsByClassName("time")[0];
+			var t = ++time_lst[lst_idx],
+				m = ~~(t / 60),
+				s = ("" + (t % 60)).padStart(2, 0);
+			if (t == 5 * 60) pnel_lst[lst_idx][0].className.add("late");
+			e.innerText = `${m}:${s}`;
+		}
+
+		function add(ordr) {
+			var ps = createPnels(ordr);
+			var i = pnel_lst.push(ps);
+			time_lst.push(0);
+			for (let p of ps) disp.append(p);
+			tick(i - 1);
+		}
+
+		function bump(idx) {
+			time_lst.splice(idx, 1);
+			for (let p of pnel_lst.splice(idx, 1)[0]) p.remove();
+		}
+
+		function ubmp(ordr) {
+			var ps = createPnels(ordr);
+			ps[0].classList.add("ubmp");
+			time_lst.unshift(undefined);
+			pnel_lst.unshift(ps);
+			for (let p of ps.reverse()) disp.prepend(p);
+			tick(0);
+		}
+
+		setInterval(() => {
+			for (let i in pnel_lst) tick(i);
+		}, 1000);
+
+		const req = new XMLHttpRequest();
+		const disp = document.getElementById("display");
+		const foot = document.getElementById("footer");
+		req.open("GET", document.location, false);
+		req.send(null);
+
+		const code = req.getResponseHeader("auth-code");
+		const ws = new WebSocket("ws://localhost:8081");
+		ws.onopen = () => ws.send(code);
+
+		ws.onmessage = (e) => {
+			var d = JSON.parse(e.data);
+			var adds = d.adds,
+				idxs = d.idxs;
+			for (let c = 0; c < adds.length || c < idxs.length; c++) {
+				if (!adds[c]) bump(idxs[c]);
+				else if (idxs[c] == undefined) add(adds[c]);
+				else if (idxs[c] == 0) ubmp(adds[c]);
+			}
+		};
+
+		for (let n of foot.childNodes) n.onclick = () => ws.send(n.getAttribute("message"));
+	</script>
+</body>
diff --git a/menu.csv b/menu.csv
index 11d3eea..d94455d 100644
--- a/menu.csv
+++ b/menu.csv
@@ -1,6 +1,6 @@
-name,shortname,limit,unit,image
-Orange Chicken,ORNGCHKN,,sp.,https://farm5.staticflickr.com/4015/4655017334_45f4fffb54_z.jpg
-Broccoli Beef,BROCBEEF,,sp.,https://pixnio.com/free-images/food-and-drink/szechwan-beef-broccoli-food-dinner.jpg
-Fried Squid,FRDSQUID,,sp.,https://farm3.staticflickr.com/2669/4189339625_93029fa024_z.jpg
-Cheese Wontons,CHZWNTON,,sp.,http://2.bp.blogspot.com/-W-c9y2E3c9E/UCBq6mrCnHI/AAAAAAAAD9A/f7fqM7L2YgA/w1200-h630-p-k-no-nu/IMG_3133.JPG
+name,shortname,limit,unit,image
+Orange Chicken,ORNGCHKN,,sp.,https://farm5.staticflickr.com/4015/4655017334_45f4fffb54_z.jpg
+Broccoli Beef,BROCBEEF,,sp.,https://www.itsmydish.com/wp-content/uploads/2015/12/broccoli-beef-final2.jpg
+Fried Squid,FRDSQUID,,sp.,https://farm3.staticflickr.com/2669/4189339625_93029fa024_z.jpg
+Cheese Wontons,CHZWNTON,,sp.,http://2.bp.blogspot.com/-W-c9y2E3c9E/UCBq6mrCnHI/AAAAAAAAD9A/f7fqM7L2YgA/w1200-h630-p-k-no-nu/IMG_3133.JPG
 Sesame Balls,SESAMEBL,,sp.,http://2.bp.blogspot.com/_tbCqVl2yqf8/Sdfjr2TFUGI/AAAAAAAAAcg/D8DRET6u7wI/w1200-h630-p-k-no-nu/sesame+balls+003-2.jpg
\ No newline at end of file
diff --git a/menu.html b/menu.html
index 16f25f8..c783fe0 100644
--- a/menu.html
+++ b/menu.html
@@ -1,649 +1,651 @@
-<!DOCTYPE html>
-
-<head>
-	<meta content="width=device-width,initial-scale=1" />
-	<style>
-		@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
-		@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-
-		* {
-			font-family: 'Roboto';
-		}
-
-		@media (pointer:coarse) {
-			body {
-				zoom: 150%
-			}
-		}
-
-		button {
-			border: none;
-		}
-
-		.overlay {
-			top: 0;
-			z-index: 10;
-			width: 100%;
-			height: 100%;
-			display: flex;
-			position: fixed;
-			align-items: center;
-			justify-content: center;
-			transition: opacity 666ms;
-		}
-
-		body .overlay.invisible {
-			pointer-events: none;
-			opacity: 0;
-		}
-
-		#code-overlay {
-			background-image: radial-gradient(#eee, #fff 127%);
-		}
-
-		#code-overlay>div {
-			width: 300pt;
-			background-color: white;
-			box-shadow: 0 0 7pt #00000040;
-			border-radius: 3pt;
-			padding: 10pt;
-			font-size: 16pt;
-		}
-
-		.stp-button {
-			border: none;
-			color: white;
-			padding: 4pt 10pt;
-			text-align: center;
-			font-size: 13pt;
-			font-weight: 700;
-			box-shadow: 0 0 5pt #00000040;
-			border-radius: 3pt;
-			background-color: #f00d1e;
-		}
-
-		.stp-button:hover {
-			background-color: #cc1127;
-		}
-
-		#code-button {
-			box-shadow: 0 0 4pt #00000040;
-			margin-top: 10pt;
-			float: right;
-		}
-
-		#code-field {
-			width: 100%;
-			transition: border-color 250ms;
-			border-top-style: hidden;
-			border-right-style: hidden;
-			border-left-style: hidden;
-			border-bottom-style: solid;
-			border-bottom-width: 1.5pt;
-			border-color: gainsboro;
-			background-color: white;
-			text-transform: uppercase;
-			letter-spacing: 4pt;
-			text-align: center;
-			font-size: 60pt;
-			height: 60pt;
-		}
-
-		#code-field:placeholder-shown {
-			font-size: 16pt;
-			text-transform: none;
-			font-weight: normal;
-			color: transparent;
-			letter-spacing: 0;
-		}
-
-		#code-field:focus {
-			border-color: #f00d1e;
-			outline: none;
-		}
-
-		#code-field:invalid {
-			color: #f00d1e;
-			transition: 250ms color
-		}
-
-		#code-label {
-			transition: color 250ms;
-			font-size: 12pt;
-			margin-top: 3pt;
-			margin-left: 2pt;
-			color: #f00d1e;
-			float: left;
-		}
-
-		#plte-overlay {
-			background-color: #00000080;
-		}
-
-		#plte-overlay>div {
-			width: 300pt;
-			background-color: white;
-			box-shadow: 0 0 7pt #00000040;
-			border-radius: 3pt;
-			font-size: 16pt;
-		}
-
-		#plte-lst {
-			width: 100%;
-			border-bottom: solid 1pt lightgrey;
-			padding: 10pt 0;
-		}
-
-		.plte-item {
-			width: 100%;
-			text-align: left;
-			background-color: white;
-			padding: 6pt 13pt 7pt;
-			display: grid;
-			grid-template-columns: auto 20pt;
-		}
-
-		.plte-item:hover {
-			background-color: #eee;
-		}
-
-		.plte-name {
-			font-size: 13pt;
-		}
-
-		.plte-info {
-			text-overflow: ellipsis;
-			white-space: nowrap;
-			overflow: hidden;
-			font-size: 10pt;
-			display: block;
-			color: grey;
-			width: 100%;
-			grid-row: 2;
-		}
-
-		.plte-rem {
-			font-family: 'Material Icons';
-			float: right;
-			margin: auto;
-			display: block;
-			grid-column: 2;
-			grid-row: span 2;
-			width: 25pt;
-			height: 25pt;
-			font-size: 13pt;
-			border-radius: 50%;
-			box-sizing: border-box;
-			background-color: transparent;
-			padding: 0 6.5pt;
-			color: grey;
-		}
-
-		.plte-rem:hover {
-			background-color: #ddd;
-		}
-
-		#snd-button {
-			float: right;
-			margin: 7pt 10pt;
-		}
-
-		.plte-button {
-			float: right;
-			margin: 8pt -6pt 0 0;
-			border: none;
-			color: black;
-			padding: 4pt 10pt;
-			text-align: center;
-			font-size: 11pt;
-			border-radius: 3pt;
-			background-color: transparent;
-		}
-
-		.plte-button:hover {
-			color: #f00d1e;
-		}
-
-		header {
-			top: 0;
-			position: fixed;
-			height: 40pt;
-			width: 100%;
-			z-index: 2;
-			padding: 10.5pt;
-			box-sizing: border-box;
-			color: white;
-			font-weight: 500;
-			font-size: 16pt;
-			background-color: #f00d1e;
-			box-shadow: 0 0 5pt #00000080;
-			display: flex;
-		}
-
-		#back-button {
-			font-family: 'Material Icons';
-			background: none;
-			color: white;
-			font-size: 16pt;
-		}
-
-		#tble-label {
-			margin-left: 2pt;
-		}
-
-		#menu-grid {
-			width: min(1000pt, 100%);
-			justify-content: center;
-			margin: 45pt auto;
-			padding: 4pt;
-			display: flex;
-			flex-wrap: wrap;
-			box-sizing: border-box;
-		}
-
-		.menu-itm {
-			flex: 1;
-			min-width: 300pt;
-			height: 300pt;
-			padding: 4pt;
-			display: block;
-		}
-
-		.menu-ttl {
-			top: 0;
-			position: relative;
-			font-weight: 400;
-			display: block;
-			font-size: 16pt;
-			height: 20pt;
-			padding: 10pt 10pt 20pt;
-			background-image: linear-gradient(black, transparent);
-			color: white;
-		}
-
-		.menu-img {
-			width: 100%;
-			height: 100%;
-			object-fit: cover;
-			margin-top: -50pt;
-		}
-
-		.menu-inc {
-			float: right;
-			box-shadow: 0 0 5pt #ffffff80;
-			background-color: white;
-			text-align: center;
-			border-radius: 5pt;
-			box-sizing: border-box;
-			height: 20pt;
-			vertical-align: middle;
-			display: table-cell;
-		}
-
-		.menu-cnt {
-			color: black;
-			font-size: 13pt;
-			display: inline-block;
-			font-weight: 500;
-		}
-
-		.menu-unt {
-			color: gray;
-			font-size: 10pt;
-			display: inline-block;
-			font-weight: 400;
-			margin: 0 -2pt 0 2pt;
-			font-variant: petite-caps;
-			font-style: italic;
-		}
-
-		.menu-add,
-		.menu-rem {
-			color: grey;
-			font-family: 'Material Icons';
-			outline: none;
-			border: none;
-			height: 100%;
-			width: 15pt;
-			padding: 0;
-		}
-
-		.menu-add {
-			border-left: solid 1pt darkgrey;
-			border-radius: 0 5pt 5pt 0;
-			padding-right: 2pt;
-			margin-left: 5pt;
-			float: right;
-		}
-
-		.menu-rem {
-			border-right: solid 1pt darkgrey;
-			border-radius: 5pt 0 0 5pt;
-			padding-left: 2pt;
-			margin-right: 5pt;
-			float: left;
-		}
-
-		.menu-add:focus {
-			outline: none;
-		}
-
-		footer {
-			grid-template-columns: auto 100pt;
-			box-shadow: 0 0 7pt #00000040;
-			background-color: white;
-			position: fixed;
-			bottom: 0;
-			width: 100%;
-			height: 40pt;
-			display: grid;
-		}
-
-		#chip-list {
-			overflow-x: scroll;
-			overflow-y: hidden;
-			white-space: nowrap;
-			padding: 0 10pt 0 10pt;
-		}
-
-		#chip-list::-webkit-scrollbar {
-			height: 2pt;
-		}
-
-		.chip {
-			padding: 3.4pt 10pt 0;
-			background-color: lightgrey;
-			width: fit-content;
-			border-radius: 22pt;
-			height: 22pt;
-			box-sizing: border-box;
-			display: inline-block;
-			margin: 9pt 5pt;
-		}
-
-		.chip>button {
-			outline: none;
-			border: none;
-			font-family: 'Material Icons';
-			background: none;
-			display: block;
-			float: right;
-			font-size: 14pt;
-			color: grey;
-			margin: -.5pt -10pt 0 2pt;
-		}
-
-		#nxt-button {
-			margin: auto;
-		}
-
-		#nxt-button:disabled {
-			box-shadow: none;
-			background-color: lightgrey;
-		}
-	</style>
-</head>
-
-<body>
-	<div id="code-overlay" class="overlay">
-		<div>
-			<input id="code-field" type="tel" maxlength="4" pattern="[0-9]+" spellcheck="false"
-				placeholder="Please enter your order code." />
-			<div id="code-label" hidden>Invalid order code</div>
-			<button id="code-button" class="stp-button">NEXT</button>
-		</div>
-	</div>
-	<div id="plte-overlay" class="overlay invisible">
-		<div>
-			<div id="plte-lst"></div>
-			<button id="snd-button" class="stp-button">SEND</button>
-			<button id="add-button" class="plte-button">ADD</button>
-			<button id="clr-button" class="plte-button">CLEAR</button>
-		</div>
-	</div>
-	<header><button id="back-button">lock</button><span id="tble-label"></span></header>
-	<div id="menu-grid"></div>
-	<footer>
-		<div id="chip-list"></div>
-		<button id="nxt-button" class="stp-button">NEXT</button>
-	</footer>
-	<script>
-		const ordr_data = { pltes: {}, tble: '' }
-		var plte_idx, nxt_plte
-		const chip_dct = {}
-		const elem_dct = {}
-		const plte_dct = {}
-		const info_lst = []
-
-		const tlbl = document.getElementById('tble-label')
-		const grid = document.getElementById('menu-grid')
-		const chps = document.getElementById('chip-list')
-		const nxtb = document.getElementById('nxt-button')
-		const sndb = document.getElementById('snd-button')
-		const addb = document.getElementById('add-button')
-		const clrb = document.getElementById('clr-button')
-
-		const cdo = document.getElementById('code-overlay')
-		const cdf = document.getElementById('code-field')
-		const cdl = document.getElementById('code-label')
-		const cdb = document.getElementById('code-button')
-		const bkb = document.getElementById('back-button')
-
-		const plo = document.getElementById('plte-overlay')
-		const pls = document.getElementById('plte-lst')
-
-		function showQuantity(info, v) {
-			var n = info.shortname
-			var cnt = elem_dct[n][3]
-			if (info.limit && v > info.limit)
-				cnt.animate([{ color: '#f00d1e', offset: 0 }], 666)
-			else if (v >= 0) {
-				cnt.innerText = v
-				if (n in chip_dct) {
-					if (!v) {
-						chip_dct[n]
-						chip_dct[n].remove()
-						delete chip_dct[n]
-					}
-				} else if (v) {
-					nxtb.disabled = false
-					let b = document.createElement('button')
-					let c = chip_dct[n] = document.createElement('div')
-					b.onclick = () => setvQuantity(info, 0)
-					c.className = 'chip'
-					b.innerText = 'cancel'
-					c.append(info.name, b)
-					chps.append(c)
-				}
-				var c = info_lst.map(info => [ordr_data.pltes
-				[plte_idx][info.shortname], info.name]).filter(v => v[0])
-				plte_dct[plte_idx].getElementsByClassName('plte-info')[0].innerText =
-					c.map(a => `[${a[0]}] ${a[1]}`).join(', ') || 'Empty Order'
-				if (!c.length) nxtb.disabled = true
-			}
-		}
-
-		function setvQuantity(info, v, plte = ordr_data.pltes[plte_idx]) {
-			if (v < 0 | (info.limit && v > info.limit)) return
-			var n = info.shortname
-			if (v) plte[n] = v
-			else if (n in plte)
-				delete plte[n]
-			if (plte == ordr_data.pltes[plte_idx])
-				showQuantity(info, v)
-		}
-
-		function incrQuantity(info, d, plte = ordr_data.pltes[plte_idx]) {
-			setvQuantity(info, ~~plte[info.shortname] + d, plte)
-			return false
-		}
-
-		function showPlte(n) {
-			for (let info of info_lst)
-				showQuantity(info, ordr_data.pltes[n][info.shortname] || 0)
-			tlbl.innerText = `Table #${ordr_data.tble} - Plate #${n}`
-		}
-
-		function setvPlte(n) {
-			if (!(n in ordr_data.pltes)) return
-			showPlte(plte_idx = n)
-		}
-
-		function showAddPlte(n) {
-			var elem = document.createElement('button')
-			var l1 = document.createElement('span')
-			var l2 = document.createElement('span')
-			var l3 = document.createElement('button')
-			l1.className = 'plte-name'
-			l2.className = 'plte-info'
-			l3.className = 'plte-rem'
-			l1.innerText = `Plate #${n}`
-			l3.innerText = 'delete'
-			elem.append(l1, l2, l3)
-			elem.className = 'plte-item'
-			elem.onclick = () => {
-				plo.classList.add('invisible')
-				setvPlte(n)
-			}
-			l3.onclick = (event) => {
-				event.stopPropagation()
-				if (!setvRemPlte(n))
-					plo.classList.add('invisible')
-			}
-			plte_dct[n] = elem
-			pls.append(elem)
-		}
-
-		function setvAddPlte() {
-			var i = nxt_plte++
-			ordr_data.pltes[i] = {}
-			showAddPlte(i)
-			return i
-		}
-
-		function showRemPlte(n) {
-			plte_dct[n].remove()
-			delete plte_dct[n]
-		}
-
-		function setvRemPlte(i) {
-			if (!(i in ordr_data.pltes)) return
-			delete ordr_data.pltes[i]
-			showRemPlte(i)
-			if (--nxt_plte in ordr_data.pltes)
-				nxt_plte++
-			var ks = Object.keys(ordr_data.pltes), l = ks.length
-			if (i == plte_idx)
-				if (l > 0) setvPlte(ks.pop())
-				else setvClrPltes()
-			return l
-		}
-
-		function showClrPltes() {
-			for (var n in plte_dct) {
-				plte_dct[n].remove()
-				delete plte_dct[n]
-			}
-		}
-
-		function setvClrPltes() {
-			for (var n in ordr_data.pltes)
-				delete ordr_data.pltes[n]
-			nxt_plte = 1
-			showClrPltes()
-			setvPlte(setvAddPlte())
-		}
-
-		cdb.onclick = async () => {
-			var r = await fetch(`/lkp_code?code=${cdf.value}`)
-			var j = await r.json()
-			if (j[0]) {
-				ordr_data.code = cdf.value
-				ordr_data.tble = j[0].tble
-				cdo.classList.add('invisible')
-				setvClrPltes()
-			}
-			else cdl.hidden = false
-		}
-		cdf.onkeydown = () => cdl.hidden = true
-		cdf.onkeyup = () => {
-			if (event.keyCode == 13) {
-				event.preventDefault()
-				cdb.click()
-			}
-		}
-		setTimeout(() => {
-			document.getElementById('code-field').focus()
-		}, 1000)
-
-		bkb.onclick = () => {
-			cdo.classList.remove('invisible')
-		}
-
-		nxtb.onclick = () => {
-			if (!Object.keys(chip_dct).length)
-				sndb.animate([{ backgroundColor: 'red' }, { backgroundColor: '#f00d1e' }], 1337)
-			else plo.classList.remove('invisible')
-		}
-
-		plo.onclick = () => {
-			plo.classList.add('invisible')
-		}
-
-		addb.onclick = () => {
-			setvPlte(setvAddPlte())
-			plo.classList.add('invisible')
-		}
-
-		clrb.onclick = () => {
-			setvClrPltes()
-			plo.classList.add('invisible')
-		}
-
-		sndb.onclick = () => {
-			fetch('/snd_ordr', { method: 'POST', body: JSON.stringify(ordr_data) })
-			sndb.animate([{ backgroundColor: 'mediumseagreen' }, { backgroundColor: '#f00d1e' }], 1337)
-			setvClrPltes()
-		}
-
-		fetch('/ls_menu').then(async j => {
-			info_lst.push(...await j.json())
-			for (let info of info_lst) {
-				let n = info.shortname
-				let itm = document.createElement('div')
-				let ttl = document.createElement('div')
-				let inc = document.createElement('div')
-				let cnt = document.createElement('span')
-				let unt = document.createElement('span')
-				let add = document.createElement('button')
-				let rem = document.createElement('button')
-				let img = document.createElement('img')
-				elem_dct[n] = [itm, ttl, inc, cnt, add, rem, img]
-
-				img.className = 'menu-img'
-				itm.className = 'menu-itm'
-				ttl.className = 'menu-ttl'
-				inc.className = 'menu-inc'
-				cnt.className = 'menu-cnt'
-				unt.className = 'menu-unt'
-				add.className = 'menu-add'
-				rem.className = 'menu-rem'
-				add.innerText = 'arrow_drop_up'
-				rem.innerText = 'arrow_drop_down'
-				img.src = info.image
-
-				add.onclick = () => incrQuantity(info, +1)
-				rem.onclick = () => incrQuantity(info, -1)
-
-				cnt.innerText = '0'
-				unt.innerText = info.unit
-				ttl.innerText = info.name
-
-				ttl.append(inc)
-				inc.append(rem, cnt, unt, add)
-				itm.append(ttl, img)
-				grid.appendChild(itm)
-			}
-		});
-	</script>
-</body>
\ No newline at end of file
+<!DOCTYPE html>
+
+<head>
+	<meta content="width=device-width,initial-scale=1" />
+	<style>
+		@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+		@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+
+		* {
+			font-family: "Roboto";
+		}
+
+		body {
+			margin: 0;
+		}
+
+		@media (pointer: coarse) {
+			body {
+				zoom: 150%;
+			}
+		}
+
+		button {
+			border: none;
+		}
+
+		.overlay {
+			top: 0;
+			left: 0;
+			z-index: 10;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			position: fixed;
+			align-items: center;
+			justify-content: center;
+			transition: opacity 666ms;
+		}
+
+		body .overlay.invisible {
+			pointer-events: none;
+			opacity: 0;
+		}
+
+		#code-overlay {
+			background-image: radial-gradient(#eee, #fff 127%);
+		}
+
+		#code-overlay > div {
+			width: 300pt;
+			background-color: white;
+			box-shadow: 0 0 7pt #00000040;
+			border-radius: 3pt;
+			padding: 10pt;
+			font-size: 16pt;
+		}
+
+		.stp-button {
+			border: none;
+			color: white;
+			padding: 4pt 10pt;
+			text-align: center;
+			font-size: 13pt;
+			font-weight: 700;
+			box-shadow: 0 0 5pt #00000040;
+			border-radius: 3pt;
+			background-color: #f00d1e;
+		}
+
+		.stp-button:hover {
+			background-color: #cc1127;
+		}
+
+		#code-button {
+			box-shadow: 0 0 4pt #00000040;
+			margin-top: 10pt;
+			float: right;
+		}
+
+		#code-field {
+			width: 100%;
+			transition: border-color 250ms;
+			border-top-style: hidden;
+			border-right-style: hidden;
+			border-left-style: hidden;
+			border-bottom-style: solid;
+			border-bottom-width: 1.5pt;
+			border-color: gainsboro;
+			background-color: white;
+			text-transform: uppercase;
+			letter-spacing: 4pt;
+			text-align: center;
+			font-size: 60pt;
+			height: 60pt;
+		}
+
+		#code-field:placeholder-shown {
+			font-size: 16pt;
+			text-transform: none;
+			font-weight: normal;
+			color: transparent;
+			letter-spacing: 0;
+		}
+
+		#code-field:focus {
+			border-color: #f00d1e;
+			outline: none;
+		}
+
+		#code-field:invalid {
+			color: #f00d1e;
+			transition: 250ms color;
+		}
+
+		#code-label {
+			transition: color 250ms;
+			font-size: 12pt;
+			margin-top: 3pt;
+			margin-left: 2pt;
+			color: #f00d1e;
+			float: left;
+		}
+
+		#plte-overlay {
+			background-color: #00000080;
+		}
+
+		#plte-overlay > div {
+			width: 300pt;
+			background-color: white;
+			box-shadow: 0 0 7pt #00000040;
+			border-radius: 3pt;
+			font-size: 16pt;
+		}
+
+		#plte-lst {
+			width: 100%;
+			border-bottom: solid 1pt lightgrey;
+			padding: 10pt 0;
+		}
+
+		.plte-item {
+			width: 100%;
+			text-align: left;
+			background-color: white;
+			padding: 6pt 13pt 7pt;
+			display: grid;
+			grid-template-columns: auto 20pt;
+		}
+
+		.plte-item:hover {
+			background-color: #eee;
+		}
+
+		.plte-name {
+			font-size: 13pt;
+		}
+
+		.plte-info {
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			overflow: hidden;
+			font-size: 10pt;
+			display: block;
+			color: grey;
+			width: 100%;
+			grid-row: 2;
+		}
+
+		.plte-rem {
+			font-family: "Material Icons";
+			float: right;
+			margin: auto;
+			display: block;
+			grid-column: 2;
+			grid-row: span 2;
+			width: 25pt;
+			height: 25pt;
+			font-size: 13pt;
+			border-radius: 50%;
+			box-sizing: border-box;
+			background-color: transparent;
+			padding: 0 6.5pt;
+			color: grey;
+		}
+
+		.plte-rem:hover {
+			background-color: #ddd;
+		}
+
+		#snd-button {
+			float: right;
+			margin: 7pt 10pt;
+		}
+
+		.plte-button {
+			float: right;
+			margin: 8pt -6pt 0 0;
+			border: none;
+			color: black;
+			padding: 4pt 10pt;
+			text-align: center;
+			font-size: 11pt;
+			border-radius: 3pt;
+			background-color: transparent;
+		}
+
+		.plte-button:hover {
+			color: #f00d1e;
+		}
+
+		header {
+			top: 0;
+			position: fixed;
+			height: 40pt;
+			width: 100%;
+			z-index: 2;
+			padding: 10.5pt;
+			box-sizing: border-box;
+			color: white;
+			font-weight: 500;
+			font-size: 16pt;
+			background-color: #f00d1e;
+			box-shadow: 0 0 5pt #00000080;
+			display: flex;
+		}
+
+		#back-button {
+			font-family: "Material Icons";
+			background: none;
+			color: white;
+			font-size: 16pt;
+		}
+
+		#tble-label {
+			margin-left: 2pt;
+		}
+
+		#menu-grid {
+			width: min(1000pt, 100%);
+			justify-content: center;
+			margin: 45pt auto;
+			padding: 4pt;
+			display: flex;
+			flex-wrap: wrap;
+			box-sizing: border-box;
+		}
+
+		.menu-itm {
+			flex: 1;
+			min-width: 300pt;
+			height: 300pt;
+			padding: 4pt;
+			display: block;
+		}
+
+		.menu-ttl {
+			top: 0;
+			position: relative;
+			font-weight: 400;
+			display: block;
+			font-size: 16pt;
+			height: 20pt;
+			padding: 10pt 10pt 20pt;
+			background-image: linear-gradient(black, transparent);
+			color: white;
+		}
+
+		.menu-img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+			margin-top: -50pt;
+		}
+
+		.menu-inc {
+			float: right;
+			box-shadow: 0 0 5pt #ffffff80;
+			background-color: white;
+			text-align: center;
+			border-radius: 5pt;
+			box-sizing: border-box;
+			height: 20pt;
+			vertical-align: middle;
+			display: table-cell;
+		}
+
+		.menu-cnt {
+			color: black;
+			font-size: 13pt;
+			display: inline-block;
+			font-weight: 500;
+		}
+
+		.menu-unt {
+			color: gray;
+			font-size: 10pt;
+			display: inline-block;
+			font-weight: 400;
+			margin: 0 -2pt 0 2pt;
+			font-variant: petite-caps;
+			font-style: italic;
+		}
+
+		.menu-add,
+		.menu-rem {
+			color: grey;
+			font-family: "Material Icons";
+			outline: none;
+			border: none;
+			height: 100%;
+			width: 15pt;
+			padding: 0;
+		}
+
+		.menu-add {
+			border-left: solid 1pt darkgrey;
+			border-radius: 0 5pt 5pt 0;
+			padding-right: 2pt;
+			margin-left: 5pt;
+			float: right;
+		}
+
+		.menu-rem {
+			border-right: solid 1pt darkgrey;
+			border-radius: 5pt 0 0 5pt;
+			padding-left: 2pt;
+			margin-right: 5pt;
+			float: left;
+		}
+
+		.menu-add:focus {
+			outline: none;
+		}
+
+		footer {
+			grid-template-columns: auto 100pt;
+			box-shadow: 0 0 7pt #00000040;
+			background-color: white;
+			position: fixed;
+			bottom: 0;
+			width: 100%;
+			height: 40pt;
+			display: grid;
+		}
+
+		#chip-list {
+			overflow-x: scroll;
+			overflow-y: hidden;
+			white-space: nowrap;
+			padding: 0 10pt 0 10pt;
+		}
+
+		#chip-list::-webkit-scrollbar {
+			height: 2pt;
+		}
+
+		.chip {
+			padding: 3.4pt 10pt 0;
+			background-color: lightgrey;
+			width: fit-content;
+			border-radius: 22pt;
+			height: 22pt;
+			box-sizing: border-box;
+			display: inline-block;
+			margin: 9pt 5pt;
+		}
+
+		.chip > button {
+			outline: none;
+			border: none;
+			font-family: "Material Icons";
+			background: none;
+			display: block;
+			float: right;
+			font-size: 14pt;
+			color: grey;
+			margin: -0.5pt -10pt 0 2pt;
+		}
+
+		#nxt-button {
+			margin: auto;
+		}
+
+		#nxt-button:disabled {
+			box-shadow: none;
+			background-color: lightgrey;
+		}
+	</style>
+</head>
+
+<body>
+	<div id="code-overlay" class="overlay">
+		<div>
+			<input
+				id="code-field"
+				type="tel"
+				maxlength="4"
+				pattern="[0-9]+"
+				spellcheck="false"
+				placeholder="Please enter your order code."
+			/>
+			<div id="code-label" hidden>Invalid order code</div>
+			<button id="code-button" class="stp-button">NEXT</button>
+		</div>
+	</div>
+	<div id="plte-overlay" class="overlay invisible">
+		<div>
+			<div id="plte-lst"></div>
+			<button id="snd-button" class="stp-button">SEND</button>
+			<button id="add-button" class="plte-button">ADD</button>
+			<button id="clr-button" class="plte-button">CLEAR</button>
+		</div>
+	</div>
+	<header><button id="back-button">lock</button><span id="tble-label"></span></header>
+	<div id="menu-grid"></div>
+	<footer>
+		<div id="chip-list"></div>
+		<button id="nxt-button" class="stp-button">NEXT</button>
+	</footer>
+	<script>
+		const ordr_data = { pltes: {}, tble: "" };
+		var plte_idx, nxt_plte;
+		const chip_dct = {};
+		const elem_dct = {};
+		const plte_dct = {};
+		const info_lst = [];
+
+		const tlbl = document.getElementById("tble-label");
+		const grid = document.getElementById("menu-grid");
+		const chps = document.getElementById("chip-list");
+		const nxtb = document.getElementById("nxt-button");
+		const sndb = document.getElementById("snd-button");
+		const addb = document.getElementById("add-button");
+		const clrb = document.getElementById("clr-button");
+
+		const cdo = document.getElementById("code-overlay");
+		const cdf = document.getElementById("code-field");
+		const cdl = document.getElementById("code-label");
+		const cdb = document.getElementById("code-button");
+		const bkb = document.getElementById("back-button");
+
+		const plo = document.getElementById("plte-overlay");
+		const pls = document.getElementById("plte-lst");
+
+		function showQuantity(info, v) {
+			var n = info.shortname;
+			var cnt = elem_dct[n][3];
+			if (info.limit && v > info.limit) cnt.animate([{ color: "#f00d1e", offset: 0 }], 666);
+			else if (v >= 0) {
+				cnt.innerText = v;
+				if (n in chip_dct) {
+					if (!v) {
+						chip_dct[n];
+						chip_dct[n].remove();
+						delete chip_dct[n];
+					}
+				} else if (v) {
+					nxtb.disabled = false;
+					let b = document.createElement("button");
+					let c = (chip_dct[n] = document.createElement("div"));
+					b.onclick = () => setvQuantity(info, 0);
+					c.className = "chip";
+					b.innerText = "cancel";
+					c.append(info.name, b);
+					chps.append(c);
+				}
+				var c = info_lst.map((info) => [ordr_data.pltes[plte_idx][info.shortname], info.name]).filter((v) => v[0]);
+				plte_dct[plte_idx].getElementsByClassName("plte-info")[0].innerText =
+					c.map((a) => `[${a[0]}] ${a[1]}`).join(", ") || "Empty Order";
+				if (!c.length) nxtb.disabled = true;
+			}
+		}
+
+		function setvQuantity(info, v, plte = ordr_data.pltes[plte_idx]) {
+			if ((v < 0) | (info.limit && v > info.limit)) return;
+			var n = info.shortname;
+			if (v) plte[n] = v;
+			else if (n in plte) delete plte[n];
+			if (plte == ordr_data.pltes[plte_idx]) showQuantity(info, v);
+		}
+
+		function incrQuantity(info, d, plte = ordr_data.pltes[plte_idx]) {
+			setvQuantity(info, ~~plte[info.shortname] + d, plte);
+			return false;
+		}
+
+		function showPlte(n) {
+			for (let info of info_lst) showQuantity(info, ordr_data.pltes[n][info.shortname] || 0);
+			tlbl.innerText = `Table #${ordr_data.tble} - Plate #${n}`;
+		}
+
+		function setvPlte(n) {
+			if (!(n in ordr_data.pltes)) return;
+			showPlte((plte_idx = n));
+		}
+
+		function showAddPlte(n) {
+			var elem = document.createElement("button");
+			var l1 = document.createElement("span");
+			var l2 = document.createElement("span");
+			var l3 = document.createElement("button");
+			l1.className = "plte-name";
+			l2.className = "plte-info";
+			l3.className = "plte-rem";
+			l1.innerText = `Plate #${n}`;
+			l3.innerText = "delete";
+			elem.append(l1, l2, l3);
+			elem.className = "plte-item";
+			elem.onclick = () => {
+				plo.classList.add("invisible");
+				setvPlte(n);
+			};
+			l3.onclick = (event) => {
+				event.stopPropagation();
+				if (!setvRemPlte(n)) plo.classList.add("invisible");
+			};
+			plte_dct[n] = elem;
+			pls.append(elem);
+		}
+
+		function setvAddPlte() {
+			var i = nxt_plte++;
+			ordr_data.pltes[i] = {};
+			showAddPlte(i);
+			return i;
+		}
+
+		function showRemPlte(n) {
+			plte_dct[n].remove();
+			delete plte_dct[n];
+		}
+
+		function setvRemPlte(i) {
+			if (!(i in ordr_data.pltes)) return;
+			delete ordr_data.pltes[i];
+			showRemPlte(i);
+			if (--nxt_plte in ordr_data.pltes) nxt_plte++;
+			var ks = Object.keys(ordr_data.pltes),
+				l = ks.length;
+			if (i == plte_idx)
+				if (l > 0) setvPlte(ks.pop());
+				else setvClrPltes();
+			return l;
+		}
+
+		function showClrPltes() {
+			for (var n in plte_dct) {
+				plte_dct[n].remove();
+				delete plte_dct[n];
+			}
+		}
+
+		function setvClrPltes() {
+			for (var n in ordr_data.pltes) delete ordr_data.pltes[n];
+			nxt_plte = 1;
+			showClrPltes();
+			setvPlte(setvAddPlte());
+		}
+
+		cdb.onclick = async () => {
+			var r = await fetch(`/lkp_code?code=${cdf.value}`);
+			var j = await r.json();
+			if (j[0]) {
+				ordr_data.code = cdf.value;
+				ordr_data.tble = j[0].tble;
+				cdo.classList.add("invisible");
+				setvClrPltes();
+			} else cdl.hidden = false;
+		};
+		cdf.onkeydown = () => (cdl.hidden = true);
+		cdf.onkeyup = () => {
+			if (event.keyCode == 13) {
+				event.preventDefault();
+				cdb.click();
+			}
+		};
+		setTimeout(() => {
+			document.getElementById("code-field").focus();
+		}, 1000);
+
+		bkb.onclick = () => {
+			cdo.classList.remove("invisible");
+		};
+
+		nxtb.onclick = () => {
+			if (!Object.keys(chip_dct).length) sndb.animate([{ backgroundColor: "red" }, { backgroundColor: "#f00d1e" }], 1337);
+			else plo.classList.remove("invisible");
+		};
+
+		plo.onclick = () => {
+			plo.classList.add("invisible");
+		};
+
+		addb.onclick = () => {
+			setvPlte(setvAddPlte());
+			plo.classList.add("invisible");
+		};
+
+		clrb.onclick = () => {
+			setvClrPltes();
+			plo.classList.add("invisible");
+		};
+
+		sndb.onclick = () => {
+			fetch("/snd_ordr", { method: "POST", body: JSON.stringify(ordr_data) });
+			sndb.animate([{ backgroundColor: "mediumseagreen" }, { backgroundColor: "#f00d1e" }], 1337);
+			setvClrPltes();
+		};
+
+		fetch("/ls_menu").then(async (j) => {
+			info_lst.push(...(await j.json()));
+			for (let info of info_lst) {
+				let n = info.shortname;
+				let itm = document.createElement("div");
+				let ttl = document.createElement("div");
+				let inc = document.createElement("div");
+				let cnt = document.createElement("span");
+				let unt = document.createElement("span");
+				let add = document.createElement("button");
+				let rem = document.createElement("button");
+				let img = document.createElement("img");
+				elem_dct[n] = [itm, ttl, inc, cnt, add, rem, img];
+
+				img.className = "menu-img";
+				itm.className = "menu-itm";
+				ttl.className = "menu-ttl";
+				inc.className = "menu-inc";
+				cnt.className = "menu-cnt";
+				unt.className = "menu-unt";
+				add.className = "menu-add";
+				rem.className = "menu-rem";
+				add.innerText = "arrow_drop_up";
+				rem.innerText = "arrow_drop_down";
+				img.src = info.image;
+
+				add.onclick = () => incrQuantity(info, +1);
+				rem.onclick = () => incrQuantity(info, -1);
+
+				cnt.innerText = "0";
+				unt.innerText = info.unit;
+				ttl.innerText = info.name;
+
+				ttl.append(inc);
+				inc.append(rem, cnt, unt, add);
+				itm.append(ttl, img);
+				grid.appendChild(itm);
+			}
+		});
+	</script>
+</body>
diff --git a/screenshots/cashier_list.png b/screenshots/cashier_list.png
new file mode 100644
index 0000000..1d8b986
Binary files /dev/null and b/screenshots/cashier_list.png differ
diff --git a/screenshots/customer_code_entered.png b/screenshots/customer_code_entered.png
new file mode 100644
index 0000000..1a77ffc
Binary files /dev/null and b/screenshots/customer_code_entered.png differ
diff --git a/screenshots/customer_confirmation.png b/screenshots/customer_confirmation.png
new file mode 100644
index 0000000..8b280e3
Binary files /dev/null and b/screenshots/customer_confirmation.png differ
diff --git a/screenshots/customer_init.png b/screenshots/customer_init.png
new file mode 100644
index 0000000..ef03620
Binary files /dev/null and b/screenshots/customer_init.png differ
diff --git a/screenshots/customer_selection.png b/screenshots/customer_selection.png
new file mode 100644
index 0000000..14ab56e
Binary files /dev/null and b/screenshots/customer_selection.png differ
diff --git a/screenshots/expedite_order.png b/screenshots/expedite_order.png
new file mode 100644
index 0000000..0f798ae
Binary files /dev/null and b/screenshots/expedite_order.png differ