wip

* web sites are placeholders for usage

.gitignore

@@ -0,0 +1,2 @@
+*~
+*.pyc

main/app/__init__.py

@@ -0,0 +1,7 @@
+#!/usr/bin/env python3
+
+from flask import Flask
+
+app = Flask(__name__)
+
+from app import routes

main/app/routes.py

@@ -0,0 +1,52 @@
+#!/usr/bin/env python3
+
+from flask import render_template, url_for
+from app import app
+
+@app.route("/")
+@app.route("/index")
+def index():
+  usr = { "username":"clementine", "content" : "index"  }
+  return render_template( usr["content"] + '.html', title='home', user=usr)
+
+@app.route("/manage_card")
+def manage_card():
+  usr = { "username":"clementine" }
+  return render_template( 'manage_card.html', title='home', user=usr)
+
+@app.route("/manage_user")
+def manage_user():
+  usr = { "username":"clementine" }
+  return render_template( 'manage_user.html', title='home', user=usr)
+
+@app.route("/reissue_card")
+def reissue_card():
+  usr = { "username":"clementine" }
+  return render_template( 'reissue_card.html', title='home', user=usr)
+
+@app.route("/recycle_card")
+def recycle_card():
+  usr = { "username":"clementine" }
+  return render_template( 'recycle_card.html', title='home', user=usr)
+
+@app.route("/add_card_block")
+def add_card_block():
+  usr = { "username":"clementine" }
+  return render_template( 'add_card_block.html', title='home', user=usr)
+
+@app.route("/process_pending_card")
+def process_pending_card():
+  usr = { "username":"clementine" }
+  return render_template( 'process_pending_card.html', title='home', user=usr)
+
+@app.route("/search")
+def search():
+  usr = { "username":"clementine" }
+  return render_template( 'search.html', title='home', user=usr)
+
+@app.route("/help")
+def help():
+  usr = { "username":"clementine" }
+  return render_template( 'help.html', title='home', user=usr)
+
+

main/app/static/css/bootstrap-reboot.css

@@ -0,0 +1,327 @@
+/*!
+ * Bootstrap Reboot v4.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * Forked from Normalize.css, licensed MIT (https://github.com/necolas/normalize.css/blob/master/LICENSE.md)
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  font-family: sans-serif;
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
+  display: block;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  text-align: left;
+  background-color: #fff;
+}
+
+[tabindex="-1"]:focus:not(:focus-visible) {
+  outline: 0 !important;
+}
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+abbr[title],
+abbr[data-original-title] {
+  text-decoration: underline;
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+  cursor: help;
+  border-bottom: 0;
+  -webkit-text-decoration-skip-ink: none;
+  text-decoration-skip-ink: none;
+}
+
+address {
+  margin-bottom: 1rem;
+  font-style: normal;
+  line-height: inherit;
+}
+
+ol,
+ul,
+dl {
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+ol ol,
+ul ul,
+ol ul,
+ul ol {
+  margin-bottom: 0;
+}
+
+dt {
+  font-weight: 700;
+}
+
+dd {
+  margin-bottom: .5rem;
+  margin-left: 0;
+}
+
+blockquote {
+  margin: 0 0 1rem;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+small {
+  font-size: 80%;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 75%;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -.25em;
+}
+
+sup {
+  top: -.5em;
+}
+
+a {
+  color: #007bff;
+  text-decoration: none;
+  background-color: transparent;
+}
+
+a:hover {
+  color: #0056b3;
+  text-decoration: underline;
+}
+
+a:not([href]) {
+  color: inherit;
+  text-decoration: none;
+}
+
+a:not([href]):hover {
+  color: inherit;
+  text-decoration: none;
+}
+
+pre,
+code,
+kbd,
+samp {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 1em;
+}
+
+pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  overflow: auto;
+}
+
+figure {
+  margin: 0 0 1rem;
+}
+
+img {
+  vertical-align: middle;
+  border-style: none;
+}
+
+svg {
+  overflow: hidden;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+caption {
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  color: #6c757d;
+  text-align: left;
+  caption-side: bottom;
+}
+
+th {
+  text-align: inherit;
+}
+
+label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+}
+
+button {
+  border-radius: 0;
+}
+
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+button,
+input {
+  overflow: visible;
+}
+
+button,
+select {
+  text-transform: none;
+}
+
+select {
+  word-wrap: normal;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+button:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled) {
+  cursor: pointer;
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+input[type="radio"],
+input[type="checkbox"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"],
+input[type="month"] {
+  -webkit-appearance: listbox;
+}
+
+textarea {
+  overflow: auto;
+  resize: vertical;
+}
+
+fieldset {
+  min-width: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+
+legend {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  padding: 0;
+  margin-bottom: .5rem;
+  font-size: 1.5rem;
+  line-height: inherit;
+  color: inherit;
+  white-space: normal;
+}
+
+progress {
+  vertical-align: baseline;
+}
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+  cursor: pointer;
+}
+
+template {
+  display: none;
+}
+
+[hidden] {
+  display: none !important;
+}
+/*# sourceMappingURL=bootstrap-reboot.css.map */

main/app/static/css/simple-sidebar.css

@@ -0,0 +1,57 @@
+/*!
+ * Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template-overviews/simple-sidebar)
+ * Copyright 2013-2019 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-simple-sidebar/blob/master/LICENSE)
+ */
+body {
+  overflow-x: hidden;
+}
+
+#sidebar-wrapper {
+  min-height: 100vh;
+  margin-left: -15rem;
+  -webkit-transition: margin .25s ease-out;
+  -moz-transition: margin .25s ease-out;
+  -o-transition: margin .25s ease-out;
+  transition: margin .25s ease-out;
+}
+
+#sidebar-wrapper .sidebar-heading {
+  padding: 0.875rem 1.25rem;
+  font-size: 1.2rem;
+}
+
+#sidebar-wrapper .list-group {
+  width: 15rem;
+}
+
+#page-content-wrapper {
+  min-width: 100vw;
+}
+
+#wrapper.toggled #sidebar-wrapper {
+  margin-left: 0;
+}
+
+.row-shade {
+  background-color: #e9e9e9;
+}
+
+/*
+@media (min-width: 768px) {
+*/
+  #sidebar-wrapper {
+    margin-left: 0;
+  }
+
+  #page-content-wrapper {
+    min-width: 0;
+    width: 100%;
+  }
+
+  #wrapper.toggled #sidebar-wrapper {
+    margin-left: -15rem;
+  }
+/*
+}
+*/

main/app/templates/add_card_block.html

@@ -0,0 +1,260 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">Add Card Block</h1>
+
+  <div class='container'>
+
+    <!-- container row -->
+    <div class='row'>
+
+      <div class='col-10'>
+
+        <!-- recycle card lookup -->
+        <div class='row'>
+
+          <div class='col-6'>
+
+            <div class='row row-shade'>
+              <div class='col-5'>Start MagStripe</div>
+              <div class='col-7'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-5'>Start RFID</div>
+              <div class='col-3'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-4'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-5'>Group</div>
+              <div class='col-7'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Org A</option>
+                    <option>Org B</option>
+                    <option>Org C</option>
+                  </select>
+                </div>
+
+              </div>
+            </div>
+
+          </div>
+
+          <div class='col-6'>
+
+            <div class='row row-shade'>
+              <div class='col-5'>End MagStripe</div>
+              <div class='col-7'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-5'>End RFID</div>
+              <div class='col-3'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-4'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+            </div>
+
+          </div>
+
+
+        <!-- row -->
+        </div>
+
+        <br>
+
+        <div class='row'>
+          <div class='col-12'>
+            <button type='button' class='btn btn-secondary btn-sm'>Add Card Block</button>
+          </div>
+        </div>
+
+
+        <br>
+        <br>
+        <br>
+
+        <!-- initial pass -->
+        <div class='row'>
+
+          <div class='col-10'>
+            <h3>Initial Pass</h3>
+          </div>
+          <div class='col-2'></div>
+
+        </div>
+
+        <div class='row'>
+
+          <div class='col-10'>
+
+
+            <!-- none -->
+            <div class='row row-shade'>
+              <div class='col-1'>
+                <input type='radio' aria-label='pass-none'>
+              </div>
+              <div class='col-2'>None</div>
+              <div class='col-3'></div>
+              <div class='col-3'></div>
+              <div class='col-3'></div>
+            </div>
+
+            <!-- multi ride -->
+            <div class='row '>
+              <div class='col-1'>
+                <input type='radio' aria-label='initial-pass-multi-ride'>
+              </div>
+              <div class='col-2'>Multi Ride</div>
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Adult</option>
+                    <option>Half</option>
+                  </select>
+                </div>
+
+
+              </div>
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Region 0</option>
+                    <option>Region 1</option>
+                  </select>
+                </div>
+
+              </div>
+
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>1</option>
+                    <option>2</option>
+                    <option>5</option>
+                    <option>10</option>
+                    <option>25</option>
+                  </select>
+                </div>
+
+              </div>
+
+              <div class='col-3'>
+                <div class='input-group input-group-sm mb-3'>
+                  <div class='input-group-prepend'>
+                    <span class='input-group-text'>Other</span>
+                  </div>
+                  <input type='text' class='form-control form-control-sm' placeholder=''>
+                </div>
+              </div>
+
+
+            </div>
+
+            <!-- multi day -->
+            <div class='row row-shade'>
+
+              <div class='col-1'>
+                <input type='radio' aria-label='initial-pass-multi-day'>
+              </div>
+              <div class='col-2'>Multi Day</div>
+
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Adult</option>
+                    <option>Half</option>
+                  </select>
+                </div>
+
+
+              </div>
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Region 0</option>
+                    <option>Region 1</option>
+                  </select>
+                </div>
+
+              </div>
+
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>1</option>
+                    <option>2</option>
+                    <option>5</option>
+                    <option>10</option>
+                    <option>25</option>
+                  </select>
+                </div>
+
+              </div>
+
+              <div class='col-3'>
+                <div class='input-group input-group-sm mb-3'>
+                  <div class='input-group-prepend'>
+                    <span class='input-group-text'>Other</span>
+                  </div>
+                  <input type='text' class='form-control form-control-sm' placeholder=''>
+                </div>
+              </div>
+
+            </div>
+
+            <div class='row '>
+              <div class='col-1'>
+                <input type='radio' aria-label='initial-pass-other'>
+              </div>
+              <div class='col-2'>Other</div>
+              <div class='col-9'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Custom Pass 0</option>
+                    <option>Custom Pass 1</option>
+                    <option>Custom Pass 2</option>
+                  </select>
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+          <div class='col-2'></div>
+
+        <!-- row -->
+        </div>
+
+      <!-- col-10 -->
+      </div>
+
+    <!-- container row -->
+    </div>
+
+  <!-- container -->
+  </div>
+
+
+{% endblock %}

main/app/templates/base.html

@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>Popufare Admin UI</title>
+
+  <link href="/static/css/bootstrap.min.css" rel="stylesheet">
+  <link href="/static/css/simple-sidebar.css" rel="stylesheet">
+
+</head>
+
+<body>
+
+  <div class="d-flex" id="wrapper">
+
+    <div class="bg-light border-right" id="sidebar-wrapper">
+      <div class="sidebar-heading"><b>Popufare Admin UI</b></div>
+      <div class="list-group list-group-flush">
+        <a href="/manage_card" class="list-group-item list-group-item-action bg-light">Manage Card</a>
+        <a href="/manage_user" class="list-group-item list-group-item-action bg-light">Manage User</a>
+        <a href="/reissue_card" class="list-group-item list-group-item-action bg-light">Re-Issue</a>
+        <a href="/recycle_card" class="list-group-item list-group-item-action bg-light">Recycle Card</a>
+        <a href="/add_card_block" class="list-group-item list-group-item-action bg-light">Add Card Block</a>
+        <a href="/process_pending_card" class="list-group-item list-group-item-action bg-light">Pending</a>
+        <a href="/search" class="list-group-item list-group-item-action bg-light">Search</a>
+      </div>
+    </div>
+
+    <div id="page-content-wrapper">
+
+      <nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+
+          <ul class="navbar-nav ml-auto mt-2 mt-lg-0">
+
+            <!--
+            <li class="nav-item"> <div class='nav-link disabled'> [ {{ user.username }} ] </div> </li>
+            <li class="nav-item"> <button type='button' class='btn btn-link'>Logout</button> </li>
+            -->
+
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                [ {{ user.username }} ]
+              </a>
+              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+                <a class="dropdown-item" href="#">Help</a>
+                <a class="dropdown-item" href="#">Settings</a>
+                <div class="dropdown-divider"></div>
+                <a class="dropdown-item" href="#">Sign out</a>
+              </div>
+            </li>
+
+
+          </ul>
+
+
+        </div>
+
+      </nav>
+
+      <div class="container-fluid">
+
+        {% block content %}{% endblock %}
+
+        <!--
+        <h1 class="mt-4">Simple Sidebar</h1>
+        <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
+        <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
+        -->
+
+      </div>
+
+    </div>
+    <!-- /#page-content-wrapper -->
+
+  </div>
+  <!-- /#wrapper -->
+
+  <script src="/static/js/jquery.min.js"></script>
+  <script src="/static/js/bootstrap.bundle.min.js"></script>
+
+</body>
+
+</html>

main/app/templates/help.html

@@ -0,0 +1,8 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">Help</h1>
+  <p>... </p>
+
+{% endblock %}

main/app/templates/index.html

@@ -0,0 +1,12 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">hello</h1>
+  <p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
+  <p>Make sure to keep all page content within the
+    <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration.
+    Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.
+  </p>
+
+{% endblock %}

main/app/templates/manage_card.html

@@ -0,0 +1,361 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">Manage Card</h1>
+
+  <div class='container'>
+
+    <!-- container row -->
+    <div class='row'>
+
+      <!-- col-10 to give a padding on the side -->
+      <div class='col-10'>
+
+        <!-- row to contain both the card area and the user info area -->
+        <div class='row'>
+
+          <!-- half of the row is devoted to card specific operations -->
+          <div class='col-6'>
+
+            <div class='row row-shade'>
+              <div class='col-4'> CardId </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-2'> 
+                <!-- <button type='button' class='btn btn-secondary btn-sm justify-content-end'>Find</button> -->
+                <button type='button' class='btn btn-secondary btn-sm'>Find</button>
+              </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Group </div>
+              <div class='col-6'>
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Org A</option>
+                    <option>Org B</option>
+                    <option>Org C</option>
+                  </select>
+                </div>
+              </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> MagStripe </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-2' >
+                <button type='button' class='btn btn-secondary btn-sm '>Find</button>
+              </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> RFID </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-2 '>
+                <button type='button' class='btn btn-secondary btn-sm'>Find</button>
+              </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Active Pass </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'>
+                <button type='button' class='btn btn-secondary btn-sm'>Find</button>
+              </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Comment </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'>  </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Other ID </div>
+              <div class='col-6'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+              <div class='col-2'>
+                <button type='button' class='btn btn-secondary btn-sm'>Find</button>
+              </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> </div>
+              <div class='col-6'> </div>
+              <div class='col-2'>  </div>
+            </div>
+
+          </div>
+
+          <div class='col-1'> </div>
+
+          <!-- and the other half is devoted to user specific information (associated with the card) -->
+          <div class='col-5'>
+
+            <div class='row row-shade'>
+              <div class='col-5'> Username </div>
+              <div class='col-7'> jdoey112 </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-5'> First Name </div>
+              <div class='col-7'> J </div>
+            </div>
+
+
+            <div class='row row-shade'>
+              <div class='col-5'> Last Name </div>
+              <div class='col-7'> Doey </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-5'> E-Mail </div>
+              <div class='col-7'> jdoey112@example.com </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-5'> Phone </div>
+              <div class='col-7'> (607) 555-1212</div>
+            </div>
+
+            <div class='row'>
+              <div class='col-5'> Address </div>
+              <div class='col-7'> 15 Lane </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-5'> City </div>
+              <div class='col-7'> Ithaca </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-5'> State </div>
+              <div class='col-7'> NY </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-5'> ZIP </div>
+              <div class='col-7'> 14850 </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-5'> Group </div>
+              <div class='col-7'> General </div>
+            </div>
+
+          </div>
+
+        </div>
+
+        <br>
+        <br>
+
+        <!-- passes selection area where passes can be added to the card -->
+        <div class='row'>
+
+          <div class='col-3'>
+            <h2> Passes </h2>
+          </div>
+
+          <div class='col-6'></div>
+
+          <div class='col-3'>
+            <button type='button' class='btn btn-secondary btn-sm'>Re-Issue Card</button>
+          </div>
+
+        </div>
+
+        <div class='row row-shade'>
+          <div class='col-2'> Multi-Ride </div>
+          <div class='col-2'>
+
+            <div class='input-group input-group-sm mb-3'>
+              <select class='custom-select'>
+                <option>Adult</option>
+                <option>Half</option>
+              </select>
+            </div>
+
+          </div>
+          <div class='col-2'>
+
+            <div class='input-group input-group-sm mb-3'>
+              <select class='custom-select'>
+                <option>Region 0</option>
+                <option>Region 1</option>
+              </select>
+            </div>
+
+          </div>
+
+          <div class='col-2'>
+
+            <div class='input-group input-group-sm mb-3'>
+              <select class='custom-select'>
+                <option>1</option>
+                <option>2</option>
+                <option>5</option>
+                <option>10</option>
+                <option>25</option>
+              </select>
+            </div>
+
+
+          </div>
+
+          <div class='col-3'>
+            <div class='input-group input-group-sm mb-3'>
+              <div class='input-group-prepend'>
+                <span class='input-group-text'>Other</span>
+              </div>
+              <input type='text' class='form-control form-control-sm' placeholder=''>
+            </div>
+          </div>
+
+          <div class='col-1'>
+            <button type='button' class='btn btn-secondary btn-sm'>Add</button>
+          </div>
+
+        </div>
+
+        <div class='row'>
+          <div class='col-2'> Multi-Day </div>
+          <div class='col-2'>
+
+            <div class='input-group input-group-sm mb-3'>
+              <select class='custom-select'>
+                <option>Adult</option>
+                <option>Half</option>
+              </select>
+            </div>
+
+          </div>
+
+          <div class='col-2'>
+
+            <div class='input-group input-group-sm mb-3'>
+              <select class='custom-select'>
+                <option>Region 0</option>
+                <option>Region 1</option>
+              </select>
+            </div>
+
+          </div>
+
+          <div class='col-2'>
+
+            <div class='input-group input-group-sm mb-3'>
+              <select class='custom-select'>
+                <option>1</option>
+                <option>2</option>
+                <option>5</option>
+                <option>10</option>
+                <option>25</option>
+              </select>
+            </div>
+
+          </div>
+
+          <div class='col-3'>
+            <div class='input-group input-group-sm mb-3'>
+              <div class='input-group-prepend'>
+                <span class='input-group-text'>Other</span>
+              </div>
+              <input type='text' class='form-control form-control-sm' placeholder=''>
+            </div>
+
+          </div>
+
+          <div class='col-1'>
+            <button type='button' class='btn btn-secondary btn-sm'>Add</button>
+          </div>
+
+        </div>
+
+        <div class='row row-shade'>
+          <div class='col-2'> Other </div>
+          <div class='col-9'> 
+
+            <div class='input-group input-group-sm mb-3'>
+              <select class='custom-select'>
+                <option>Custom Pass 0</option>
+                <option>Custom Pass 1</option>
+                <option>Custom Pass 2</option>
+              </select>
+            </div>
+
+          </div>
+
+          <div class='col-1'>
+            <button type='button' class='btn btn-secondary btn-sm'>Add</button>
+          </div>
+
+        </div>
+
+        <div class='row'>
+          <hr>
+        </div>
+
+        <br>
+
+
+        <!-- pre-existing pass management where they can be re-ordered and deleted -->
+        <div class='row row-shade'>
+          <div class='col-3'>
+            <button type='button' class='btn btn-secondary btn-sm'>check / uncheck all</button>
+          </div>
+          <div class='col-7'> </div>
+          <div class='col-2'> <button type='button' class='btn btn-secondary btn-sm'>delete</button> </div>
+        </div>
+
+        <div class='row row-shade' >
+          <div class='col-1'> Type </div>
+          <div class='col-1'> Original </div>
+          <div class='col-1'> Remain </div>
+          <div class='col-2'> Exp. </div>
+          <div class='col-2'> Issued </div>
+          <div class='col-2'> First Used </div>
+          <div class='col-3'> Last Used </div>
+        </div>
+
+        <div class='row' >
+          <div class='col-1'> NRide </div>
+          <div class='col-1'> 5 </div>
+          <div class='col-1'> 3 </div>
+          <div class='col-2'> -  </div>
+          <div class='col-2'> 2020-01-20 </div>
+          <div class='col-2'> 2020-01-20 </div>
+          <div class='col-3'> 2020-01-25 13:10 </div>
+        </div>
+
+        <div class='row' >
+          <div class='col-1'> NDay </div>
+          <div class='col-1'> 10 </div>
+          <div class='col-1'> 2 </div>
+          <div class='col-2'> 2020-04-01 </div>
+          <div class='col-2'> 2020-01-20 </div>
+          <div class='col-2'> 2020-01-20 </div>
+          <div class='col-3'> 2020-01-25 13:10 </div>
+        </div>
+
+      <!-- end of col-10 -->
+      </div>
+
+      <!-- side padding -->
+      <div class='col-2'> </div>
+
+    <!-- end of encasing container row -->
+    </div>
+
+  <!-- container -->
+  </div>
+
+{% endblock %}

main/app/templates/manage_user.html

@@ -0,0 +1,357 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">Manage User</h1>
+  <p>... </p>
+
+  <div class='container'>
+
+
+    <!-- container row -->
+    <div class='row'>
+
+      <!-- col-10 to give a padding on the side -->
+      <div class='col-10'>
+
+        <!-- row to contain both the card area and the user info area -->
+        <div class='row'>
+
+          <!-- half of the row is devoted to card specific operations -->
+          <div class='col-6'>
+
+            <div class='row row-shade'>
+              <div class='col-4'> User Id </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> Lookup </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> User Name </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> Lookup </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> First Name </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Last Name </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> E-Mail </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Phone </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Address </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> City </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> State </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> ZIP </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Shipping Name </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Shipping Address </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Shipping City </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Shipping State </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Shipping ZIP </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Group </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+          </div>
+
+          <div class='col-6'>
+
+            <div class='row row-shade'>
+              <div class='col-4'> User Name </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-4'> First Name </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Last Name </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-4'> E-Mail </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Phone </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-4'> Address </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> City </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-4'> State </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> ZIP </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-4'> Shipping Name </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Shipping Address </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-4'> Shipping City </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Shipping State </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-4'> Shipping ZIP </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Password </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-4'> Confirm Password </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Group </div>
+              <div class='col-6'> ...  </div>
+              <div class='col-2'> </div>
+            </div>
+
+          </div>
+
+        <!-- row -->
+        </div>
+
+        <br>
+        <br>
+
+        <!-- password reset block -->
+
+        <div class='row'>
+          <div class='col-8'>
+
+            <div class='row'>
+              <div class='col-12'> <h3> Password Reset </h3> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> New Password </div>
+              <div class='col-8'> ... </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Confirm Password </div>
+              <div class='col-8'> ... </div>
+            </div>
+
+            <div class='row'>
+
+              <div class='col-4'>
+                <button type='button' class='btn btn-secondary btn-sm'>Reset Password</button>
+              </div>
+              <div class='col-8'></div>
+
+            </div>
+
+          </div>
+
+          <div class='col-4'></div>
+        </div>
+
+
+        <br>
+        <br>
+
+        <!-- add card to user block -->
+        <div class='row'>
+          <div class='col-8'>
+
+            <div class='row'>
+              <div class='col-6'> <h3> Add Card to User </h3> </div>
+              <div class='col-6'></div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Mag Stripe </div>
+              <div class='col-8'> ... </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> RFID </div>
+              <div class='col-8'> ... </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> CardId </div>
+              <div class='col-8'> ... </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Group </div>
+              <div class='col-8'> ... </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'>
+                <button type='button' class='btn btn-secondary btn-sm'>Reset Password</button>
+              </div>
+              <div class='col-8'></div>
+            </div>
+
+          </div>
+
+          <div class='col-4'></div>
+
+        </div>
+
+        <br>
+        <br>
+
+        <!-- user managed cards block -->
+        <div class='row'>
+          <div class='col-10'>
+
+            <div class='row'>
+              <div class='col-6'> <h3> User Owned Cards </h3> </div>
+              <div class='col-6'></div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Card Id </div>
+              <div class='col-4'> Mag Stripe</div>
+              <div class='col-2'> RF Site </div>
+              <div class='col-2'> RFID </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> 1234 </div>
+              <div class='col-4'> 12300000000000001 </div>
+              <div class='col-2'> 35 </div>
+              <div class='col-2'> 60535 </div>
+            </div>
+
+          </div>
+
+          <div class='col-4'></div>
+
+        </div>
+
+        <br>
+        <br>
+
+
+      <!-- col-10 -->
+      </div>
+
+    <!-- container row -->
+    </div>
+
+  <!-- container -->
+  </div>
+
+{% endblock %}

main/app/templates/process_pending_card.html

@@ -0,0 +1,190 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">Process Pending Card</h1>
+
+  <div class='container'>
+
+    <!-- container row -->
+    <div class='row'>
+
+      <!-- col-10 -->
+      <div class=$col-12'>
+
+        <!-- two column row-->
+        <div class='row'>
+
+          <!-- left column -->
+          <div class='col-6'>
+
+            <div class='row'>
+              <div class='col-12'><h3> Process Pending Card</h3></div>
+            </div>
+
+
+            <div class='row row-shade'>
+              <div class='col-4'> Queue Id </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> MagStripe </div>
+              <div class='col-8'> <input type='text' class='form-control form-control-sm' placeholder=''> </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> RFID </div>
+              <div class='col-3'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+
+              <div class='col-5'>
+                <input type='text' class='form-control form-control-sm' placeholder=''>
+              </div>
+
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> User Name </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> First Name </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Last Name </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> E-Mail </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Phone </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Address </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> City </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> State </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> ZIP </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Shipping Name </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Shipping Address </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Shipping City </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Shipping State </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-4'> Shipping ZIP </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-4'> Group </div>
+              <div class='col-8'> ...  </div>
+            </div>
+
+          </div>
+
+          <div class='col-1'></div>
+
+          <!-- right column -->
+          <div class='col-5'>
+
+            <div class='row'>
+              <div class='col-12'><h3> Passes on Card </h3></div>
+            </div>
+
+          </div>
+
+        <!-- two column row end -->
+        </div>
+
+        <br>
+        <br>
+
+        <!-- pending card requests -->
+        <div class='row'>
+          <div class='col-12'> <h3> Pending Card Requests</h3> </div>
+        </div>
+
+        <div class='row row-shade'>
+          <div class='col-2'> </div>
+          <div class='col-2'> Card Id </div>
+          <div class='col-4'> Mag Stripe</div>
+          <div class='col-2'> RF Site </div>
+          <div class='col-2'> RFID </div>
+        </div>
+
+        <div class='row'>
+          <div class='col-2'>
+            <button type='button' class='btn btn-secondary btn-sm'>Load</button>
+          </div>
+          <div class='col-2'> 1234 </div>
+          <div class='col-4'> 12300000000000001 </div>
+          <div class='col-2'> 35 </div>
+          <div class='col-2'> 60535 </div>
+        </div>
+
+
+        <div class='row row-shade'>
+          <div class='col-2'>
+            <button type='button' class='btn btn-secondary btn-sm'>Load</button>
+          </div>
+          <div class='col-2'> 1234 </div>
+          <div class='col-4'> 12300000000000001 </div>
+          <div class='col-2'> 35 </div>
+          <div class='col-2'> 60535 </div>
+        </div>
+
+
+        <br>
+        <br>
+
+
+      <!-- col-10 -->
+      </div>
+
+    <!-- container row -->
+    </div>
+
+  <!-- container -->
+  </div>
+
+{% endblock %}

main/app/templates/recycle_card.html

@@ -0,0 +1,230 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">Recycle Card</h1>
+  <p>... </p>
+
+  <div class='container'>
+
+    <!-- container row -->
+    <div class='row'>
+
+      <div class='col-10'>
+
+        <!-- recycle card lookup -->
+        <div class='row'>
+
+          <div class='col-10'>
+
+            <div class='row row-shade'>
+              <div class='col-6'>MagStripe</div>
+              <div class='col-6'>.. </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-6'>RFID</div>
+              <div class='col-2'>.. </div>
+              <div class='col-4'>.. </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-6'>Source Group</div>
+              <div class='col-6'>.. </div>
+            </div>
+
+            <div class='row'>
+              <div class='col-6'>Destination Group</div>
+              <div class='col-6'>.. </div>
+            </div>
+
+          </div>
+
+          <div class='col-2'></div>
+
+        <!-- row -->
+        </div>
+
+        <br>
+
+        <div class='row '>
+          <div class='col-6'>
+            <button type='button' class='btn btn-secondary btn-sm'>Recycle Card</button>
+          </div>
+          <div class='col-6'></div>
+        </div>
+
+        <br>
+        <br>
+        <br>
+
+        <!-- initial pass -->
+        <div class='row'>
+
+          <div class='col-10'>
+            <h3>Initial Pass</h3>
+          </div>
+          <div class='col-2'></div>
+
+        </div>
+
+        <div class='row'>
+
+          <div class='col-10'>
+
+
+            <!-- none -->
+            <div class='row row-shade'>
+              <div class='col-1'>
+                <input type='radio' aria-label='pass-none'>
+              </div>
+              <div class='col-2'>None</div>
+              <div class='col-3'></div>
+              <div class='col-3'></div>
+              <div class='col-3'></div>
+            </div>
+
+            <!-- multi ride -->
+            <div class='row '>
+              <div class='col-1'>
+                <input type='radio' aria-label='initial-pass-multi-ride'>
+              </div>
+              <div class='col-2'>Multi Ride</div>
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Adult</option>
+                    <option>Half</option>
+                  </select>
+                </div>
+
+
+              </div>
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Region 0</option>
+                    <option>Region 1</option>
+                  </select>
+                </div>
+
+              </div>
+
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>1</option>
+                    <option>2</option>
+                    <option>5</option>
+                    <option>10</option>
+                    <option>25</option>
+                  </select>
+                </div>
+
+              </div>
+
+              <div class='col-3'>
+                <div class='input-group input-group-sm mb-3'>
+                  <div class='input-group-prepend'>
+                    <span class='input-group-text'>Other</span>
+                  </div>
+                  <input type='text' class='form-control form-control-sm' placeholder=''>
+                </div>
+              </div>
+
+
+            </div>
+
+            <!-- multi day -->
+            <div class='row row-shade'>
+
+              <div class='col-1'>
+                <input type='radio' aria-label='initial-pass-multi-day'>
+              </div>
+              <div class='col-2'>Multi Day</div>
+
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Adult</option>
+                    <option>Half</option>
+                  </select>
+                </div>
+
+
+              </div>
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Region 0</option>
+                    <option>Region 1</option>
+                  </select>
+                </div>
+
+              </div>
+
+              <div class='col-2'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>1</option>
+                    <option>2</option>
+                    <option>5</option>
+                    <option>10</option>
+                    <option>25</option>
+                  </select>
+                </div>
+
+              </div>
+
+              <div class='col-3'>
+                <div class='input-group input-group-sm mb-3'>
+                  <div class='input-group-prepend'>
+                    <span class='input-group-text'>Other</span>
+                  </div>
+                  <input type='text' class='form-control form-control-sm' placeholder=''>
+                </div>
+              </div>
+
+            </div>
+
+            <div class='row '>
+              <div class='col-1'>
+                <input type='radio' aria-label='initial-pass-other'>
+              </div>
+              <div class='col-2'>Other</div>
+              <div class='col-9'>
+
+                <div class='input-group input-group-sm mb-3'>
+                  <select class='custom-select'>
+                    <option>Custom Pass 0</option>
+                    <option>Custom Pass 1</option>
+                    <option>Custom Pass 2</option>
+                  </select>
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+          <div class='col-2'></div>
+
+        <!-- row -->
+        </div>
+
+      <!-- col-10 -->
+      </div>
+
+    <!-- container row -->
+    </div>
+
+  <!-- container -->
+  </div>
+
+
+{% endblock %}

main/app/templates/reissue_card.html

@@ -0,0 +1,86 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">Re-Issue Card</h1>
+  <p>... </p>
+
+
+  <div class='container'>
+
+    <!-- container row -->
+    <div class='row'>
+
+      <div class='col-10'>
+
+        <div class='row'>
+
+          <div class='col-5'>
+
+            <div class='row row-shade'>
+              <div class='col-6'>Source MagStripe</div>
+              <div class='col-6'>.. </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-6'>Source RFID</div>
+              <div class='col-2'>.. </div>
+              <div class='col-4'>.. </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-6'>Source Group</div>
+              <div class='col-6'>.. </div>
+            </div>
+
+          </div>
+
+          <div class='col-1'></div>
+
+          <div class='col-6'>
+
+            <div class='row row-shade'>
+              <div class='col-6'>Destination MagStripe</div>
+              <div class='col-6'>.. </div>
+            </div>
+
+            <div class='row '>
+              <div class='col-6'>Destination RFID</div>
+              <div class='col-2'>.. </div>
+              <div class='col-4'>.. </div>
+            </div>
+
+            <div class='row row-shade'>
+              <div class='col-6'>Destination Group</div>
+              <div class='col-6'>.. </div>
+            </div>
+
+
+          </div>
+
+
+
+        <!-- row -->
+        </div>
+
+        <br>
+
+        <div class='row '>
+          <div class='col-6'>
+            <button type='button' class='btn btn-secondary btn-sm'>Re-Issue</button>
+          </div>
+          <div class='col-6'></div>
+        </div>
+
+
+      <!-- col-10 -->
+      </div>
+
+    <!-- container row -->
+    </div>
+
+  <!-- container -->
+  </div>
+
+
+{% endblock %}

main/app/templates/search.html

@@ -0,0 +1,64 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+  <h1 class="mt-4">Search</h1>
+  <div class='container'>
+
+    <!-- container row -->
+    <div class='row'>
+
+      <!-- col-10 to give a padding on the side -->
+      <div class='col-10'>
+
+        <br>
+
+        <!-- -->
+        <div class='row'>
+
+          <div class='col-2'>Search Cards</div>
+          <div class='col-8'>
+            <input type='text' class='form-control form-control-sm' placeholder=''>
+          </div>
+          <div class='col-2'>
+            <button type='button' class='btn btn-secondary btn-sm'>Find</button>
+          </div>
+
+        </div>
+
+        <br>
+
+        <!-- -->
+        <div class='row'>
+
+          <div class='col-2'>Search Users</div>
+          <div class='col-8'>
+            <input type='text' class='form-control form-control-sm' placeholder=''>
+          </div>
+          <div class='col-2'>
+            <button type='button' class='btn btn-secondary btn-sm'>Find</button>
+          </div>
+
+        </div>
+
+        <br>
+
+        <!-- -->
+        <div class='row'>
+
+          <div class='col-2'>Search Admins</div>
+          <div class='col-8'>
+            <input type='text' class='form-control form-control-sm' placeholder=''>
+          </div>
+          <div class='col-2'>
+            <button type='button' class='btn btn-secondary btn-sm'>Find</button>
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+  </div>
+
+
+{% endblock %}

main/main.py

@@ -0,0 +1,3 @@
+#!/usr/bin/python
+
+from app import app

main/run

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+export FLASK_APP=main.py
+flask run