Permalink
Co-authored-by: zhanjiang xy <zhanjiang xy>
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<title>Admin - Free Bulma template</title> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> | |
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet"> | |
<!-- Bulma Version 0.9.0--> | |
<link rel="stylesheet" href="https://unpkg.com/bulma@0.9.0/css/bulma.min.css" /> | |
<link rel="stylesheet" type="text/css" href="../css/admin.css"> | |
</head> | |
<body> | |
<!-- START NAV --> | |
<nav class="navbar is-white"> | |
<div class="container"> | |
<div class="navbar-brand"> | |
<a class="navbar-item brand-text" href="../index.html"> | |
Bulma Admin | |
</a> | |
<div class="navbar-burger burger" data-target="navMenu"> | |
<span></span> | |
<span></span> | |
<span></span> | |
</div> | |
</div> | |
<div id="navMenu" class="navbar-menu"> | |
<div class="navbar-start"> | |
<a class="navbar-item" href="admin.html"> | |
Home | |
</a> | |
<a class="navbar-item" href="admin.html"> | |
Orders | |
</a> | |
<a class="navbar-item" href="admin.html"> | |
Payments | |
</a> | |
<a class="navbar-item" href="admin.html"> | |
Exceptions | |
</a> | |
<a class="navbar-item" href="admin.html"> | |
Reports | |
</a> | |
</div> | |
</div> | |
</div> | |
</nav> | |
<!-- END NAV --> | |
<div class="container"> | |
<div class="columns"> | |
<div class="column is-3 "> | |
<aside class="menu is-hidden-mobile"> | |
<p class="menu-label"> | |
General | |
</p> | |
<ul class="menu-list"> | |
<li><a class="is-active">Dashboard</a></li> | |
<li><a>Customers</a></li> | |
<li><a>Other</a></li> | |
</ul> | |
<p class="menu-label"> | |
Administration | |
</p> | |
<ul class="menu-list"> | |
<li><a>Team Settings</a></li> | |
<li> | |
<a>Manage Your Team</a> | |
<ul> | |
<li><a>Members</a></li> | |
<li><a>Plugins</a></li> | |
<li><a>Add a member</a></li> | |
<li><a>Remove a member</a></li> | |
</ul> | |
</li> | |
<li><a>Invitations</a></li> | |
<li><a>Cloud Storage Environment Settings</a></li> | |
<li><a>Authentication</a></li> | |
<li><a>Payments</a></li> | |
</ul> | |
<p class="menu-label"> | |
Transactions | |
</p> | |
<ul class="menu-list"> | |
<li><a>Payments</a></li> | |
<li><a>Transfers</a></li> | |
<li><a>Balance</a></li> | |
<li><a>Reports</a></li> | |
</ul> | |
</aside> | |
</div> | |
<div class="column is-9"> | |
<nav class="breadcrumb" aria-label="breadcrumbs"> | |
<ul> | |
<li><a href="../">Bulma</a></li> | |
<li><a href="../">Templates</a></li> | |
<li><a href="../">Examples</a></li> | |
<li class="is-active"><a href="#" aria-current="page">Admin</a></li> | |
</ul> | |
</nav> | |
<section class="hero is-info welcome is-small"> | |
<div class="hero-body"> | |
<div class="container"> | |
<h1 class="title"> | |
Hello, Admin. | |
</h1> | |
<h2 class="subtitle"> | |
I hope you are having a great day! | |
</h2> | |
</div> | |
</div> | |
</section> | |
<section class="info-tiles"> | |
<div class="tile is-ancestor has-text-centered"> | |
<div class="tile is-parent"> | |
<article class="tile is-child box"> | |
<p class="title">439k</p> | |
<p class="subtitle">Users</p> | |
</article> | |
</div> | |
<div class="tile is-parent"> | |
<article class="tile is-child box"> | |
<p class="title">59k</p> | |
<p class="subtitle">Products</p> | |
</article> | |
</div> | |
<div class="tile is-parent"> | |
<article class="tile is-child box"> | |
<p class="title">3.4k</p> | |
<p class="subtitle">Open Orders</p> | |
</article> | |
</div> | |
<div class="tile is-parent"> | |
<article class="tile is-child box"> | |
<p class="title">19</p> | |
<p class="subtitle">Exceptions</p> | |
</article> | |
</div> | |
</div> | |
</section> | |
<div class="columns"> | |
<div class="column is-6"> | |
<div class="card events-card"> | |
<header class="card-header"> | |
<p class="card-header-title"> | |
Events | |
</p> | |
<a href="#" class="card-header-icon" aria-label="more options"> | |
<span class="icon"> | |
<i class="fa fa-angle-down" aria-hidden="true"></i> | |
</span> | |
</a> | |
</header> | |
<div class="card-table"> | |
<div class="content"> | |
<table class="table is-fullwidth is-striped"> | |
<tbody> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
<tr> | |
<td width="5%"><i class="fa fa-bell-o"></i></td> | |
<td>Lorum ipsum dolem aire</td> | |
<td class="level-right"><a class="button is-small is-primary" href="#">Action</a></td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
<footer class="card-footer"> | |
<a href="#" class="card-footer-item">View All</a> | |
</footer> | |
</div> | |
</div> | |
<div class="column is-6"> | |
<div class="card"> | |
<header class="card-header"> | |
<p class="card-header-title"> | |
Inventory Search | |
</p> | |
<a href="#" class="card-header-icon" aria-label="more options"> | |
<span class="icon"> | |
<i class="fa fa-angle-down" aria-hidden="true"></i> | |
</span> | |
</a> | |
</header> | |
<div class="card-content"> | |
<div class="content"> | |
<div class="control has-icons-left has-icons-right"> | |
<input class="input is-large" type="text" placeholder=""> | |
<span class="icon is-medium is-left"> | |
<i class="fa fa-search"></i> | |
</span> | |
<span class="icon is-medium is-right"> | |
<i class="fa fa-check"></i> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="card"> | |
<header class="card-header"> | |
<p class="card-header-title"> | |
User Search | |
</p> | |
<a href="#" class="card-header-icon" aria-label="more options"> | |
<span class="icon"> | |
<i class="fa fa-angle-down" aria-hidden="true"></i> | |
</span> | |
</a> | |
</header> | |
<div class="card-content"> | |
<div class="content"> | |
<div class="control has-icons-left has-icons-right"> | |
<input class="input is-large" type="text" placeholder=""> | |
<span class="icon is-medium is-left"> | |
<i class="fa fa-search"></i> | |
</span> | |
<span class="icon is-medium is-right"> | |
<i class="fa fa-check"></i> | |
</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<script async type="text/javascript" src="../js/bulma.js"></script> | |
</body> | |
</html> |