3,630 public/assets/js/scripts.js.bak
View file

Large diffs are not rendered by default.

BIN +14 KB public/assets/plugins/.DS_Store
View file
Binary file not shown.
998 public/assets/plugins/form.validate/additional-methods.js
View file

Large diffs are not rendered by default.

1,409 public/assets/plugins/form.validate/jquery.validate.js
View file

Large diffs are not rendered by default.

BIN +6 KB views/.DS_Store
View file
Binary file not shown.
243 views/orders/orderform.handlebars
View file
@@ -1,152 +1,199 @@
{{#extend "mainLayoutPartial"}}
{{#content "head" mode="append"}}
<!-- SWIPER SLIDER -->
<link href="assets/plugins/slider.swiper/dist/css/swiper.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout-datatable.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout-datatables.css" rel="stylesheet" type="text/css" />

<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
{{/content}}
{{#content "loggedIn"}}
{{#if name}}
<li class="text-welcome hidden-xs">Welcome to ValetBasket, <strong>{{name}}</strong></li>
<li>
<a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><i class="fa fa-user hidden-xs"></i> MY ACCOUNT</a>
<ul class="dropdown-menu pull-right">
<li><a tabindex="-1" href="#"><i class="fa fa-history"></i> ORDER HISTORY</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="fa fa-bookmark"></i> MY WISHLIST</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-edit"></i> MY REVIEWS</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-cog"></i> MY SETTINGS</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="glyphicon glyphicon-off"></i> LOGOUT</a></li>
</ul>
</li>
{{else}}
<li class="hidden-xs"><a href="/login">LOGIN</a></li>
<li class="hidden-xs"><a href="/signup">REGISTER</a></li>
{{/if}}
{{> settings_dropdown}}
{{/content}}
{{#content "mainbody"}}
<section style="background:url('assets/images/demo/wall2.jpg')">
<div class="container">
<form class="validate" action="php/contact.php" method="post" enctype="multipart/form-data" data-success="Sent! Thank you!" data-toastr-position="top-right">
<form id="orderform" method="post" class="validate" action="/order" data-success="Sent! Thank you!" data-toastr-position="top-right">
<fieldset>
<!-- HTML DATATABLE -->
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<table class="table table-striped table-hover table-bordered" id="orderTable">
<thead>
<tr>
<tr id="1">
<th>Item</th>
<th>Quantity</th>
<th>Units</th>
<th>Brand(if any)</th>
<th>Comments</th>
</tr>
</thead>

<tbody>
<tr>
<tr id="2">
<td>
<input type="text" class="autoCompItem form-control input-small" id="item1" name="item1" placeholder="Eggs">
<input type="text" class="autoCompItem itembox form-control input-small" id="item1" name="item" placeholder="Eggs">
</td>
<td>
<input type="text" class="form-control input-small" id="quantity1" name="quantity1" placeholder="24">
<input type="text" class="form-control qty input-small" id="quantity1" name="quantity1" placeholder="24" >
</td>
<td>
<select class="form-control" name='uom1'>
<option value="">Units</option>
<option value="lbs">lbs</option>
<option value="packs">Packs</option>
<option value="cartons">Cartons</option>
<option value="gallons">Gallons</option>
</select>

</td>
<td>
<input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland">
</td>
<td>
<input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh">
</td>
</tr>
<tr>
</tr> <tr id="3">
<td>
<input type="text" class="autoCompItem form-control input-small" id="item2" name="item2" placeholder="Eggs">
<input type="text" class="autoCompItem itembox form-control input-small" id="item2" name="item" placeholder="Eggs">
</td>
<td>
<input type="text" class="form-control input-small" id="quantity1" name="quantity1" placeholder="24">
<input type="text" class="form-control qty input-small" id="quantity2" name="quantity2" placeholder="24">
</td>
<td>
<input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland">
<select class="form-control " name='uom2'>
<option value="">Units</option>
<option value="lbs">lbs</option>
<option value="packs">Packs</option>
<option value="cartons">Cartons</option>
<option value="gallons">Gallons</option>
</select>

</td>
<td>
<input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh">
<input type="text" class="form-control input-small" id="brand2" name="brand2" placeholder="Eggland">
</td>
<td>
<input type="text" class="form-control input-small" id="comment2" name="comment2" placeholder="Choose fresh">
</td>
</tr>
<tr>
<tr id="4">
<td>
<input type="text" class="autoCompItem form-control input-small" id="item3" name="item3" placeholder="Eggs">
<input type="text" class="autoCompItem itembox form-control input-small" id="item3" name="item" placeholder="Eggs">
</td>
<td>
<input type="text" class="form-control input-small" id="quantity1" name="quantity1" placeholder="24">
<input type="text" class="form-control qty input-small" id="quantity3" name="quantity3" placeholder="24">
</td>
<td>
<input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland">
<select class="form-control " name='uom3'>
<option value="">Units</option>
<option value="lbs">lbs</option>
<option value="packs">Packs</option>
<option value="cartons">Cartons</option>
<option value="gallons">Gallons</option>
</select>

</td>
<td>
<input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh">
<input type="text" class="form-control input-small" id="brand3" name="brand3" placeholder="Eggland">
</td>
<td>
<input type="text" class="form-control input-small" id="comment3" name="comment3" placeholder="Choose fresh">
</td>
</tr>
<tr>
<tr id="5">
<td>
<input type="text" class="autoCompItem form-control input-small" id="item4" name="item4" placeholder="Eggs">
<input type="text" class="autoCompItem form-control itembox input-small" id="item4" name="item4" placeholder="Eggs">
</td>
<td>
<input type="text" class="form-control input-small" id="quantity1" name="quantity1" placeholder="24">
<input type="text" class="form-control qty input-small" id="quantity4" name="quantity4" placeholder="24">
</td>
<td>
<input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland">
<select class="form-control ">
<option value="">Units</option>
<option value="lbs">lbs</option>
<option value="packs">Packs</option>
<option value="cartons">Cartons</option>
<option value="gallons">Gallons</option>
</select>

</td>
<td>
<input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh">
<input type="text" class="form-control input-small" id="brand4" name="brand4" placeholder="Eggland">
</td>
<td>
<input type="text" class="form-control input-small" id="comment4" name="comment4" placeholder="Choose fresh">
</td>
</tr>
<tr>
<tr id="6">
<td>
<input type="text" class="autoCompItem form-control input-small" id="item5" name="item5" placeholder="Eggs">
<input type="text" class="autoCompItem form-control itembox input-small" id="item5" name="item" placeholder="Eggs">
</td>
<td>
<input type="text" class="form-control input-small" id="quantity1" name="quantity1" placeholder="24">
<input type="text" class="form-control qty input-small" id="quantity5" name="quantity5" placeholder="24">
</td>
<td>
<input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland">
<select class="form-control ">
<option value="">Units</option>
<option value="lbs">lbs</option>
<option value="packs">Packs</option>
<option value="cartons">Cartons</option>
<option value="gallons">Gallons</option>
</select>

</td>
<td>
<input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh">
<input type="text" class="form-control input-small" id="brand5" name="brand5" placeholder="Eggland">
</td>
<td>
<input type="text" class="form-control input-small" id="comment5" name="comment5" placeholder="Choose fresh">
</td>
</tr>
<tr>
<tr id="7">
<td>
<input type="text" class="autoCompItem form-control input-small" id="item6" name="item6" placeholder="Eggs">
<input type="text" class="autoCompItem form-control itembox input-small" id="item6" name="item" placeholder="Eggs">
</td>
<td>
<input type="text" class="form-control input-small" id="quantity1" name="quantity1" placeholder="24">
<input type="text" class="form-control qty input-small" id="quantity6" name="quantity6" placeholder="24">
</td>
<td>
<input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland">
<select class="form-control ">
<option value="">Units</option>
<option value="lbs">lbs</option>
<option value="packs">Packs</option>
<option value="cartons">Cartons</option>
<option value="gallons">Gallons</option>
</select>

</td>
<td>
<input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh">
<input type="text" class="form-control input-small" id="brand6" name="brand6" placeholder="Eggland">
</td>
<td>
<input type="text" class="form-control input-small" id="comment6" name="comment6" placeholder="Choose fresh">
</td>
</tr>
</tbody>
</table>
</fieldset>
<div class="row">
<div class="col-md-12">
<div class="col-md-10">
<button type="submit" class="btn btn-3d btn-teal btn-lg btn-block margin-top-30">
SUBMIT ORDER
<span class="block font-lato">We will get back to you within next 2 hours</span>
</button>
</div>
<div class="col-md-2">
<button type="button" id='addmore' class="btn btn-3d btn-teal btn-lg btn-block margin-top-30">Add more lines</button>
</div>
</div>
</form>
</div>
</section>

{{/content}}
{{#content "scripts" mode="append"}}
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> -->
<script type="text/javascript" src="assets/plugins/jquery/jquery-ui.min.js"></script>
<script type="text/javascript" src="assets/plugins/form.validate/jquery.form.min.js"></script>
<script>
$(document).ready(function() {
$(document).ready(function(){
$(".autoCompItem").each(function(){
$(this).autocomplete({
source: function(request, response){
@@ -167,14 +214,90 @@
$(this).val(ui.item.name);
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $( "<li></li>" )
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $( "<li></li>" )
.data( "ui-autocomplete-item", item )
.append( "<a>" + item.name + "</a>" )
.appendTo( ul );
};
});
$("#addmore").on("click", function(){
var rownum = $('#orderTable tr:last').attr('id')*1+1;
var rowhtml =' <tr id="' + rownum +'"> '+
' <td> '+
' <input type="text" class="autoCompItem itembox form-control input-small" id="itembox" name="item" placeholder="Eggs" > '+
' </td> '+
' <td> '+
' <input type="text" class="form-control qty input-small" id="quantity1" name="quantity1" placeholder="24"> '+
' </td> '+
' <td> '+
' <select class="form-control "> '+
' <option value="">Units</option> '+
' <option value="lbs">lbs</option> '+
' <option value="packs">Packs</option> '+
' <option value="cartons">Cartons</option> '+
' <option value="gallons">Gallons</option> '+
' </select> '+
' </td> '+
' <td> '+
' <input type="text" class="form-control input-small" id="brand1" name="brand1" placeholder="Eggland"> '+
' </td> '+
' <td> '+
' <input type="text" class="form-control input-small" id="comment1" name="comment1" placeholder="Choose fresh"> '+
' </td> '+
' </tr>';
$(rowhtml).appendTo("#orderTable");
var ipt = $(".autoCompItem");
$("#orderTable").find(ipt).each(function(){
$(this).autocomplete({
source: function(request, response){
$.ajax({
url: '/api/autocomplete',
data: {'q': request.term},
dataType: "json",
success: function(data){
response(data);
}
});
},
focus: function(event, ui){
$(this).val(ui.item.name);
return false;
},
select: function(event, ui){
$(this).val(ui.item.name);
return false;
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
return $( "<li>")
.data( "ui-autocomplete-item", item )
.append( item.name)
.appendTo( ul );
};
});
});
});
</script>
<script type="text/javascript" src="assets/plugins/form.validate/jquery.validate.js"></script>
<script type="text/javascript" src="assets/plugins/form.validate/additional-methods.js"></script>
<script>
jQuery.validator.setDefaults({
success: "valid"
});
// in add method return false to indicate error
jQuery.validator.addMethod("qty", function(value, element){
if (this.optional(element) && this.optional(jQuery(element).closest('tr').find(".itembox")[0])) {return true;}
if (!this.optional(element) && !this.optional(jQuery(element).closest('tr').find(".itembox")[0])) {return true;}
return false;
}, "please add both item and quantity");
jQuery().ready(function(){
jQuery("#orderform").validate({
highlight: function(element, errorClass){
jQuery(element).closest('tr').find(".itembox").addClass(errorClass);
}
});
});
</script>
{{/content}}
{{/extend}}
258 views/orders/orderform_bak.handlebars
View file
@@ -0,0 +1,258 @@
{{#extend "mainLayoutPartial"}}
{{#content "head" mode="append"}}
<!-- SWIPER SLIDER -->
<link href="assets/plugins/slider.swiper/dist/css/swiper.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout-datatable.css" rel="stylesheet" type="text/css" />
{{/content}}
{{#content "loggedIn"}}
{{#if name}}
<li class="text-welcome hidden-xs">Welcome to ValetBasket, <strong>{{name}}</strong></li>
<li>
<a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><i class="fa fa-user hidden-xs"></i> MY ACCOUNT</a>
<ul class="dropdown-menu pull-right">
<li><a tabindex="-1" href="#"><i class="fa fa-history"></i> ORDER HISTORY</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="fa fa-bookmark"></i> MY WISHLIST</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-edit"></i> MY REVIEWS</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-cog"></i> MY SETTINGS</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="glyphicon glyphicon-off"></i> LOGOUT</a></li>
</ul>
</li>
{{else}}
<li class="hidden-xs"><a href="/login">LOGIN</a></li>
<li class="hidden-xs"><a href="/signup">REGISTER</a></li>
{{/if}}
{{/content}}
{{#content "mainbody"}}
<section style="background:url('assets/images/demo/wall2.jpg')">
<!-- HTML DATATABLE -->
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
<th>Item</th>
<th>Quantity</th>
<th>Brand(if any)</th>
<th>Comments</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>

<tbody>
<tr>
<td>
alex
</td>
<td>
Alex Nilson
</td>
<td>
1234
</td>
<td class="center">
power user
</td>
<td>
<a class="edit" href="javascript:;">
Edit </a>
</td>
<td>
<a class="delete" href="javascript:;">
Delete </a>
</td>
</tr>
<tr>
<td>
lisa
</td>
<td>
Lisa Wong
</td>
<td>
434
</td>
<td class="center">
new user
</td>
<td>
<a class="edit" href="javascript:;">
Edit </a>
</td>
<td>
<a class="delete" href="javascript:;">
Delete </a>
</td>
</tr>
</tbody>
</table>

</section>

{{/content}}
{{#content "scripts" mode="append"}}
<script type="text/javascript">
loadScript(plugin_path + "datatables/js/jquery.dataTables.min.js", function(){
loadScript(plugin_path + "datatables/dataTables.bootstrap.js", function(){
loadScript(plugin_path + "select2/js/select2.full.min.js", function(){
if (jQuery().dataTable) {
function restoreRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
oTable.fnUpdate(aData[i], nRow, i, false);
}
oTable.fnDraw();
}
function editRow(oTable, nRow) {
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[1] + '">';
jqTds[2].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<a class="edit" href="">Save</a>';
jqTds[5].innerHTML = '<a class="cancel" href="">Cancel</a>';
}
function saveRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnUpdate('<a class="delete" href="">Delete</a>', nRow, 5, false);
oTable.fnDraw();
}
function cancelEditRow(oTable, nRow) {
var jqInputs = $('input', nRow);
oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);
oTable.fnUpdate(jqInputs[1].value, nRow, 1, false);
oTable.fnUpdate(jqInputs[2].value, nRow, 2, false);
oTable.fnUpdate(jqInputs[3].value, nRow, 3, false);
oTable.fnUpdate('<a class="edit" href="">Edit</a>', nRow, 4, false);
oTable.fnDraw();
}
var table = $('#sample_editable_1');
var oTable = table.dataTable({
"lengthMenu": [
[5, 15, 20, -1],
[5, 15, 20, "All"] // change per page values here
],
// set the initial value
"pageLength": 10,
"language": {
"lengthMenu": " _MENU_ records"
},
"columnDefs": [{ // set default column settings
'orderable': true,
'targets': [0]
}, {
"searchable": true,
"targets": [0]
}],
"order": [
[0, "asc"]
] // set first column as a default sort by asc
});
var tableWrapper = $("#sample_editable_1_wrapper");
tableWrapper.find(".dataTables_length select").select2({
showSearchInput: false //hide search box with special css class
}); // initialize select2 dropdown
var nEditing = null;
var nNew = false;
$('#sample_editable_1_new').click(function (e) {
e.preventDefault();
if (nNew && nEditing) {
if (confirm("Previose row not saved. Do you want to save it ?")) {
saveRow(oTable, nEditing); // save
$(nEditing).find("td:first").html("Untitled");
nEditing = null;
nNew = false;
} else {
oTable.fnDeleteRow(nEditing); // cancel
nEditing = null;
nNew = false;
return;
}
}
var aiNew = oTable.fnAddData(['', '', '', '', '', '']);
var nRow = oTable.fnGetNodes(aiNew[0]);
editRow(oTable, nRow);
nEditing = nRow;
nNew = true;
});
table.on('click', '.delete', function (e) {
e.preventDefault();
if (confirm("Are you sure to delete this row ?") == false) {
return;
}
var nRow = $(this).parents('tr')[0];
oTable.fnDeleteRow(nRow);
alert("Deleted! Do not forget to do some ajax to sync with backend :)");
});
table.on('click', '.cancel', function (e) {
e.preventDefault();
if (nNew) {
oTable.fnDeleteRow(nEditing);
nNew = false;
} else {
restoreRow(oTable, nEditing);
nEditing = null;
}
});
table.on('click', '.edit', function (e) {
e.preventDefault();
/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];
if (nEditing !== null && nEditing != nRow) {
/* Currently editing - but not this row - restore the old before continuing to edit mode */
restoreRow(oTable, nEditing);
editRow(oTable, nRow);
nEditing = nRow;
} else if (nEditing == nRow && this.innerHTML == "Save") {
/* Editing this row and want to save it */
saveRow(oTable, nEditing);
nEditing = null;
alert("Updated! Do not forget to do some ajax to sync with backend :)");
} else {
/* No edit in progress - lets start one */
editRow(oTable, nRow);
nEditing = nRow;
}
});
}
});
});
});
</script>
{{/content}}
{{/extend}}
4 views/partials/mainLayoutPartial.handlebars
View file
@@ -328,10 +328,10 @@
<script type="text/javascript">var plugin_path = 'assets/plugins/';</script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-2.1.4.min.js"></script>

<script type="text/javascript" src="assets/js/scripts.js"></script>
<script type="text/javascript" src="assets/js/scripts.js"></script>

<!-- STYLESWITCHER - REMOVE -->
<script async type="text/javascript" src="assets/plugins/styleswitcher/styleswitcher.js"></script>
<!-- <script async type="text/javascript" src="assets/plugins/styleswitcher/styleswitcher.js"></script> -->

<!-- PAGE LEVEL SCRIPTS -->
<script type="text/javascript" src="assets/js/view/demo.shop.js"></script>
19 views/partials/settings_dropdown.handlebars
View file
@@ -0,0 +1,19 @@

{{#if name}}
<li class="text-welcome hidden-xs">Welcome to ValetBasket, <strong>{{name}}</strong></li>
<li>
<a class="dropdown-toggle no-text-underline" data-toggle="dropdown" href="#"><i class="fa fa-user hidden-xs"></i> MY ACCOUNT</a>
<ul class="dropdown-menu pull-right">
<li><a tabindex="-1" href="#"><i class="fa fa-history"></i> ORDER HISTORY</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="#"><i class="fa fa-bookmark"></i> MY WISHLIST</a></li>
<li><a tabindex="-1" href="#"><i class="fa fa-edit"></i> MY REVIEWS</a></li>
<li><a tabindex="-1" href="/profile"><i class="fa fa-cog"></i> MY SETTINGS</a></li>
<li class="divider"></li>
<li><a tabindex="-1" href="/logout"><i class="glyphicon glyphicon-off"></i> LOGOUT</a></li>
</ul>
</li>
{{else}}
<li class="hidden-xs"><a href="/login">LOGIN</a></li>
<li class="hidden-xs"><a href="/signup">REGISTER</a></li>
{{/if}}
296 views/profile/profile.handlebars
View file
@@ -0,0 +1,296 @@
{{#extend "mainLayoutPartial"}}
{{#content "head" mode="append"}}
<!-- SWIPER SLIDER -->
<link href="assets/plugins/slider.swiper/dist/css/swiper.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout-datatable.css" rel="stylesheet" type="text/css" />

<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet" type="text/css" />
{{/content}}
{{#content "loggedIn"}}
{{> settings_dropdown}}
{{/content}}
{{#content "mainbody"}}
<section>
<div class="container">

<!-- RIGHT -->
<div class="col-lg-9 col-md-9 col-sm-8 col-lg-push-3 col-md-push-3 col-sm-push-4 margin-bottom-80">

<ul class="nav nav-tabs nav-top-border">
<li class="active"><a href="#info" data-toggle="tab">Personal Info</a></li>
<li><a href="#avatar" data-toggle="tab">Avatar</a></li>
<li><a href="#password" data-toggle="tab">Password</a></li>
<li><a href="#privacy" data-toggle="tab">Privacy</a></li>
</ul>

<div class="tab-content margin-top-20">

<!-- PERSONAL INFO TAB -->
<div class="tab-pane fade in active" id="info">
<form role="form" action="#" method="post">
<div class="form-group">
<label class="control-label">First Name</label>
<input type="text" placeholder="Felicia" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Last Name</label>
<input type="text" placeholder="Doe" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Mobile Number</label>
<input type="text" placeholder="+1800-1234-657" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Interests</label>
<input type="text" placeholder="Development, C++, etc." class="form-control">
</div>
<div class="form-group">
<label class="control-label">Occupation</label>
<input type="text" placeholder="Webdeveloper" class="form-control">
</div>
<div class="form-group">
<label class="control-label">About</label>
<textarea class="form-control" rows="3" placeholder="About Me..."></textarea>
</div>
<div class="form-group">
<label class="control-label">Website Url</label>
<input type="text" placeholder="http://www.yourwebsite.com" class="form-control">
</div>
<div class="margiv-top10">
<a href="#" class="btn btn-primary"><i class="fa fa-check"></i> Save Changes </a>
<a href="#" class="btn btn-default">Cancel </a>
</div>
</form>
</div>
<!-- /PERSONAL INFO TAB -->

<!-- AVATAR TAB -->
<div class="tab-pane fade" id="avatar">

<form class="clearfix" action="#" method="post" enctype="multipart/form-data">
<div class="form-group">

<div class="row">

<div class="col-md-3 col-sm-4">

<div class="thumbnail">
<img class="img-responsive" src="assets/images/demo/people/460x700/8-min.jpg" alt="" />
</div>

</div>

<div class="col-md-9 col-sm-8">

<div class="sky-form nomargin">
<label class="label">Select File</label>
<label for="file" class="input input-file">
<div class="button">
<input type="file" id="file" onchange="this.parentNode.nextSibling.value = this.value">Browse
</div><input type="text" readonly>
</label>
</div>

<a href="#" class="btn btn-danger btn-xs noradius"><i class="fa fa-times"></i> Remove Avatar</a>

<div class="clearfix margin-top-20">
<span class="label label-warning">NOTE! </span>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt laoreet!
</p>
</div>

</div>

</div>

</div>

<div class="margiv-top10">
<a href="#" class="btn btn-primary">Save Changes </a>
<a href="#" class="btn btn-default">Cancel </a>
</div>

</form>

</div>
<!-- /AVATAR TAB -->

<!-- PASSWORD TAB -->
<div class="tab-pane fade" id="password">

<form action="#" method="post">

<div class="form-group">
<label class="control-label">Current Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label class="control-label">New Password</label>
<input type="password" class="form-control">
</div>
<div class="form-group">
<label class="control-label">Re-type New Password</label>
<input type="password" class="form-control">
</div>

<div class="margiv-top10">
<a href="#" class="btn btn-primary"><i class="fa fa-check"></i> Change Password</a>
<a href="#" class="btn btn-default">Cancel </a>
</div>

</form>

</div>
<!-- /PASSWORD TAB -->

<!-- PRIVACY TAB -->
<div class="tab-pane fade" id="privacy">

<form action="#" method="post">
<div class="sky-form">

<table class="table table-bordered table-striped">
<tbody>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</td>
<td>
<div class="inline-group">
<label class="radio nomargin-top nomargin-bottom">
<input type="radio" name="radioOption" checked=""><i></i> Yes
</label>

<label class="radio nomargin-top nomargin-bottom">
<input type="radio" name="radioOption" checked=""><i></i> No
</label>
</div>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</td>
<td>
<label class="checkbox nomargin">
<input type="checkbox" name="checkbox" checked=""><i></i> Yes
</label>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</td>
<td>
<label class="checkbox nomargin">
<input type="checkbox" name="checkbox" checked=""><i></i> Yes
</label>
</td>
</tr>
<tr>
<td>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</td>
<td>
<label class="checkbox nomargin">
<input type="checkbox" name="checkbox" checked=""><i></i> Yes
</label>
</td>
</tr>
</tbody>
</table>

</div>

<div class="margin-top-10">
<a href="#" class="btn btn-primary"><i class="fa fa-check"></i> Save Changes </a>
<a href="#" class="btn btn-default">Cancel </a>
</div>

</form>

</div>
<!-- /PRIVACY TAB -->

</div>

</div>


<!-- LEFT -->
<div class="col-lg-3 col-md-3 col-sm-4 col-lg-pull-9 col-md-pull-9 col-sm-pull-8">

<div class="thumbnail text-center">
<img src="assets/images/demo/people/460x700/8-min.jpg" alt="" />
<h2 class="size-18 margin-top-10 margin-bottom-0">Felica Doe</h2>
<h3 class="size-11 margin-top-0 margin-bottom-10 text-muted">DEVELOPER</h3>
</div>

<!-- completed -->
<div class="margin-bottom-30">
<label>88% completed profile</label>
<div class="progress progress-xxs">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="88" aria-valuemin="0" aria-valuemax="100" style="width: 88%; min-width: 2em;"></div>
</div>
</div>
<!-- /completed -->

<!-- SIDE NAV -->
<ul class="side-nav list-group margin-bottom-60" id="sidebar-nav">
<li class="list-group-item"><a href="page-profile.html"><i class="fa fa-eye"></i> PROFILE</a></li>
<li class="list-group-item"><a href="page-profile-projects.html"><i class="fa fa-tasks"></i> PROJECTS</a></li>
<li class="list-group-item"><a href="page-profile-comments.html"><i class="fa fa-comments-o"></i> COMMENTS</a></li>
<li class="list-group-item"><a href="page-profile-history.html"><i class="fa fa-history"></i> HISTORY</a></li>
<li class="list-group-item active"><a href="page-profile-settings.html"><i class="fa fa-gears"></i> SETTINGS</a></li>

<li class="list-group-item list-toggle"> <!-- NOTE: "active" to be open on page load -->
<a data-toggle="collapse" data-parent="#sidebar-nav" href="#collapse-1">DROPDOWN EXAMPLE</a>
<ul id="collapse-1" class="collapse"><!-- NOTE: "collapse in" to be open on page load -->
<li><a href="#"><i class="fa fa-angle-right"></i> SUMBENU 1</a></li>
<li>
<span class="badge badge-red">New</span>
<a href="#"><i class="fa fa-angle-right"></i> SUMBENU 2</a>
</li>
<li class="active"><a href="#"><i class="fa fa-angle-right"></i> SUMBENU 3</a></li>
<li><a href="#"><i class="fa fa-angle-right"></i> SUMBENU 4</a></li>
</ul>
</li>
</ul>
<!-- /SIDE NAV -->


<!-- info -->
<div class="box-light margin-bottom-30"><!-- .box-light OR .box-light -->
<div class="row margin-bottom-20">
<div class="col-md-4 col-sm-4 col-xs-4 text-center bold">
<h2 class="size-30 margin-top-10 margin-bottom-0 font-raleway">12</h2>
<h3 class="size-11 margin-top-0 margin-bottom-10 text-info">PROJECTS</h3>
</div>

<div class="col-md-4 col-sm-4 col-xs-4 text-center bold">
<h2 class="size-30 margin-top-10 margin-bottom-0 font-raleway">34</h2>
<h3 class="size-11 margin-top-0 margin-bottom-10 text-info">TASKS</h3>
</div>

<div class="col-md-4 col-sm-4 col-xs-4 text-center bold">
<h2 class="size-30 margin-top-10 margin-bottom-0 font-raleway">32</h2>
<h3 class="size-11 margin-top-0 margin-bottom-10 text-info">UPLOADS</h3>
</div>
</div>
<!-- /info -->

<div class="text-muted">
<h2 class="size-18 text-muted margin-bottom-6"><b>About</b> Felicia Doe</h2>
<p>Lorem ipsum dolor sit amet diam nonummy nibh dolore.</p>

<ul class="list-unstyled nomargin">
<li class="margin-bottom-10"><i class="fa fa-globe width-20 hidden-xs hidden-sm"></i> <a href="http://www.stepofweb.com">www.stepofweb.com</a></li>
<li class="margin-bottom-10"><i class="fa fa-facebook width-20 hidden-xs hidden-sm"></i> <a href="http://www.facebook.com/stepofweb">stepofweb</a></li>
<li class="margin-bottom-10"><i class="fa fa-twitter width-20 hidden-xs hidden-sm"></i> <a href="http://www.twitter.com/stepofweb">@stepofweb</a></li>
</ul>
</div>

</div>

</div>

</div>
</section>
<!-- / -->
{{/content}}
{{#content "scripts" mode="append"}}
{{/content}}
{{/extend}}