Skip to content

Instantly share code, notes, and snippets.

@sergioccrr

sergioccrr/factura.html

Created August 5, 2014 12:37
Show Gist options
  • Save sergioccrr/324d6b32315ce7489976 to your computer and use it in GitHub Desktop.
Save sergioccrr/324d6b32315ce7489976 to your computer and use it in GitHub Desktop.
Download ZIP
De cuando era autónomo
Raw
factura.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="http://fnt.webink.com/wfs/webink.css/?project=C70D1354-AD5F-440B-9B83-AE04D8C2E103&fonts=1B6C2E6C-BB21-53D3-2175-C814D91AD16C:f=Aller-Bold,32A3E230-3101-A662-F6D5-D8B9D0A38A5B:f=Aller-Regular,C7662775-65E4-3DE5-DE19-D61377E1BE79:f=Aller-Light,880096C9-42EC-CFB6-C094-7540101C8F7B:f=Aller-BoldItalic,9C5DF801-C745-E177-908F-369BCECD52B7:f=Aller-Italic,521D5111-7D3C-B8EC-88B6-BBED2BE5F224:f=Aller-LightItalic" rel="stylesheet" type="text/css"/>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Aller-Regular";
font-size: 12pt;
}
.wrapper {
margin: 0 auto;
width: 595px;
height: 842px;
}
/* Header */
.header {
border-bottom: 1px dotted #000;
margin-bottom: 25px;
}
/* Info */
.info {
overflow: hidden;
width: 12em;
margin-bottom: 75px;
}
.info .rows {
overflow: hidden;
}
.info .col-l {
float: left;
width: 50%;
}
.info .col-r {
float: right;
width: 50%;
}
/* Data */
.data {
overflow: hidden;
margin-bottom: 30px;
}
.data .col-l {
float: left;
margin-top: 30px;
}
.data .col-r {
float: right;
}
.data p {
line-height: 1.3em;
}
.data .col-r h2 {
margin-bottom: 10px;
}
/* Table */
.table {
overflow: hidden;
margin-bottom: 150px;
}
.table .rows {
overflow: hidden;
height: 2.6em;
line-height: 2.6em;
}
.table .col-l {
float: left;
width: 80%;
}
.table .col-r {
float: right;
width: 20%;
text-align: right;
}
.table .row-h, .table .row-1, .table .row-3 {
border-bottom: 2px solid #000;
}
.table .row-2 {
border-bottom: 1px dotted #000;
}
.table .row-4 .col-l {
text-align: right;
}
/* Pay */
.pay b {
font-weight: normal;
display: block;
margin-bottom: 15px;
}
/* Titles */
h1, h2, .data b, .info .col-l, .table .row-h, .pay b {
font-family: "Aller-Bold";
font-size: 12pt;
font-weight: normal;
}
h1, h2 {
color: rgb(92, 183, 132);
}
h1, h2, .table .row-h {
text-transform: uppercase;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Factura</h1>
</div>
<div class="data">
<div class="col-l">
<p><b>Bartolomé Méndez Zuloaga</b><br>
C/ Desengaño 21, 3º, A<br>
Madrid 28004<br>
NIF: 00000000-T</p>
</div>
<div class="col-r">
<h2>Cliente</h2>
<p><b>Indra Sistemas de España INC</b><br>
Avenida de Bruselas, Local 35<br>
Barcelona 08019<br>
CIF: Q-2801659J</p>
</div>
</div>
<div class="info">
<div class="rows">
<div class="col-l">Número:</div>
<div class="col-r">0001</div>
</div>
<div class="rows">
<div class="col-l">Fecha:</div>
<div class="col-r">27/01/2014</div>
</div>
</div>
<div class="table">
<div class="rows row-h">
<div class="col-l">Concepto</div>
<div class="col-r">Importe</div>
</div>
<div class="rows row-1">
<div class="col-l">Auditoría Seguridad – 74 horas</div>
<div class="col-r"><span id="subtotal">0</span> €</div>
</div>
<div class="rows row-2">
<div class="col-l">IVA <span id="iva">0</span>%</div>
<div class="col-r"><span id="iva_importe">0</span> €</div>
</div>
<div class="rows row-3">
<div class="col-l">IRPF <span id="irpf">0</span>%</div>
<div class="col-r">- <span id="irpf_importe">0</span> €</div>
</div>
<div class="rows row-4">
<div class="col-l">Total</div>
<div class="col-r"><span id="total">0</span> €</div>
</div>
</div>
<div class="pay">
<b>Pago mediante transferencia bancaria a IBAN:</b>
ESXX XXXX XXXX XXXX XXXX XXXX
</div>
</div>
<script>
function euros(int) {
// Igual usar toFixed() no es buena idea
var str = int.toFixed(2).toString();
str = str.replace('.', ',');
return str;
}
var IMPORTE = 1850;
var IVA = 21;
var IRPF = 9;
var iva_calc = (IMPORTE * IVA) / 100;
var irpf_calc = (IMPORTE * IRPF) / 100;
var total_calc = IMPORTE + iva_calc - irpf_calc;
document.getElementById('subtotal').innerHTML = euros(IMPORTE);
document.getElementById('iva').innerHTML = IVA;
document.getElementById('irpf').innerHTML = IRPF;
document.getElementById('iva_importe').innerHTML = euros(iva_calc);
document.getElementById('irpf_importe').innerHTML = euros(irpf_calc);
document.getElementById('total').innerHTML = euros(total_calc);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment