Skip to content

Created Login/Sign up #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Mar 24, 2017
Merged

Created Login/Sign up #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32e23b0
Created Login/Sign up
Mar 24, 2017
2a9acc2
Merge branch 'master' into Anthony
AGWeb18 Mar 24, 2017
751e4ba
Merge branch 'master' into Anthony
AGWeb18 Mar 24, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 124 additions & 0 deletions OddJobb/platforms/android/assets/www/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
40 changes: 35 additions & 5 deletions OddJobb/platforms/android/assets/www/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<!--
Expand All @@ -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
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> -->

<!-- Required meta tags-->
<meta charset="utf-8">
Expand Down Expand Up @@ -57,6 +56,9 @@
<li>
<a href="messages.html" class="item-link list-button">Messages</a>
</li>
<li>
<a href="about.html" class="item-link list-button close-panel">About</a>
</li>
<li>
<a href="#" class="item-link list-button">Logout</a>
</li>
Expand Down Expand Up @@ -90,9 +92,36 @@
<!-- Scrollable page content -->
<div class="page-content">
<div class="content-block">
<p>Page content goes here</p>
<!-- Link to another page -->
<a href="about.html">About app</a>
<div class="login-box">
<div class="lb-header">
<a href="index.html" class="active" id="login-box-link">Login</a>
<a href="login.html" id="signup-box-link">Sign Up</a>
</div>
<div class="social-login">
<a href="#">
<i class="fa fa-facebook fa-lg"></i>
Login with facebook
</a>
<a href="#">
<i class="fa fa-google-plus fa-lg"></i>
Log in with Google
</a>
</div>
<form class="email-login">
<div class="u-form-group">
<input type="email" placeholder="Email"/>
</div>
<div class="u-form-group">
<input type="password" placeholder="Password"/>
</div>
<div class="u-form-group">
<button>Log in</button>
</div>
<div class="u-form-group">
<a href="#" class="forgot-password">Forgot password?</a>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -111,8 +140,9 @@
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/messages.js"></script>
</body>

</html>
</html>
19 changes: 14 additions & 5 deletions OddJobb/platforms/android/assets/www/js/my-app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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):
Expand All @@ -43,8 +57,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');
})
138 changes: 138 additions & 0 deletions OddJobb/platforms/android/assets/www/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
<!DOCTYPE html>
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* 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
-->

<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">

<!-- Your app title -->
<title>OddJobbs - Register</title>

<!-- This template defaults to the iOS CSS theme. To support both iOS and material design themes, see the Framework7 Tutorial at the link below:
http://www.idangero.us/framework7/tutorials/maintain-both-ios-and-material-themes-in-single-app.html
-->

<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">

<link rel="stylesheet" href="css/styles.css">
</head>

<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>

<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Left panel with reveal effect-->
<div class="panel panel-left panel-reveal">
<div class="content-block">
<div class="content-block-title">Navigation</div>
<div class="list-block">
<ul>
<li>
<a href="#" class="item-link list-button close-panel">Profile</a>
</li>
<li>
<a href="#" class="item-link list-button close-panel">Submit a new post</a>
</li>
<li>
<a href="/" class="item-link list-button close-panel">View current posts</a>
</li>
<li>
<a href="#" class="item-link list-button close-panel">Messages</a>
</li>
<li>
<a href="about.html" class="item-link list-button close-panel">About</a>
</li>
<li>
<a href="#" class="item-link list-button close-panel">Logout</a>
</li>
</ul>
</div>
</div>
</div>

<!-- Views -->
<div class="views">
<!-- Your main view, should have "view-main" class -->
<div class="view view-main">
<!-- Top Navbar-->
<div class="navbar">
<div class="navbar-inner">
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
<div class="center sliding">Awesome App</div>
<div class="right">
<!--
Right link contains only icon - additional "icon-only" class
Additional "open-panel" class tells app to open panel when we click on this link
-->
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
</div>
</div>
</div>
<!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
<div class="pages navbar-through toolbar-through">
<!-- Page, "data-page" contains page name -->
<div data-page="index" class="page">
<!-- Scrollable page content -->
<div class="page-content">
<div class="content-block">
<!-- Link to another page -->
<div class="login-box">
<div class="lb-header">
<a href="index.html" class="active" id="login-box-link">Login</a>
<a href="login.html" id="signup-box-link">Sign Up</a>
</div>
<form class="email-signup">
<div class="u-form-group">
<input type="email" placeholder="Email"/>
</div>
<div class="u-form-group">
<input type="password" placeholder="Password"/>
</div>
<div class="u-form-group">
<input type="password" placeholder="Confirm Password"/>
</div>
<div class="u-form-group">
<button>Sign Up</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Toolbar-->
<div class="toolbar">
<div class="toolbar-inner">
<!-- Toolbar links -->
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
</div>
</div>
</div>
</div>

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

</body>

</html>
Loading