Skip to content

Instantly share code, notes, and snippets.

@renanlido
Last active May 4, 2019 01:20
Show Gist options
  • Save renanlido/931ad5d9e32739991c1efebab64efee5 to your computer and use it in GitHub Desktop.
Save renanlido/931ad5d9e32739991c1efebab64efee5 to your computer and use it in GitHub Desktop.
Codigo Fonte caixa
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="http://localhost/projects/caixa/assets/img/favicon.ico">
<title>Template de dashboard, usando Bootstrap.</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- Estilos customizados para esse template -->
<link href="http://localhost/projects/caixa/assets/css/estilos.css" rel="stylesheet">
<!-- Principal JavaScript do Bootstrap-->
<script src="http://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="http://localhost/projects/caixa/assets/js/jquery-3.3.1.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://localhost/projects/caixa/">
<img src="http://localhost/projects/caixa/assets/img/LOGO.png" alt="Logo" height="30px">
Ateliê Unhas Perfeitas
</a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="#">Sair</a>
</li>
</ul>
</nav>
<div class="container-fluid">
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column" id="navbar">
<li class="nav-item">
<a class="nav-link active" href="http://localhost/projects/caixa/">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(atual)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/projects/caixa/lancamentos">
<span data-feather="file"></span>
Lancamentos
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Produtos
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/projects/caixa/cliente">
<span data-feather="users"></span>
Clientes
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Relatórios
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrações
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Relatórios salvos</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Neste mês
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Último trimestre
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Engajamento social
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Vendas do final de ano
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Compartilhar</button>
<button class="btn btn-sm btn-outline-secondary">Exportar</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span data-feather="calendar"></span>
Métricas
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Alguma ação</a>
<a class="dropdown-item" href="#">Outra ação</a>
<a class="dropdown-item" href="#">Alguma coisa aqui</a>
</div>
</button>
</div>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
<h2>Título da seção</h2>
<div class="table-responsive">
<table class="table table-striped table-sm">
<thead>
<tr>
<th></th>
<th>Data</th>
<th>Plano de Contas</th>
<th>Conta</th>
<th>Descrição</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>02/05/2019</td>
<td>
Despesas com Produtos </td>
<td>
Compra de Produtos </td>
<td>Compra Piubella</td>
<td>3.126,50</td>
</tr>
<tr>
<td>2</td>
<td>03/05/2019</td>
<td>
Despesas com Produtos </td>
<td>
Compra de Produtos </td>
<td>Compra Produto</td>
<td>123,75</td>
</tr>
</tbody>
</table>
</div>
</main>
<!--===============================-->
<!-- Gráficos -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>
<script>
var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
type: 'line',
data: {
labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],
datasets: [{
data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],
lineTension: 0,
backgroundColor: 'transparent',
borderColor: '#007bff',
borderWidth: 4,
pointBackgroundColor: '#007bff'
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero: false
}
}]
},
legend: {
display: false,
}
}
});
</script>
</div>
</div>
<!-- Ícones -->
<script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
<script>
feather.replace()
</script>
<script>
$( '#navbar .nav-item' ).on( 'click', function () {
$( '#navbar .nav-item' ).find( 'a.active' ).removeClass( 'active' );
$( this ).parent( 'a' ).addClass( 'active' );
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment