You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
9.7 KiB
280 lines
9.7 KiB
<!DOCTYPE >
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Admin Panel UI</title>
|
|
<!-- CSS only -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
|
|
integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
|
|
crossorigin="anonymous"
|
|
/>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
<!-- JavaScript and dependencies -->
|
|
<script
|
|
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
|
|
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
<script
|
|
src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"
|
|
integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/"
|
|
crossorigin="anonymous"
|
|
></script>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- Top Nav -->
|
|
<nav class="py-3 px-4 navbar navbar-expand-lg auto-hiding-navbar fixed-top">
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-toggle="collapse"
|
|
data-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse d-flex" id="navbarSupportedContent">
|
|
<form class="search-form d-flex ml-auto mt-1 mb-0">
|
|
<input
|
|
class="form-control mr-sm-2"
|
|
type="search"
|
|
placeholder="Search"
|
|
aria-label="Search"
|
|
/>
|
|
<button class="btn btn-outline-primary my-2 my-sm-0" type="submit">
|
|
Search
|
|
</button>
|
|
</form>
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item dropdown">
|
|
<a
|
|
class="nav-link dropdown-toggle"
|
|
href="#"
|
|
id="navbarDropdown"
|
|
role="button"
|
|
data-toggle="dropdown"
|
|
aria-haspopup="true"
|
|
aria-expanded="false"
|
|
>
|
|
Hello Admin
|
|
</a>
|
|
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
|
|
<a class="dropdown-item" href="#">User Settings</a>
|
|
<a class="dropdown-item" href="#">Create New Account</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">Logout</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
<!-- End Top Nav -->
|
|
<div class="row">
|
|
<!-- Sidebar -->
|
|
<div class="col-1">
|
|
<nav id="sidebar" class="col sidebar">
|
|
<a class="navbar-brand" href="#">
|
|
<img src="./assets/logo.png" alt="logo" class="logo" />
|
|
</a>
|
|
<ul class="nav flex-column vertical-nav">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="#">
|
|
<svg
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 16 16"
|
|
class="bi bi-house-door-fill"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M6.5 10.995V14.5a.5.5 0 0 1-.5.5H2a.5.5 0 0 1-.5-.5v-7a.5.5 0 0 1 .146-.354l6-6a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 .146.354v7a.5.5 0 0 1-.5.5h-4a.5.5 0 0 1-.5-.5V11c0-.25-.25-.5-.5-.5H7c-.25 0-.5.25-.5.495z"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M13 2.5V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<svg
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 16 16"
|
|
class="bi bi-file-post"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M4 1h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2zm0 1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H4z"
|
|
/>
|
|
<path
|
|
d="M4 5.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-7a.5.5 0 0 1-.5-.5v-7z"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M4 3.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<svg
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 16 16"
|
|
class="bi bi-pencil"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M11.293 1.293a1 1 0 0 1 1.414 0l2 2a1 1 0 0 1 0 1.414l-9 9a1 1 0 0 1-.39.242l-3 1a1 1 0 0 1-1.266-1.265l1-3a1 1 0 0 1 .242-.391l9-9zM12 2l2 2-9 9-3 1 1-3 9-9z"
|
|
/>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M12.146 6.354l-2.5-2.5.708-.708 2.5 2.5-.707.708zM3 10v.5a.5.5 0 0 0 .5.5H4v.5a.5.5 0 0 0 .5.5H5v.5a.5.5 0 0 0 .5.5H6v-1.5a.5.5 0 0 0-.5-.5H5v-.5a.5.5 0 0 0-.5-.5H3z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<svg
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 16 16"
|
|
class="bi bi-bar-chart-line-fill"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect width="4" height="5" x="1" y="10" rx="1" />
|
|
<rect width="4" height="9" x="6" y="6" rx="1" />
|
|
<rect width="4" height="14" x="11" y="1" rx="1" />
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M0 14.5a.5.5 0 0 1 .5-.5h15a.5.5 0 0 1 0 1H.5a.5.5 0 0 1-.5-.5z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#">
|
|
<svg
|
|
width="1em"
|
|
height="1em"
|
|
viewBox="0 0 16 16"
|
|
class="bi bi-chat-left-dots"
|
|
fill="currentColor"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M14 1H2a1 1 0 0 0-1 1v11.586l2-2A2 2 0 0 1 4.414 11H14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"
|
|
/>
|
|
<path
|
|
d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"
|
|
/>
|
|
</svg>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
<!-- End Sidebar -->
|
|
</div>
|
|
<div class="main col-11">
|
|
<div class="row first-row">
|
|
<div class="col-4">
|
|
<section id="recently-posted">
|
|
<div class="card">
|
|
<div class="card-header">Recently Published Posts</div>
|
|
<ul class="list-group list-group-flush">
|
|
<li class="list-group-item">
|
|
<div class="row g-0">
|
|
<div class="col-md-3">
|
|
<img
|
|
src="./assets/post1.jpeg"
|
|
alt="Post One Photo"
|
|
class="img-fluid rounded-lg"
|
|
/>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="card-body">
|
|
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
|
|
<p class="card-text">
|
|
This is a wider card with supporting text below as a
|
|
natural lead-in to additional content.
|
|
</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">Added 3 days ago</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="row g-0">
|
|
<div class="col-md-3">
|
|
<img
|
|
src="./assets/post1.jpeg"
|
|
alt="Post One Photo"
|
|
class="img-fluid rounded-lg"
|
|
/>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="card-body">
|
|
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
|
|
<p class="card-text">
|
|
This is a wider card with supporting text below as a
|
|
natural lead-in to additional content.
|
|
</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">Added 3 days ago</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="list-group-item">
|
|
<div class="row g-0">
|
|
<div class="col-md-3">
|
|
<img
|
|
src="./assets/post1.jpeg"
|
|
alt="Post One Photo"
|
|
class="img-fluid rounded-lg"
|
|
/>
|
|
</div>
|
|
<div class="col-md-9">
|
|
<div class="card-body">
|
|
<h6 class="card-title">Lorem ipsum dolor sit amet...</h6>
|
|
<p class="card-text">
|
|
This is a wider card with supporting text below as a
|
|
natural lead-in to additional content.
|
|
</p>
|
|
<p class="card-text">
|
|
<small class="text-muted">Added 3 days ago</small>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|