From 32e23b01a7bf28f2b8f7a63b34492a2c30220ad1 Mon Sep 17 00:00:00 2001 From: Anthony Ridding Date: Fri, 24 Mar 2017 15:28:30 -0400 Subject: [PATCH] Created Login/Sign up --- .../android/assets/www/css/styles.css | 124 ++++++++++++++++ .../platforms/android/assets/www/index.html | 36 ++++- .../platforms/android/assets/www/js/my-app.js | 19 ++- .../platforms/android/assets/www/login.html | 138 ++++++++++++++++++ OddJobb/platforms/browser/www/css/styles.css | 124 ++++++++++++++++ OddJobb/platforms/browser/www/index.html | 36 ++++- OddJobb/platforms/browser/www/js/my-app.js | 19 ++- OddJobb/platforms/browser/www/login.html | 138 ++++++++++++++++++ OddJobb/www/css/styles.css | 124 ++++++++++++++++ OddJobb/www/index.html | 36 ++++- OddJobb/www/js/my-app.js | 19 ++- OddJobb/www/login.html | 138 ++++++++++++++++++ 12 files changed, 927 insertions(+), 24 deletions(-) diff --git a/OddJobb/platforms/android/assets/www/css/styles.css b/OddJobb/platforms/android/assets/www/css/styles.css index 631f0de..bdb17cb 100644 --- a/OddJobb/platforms/android/assets/www/css/styles.css +++ b/OddJobb/platforms/android/assets/www/css/styles.css @@ -12,4 +12,128 @@ .statusbar-overlay { background: #000000; +} + +@import url(https://fonts.googleapis.com/css?family=Roboto:300); + +body{ + background-color: #1cbb9b; +} +.login-box{ + position:relative; + margin: 10px auto; + width: 500px; + height: 380px; + background-color: #fff; + padding: 10px; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +} +.lb-header{ + position:relative; + color: #00415d; + margin: 5px 5px 10px 5px; + padding-bottom:10px; + border-bottom: 1px solid #eee; + text-align:center; + height:28px; +} +.lb-header a{ + margin: 0 25px; + padding: 0 20px; + text-decoration: none; + color: #666; + font-weight: bold; + font-size: 15px; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.lb-header .active{ + color: #029f5b; + font-size: 18px; +} +.social-login{ + position:relative; + float: left; + width: 100%; + height:auto; + padding: 10px 0 15px 0; + border-bottom: 1px solid #eee; +} +.social-login a{ + position:relative; + float: left; + width:calc(40% - 8px); + text-decoration: none; + color: #fff; + border: 1px solid rgba(0,0,0,0.05); + padding: 12px; + border-radius: 2px; + font-size: 12px; + text-transform: uppercase; + margin: 0 3%; + text-align:center; +} +.social-login a i{ + position: relative; + float: left; + width: 20px; + top: 2px; +} +.social-login a:first-child{ + background-color: #49639F; +} +.social-login a:last-child{ + background-color: #DF4A32; +} +.email-login,.email-signup{ + position:relative; + float: left; + width: 100%; + height:auto; + margin-top: 20px; + text-align:center; +} +.u-form-group{ + width:100%; + margin-bottom: 10px; +} +.u-form-group input[type="email"], +.u-form-group input[type="password"]{ + width: calc(50% - 22px); + height:45px; + outline: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 2px; + color: #333; + font-size:0.8rem; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; +} +.u-form-group input:focus{ + border-color: #358efb; +} +.u-form-group button{ + width:50%; + background-color: #1CB94E; + border: none; + outline: none; + color: #fff; + font-size: 14px; + font-weight: normal; + padding: 14px 0; + border-radius: 2px; + text-transform: uppercase; +} +.forgot-password{ + width:50%; + text-align: left; + text-decoration: underline; + color: #888; + font-size: 0.75rem; } \ No newline at end of file diff --git a/OddJobb/platforms/android/assets/www/index.html b/OddJobb/platforms/android/assets/www/index.html index 9fb96c5..8ad5db4 100644 --- a/OddJobb/platforms/android/assets/www/index.html +++ b/OddJobb/platforms/android/assets/www/index.html @@ -10,7 +10,6 @@ * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src --> - @@ -57,6 +56,9 @@
  • Messages
    • +
  • + About +
  • Logout
    • @@ -90,9 +92,36 @@
    -

    Page content goes here

    - About app +
    @@ -112,6 +141,7 @@ + diff --git a/OddJobb/platforms/android/assets/www/js/my-app.js b/OddJobb/platforms/android/assets/www/js/my-app.js index 04a696c..067b217 100644 --- a/OddJobb/platforms/android/assets/www/js/my-app.js +++ b/OddJobb/platforms/android/assets/www/js/my-app.js @@ -17,6 +17,20 @@ $$(document).on('deviceready', function() { }); +$(".email-signup").hide(); +$("#signup-box-link").click(function(){ + $(".email-login").fadeOut(100); + $(".email-signup").delay(100).fadeIn(100); + $("#login-box-link").removeClass("active"); + $("#signup-box-link").addClass("active"); +}); +$("#login-box-link").click(function(){ + $(".email-login").delay(100).fadeIn(100);; + $(".email-signup").fadeOut(100); + $("#login-box-link").addClass("active"); + $("#signup-box-link").removeClass("active"); +}); + // Now we need to run the code that will be executed only for About page. // Option 1. Using page callback for page (for "about" page in this case) (recommended way): @@ -41,8 +55,3 @@ $$(document).on('pageInit', function (e) { } }) -// Option 2. Using live 'pageInit' event handlers for each page -$$(document).on('pageInit', '.page[data-page="about"]', function (e) { - // Following code will be executed for page with data-page attribute equal to "about" - myApp.alert('Here comes About page'); -}) diff --git a/OddJobb/platforms/android/assets/www/login.html b/OddJobb/platforms/android/assets/www/login.html index e69de29..fd9130b 100644 --- a/OddJobb/platforms/android/assets/www/login.html +++ b/OddJobb/platforms/android/assets/www/login.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + OddJobbs - Register + + + + + + + + + + + +
    + + +
    + +
    +
    +
    Navigation
    +
    + +
    +
    +
    + + +
    + +
    + +
    +
    + +
    Awesome App
    +
    + + +
    +
    +
    + +
    + +
    + +
    +
    + + +
    +
    +
    +
    + +
    +
    + + Link 1 + Link 2 +
    +
    +
    +
    + + + + + + + + + diff --git a/OddJobb/platforms/browser/www/css/styles.css b/OddJobb/platforms/browser/www/css/styles.css index 631f0de..bdb17cb 100644 --- a/OddJobb/platforms/browser/www/css/styles.css +++ b/OddJobb/platforms/browser/www/css/styles.css @@ -12,4 +12,128 @@ .statusbar-overlay { background: #000000; +} + +@import url(https://fonts.googleapis.com/css?family=Roboto:300); + +body{ + background-color: #1cbb9b; +} +.login-box{ + position:relative; + margin: 10px auto; + width: 500px; + height: 380px; + background-color: #fff; + padding: 10px; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +} +.lb-header{ + position:relative; + color: #00415d; + margin: 5px 5px 10px 5px; + padding-bottom:10px; + border-bottom: 1px solid #eee; + text-align:center; + height:28px; +} +.lb-header a{ + margin: 0 25px; + padding: 0 20px; + text-decoration: none; + color: #666; + font-weight: bold; + font-size: 15px; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.lb-header .active{ + color: #029f5b; + font-size: 18px; +} +.social-login{ + position:relative; + float: left; + width: 100%; + height:auto; + padding: 10px 0 15px 0; + border-bottom: 1px solid #eee; +} +.social-login a{ + position:relative; + float: left; + width:calc(40% - 8px); + text-decoration: none; + color: #fff; + border: 1px solid rgba(0,0,0,0.05); + padding: 12px; + border-radius: 2px; + font-size: 12px; + text-transform: uppercase; + margin: 0 3%; + text-align:center; +} +.social-login a i{ + position: relative; + float: left; + width: 20px; + top: 2px; +} +.social-login a:first-child{ + background-color: #49639F; +} +.social-login a:last-child{ + background-color: #DF4A32; +} +.email-login,.email-signup{ + position:relative; + float: left; + width: 100%; + height:auto; + margin-top: 20px; + text-align:center; +} +.u-form-group{ + width:100%; + margin-bottom: 10px; +} +.u-form-group input[type="email"], +.u-form-group input[type="password"]{ + width: calc(50% - 22px); + height:45px; + outline: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 2px; + color: #333; + font-size:0.8rem; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; +} +.u-form-group input:focus{ + border-color: #358efb; +} +.u-form-group button{ + width:50%; + background-color: #1CB94E; + border: none; + outline: none; + color: #fff; + font-size: 14px; + font-weight: normal; + padding: 14px 0; + border-radius: 2px; + text-transform: uppercase; +} +.forgot-password{ + width:50%; + text-align: left; + text-decoration: underline; + color: #888; + font-size: 0.75rem; } \ No newline at end of file diff --git a/OddJobb/platforms/browser/www/index.html b/OddJobb/platforms/browser/www/index.html index 9fb96c5..8ad5db4 100644 --- a/OddJobb/platforms/browser/www/index.html +++ b/OddJobb/platforms/browser/www/index.html @@ -10,7 +10,6 @@ * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src --> - @@ -57,6 +56,9 @@
  • Messages
    • +
  • + About +
  • Logout
    • @@ -90,9 +92,36 @@
    -

    Page content goes here

    - About app +
    @@ -112,6 +141,7 @@ + diff --git a/OddJobb/platforms/browser/www/js/my-app.js b/OddJobb/platforms/browser/www/js/my-app.js index 04a696c..067b217 100644 --- a/OddJobb/platforms/browser/www/js/my-app.js +++ b/OddJobb/platforms/browser/www/js/my-app.js @@ -17,6 +17,20 @@ $$(document).on('deviceready', function() { }); +$(".email-signup").hide(); +$("#signup-box-link").click(function(){ + $(".email-login").fadeOut(100); + $(".email-signup").delay(100).fadeIn(100); + $("#login-box-link").removeClass("active"); + $("#signup-box-link").addClass("active"); +}); +$("#login-box-link").click(function(){ + $(".email-login").delay(100).fadeIn(100);; + $(".email-signup").fadeOut(100); + $("#login-box-link").addClass("active"); + $("#signup-box-link").removeClass("active"); +}); + // Now we need to run the code that will be executed only for About page. // Option 1. Using page callback for page (for "about" page in this case) (recommended way): @@ -41,8 +55,3 @@ $$(document).on('pageInit', function (e) { } }) -// Option 2. Using live 'pageInit' event handlers for each page -$$(document).on('pageInit', '.page[data-page="about"]', function (e) { - // Following code will be executed for page with data-page attribute equal to "about" - myApp.alert('Here comes About page'); -}) diff --git a/OddJobb/platforms/browser/www/login.html b/OddJobb/platforms/browser/www/login.html index e69de29..fd9130b 100644 --- a/OddJobb/platforms/browser/www/login.html +++ b/OddJobb/platforms/browser/www/login.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + OddJobbs - Register + + + + + + + + + + + +
    + + +
    + +
    +
    +
    Navigation
    +
    + +
    +
    +
    + + +
    + +
    + +
    +
    + +
    Awesome App
    +
    + + +
    +
    +
    + +
    + +
    + +
    +
    + + +
    +
    +
    +
    + +
    +
    + + Link 1 + Link 2 +
    +
    +
    +
    + + + + + + + + + diff --git a/OddJobb/www/css/styles.css b/OddJobb/www/css/styles.css index 631f0de..bdb17cb 100644 --- a/OddJobb/www/css/styles.css +++ b/OddJobb/www/css/styles.css @@ -12,4 +12,128 @@ .statusbar-overlay { background: #000000; +} + +@import url(https://fonts.googleapis.com/css?family=Roboto:300); + +body{ + background-color: #1cbb9b; +} +.login-box{ + position:relative; + margin: 10px auto; + width: 500px; + height: 380px; + background-color: #fff; + padding: 10px; + border-radius: 3px; + -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33); +} +.lb-header{ + position:relative; + color: #00415d; + margin: 5px 5px 10px 5px; + padding-bottom:10px; + border-bottom: 1px solid #eee; + text-align:center; + height:28px; +} +.lb-header a{ + margin: 0 25px; + padding: 0 20px; + text-decoration: none; + color: #666; + font-weight: bold; + font-size: 15px; + -webkit-transition: all 0.1s linear; + -moz-transition: all 0.1s linear; + transition: all 0.1s linear; +} +.lb-header .active{ + color: #029f5b; + font-size: 18px; +} +.social-login{ + position:relative; + float: left; + width: 100%; + height:auto; + padding: 10px 0 15px 0; + border-bottom: 1px solid #eee; +} +.social-login a{ + position:relative; + float: left; + width:calc(40% - 8px); + text-decoration: none; + color: #fff; + border: 1px solid rgba(0,0,0,0.05); + padding: 12px; + border-radius: 2px; + font-size: 12px; + text-transform: uppercase; + margin: 0 3%; + text-align:center; +} +.social-login a i{ + position: relative; + float: left; + width: 20px; + top: 2px; +} +.social-login a:first-child{ + background-color: #49639F; +} +.social-login a:last-child{ + background-color: #DF4A32; +} +.email-login,.email-signup{ + position:relative; + float: left; + width: 100%; + height:auto; + margin-top: 20px; + text-align:center; +} +.u-form-group{ + width:100%; + margin-bottom: 10px; +} +.u-form-group input[type="email"], +.u-form-group input[type="password"]{ + width: calc(50% - 22px); + height:45px; + outline: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 2px; + color: #333; + font-size:0.8rem; + -webkit-transition:all 0.1s linear; + -moz-transition:all 0.1s linear; + transition:all 0.1s linear; +} +.u-form-group input:focus{ + border-color: #358efb; +} +.u-form-group button{ + width:50%; + background-color: #1CB94E; + border: none; + outline: none; + color: #fff; + font-size: 14px; + font-weight: normal; + padding: 14px 0; + border-radius: 2px; + text-transform: uppercase; +} +.forgot-password{ + width:50%; + text-align: left; + text-decoration: underline; + color: #888; + font-size: 0.75rem; } \ No newline at end of file diff --git a/OddJobb/www/index.html b/OddJobb/www/index.html index 9fb96c5..8ad5db4 100644 --- a/OddJobb/www/index.html +++ b/OddJobb/www/index.html @@ -10,7 +10,6 @@ * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: * Enable inline JS: add 'unsafe-inline' to default-src --> - @@ -57,6 +56,9 @@
  • Messages
    • +
  • + About +
  • Logout
    • @@ -90,9 +92,36 @@
    -

    Page content goes here

    - About app +
    @@ -112,6 +141,7 @@ + diff --git a/OddJobb/www/js/my-app.js b/OddJobb/www/js/my-app.js index 04a696c..067b217 100644 --- a/OddJobb/www/js/my-app.js +++ b/OddJobb/www/js/my-app.js @@ -17,6 +17,20 @@ $$(document).on('deviceready', function() { }); +$(".email-signup").hide(); +$("#signup-box-link").click(function(){ + $(".email-login").fadeOut(100); + $(".email-signup").delay(100).fadeIn(100); + $("#login-box-link").removeClass("active"); + $("#signup-box-link").addClass("active"); +}); +$("#login-box-link").click(function(){ + $(".email-login").delay(100).fadeIn(100);; + $(".email-signup").fadeOut(100); + $("#login-box-link").addClass("active"); + $("#signup-box-link").removeClass("active"); +}); + // Now we need to run the code that will be executed only for About page. // Option 1. Using page callback for page (for "about" page in this case) (recommended way): @@ -41,8 +55,3 @@ $$(document).on('pageInit', function (e) { } }) -// Option 2. Using live 'pageInit' event handlers for each page -$$(document).on('pageInit', '.page[data-page="about"]', function (e) { - // Following code will be executed for page with data-page attribute equal to "about" - myApp.alert('Here comes About page'); -}) diff --git a/OddJobb/www/login.html b/OddJobb/www/login.html index e69de29..fd9130b 100644 --- a/OddJobb/www/login.html +++ b/OddJobb/www/login.html @@ -0,0 +1,138 @@ + + + + + + + + + + + + + + + OddJobbs - Register + + + + + + + + + + + +
    + + +
    + +
    +
    +
    Navigation
    +
    + +
    +
    +
    + + +
    + +
    + +
    +
    + +
    Awesome App
    +
    + + +
    +
    +
    + +
    + +
    + +
    +
    + + +
    +
    +
    +
    + +
    +
    + + Link 1 + Link 2 +
    +
    +
    +
    + + + + + + + + +