Skip to content

Commit 1aa2155

Browse files
AGWeb18AGWeb18
authored
Merge pull request #1 from AGWeb18/Anthony
Created Login/Sign up
2 parents 2c9f721 + 751e4ba commit 1aa2155

File tree

12 files changed

+918
-22
lines changed

12 files changed

+918
-22
lines changed

‎OddJobb/platforms/android/assets/www/css/styles.css‎

Lines changed: 124 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,128 @@
1212

1313
.statusbar-overlay {
1414
background: #000000;
15+
}
16+
17+
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
18+
19+
body{
20+
background-color: #1cbb9b;
21+
}
22+
.login-box{
23+
position:relative;
24+
margin: 10px auto;
25+
width: 500px;
26+
height: 380px;
27+
background-color: #fff;
28+
padding: 10px;
29+
border-radius: 3px;
30+
-webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33);
31+
-moz-box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33);
32+
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.33);
33+
}
34+
.lb-header{
35+
position:relative;
36+
color: #00415d;
37+
margin: 5px 5px 10px 5px;
38+
padding-bottom:10px;
39+
border-bottom: 1px solid #eee;
40+
text-align:center;
41+
height:28px;
42+
}
43+
.lb-header a{
44+
margin: 0 25px;
45+
padding: 0 20px;
46+
text-decoration: none;
47+
color: #666;
48+
font-weight: bold;
49+
font-size: 15px;
50+
-webkit-transition: all 0.1s linear;
51+
-moz-transition: all 0.1s linear;
52+
transition: all 0.1s linear;
53+
}
54+
.lb-header .active{
55+
color: #029f5b;
56+
font-size: 18px;
57+
}
58+
.social-login{
59+
position:relative;
60+
float: left;
61+
width: 100%;
62+
height:auto;
63+
padding: 10px 0 15px 0;
64+
border-bottom: 1px solid #eee;
65+
}
66+
.social-login a{
67+
position:relative;
68+
float: left;
69+
width:calc(40% - 8px);
70+
text-decoration: none;
71+
color: #fff;
72+
border: 1px solid rgba(0,0,0,0.05);
73+
padding: 12px;
74+
border-radius: 2px;
75+
font-size: 12px;
76+
text-transform: uppercase;
77+
margin: 0 3%;
78+
text-align:center;
79+
}
80+
.social-login a i{
81+
position: relative;
82+
float: left;
83+
width: 20px;
84+
top: 2px;
85+
}
86+
.social-login a:first-child{
87+
background-color: #49639F;
88+
}
89+
.social-login a:last-child{
90+
background-color: #DF4A32;
91+
}
92+
.email-login,.email-signup{
93+
position:relative;
94+
float: left;
95+
width: 100%;
96+
height:auto;
97+
margin-top: 20px;
98+
text-align:center;
99+
}
100+
.u-form-group{
101+
width:100%;
102+
margin-bottom: 10px;
103+
}
104+
.u-form-group input[type="email"],
105+
.u-form-group input[type="password"]{
106+
width: calc(50% - 22px);
107+
height:45px;
108+
outline: none;
109+
border: 1px solid #ddd;
110+
padding: 0 10px;
111+
border-radius: 2px;
112+
color: #333;
113+
font-size:0.8rem;
114+
-webkit-transition:all 0.1s linear;
115+
-moz-transition:all 0.1s linear;
116+
transition:all 0.1s linear;
117+
}
118+
.u-form-group input:focus{
119+
border-color: #358efb;
120+
}
121+
.u-form-group button{
122+
width:50%;
123+
background-color: #1CB94E;
124+
border: none;
125+
outline: none;
126+
color: #fff;
127+
font-size: 14px;
128+
font-weight: normal;
129+
padding: 14px 0;
130+
border-radius: 2px;
131+
text-transform: uppercase;
132+
}
133+
.forgot-password{
134+
width:50%;
135+
text-align: left;
136+
text-decoration: underline;
137+
color: #888;
138+
font-size: 0.75rem;
15139
}

‎OddJobb/platforms/android/assets/www/index.html‎

Lines changed: 35 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!DOCTYPE html>
22
<html>
33
<head>
44
<!--
@@ -10,7 +10,6 @@
1010
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
1111
* Enable inline JS: add 'unsafe-inline' to default-src
1212
-->
13-
<!-- <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 *"> -->
1413

1514
<!-- Required meta tags-->
1615
<meta charset="utf-8">
@@ -57,6 +56,9 @@
5756
<li>
5857
<a href="messages.html" class="item-link list-button">Messages</a>
5958
</li>
59+
<li>
60+
<a href="about.html" class="item-link list-button close-panel">About</a>
61+
</li>
6062
<li>
6163
<a href="#" class="item-link list-button">Logout</a>
6264
</li>
@@ -90,9 +92,36 @@
9092
<!-- Scrollable page content -->
9193
<div class="page-content">
9294
<div class="content-block">
93-
<p>Page content goes here</p>
9495
<!-- Link to another page -->
95-
<a href="about.html">About app</a>
96+
<div class="login-box">
97+
<div class="lb-header">
98+
<a href="index.html" class="active" id="login-box-link">Login</a>
99+
<a href="login.html" id="signup-box-link">Sign Up</a>
100+
</div>
101+
<div class="social-login">
102+
<a href="#">
103+
<i class="fa fa-facebook fa-lg"></i>
104+
Login with facebook
105+
</a>
106+
<a href="#">
107+
<i class="fa fa-google-plus fa-lg"></i>
108+
Log in with Google
109+
</a>
110+
</div>
111+
<form class="email-login">
112+
<div class="u-form-group">
113+
<input type="email" placeholder="Email"/>
114+
</div>
115+
<div class="u-form-group">
116+
<input type="password" placeholder="Password"/>
117+
</div>
118+
<div class="u-form-group">
119+
<button>Log in</button>
120+
</div>
121+
<div class="u-form-group">
122+
<a href="#" class="forgot-password">Forgot password?</a>
123+
</div>
124+
</div>
96125
</div>
97126
</div>
98127
</div>
@@ -111,8 +140,9 @@
111140
<script type="text/javascript" src="cordova.js"></script>
112141
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
113142
<script type="text/javascript" src="js/my-app.js"></script>
143+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
114144
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
115145
<script src="js/messages.js"></script>
116146
</body>
117147

118-
</html>
148+
</html>

‎OddJobb/platforms/android/assets/www/js/my-app.js‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,20 @@ $$(document).on('deviceready', function() {
1717
});
1818

1919

20+
$(".email-signup").hide();
21+
$("#signup-box-link").click(function(){
22+
$(".email-login").fadeOut(100);
23+
$(".email-signup").delay(100).fadeIn(100);
24+
$("#login-box-link").removeClass("active");
25+
$("#signup-box-link").addClass("active");
26+
});
27+
$("#login-box-link").click(function(){
28+
$(".email-login").delay(100).fadeIn(100);;
29+
$(".email-signup").fadeOut(100);
30+
$("#login-box-link").addClass("active");
31+
$("#signup-box-link").removeClass("active");
32+
});
33+
2034
// Now we need to run the code that will be executed only for About page.
2135

2236
// Option 1. Using page callback for page (for "about" page in this case) (recommended way):
@@ -43,8 +57,3 @@ $$(document).on('pageInit', function (e) {
4357
}
4458
})
4559

46-
// Option 2. Using live 'pageInit' event handlers for each page
47-
$$(document).on('pageInit', '.page[data-page="about"]', function (e) {
48-
// Following code will be executed for page with data-page attribute equal to "about"
49-
myApp.alert('Here comes About page');
50-
})

‎OddJobb/platforms/android/assets/www/login.html‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<!--
5+
Customize this policy to fit your own app's needs. For more guidance, see:
6+
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
7+
Some notes:
8+
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
9+
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
10+
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
11+
* Enable inline JS: add 'unsafe-inline' to default-src
12+
-->
13+
14+
<!-- Required meta tags-->
15+
<meta charset="utf-8">
16+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
17+
<meta name="apple-mobile-web-app-capable" content="yes">
18+
<meta name="apple-mobile-web-app-status-bar-style" content="black">
19+
<meta name="format-detection" content="telephone=no">
20+
<meta name="msapplication-tap-highlight" content="no">
21+
22+
<!-- Your app title -->
23+
<title>OddJobbs - Register</title>
24+
25+
<!-- This template defaults to the iOS CSS theme. To support both iOS and material design themes, see the Framework7 Tutorial at the link below:
26+
http://www.idangero.us/framework7/tutorials/maintain-both-ios-and-material-themes-in-single-app.html
27+
-->
28+
29+
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
30+
<link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
31+
32+
<link rel="stylesheet" href="css/styles.css">
33+
</head>
34+
35+
<body>
36+
<!-- Status bar overlay for full screen mode (PhoneGap) -->
37+
<div class="statusbar-overlay"></div>
38+
39+
<!-- Panels overlay-->
40+
<div class="panel-overlay"></div>
41+
<!-- Left panel with reveal effect-->
42+
<div class="panel panel-left panel-reveal">
43+
<div class="content-block">
44+
<div class="content-block-title">Navigation</div>
45+
<div class="list-block">
46+
<ul>
47+
<li>
48+
<a href="#" class="item-link list-button close-panel">Profile</a>
49+
</li>
50+
<li>
51+
<a href="#" class="item-link list-button close-panel">Submit a new post</a>
52+
</li>
53+
<li>
54+
<a href="/" class="item-link list-button close-panel">View current posts</a>
55+
</li>
56+
<li>
57+
<a href="#" class="item-link list-button close-panel">Messages</a>
58+
</li>
59+
<li>
60+
<a href="about.html" class="item-link list-button close-panel">About</a>
61+
</li>
62+
<li>
63+
<a href="#" class="item-link list-button close-panel">Logout</a>
64+
</li>
65+
</ul>
66+
</div>
67+
</div>
68+
</div>
69+
70+
<!-- Views -->
71+
<div class="views">
72+
<!-- Your main view, should have "view-main" class -->
73+
<div class="view view-main">
74+
<!-- Top Navbar-->
75+
<div class="navbar">
76+
<div class="navbar-inner">
77+
<!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
78+
<div class="center sliding">Awesome App</div>
79+
<div class="right">
80+
<!--
81+
Right link contains only icon - additional "icon-only" class
82+
Additional "open-panel" class tells app to open panel when we click on this link
83+
-->
84+
<a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
85+
</div>
86+
</div>
87+
</div>
88+
<!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
89+
<div class="pages navbar-through toolbar-through">
90+
<!-- Page, "data-page" contains page name -->
91+
<div data-page="index" class="page">
92+
<!-- Scrollable page content -->
93+
<div class="page-content">
94+
<div class="content-block">
95+
<!-- Link to another page -->
96+
<div class="login-box">
97+
<div class="lb-header">
98+
<a href="index.html" class="active" id="login-box-link">Login</a>
99+
<a href="login.html" id="signup-box-link">Sign Up</a>
100+
</div>
101+
<form class="email-signup">
102+
<div class="u-form-group">
103+
<input type="email" placeholder="Email"/>
104+
</div>
105+
<div class="u-form-group">
106+
<input type="password" placeholder="Password"/>
107+
</div>
108+
<div class="u-form-group">
109+
<input type="password" placeholder="Confirm Password"/>
110+
</div>
111+
<div class="u-form-group">
112+
<button>Sign Up</button>
113+
</div>
114+
</form>
115+
</div>
116+
</div>
117+
</div>
118+
</div>
119+
</div>
120+
<!-- Bottom Toolbar-->
121+
<div class="toolbar">
122+
<div class="toolbar-inner">
123+
<!-- Toolbar links -->
124+
<a href="#" class="link">Link 1</a>
125+
<a href="#" class="link">Link 2</a>
126+
</div>
127+
</div>
128+
</div>
129+
</div>
130+
131+
<script type="text/javascript" src="cordova.js"></script>
132+
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
133+
<script type="text/javascript" src="js/my-app.js"></script>
134+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
135+
136+
</body>
137+
138+
</html>

0 commit comments

Comments
 (0)