This is the source code with 15 fields:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>User Administrator</title>
<style type="text/css">
*
{
box-sizing: border-box;
}
body
{
background-color: #FFFFFF;
margin: 6px;
font-size: 16px;
font-family: Arial;
font-weight: normal;
text-decoration: none;
color: #000000;
}
th
{
font-size: 16px;
font-family: Arial;
font-weight: normal;
text-decoration: none;
background-color: #89BDD3;
color: #FFFFFF;
text-align: left;
}
td
{
font-size: 16px;
font-family: Arial;
font-weight: normal;
text-decoration: none;
color: #000000;
}
input, select
{
font-size: 16px;
font-family: Arial;
font-weight: normal;
text-decoration: none;
color: #000000;
border:1px #000000 solid;
}
.clickable
{
cursor: pointer;
}
.container
{
max-width: 768px;
margin: 0 auto 0 auto;
padding: 15px;
text-align: left;
width: 100%;
}
td, th
{
padding: 0;
}
.table
{
background-color: transparent;
border: 1px solid #DDDDDD;
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
width: 100%;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
{
padding: 8px;
line-height: 1.4285;
vertical-align: top;
border-top: 1px solid #DDDDDD;
}
.table > thead > tr > th
{
vertical-align: bottom;
border-bottom: 2px solid #DDDDDD;
}
.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td
{
border-top: 0;
}
.table-hover > tbody > tr:hover > td
{
background-color: #F5F5F5;
}
.table-striped>tbody>tr:nth-child(odd)>td
{
background-color: #F9F9F9;
}
th
{
background-color: #89BDD3;
color: #FFFFFF;
font-weight: bold;
}
.form-control
{
display: block;
width: 100%;
margin-bottom: 15px;
padding: 6px 12px;
font-family: Arial;
font-size: 16px;
line-height: 1.4285;
color: #555555;
background-color: #FFFFFF;
background-image: none;
border: 1px solid #CCCCCC;
border-radius: 4px;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus
{
border-color: #66AFE9;
outline: 0;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
}
label
{
display: block;
padding: 6px 0px;
text-align: left;
}
.btn
{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-family: Arial;
font-weight: normal;
font-size: 16px;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #9AD3DE;
border: 1px solid #9AD3DE;
border-radius: 4px;
color: #FFFFFF;
}
#header
{
margin-bottom: 6px;
}
#filter
{
float: right;
}
#filter input
{
display: inline-block;
vertical-align: middle;
width: 16em;
padding: 5px 10px;
}
#filter label
{
display: inline-block;
max-width: 100%;
font-size: 16px;
font-family: Arial;
}
.filter-hide
{
display: none !important;
}
#pagination
{
display: inline-block;
list-style: none;
padding: 0;
border-radius: 4px;
font-family: Arial;
font-weight: normal;
font-size: 0;
}
#pagination > li
{
display: inline;
font-size: 16px;
}
#pagination > li > a, #pagination > li > span
{
position: relative;
float: left;
padding: 6px 12px 6px 12px;
text-decoration: none;
background-color: #FFFFFF;
border: 1px #DDDDDD solid;
color: #9AD3DE;
margin-left: -1px;
}
#pagination > li:first-child > a, #pagination > li:first-child > span
{
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
#pagination > li:last-child > a, #pagination > li:last-child > span
{
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
#pagination > li > a:hover, #pagination > li > span:hover, #pagination > li > a:focus, #pagination > li > span:focus
{
background-color: #CCCCCC;
color: #23527C;
}
#pagination > .active > a, #pagination > .active > span, #pagination > .active > a:hover, #pagination > .active > span:hover, #pagination > .active > a:focus, #pagination > .active > span:focus
{
z-index: 2;
background-color: #9AD3DE;
border-color: #9AD3DE;
color: #FFFFFF;
cursor: default;
}
#pagination > .disabled > span, #pagination > .disabled > span:hover, #pagination > .disabled > span:focus, #pagination > .disabled > a, #pagination > .disabled > a:hover, #pagination > .disabled > a:focus
{
background-color: #FFFFFF;
color: #777777;
cursor: not-allowed;
}
.paginate-show
{
display: table-row;
}
.paginate-hide
{
display: none;
}
#footer
{
margin-top: 10px;
text-align:right;
}
.icon-edit, .icon-delete
{
display: inline-block;
}
.icon-edit::before
{
display: inline-block;
width: 16px;
height: 16px;
content: " ";
background: url('data:image/svg+xml,%3Csvg%20height%3D%2216%22%20width%3D%2216%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22fill%3A%23000000%22%20transform%3D%22scale%280.0089%29%22%3E%0D%0A%3Cpath%20transform%3D%22rotate%28180%29%20scale%28-1%2C1%29%20translate%280%2C-1536%29%22%20d%3D%22M363%200l91%2091l-235%20235l-91%20-91v-107h128v-128h107zM886%20928q0%2022%20-22%2022q-10%200%20-17%20-7l-542%20-542q-7%20-7%20-7%20-17q0%20-22%2022%20-22q10%200%2017%207l542%20542q7%207%207%2017zM832%201120l416%20-416l-832%20-832h-416v416zM1515%201024q0%20-53%20-37%20-90l-166%20-166l-416%20416l166%20165q36%2038%2090%2038q53%200%2091%20-38l235%20-234q37%20-39%2037%20-91z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center;
}
.icon-delete::before
{
display: inline-block;
width: 16px;
height: 16px;
content: " ";
background: url('data:image/svg+xml,%3Csvg%20height%3D%2216%22%20width%3D%2216%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22fill%3A%23000000%22%20transform%3D%22scale%280.0089%29%22%3E%0D%0A%3Cpath%20transform%3D%22rotate%28180%29%20scale%28-1%2C1%29%20translate%280%2C-1536%29%22%20d%3D%22M1298%20214q0%20-40%20-28%20-68l-136%20-136q-28%20-28%20-68%20-28t-68%2028l-294%20294l-294%20-294q-28%20-28%20-68%20-28t-68%2028l-136%20136q-28%2028%20-28%2068t28%2068l294%20294l-294%20294q-28%2028%20-28%2068t28%2068l136%20136q28%2028%2068%2028t68%20-28l294%20-294l294%20294q28%2028%2068%2028t68%20-28l136%20-136q28%20-28%2028%20-68t-28%20-68l-294%20-294l294%20-294q28%20-28%2028%20-68z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center;
}
#avatar *
{
box-sizing: border-box;
}
#avatar
{
display: table;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 15px;
}
#avatar .form-control
{
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0px;
}
#avatar .input-group-btn, #avatar .form-control
{
display: table-cell;
}
#avatar .form-control
{
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
margin: 0;
}
#avatar .input-group-btn
{
width: 1%;
white-space: nowrap;
vertical-align: middle;
padding: 0;
position: relative;
font-size: 0px;
white-space: nowrap;
}
#avatar .btn
{
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
display: inline-block;
margin-left: -1px;
padding: 6px 8px 6px 8px;
position: relative;
}
.thumbnail
{
display: inline-block;
min-height: 1px;
box-sizing: border-box;
margin: 0;
padding: 6px 0 14px 0;
text-align: center;
vertical-align: top;
}
.thumbnail .frame
{
padding: 4px;
background-color: #fff;
border: 1px #DDDDDD solid;
border-radius: 4px;
}
.thumbnail img
{
border-width: 0;
display: block;
width: 100%;
height: auto;
max-width: 100%;
box-sizing: border-box;
}
</style>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#filter input').on('propertychange input', function(e)
{
$('.no-results').remove();
var $this = $(this);
var search = $this.val().toLowerCase();
var $target = $('.table');
var $rows = $target.find('tbody tr');
if (search == '')
{
$rows.removeClass('filter-hide');
buildNav();
paginate();
}
else
{
$rows.each(function()
{
var $this = $(this);
$this.text().toLowerCase().indexOf(search) === -1 ? $this.addClass('filter-hide') : $this.removeClass('filter-hide');
})
buildNav();
paginate();
if ($target.find('tbody tr:visible').size() === 0)
{
var col_span = $target.find('tr').first().find('td').size();
var no_results = $('<tr class="no-results"><td colspan="'+col_span+'"></td></tr>');
$target.find('tbody').append(no_results);
}
}
});
$('.table').each(function()
{
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pagination = $('#pagination');
paginate = function()
{
$pagination.find('li').eq(currentPage+1).addClass('active').siblings().removeClass('active');
var $prev = $pagination.find('li:first-child');
var $next = $pagination.find('li:last-child');
if (currentPage == 0)
{
$prev.addClass('disabled');
}
else
{
$prev.removeClass('disabled');
}
if (currentPage == (numPages-1))
{
$next.addClass('disabled');
}
else
{
$next.removeClass('disabled');
}
$table.find('tbody tr').not('.filter-hide').removeClass('paginate-show').addClass('paginate-hide').slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).removeClass('paginate-hide').addClass('paginate-show');;
};
buildNav = function()
{
numRows = $table.find('tbody tr').not('.filter-hide').length;
numPages = Math.ceil(numRows / numPerPage);
$pagination.find('li').not($pagination.find('li:first-child')).not($pagination.find('li:last-child')).remove();
for (var page = 0; page < numPages; page++)
{
var item = '<a>' + (page + 1) + '</a>';
$('<li></li>').html(item)
.bind('click', {newPage: page}, function(event)
{
currentPage = event.data['newPage'];
paginate();
}).appendTo($pagination).addClass('clickable');
}
$pagination.find('li').eq(1).appendTo($pagination);
}
buildNav();
$pagination.find('li:nth-child(2)').addClass('active');
$pagination.find('li:first-child').click(function()
{
if (currentPage > 0)
{
currentPage--;
}
paginate();
});
$pagination.find('li:last-child').click(function()
{
if (currentPage < (numPages-1))
{
currentPage++;
}
paginate();
});
paginate();
});
$("#avatar :file").on('change', function()
{
var input = $(this).parents('.input-group').find(':text');
input.val($(this).val());
});
});
</script>
</head>
<body>
<div class="container">
<form action="loginadmin.php" enctype="multipart/form-data" accept-charset="UTF-8" method="post">
<input name="action" type="hidden" value="update">
<input type="hidden" name="id" value="beth">
<label for="username">Username</label>
<input class="form-control" id="username" name="username" size="50" type="text" value="beth">
<label for="password">Password</label>
<input class="form-control" id="password" name="password" size="50" type="password" value="">
<label for="fullname">Fullname</label>
<input class="form-control" id="fullname" name="fullname" size="50" type="text" value="Mark OConnell3">
<label for="email">Email</label>
<input class="form-control" id="email" name="email" size="50" type="text" value="
info@whiteoconnellphoto.com">
<label for="role">Role</label>
<select class="form-control" id="role" name="role" size="1">
<option value="Administrator" >Administrator</option>
<option value="Member" selected>Member</option>
<option value="Guest" >Guest</option>
</select>
<label for="avatar">Avatar</label>
<div class="input-group" id="avatar"><input class="form-control" type="text" readonly="" value="441991_DMargaretosPhoto2018.jpg"><label class="input-group-btn"><input type="file" name="avatar" style="display:none;"><span class="btn">Browse...</span></label></div>
<div class="thumbnail"><div class="frame"><img alt="441991_DMargaretosPhoto2018.jpg" src="avatars/441991_DMargaretosPhoto2018.jpg"></div></div>
<label for="extra1">Studio Name</label>
<input class="form-control" id="extra1" name="extra1" size="50" type="text" value="Beths Photos2">
<label for="extra2">Contact Name</label>
<input class="form-control" id="extra2" name="extra2" size="50" type="text" value="Beth">
<label for="extra3">Address</label>
<input class="form-control" id="extra3" name="extra3" size="50" type="text" value="123 Bay St">
<label for="extra4">City</label>
<input class="form-control" id="extra4" name="extra4" size="50" type="text" value="Pembroke">
<label for="extra5">State</label>
<input class="form-control" id="extra5" name="extra5" size="50" type="text" value="Massachusetts">
<label for="extra6">Zip</label>
<input class="form-control" id="extra6" name="extra6" size="50" type="text" value="02359">
<label for="extra7">Business Phone 1</label>
<input class="form-control" id="extra7" name="extra7" size="50" type="text" value="781-826-81189">
<label for="extra8">Business Phone 2</label>
<input class="form-control" id="extra8" name="extra8" size="50" type="text" value="123-456-7899">
<label for="extra9">Home Phone - will not be on Referral Page</label>
<input class="form-control" id="extra9" name="extra9" size="50" type="text" value="617-852-2365">
<label for="extra10">Cell Phone - will not be on Referral Page</label>
<input class="form-control" id="extra10" name="extra10" size="50" type="text" value="508-822-1557">
<label for="extra11">Specialities - What services do you offer?</label>
<input class="form-control" id="extra11" name="extra11" size="50" type="text" value="test8 Families, Children, High School Seniors, Headshots, School Proms, Events, Glamour, PR and Corporate, Pets, Black and White, Painterly Portraits">
<label for="extra12">Description - Add something informative to prospective clients</label>
<input class="form-control" id="extra12" name="extra12" size="50" type="text" value="We are a low volume-high quality photography studio and gallery, located in a historic antique colonial with a beautifully landscaped outdoor park. Here we create relaxed, natural portraits both indoors and outdoors.Our work is available on fine art canvas,watercolor paper, or classic lustre finish, all in color, black and white or antique sepia. We pride ourselves on the reputation we've earned in the last thirty years with both our photography AND our customer service Just ask anyone we've ever worked with.Photography by Susan White & Mark O'Connell . . . . . . anything else is just a compromise ">
<label for="extra13">Web Address</label>
<input class="form-control" id="extra13" name="extra13" size="50" type="text" value="
http://www.headshotsma.com">
<label for="extra14">Current Member (yes/no)</label>
<input class="form-control" id="extra14" name="extra14" size="50" type="text" value="">
<label for="extra15">Website Ad (yes/no)</label>
<input class="form-control" id="extra15" name="extra15" size="50" type="text" value="">
<label for="active">Status</label>
<select class="form-control" name="active" size="1"><option value="0">inactive</option><option selected value="1">active</option></select>
<input class="btn" type="submit" name="cmdSubmit" value="Save"> <input class="btn" name="cmdBack" type="button" value="Cancel" onclick="location.href='loginadmin.php'">
</form>
</div>
</body>
</html>
----------------------------------------------------------
This is the source code with 11 fields:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>User Administrator</title>
<style type="text/css">
*
{
box-sizing: border-box;
}
body
{
background-color: #FFFFFF;
margin: 6px;
font-size: 13px;
font-family: Arial;
font-weight: normal;
text-decoration: none;
color: #000000;
}
th
{
font-size: 13px;
font-family: Arial;
font-weight: normal;
text-decoration: none;
background-color: #337AB7;
color: #FFFFFF;
text-align: left;
}
td
{
font-size: 13px;
font-family: Arial;
font-weight: normal;
text-decoration: none;
color: #000000;
}
input, select
{
font-size: 13px;
font-family: Arial;
font-weight: normal;
text-decoration: none;
color: #000000;
border:1px #000000 solid;
}
.clickable
{
cursor: pointer;
}
.container
{
max-width: 768px;
margin: 0 auto 0 auto;
padding: 15px;
text-align: left;
width: 100%;
}
td, th
{
padding: 0;
}
.table
{
background-color: transparent;
border: 1px solid #DDDDDD;
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
width: 100%;
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td
{
padding: 8px;
line-height: 1.4285;
vertical-align: top;
border-top: 1px solid #DDDDDD;
}
.table > thead > tr > th
{
vertical-align: bottom;
border-bottom: 2px solid #DDDDDD;
}
.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th, .table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td, .table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td
{
border-top: 0;
}
.table-hover > tbody > tr:hover > td
{
background-color: #F5F5F5;
}
.table-striped>tbody>tr:nth-child(odd)>td
{
background-color: #F9F9F9;
}
th
{
background-color: #337AB7;
color: #FFFFFF;
font-weight: bold;
}
.form-control
{
display: block;
width: 100%;
margin-bottom: 15px;
padding: 6px 12px;
font-family: Arial;
font-size: 13px;
line-height: 1.4285;
color: #555555;
background-color: #FFFFFF;
background-image: none;
border: 1px solid #CCCCCC;
border-radius: 4px;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus
{
border-color: #66AFE9;
outline: 0;
box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.60);
}
label
{
display: block;
padding: 6px 0px;
text-align: left;
}
.btn
{
display: inline-block;
padding: 6px 12px;
margin-bottom: 0px;
font-family: Arial;
font-weight: normal;
font-size: 13px;
text-align: center;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: #337AB7;
border: 1px solid #2E6DA4;
border-radius: 4px;
color: #FFFFFF;
}
#header
{
margin-bottom: 6px;
}
#filter
{
float: right;
}
#filter input
{
display: inline-block;
vertical-align: middle;
width: 16em;
padding: 5px 10px;
}
#filter label
{
display: inline-block;
max-width: 100%;
font-size: 13px;
font-family: Arial;
}
.filter-hide
{
display: none !important;
}
#pagination
{
display: inline-block;
list-style: none;
padding: 0;
border-radius: 4px;
font-family: Arial;
font-weight: normal;
font-size: 0;
}
#pagination > li
{
display: inline;
font-size: 13px;
}
#pagination > li > a, #pagination > li > span
{
position: relative;
float: left;
padding: 6px 12px 6px 12px;
text-decoration: none;
background-color: #FFFFFF;
border: 1px #DDDDDD solid;
color: #337AB7;
margin-left: -1px;
}
#pagination > li:first-child > a, #pagination > li:first-child > span
{
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
#pagination > li:last-child > a, #pagination > li:last-child > span
{
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
#pagination > li > a:hover, #pagination > li > span:hover, #pagination > li > a:focus, #pagination > li > span:focus
{
background-color: #CCCCCC;
color: #23527C;
}
#pagination > .active > a, #pagination > .active > span, #pagination > .active > a:hover, #pagination > .active > span:hover, #pagination > .active > a:focus, #pagination > .active > span:focus
{
z-index: 2;
background-color: #337AB7;
border-color: #337AB7;
color: #FFFFFF;
cursor: default;
}
#pagination > .disabled > span, #pagination > .disabled > span:hover, #pagination > .disabled > span:focus, #pagination > .disabled > a, #pagination > .disabled > a:hover, #pagination > .disabled > a:focus
{
background-color: #FFFFFF;
color: #777777;
cursor: not-allowed;
}
.paginate-show
{
display: table-row;
}
.paginate-hide
{
display: none;
}
#footer
{
margin-top: 10px;
text-align:right;
}
.icon-edit, .icon-delete
{
display: inline-block;
}
.icon-edit::before
{
display: inline-block;
width: 13px;
height: 13px;
content: " ";
background: url('data:image/svg+xml,%3Csvg%20height%3D%2213%22%20width%3D%2213%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22fill%3A%23000000%22%20transform%3D%22scale%280.0073%29%22%3E%0D%0A%3Cpath%20transform%3D%22rotate%28180%29%20scale%28-1%2C1%29%20translate%280%2C-1536%29%22%20d%3D%22M363%200l91%2091l-235%20235l-91%20-91v-107h128v-128h107zM886%20928q0%2022%20-22%2022q-10%200%20-17%20-7l-542%20-542q-7%20-7%20-7%20-17q0%20-22%2022%20-22q10%200%2017%207l542%20542q7%207%207%2017zM832%201120l416%20-416l-832%20-832h-416v416zM1515%201024q0%20-53%20-37%20-90l-166%20-166l-416%20416l166%20165q36%2038%2090%2038q53%200%2091%20-38l235%20-234q37%20-39%2037%20-91z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center;
}
.icon-delete::before
{
display: inline-block;
width: 13px;
height: 13px;
content: " ";
background: url('data:image/svg+xml,%3Csvg%20height%3D%2213%22%20width%3D%2213%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20style%3D%22fill%3A%23000000%22%20transform%3D%22scale%280.0073%29%22%3E%0D%0A%3Cpath%20transform%3D%22rotate%28180%29%20scale%28-1%2C1%29%20translate%280%2C-1536%29%22%20d%3D%22M1298%20214q0%20-40%20-28%20-68l-136%20-136q-28%20-28%20-68%20-28t-68%2028l-294%20294l-294%20-294q-28%20-28%20-68%20-28t-68%2028l-136%20136q-28%2028%20-28%2068t28%2068l294%20294l-294%20294q-28%2028%20-28%2068t28%2068l136%20136q28%2028%2068%2028t68%20-28l294%20-294l294%20294q28%2028%2068%2028t68%20-28l136%20-136q28%20-28%2028%20-68t-28%20-68l-294%20-294l294%20-294q28%20-28%2028%20-68z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center center;
}
#avatar *
{
box-sizing: border-box;
}
#avatar
{
display: table;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 15px;
}
#avatar .form-control
{
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0px;
}
#avatar .input-group-btn, #avatar .form-control
{
display: table-cell;
}
#avatar .form-control
{
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
margin: 0;
}
#avatar .input-group-btn
{
width: 1%;
white-space: nowrap;
vertical-align: middle;
padding: 0;
position: relative;
font-size: 0px;
white-space: nowrap;
}
#avatar .btn
{
border-bottom-left-radius: 0px;
border-top-left-radius: 0px;
display: inline-block;
margin-left: -1px;
padding: 6px 8px 6px 8px;
position: relative;
}
.thumbnail
{
display: inline-block;
min-height: 1px;
box-sizing: border-box;
margin: 0;
padding: 6px 0 14px 0;
text-align: center;
vertical-align: top;
}
.thumbnail .frame
{
padding: 4px;
background-color: #fff;
border: 1px #DDDDDD solid;
border-radius: 4px;
}
.thumbnail img
{
border-width: 0;
display: block;
width: 100%;
height: auto;
max-width: 100%;
box-sizing: border-box;
}
</style>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#filter input').on('propertychange input', function(e)
{
$('.no-results').remove();
var $this = $(this);
var search = $this.val().toLowerCase();
var $target = $('.table');
var $rows = $target.find('tbody tr');
if (search == '')
{
$rows.removeClass('filter-hide');
buildNav();
paginate();
}
else
{
$rows.each(function()
{
var $this = $(this);
$this.text().toLowerCase().indexOf(search) === -1 ? $this.addClass('filter-hide') : $this.removeClass('filter-hide');
})
buildNav();
paginate();
if ($target.find('tbody tr:visible').size() === 0)
{
var col_span = $target.find('tr').first().find('td').size();
var no_results = $('<tr class="no-results"><td colspan="'+col_span+'"></td></tr>');
$target.find('tbody').append(no_results);
}
}
});
$('.table').each(function()
{
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pagination = $('#pagination');
paginate = function()
{
$pagination.find('li').eq(currentPage+1).addClass('active').siblings().removeClass('active');
var $prev = $pagination.find('li:first-child');
var $next = $pagination.find('li:last-child');
if (currentPage == 0)
{
$prev.addClass('disabled');
}
else
{
$prev.removeClass('disabled');
}
if (currentPage == (numPages-1))
{
$next.addClass('disabled');
}
else
{
$next.removeClass('disabled');
}
$table.find('tbody tr').not('.filter-hide').removeClass('paginate-show').addClass('paginate-hide').slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).removeClass('paginate-hide').addClass('paginate-show');;
};
buildNav = function()
{
numRows = $table.find('tbody tr').not('.filter-hide').length;
numPages = Math.ceil(numRows / numPerPage);
$pagination.find('li').not($pagination.find('li:first-child')).not($pagination.find('li:last-child')).remove();
for (var page = 0; page < numPages; page++)
{
var item = '<a>' + (page + 1) + '</a>';
$('<li></li>').html(item)
.bind('click', {newPage: page}, function(event)
{
currentPage = event.data['newPage'];
paginate();
}).appendTo($pagination).addClass('clickable');
}
$pagination.find('li').eq(1).appendTo($pagination);
}
buildNav();
$pagination.find('li:nth-child(2)').addClass('active');
$pagination.find('li:first-child').click(function()
{
if (currentPage > 0)
{
currentPage--;
}
paginate();
});
$pagination.find('li:last-child').click(function()
{
if (currentPage < (numPages-1))
{
currentPage++;
}
paginate();
});
paginate();
});
$("#avatar :file").on('change', function()
{
var input = $(this).parents('.input-group').find(':text');
input.val($(this).val());
});
});
</script>
</head>
<body>
<div class="container">
<form action="loginadmin.php" enctype="multipart/form-data" accept-charset="UTF-8" method="post">
<input name="action" type="hidden" value="update">
<input type="hidden" name="id" value="beth">
<label for="username">Username</label>
<input class="form-control" id="username" name="username" size="50" type="text" value="beth">
<label for="password">Password</label>
<input class="form-control" id="password" name="password" size="50" type="password" value="">
<label for="fullname">Fullname</label>
<input class="form-control" id="fullname" name="fullname" size="50" type="text" value="Mark OConnell3">
<label for="email">Email</label>
<input class="form-control" id="email" name="email" size="50" type="text" value="
info@whiteoconnellphoto.com">
<label for="role">Role</label>
<select class="form-control" id="role" name="role" size="1">
<option value="Administrator" >Administrator</option>
<option value="Member" selected>Member</option>
<option value="Guest" >Guest</option>
</select>
<label for="avatar">Avatar</label>
<div class="input-group" id="avatar"><input class="form-control" type="text" readonly="" value="441991_DMargaretosPhoto2018.jpg"><label class="input-group-btn"><input type="file" name="avatar" style="display:none;"><span class="btn">Browse...</span></label></div>
<div class="thumbnail"><div class="frame"><img alt="441991_DMargaretosPhoto2018.jpg" src="avatars/441991_DMargaretosPhoto2018.jpg"></div></div>
<label for="extra1">Studio Name</label>
<input class="form-control" id="extra1" name="extra1" size="50" type="text" value="Beths Photos2">
<label for="extra2">Contact Name</label>
<input class="form-control" id="extra2" name="extra2" size="50" type="text" value="Beth">
<label for="extra3">Address</label>
<input class="form-control" id="extra3" name="extra3" size="50" type="text" value="123 Bay St">
<label for="extra4">City</label>
<input class="form-control" id="extra4" name="extra4" size="50" type="text" value="Pembroke">
<label for="extra5">State</label>
<input class="form-control" id="extra5" name="extra5" size="50" type="text" value="Massachusetts">
<label for="extra6">Zip Code</label>
<input class="form-control" id="extra6" name="extra6" size="50" type="text" value="02359">
<label for="extra7">Business Phone 1</label>
<input class="form-control" id="extra7" name="extra7" size="50" type="text" value="781-826-81189">
<label for="extra8">Business Phone 2</label>
<input class="form-control" id="extra8" name="extra8" size="50" type="text" value="123-456-7899">
<label for="extra9">Home Phone - Will NOT Display on Referral Page</label>
<input class="form-control" id="extra9" name="extra9" size="50" type="text" value="617-852-2365">
<label for="extra10">Cell Phone - Will NOT Display on Referral Page</label>
<input class="form-control" id="extra10" name="extra10" size="50" type="text" value="508-822-1557">
<label for="extra11">Specialities</label>
<input class="form-control" id="extra11" name="extra11" size="50" type="text" value="test8 Families, Children, High School Seniors, Headshots, School Proms, Events, Glamour, PR and Corporate, Pets, Black and White, Painterly Portraits">
<label for="active">Status</label>
<select class="form-control" name="active" size="1"><option value="0">inactive</option><option selected value="1">active</option></select>
<input class="btn" type="submit" name="cmdSubmit" value="Save"> <input class="btn" name="cmdBack" type="button" value="Cancel" onclick="location.href='loginadmin.php'">
</form>
</div>
</body>
</html>