feat(main-route): develop Start screen UI to match UI mockups

With @Frozenfire92 @rainbee2214
mozilla · Sep 17, 2014 · a6199db · a6199db
1 parent 30b6629
commit a6199db
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 38 deletions.
diff --git a/app/index.html b/app/index.html
@@ -2,8 +2,8 @@
 <html class="no-js">
   <head>
     <meta charset="utf-8">
-    <title></title>
-    <meta name="description" content="">
+    <title>SeaSponge</title>
+    <meta name="description" content="Accessible and client-side threat modeling tool">
     <meta name="viewport" content="width=device-width">
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
     <!-- build:css(.) styles/vendor.css -->
@@ -20,23 +20,7 @@
     <![endif]-->
 
     <!-- Add your site or application content here -->
-    <div class="container">
-      <div class="header">
-        <ul class="nav nav-pills pull-right">
-          <li class="active"><a ng-href="#">Home</a></li>
-          <li><a ng-href="#/about">About</a></li>
-          <li><a ng-href="#">Contact</a></li>
-        </ul>
-        <h3 class="text-muted">seasponge</h3>
-      </div>
-
-      <div ng-view=""></div>
-
-      <div class="footer">
-        <p><span class="glyphicon glyphicon-heart"></span> from the Yeoman team</p>
-      </div>
-    </div>
-
+    <div ng-view=""></div>
 
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
      <script>

diff --git a/app/views/main.html b/app/views/main.html
@@ -1,23 +1,25 @@
-<div class="jumbotron">
-  <h1>'Allo, 'Allo!</h1>
-  <p class="lead">
-    <img src="images/yeoman.png" alt="I'm Yeoman"><br>
-    Always a pleasure scaffolding your apps.
-  </p>
-  <p><a class="btn btn-lg btn-success" ng-href="#">Splendid!<span class="glyphicon glyphicon-ok"></span></a></p>
-</div>
+<div class="container">
+
+  <div class="jumbotron">
+    <h1>Welcome to Mozilla<br/>SeaSponge</h1>
+    <p class="lead">
+      Accessible and client-side threat modeling tool
+    </p>
 
-<div class="row marketing">
-  <h4>HTML5 Boilerplate</h4>
-  <p>
-    HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.
-  </p>
+    <div class="">
+      <a class="btn btn-lg btn-success" ng-href="#">Create</a>
+      <a class="btn btn-lg btn-success" ng-href="#">Load</a>
+    </div>
+    <div>
+      <br/>
+      <a class="btn btn-sm btn-link" ng-href="#">Help &amp; Documentation</a>
+      <br/>
+      <a class="btn btn-sm btn-link" ng-href="#">About</a>
+    </div>
+  </div>
 
-  <h4>Angular</h4>
-  <p>
-    AngularJS is a toolset for building the framework most suited to your application development.
-  </p>
+  <div class="footer text-center">
+    <p>Made with <span class="glyphicon glyphicon-heart"></span> from the Mozilla SeaSponge team</p>
+  </div>
 
-  <h4>Karma</h4>
-  <p>Spectacular Test Runner for JavaScript.</p>
 </div>