Post create

OddJobb/platforms/android/assets/www/about.html

@@ -19,8 +19,18 @@
     <div data-page="about" class="page">
         <div class="page-content">
             <div class="content-block">
-                <p>Here is About page!</p>
-                <p>Fusce eros lectus, accumsan eget mi vel, iaculis tincidunt felis. Nulla tincidunt pharetra sagittis. Fusce in felis eros. Nulla sit amet aliquam lorem, et gravida ipsum. Mauris consectetur nisl non sollicitudin tristique. Praesent vitae metus ac quam rhoncus mattis vel et nisi. Aenean aliquet, felis quis dignissim iaculis, lectus quam tincidunt ligula, et venenatis turpis risus sed lorem. Morbi eu metus elit. Ut vel diam dolor.</p>
+                <p><strong>Hack4Good - OddJobbs!</strong></p>
+                <p>
+                OddJobbs was inspired by a true story. One day after a big snowstorm, I received a text message from my mother saying there was an elderly woman who wasn't able to shovel her driveway. She lived on a street with a ton of kids, but wasn't able to connect with one of them to complete the task. 
+                </p>
+                <br />
+                <p>
+                Soon after, the idea of a Hackathon was proposed to a group of us at 360insights. This got me thinking and OddJobbs was later planted to connect those        
+                </p>
+                <br />
+                <p>
+                Anyone can use OddJobbs, if you're like my neighbour and just need a hand or if you travel frequently and want to support your local neighbourhood - OddJobbs was made for you. 
+                </p>                    
             </div>
         </div>
     </div>

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

@@ -9,7 +9,142 @@
 
    See https://github.com/apache/cordova-plugin-statusbar
 */
-
+#map { height: 45%; width: 100%;}
 .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;
+}
+
+.topmar{
+  margin: 0px 0;
+  font-size: 17px;
+
+}
+
+.abs{
+  position: absolute;
+}
+

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

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <!--
         Customize this policy to fit your own app's needs. For more guidance, see:
@@ -10,7 +11,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">
@@ -21,7 +21,7 @@
     <meta name="msapplication-tap-highlight" content="no">
 
     <!-- Your app title -->
-    <title>My App</title>
+    <title>OddJobbs</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
@@ -30,6 +30,7 @@
     <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/card.css">
     <link rel="stylesheet" href="css/styles.css">
 </head>
 
@@ -43,25 +44,27 @@
     <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="#" class="item-link list-button close-panel">Logout</a>
-					</li>
-				  </ul>
-				</div>
+            <div class="list-block">
+                <ul>
+                    <li>
+                        <a href="profile.html" id="profile" class="item-link list-button close-panel">Profile</a>
+
+                    </li>
+                    <li>
+                        <a href="createPost.html" id="createPost" class="item-link list-button close-panel">Submit a new post</a>
+                    </li>
+                    <li>
+                        <a href="postList.html" class="item-link list-button close-panel">View current posts</a>
+                    </li>
+                    <li>
+                        <a href="messages.html" id="viewMessages" class="item-link list-button close-panel">Messages</a>
+                    </li>
+
+                    <li>
+                        <a href="#" id="logout" onclick="logout()" class="item-link list-button close-panel">Logout</a>
+                    </li>
+                </ul>
+            </div>
         </div>
     </div>
 
@@ -73,7 +76,7 @@
             <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="center sliding">Odd Jobb</div>
                     <div class="right">
                         <!--
                           Right link contains only icon - additional "icon-only" class
@@ -85,33 +88,66 @@
             </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">
+                <div data-page="login" class="page">
                     <!-- 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>
+                            <form>
+                                <div class="list-block">
+                                    <ul>
+                                        <li class="item-content">
+                                            <div class="item-inner">
+                                                <div class="item-title label">Username</div>
+                                                <div class="item-input">
+                                                    <input type="text" id="username" name="username" placeholder="Your username">
+                                                </div>
+                                            </div>
+                                        </li>
+                                        <li class="item-content">
+                                            <div class="item-inner">
+                                                <div class="item-title label">Password</div>
+                                                <div class="item-input">
+                                                    <input type="password"  id="pass" name="password" placeholder="Your password">
+                                                </div>
+                                            </div>
+                                        </li>
+                                    </ul>
+                                </div>
+                                <div class="list-block">
+                                    <ul>
+                                        <li><a href="#" id="login-box-link" class="item-link list-button">Sign In</a></li>
+                                    </ul>
+                                    <div class="list-block-label">
+                                    </div>
+                                </div>
+                                <p>Don't have an account? <a href="register.html"><strong> Register Now </strong></a>
+                            </form>
                         </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 src="https://maps.google.com/maps/api/js?key=AIzaSyDqwL4NIot6kxkU47LWMQl5-f4sKvHMKrM"></script>
+
+    <!--Loading Controllers-->
     <script type="text/javascript" src="js/my-app.js"></script>
+    <script type="text/javascript" src="js/controllers/about.js"></script>
+    <script type="text/javascript" src="js/controllers/defaultpage.js"></script>
+    <script type="text/javascript" src="js/controllers/message.js"></script>
+    <script type="text/javascript" src="js/controllers/register.js"></script>
+    <script type="text/javascript" src="js/controllers/jobpost.js"></script>
+    <script type="text/javascript" src="js/controllers/login.js"></script>
+    <script type="text/javascript" src="js/controllers/createPost.js"></script>
+
+
+    <script type="text/javascript" src="js/gmaps.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>