Make the text input pretty

4 years ago · 0295f8c60c
2 changed files with 91 additions and 21 deletions
--- a/dist/index.html
+++ b/dist/index.html
@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="qr.css">
@ -8,8 +9,14 @@
 <script src="qr.js"></script>
 </head>
 <body onload="init()">
-	<input id="qrtext" type="text" placeholder="Enter text" oninput="makeCode(this)"/>
-	<br />
-	<div id="qrcode"></div>
+	<p>
+		<span class="input">
+			<input id="qrtext" type="text" placeholder="Enter text" oninput="makeCode(this)"/>
+			<span></span>
+		</span>
+	</p>
+	<p>
+		<div id="qrcode"></div>
+	</p>
 </body>
 </html>
--- a/dist/qr.css
+++ b/dist/qr.css
@ -1,24 +1,87 @@
+html {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  line-height: 1.5;
+  font-size: 1em;
+}
+
 body {
-	background-color: #ccc;
+  text-align: center;
+  display: initial;
+  background-color: #ccc;
+  align-items: center;
+  justify-content: center;
 }

-#qrtext {
-	max-width: 512px;
-	display: block;
-	margin: 0 auto;
-	width:80%;
-	padding: 5px 7px;
-	border: 1px solid #000;
-	border-radius: 10px;
-	background-color: #f0f0f0;
+html,
+body {
+  height: 100%;
 }
+
 #qrcode {
-	margin: 0 auto;
-	width:256px;
-	height:256px;
-	margin-top:15px;
-	padding: 10px;
-	border: 1px solid #000;
-	border-radius: 10px;
-	background-color: #f0f0f0;
+  margin: 0 auto;
+  width:256px;
+  height:256px;
+  margin-top:15px;
+  padding: 10px;
+  border: 1px solid #000;
+  border-radius: 10px;
+  background-color: #f0f0f0;
+}
+
+input {
+  font-family: inherit;
+  line-height: inherit;
+  font-size: 100%;
+  color: #2e3750;
+  min-width: 12em;
+}
+
+.input {
+  position: relative;
+  font-size: 1.5em;
+  background: linear-gradient(21deg, #444444, #444444);
+  padding: 3px;
+  display: inline-block;
+  border-radius: 9999em;
+}
+.input *:not(span) {
+  position: relative;
+  display: inherit;
+  border-radius: inherit;
+  margin: 0;
+  border: none;
+  outline: none;
+  padding: 0 0.325em;
+  z-index: 1;
+}
+.input *:not(span):focus + span {
+  opacity: 1;
+  transform: scale(1);
+}
+.input span {
+  transform: scale(0.993, 0.94);
+  transition: transform 0.5s, opacity 0.25s;
+  opacity: 0;
+  position: absolute;
+  z-index: 0;
+  margin: 4px;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: inset 0 0 0 3px #fff, 0 0 0 4px #fff, 3px -3px 30px #272727, -3px 3px 30px #2C5D78;
+}
+
+::-moz-placeholder {
+  color: #cbd0d5;
+}
+
+:-ms-input-placeholder {
+  color: #cbd0d5;
+}
+
+::placeholder {
+  color: #cbd0d5;
 }