Add more css and stuff

5 years ago · 5727846bad
4 changed files with 37 additions and 10 deletions
--- a/www/app.html
+++ b/www/app.html
@ -11,9 +11,7 @@
    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
    <script src="./bootstrap.js"></script>
    <h1>DNA Transcription &amp; Translation</h1>
-    <div id="codons">
-      
-    </div>
+    <div id="codons"></div>
    <div id="footer">
      <p>© 2021 Ravi Shah</p>
    </div>
--- a/www/css/styles.css
+++ b/www/css/styles.css
@ -39,6 +39,27 @@ h1, h2 {
    color: white;
 }

+.input-div-container {
+  height: 100%;
+  width: 100%;
+  margin: 0 auto;
+  padding: 10px;
+  position: relative;
+  text-align: center;
+}
+
 .input-div {
+  height: 50%;
+  width: 50%;
+  background-color: var(--secondary-bg-color);
+  position: absolute;
+  margin-left: auto;
+  margin-right: auto;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

+#footer {
+  text-align: center;
 }
--- a/www/index.html
+++ b/www/index.html
@ -4,18 +4,27 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="description" content="Easily transcribe and translate DNA into messenger RNA and amino acids">
+    <meta name="application-name" content="DNA Transcription and Translation App">
+    <meta name="theme-color" content="#568ea3">
    <title>DNA Transcription &amp; Translation</title>
    <link rel="stylesheet" href="/css/styles.css">
  </head>
  <body>
    <noscript>This page contains webassembly and javascript content, please enable javascript in your browser.</noscript>
-    <h1>Please enter the DNA strand in the space below:</h1>
-    <form class="dna-input" action="app.html" method="get">
-      <input type="text" name="strand">
-      <input type="submit" value="Submit">
-    </form>
+    <div class="input-div-container">
+      <div class="input-div">
+        <form class="dna-input" action="app.html" method="get">
+          <label>
+            <h1>Please enter the DNA strand in the space below:</h1>
+            <input type="text" name="strand">
+          </label>
+          <input type="submit" value="Submit">
+        </form>
+      </div>
+    </div>
    <div id="footer">
      <p>© 2021 Ravi Shah</p>
+      <br />
    </div>
  </body>
 </html>
--- a/www/webpack.config.js
+++ b/www/webpack.config.js
@ -11,6 +11,5 @@ module.exports = {
  mode: "development",
  plugins: [
    new CopyWebpackPlugin(['index.html'])
-    new CopyWebpackPlugin(['app.html'])
  ],
 };