sleek-dashboard
Version:
Premium & Free Bootstrap 4 admin dashboard template by TAFcoder.com
420 lines (405 loc) • 25.3 kB
HTML
---
layout: default
title: "Sleek - Admin Dashboard Template"
parent: "pages"
sub_parent: "users"
activePage: "user-profile"
plugins: [date_range_picker]
---
<div class="bg-white border rounded">
<div class="row no-gutters">
<div class="col-lg-4 col-xl-3">
<div class="profile-content-left pt-5 pb-3 px-3 px-xl-5">
<div class="card text-center widget-profile px-0 border-0">
<div class="card-img mx-auto rounded-circle">
<img src="assets/img/user/u6.jpg" alt="user image">
</div>
<div class="card-body">
<h4 class="py-2 text-dark">Albrecht Straub</h4>
<p>Albrecht.straub@gmail.com</p>
<a class="btn btn-primary btn-pill btn-lg my-4" href="#">Follow</a>
</div>
</div>
<div class="d-flex justify-content-between ">
<div class="text-center pb-4">
<h6 class="text-dark pb-2">1503</h6>
<p>Friends</p>
</div>
<div class="text-center pb-4">
<h6 class="text-dark pb-2">2905</h6>
<p>Followers</p>
</div>
<div class="text-center pb-4">
<h6 class="text-dark pb-2">1200</h6>
<p>Following</p>
</div>
</div>
<hr class="w-100">
<div class="contact-info pt-4">
<h5 class="text-dark mb-1">Contact Information</h5>
<p class="text-dark font-weight-medium pt-4 mb-2">Email address</p>
<p>Albrecht.straub@gmail.com</p>
<p class="text-dark font-weight-medium pt-4 mb-2">Phone Number</p>
<p>+99 9539 2641 31</p>
<p class="text-dark font-weight-medium pt-4 mb-2">Birthday</p>
<p>Nov 15, 1990</p>
<p class="text-dark font-weight-medium pt-4 mb-2">Social Profile</p>
<p class="pb-3 social-button">
<a href="#" class="mb-1 btn btn-outline btn-twitter rounded-circle">
<i class="mdi mdi-twitter"></i>
</a>
<a href="#" class="mb-1 btn btn-outline btn-linkedin rounded-circle">
<i class="mdi mdi-linkedin"></i>
</a>
<a href="#" class="mb-1 btn btn-outline btn-facebook rounded-circle">
<i class="mdi mdi-facebook"></i>
</a>
<a href="#" class="mb-1 btn btn-outline btn-skype rounded-circle">
<i class="mdi mdi-skype"></i>
</a>
</p>
</div>
</div>
</div>
<div class="col-lg-8 col-xl-9">
<div class="profile-content-right py-5">
<ul class="nav nav-tabs px-3 px-xl-5 nav-style-border" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="timeline-tab" data-toggle="tab" href="#timeline" role="tab" aria-controls="timeline" aria-selected="true">Timeline</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link active" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
</li>
</ul>
<div class="tab-content px-3 px-xl-5" id="myTabContent">
<div class="tab-pane fade" id="timeline" role="tabpanel" aria-labelledby="timeline-tab">
<div class="media mt-5 profile-timeline-media">
<div class="align-self-start iconbox-45 overflow-hidden mr-3">
<img src="assets/img/user/u3.jpg" alt="Generic placeholder image">
</div>
<div class="media-body">
<h6 class="mt-0 text-dark">Larissa Gebhardt</h6>
<span>Designer</span>
<span class="float-right">5 mins ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa1.jpg" alt="Product">
</div>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa2.jpg" alt="Product">
</div>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa3.jpg" alt="Product">
</div>
</div>
</div>
<div class="media mt-5 profile-timeline-media">
<div class="align-self-start iconbox-45 overflow-hidden mr-3">
<img src="assets/img/user/u4.jpg" alt="Generic placeholder image">
</div>
<div class="media-body">
<h6 class="mt-0 text-dark">Walter Reuter</h6>
<span>Designer</span>
<span class="float-right">2 hrs ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
</div>
</div>
<div class="media mt-5 profile-timeline-media">
<div class="align-self-start iconbox-45 overflow-hidden mr-3">
<img src="assets/img/user/u7.jpg" alt="Generic placeholder image">
</div>
<div class="media-body">
<h6 class="mt-0 text-dark">Albrecht Straub</h6>
<span>Designer</span>
<span class="float-right">5 days ago</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa4.jpg" alt="Product">
</div>
</div>
</div>
<div class="media mt-5 profile-timeline-media">
<div class="align-self-start iconbox-45 overflow-hidden mr-3">
<img src="assets/img/user/u8.jpg" alt="Generic placeholder image">
</div>
<div class="media-body">
<h6 class="mt-0 text-dark">Selena Wagner</h6>
<span>Designer</span>
<span class="float-right">Mar 05, 2018</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa5.jpg" alt="Product">
</div>
<div class="d-inline-block rounded overflow-hidden mt-4 mr-0 mr-lg-4">
<img src="assets/img/products/pa6.jpg" alt="Product">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<div class="mt-5">
<div class="row">
<div class="col-xl-4">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle mr-4 bg-primary">
<i class="mdi mdi-account-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">5300</h4>
<p>New Users</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle bg-warning mr-4">
<i class="mdi mdi-cart-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">1953</h4>
<p>Order Placed</p>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="media widget-media p-4 bg-white border">
<div class="icon rounded-circle mr-4 bg-danger">
<i class="mdi mdi-cart-outline text-white "></i>
</div>
<div class="media-body align-self-center">
<h4 class="text-primary mb-2">1450</h4>
<p>Total Sales</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-6"> {% include notification.htm %} </div>
<div class="col-xl-6"> {% include to-do-list.htm %}</div>
<div class="col-12">
<!-- Recent Order Table -->
<div class="card card-table-border-none" id="recent-orders">
<div class="card-header justify-content-between">
<h2>Recent Orders</h2>
<div class="date-range-report ">
<span></span>
</div>
</div>
<div class="card-body pt-0 pb-5">
<table class="table card-table table-responsive table-responsive-large" style="width:100%">
<thead>
<tr>
<th>Order ID</th>
<th>Product Name</th>
<th class="d-none d-xl-table-cell">Units</th>
<th class="d-none d-xl-table-cell">Order Date</th>
<th class="d-none d-xl-table-cell">Order Cost</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Coach Swagger</a>
</td>
<td class="d-none d-xl-table-cell">1 Unit</td>
<td class="d-none d-xl-table-cell">Oct 20, 2018</td>
<td class="d-none d-xl-table-cell">$230</td>
<td>
<span class="badge badge-success">Completed</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="" role="button" id="dropdown-recent-order1"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order1">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Toddler Shoes, Gucci Watch</a>
</td>
<td class="d-none d-xl-table-cell">2 Units</td>
<td class="d-none d-xl-table-cell">Nov 15, 2018</td>
<td class="d-none d-xl-table-cell">$550</td>
<td>
<span class="badge badge-warning">Delayed</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-recent-order2"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order2">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Hat Black Suits</a>
</td>
<td class="d-none d-xl-table-cell">1 Unit</td>
<td class="d-none d-xl-table-cell">Nov 18, 2018</td>
<td class="d-none d-xl-table-cell">$325</td>
<td>
<span class="badge badge-warning">On Hold</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-recent-order3"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order3">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Backpack Gents, Swimming Cap Slin</a>
</td>
<td class="d-none d-xl-table-cell">5 Units</td>
<td class="d-none d-xl-table-cell">Dec 13, 2018</td>
<td class="d-none d-xl-table-cell">$200</td>
<td>
<span class="badge badge-success">Completed</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-recent-order4"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order4">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>24541</td>
<td>
<a class="text-dark" href=""> Speed 500 Ignite</a>
</td>
<td class="d-none d-xl-table-cell">1 Unit</td>
<td class="d-none d-xl-table-cell">Dec 23, 2018</td>
<td class="d-none d-xl-table-cell">$150</td>
<td>
<span class="badge badge-danger">Cancelled</span>
</td>
<td class="text-right">
<div class="dropdown show d-inline-block widget-dropdown">
<a class="dropdown-toggle icon-burger-mini" href="#" role="button" id="dropdown-recent-order5"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-display="static"></a>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown-recent-order5">
<li class="dropdown-item">
<a href="#">View</a>
</li>
<li class="dropdown-item">
<a href="#">Remove</a>
</li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade show active" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<div class="mt-5">
<form>
<div class="form-group row mb-6">
<label for="coverImage" class="col-sm-4 col-lg-2 col-form-label">User Image</label>
<div class="col-sm-8 col-lg-10">
<div class="custom-file mb-1">
<input type="file" class="custom-file-input" id="coverImage" required>
<label class="custom-file-label" for="coverImage">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-lg-6">
<div class="form-group">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" value="Albrecht">
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" value="Straub">
</div>
</div>
</div>
<div class="form-group mb-4">
<label for="userName">User name</label>
<input type="text" class="form-control" id="userName" value="Straub">
<span class="d-block mt-1">Accusamus nobis at omnis consequuntur culpa tempore saepe animi.</span>
</div>
<div class="form-group mb-4">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" value="albrecht.straub@gmail.com">
</div>
<div class="form-group mb-4">
<label for="oldPassword">Old password</label>
<input type="password" class="form-control" id="oldPassword">
</div>
<div class="form-group mb-4">
<label for="newPassword">New password</label>
<input type="password" class="form-control" id="newPassword">
</div>
<div class="form-group mb-4">
<label for="conPassword">Confirm password</label>
<input type="password" class="form-control" id="conPassword">
</div>
<div class="d-flex justify-content-end mt-5">
<button type="submit" class="btn btn-primary mb-2 btn-pill">Update Profile</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>