user profile, signup, login to the new design

www/css/style.css

@@ -8,6 +8,40 @@
 .o_floatRight{
     float: right;
 }
+.o_userProfileBackground{
+    min-height: 30%!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;
+}
+.o_userImgCircular {
+    margin-top: 5%;
+    background: #ffffff;
+	width: 40%;
+    border: 4px #ffffff solid;
+	border-radius: 150px;
+	-webkit-border-radius: 150px;
+	-moz-border-radius: 150px;
+	/*background: url(http://link-to-your/image.jpg) no-repeat;*/
+}
+.o_userImgCircular p{
+    color: #ffffff!important;
+}
 /*
     SISTEMA DE COLORS
 

www/js/translations.js

@@ -13,7 +13,7 @@ var translations = {
 		"Login": "Login",
 		"Username": "Username",
 		"Password": "Password",
-		"Mail": "Mail",
+		"Email": "Email",
 		"Phone": "Phone",
 		"Telegram": "Telegram",
 		"Avatar": "Avatar",

www/templates/login.html

@@ -1,24 +1,20 @@
 <ion-modal-view>
-  <ion-header-bar>
-    <h1 class="title">{{'Login' | translate}}</h1>
-    <div class="buttons">
-      <a class="button button-balanced" ng-href="#/app/signup">{{'Signup' | translate}}</a>
-    </div>
-  </ion-header-bar>
   <ion-content>
+      <img src="img/header.png" style="width:100%;"/>
     <form ng-submit="doLogin()">
-      <div class="list">
-        <label class="item item-input">
-          <span class="input-label">{{'Username' | translate}}</span>
-          <input type="text" ng-model="loginData.username">
-        </label>
-        <label class="item item-input">
-          <span class="input-label">{{'Password' | translate}}</span>
-          <input type="password" ng-model="loginData.password">
-        </label>
-        <label class="item">
-          <button class="button button-block button-positive" type="submit">{{'Login' | translate}}</button>
-        </label>
+      <div class="list padding">
+          <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>
       </div>
     </form>
   </ion-content>

www/templates/signup.html

@@ -1,44 +1,37 @@
 <ion-modal-view>
   <ion-header-bar>
     <h1 class="title">{{'Signup' | translate }}</h1>
-    <div class="buttons">
-      <a class="button button-dark" ng-href="#/app/login">{{'Close' | translate }}</a>
-    </div>
   </ion-header-bar>
   <ion-content>
-    <form ng-submit="doSignup()">
-      <div class="list">
-        <label class="item item-input">
-          <span class="input-label">{{'Username' | translate }}*</span>
-          <input type="text" ng-model="signupData.username">
-        </label>
-        <label class="item item-input">
-          <span class="input-label">{{'Password' | translate }}*</span>
-          <input type="password" ng-model="signupData.password">
-        </label>
-        <label class="item item-input">
-          <span class="input-label">{{'Mail' | translate }}*</span>
-          <input type="email" ng-model="signupData.email">
-        </label>
-        <label class="item item-input">
-          <span class="input-label">{{'Phone' | translate }}</span>
-          <input type="number" ng-model="signupData.phone">
-        </label>
-        <label class="item item-input">
-          <span class="input-label">{{'Telegram' | translate }}</span>
-          <input type="text" ng-model="signupData.telegram">
-        </label>
-        <label class="item item-input">
-          <span class="input-label">{{'Description' | translate }}</span>
-          <input type="text" ng-model="signupData.description">
-        </label>
-        <!--<p>{{'Avatar' | translate }}*: <b>{{signupData.avatar}}</b></p>
-        <img ng-repeat="avatar in avatars" ng-click="avatarSelect('{{avatar}}')" ng-src="img/avatars/{{avatar}}.png" class="o-imgSelectAvatar" >
--->
-        <label class="item">
-          <button class="button button-block button-positive" type="submit">{{'Signup' | translate }}</button>
-        </label>
+      <div class="padding">
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>{{'Username' | translate}}</label>
+            <input ng-model="signupData.username">
+          </md-input-container>
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>{{'Password' | translate}}</label>
+            <input type="password" ng-model="signupData.password">
+          </md-input-container>
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>{{'Email' | translate}}</label>
+            <input ng-model="signupData.email">
+          </md-input-container>
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>{{'Phone' | translate}}</label>
+            <input type="number" ng-model="signupData.phone">
+          </md-input-container>
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>{{'Telegram' | translate}}</label>
+            <input ng-model="signupData.telegram">
+          </md-input-container>
+          <md-input-container class="md-block" flex-gt-sm>
+            <label>{{'Description' | translate}}</label>
+            <input ng-model="signupData.description">
+          </md-input-container>
+        <div>
+            <md-button class="o_purple100" ng-href="#/app/login">{{'Cancel' | translate}}</md-button>
+            <md-button class="o_purple300 o_floatRight" ng-click="doSignup()">{{'Signup' | translate}}</md-button>
+        </div>
       </div>
-    </form>
   </ion-content>
 </ion-modal-view>

www/templates/user.html

@@ -1,12 +1,14 @@
 <ion-view view-title="{{'User' | translate}} {{user.username}}">
   <ion-content>
-    <div class="item item-avatar">
-        <img ng-src="{{user.avatar}}" />
-        <h2>{{user.username}}</h2>
+    <div class="o_userProfileBackground">
+        <img ng-src="{{user.avatar}}" class="o_userImgCircular" />
+        <h3>{{user.username}}</h3>
+        <p>{{user.description}}</p>
+        <p>{{user.email}}</p>
     </div>
-    <div class="item item-body">
-        <p class="o-bold">{{user.description}}</p>
-        <p>{{user.mail}}</p>
+    <div class="">
+
+
         <p ng-show="user.telegram">
           <!--<a ng-href="https://telegram.me/{{user.telegram}}" target="_blank" class="button">-->
             <img class='o-imgMenu' src="img/telegram.png" /> @{{user.telegram}}
@@ -32,6 +34,9 @@
           </a>-->
         </div>
     </div>
+    <div class="item">
+        <img src="img/faircoinpublickey_sample.png" style="width: 100%;" />
+    </div>
     <div class="item item-body">
         {{'current_publications_of' | translate}} {{user.username}}:
         <div class="o_text_purple600">{{user.travels.length}} {{'publications' | translate}}</div>