pablinux/APP-SIGMA-WEB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Desplegando App

Browse Source
This commit is contained in:
PABLINUX
2022-02-25 13:15:51 -05:00
parent 7e6467e75d
commit f12b75b26d
1182 changed files with 166158 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/views/api_json.ejs Normal file
View File

@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Api JSON</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script type="text/javascript">
function fechaActual(){
var fecha = new Date(); //Fecha actual
var mes = fecha.getMonth()+1; //obteniendo mes
var dia = fecha.getDate(); //obteniendo dia
var ano = fecha.getFullYear(); //obteniendo año
if(dia<10){
dia='0'+dia; //agrega cero si el menor de 10
}
if(mes<10){
mes='0'+mes //agrega cero si el menor de 10
}
document.getElementById('reg').value=ano+"-"+mes+"-"+dia;
}
window.onload = function(){
var fecha = new Date(); //Fecha actual
var mes = fecha.getMonth()+1; //obteniendo mes
var dia = fecha.getDate(); //obteniendo dia
var ano = fecha.getFullYear(); //obteniendo año
if(dia<10)
dia='0'+dia; //agrega cero si el menor de 10
if(mes<10)
mes='0'+mes //agrega cero si el menor de 10
document.getElementById('reg').value=ano+"-"+mes+"-"+dia;
}
</script>
</head>
<body onload="fechaActual()">
<nav class="navbar navbar-dark bg-dark">
<a href="" class="navbar-brand mx-auto">Api Json</a>
</nav>
<div class="row">
<input type="text" name="" value="">
<input type="button" name="ClienteJson" value="Cliente Json">
</div>
<div class="row"></div>
<div class="row"></div>
</body>
</html>

250
src/views/app_pedidos.ejs Normal file
View File

@@ -0,0 +1,250 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="google" content="notranslate" />
<title>SIGMA APP</title>
<!--Import Icono web-sigma-->
<link rel="shortcut icon" href="./img/favicon_sigma/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" sizes="180x180" href="./img/favicon_sigma/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon_sigma/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon_sigma/favicon-16x16.png">
<link rel="manifest" href="./img/favicon_sigma/site.webmanifest">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.0.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"/>
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"type="text/css">
<link href="http://xsystem.ddns.net/app/css/app_sigma_stilos.css" rel="stylesheet" type="text/css">
<link href="http://xsystem.ddns.net/app/css/app_sigmaDetallePedidos.css" rel="stylesheet" type="text/css">
<link href="http://xsystem.ddns.net/app/css/animate.css" rel="stylesheet" />
</head>
<body>
<div class="container-fluid">
<!---***********MENU LATERAL*********--->
<nav class="blue">
<div class="nav-wrapper">
<a href="#" class="brand-logo">SIGMA <span id="titulo">PRODUCTOS</span></a>
<a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('PRODUCTOS')">
<i class="material-icons left">archive</i><span>Productos</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('PEDIDOS')">
<i class="material-icons left">add_shopping_cart</i><span id="cart">Pedidos</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('CLIENTES')">
<i class="material-icons left">account_circle</i><span id="cart">Clientes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('ORDENES')">
<i class="material-icons left">chat_bubble_outline</i><span id="cart">Ordenes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('CONFIGURACION')">
<i class="material-icons left">build</i><span id="cart">Configuracion</span>
</a>
</li>
</ul>
</div>
</nav>
<!---************MENU BAR SIDE_NAV***********--->
<ul id="slide-out" class="sidenav">
<li>
<div class="user-view">
<div class="background">
<img src="./img/favicon_sigma/fondoPara_App.png" />
</div>
<a href="#user"><img class="circle" src="./img/favicon_sigma/LOGO_sigma64.png" /></a>
<a href="#name"><span class="black-text name">Pablinux</span></a>
<a href="#email"><span class="white-text email sideBar_mail">pablinux.siax@gmail.com</span></a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('PRODUCTOS')">
<i class="material-icons left">archive</i><span>Productos</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('PEDIDOS')">
<i class="material-icons left">add_shopping_cart</i><span id="cart">Pedidos</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('CLIENTES')">
<i class="material-icons left">account_circle</i><span id="cart">Clientes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('ORDENES')">
<i class="material-icons left">chat_bubble_outline</i><span id="cart">Ordenes</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#" onclick="addTitulo('CONFIGURACION')">
<i class="material-icons left">build</i><span id="cart">Configuracion</span>
</a>
</li>
</ul>
<!---************MAIN***********--->
<main role="main" class="">
<div class="row">
<div class="col s12" id="caja_busqueda">
<div class="input-field inline col s8 m9 l10">
<input id="txt_busq" placeholder="Escribe aqui tu busqueda" type="text" class="validate" onkeyup="busqueda(event)">
</div>
<div class="col s4 m3 l2" id="bt_busq" onclick="consulta()">
<a class="waves-effect waves-light btn right">
<i class="material-icons left">youtube_searched_for</i>Buscar
</a>
</div>
</div>
<!---Contenido o Seccion--->
</div>
<div class="" id="contenido">
<!---Contenido AUTOGENERAADO--->
</div>
<div class="boxCreaCli">
<h4>Crear Cliente</h4>
<hr>
<div class="form-group col-md-4">
<label for="txtNombres">Nombres</label>
<input type="text" class="form-control" id="txtNombres">
</div>
<br>
<div class="form-group col-md-4">
<label for="txtCedula">Cedula</label>
<input type="number" class="form-control" id="txtCedula">
<label for="txtTelefono">Telefono</label>
<input type="number" class="form-control" id="txtTelefono">
</div>
<br>
<div class="form-group col-md-4">
<label for="txtDireccion">Direccion</label>
<input type="text" class="form-control" id="txtDireccion">
<label for="txtEmail">Email</label>
<input type="email" class="form-control" id="txtEmail">
</div>
<br>
<button class="btn" id="bt_guardaCliente"> <i class="material-icons left">save</i>Guardar</button>
<button class="btn" id="bt_cancelaCliente"> <i class="material-icons left">cancel</i>Cancelar</button>
</div><div class="row" id="panel_origen_pedidos"></div><div id="detalles_pedidos"><ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">
<i class="material-icons">room</i><strong>Origen:</strong>
<span id="head_pedidOrigen" class="detPed_subtitulos">Seleccione Origen</span>
</div>
<div class="collapsible-body">
<div id="conten_pedidoOrigen" class="row">
</div>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">person</i><strong>Cliente:</strong>
<span id="head_pedidClient" class="detPed_subtitulos">Seleccione Cliente</span>
</div>
<div class="collapsible-body">
<div id="conten_pedidoCliente">
<strong>RUC/CI:</strong><span id="pedidClient_ruc"></span><br/>
<strong>Telef:</strong><span id="pedidClient_tel"></span><br/>
<strong>Email:</strong><span id="pedidClient_mail"></span><br/>
<strong>Direccion:</strong><span id="pedidClient_dir"></span><br>
<strong>Ciudad:</strong><br>
<strong>Tipo Cliente:</strong>
</div>
</div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">format_list_numbered</i>
<strong>Detalle Pedido:</strong>
<span id="carrito_detallePedido" class="detPed_subtitulos">10</span>
</div>
<div class="collapsible-body"> <div id="contenido_detellePedidClient"></div> </div>
</li>
<li>
<div class="collapsible-header">
<i class="material-icons">attach_money</i
><strong>Importe y Valores</strong>
<span id="total_pedido" class="detPed_subtitulos">$100.00</span>
</div>
<div class="collapsible-body row">
<div id="DetPed_ImporteSubtitulo" class="col s8 m8 l8">
<strong>Sub Total Ventas 12%:</strong><br/>
<strong>Sub Total Ventas 0%:</strong><br/>
<strong>Sub Total:</strong><br/>
<strong>Descuento:</strong><br/>
<strong>Sub Total Neto:</strong><br/>
<strong>Sub Total IVA 12%:</strong><br/>
<strong>Sub Total IVA 0%:</strong><br/>
<strong>Sub Total IVA:</strong><br/>
<strong class="total">TOTAL:</strong>
</div>
<div id="DetPed_ImporteValores" class="col s4 m4 l4">
$<span id="DetPed_vetasIva12">0.00</span><br />
$<span id="DetPed_vetasIva0">0.00</span><br />
$<span id="DetPed_subTotal">0.00</span><br />
$<span id="DetPed_descueto">0.00</span><br />
$<span id="DetPed_subTotalNeto">0.00</span><br />
$<span id="DetPed_totalIva12">0.00</span><br/>
$<span id="DetPed_totalIva0">0.00</span><br/>
<span id="DetPed_totalIva">0.00</span><br/>
<span id="DetPed_total" class="total"></span>
</div>
</div>
</li>
<li>
<div class="collapsible-header row">
<button class="btn col s6" onClick="limpiaPanel()"><i class="material-icons">control_point</i>Nuevo Pedido</button>
<button class="btn col s6" onClick="envioPedidos()"><i class="material-icons">cloud_upload</i>Enviar Pedido</button>
</div>
</li>
</ul> </div>
</main>
</div>
<div class="blue lighten-5" id="footerPrecios"> <div id="clinteBox">
<div id="clinteTitulo"><strong>Selecione Cliente</strong></div>
<div id="clinteNom"></div> </div>
<div id="ValorTotal"><strong>Total</strong> $0.00</div>
</div>
<!--footer class="page-footer">
<button data-target="modal1" class="btn modal-trigger">Modal</button>
<div class="footer-copyright">
<div class="container">
© 2014 Copyright Text
<a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://xsystem.ddns.net/app/js/app_sigma_controlPC.js"></script>
<script src="https://xsystem.ddns.net/app/js/app_sigma_modal.js"></script>
</body>
</html>

62
src/views/clienteNuevo.ejs Normal file
View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clientes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script type="text/javascript">
function fechaActual(){
var fecha = new Date(); //Fecha actual
var mes = fecha.getMonth()+1; //obteniendo mes
var dia = fecha.getDate(); //obteniendo dia
var ano = fecha.getFullYear(); //obteniendo año
if(dia<10){
dia='0'+dia; //agrega cero si el menor de 10
}
if(mes<10){
mes='0'+mes //agrega cero si el menor de 10
}
document.getElementById('reg').value=ano+"-"+mes+"-"+dia;
}
window.onload = function(){
var fecha = new Date(); //Fecha actual
var mes = fecha.getMonth()+1; //obteniendo mes
var dia = fecha.getDate(); //obteniendo dia
var ano = fecha.getFullYear(); //obteniendo año
if(dia<10)
dia='0'+dia; //agrega cero si el menor de 10
if(mes<10)
mes='0'+mes //agrega cero si el menor de 10
document.getElementById('reg').value=ano+"-"+mes+"-"+dia;
}
</script>
</head>
<body onload="fechaActual()">
<nav class="navbar navbar-dark bg-dark">
<a href="" class="navbar-brand mx-auto">Clientes</a>
</nav>
<div class="row">
<div class="col-xl mt-4 card">
<form class="card-body" action="/addCliente" method="post">
<h3 class="card-title">Nuevo Cliente</h3>
<div class="form-group">
<input name="client_nombre" type="text" class="form-control" placeholder="Nombre Cliente">
</div>
<div class="form-group">
<input name="client_rucCed" type="text" class="form-control" placeholder="Cedula/RUC">
</div>
<div class="form-group">
<input name="client_direccion" type="text" class="form-control" placeholder="Direccion">
</div>
<div class="form-group">
<input name="client_fechaReg" type="datetime" class="form-control" id="reg">
</div>
<input type="submit" class="btn btn-primary" value="Guardar">
<a href="/" class="btn btn-primary">Cancelar</a>
</form>
</div>
</div>
</body>
</html>

34
src/views/clientesEdit.ejs Normal file
View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clientes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<a href="" class="navbar-brand mx-auto">Clientes</a>
</nav>
<div class="row">
<div class="col-xl mt-4 card">
<form class="card-body" action="/actCliente/<%= data.client_id %>" method="post">
<h3 class="card-title">Modificar Cliente</h3>
<div class="form-group">
<input name="client_nombre" type="text" class="form-control" value="<%= data.client_nombre %>">
</div>
<div class="form-group">
<input name="client_rucCed" type="text" class="form-control" value="<%= data.client_rucCed %>">
</div>
<div class="form-group">
<input name="client_direccion" type="text" class="form-control" value="<%= data.client_direccion %>">
</div>
<input type="submit" class="btn btn-primary" value="Guardar">
<a href="/" class="btn btn-primary">Cancelar</a>
</form>
</div>
</div>
</body>
</html>

80
src/views/clientesV.ejs Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clientes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
//var busq = document.getElementById('txtBuscar');
function verCliente(){
var busq = document.getElementById('txtBuscar');
//alert("Cliente: "+busq.value);
window.location.href = "/buscarClienteForm/"+busq.value;
}
function verClienteJson(){
var busq = document.getElementById('txtBuscar');
window.location.href = "/clientJson/"+busq.value;
}
var leeTecld = function () {
var txt = document.getElementById('txtBuscar');
txt.addEventListener('keypress',eventHandler,false);
function eventHandler(event){
console.log(event.keyCode);
console.log(txt.value);
//verCliente(txt.value);
}
};
window.addEventListener('load',leeTecld,false);
</script>
</head>
<body>
<div class="row ">
<form class="form-inline" action="/buscarClienteForm">
<div class="input-group ">
<span class="input-group-addon fa-search">Buscar Cliente</span>
<input type="text" name="cl_busqueda" value="" class="form-control" id="txtBuscar">
<input type="button" class="btn btn-primary" onclick="verCliente()" value="Ver Cliente">
<input type="button" class="btn btn-primary" onclick="verClienteJson()" value="Ver Cliente JSON">
</div>
<!--a href="/clientJson/1703151421001" class="btn btn-primary">Ver Json</a-->
<a href="/addClienteForm" class="btn btn-primary">Nuevo Cliente</a>
</form>
</div>
<div class="row">
<div class="col-xl mt-4 text-center">
<table class="table table-striped table-bordered">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>C.I</th>
<th>Direccion</th>
<th>Accion</th>
</tr>
<% for (var i = 0; i < data.length; i ++) { %>
<tr>
<td><%= data[i].client_id %></td>
<td><%= data[i].client_nombre %></td>
<td><%= data[i].client_rucCed %></td>
<td><%= data[i].client_direccion %></td>
<td>
<a href="/eliminarCliente/<%= data[i].client_id %>">Eliminar</a><br>
<a href="/actCliente/<%= data[i].client_id %>">Modificar</a>
</td>
</tr>
<% } %>
</table>
</div>
</div>
</body>
</html>

73
src/views/menu.ejs Normal file
View File

@@ -0,0 +1,73 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Clientes</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="text/javascript">
var busq = document.getElementById('txtBuscar');
function verCliente(){
window.location.href = "/buscarClienteForm/"+busq.value;
}
var leeTecld = function () {
var txt = document.getElementById('txtBuscar');
txt.addEventListener('keypress',eventHandler,false);
function eventHandler(event){
console.log(event.keyCode);
console.log(txt.value);
//verCliente(txt.value);
}
};
window.addEventListener('load',leeTecld,false);
</script>
</head>
<body>
<div class="row ">
<form class="form-inline" action="/buscarClienteForm">
<div class="input-group ">
<span class="input-group-addon fa-search">Buscar Cliente</span>
<input type="text" name="cl_busqueda" value="" class="form-control" id="txtBuscar">
<input type="button" class="btn btn-primary" onclick="pulsaTecla()" value="Ver Cliente">
</div>
<a href="/clientJson/1703151421001" class="btn btn-primary">Ver Json</a>
<a href="/addClienteForm" class="btn btn-primary">Nuevo Cliente</a>
</form>
</div>
<div class="row">
<div class="col-xl mt-4 text-center">
<table class="table table-striped table-bordered">
<tr>
<th>ID</th>
<th>Nombre</th>
<th>C.I</th>
<th>Direccion</th>
<th>Accion</th>
</tr>
<% for (var i = 0; i < data.length; i ++) { %>
<tr>
<td><%= data[i].client_id %></td>
<td><%= data[i].client_nombre %></td>
<td><%= data[i].client_rucCed %></td>
<td><%= data[i].client_direccion %></td>
<td>
<a href="/eliminarCliente/<%= data[i].client_id %>">Eliminar</a><br>
<a href="/actCliente/<%= data[i].client_id %>">Modificar</a>
</td>
</tr>
<% } %>
</table>
</div>
</div>
</body>
</html>

247
src/views/panel_control.ejs Normal file
View File

@@ -0,0 +1,247 @@
<!doctype html>
<!--
Material Design Lite
Copyright 2015 Google Inc. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>Material Design Lite</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="./img/panel_control/android-desktop.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="./img/panel_control/ios-desktop.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="./img/panel_control/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<link rel="shortcut icon" href="./img/panel_control/favicon.png">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
<link rel="stylesheet" href="./css/panel_control.css">
<style>
#view-source {
position: fixed;
display: block;
right: 0;
bottom: 0;
margin-right: 40px;
margin-bottom: 40px;
z-index: 900;
}
</style>
</head>
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title">Home</span>
<div class="mdl-layout-spacer"></div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
<i class="material-icons">search</i>
</label>
<div class="mdl-textfield__expandable-holder">
<input class="mdl-textfield__input" type="text" id="search">
<label class="mdl-textfield__label" for="search">Enter your query...</label>
</div>
</div>
<button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
<i class="material-icons">more_vert</i>
</button>
<ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
<li class="mdl-menu__item">About</li>
<li class="mdl-menu__item">Contact</li>
<li class="mdl-menu__item">Legal information</li>
</ul>
</div>
</header>
<div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
<header class="demo-drawer-header">
<img src="./img/panel_control/user.jpg" class="demo-avatar">
<div class="demo-avatar-dropdown">
<span>hello@example.com</span>
<div class="mdl-layout-spacer"></div>
<button id="accbtn" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
<i class="material-icons" role="presentation">arrow_drop_down</i>
<span class="visuallyhidden">Accounts</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="accbtn">
<li class="mdl-menu__item">hello@example.com</li>
<li class="mdl-menu__item">info@example.com</li>
<li class="mdl-menu__item"><i class="material-icons">add</i>Add another account...</li>
</ul>
</div>
</header>
<nav class="demo-navigation mdl-navigation mdl-color--blue-grey-800">
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>Home</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">inbox</i>Inbox</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">delete</i>Trash</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">report</i>Spam</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">forum</i>Forums</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">flag</i>Updates</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">local_offer</i>Promos</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">shopping_cart</i>Purchases</a>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">people</i>Social</a>
<div class="mdl-layout-spacer"></div>
<a class="mdl-navigation__link" href=""><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">help_outline</i><span class="visuallyhidden">Help</span></a>
</nav>
</div>
<main class="mdl-layout__content mdl-color--grey-100">
<div class="mdl-grid demo-content">
<div class="demo-charts mdl-color--white mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-grid">
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan font-size="0.2" dy="-0.07">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell mdl-cell--4-col mdl-cell--3-col-desktop">
<use xlink:href="#piechart" mask="url(#piemask)" />
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82<tspan dy="-0.07" font-size="0.2">%</tspan></text>
</svg>
</div>
<div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col">
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart" />
</svg>
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
<use xlink:href="#chart" />
</svg>
</div>
<div class="demo-cards mdl-cell mdl-cell--4-col mdl-cell--8-col-tablet mdl-grid mdl-grid--no-spacing">
<div class="demo-updates mdl-card mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--4-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__title mdl-card--expand mdl-color--teal-300">
<h2 class="mdl-card__title-text">Updates</h2>
</div>
<div class="mdl-card__supporting-text mdl-color-text--grey-600">
Non dolore elit adipisicing ea reprehenderit consectetur culpa.
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect">Read More</a>
</div>
</div>
<div class="demo-separator mdl-cell--1-col"></div>
<div class="demo-options mdl-card mdl-color--deep-purple-500 mdl-shadow--2dp mdl-cell mdl-cell--4-col mdl-cell--3-col-tablet mdl-cell--12-col-desktop">
<div class="mdl-card__supporting-text mdl-color-text--blue-grey-50">
<h3>View options</h3>
<ul>
<li>
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Click per object</span>
</label>
</li>
<li>
<label for="chkbox2" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox2" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Views per object</span>
</label>
</li>
<li>
<label for="chkbox3" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox3" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Objects selected</span>
</label>
</li>
<li>
<label for="chkbox4" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
<input type="checkbox" id="chkbox4" class="mdl-checkbox__input">
<span class="mdl-checkbox__label">Objects viewed</span>
</label>
</li>
</ul>
</div>
<div class="mdl-card__actions mdl-card--border">
<a href="#" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--blue-grey-50">Change location</a>
<div class="mdl-layout-spacer"></div>
<i class="material-icons">location_on</i>
</div>
</div>
</div>
</div>
</main>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<mask id="piemask" maskContentUnits="objectBoundingBox">
<circle cx=0.5 cy=0.5 r=0.49 fill="white" />
<circle cx=0.5 cy=0.5 r=0.40 fill="black" />
</mask>
<g id="piechart">
<circle cx=0.5 cy=0.5 r=0.5 />
<path d="M 0.5 0.5 0.5 0 A 0.5 0.5 0 0 1 0.95 0.28 z" stroke="none" fill="rgba(255, 255, 255, 0.75)" />
</g>
</defs>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 250" style="position: fixed; left: -1000px; height: -1000px;">
<defs>
<g id="chart">
<g id="Gridlines">
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="27.3" x2="468.3" y2="27.3" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="66.7" x2="468.3" y2="66.7" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="105.3" x2="468.3" y2="105.3" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="144.7" x2="468.3" y2="144.7" />
<line fill="#888888" stroke="#888888" stroke-miterlimit="10" x1="0" y1="184.3" x2="468.3" y2="184.3" />
</g>
<g id="Numbers">
<text transform="matrix(1 0 0 1 485 29.3333)" fill="#888888" font-family="'Roboto'" font-size="9">500</text>
<text transform="matrix(1 0 0 1 485 69)" fill="#888888" font-family="'Roboto'" font-size="9">400</text>
<text transform="matrix(1 0 0 1 485 109.3333)" fill="#888888" font-family="'Roboto'" font-size="9">300</text>
<text transform="matrix(1 0 0 1 485 149)" fill="#888888" font-family="'Roboto'" font-size="9">200</text>
<text transform="matrix(1 0 0 1 485 188.3333)" fill="#888888" font-family="'Roboto'" font-size="9">100</text>
<text transform="matrix(1 0 0 1 0 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">1</text>
<text transform="matrix(1 0 0 1 78 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">2</text>
<text transform="matrix(1 0 0 1 154.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">3</text>
<text transform="matrix(1 0 0 1 232.1667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">4</text>
<text transform="matrix(1 0 0 1 309 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">5</text>
<text transform="matrix(1 0 0 1 386.6667 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">6</text>
<text transform="matrix(1 0 0 1 464.3333 249.0003)" fill="#888888" font-family="'Roboto'" font-size="9">7</text>
</g>
<g id="Layer_5">
<polygon opacity="0.36" stroke-miterlimit="10" points="0,223.3 48,138.5 154.7,169 211,88.5
294.5,80.5 380,165.2 437,75.5 469.5,223.3 "/>
</g>
<g id="Layer_4">
<polygon stroke-miterlimit="10" points="469.3,222.7 1,222.7 48.7,166.7 155.7,188.3 212,132.7
296.7,128 380.7,184.3 436.7,125 "/>
</g>
</g>
</defs>
</svg>
<a href="https://github.com/google/material-design-lite/blob/mdl-1.x/templates/dashboard/" target="_blank" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-button--colored mdl-color-text--white">View Source</a>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</body>
</html>