зеркало из https://github.com/DeGsoft/meanjs.git
149 строки
6.8 KiB
HTML
149 строки
6.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<title>Control de Caja</title>
|
|
<meta charset="utf-8" />
|
|
<meta lang="es" />
|
|
<meta name="description" content="Ejemplo Control de Caja en AngularJS por Alberto Basalo" />
|
|
<meta name="author" content="Alberto Basalo @ Ágora Binaria" />
|
|
<meta name="application-name" content="ControlAngularJS" />
|
|
<meta name="Keywords" content="AngularJS, ejemplo, tutorial, curso" />
|
|
<link rel="author" href="https://plus.google.com/+AlbertoBasalo71" />
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="refs/bootstrap.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="text-center">
|
|
<h1>Controla tu Cash Flow</h1>
|
|
<p class="lead">Comprueba de dónde viene y a dónde va tu dinero.</p>
|
|
<div class="row-fluid">
|
|
<div class="row placeholders">
|
|
<div class="col-xs-8 col-sm-4 placeholder">
|
|
<h1>
|
|
<span class="label label-success">
|
|
1.000 €
|
|
</span>
|
|
</h1>
|
|
<h4>Ingresos</h4>
|
|
<span class="text-muted">Acumulado</span>
|
|
</div>
|
|
<div class="col-xs-8 col-sm-4 placeholder">
|
|
<h1>
|
|
<span class="label label-danger">
|
|
450,50 €
|
|
</span>
|
|
</h1>
|
|
<h4>Gastos</h4>
|
|
<span class="text-muted">Acumulado</span>
|
|
</div>
|
|
<div class="col-xs-8 col-sm-4 placeholder">
|
|
<h1>
|
|
<span class="label label-success">
|
|
549,50 €
|
|
</span>
|
|
</h1>
|
|
<h4>Balance</h4>
|
|
<span class="text-muted">Ingresos-Gastos</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="row-fluid">
|
|
<form class="form-horizontal text-left">
|
|
<fieldset>
|
|
<div id="legend">
|
|
<legend class="">Introduce tus movimientos</legend>
|
|
</div>
|
|
<div class="row-fluid">
|
|
<div class="col-xs-12 col-sm-6">
|
|
<div class="control-group">
|
|
<label class="control-label" for="tipo">Tipo</label>
|
|
<div class="controls">
|
|
<div class="btn-group">
|
|
<button type="button" class="btn btn-success active ">
|
|
<span>+ Ingreso</span>
|
|
</button>
|
|
<button type="button" class="btn btn-danger ">
|
|
<span class="small">- Gasto</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<div class="control-group">
|
|
<label class="control-label" for="categoria">Categoría</label>
|
|
<div class="controls">
|
|
<!-- Opciones de Categoría -->
|
|
<select name="categoria">
|
|
<option value="Nómina">Nómina</option>
|
|
<option value="Nómina">Ventas</option>
|
|
<option value="Intereses Depósitos">Intereses Depósitos</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6">
|
|
<div class="control-group">
|
|
<label class="control-label" for="fecha">Fecha</label>
|
|
<div class="controls">
|
|
<input type="date" name="fecha" placeholder="" class="input">
|
|
</div>
|
|
</div>
|
|
<div class="control-group">
|
|
<label class="control-label" for="importe">Importe</label>
|
|
<div class="controls">
|
|
<input type="number" name="importe" placeholder="" class="input">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<button style="margin-top: 20px" type="button" class="btn btn-lg btn-primary ">
|
|
<span>Guardar movimiento</span>
|
|
</button>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<hr>
|
|
<p class="lead">Estos son tus movimientos recientes.</p>
|
|
<br>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Fecha</th>
|
|
<th>Tipo</th>
|
|
<th>Categoría</th>
|
|
<th>Importe</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="text-left">01/04/2014</td>
|
|
<td class="text-left">Ingreso</td>
|
|
<td class="text-left">Nómina</td>
|
|
<td class="text-left text-success">1.000 €</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="text-left">02/04/2014</td>
|
|
<td class="text-left">Gasto</td>
|
|
<td class="text-left">Hipoteca</td>
|
|
<td class="text-left text-danger">450,50 €</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<hr>
|
|
<p>Código de ejemplo creado por <a href="https://twitter.com/albertobasalo">Alberto Basalo</a> de <a href="http://agorabinaria.com">Ágora Binaria</a>
|
|
</p>
|
|
<p>Accede a más contenidos formativos en <a href="https://github.com/AcademiaBinaria">GitHub-AcademiaBinaria</a>
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|