added personal pages, changed CSS, added signin and signup pages

chaloBEST/mumbai/static/css/content.css

@@ -11,7 +11,7 @@
 .foot .right img{display:inline; float:right; padding:5px 2px 5px 5px; width:15px; height:15px;}
 
 /* primary navigation */
-.banner {background:url('/static/images/header_bg.png') repeat-x; background-size:contain;} /* background image for the global nav + text logo bar */
+.banner {background:url('img/header_bg.png') repeat-x; background-size:contain;} /* background image for the global nav + text logo bar */
 .navlink a {color:#fff;}
 .sms { float:right; background-color:green; border:2px solid green;}
 .trip {float:left; background-color:#BEDB74; border:2px solid #BEDB74;}
@@ -85,7 +85,7 @@
 .listtitlesmall h3{float:left; margin:0px; padding: 5px; color:#fff; width:80%; font-size:100%;}	/* for stacked lists */
 .listtitlesmall img{float:left; margin:0px; padding: 5px; height:20px; width:20px;}	/* for stacked lists */
 .listtitlewarning {height: 1.8em;}
-.listtitlewarning h3 {float:left; margin:0px; padding: 5px 5px 0 5px; width:80%; font-size:100%;}
+.listtitlewarning h3 {float:left; margin:0px; padding: 5px 5px 0 5px; width:94%; font-size:100%;}
 
 /* for extra info under the list header */
 .listextrainfo {padding:1em 10px 0 5px; height: 2.3em;}
@@ -200,6 +200,9 @@ span.half {display:inline; float:left; margin:0; padding:0; width:50%;}
 .right {text-align:right !important;}
 
 /* PERSONAL PAGES */
+#box-nav {list-style:none;}
+#box-nav li {padding-left:6px;}
+#box-nav .selected {width: 63.8%; padding:2px 0 2px 4px !important; color:#fff; font-weight:bold;  border:2px solid #FBDD09; border-radius:3px;}
 
 /* STATIC PAGES (SMS,ANDROID,JOIN US,ABOUT US) */
 /* block */
@@ -225,7 +228,7 @@ span.half {display:inline; float:left; margin:0; padding:0; width:50%;}
 .highlight2 li {padding-bottom:12px;}
 
 .highlight p span,.highlight ul span, .highlight2 p span,.highlight2 ul span{font-style:italic;}
-.actionbutton {background-color:#FBDD09 !important; border:2px solid yellow; border-radius:15px; text-align:center !important;}
+.actionbutton {color:red; padding:2px 10px ; background-color:#FBDD09 !important; border:2px solid yellow; border-radius:15px; text-align:center !important;}
 
 /* highlight special header */
 .hwide {font-size:1.5em !important; padding:0; margin:0; color:white; text-shadow:none;}
@@ -233,4 +236,7 @@ span.half {display:inline; float:left; margin:0; padding:0; width:50%;}
 /* OTP */
 
 /* SIGN UP / SIGN IN */
-
+.divline {display:inline; float:left; width:100%; font-size:0.95em; margin: 0 0 6px 0;}
+.divlabel {display:inline; float:left; width:20%; margin: 0 0 10px 0; padding:2px 0 0 0;}
+.divinput {display:inline; float:left; width:80%;}
+.divinput span {float:left; display:inline; width:100%; font-size:0.8em;}

chaloBEST/mumbai/static/css/style.css

@@ -139,7 +139,7 @@ body {width: 92%; margin: 0 auto} /* Center page without wrapper */
 	.g6_6,.g6_3, .g6_gut,
 	.g7_7, .g7_4, .g7_3, .g7_gut,
 	.g8_8,.g8_5,.g8_3,.g8_gut,
-	.g9_3,.g9_6 ,.g9_9,.g9_gut,
+	.g9_3,.g9_4, .g9_5, .g9_6 ,.g9_9,.g9_gut,
 	.g12_12, .g12_8, .g12_7, .g12_6, .g12_5, .g12_4, .g12_gut
 	{display:block; position: relative; margin-left: 0; margin-right: 0; margin-bottom:20px;}
 	
@@ -151,8 +151,8 @@ body {width: 92%; margin: 0 auto} /* Center page without wrapper */
 	.g5_5, .g5_1, .g5_gut,
 	.g6_6, .g6_3, .g6_gut,
 	.g7_7, .g7_4, .g7_3, .g7_gut,
-	.g8_8,.g8_5,.g8_3,.g8_gut,
+	.g8_8, .g8_5, .g8_3, .g8_gut,
-	.g9_3,.g9_6 ,.g9_9,.g9_gut,
+	.g9_3, .g9_4, .g9_5, .g9_6 ,.g9_9,.g9_gut,
 	.g12_12, .g12_8, .g12_7, .g12_6, .g12_5, .g12_4, .g12_gut
 	{display:inline; float: left}
 
@@ -176,12 +176,13 @@ Change widths as necessary
 	.nav {height:85px; margin:0;}
 	.foot {height:50px;}
 	
-	.logoimg {display:block; float:left; height: 60px; width:32%; background:URL('/static/images/chalobestlogoS.png') #deeebf no-repeat; background-position: 4px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
+	.logoimg {display:block; float:left; height: 60px; width:32%; background:URL('img/chalobestlogoS.png') #deeebf no-repeat; background-position: 4px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
 	.global{display:block; float:right; width:65.95%; height:30px; padding-right:0.99%; color:#FBDD09;}
 	.logotext {display:block; float:left; width:100%; height:30px; margin:0; padding:0;}
 	.logotext img {height:100%;}
 	.globallinks{display:block; float:right; width:100%; height:30px; padding-right:0.99%; background-color:#deeebf; vertical-align:bottom;}
-	.globallinks li a {color:#333; font-family:Consolas, “Lucida Console”, Monaco, monospace; font-weight:bold; vertical-align:bottom;}
+		.globallinks li {color:#333; font-family:Consolas, “Lucida Console”, Monaco, monospace; vertical-align:bottom;}
+		.globallinks li a {color:#333; font-weight:bold;}
 	.navprimary{display:block; float:left; width:99%; height:25px; padding-right:0.99%;}
 	.navlink li {display:inline; float:left; margin:0 0 0 2%; padding:0;}
 	.navprimary .navlink li {margin: 0 0 0 2%; width:22%; float:right; padding:0;}
@@ -200,8 +201,8 @@ Change widths as necessary
 	.g5_5, .g5_1, .g5_gut,
 	.g6_6, .g6_3, .g6_gut,
 	.g7_7, .g7_4, .g7_3, .g7_gut,
-	.g8_8,.g8_5,.g8_3,.g8_gut,
+	.g8_8, .g8_5, .g8_3, .g8_gut,
-	.g9_3,.g9_6 ,.g9_9,.g9_gut,
+	.g9_3, .g9_4, .g9_5, .g9_6 ,.g9_9,.g9_gut,
 	.g12_12, .g12_8, .g12_7, .g12_6, .g12_5, .g12_4, .g12_gut
 	{display:inline; float: left}
 	
@@ -251,23 +252,25 @@ Change widths as necessary
 		.g3_3{width:100%; margin: 0;}
 	.g2 {height:100%;}
 		.g2_2{width:100%; margin: 0;}
+	.g1 {height:100%;}
 	.maphome{height:240px;margin: 0; }
 	}	
 
 @media only screen and (min-width: 320px) {
 	/* inherited font size*/
-	body {} 
+	body {font-size:80%;} /* 12px / 18px */
 	
 	/* NAVIGATION */
 	.nav, .foot {display:inline; float:left; width:100%;}
 	.nav {height:55px; margin:0;}
 	.foot {height:50px;}
 	
-	.logoimg {display:block; float:left; height: 55px; width:28%; background:URL('/static/images/chalobestlogoS.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
+	.logoimg {display:block; float:left; height: 55px; width:28%; background:URL('img/chalobestlogoS.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
 	.global{display:block; float:left; width:69.95%; height:30px; padding-right:0.99%;}
 		.logotext {display:block; float:left; width:51.01%; height:25px; margin:3px 0 0 0;}
-		.globallinks{display:block; float:right; width:48%; height:30px; padding:2px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
+		.globallinks{display:block; float:right; width:48%; height:30px; padding:10px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
-		.globallinks li a {color:#FBDD09; font-family:Consolas, “Lucida Console”, Monaco, monospace; font-weight:bold; font-size:0.80em; line-height:00.9em; vertical-align:bottom;}
+		.globallinks li {color:#FBDD09; font-family:Consolas, “Lucida Console”, Monaco, monospace; font-size:0.80em; line-height:00.9em; vertical-align:bottom;}
+		.globallinks li a {color:#FBDD09; font-weight:bold; line-height:00.9em;}
 		.navprimary{display:block; float:left; width:69.95%; height:30px; padding-right:0.99%;}
 			.navlink li {display:inline; float:right; padding:0;}
 			.navprimary .navlink li {margin: 0 0 0 3%; width:22%;}
@@ -281,8 +284,8 @@ Change widths as necessary
 	.g5_5, .g5_1, .g5_gut,
 	.g6_6,.g6_3, .g6_gut,
 	.g7_7, .g7_4, .g7_3, .g7_gut,
-	.g8_8,.g8_5,.g8_3,.g8_gut,
+	.g8_8, .g8_5, .g8_3, .g8_gut,
-	.g9_3,.g9_6 ,.g9_9,.g9_gut,
+	.g9_3, .g9_4, .g9_5, .g9_6 ,.g9_9,.g9_gut,
 	.g12_12, .g12_8, .g12_7, .g12_6, .g12_5, .g12_4, .g12_gut
 	{display:inline; float: left}
 	
@@ -332,12 +335,13 @@ Change widths as necessary
 		.g3_3{width:100%; margin: 0;}
 	.g2 {height:100%;}
 		.g2_2{width:100%; margin: 0;}
+	.g1 {height:100%;}
 	.maphome{height:300px;margin: 0; }
 	}	
 	
 @media only screen and (min-width: 480px) {
 	/* inherited font size*/
-	body {} 
+	body {font-size:90%;} /* 12px / 18px */
 	.pagetitle{font-size:100%;}
 	
 	/* NAVIGATION */
@@ -345,11 +349,12 @@ Change widths as necessary
 	.nav {height:60px; margin:0;}
 	.foot {height:50px;}
 	
-	.logoimg {display:block; float:left; height: 60px; width:18%; background:URL('/static/images/chalobestlogoS.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
+	.logoimg {display:block; float:left; height: 60px; width:18%; background:URL('img/chalobestlogoS.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
 	.global{display:block; float:left; width:79.95%; height:30px; padding-right:0.99%;}
 		.logotext {display:block; float:left; height:30px; margin:0; padding:0;}
-		.globallinks{display:block; float:right; width:30%; height:30px; padding:2px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
+		.globallinks{display:block; float:right; width:30%; height:30px; padding:10px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
-		.globallinks li a {color:#FBDD09; font-family:Consolas, “Lucida Console”, Monaco, monospace; font-weight:bold; vertical-align:bottom;}
+		.globallinks li {color:#FBDD09; font-family:Consolas, “Lucida Console”, Monaco, monospace; line-height:00.9em; vertical-align:bottom;}
+		.globallinks li a {color:#FBDD09; font-weight:bold;}
 		.navprimary{display:block; float:left; width:79.95%; height:30px; padding-right:0.99%;}
 			.navlink li {display:inline; float:right; padding:0;}
 			.navprimary .navlink li {margin: 0 0 0 2%; width:22%;}
@@ -363,8 +368,8 @@ Change widths as necessary
 	.g5_5, .g5_1, .g5_gut,
 	.g6_6, .g6_3, .g6_gut,
 	.g7_7, .g7_4, .g7_3, .g7_gut,
-	.g8_8,.g8_5,.g8_3,.g8_gut,
+	.g8_8, .g8_5, .g8_3, .g8_gut,
-	.g9_3,.g9_6 ,.g9_9,.g9_gut,
+	.g9_3, .g9_4, .g9_5, .g9_6, .g9_9,.g9_gut,
 	.g12_12, .g12_8, .g12_7, .g12_6, .g12_5, .g12_4, .g12_gut
 	{display:inline; float: left}
 	
@@ -414,6 +419,7 @@ Change widths as necessary
 		.g3_3{width:100%; margin: 0;}
 	.g2 {width: 30.58%; height:100%;}
 		.g2_2{width:100%; margin: 0;}
+	.g1 {width: 6.35%; height:100%;}
 	.maphome{height:350px;margin: 0; }
 	}
 
@@ -426,12 +432,12 @@ Change widths as necessary
 	.nav {height:60px; margin:0;}
 	.foot {height:50px;}
 	
-	.logoimg {display:block; float:left; height: 60px; width:15%; background:URL('/static/images/chalobestlogoS.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
+	.logoimg {display:block; float:left; height: 60px; width:15%; background:URL('img/chalobestlogoS.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
 	.global{display:block; float:left; width:82.95%; height:30px; padding-right:0.99%;}
 		.logotext {display:block; float:left; width:23.01%; height:30px; margin:0; padding:0;}
-		.globallinks{display:block; float:right; width:30%; height:30px; padding:2px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
+		.globallinks{display:block; float:right; width:30%; height:30px; padding:10px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
-		.globallinks li {vertical-align:bottom;}
+		.globallinks li {color:#FBDD09; font-family:Consolas, “Lucida Console”, Monaco, monospace; vertical-align:bottom;}
-		.globallinks a {color:#FBDD09; font-family:Consolas, “Lucida Console”, Monaco, monospace; font-weight:bold; vertical-align:bottom;}
+		.globallinks li a {color:#FBDD09; font-size:1em; font-weight:bold;}
 		.navprimary{display:block; float:left; width:82.95%; height:30px; padding-right:0.99%;}
 			.navlink li {display:inline; float:right; padding:0;}
 			.navprimary .navlink li {margin: 0 0 0 2%; width:22%;}
@@ -450,8 +456,8 @@ Change widths as necessary
 	.g5_5, .g5_1, .g5_gut,
 	.g6_6, .g6_3, .g6_gut,
 	.g7_7, .g7_4, .g7_3, .g7_gut,
-	.g8_8,.g8_5,.g8_3,.g8_gut,
+	.g8_8, .g8_5, .g8_3, .g8_gut,
-	.g9_3,.g9_6 ,.g9_9,.g9_gut,
+	.g9_3, .g9_4, .g9_5, .g9_6, .g9_9, .g9_gut,
 	.g12_12, .g12_8, .g12_7, .g12_6, .g12_5, .g12_4, .g12_gut
 	{display:inline; float: left}
 	
@@ -501,6 +507,7 @@ Change widths as necessary
 		.g3_3{width:100%; margin: 0;}
 	.g2 {width: 30.58%; height:100%;}
 		.g2_2{width:100%; margin: 0;}
+	.g1 {width: 30.58%; height:100%;}
 	.maphome{height:350px;margin: 0; }
 	}	
 
@@ -514,12 +521,12 @@ Change widths as necessary
 	.nav {height:70px; margin:0;}
 	.foot {height:50px;}
 	
-	.logoimg {display:block; float:left; height: 80px; width:12.33%; background:URL('/static/images/chalobestlogoM.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
+	.logoimg {display:block; float:left; height: 80px; width:12.33%; background:URL('img/chalobestlogoM.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
 	.global{display:block; float:left; margin:0; width:85.65%; height:40px;}
 	.logotext {display:block; float:left; width:23.01%; height:40px; margin:0; padding:0;}
-	.globallinks{display:block; float:right; width:30%; height:30px; padding:10px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
+	.globallinks{display:block; float:right; width:30%; height:30px; padding:17px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
-	.globallinks li {vertical-align:bottom;}
+		.globallinks li {color:#FBDD09; font-size:0.9em; font-family:Consolas, “Lucida Console”, Monaco, monospace; vertical-align:bottom;}
-	.globallinks a {color:#FBDD09; font-family:Consolas, “Lucida Console”, Monaco, monospace; font-weight:bold; vertical-align:bottom;}
+		.globallinks li a {color:#FBDD09; font-weight:bold;}
 	.navprimary{display:block; float:left; width:85.65%; height:30px; }
 	.navlink li {display:inline; float:right; margin:0 0 0 1%; padding:0;}
 	.navprimary .navlink li {width:15.5%;}
@@ -586,6 +593,7 @@ Change widths as necessary
 		.g3_3{width:100%; margin: 0;}
 	.g2 {width:14.68%; height:100%;}
 		.g2_2{width:100%; margin: 0;}
+	.g1 {width: 6.35%; height:100%;}
 	.maphome{height:500px;margin: 0;}
 }
 
@@ -599,12 +607,12 @@ Change widths as necessary
 	.nav {height:80px; margin:0;}
 	.foot {height:50px;}
 	
-	.logoimg {display:block; float:left; height:80px; width:10.33%; background:URL('/static/images/chalobestlogo.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
+	.logoimg {display:block; float:left; height:80px; width:10.33%; background:URL('img/chalobestlogo.png') #deeebf no-repeat; background-position: 12px top; overflow:hidden; margin:0; padding:0 0 0 1.03%;}
 	.global{display:block; float:left; width:87.65%; height:50px; margin:0;}
 		.logotext {display:block; float:left; width:23.01%; height:50px;}
-		.globallinks{display:block; float:right; width:30%; height:30px; padding:15px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
+		.globallinks{display:block; float:right; width:30%; height:30px; padding:25px 0.99% 0 0; background-color:inherit; vertical-align:bottom;}
-		.globallinks li {vertical-align:bottom;}
+		.globallinks li {color:#FBDD09; font-size:0.9em; font-family:Consolas, “Lucida Console”, Monaco, monospace; vertical-align:bottom;}
-		.globallinks a {color:#FBDD09; font-family:Consolas, “Lucida Console”, Monaco, monospace; font-weight:bold; vertical-align:bottom;}
+		.globallinks li a {color:#FBDD09; font-weight:bold;}
 		.navprimary{display:block; float:left; width:87.65%; height:30px;}
 			.navlink li {display:inline; float:right; padding:0;}
 			.navprimary .navlink li {margin:0 0 0 1%; width:10.5%;}
@@ -618,8 +626,8 @@ Change widths as necessary
 	.g5_5, .g5_1, .g5_gut,
 	.g6_6, .g6_3, .g6_gut,
 	.g7_7, .g7_4, .g7_3, .g7_gut,
-	.g8_8,.g8_5,.g8_3,.g8_gut,
+	.g8_8, .g8_5, .g8_3, .g8_gut,
-	.g9_3,.g9_6 ,.g9_9,.g9_gut,
+	.g9_3, .g9_4, .g9_5, .g9_6, .g9_9, .g9_gut,
 	.g12_12, .g12_8, .g12_7, .g12_6, .g12_5, .g12_4, .g12_gut
 	{display:inline; float: left}
 	
@@ -635,6 +643,8 @@ Change widths as necessary
 		.g12_gut {width:2.02%; margin:0; min-height:20px;}
 	.g9 {width:72.99%; min-height:20px;}
 		.g9_3 {width:31.52%; margin:0;}
+		.g9_4 {width:42.94%; margin:0;}
+		.g9_5 {width:54.35%; margin:0;}
 		.g9_6{width:65.76%; margin:0;}
 		.g9_9{width:100%; margin:0;}
 		.g9_gut{width:2.71%; height: 10px; margin:0;}
@@ -668,6 +678,7 @@ Change widths as necessary
 		.g3_3{width:100%; margin: 0;}
 	.g2 {width:14.68%; height:100%;}
 		.g2_2{width:100%; margin: 0;}
+	.g1 {width: 6.35%; height:100%;}
 	.maphome{height:500px;margin: 0;}
 }
 

chaloBEST/templates/innov/MyPage.html

@@ -0,0 +1,38 @@
+{% extends 'innov/base.html' %}
+{% block content %}
+
+<!-- Settings links & profile -->
+<div class="g3">
+	<div class="leading20"></div>
+		<div class="g3_3 staticpage main">
+		<ul id="box-nav">
+			<li class="selected"><a href='/accounts/mcaro/'>My page</a></li>
+			<li><a href='/accounts/mcaro/edit/'>Edit profile</a></li>
+			<li><a href='/accounts/mcaro/password/'>Change password</a></li>
+			<li><a href='/accounts/mcaro/email/'>Change email</a></li>
+		</ul>
+	</div>
+	<div id="box">
+		<img class="mugshot" src="http://www.gravatar.com/avatar/8b8f3a7297801bd5cdbc6e58231ab0ed?s=140&amp;d=monsterid" alt="Your mugshot" />
+		<dl>
+			<dt>Email</dt>
+			<dd>carolien.klep@gmail.com</dd>
+		</dl>
+	</div>
+</div>
+
+<!-- CONTENT BLOCK-->
+<div class="g6">
+	<div class="leading40"></div>
+	<div class="g6_6 staticpage main">
+
+	</div>
+	<div class="leading40"></div>
+</div>
+
+<!-- SIDE CONTENT BLOCK-->
+<div class="g3">
+
+</div>
+
+{% endblock %}

chaloBEST/templates/innov/MyPage_ChangeEmail.html

@@ -0,0 +1,51 @@
+{% extends 'innov/base.html' %}
+{% block content %}
+
+<!-- Settings links & profile -->
+<div class="g3">
+	<div class="leading20"></div>
+		<div class="g3_3 staticpage main">
+		<ul id="box-nav">
+			<li><a href='/accounts/mcaro/'>My page</a></li>
+			<li><a href='/accounts/mcaro/edit/'>Edit profile</a></li>
+			<li><a href='/accounts/mcaro/password/'>Change password</a></li>
+			<li class="selected"><a href='/accounts/mcaro/email/'>Change email</a></li>
+		</ul>
+	</div>
+	<div id="box">
+		<img class="mugshot" src="http://www.gravatar.com/avatar/8b8f3a7297801bd5cdbc6e58231ab0ed?s=140&amp;d=monsterid" alt="Your mugshot" />
+		<dl>
+			<dt>Email</dt>
+			<dd>carolien.klep@gmail.com</dd>
+		</dl>
+	</div>
+</div>
+
+<!-- CONTENT BLOCK-->
+<div class="g6">
+	<div class="leading40"></div>
+	<div class="g6_6 staticpage main">
+		<form action="" method="post" id=" ">
+		  <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AY0UF5lQ8hGGdnN0Ei8F15O1XQP9v399' /></div>
+		  <fieldset>
+			<h1><legend>Change email address</legend></h1>
+			<div class="divline">
+					<div class="divlabel"><label for="id_email">New email:</label></div>
+					<div class="divinput"><input id="id_email" type="text" class="required" name="email" maxlength="75" /></div>
+			</div>
+		  </fieldset>
+			<div class="divline">
+				<div class="divlabel">&nbsp;</div>
+				<div class="divinput"><input type="submit" class="actionbutton" value="Change email" /></div>
+			</div>
+		</form>
+	</div>
+	<div class="leading40"></div>
+</div>
+
+<!-- SIDE CONTENT BLOCK-->
+<div class="g3">
+
+</div>
+
+{% endblock %}

chaloBEST/templates/innov/MyPage_ChangePass.html

@@ -0,0 +1,60 @@
+{% extends 'innov/base.html' %}
+{% block content %}
+
+<!-- Settings links & profile -->
+<div class="g3">
+	<div class="leading20"></div>
+		<div class="g3_3 staticpage main">
+		<ul id="box-nav">
+			<li><a href='/accounts/mcaro/'>My page</a></li>
+			<li><a href='/accounts/mcaro/edit/'>Edit profile</a></li>
+			<li class="selected"><a href='/accounts/mcaro/password/'>Change password</a></li>
+			<li><a href='/accounts/mcaro/email/'>Change email</a></li>
+		</ul>
+	</div>
+	<div id="box">
+		<img class="mugshot" src="http://www.gravatar.com/avatar/8b8f3a7297801bd5cdbc6e58231ab0ed?s=140&amp;d=monsterid" alt="Your mugshot" />
+		<dl>
+			<dt>Email</dt>
+			<dd>carolien.klep@gmail.com</dd>
+		</dl>
+	</div>
+</div>
+
+<!-- CONTENT BLOCK-->
+<div class="g6">
+	<div class="leading40"></div>
+	<div class="g6_6 staticpage main">
+		<form action="" method="post" id="password_change_form">
+		  <div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AY0UF5lQ8hGGdnN0Ei8F15O1XQP9v399' /></div>
+		  <fieldset>
+			<h1><legend>Change Password</legend></h1>
+			<div class="divline">
+					<div class="divlabel"><label for="id_old_password">Old password:</label></div>
+					<div class="divinput"><input type="password" name="old_password" id="id_old_password" /></div>
+			</div>
+			<div class="leading20"></div>
+			<div class="divline">
+				<div class="divlabel"><label for="id_new_password1">New password:</label></div>
+				<div class="divinput"><input type="password" name="new_password1" id="id_new_password1" /></div>
+			</div>
+			<div class="divline">
+				<div class="divlabel"><label for="id_new_password2">Confirm new password:</label></div>
+				<div class="divinput"><input type="password" name="new_password2" id="id_new_password2" /></div>
+			</div>
+		  </fieldset>
+			<div class="divline">
+				<div class="divlabel">&nbsp;</div>
+				<div class="divinput"><input type="submit" class="actionbutton" value="Change password" /></div>
+			</div>
+		</form>
+	</div>
+	<div class="leading40"></div>
+</div>
+
+<!-- SIDE CONTENT BLOCK-->
+<div class="g3">
+
+</div>
+
+{% endblock %}

chaloBEST/templates/innov/MyPage_edit.html

@@ -0,0 +1,175 @@
+{% extends 'innov/base.html' %}
+{% block content %}
+
+<!-- Settings links & profile -->
+<div class="g3">
+	<div class="leading20"></div>
+		<div class="g3_3 staticpage main">
+		<ul id="box-nav">
+			<li><a href='/accounts/mcaro/'>My page</a></li>
+			<li class="selected"><a href='/accounts/mcaro/edit/'>Edit profile</a></li>
+			<li><a href='/accounts/mcaro/password/'>Change password</a></li>
+			<li><a href='/accounts/mcaro/email/'>Change email</a></li>
+		</ul>
+	</div>
+	<div id="box">
+		<img class="mugshot" src="http://www.gravatar.com/avatar/8b8f3a7297801bd5cdbc6e58231ab0ed?s=140&amp;d=monsterid" alt="Your mugshot" />
+		<dl>
+			<dt>Email</dt>
+			<dd>carolien.klep@gmail.com</dd>
+		</dl>
+	</div>
+</div>
+
+<!-- CONTENT BLOCK-->
+<div class="g9">
+	<div class="leading40"></div>
+	<div class="g9_9 staticpage main">
+		<form action="" enctype="multipart/form-data" method="post">
+		<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='AY0UF5lQ8hGGdnN0Ei8F15O1XQP9v399' /></div>
+		<fieldset>
+			<h1><legend>Edit Profile</legend></h1>
+	</div>
+</div>
+<div class="g4">
+	<div class="g4_4 staticpage main"></div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_first_name">First name:</label></div>
+			<div class="divinput"><input id="id_first_name" type="text" name="first_name" maxlength="30" /></div>
+		</div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_last_name">Last name:</label></div>
+			<div class="divinput"><input id="id_last_name" type="text" name="last_name" maxlength="30" /></div>
+		</div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_mugshot">Mugshot:</label></div>
+			<div class="divinput"><input type="file" name="mugshot" id="id_mugshot" /> <span class="helptext">A personal image displayed in your profile.</span></div>
+		</div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_gender">Gender:</label></div>
+			<div class="divinput"><select name="gender" id="id_gender">
+				<option value="" selected="selected">---------</option>
+				<option value="1">Male</option>
+				<option value="2">Female</option>
+				</select></div>
+		</div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_birth_date">Birth date:</label></div>
+			<div class="divinput"><input type="text" name="birth_date" id="id_birth_date" /></div>
+		</div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_website">Website:</label></div>
+			<div class="divinput"><input id="id_website" type="text" name="website" maxlength="200" /></div>
+		</div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_location">Location:</label></div>
+			<div class="divinput"><input id="id_location" type="text" name="location" maxlength="255" /></div>
+		</div>
+</div>
+
+<!-- CONTENT BLOCK-->
+<div class="g5">
+	<div class="g5_5 staticpage main">
+		<div class="divline">
+			<div class="divlabel"><label for="id_about_me">About me:</label></div>
+			<div class="divinput"><textarea id="id_about_me" rows="8" cols="40" name="about_me"></textarea></div>
+		</div>
+		<div class="leading10"></div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_language">Language:</label></div>
+			<div class="divinput"><select name="language" id="id_language">
+				<option value="ar">Arabic</option>
+				<option value="az">Azerbaijani</option>
+				<option value="bg">Bulgarian</option>
+				<option value="bn">Bengali</option>
+				<option value="bs">Bosnian</option>
+				<option value="ca">Catalan</option>
+				<option value="cs">Czech</option>
+				<option value="cy">Welsh</option>
+				<option value="da">Danish</option>
+				<option value="de">German</option>
+				<option value="el">Greek</option>
+				<option value="en" selected="selected">English</option>
+				<option value="en-gb">British English</option>
+				<option value="eo">Esperanto</option>
+				<option value="es">Spanish</option>
+				<option value="es-ar">Argentinian Spanish</option>
+				<option value="es-mx">Mexican Spanish</option>
+				<option value="es-ni">Nicaraguan Spanish</option>
+				<option value="et">Estonian</option>
+				<option value="eu">Basque</option>
+				<option value="fa">Persian</option>
+				<option value="fi">Finnish</option>
+				<option value="fr">French</option>
+				<option value="fy-nl">Frisian</option>
+				<option value="ga">Irish</option>
+				<option value="gl">Galician</option>
+				<option value="he">Hebrew</option>
+				<option value="hi">Hindi</option>
+				<option value="hr">Croatian</option>
+				<option value="hu">Hungarian</option>
+				<option value="id">Indonesian</option>
+				<option value="is">Icelandic</option>
+				<option value="it">Italian</option>
+				<option value="ja">Japanese</option>
+				<option value="ka">Georgian</option>
+				<option value="kk">Kazakh</option>
+				<option value="km">Khmer</option>
+				<option value="kn">Kannada</option>
+				<option value="ko">Korean</option>
+				<option value="lt">Lithuanian</option>
+				<option value="lv">Latvian</option>
+				<option value="mk">Macedonian</option>
+				<option value="ml">Malayalam</option>
+				<option value="mn">Mongolian</option>
+				<option value="nb">Norwegian Bokmal</option>
+				<option value="ne">Nepali</option>
+				<option value="nl">Dutch</option>
+				<option value="nn">Norwegian Nynorsk</option>
+				<option value="pa">Punjabi</option>
+				<option value="pl">Polish</option>
+				<option value="pt">Portuguese</option>
+				<option value="pt-br">Brazilian Portuguese</option>
+				<option value="ro">Romanian</option>
+				<option value="ru">Russian</option>
+				<option value="sk">Slovak</option>
+				<option value="sl">Slovenian</option>
+				<option value="sq">Albanian</option>
+				<option value="sr">Serbian</option>
+				<option value="sr-latn">Serbian Latin</option>
+				<option value="sv">Swedish</option>
+				<option value="sw">Swahili</option>
+				<option value="ta">Tamil</option>
+				<option value="te">Telugu</option>
+				<option value="th">Thai</option>
+				<option value="tr">Turkish</option>
+				<option value="tt">Tatar</option>
+				<option value="uk">Ukrainian</option>
+				<option value="ur">Urdu</option>
+				<option value="vi">Vietnamese</option>
+				<option value="zh-cn">Simplified Chinese</option>
+				<option value="zh-tw">Traditional Chinese</option>
+			</select></div>
+		</div>
+		<div class="divline">
+			<div class="divlabel"><label for="id_privacy">Privacy:</label></div>
+			<div class="divinput">
+				<select name="privacy" id="id_privacy">
+					<option value="open">Open</option>
+					<option value="registered" selected="selected">Registered</option>
+					<option value="closed">Closed</option>
+				</select> <span class="helptext">Designates who can view your profile.</span></div>
+		</div>
+		 </fieldset>
+		<div class="leading10"></div>
+		<div class="divline">
+			<div class="divlabel">&nbsp;</div>
+			<div class="divinput"><input class="actionbutton" type="submit" value="Save changes" /></div>
+		</div>
+		 
+		</form>
+	</div>
+	<div class="leading40"></div>
+</div>
+
+{% endblock %}

chaloBEST/templates/innov/signin.html

@@ -0,0 +1,36 @@
+{% extends 'innov/base.html' %}
+{% block content %}
+
+<div class="g3">
+<!--	<div class="leading40"></div>
+	<div class="g3_3 listtitlesmall"><h3>ChaloBEST</h3></div>
+	<div class="g3_3 staticpage lightgrey">
+		<div class="box">
+			<p>[Some quote about ChaloBEST]</p>
+		</div>
+	</div> -->
+</div>
+
+<div class="g6">
+	<div class="leading40"></div>
+	<div class="g6_6 staticpage main">
+		<form action="" method="post">
+			<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='YzyQypsxOcO4XfKWrUy8jMaaWoYtmdGv' /></div>
+			<fieldset>
+				<h1><legend>Sign in</legend></h1>
+				<p>No account yet? <a href="signup.html">Sign up here</a></p>
+				<label for="id_identification">Email or username</label><input id="id_identification" class="tripinput" type="text" class="required" name="identification" />
+				<label for="id_password">Password</label><input id="id_password" class="tripinput" type="password" class="required" name="password" />
+				<p class="small"><label for="id_remember_me"><input type="checkbox" name="remember_me" id="id_remember_me" /> Remember me for a month</label></p>
+			</fieldset>
+			<input type="submit" value="Sign in" />
+			<p class="small"><a href='/accounts/password/reset/' title="Forgot your password?">Forgot your password?</a></p>
+		</form>
+	</div>
+	<div class="leading40"></div>
+	<div class="leading40"></div>
+</div>
+<div class="g3">
+</div>
+
+{% endblock %}

chaloBEST/templates/innov/signup.html

@@ -0,0 +1,61 @@
+{% extends 'innov/base.html' %}
+{% block content %}
+
+<div class="g3">
+<!--	<div class="leading40"></div>
+	<div class="g3_3 listtitlesmall"><h3>ChaloBEST</h3></div>
+	<div class="g3_3 staticpage lightgrey">
+		<div class="box">
+			<p>[Some quote about ChaloBEST]</p>
+		</div>
+	</div> -->
+</div>
+
+<div class="g6">
+	<div class="leading40"></div>
+	<div class="g6_6 staticpage main">
+		<form action="" method="post">
+			<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='YzyQypsxOcO4XfKWrUy8jMaaWoYtmdGv' /></div>
+			<fieldset>
+				<h1><legend>Sign up</legend></h1>
+				<p>Already have an account? <a href="signin.html">Sign in here</a></p>
+				<div class="divline">
+					<div class="divlabel"><label for="id_username">Username</label></div>
+					<div class="divinput"><input id="id_username" type="text" class="required" name="username" maxlength="30" /></div>
+				</div>
+				<div class="divline">
+					<div class="divlabel"><label for="id_email">Email</label></div>
+					<div class="divinput"><input id="id_email" type="text" class="required" name="email" maxlength="75" /></div>
+				</div>
+				<div class="leading20"></div>
+				<div class="divline">
+					<div class="divlabel"><label for="id_password1">Create password</label></div>
+					<div class="divinput"><input id="id_password1" type="password" class="required" name="password1" /></div>
+				</div>
+				<div class="divline">
+					<div class="divlabel"><label for="id_password2">Repeat password</label></div>
+					<div class="divinput"><input id="id_password2" type="password" class="required" name="password2" /></div>
+				</div>
+			</fieldset>
+				<div class="divline">
+					<div class="divlabel">&nbsp;</div>
+					<div class="divinput"><input type="submit" value="Sign up" /></div>
+				</div>
+			
+		</form>
+	</div>
+	<div class="leading40"></div>
+	<div class="leading40"></div>
+	<div class="leading40"></div>
+</div>
+<div class="g3">
+<!--	<div class="g3_3 ">
+		<div class="highlight">
+			<h2>ChaloBEST newsletter</h2>
+			<div class="leading20"></div>
+			<p class="small">Sign up for our newsletter.</p>
+		</div>
+	</div> -->
+</div>
+
+{% endblock %}