Move hosting to Github

README.md

@@ -17,8 +17,8 @@ there's an internet connection.
 
 The Mushpup web application provides access to an interface to quickly retrieve passwords. It is available over the internet at the following sites:
 
-- http://mushpup.org/
-- https://mushpup-demo.appspot.com/
+- https://mushpup.org/
+- https://klenwell.com/mushpup/
 
 
 ## Installation

docs/css/bootstrap.css

@@ -0,0 +1,24 @@
+/* Sticky footer styles
+-------------------------------------------------- */
+html {
+  position: relative;
+  min-height: 100%;
+}
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 66px;
+}
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 66px;
+  background-color: #f5f5f5;
+  padding-top: 12px;
+}
+.footer p {
+  margin-bottom: 4px;
+  text-align: center;
+  color: #999999;
+}

docs/css/mushpup-ui.css

@@ -0,0 +1,160 @@
+/*
+ * State Rules
+ */
+.rolled-up {
+  display: none;
+}
+
+div.mushpup {
+  max-width: 384px;
+  padding: 40px 0px;
+  margin: 0 auto;
+}
+
+
+/*
+ * Input Form
+ */
+div.mushpup form {}
+div.mushpup form .form-control {
+  position: relative;
+  height: auto;
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+  padding: 10px;
+  font-size: 16px;
+}
+div.mushpup form .form-control:focus {
+  z-index: 2;
+}
+div.mushpup form input[type="locus"] {
+  margin-bottom: -1px;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+div.mushpup form input[type="pocus"] {
+  margin-bottom: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+div.action-panel {
+  width: 100%;
+  margin: 0 auto;
+  padding: 0;
+}
+div.action-panel span.action {
+  display: inline-block;
+  margin: 0 auto;
+  padding: 0;
+  text-align: center;
+  width: 16%;
+}
+div.action-panel span.action.mush {
+  width: 64%;
+}
+div.action-panel button.mush {
+  display: inline-block;
+  margin: 0 auto;
+}
+div.action-panel span.circle {
+  display: inline-block;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  -moz-border-radius: 25px;
+  -webkit-border-radius: 25px;
+  line-height: 50px;
+}
+div.action-panel span.circle.button {
+  text-align: center;
+  background-color: #337ab7;
+  box-shadow: 0 0 2px #2e6da4;
+  cursor: pointer;
+  color: white;
+}
+div.action-panel span.circle.button:hover {
+  background-color: #286090;
+  box-shadow: 0 0 2px #204d74;
+}
+
+/*
+ * Reveal Panel
+ */
+div.output-panel {
+  display: none;
+  margin-top: 8px;
+  width: 100%;
+}
+
+/* Payload / Rulers */
+div.output-panel div.payload {
+  margin: 0 auto;
+  width: 100%;
+  background-color: #eee;
+  text-align: center;
+}
+div.output-panel div.payload span.c {
+  display: inline-block;
+  width: 16px;
+  text-align: center;
+  padding: 0px;
+  margin: 0px;
+  font-family: Inconsolata,"Lucida Console",Monaco,monospace;
+}
+
+div.output-panel div.payload div.ruler {
+  background-color: white;
+  font-size: 14px;
+}
+div.output-panel div.payload div.ruler.upper {
+  color: red;
+  border-top: solid red 1px;
+  border-bottom: solid red 1px;
+}
+div.output-panel div.payload div.ruler.lower {
+  color: blue;
+  border-top: solid blue 1px;
+  border-bottom: solid blue 1px;
+}
+div.output-panel div.payload div.ruler span.c {}
+
+div.output-panel div.payload div.hash {
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+  background-color: white;
+  text-align: center;
+}
+div.output-panel div.payload div.hash span.group {
+  padding: 0;
+  display: inline-block;
+}
+div.payload div.hash span.group.west {
+  background-color: #ffdddd;
+  color: white;
+}
+div.payload div.hash span.group.east {
+  background-color: #ddddff;
+  color: white;
+}
+div.payload div.hash span.group.central {
+  background-color: white;
+  color: #dddddd;
+}
+div.output-panel div.payload div.hash span.c {
+  font-size: 20px;
+  padding: 4px 0;
+}
+
+/* Alerts */
+div.output-panel div.alerts {
+  margin-bottom: 4px;
+}
+div.output-panel div.alerts div.alert {
+  margin-bottom: 1px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  padding-left: 8px;
+}

docs/index.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-75217-5"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'UA-75217-5');
+    </script>
+
+    <!-- These 3 meta tags *must* come first in the head; any other head content
+         must come *after* these tags -->
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <title>Mushpup</title>
+
+    <!-- Bootstrap -->
+    <link rel="stylesheet"
+          href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+    <link rel="stylesheet" href="css/mushpup-ui.css">
+    <link rel="stylesheet" href="css/bootstrap.css">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <!-- Favicon -->
+    <link rel="icon" type="image/vnd.microsoft.icon" href="favicon.ico?v=20150804">
+    <link rel="shortcut icon" href="favicon.ico?v=20150804">
+  </head>
+
+  <body>
+    <!-- Static navbar -->
+    <nav class="navbar navbar-default navbar-static-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="#">Mushpup v3</a>
+        </div>
+        <div id="navbar" class="navbar-collapse collapse">
+          <ul class="nav navbar-nav">
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="https://github.com/klenwell/mushpup/wiki/Notation">Notation</a></li>
+            <li><a href="https://github.com/klenwell/mushpup">Github</a></li>
+          </ul>
+        </div><!--/.nav-collapse -->
+      </div>
+    </nav>
+
+    <div class="container">
+      <div id="mushpup-ui"></div>
+
+      <!-- User Guide -->
+      <div id="user-guide" class="row">
+        <div class="col-lg-4">
+          <h3>To use Mushpup, first:</h3>
+          <ol>
+            <li>Pick a <strong>Mushpup secret word</strong> (a master password only you remember)</li>
+            <li>Pick a <strong>Mushpup number</strong> (between 8 and 16)</li>
+            <li>Pick a <strong>Mushpup side</strong> (left, right, or middle)</li>
+          </ol>
+          <p class="text-info">You will want to use these by habit, so make picks that you will remember.</p>
+        </div>
+        <div class="col-lg-4">
+          <h3>Then, to get a new password:</h3>
+          <ol>
+            <li>Identify new site (e.g. github.com)</li>
+            <li>Set your user name (e.g. klenwell)</li>
+            <li>Set your <strong>site input</strong> based on site/user (e.g. github.com/klenwell)</li>
+          </ol>
+          <p class="text-info">Use the Mushpup form above when you register to a new site. Now is the time to use the confirm button to make sure you enter your secret word correctly.</p>
+        </div>
+        <div class="col-lg-4">
+          <h3>Finally, to retrieve the password:</h3>
+          <ol>
+            <li>Input <strong>site input</strong> and <strong>Mushpup secret word</strong> in the Mushpup form</li>
+            <li>Using your <strong>Mushpup number</strong> and <strong>Mushpup side</strong>, copy your password</li>
+            <li>Paste the password into the site login password field.</li>
+          </ol>
+          <p class="text-info">Now you can get you password any time you need it. In this way, by remembering a single password, you get a unique password for every site you use</p>
+        </div>
+      </div>
+    </div>
+
+    <footer class="footer">
+      <div class="container">
+        <p class="center">Some rights reserved.</p>
+        <p class="center"><a href="https://mushpup.org/">mushpup.org</a></p>
+      </div>
+    </footer>
+
+    <!--
+       - Javascript
+       -->
+    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+
+    <!-- Bootstrap -->
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
+    <!-- Mushpup -->
+    <script src="https://cdn.jsdelivr.net/gh/klenwell/mushpup@master/src/mushpup.js?v20190825"></script>
+    <script src="https://cdn.jsdelivr.net/gh/klenwell/mushpup@master/src/mushpup-ui.js?v20190825"></script>
+    <script src="https://cdn.jsdelivr.net/gh/klenwell/mushpup@master/vendor/crypto-js/sha1.js?v20190825"></script>
+    <script src="https://cdn.jsdelivr.net/gh/klenwell/mushpup@master/vendor/crypto-js/enc-base64-min.js?v20190825"></script>
+
+    <!-- Local -->
+    <script src="js/mushpup-form.js"></script>
+
+    <script>
+      $(document).ready(function() {
+        ui = MushpupUI();
+        ui.init('div#mushpup-ui');
+      });
+    </script>
+
+  </body>
+</html>