Creative Template design and Source code for Online Tutoring System Web application (Admin side)
Source Code 👇😉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="Stylesheet" href="MyAdmin.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Institute Name</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</head>
<body>
<div class="sidebar">
<div class="logo-details">
<span class="logo_name"> Institute Name</span>
</div>
<span class="institute"> Educational Institute</span> <br>
<ul class="nav-links">
<li>
<a href="AdminDashboard.jsp" class="active">
<i class="fa fa-home"></i>
<span class="links_name">Dashboard</span>
</a>
</li>
<li>
<a href="#"> <i class="fa fa-user"> </i> <span class="links_name"> Staff </span> </a>
</li>
<li>
<a href="#"> <i class="fa fa-users"> </i> <span class="links_name"> Students </span> </a>
</li>
<li>
<a href="#"> <i class="fa fa-graduation-cap"> </i> <span class="links_name"> Course & Exams </span> </a>
</li>
<li>
<a href="ConfirmPayment.jsp"> <i class="fa fa-dollar"> </i> <span class="links_name"> Payments </span> </a>
</li>
<li>
<a href="#"> <i class="fa fa-bell"> </i> <span class="links_name"> Notices & Announcements </span> </a>
</li>
<li>
<a href='#'> <i class="fa fa-calendar"> </i> <span class="links_name"> Timetabe </span> </a>
</li>
<li>
<a href='#'> <i class="fa fa-folder-open"> </i> <span class="links_name"> Library </span> </a>
</li>
<li>
<a href='#'> <i class="fa fa-clipboard"> </i> <span class="links_name"> Enquiries & Feedbacks </span> </a>
</li>
<li>
<a href='#'> <i class="fa fa-edit"> </i> <span class="links_name"> Assignments & Homework </span> </a>
</li>
<li class="log_out">
<a href="#"> <i class="fa fa-power-off"> </i> <span class="links_name"> Log Out </span> </a>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<span class="dashboard">Dashboard</span>
</div>
<div class="search-box">
<input type="text" placeholder="Search...">
<i class='bx bx-search' > <i class='fa fa-search'></i> </i>
</div>
<a href="#" class="notification">
<i class='fa fa-bell'></i>
<span class="badge">3</span>
</a>
<div class="profile-details">
<i class='fa fa-user-circle-o'></i>
<span class="admin_name">Administrator</span>
</div>
</nav>
<div class="home-content">
<div class="overview-boxes">
<div class="box">
<div class="right-side">
<div class="box-topic">No.of Students</div>
<div class="number">750</div>
</div>
<i class='bx bx-cart-alt cart'> <i class='fa fa-users'></i> </i>
</div>
<div class="box">
<div class="right-side">
<div class="box-topic">No.of Staff</div>
<div class="number">75</div>
</div>
<i class='bx bxs-cart-add cart two' > <i class='fa fa-user'></i> </i>
</div>
<div class="box">
<div class="right-side">
<div class="box-topic">Net Income</div>
<div class="number">$750000</div>
</div>
<i class='bx bxs-cart-download cart four' ><i class='fa fa-usd'></i></i>
</div>
<div class="box">
<div class="right-side">
<div class="box-topic">Ratings</div>
<div class="number">4.3</div>
</div>
<i class='bx bx-cart cart three' ><i class="fa fa-star checked"></i></i>
</div>
</div>
<div class="sales-boxes">
<div class="recent-sales box">
<h2>Summary of Net Income</h2> <br>
<br> <br>
<canvas id="myChart" style="width:75%;max-width:600px"></canvas>
</div>
<div class="top-sales box">
<h2>Registered Students in 2022</h2> <br>
<section align="center">
<div class="svg-item">
<svg width="100%" height="100%" viewBox="0 0 40 40" class="donut">
<circle class="donut-hole" cx="20" cy="20" r="15.91549430918954" fill="#fff"></circle>
<circle class="donut-ring" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5"></circle>
<circle class="donut-segment donut-segment-3" cx="20" cy="20" r="15.91549430918954" fill="transparent" stroke-width="3.5" stroke-dasharray="70 40" stroke-dashoffset="25"></circle>
<g class="donut-text donut-text-2">
<text y="50%" transform="translate(0, 2)">
<tspan x="50%" text-anchor="middle" class="donut-percent">70%</tspan>
</text>
</g>
</svg>
</div>
</section>
</div>
</div>
</div>
</section>
<script>
/*line chart*/
var xValues = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var yValues = [370000,425000,550000,570000,610000,620000,600000,650000,700000,715000,730000,750000];
new Chart("myChart", {
type: "line",
data: {
labels: xValues,
datasets: [{
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,192,168,1.0)",
borderColor: "rgba(0,192,163,0.3)",
data: yValues
}]
},
options: {
legend: {display: false},
scales: {
yAxes: [{ticks: {min: 100000, max:900000}}],
}
}
});
</script>
</body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.sidebar{
position: fixed;
height: 100%;
width: 300px;
background: #0A2558;
transition: all 0.5s ease;
}
.sidebar.active{
width: 60px;
}
.sidebar .logo-details{
height: 80px;
display: flex;
align-items: center;
}
.sidebar .logo-details .logo_name{
color: #fff;
font-size: 24px;
font-weight: 500;
}
.notification {
background-color: #555;
color: white;
text-decoration: none;
padding: 10px 14px;
position: relative;
display: inline-block;
border-radius: 50%;
}
.notification .badge {
position: absolute;
top: -10px;
right: -10px;
padding: 2px 9px;
border-radius: 50%;
background-color: red;
color: white;
}
.sidebar .institute{
font-size:20px;
color:white;
font-family: calibri;
top: 55px;
left: 17%;
position: absolute;
}
.sidebar .nav-links{
margin-top: 10px;
}
.sidebar .nav-links li{
position: relative;
list-style: none;
height: 50px;
}
.sidebar .nav-links li a{
height: 100%;
width: 100%;
display: flex;
align-items: center;
text-decoration: none;
transition: all 0.4s ease;
}
.sidebar .nav-links li a.active{
background: #081D45;
}
.sidebar .nav-links li a:hover{
background: #081D45;
}
.sidebar .nav-links li i{
min-width: 60px;
text-align: center;
font-size: 18px;
color: #fff;
}
.sidebar .nav-links li a .links_name{
color: #fff;
font-size: 15px;
font-weight: 400;
white-space: nowrap;
}
.sidebar .nav-links .log_out{
position: absolute;
bottom: 0;
width: 100%;
}
.home-section{
position: relative;
background: #f5f5f5;
min-height: 100vh;
width: calc(100% - 300px);
left: 300px;
transition: all 0.5s ease;
}
.sidebar.active ~ .home-section{
width: calc(100% - 60px);
left: 60px;
}
.home-section nav{
display: flex;
justify-content: space-between;
height: 80px;
background: #fff;
display: flex;
align-items: center;
position: fixed;
width: calc(100% - 300px);
left: 300px;
z-index: 100;
padding: 0 20px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
transition: all 0.5s ease;
}
.sidebar.active ~ .home-section nav{
left: 60px;
width: calc(100% - 60px);
}
.home-section nav .sidebar-button{
display: flex;
align-items: center;
font-size: 24px;
font-weight: 500;
}
nav .sidebar-button i{
font-size: 35px;
margin-right: 10px;
}
.home-section nav .search-box{
position: relative;
height: 50px;
max-width: 550px;
width: 100%;
margin: 0 20px;
}
nav .search-box input{
height: 100%;
width: 100%;
outline: none;
background: #F5F6FA;
border: 2px solid #EFEEF1;
border-radius: 6px;
font-size: 18px;
padding: 0 15px;
}
nav .search-box .bx-search{
position: absolute;
height: 40px;
width: 40px;
background: #2697FF;
right: 5px;
top: 50%;
transform: translateY(-50%);
border-radius: 4px;
line-height: 40px;
text-align: center;
color: #fff;
font-size: 22px;
transition: all 0.4 ease;
}
.home-section nav .profile-details{
display: flex;
align-items: center;
background: #F5F6FA;
border: 2px solid #EFEEF1;
border-radius: 6px;
height: 50px;
min-width: 190px;
padding: 0 15px 0 10px;
}
nav .profile-details .admin_name{
font-size: 15px;
font-weight: 500;
color: #333;
margin: 0 10px;
white-space: nowrap;
}
nav .profile-details i{
font-size: 25px;
color: #333;
}
.home-section .home-content{
position: relative;
padding-top: 104px;
}
.home-content .overview-boxes{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 20px;
margin-bottom: 26px;
}
.overview-boxes .box{
display: flex;
align-items: center;
justify-content: center;
width: calc(100% / 4 - 15px);
background: #fff;
padding: 15px 14px;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
}
.overview-boxes .box-topic{
font-size: 20px;
font-weight: 500;
}
.home-content .box .number{
display: inline-block;
font-size: 35px;
margin-top: -6px;
font-weight: 500;
}
.home-content .box .cart{
display: inline-block;
font-size: 32px;
height: 50px;
width: 50px;
background: #cce5ff;
line-height: 50px;
text-align: center;
color: #66b0ff;
border-radius: 12px;
margin: -15px 0 0 6px;
}
.home-content .box .cart.two{
color: #2BD47D;
background: #C0F2D8;
}
.home-content .box .cart.three{
color: #ffc233;
background: #ffe8b3;
}
.home-content .box .cart.four{
color: #e05260;
background: #f7d4d7;
}
.home-content .total-order{
font-size: 20px;
font-weight: 500;
}
.home-content .sales-boxes{
display: flex;
justify-content: space-between;
/* padding: 0 20px; */
}
/* left box */
.home-content .sales-boxes .recent-sales{
width: 65%;
background: #fff;
padding: 20px 30px;
margin: 0 20px;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
/* Right box */
.home-content .sales-boxes .top-sales{
max-width: 35%;
background: #fff;
padding: 20px 30px;
margin: 0 20px 0 0;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.top-sales .box{
max-height:50%;
}
/* Responsive Media Query */
@media (max-width: 1240px) {
.sidebar{
width: 60px;
}
.sidebar.active{
width: 220px;
}
.home-section{
width: calc(100% - 60px);
left: 60px;
}
.sidebar.active ~ .home-section{
/* width: calc(100% - 220px); */
overflow: hidden;
left: 220px;
}
.home-section nav{
width: calc(100% - 60px);
left: 60px;
}
.sidebar.active ~ .home-section nav{
width: calc(100% - 220px);
left: 220px;
}
}
@media (max-width: 1150px) {
.home-content .sales-boxes{
flex-direction: column;
}
.home-content .sales-boxes .box{
width: 100%;
overflow-x: scroll;
margin-bottom: 30px;
}
.home-content .sales-boxes .top-sales{
margin: 0;
}
}
@media (max-width: 1000px) {
.overview-boxes .box{
width: calc(100% / 2 - 15px);
margin-bottom: 15px;
}
}
@media (max-width: 700px) {
nav .sidebar-button .dashboard,
nav .profile-details .admin_name,
nav .profile-details i{
display: none;
}
.home-section nav .profile-details{
height: 50px;
min-width: 40px;
}
.home-content .sales-boxes .sales-details{
width: 560px;
}
}
@media (max-width: 550px) {
.overview-boxes .box{
width: 100%;
margin-bottom: 15px;
}
.sidebar.active ~ .home-section nav .profile-details{
display: none;
}
}
@media (max-width: 400px) {
.sidebar{
width: 0;
}
.sidebar.active{
width: 60px;
}
.home-section{
width: 100%;
left: 0;
}
.sidebar.active ~ .home-section{
left: 60px;
width: calc(100% - 60px);
}
.home-section nav{
width: 100%;
left: 0;
}
.sidebar.active ~ .home-section nav{
left: 60px;
width: calc(100% - 60px);
}
}
/*drop-down*/
#profit{
width: 25%;
padding: 5px;
font-size: 16px;
border: 2px solid;
border-radius: 16px;
font-family:calibri;
}
.svg-item {
width: 100%;
font-size: 16px;
margin: 0 auto;
animation: donutfade 1s;
}
@media (min-width: 992px) {
.svg-item {
width: 80%;
}
}
.donut-ring {
stroke: #EBEBEB;
}
.donut-segment-3 {
stroke: #ff0080;
animation: donut2 3s;
}
.segment-3{fill:#ff0080;}
.donut-percent {
animation: donutfadelong 1s;
}
@keyframes donut2 {
0% {
stroke-dasharray: 0, 100;
}
100% {
stroke-dasharray: 40, 60;
}
}
.donut-text-2 {
fill: #ff0080;
}
.donut-label {
font-size: 0.28em;
font-weight: 700;
line-height: 1;
fill: #000;
transform: translateY(0.25em);
}
.donut-percent {
font-size: 0.5em;
line-height: 1;
transform: translateY(0.5em);
font-weight: bold;
}
</style>
</html>
Comments
Post a Comment