added stuff

css/styles.css

@@ -58,11 +58,12 @@
   align-items: center;
 }
 .button-container.active .side-menu-button {
-  background: steelblue;
+  color: #fff;
-  color: white;
+  background-color: #286090;
+  border-color: #122b40;
 }
 .button-container.active .button-title {
-  color: steelblue;
+  color: #286090;
 }
 .button-container a:hover {
   text-decoration: none;
@@ -148,3 +149,115 @@
   overflow: hidden;
   background-color: #e5e5e5;
 }
+
+.demo-title {
+  text-align: center;
+  font-size: 3rem;
+  margin-bottom: 50px;
+}
+.invite-option {
+  border: 1px solid #e5e5e5;
+}
+.invite-card-container {
+  display: table;
+  width: 100%;
+}
+.invite-card-container .invite-option {
+  width: 28%;
+  background: white;
+  float: left;
+  padding: 2%;
+  text-align: center;
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+.invite-card-container .invite-option:nth-child(even) {
+  margin: 0 2%;
+}
+.invite-card-container .invite-option:hover {
+  cursor: pointer;
+  box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.3);
+  -webkit-transform: scale(1.04);
+          transform: scale(1.04);
+}
+.invite-card-container .invite-option:hover i, .invite-card-container .invite-option:hover h1, .invite-card-container .invite-option:hover span, .invite-card-container .invite-option:hover b {
+  color: #286090;
+}
+.invite-card-container .invite-option:hover .front {
+  opacity: 0;
+  visibility: hidden;
+}
+.invite-card-container .invite-option:hover .back {
+  opacity: 1 !important;
+  visibility: visible !important;
+}
+.invite-card-container .invite-option:hover .back a.button {
+  -webkit-transform: translateY(0px) !important;
+          transform: translateY(0px) !important;
+}
+.invite-card-container .invite-option hr {
+  border: none;
+  border-bottom: 1px solid #F0F0F0;
+}
+.invite-card-container .invite-option i {
+  font-size: 3rem;
+  color: #D8D8D8;
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+.invite-card-container .invite-option h1 {
+  margin: 10px 0;
+  color: #212121;
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+.invite-card-container .invite-option p {
+  color: #999;
+  padding: 0 10px;
+  line-height: 1.3;
+}
+.invite-card-container .invite-option .price {
+  position: relative;
+}
+.invite-card-container .invite-option .price .front span.price {
+  font-size: 2rem;
+  text-transform: uppercase;
+  margin-top: 20px;
+  display: block;
+  font-weight: 700;
+  position: relative;
+}
+.invite-card-container .invite-option .price .front span.price b {
+  position: absolute;
+  font-size: 1rem;
+  margin-left: 2px;
+  font-weight: 600;
+}
+.invite-card-container .invite-option .price .back {
+  opacity: 0;
+  visibility: hidden;
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+.invite-card-container .invite-option .price .back a.button {
+  background: #286090;
+  padding: 15px 20px;
+  display: inline-block;
+  text-decoration: none;
+  color: white;
+  position: absolute;
+  font-size: 13px;
+  top: -5px;
+  left: 0;
+  right: 0;
+  width: 150px;
+  margin: auto;
+  text-transform: uppercase;
+  -webkit-transform: translateY(20px);
+          transform: translateY(20px);
+  -webkit-transition: all .3s ease-in-out;
+  transition: all .3s ease-in-out;
+}
+.invite-card-container .invite-option .price .back a.button:hover {
+  background: #286090;
+}

templates/splash-page.html

@@ -3,7 +3,7 @@
     <h4 class="text-center">Sign in</h4>
     <a href="#!/home" class="current-user-container" ng-repeat="profile in vm.Auth.sessions track by $index" ng-click="vm.selectSession(profile);">
       <div class="current-user-split"><i class="fa fa-user"></i></div>
-      <div class="current-user-text">Resume with {{ profile.email }}</div>
+      <div class="current-user-text">Resume with {{ profile.email }} | {{ profile.issuer }}</div>
     </a>
     <div class="form-group">
       <label for="dap-address">Address</label>

templates/website.html

@@ -1,3 +1,131 @@
+<div class="container">
+  <div class="row">
+    <h1>Create a new Website</h1>
+    <button class="btn btn-primary btn-lg"  title="..." data-toggle="modal" data-target=".create-website-modal">
+      Create Website
+    </button>
+
+    <div class="modal fade create-website-modal" tabindex="-1" role="dialog" aria-labelledby="create-website-modal" aria-hidden="true">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
+            <h4 class="modal-title">Create a new Website</h4>
+          </div>
+          <div class="modal-body">
+            <h4>Select a domain</h4>
+
+            <div class="input-group">
+              <div angucomplete-alt
+                placeholder="Select a domain"
+                pause="300"
+                selected-object="vm.selectedDomain"
+                local-data="domain"
+                local-search="localDomainSearch"
+                title-field="domain"
+                minlength="0"
+                input-class="form-control trigger-dropdown"
+                match-class="highlight">
+              </div>
+              <!-- <input type="text" class="form-control" placeholder="Select a domain" aria-label="Domain Name" ng-model="vm.newDomain" ng-change="vm.setDomain()" /> -->
+              <div class="input-group-btn">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-default trigger-dropdown" aria-haspopup="true" aria-expanded="false" ng-click="vm.triggerDropdown()"><span class="caret"></span>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div class="input-group">
+              <input type="text" class="form-control" placeholder="www" ng-model="vm.newRecord" ng-change="vm.setRecord()" />
+              <div class="input-group-btn">
+                <div class="btn-group">
+                  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>
+                  </button>
+                  <ul class="dropdown-menu">
+                    <li ng-repeat="record in vm.records track by $index"><button class="btn btn-link" ng-bind="record.sub" ng-click="vm.selectRecord(record)">www</button></li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+
+            <div class="input-group">
+              <div>
+                <label>Select .zip upload</label>
+                <input type="file" class="js-file-upload this-has-a-special-non-angular-event-handler" />
+              </div>
+              <div ng-if="vm.isZip" >
+                <label>
+                  <input type="checkbox" ng-model="vm.unzip" />
+                  Unpack .zip
+                </label>
+              </div>
+              <div ng-if="vm.unzip" >
+                <label>
+                  <input type="checkbox" ng-model="vm.stripZip" />
+                  Strip zip directory root
+                </label>
+              </div>
+              <!-- <div ng-if="vm.isZip" ><label>Unzip directory</label> <input type="text" ng-model="vm.unzipPath" /></div -->
+              <div ng-if="vm.uploadTotal">
+                <span ng-bind="vm.uploadPercent">99</span>% | <span ng-bind="vm.uploadProgress">1</span> MiB / <span ng-bind="vm.uploadTotal">100</span> MiB
+              </div>
+              <div>
+                <label>Web path</label>
+                <input type="text" class="form-control" ng-model="vm.uploadPath" />
+              </div>
+              <button ng-click="vm.Sites.create()" type="button" name="button" class="btn btn-default">Create Website</button>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<div class="invite-card-container">
+  <div class="invite-option">
+    <h1>Invite Code</h1>
+    <hr />
+    <input type="text" class="form-control" ng-model="vm.Shares.inviteToken" />
+    <hr />
+    <div class="price">
+      <div class="front">
+        <span class="price">&nbsp;</span>
+      </div>
+      <div class="back">
+        <a class="button" ng-click="vm.Shares.accept()">Accept Invite</a>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+<div class="invite-card-container">
+  <h1>Your Websites</h1>
+  <div class="invite-option" ng-repeat="r in vm.sites">
+    <h3><a ng-href="https://{{r.domain}}" target="_blank" ng-bind="r.domain">example.com</a></h3>
+    <hr />
+    <hr />
+    <div class="">
+      <div class="">
+        <a ng-href="{{r.download}}" class="btn btn-default" target="_blank"><i class="fa fa-download"></i> Download</a>
+      </div>
+      <div class="">
+        <button type="button" name="button" class="btn btn-danger" ng-click="vm.Sites.remove(r)"><i class="fa fa-trash"></i> Clear</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+
+
+
+
 <style>
   .panel{
     box-shadow: none;