codeandcoffeelb · davidnuon · Feb 26, 2016 · Feb 17, 2016 · Feb 17, 2016 · Feb 17, 2016
diff --git a/app/index.html b/app/index.html
@@ -14,6 +14,9 @@
     <!-- build:css(.tmp) styles/main.css -->
     <link rel="stylesheet" href="styles/main.css">
     <!-- endbuild -->
+
+    <!-- Google Material Icons -->
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   </head>
 
   <body ng-app="signupApp">
@@ -23,9 +26,18 @@
 
     <!-- Add your site or application content here -->
     <div class="container">
-    <div ng-view=""></div>
-    </div>
 
+        <div ng-view=""></div>
+
+        <!-- Footer -->
+        <footer
+        ng-controller="FooterCtrl"
+        ng-show = "showFooter"
+        class = "animated fadeIn">
+            <h5>Icons provided by <a href="http://google.github.io/material-design-icons/">Google Material Icons</a></h5>
+        </footer>
+
+    </div>
 
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
      <script>
@@ -46,7 +58,6 @@
     <script src="bower_components/angular-resource/angular-resource.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
-    <script src="bower_components/angular-touch/angular-touch.js"></script>
     <script src="bower_components/angular-aria/angular-aria.js"></script>
     <script src="bower_components/angular-messages/angular-messages.js"></script>
     <script src="bower_components/angular-material/angular-material.js"></script>
@@ -57,6 +68,7 @@
         <script src="scripts/app.js"></script>
         <script src="scripts/controllers/main.js"></script>
         <script src="scripts/controllers/about.js"></script>
+        <script src="scripts/controllers/footer.js"></script>
         <!-- endbuild -->
 </body>
 </html>
diff --git a/app/scripts/app.js b/app/scripts/app.js
@@ -15,7 +15,6 @@ angular
     'ngResource',
     'ngRoute',
     'ngSanitize',
-    'ngTouch',
     'ngMaterial'
   ])
   .config(function ($routeProvider) {

diff --git a/app/scripts/controllers/footer.js b/app/scripts/controllers/footer.js
@@ -0,0 +1,26 @@
+'use strict';
+
+/**
+ * @ngdoc function
+ * @name signupApp.controller:FooterCtrl
+ * @description
+ * # FooterCtrl
+ * Controller of the signupApp
+ */
+angular.module('signupApp')
+  .controller('FooterCtrl', function ($scope, $timeout) {
+
+    this.awesomeThings = [
+      'HTML5 Boilerplate',
+      'AngularJS',
+      'Karma'
+    ];
+
+    //Going to do a simple little timeout on the footer
+    $scope.showFooter = false;
+
+    $timeout(function () {
+        $scope.showFooter = true;
+    }, 1000);
+
+  });
diff --git a/app/scripts/controllers/main.js b/app/scripts/controllers/main.js
@@ -8,10 +8,63 @@
  * Controller of the signupApp
  */
 angular.module('signupApp')
-  .controller('MainCtrl', function () {
+  .controller('MainCtrl', function ($scope, $timeout) {
+
     this.awesomeThings = [
       'HTML5 Boilerplate',
       'AngularJS',
       'Karma'
     ];
-  });
+
+    //Initialize our form data
+    $scope.formData = {};
+    //Our current form
+    $scope.formNum = 1;
+    //Variable for if we have a valid email
+    $scope.validEmail = false;
+
+    //Our card height, setting it here statically
+    //So we can transition it as we change form ontent
+    $scope.cardHeight = {'height': '722px'}
+
+    /**
+     * Regex to Validate email field
+     */
+    $scope.validateEmail = function() {
+        //Fetch email from giftcard form
+        var email = $scope.formData.email;
+
+        //Regex for all valid emails. To add a TLD, edit the final OR statement.
+        var emailRegex = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+(?:[A-Z]{2}|co|com|org|net|edu|gov|mil|biz|info|mobi|name|aero|asia|jobs|museum)\b/;
+        //Test the form email against the regex
+        if (emailRegex.test(email)) {
+            $scope.validEmail = true;
+        } else {
+            $scope.validEmail = false;
+        }
+    }
+
+    //Function to submit the form
+    //Also passng which form to go to next
+    $scope.submitSignIn = function(nextForm, formHeight) {
+
+        //Do Some google drive stuff here
+        if(nextForm == 2);
+
+        //Do some Github and slack stuff here
+        if(nextForm == 3);
+
+        //Lastly set the form
+        //Going to set to zero
+        //Then timeout to allow for nice animations
+        $scope.formNum = 0;
+        $scope.cardHeight = {'height': '500px'}
+        $timeout(function () {
+
+            //Set the actual values
+            $scope.formNum = nextForm;
+            $scope.cardHeight = {'height': formHeight}
+        }, 750);
+    }
+
+});
diff --git a/app/styles/_variables.scss b/app/styles/_variables.scss
@@ -4,4 +4,6 @@ $pageBg: whitesmoke;
 $cardBg: #ffffff;
 
 $standard: #292931;
+$checkStandard: rgba(41, 41, 49, 0.85);
+$checkStandardRipple: rgba(41, 41, 49, 0.55);
 $linkText: #5694f1;
diff --git a/app/styles/main.scss b/app/styles/main.scss
@@ -16,18 +16,26 @@ body {
     font-family: 'Open Sans', sans-serif;
 }
 
-//Our Header Card
-.formCard {
+//Our container for the app
+.container {
+
+    width: 90%;
+    max-width: 800px;
     margin-left: auto;
     margin-right: auto;
+}
+
+//Our Header Card
+.formCard {
     margin-top: 15px;
     padding-bottom: 15px;
     padding-top: 15px;
     display: block;
-    width: 90%;
-    max-width: 800px;
     background-color: $cardBg;
 
+    //Nice little animatio on whe the card height changes
+    transition: height 0.65s ease-in-out;
+
 
     //Coffe Cup Logo
     .coffeeLogo {
@@ -52,8 +60,97 @@ body {
         font-weight: bold;
     }
 
-    h2 {
+    h2, h3 {
         text-align: center;
         font-weight: lighter;
     }
 }
+
+//Our input styling
+.inputContainer {
+
+
+    width: 85%;
+    margin-left: auto;
+    margin-right: auto;
+    padding-bottom: 10px;
+    display: block;
+
+    .inputIcon {
+        font-size: 40px !important;
+        vertical-align: middle;
+        display: inline-block;
+        color: $standard;
+    }
+
+    .cardInput {
+        width: calc(100% - 60px);
+    }
+
+    .iconMargin {
+        margin-left: 15px;
+    }
+}
+
+//Our form titles
+.formTitle {
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+//Our form check list
+.checkList {
+
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    list-style: none;
+
+    .orgCheck {
+
+        &.md-checked {
+
+            .md-icon {
+
+                background-color: $checkStandard;
+            }
+        }
+
+        .md-ink-ripple {
+            color: $checkStandardRipple;
+        }
+
+        a {
+
+            color: $linkText;
+            text-decoration: underline;
+            font-size: 20px;
+            vertical-align: middle;
+        }
+
+    }
+
+}
+
+//Our form buttons
+.center {
+
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+}
+
+.formButton {
+
+    text-transform: inherit;
+    padding-left: 15px;
+    padding-top: 7px;
+    padding-right: 15px;
+    padding-bottom: 7px;
+    font-size: 17px;
+
+    background-color: $standard !important;
+    color: $cardBg !important;
+
+}