update
This commit is contained in:
Leo
parent
8f37282f9a
commit
dd345e14e5
100
consumerWebsite/public/css/profile.css
Normal file
100
consumerWebsite/public/css/profile.css
Normal file
@ -0,0 +1,100 @@
|
|||||||
|
.btn-delete {
|
||||||
|
background-color: red;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui-w-80 {
|
||||||
|
width: 80px !important;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-default {
|
||||||
|
border-color: rgba(24,28,33,0.1);
|
||||||
|
background: rgba(0,0,0,0);
|
||||||
|
color: #4E5155;
|
||||||
|
}
|
||||||
|
|
||||||
|
label.btn {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-outline-primary {
|
||||||
|
border-color: #26B4FF;
|
||||||
|
background: transparent;
|
||||||
|
color: #26B4FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-light {
|
||||||
|
color: #babbbc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-facebook {
|
||||||
|
border-color: rgba(0,0,0,0);
|
||||||
|
background: #3B5998;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-instagram {
|
||||||
|
border-color: rgba(0,0,0,0);
|
||||||
|
background: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-clip: padding-box;
|
||||||
|
box-shadow: 0 1px 4px rgba(24,28,33,0.012);
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-bordered {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.account-settings-fileinput {
|
||||||
|
position: absolute;
|
||||||
|
visibility: hidden;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.account-settings-links .list-group-item.active {
|
||||||
|
font-weight: bold !important;
|
||||||
|
}
|
||||||
|
html:not(.dark-style) .account-settings-links .list-group-item.active {
|
||||||
|
background: transparent !important;
|
||||||
|
}
|
||||||
|
.account-settings-multiselect ~ .select2-container {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.light-style .account-settings-links .list-group-item {
|
||||||
|
padding: 0.85rem 1.5rem;
|
||||||
|
border-color: rgba(24, 28, 33, 0.03) !important;
|
||||||
|
}
|
||||||
|
.light-style .account-settings-links .list-group-item.active {
|
||||||
|
color: #4e5155 !important;
|
||||||
|
}
|
||||||
|
.material-style .account-settings-links .list-group-item {
|
||||||
|
padding: 0.85rem 1.5rem;
|
||||||
|
border-color: rgba(24, 28, 33, 0.03) !important;
|
||||||
|
}
|
||||||
|
.material-style .account-settings-links .list-group-item.active {
|
||||||
|
color: #4e5155 !important;
|
||||||
|
}
|
||||||
|
.dark-style .account-settings-links .list-group-item {
|
||||||
|
padding: 0.85rem 1.5rem;
|
||||||
|
border-color: rgba(255, 255, 255, 0.03) !important;
|
||||||
|
}
|
||||||
|
.dark-style .account-settings-links .list-group-item.active {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.light-style .account-settings-links .list-group-item.active {
|
||||||
|
color: #4E5155 !important;
|
||||||
|
}
|
||||||
|
.light-style .account-settings-links .list-group-item {
|
||||||
|
padding: 0.85rem 1.5rem;
|
||||||
|
border-color: rgba(24,28,33,0.03) !important;
|
||||||
|
}
|
||||||
|
|
||||||
@ -66,6 +66,7 @@ router.get("/profile", function (req, res, next) {
|
|||||||
res.render("profile");
|
res.render("profile");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
//forgot password page
|
//forgot password page
|
||||||
router.get("/forgotPassword", function (req, res, next) {
|
router.get("/forgotPassword", function (req, res, next) {
|
||||||
res.render("forgotPassword");
|
res.render("forgotPassword");
|
||||||
|
|||||||
@ -1,64 +1,115 @@
|
|||||||
<%- include('top') %>
|
<%- include('top') %>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
// Require login to see this page.
|
// Require login to see this page.
|
||||||
app.auth.forceLogin()
|
app.auth.forceLogin()
|
||||||
</script>
|
</script>
|
||||||
|
<link href="css/profile.css" rel="stylesheet" />
|
||||||
|
|
||||||
<div class="full-title">
|
<div class="full-title">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="mt-4 mb-3">Profile
|
<h1 class="mt-4 mb-3">Profile
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
<div class="container light-style flex-grow-1 container-p-y">
|
||||||
|
|
||||||
<div class="centered-content">
|
|
||||||
<div class="container">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3 border-right">
|
|
||||||
<div class="d-flex flex-column align-items-center text-center p-3 py-5"><img
|
|
||||||
class="rounded-circle mt-5" width="150px"
|
|
||||||
src="https://st3.depositphotos.com/15648834/17930/v/600/depositphotos_179308454-stock-illustration-unknown-person-silhouette-glasses-profile.jpg">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-5 border-right">
|
|
||||||
<div class="p-3 py-5">
|
|
||||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
||||||
<h4 class="text-right">Profile Settings</h4>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-2">
|
|
||||||
<div class="col-md-6"><label class="labels">Name</label><input type="text"
|
|
||||||
class="form-control" placeholder="first name" value=""></div>
|
|
||||||
<div class="col-md-6"><label class="labels">Surname</label><input type="text"
|
|
||||||
class="form-control" value="" placeholder="surname"></div>
|
|
||||||
</div>
|
|
||||||
<div class="row mt-3">
|
|
||||||
<div class="col-md-12"><label class="labels">Mobile Number</label><input type="text"
|
|
||||||
class="form-control" placeholder="enter phone number" value=""></div>
|
|
||||||
<div class="col-md-12"><label class="labels">Address</label><input type="text"
|
|
||||||
class="form-control" placeholder="enter address" value=""></div>
|
|
||||||
<div class="col-md-12"><label class="labels">Email</label><input type="text"
|
|
||||||
class="form-control" placeholder="enter email" value=""></div>
|
|
||||||
<div class="col-md-12"><label class="labels">Password</label><input type="text"
|
|
||||||
class="form-control" placeholder="enter password" value=""></div>
|
|
||||||
<div class="col-md-12"><label class="labels">Password</label><input type="text"
|
|
||||||
class="form-control" placeholder="re enter password" value=""></div>
|
|
||||||
</div>
|
|
||||||
<div class="mt-2 text-center">
|
|
||||||
<button class="btn btn-sm btn-secondary change-password-button" type="button">Change
|
|
||||||
Password</button>
|
|
||||||
</div>
|
|
||||||
<div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Save
|
|
||||||
Profile</button></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<br>
|
|
||||||
<%- include('bot') %>
|
|
||||||
|
|
||||||
|
<div class="card overflow-hidden">
|
||||||
|
<div class="row no-gutters row-bordered row-border-light">
|
||||||
|
<div class="col-md-3 pt-0">
|
||||||
|
<div class="list-group list-group-flush account-settings-links">
|
||||||
|
<a class="list-group-item list-group-item-action active" data-toggle="list"
|
||||||
|
href="#account-general">General</a>
|
||||||
|
<a class="list-group-item list-group-item-action" data-toggle="list"
|
||||||
|
href="#account-change-password">Change password</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-9">
|
||||||
|
<div class="tab-content">
|
||||||
|
<div class="tab-pane fade active show" id="account-general">
|
||||||
|
|
||||||
|
<div class="card-body media align-items-center">
|
||||||
|
<img src="https://bootdey.com/img/Content/avatar/avatar1.png" alt=""
|
||||||
|
class="d-block ui-w-80">
|
||||||
|
<br>
|
||||||
|
<div class="media-body ml-4">
|
||||||
|
<label class="btn btn-outline-primary">
|
||||||
|
Upload new photo
|
||||||
|
<input type="file" class="account-settings-fileinput">
|
||||||
|
</label>
|
||||||
|
<div class="text-light small mt-1">Allowed JPG, GIF or PNG. Max size of 800K</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr class="border-light m-0">
|
||||||
|
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Username</label>
|
||||||
|
<input type="text" class="form-control mb-1" value="">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">First Name</label>
|
||||||
|
<input type="text" class="form-control" value="">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Last Name</label>
|
||||||
|
<input type="text" class="form-control" value="">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">E-mail</label>
|
||||||
|
<input type="text" class="form-control mb-1" value="">
|
||||||
|
<div class="alert alert-warning mt-3">
|
||||||
|
Your email is not confirmed. Please check your inbox.<br>
|
||||||
|
<a href="javascript:void(0)">Resend confirmation</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Phone Number</label>
|
||||||
|
<input type="text" class="form-control" value="">
|
||||||
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Address</label>
|
||||||
|
<input type="text" class="form-control" value="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tab-pane fade" id="account-change-password">
|
||||||
|
<div class="card-body pb-2">
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Current password</label>
|
||||||
|
<input type="password" class="form-control">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">New password</label>
|
||||||
|
<input type="password" class="form-control">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="form-label">Repeat new password</label>
|
||||||
|
<input type="password" class="form-control">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-right mt-3">
|
||||||
|
<button type="button" class="btn btn-primary">Save changes</button>
|
||||||
|
<button type="button" class="btn btn-default">Cancel</button>
|
||||||
|
<button type="button" class="btn btn-delete">Delete Account</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<br>
|
||||||
|
<%- include('bot') %>
|
||||||
Loading…
x
Reference in New Issue
Block a user