Scribd
Upload
79 views6 pages

Admin Dashboard

The document is an HTML code for an admin dashboard interface. It includes navigation menus on the left side for dashboard, users, statistics, and reports. The main section displays quick stats like daily, weekly, monthly, and yearly visitor counts. Charts also show visitor locations and data in tables.

Uploaded by

C - k
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
79 views6 pages

Admin Dashboard

The document is an HTML code for an admin dashboard interface. It includes navigation menus on the left side for dashboard, users, statistics, and reports. The main section displays quick stats like daily, weekly, monthly, and yearly visitor counts. Charts also show visitor locations and data in tables.

Uploaded by

C - k
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src="https://kit.fontawesome.com/98dfc436c4.js"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row g-0">
<nav class="col-2 bg-light pe-3">
<h1 class="h4 text-center text-primary py-3">
<i class="fas fa-ghost me-2"></i>
<span class="d-none d-lg-inline">Ghost Admin</span>
</h1>

<div class="list-group text-center text-lg-start">


<span class="list-group-item disabled d-none d-lg-block">
<small>CONTROLS</small>
</span>
<a href="#" class="list-group-item list-group-item-action
active">
<i class="fas fa-home"></i>
<span class="d-none d-lg-inline">Dashboard</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fas fa-users"></i>
<span class="d-none d-lg-inline">Users</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fas fa-chart-line"></i>
<span class="d-none d-lg-inline">Statistics</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fas fa-flag"></i>
<span class="d-none d-lg-inline">Reports</span>
</a>
</div>

<div class="list-group mt-4 text-center text-lg-start">


<span class="list-group-item d-none d-lg-block disabled">
<small>ACTIONS</small>
</span>
<a href="#" class="list-group-item list-group-item-action">
<i class="fas fa-user"></i>
<span class="d-none d-lg-inline">New User</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fas fa-edit"></i>
<span class="d-none d-lg-inline">Update Data</span>
</a>
<a href="#" class="list-group-item list-group-item-action">
<i class="fas fa-calendar-alt"></i>
<span class="d-none d-lg-inline">Add Event</span>
</a>
</div>
</nav>

<main class="col-10 bg-secondary">


<div class="container-fluid">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="flex-fill"></div>

<div class="navbar nav">


<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle"
data-bs-toggle="dropdown">
<i class="fas fa-user-circle"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#" class="dropdown-item">User
Profile</a></li>
<li><a href="#" class="dropdown-
item">Logout</a></li>
</ul>
</li>

<li class="nav-item">
<a href="#" class="nav-link">
<i class="fas fa-cog"></i>
</a>
</li>
</div>
</nav>
</div>

<div class="container-fluid mt-3 p-4">

<div class="row">
<div class="col">
<div class="alert alert-info">
The New version of admin dashboard is released.
<a href="#"><i class="fas
fadownload"></i>Download Now!</a>
</div>
</div>
</div>

<div class="row flex-column flex-lg-row">


<h2 class="h6 text-white-50">QUICKS STAT</h2>
<div class="col">
<div class="card mb-3">
<div class="card-body">
<h2 class="card-title h2">1,203</h2>
<span class="text-success">
<i class="fas fa-chart-line"></i>
Daily Visitors
</span>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3">
<div class="card-body">
<h2 class="card-tilte h2">8,431</h2>
<span class="text-success">
<i class="fas fa-chart-line"></i>
Weekly Visitors
</span>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3">
<div class="card-body">
<h2 class="card-title h2">35,680</h2>
<span class="text-success">
<i class="fas fa-chart-line"></i>
Monthly Visitors
</span>
</div>
</div>
</div>
<div class="col">
<div class="card mb-3">
<div class="card-body">
<h2 class="card-title h2">103,204</h2>
<span class="text-success">
<i class="fas fa-chart-line"></i>
Yearly Visitors
</span>
</div>
</div>
</div>
</div>

<div class="row flex-column flex-lg-row mt-4">


<div class="col">
<h2 class="h6 text-white-50">LOCATION</h2>

<div class="card mb-3" style="height: 280px;">


<div class="card-body">
<small class="text-muted">Regional</small>
<div class="progress mt-2 mb-4"
style="height: 5px;">
<div class="progress-bar bg-success w-
75"></div>
</div>

<small class="text-muted">Global</small>
<div class="progress mt-2 mb-4"
style="height: 5px;">
<div class="progress-bar bg-primary w-
50"></div>
</div>

<small class="text-muted">Local</small>
<div class="progress mt-2 mb-4"
style="height: 5px;">
<div class="progress-bar bg-danger w-
75"></div>
</div>

<small class="text-muted">Internal</small>
<div class="progress mt-2 mb-4"
style="height: 5px;">
<div class="progress-bar bg-info w-
25"></div>
</div>
</div>
</div>
</div>

<div class="col">
<h2 class="h6 text-white-50">DATA</h2>
<div class="card mb-3" style="height: 280px;">
<div class="text-end">
<button class="btn btn-sm btn-outline-
secondary">
<i class="fas fa-search"></i>
</button>
<button class="btn btn-sm btn-outline-
secondary">
<i class="fas fa-sort-amount-up"></i>
</button>
<button class="btn btn-sm btn-outline-
secondary">
<i class="fas fa-filter"></i>
</button>
</div>

<table class="table text-center">


<tr>
<th>ID</th>
<th>Age Group</th>
<th>Data</th>
<th>Progress</th>
</tr>
<tr>
<td>1</td>
<td>20-30</td>
<td>19%</td>
<td><i class="fas fa-chart-pie"></i></td>
</tr>
<tr>
<td>2</td>
<td>30-40</td>
<td>40%</td>
<td><i class="fas fa-chart-bar"></i></td>
</tr>
<tr>
<td>3</td>
<td>40-50</td>
<td>20%</td>
<td><i class="fas fa-chart-
line"></i></td>
</tr>
<tr>
<td>4</td>
<td>>50</td>
<td>11%</td>
<td><i class="fas fa-chart-pie"></i></td>
</tr>
</table>
</div>
</div>
</div>

</div>
</main>
<footer>
<div class="text-center text-muted py-4">
&copy; Copyright 2022
</div>
</footer>
</div>
</div>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js
" integrity="sha384-
MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
Admin Dashboard sample project pdf file.

You might also like