Add some status border arround QR-Code. Update README incl. UI-image.…

… Added version to UI footer.

README.md

@@ -1,9 +1,12 @@
 # BoardingPass QR-Code Generator
 
-This is a frontend for the Barcode Generator from [Shooshx](https://shooshx.github.io/BoardingBarcode/). Its has the following additional features:
+<img src="https://img.shields.io/github/deployments/bitnulleins/BoardingPass-QR-Code-Generator/github-pages?label=deployment"> <img src="https://img.shields.io/github/v/tag/bitnulleins/BoardingPass-QR-Code-Generator?label=version"> <img src="https://img.shields.io/github/stars/bitnulleins/BoardingPass-QR-Code-Generator">
+
+This is a frontend for the Barcode Generator from [Shooshx](https://github.com/shooshx/BoardingBarcode). Its has the following additional features:
 
 * Responsive lightweight UI
 * A way to save permalink for generated QR Code
+* Upload existing QR Code (cropped)
 * Settings modal box
 
 You can open the tool [here](https://bitnulleins.github.io/BoardingPass-QR-Code-Generator/).
@@ -28,7 +31,8 @@ Surname | Booking-Ref      ...
 
 This information is then encoded in a QR code so that it can be read by machine by the inspection bodies. There are two standards "aztec" (2D QR code) or PDF417 (1D code known by many airlines). The raw text can now be manipulated to encode other information.
 
-That's why it's so important to never show your board card on social media. There is a lot of personal information on it.
+> [!IMPORTANT]
+> That's why it's so important to never show your board card on social media. There is a lot of personal information on it.
 
 ## Other useful info
 

css/style.css

@@ -19,7 +19,6 @@ h1 {
 	margin:0;
 }
 
-
 h2 {
 	margin-top:0px;
 	text-transform:uppercase;
@@ -170,8 +169,8 @@ input, select {
 	width:100%;
 	text-align: center;
 	font-size:0.8em;
+	z-index:1000;
 	opacity: 0.3;
-	text-transform: uppercase;
 }
 
 @media screen and (max-width: 500px) {

index.html

@@ -57,19 +57,19 @@ <h2>Settings</h2>
 						</div>
 						<div class="column">
 							<label for="to">To</label>
-							<input id="toEd" for="to" type="text" value="" placeholder="ABC" oninput="formatField('to', true)">
+							<input id="toEd" for="to" type="text" value="" placeholder="FRA" oninput="formatField('to', true)">
 						</div>
 						<div class="column">
 							<label for="flightOps">Flight Operator</label>
-							<input id="fOpEd" name="flightOps" type="text" placeholder="XX" value="" oninput="formatField('fOp',true)">
+							<input id="fOpEd" name="flightOps" type="text" placeholder="LH" value="" oninput="formatField('fOp',true)">
 						</div>
 						<div class="column">
 							<label for="number">Flightnumber</label>
-							<input id="fNumEd" name="number" type="text" value="" placeholder="0000" oninput="formatField('fNum', true)">
+							<input id="fNumEd" name="number" type="text" value="" placeholder="1234" oninput="formatField('fNum', true)">
 						</div>
 						<div class="column">
 							<label for="seat">Seat</label>
-							<input id="seatNumEd" name="seat" type="text" value="" placeholder="10F" oninput="formatSeat(true)">
+							<input id="seatNumEd" name="seat" type="text" value="" placeholder="35A" oninput="formatSeat(true)">
 						</div>
 						<div class="column">
 							<label for="class">Class</label>
@@ -105,7 +105,7 @@ <h2>QR Code</h2>
 				</div>
 			</div>
 		</div>
-		<div id="copyright">Frontend by <a href="https://github.com/bitnulleins/BoardingPass-QR-Code-Generator">bitnulleins</a> | Backend by <a href="https://shooshx.github.io/BoardingBarcode/">Shooshx</a></div>
+		<div id="copyright">USE AT OWN RISK</div>
 		<input id="dayOfYearEd" class="hide" value="0">
 		<select id="eccSelect" class="hide" onchange="update()">
 			<option value="0">-1</option>

js/frontend.js

@@ -9,6 +9,12 @@ var fields = {}
 var run, getDayOfYear
 var ctx = null
 
+fetch('https://api.github.com/repos/bitnulleins/BoardingPass-QR-Code-Generator/releases/latest')
+.then(response => response.json())
+.then(data => {
+	document.getElementById('copyright').innerHTML += " | " + data.tag_name
+})
+
 var fldDef = {
 	'bookRef': { pad: 7, desc:"Booking Ref"},
 	'from':    { pad: 3, desc:"From"},
@@ -44,24 +50,11 @@ function start()
 
 	// Update
 	format()
-	update_bookmark()
+	update()
 }
 
-function update_bookmark() {
-	let queries = []
-	queries['name']				= fields.name
-	queries['fOp']				= fields.fOp
-	queries['fNum']				= fields.fNum
-	queries['from']				= fields.from
-	queries['to']				= fields.to
-	queries['date']				= fields.date
-	queries['seat']				= fields.seat
-	queries['bookRef']			= fields.bookRef
-	queries['seqNum']			= fields.seqNum
-	queries['cls']				= fields.cls
-
+function update_bookmark(queries) {
 	let query = Object.entries(queries).map(([k,v]) => `${k}=${v}`)
-
 	document.getElementById('bookmark').href='?' + query.join('&')
 }
 
@@ -78,7 +71,25 @@ function err(msg) {
 
 function update(fromRaw)
 {
-	update_bookmark()
+	let queries = []
+	queries['name']				= fields.name
+	queries['fOp']				= fields.fOp
+	queries['fNum']				= fields.fNum
+	queries['from']				= fields.from
+	queries['to']				= fields.to
+	queries['date']				= fields.date
+	queries['seat']				= fields.seat
+	queries['bookRef']			= fields.bookRef
+	queries['seqNum']			= fields.seqNum
+	queries['cls']				= fields.cls
+
+	if (Object.values(queries).includes('')) {
+		document.querySelector('.qrcode').style.border = '4px solid red'
+	} else {
+		document.querySelector('.qrcode').style.border = '4px solid green'
+	}
+
+	update_bookmark(queries)
 
 	if (!fromRaw)
 		textEdit.innerHTML = textIn