Layout basic page with inputs/output

Author: wimpyprogrammer

demo/index.html

@@ -33,15 +33,63 @@
 	</noscript>
 	<!-- End Google Tag Manager (noscript) -->
 
-	<p>Hello world! This is HTML5 Boilerplate.</p>
-
-	<footer>
-		<p>&copy; <a href="http://www.wimpyprogrammer.com/">WimpyProgrammer.com</a> 2018</p>
-		<p>
-			<a href="https://github.com/wimpyprogrammer/collapse-regex-char-set">Fork me on GitHub</a>
-			or <a href="https://github.com/wimpyprogrammer/collapse-regex-char-set/issues">report an issue</a>
-		</p>
-	</footer>
+	<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+		<a class="navbar-brand" href="javascript:void(0)">RegEx Pattern Creator</a>
+	</nav>
+
+	<div class="container">
+		<form class="jumbotron">
+			<p class="lead">Generate a concise Regular Expression.</p>
+
+			<div class="form-group">
+				<label for="words">
+					Words or phrases the Regular Expression should match:
+				</label>
+				<textarea id="words" class="form-control"></textarea>
+			</div>
+
+			<div class="form-group">
+				<label for="delimiter">
+					Words/phrases are separated by:
+				</label>
+				<select id="delimiter" class="form-control">
+					<option value="," selected="selected">Comma</option>
+					<option value=" ">Space</option>
+					<option value="\n">Newline</option>
+				</select>
+			</div>
+
+			<div class="form-group form-check">
+				<input type="checkbox" checked="checked" id="trim-whitespace" class="form-check-input">
+				<label for="trim-whitespace">
+					Trim whitespace surrounding each word/phrase
+				</label>
+			</div>
+
+			<div class="form-group">
+				<button type="button" class="btn btn-primary">
+					Generate Regular Expression
+				</button>
+			</div>
+		</form>
+
+		<section class="output">
+			<div class="form-group">
+				<label for="output">
+					Matching Regular Expression:
+				</label>
+				<textarea readonly="readonly" id="output" class="form-control"></textarea>
+			</div>
+		</section>
+
+		<footer>
+			<p>&copy; <a href="http://www.wimpyprogrammer.com/">WimpyProgrammer.com</a> 2018</p>
+			<p>
+				<a href="https://github.com/wimpyprogrammer/collapse-regex-char-set">Fork me on GitHub</a>
+				or <a href="https://github.com/wimpyprogrammer/collapse-regex-char-set/issues">report an issue</a>
+			</p>
+		</footer>
+	</div>
 
 </body>