microformats · btrem · Dec 9, 2022 · Dec 9, 2022 · Dec 9, 2022 · Dec 9, 2022
diff --git a/app.py b/app.py
@@ -17,6 +17,16 @@
     help="Run application in debug mode",
 )
 
+parser.add_option(
+    "-p",
+    "--port",
+    action="store",
+    type="int",
+    dest="port",
+    default="8080",
+    help="Change dev server port (default is 8080)",
+)
+
 (options, args) = parser.parse_args()
 
 app = Flask(__name__)
@@ -70,4 +80,4 @@ def fetch_mf2(url):
 
 
 if options.debug:
-    app.run(debug=True, port=8080)
+    app.run(debug=True, port=options.port)
diff --git a/templates/index.jinja2 b/templates/index.jinja2
@@ -1,120 +1,158 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
   <title>Python Microformats Parser</title>
 
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
   <style>
-    form label {
-      font-weight: bold;
-      display: block;
+
+    body {
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     }
 
-    form textarea,
-    form input[type=url] {
-      font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+    @media screen and (min-width: 35em) {
+      body {
+        margin-left: 10%;
+        margin-right: 10%;
+      }
+    }
+
+    h1,
+    h2 {
+      font-weight: 500;
+    }
+
+    h1 {
+      font-size: 2.5rem;
+    }
+
+    section {
+      border-bottom: 1px solid #9d9da9;
+      padding-bottom: 2em;
     }
 
-    form .form-control:disabled {
-      cursor: default;
-      background: #efefef;
-      color: black;
+    form > p {
+      margin-bottom: 1.5em;
     }
 
-    .help {
-      color: #999;
-      font-weight: normal;
+    label {
+      font-weight: bold;
     }
 
-    #json {
-      font-size: 0.7em;
+    label[for] {
+      display: block;
+      width: fit-content;
+      margin-bottom: 0.5em;
     }
 
-    /* disable bootstrap animations */
-    .form-control, .btn {
-      transition: none;
+    textarea,
+    input[type=url] {
+      box-sizing: border-box;
+      font-family: "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      font-size: 1.25rem;
+    	padding: 0.75rem 1.5rem;
+      width: 100%;
     }
+
+    button {
+	    color: rgb(255, 255, 255);
+	    background-color: rgb(92, 184, 92);
+      font-size: 1.25rem;
+      padding: 0.75rem 1.5rem;
+      border-radius: 0.3rem;
+    }
+
+    li {
+      margin-bottom: 0.5em;
+    }
+
   </style>
   <link rel="icon" href="favicon.ico" type="image/x-icon">
 </head>
 
 <body>
-  <main id="mf2" class="container">
-
-    <h1 class="mt-5 mb-3">
-      Microformats Parser (Python)
-      {{ mf2py_version }}
-    </h1>
-
-    <form action="/" accept-charset="UTF-8" method="get">
-      <div class="form-group">
-        <label for="url">Enter a URL</label>
-        <input id="url" class="form-control form-control-lg" type="url" name="url"  placeholder="https://example.com/person.html" />
-      </div>
-
-      <div class="form-group">
-        <label for="parser">Parser</label>
-        <select id="parser" name="parser">
-          <option>html5lib</option>
-          <option>lxml</option>
-          <option>html.parser</option>
-        </select>
-      </div>
-
-      <div class="form-check">
-        <label title="mf2util interprets certain post types (currently h-entry and h-event) and returns a normalized result" class="form-check-label" for="util">
-          <input id="util" name="util" class="form-check-input" type="checkbox" value="true">
-          Process with mf2util
-        </label>
-      </div>
-
-      <button type="submit" class="btn btn-lg btn-success">Parse</button>
-    </form>
-
-    <h2 class="h4 my-5">OR parse just a snippet of HTML</h2>
-
-    <form method="post" action="/" class="mb-5">
-      <div class="form-group">
-        <label for="doc">HTML</label>
-        <textarea id="doc" name="doc" rows="6" class="form-control form-control-lg"></textarea>
-      </div>
-
-      <div class="form-group">
-        <label for="url">Base URL</label>
-        <input id="url" name="url" type="url" class="form-control form-control-lg" />
-      </div>
-
-      <div class="form-group">
-        <label for="parser">Parser</label>
-        <select id="parser" name="parser">
-          <option>html5lib</option>
-          <option>lxml</option>
-          <option>html.parser</option>
-        </select>
-      </div>
-
-      <button type="submit" class="btn btn-lg btn-success">Parse</button>
-    </form>
-
-    <footer class="my-5">
-      <ul>
-        <li><a href="https://microformats.io">About Microformats</a></li>
-        <li><a href="https://github.com/microformats/microformats-parser-website-python">Source code for this site</a></li>
-        <li><a href="https://github.com/microformats/mf2py">Source code for the Microformats mf2py Parser</a></li>
-
-        <li>
-          Other Microformats Parser websites:
-          <a href="https://go.microformats.io">Go</a>,
-          <a href="https://node.microformats.io">Node</a>,
-          <a href="https://php.microformats.io">PHP</a>, and
-          <a href="https://ruby.microformats.io">Ruby</a>.
-        </li>
-      </ul>
-    </footer>
+
+  <h1>Microformats Parser (Python) {{ mf2py_version }}</h1>
+
+  <main>
+
+    <section>
+
+      <form action="/" accept-charset="UTF-8">
+        <p>
+          <label for="url">Enter a URL</label>
+          <input required id="url" type="url" name="url" placeholder="https://example.com/person.html">
+        </p>
+
+        <p>
+          <label for="parser">Parser</label>
+          <select id="parser" name="parser">
+            <option>html5lib</option>
+            <option>lxml</option>
+            <option>html.parser</option>
+          </select>
+        </p>
+
+        <p>
+          <label title="mf2util interprets certain post types (currently h-entry and h-event) and returns a normalized result">
+            <input name="util" class="form-check-input" type="checkbox" value="true">
+            Process with mf2util
+          </label>
+        </p>
+
+        <button type="submit">Parse</button>
+      </form>
+
+    </section>
+
+    <section>
+
+      <h2>OR parse just a snippet of HTML</h2>
+
+      <form method="post" action="/">
+        <p>
+          <label for="doc">HTML</label>
+          <textarea required id="doc" name="doc" rows="6"></textarea>
+        </p>
+
+        <p>
+          <label for="url">Base URL</label>
+          <input id="url" name="url" type="url">
+        </p>
+
+        <p>
+          <label for="parser">Parser</label>
+          <select id="parser" name="parser">
+            <option>html5lib</option>
+            <option>lxml</option>
+            <option>html.parser</option>
+          </select>
+        </p>
+
+        <button type="submit">Parse</button>
+      </form>
+
+    </section>
 
   </main>
+
+  <footer>
+    <ul>
+      <li><a href="https://microformats.io">About Microformats</a></li>
+      <li><a href="https://github.com/microformats/microformats-parser-website-python">Source code for this site</a></li>
+      <li><a href="https://github.com/microformats/mf2py">Source code for the Microformats mf2py Parser</a></li>
+
+      <li>
+        Other Microformats Parser websites:
+        <a href="https://go.microformats.io">Go</a>,
+        <a href="https://node.microformats.io">Node</a>,
+        <a href="https://php.microformats.io">PHP</a>, and
+        <a href="https://ruby.microformats.io">Ruby</a>.
+      </li>
+    </ul>
+  </footer>
+
 </body>
 </html>