Demo: Update design, layout and demo script.

css/demo.css

@@ -10,11 +10,12 @@
  */
 
 body {
-  max-width: 750px;
+  max-width: 990px;
   margin: 0 auto;
   padding: 1em;
   font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
     Arial, sans-serif;
+  -webkit-text-size-adjust: 100%;
   line-height: 1.4;
   background: #212121;
   color: #dedede;
@@ -29,65 +30,58 @@ a:visited {
 a:hover {
   color: #98c379;
 }
-figure,
-tr {
-  background: #363636;
-}
-tr:nth-child(odd) {
-  background: #414141;
-}
-td,
-th {
-  padding: 10px;
-  text-align: left;
-}
-table {
-  width: 100%;
-  word-wrap: break-word;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-figure {
-  margin: 0;
-  padding: 10px;
-  border-radius: 5px;
-  display: inline-block;
-}
-figure,
-table {
-  margin-bottom: 20px;
-}
-img,
-canvas {
-  border: 0;
-  vertical-align: middle;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 1.5em;
-  margin-bottom: 0.5em;
-}
 h1 {
   margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+label {
+  display: inline-block;
+  margin-bottom: 0.25em;
 }
 button,
 input,
-select,
 textarea {
+  -webkit-appearance: none;
   box-sizing: border-box;
+  margin: 0;
+  padding: 0.5em 0.75em;
   font-family: inherit;
   font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-  padding: 5px;
+  line-height: 1.4;
+  background: #414141;
+  color: #dedede;
+  border: 1px solid #363636;
+  border-radius: 5px;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.07);
+}
+input,
+textarea {
+  display: block;
+  width: 100%;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.07);
 }
-input[type='file'] {
-  padding: inherit;
-  max-width: 100%;
+textarea {
+  display: block;
+  overflow: auto;
+}
+button {
+  background: #3c76a7;
+  background: linear-gradient(180deg, #3c76a7, #225c8d);
+  border-color: #225c8d;
+  color: #fff;
+}
+button[type='submit'] {
+  background: #6fa349;
+  background: linear-gradient(180deg, #6fa349, #568a30);
+  border-color: #568a30;
+}
+button[type='reset'] {
+  background: #d79435;
+  background: linear-gradient(180deg, #d79435, #be7b1c);
+  border-color: #be7b1c;
+}
+button:active {
+  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.5);
 }
 
 @media (prefers-color-scheme: light) {
@@ -104,22 +98,15 @@ input[type='file'] {
   a:hover {
     color: #6fa349;
   }
-  figure,
-  tr {
+  input,
+  textarea {
     background: #fff;
+    border-color: #d1d1d1;
     color: #212121;
   }
-  tr:nth-child(odd) {
-    background: #f6f6f6;
-  }
-}
-
-#input,
-#result {
-  width: 100%;
 }
 
-@media (min-width: 481px) {
+@media (min-width: 540px) {
   #navigation {
     list-style: none;
     padding: 0;

index.html

@@ -53,17 +53,26 @@ <h1>JavaScript MD5 Demo</h1>
       <li><a href="test/">Test</a></li>
       <li><a href="https://blueimp.net">&copy; Sebastian Tschan</a></li>
     </ul>
+    <script src="js/md5.js"></script>
     <form>
-      <h2>Input</h2>
-      <textarea rows="6" id="input"></textarea>
-      <br />
-      <button type="submit" id="calculate">Calculate</button>
-      <button type="reset" id="reset">Reset</button>
-      <h2>Result</h2>
-      <input id="result" />
-      <br />
+      <p>
+        <label for="input">Input</label>
+        <textarea rows="6" id="input"></textarea>
+      </p>
+      <p>
+        <button
+          type="submit"
+          id="calculate"
+          onclick="result.value=md5(input.value);return false"
+        >
+          Calculate
+        </button>
+        <button type="reset" id="reset">Reset</button>
+      </p>
+      <p>
+        <label for="result">Result</label>
+        <input id="result" readonly />
+      </p>
     </form>
-    <script src="js/md5.js"></script>
-    <script src="js/demo/demo.js"></script>
   </body>
 </html>