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");
|
||||
});
|
||||
|
||||
|
||||
//forgot password page
|
||||
router.get("/forgotPassword", function (req, res, next) {
|
||||
res.render("forgotPassword");
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
// Require login to see this page.
|
||||
app.auth.forceLogin()
|
||||
</script>
|
||||
<link href="css/profile.css" rel="stylesheet" />
|
||||
|
||||
<div class="full-title">
|
||||
<div class="container">
|
||||
@ -13,52 +14,102 @@
|
||||
|
||||
<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 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-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 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 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>
|
||||
<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="mt-2 text-center">
|
||||
<button class="btn btn-sm btn-secondary change-password-button" type="button">Change
|
||||
Password</button>
|
||||
<div class="form-group">
|
||||
<label class="form-label">First Name</label>
|
||||
<input type="text" class="form-control" value="">
|
||||
</div>
|
||||
<div class="mt-5 text-center"><button class="btn btn-primary profile-button" type="button">Save
|
||||
Profile</button></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