login

www/css/style.css

@@ -8,6 +8,62 @@
 .o_floatRight{
     float: right;
 }
+.o_loginBackground{
+    height: 100%!important;
+    width: 100%;
+    min-height: auto;
+    -webkit-background-size: cover;
+    -moz-background-size: cover;
+    background-size: cover;
+    -o-background-size: cover;
+    background-position: center;
+    background-image: url('../img/userProfileBackground.png');
+    text-align: center;
+    /*color: white;*/
+
+    /* Create the parallax scrolling effect */
+    background-attachment: fixed;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+
+    color: #ffffff;
+
+    padding-top: 30%;
+}
+@font-face {
+    font-family: 'Thinking_of_Betty';
+    src: url('../fonts/Thinking_of_Betty.ttf');
+}
+.o_loginBackground h1{
+    color: #ffffff!important;
+    margin: 10px;
+    font-family: 'Thinking_of_Betty'
+    /*font-weight: bold;*/
+}
+.o_loginDivForm{
+    /*background: rgba(255, 255, 255, 0.2);*/
+}
+.o_loginInput{
+    background: rgba(255, 255, 255, 0.2);
+    padding:10px;
+    color: #ffffff;
+    border: 0px;
+    width: 80%;
+    font-size: 120%;
+}
+.o_loginInput::-webkit-input-placeholder{
+    color: rgba(255, 255, 255, 0.6);
+}
+.o_loginButton{
+    color: rgba(0, 0, 0, 0.8);
+    font-weight: bold;
+    margin: 10%;
+}
+.o_transparentBackground{
+    background: rgba(255, 255, 255, 0);
+    color: #ffffff;
+}
 .o_userProfileBackground{
     min-height: 30%!important;
     width: 100%;

www/templates/login.html

@@ -1,22 +1,39 @@
 <ion-modal-view>
   <ion-content>
-      <img src="img/header.png" style="width:100%;"/>
-    <form ng-submit="doLogin()">
-      <div class="list padding">
-          <span class="item-note">v0.0.1</span>
-          <md-input-container class="md-block" flex-gt-sm>
-            <label>{{'Username' | translate}}</label>
-            <input ng-model="loginData.username">
-          </md-input-container>
-          <md-input-container class="md-block" flex-gt-sm>
-            <label>{{'Password' | translate}}</label>
-            <input ng-model="loginData.password" type="password">
-          </md-input-container>
-        <div>
-            <md-button class="o_purple100" ng-href="#/app/signup">{{'Signup' | translate}}</md-button>
-            <md-button class="o_purple300 o_floatRight" ng-click="doLogin()">{{'Login' | translate}}</md-button>
+    <div class="o_loginBackground">
+      <div class="o_loginDivForm">
+        <h1>Cars in Common</h1>
+
+        <span class="item-note">v0.0.1</span>
+        <br><br>
+        <p>
+            <i class="icon ion-person"></i>
+            <input ng-model="loginData.username" class="o_loginInput"
+            placeholder="{{'Username' | translate}}">
+        </p>
+        <br>
+        <p>
+            <i class="icon ion-locked"></i>
+            <input ng-model="loginData.password" class="o_loginInput"
+            placeholder="{{'Password' | translate}}" style="-webkit-text-security: disc;">
+        </p>
+        <br>
+        <p>
+            <a class="o_loginButton button button-block" ng-click="doLogin()">
+                {{'LOG IN' | translate}}
+            </a>
+        </p>
+        <!--<p>
+            <a class="o_loginButton button button-block" ng-href="#/app/signup">
+                {{'Signup' | translate}}
+            </a>
+        </p>-->
+        <div class="bar bar-footer o_transparentBackground">
+            <a class="button o_purple300 pull-right" ng-href="#/app/signup">
+                {{'SIGN UP' | translate}}
+            </a>
         </div>
       </div>
-    </form>
+    </div>
   </ion-content>
 </ion-modal-view>

www/templates/newTravel.html

@@ -6,11 +6,11 @@
       </a>
       <a href="#/app/askCar" class="item item-icon-left o_purple400">
         <i class="icon ion-help"></i>
-        Ask for Car
+        Ask for Car (not yet)
       </a>
       <a href="#/app/askPackage" class="item item-icon-left o_purple300">
       <i class="icon ion-ios-box"></i>
-        Ask for Package
+        Ask for Package (not yet)
     </a>
   </ion-content>
 </ion-view>