From 6fb34fddc19dccd0e76fe5d12e00fa0bd2ef13e2 Mon Sep 17 00:00:00 2001
From: Project Nayuki <me@nayuki.io>
Date: Wed, 28 Jul 2021 18:31:33 +0000
Subject: [PATCH] Slightly improved the visual appearance of web pages for
 TypeScript/JavaScript demos, also tweaked a bit of HTML code.

---
 .../qrcodegen-input-demo.html                 | 21 ++++++++++++++++---
 .../qrcodegen-output-demo.html                | 11 +++++++++-
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/typescript-javascript/qrcodegen-input-demo.html b/typescript-javascript/qrcodegen-input-demo.html
index 3c77c9e..cc46d6e 100644
--- a/typescript-javascript/qrcodegen-input-demo.html
+++ b/typescript-javascript/qrcodegen-input-demo.html
@@ -29,6 +29,12 @@
 			html {
 				font-family: sans-serif;
 			}
+			h1 {
+				text-align: center;
+			}
+			table {
+				border-collapse: collapse;
+			}
 			td {
 				vertical-align: top;
 				padding-top: 0.2em;
@@ -38,6 +44,10 @@
 				white-space: pre;
 				padding-right: 0.5em;
 			}
+			input[type=number], input[type=text], textarea {
+				font-size: inherit;
+				font-family: inherit;
+			}
 			input[type=radio], input[type=checkbox] {
 				margin: 0em;
 				padding: 0em;
@@ -46,6 +56,11 @@
 				margin-right: 0.8em;
 				padding-left: 0.2em;
 			}
+			hr {
+				margin: 2em 0em;
+				border: none;
+				border-top: 0.1em solid #A0A0A0;
+			}
 		</style>
 	</head>
 	
@@ -56,12 +71,12 @@
 			<p>(Are the JavaScript files missing?)</p>
 			<p>(The JavaScript code needs to be compiled from the TypeScript code.)</p>
 		</div>
-		<form id="loaded" style="display:none" action="#" method="get" onsubmit="return false;">
-			<table class="noborder" style="width:100%">
+		<form id="loaded" style="display:none" onsubmit="event.preventDefault();">
+			<table>
 				<tbody>
 					<tr>
 						<td><strong>Text string:</strong></td>
-						<td style="width:100%"><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:100%; max-width:30em; height:5em; font-family:inherit"></textarea></td>
+						<td><textarea placeholder="Enter your text to be put into the QR Code" id="text-input" style="width:30em; height:5em"></textarea></td>
 					</tr>
 					<tr>
 						<td><strong>QR Code:</strong></td>
diff --git a/typescript-javascript/qrcodegen-output-demo.html b/typescript-javascript/qrcodegen-output-demo.html
index f356d6f..697b762 100644
--- a/typescript-javascript/qrcodegen-output-demo.html
+++ b/typescript-javascript/qrcodegen-output-demo.html
@@ -29,6 +29,9 @@
 			html {
 				font-family: sans-serif;
 			}
+			h1 {
+				text-align: center;
+			}
 			#output p {
 				margin-top: 0.5em;
 				margin-bottom: 0.5em;
@@ -36,7 +39,13 @@
 			#output canvas {
 				display: block;
 				margin-bottom: 1.5em;
-				border: 1px solid #C0C0C0;
+				border: 0.2em solid #D0D0D0;
+				border-radius: 0.4em;
+			}
+			hr {
+				margin: 2em 0em;
+				border: none;
+				border-top: 0.1em solid #A0A0A0;
 			}
 		</style>
 	</head>