Add the invoice template
This commit is contained in:
parent
030a0cd501
commit
5bb0c4cdda
24 changed files with 461 additions and 95 deletions
|
|
@ -1,4 +1,4 @@
|
|||
{% load static i18n %} {% get_current_language as LANGUAGE_CODE %}
|
||||
{% load static compress i18n %} {% get_current_language as LANGUAGE_CODE %}
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{LANGUAGE_CODE}}">
|
||||
<head>
|
||||
|
|
@ -22,11 +22,13 @@
|
|||
type="text/css"
|
||||
/>
|
||||
<!-- Custom CSS -->
|
||||
{% compress css %}
|
||||
<link
|
||||
href="{% static 'matrixhosting/css/theme.css' %}"
|
||||
rel="stylesheet"
|
||||
type="text/css"
|
||||
/>
|
||||
{% endcompress %}
|
||||
{% block css_extra %} {% endblock css_extra %}
|
||||
|
||||
<!-- External Fonts -->
|
||||
|
|
@ -55,6 +57,8 @@
|
|||
<script src="{% static 'matrixhosting/js/bootstrap.bundle.min.js' %}"></script>
|
||||
<!-- Custom JS -->
|
||||
{% block js_extra %} {% endblock js_extra %}
|
||||
<script src="{% static 'matrixhosting/js/theme.js' %}"></script>
|
||||
{% compress js %}
|
||||
<script src="{% static 'matrixhosting/js/theme.js' %}"></script>
|
||||
{% endcompress %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,49 +1,171 @@
|
|||
{% load static i18n %}
|
||||
{% get_current_language as LANGUAGE_CODE %}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content="Matrix Hosting by ungleich" />
|
||||
<meta name="author" content="ungleich glarus ag" />
|
||||
<title>
|
||||
Hosting Invoice
|
||||
</title>
|
||||
|
||||
<!-- Web Fonts
|
||||
======================= -->
|
||||
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Rubik:300,300i,400,400i,500,500i,700,700i,900,900i' type='text/css'>
|
||||
|
||||
<!-- Stylesheet
|
||||
======================= -->
|
||||
<link href="{% static 'matrixhosting/css/bootstrap.min.css' %}" rel="stylesheet" />
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>{%trans "Invoice: " %} {{bill.id}}</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: 'Avenir';
|
||||
src: url("{{ base_url }}{% static 'matrixhosting/webfonts/Avenir-Book.ttf' %}");
|
||||
}
|
||||
</style>
|
||||
<link href="{{ base_url }}{% static 'matrixhosting/css/invoice.css' %}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Container -->
|
||||
<div class="container-fluid invoice-container">
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="row align-items-center">
|
||||
<div class="col-sm-7 text-center text-sm-start mb-3 mb-sm-0">
|
||||
<img id="logo" src="{% static 'matrixhosting/images/logo.png' %}" title="matrixhosting" alt="matrixhosting" />
|
||||
</div>
|
||||
<div class="col-sm-5 text-center text-sm-end">
|
||||
<h4 class="text-7 mb-0">Invoice</h4>
|
||||
</div>
|
||||
</div>
|
||||
<hr>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main>
|
||||
|
||||
</main>
|
||||
<!-- Footer -->
|
||||
<footer class="text-center mt-4">
|
||||
</footer>
|
||||
<div class="invoice-container">
|
||||
|
||||
<div class="header" style="line-height:1.1em;">
|
||||
<div class="d1">
|
||||
<div class="logo">
|
||||
<img class="" src="{{ base_url }}{% static 'matrixhosting/images/company-small.jpg' %}" width="50%"/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d2" name="company_address">
|
||||
<span class="bold">ungleich glarus ag</span>
|
||||
<address>
|
||||
Bahnhofstrasse 1<br>
|
||||
8783 Linthal<br>
|
||||
Switzerland
|
||||
</address>
|
||||
</div>
|
||||
<div class="first-page">
|
||||
|
||||
<div class="d1" style="margin-top:15px;">
|
||||
<b>
|
||||
<span style="font-size: 16px">{{bill.billing_address.full_name}}</span>
|
||||
</b>
|
||||
<br/>
|
||||
|
||||
<span>{{bill.billing_address.owner.email}}</span>
|
||||
<address>
|
||||
{{bill.billing_address.street}}<br>
|
||||
{{bill.billing_address.city}}<br>
|
||||
{{bill.billing_address.get_country_display}}
|
||||
</address>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d4" style="margin-top:15px;">
|
||||
<div>
|
||||
<div class="b1">
|
||||
<span>{%trans "Date of invoice:" %}</span>
|
||||
</div>
|
||||
|
||||
<div class="b2">
|
||||
<span>{{bill.starting_date|date}}</span>
|
||||
<br/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="b1">
|
||||
<span>{%trans "Invoice Number:" %}</span>
|
||||
</div>
|
||||
<div class="b2">
|
||||
<span>#{{bill.id}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="b1">
|
||||
<span>{%trans "Due Date:" %}</span>
|
||||
|
||||
</div>
|
||||
<div class="b2">
|
||||
<span>{{bill.due_date}}</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="clear: both;">
|
||||
</div>
|
||||
<div class="d5" style="margin-top:20px; margin-bottom:10px important;">
|
||||
<br/>
|
||||
<span style="font-size: 2em !important; font-weight: bolder !important;">{%trans "INVOICE" %}</span>
|
||||
<span style="font-size: 2em !important; font-weight: bolder !important;padding-left:5px"> {{bill.starting_date|date:"m-Y"}}</span>
|
||||
</div>
|
||||
<div style="clear: both;">
|
||||
<table class="wf" style="margin-top:20px; margin-bottom:10px important;border-top: 1px solid gray;">
|
||||
<thead >
|
||||
<tr class="" style="padding-top: 10px; padding-bottom:10px;background-color: #f5f5f5;">
|
||||
<th class="tl bold" style="padding: 5px 0px 5px 0px !important;">{%trans "Product" %}</th>
|
||||
<th class="tc bold" style="padding: 5px 0px 5px 0px !important;">{%trans "Quantity" %}</th>
|
||||
<th class="bold" style="text-align: right; padding: 5px 0px 5px 0px !important;">{%trans "Amount in " %} <span>CHF</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
{% for record in bill.bill_records.all %}
|
||||
<tr class="ts" style="line-height:1.8em !important;">
|
||||
<td class="tl">
|
||||
<span>{{record.description}}</span>
|
||||
</td>
|
||||
<td class="tc">
|
||||
<span>{{record.quantity}}</span>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<span>{{record.subtotal}}</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
<div class="page">
|
||||
<div class="wf th">
|
||||
<p class="ts">
|
||||
<span class="tl">SubTotal</span>
|
||||
<span class="tr">{{bill.subtotal}}</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="ts">
|
||||
<span class="tl">{{vat_rate}}</span>
|
||||
<span class="tr">{{tax_amount}}
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="wf pc" style="background-color: #f5f5f5;padding-top:5px;padding-bottom:5px;">
|
||||
<p class="bold" style="padding-top:5px;">
|
||||
<span class="tl" style="font-size: 16px">{%trans "CHF" %}</span>
|
||||
<span class="tr" style="font-size: 16px">{{bill.sum}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer wf custom_footer">
|
||||
<br/>
|
||||
<div class="d6">
|
||||
<p>
|
||||
<img class="icon" src="{{ base_url }}{% static 'matrixhosting/images/call.png' %}"/>
|
||||
<span>+4(144) 534-6622</span>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<img class="icon" src="{{ base_url }}{% static 'matrixhosting/images/msg.png' %}"/>
|
||||
<span>buchhaltung-ag@ungleich.ch</span>
|
||||
</p>
|
||||
<p>
|
||||
<img class="icon" src="{{ base_url }}{% static 'matrixhosting/images/home.png' %}"/>
|
||||
<span>https://www.ungleich.ch</span>
|
||||
</p>
|
||||
<p>
|
||||
<img class="icon" src="{{ base_url }}{% static 'matrixhosting/images/twitter.png' %}"/>
|
||||
@ungleich
|
||||
</p>
|
||||
</div>
|
||||
<div class="d7">
|
||||
<div>
|
||||
<p>Glarner Kantonalbank</p>
|
||||
<p>
|
||||
<span class="bold">IBAN: CH 4300 7730 0055 5931 177</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="bold">BIC: GLKBCH22</span>
|
||||
</p>
|
||||
</div>
|
||||
<p style="font-size: 13px; white-space: nowrap !important">Mwst-Nummer: CHE-156.970.649 MWST</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{% extends "matrixhosting/base.html" %}
|
||||
|
||||
{% load static i18n %}
|
||||
{% load static compress i18n %}
|
||||
|
||||
{% block title %} Request Details {% endblock %}
|
||||
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
<p><span>{% trans "VAT for" %} {{pricing.vat_country}} ({{pricing.vat_percent}}%)</span></p>
|
||||
</div>
|
||||
<div class="col-md-6 col-sm-6 col-xs-6">
|
||||
<p><span class="pull-right" > CHF</span></p>
|
||||
<p><span class="pull-right" > {{pricing.vat_amount}} CHF</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -203,5 +203,7 @@ aria-hidden="true" data-backdrop="static" data-keyboard="false">
|
|||
<!-- jQuery -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
|
||||
<!-- Custom JS -->
|
||||
{% compress js %}
|
||||
<script type="text/javascript" src="{% static 'matrixhosting/js/order.js' %}"></script>
|
||||
{% endcompress %}
|
||||
{% endblock js_extra %}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{% extends "matrixhosting/base.html" %}
|
||||
|
||||
{% load static i18n %}
|
||||
{% load static compress i18n %}
|
||||
|
||||
{% block title %} Request Details {% endblock %}
|
||||
|
||||
|
|
@ -196,7 +196,7 @@
|
|||
{% endif %}
|
||||
</div>
|
||||
<div class="col col-lg-6">
|
||||
<div class="float-right"><span class="text-4">{{request.session.pricing.total|floatformat}}</span><span class="text-2 p-1">CHF</span></div>
|
||||
<div class="float-right"><span id="total" class="text-4">{{request.session.pricing.total|floatformat}}</span><span class="text-2 p-1">CHF</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-2 mx-n3">
|
||||
|
|
@ -269,7 +269,9 @@
|
|||
(function () {
|
||||
window.stripeKey = "{{stripe_key}}";
|
||||
window.current_lan = "{{LANGUAGE_CODE}}";
|
||||
window.hasCreditcard = "{{show_cards}}";
|
||||
{% if show_cards %}
|
||||
window.hasCreditcard = true;
|
||||
{% endif %}
|
||||
})();
|
||||
</script>
|
||||
{%endif%}
|
||||
|
|
@ -278,5 +280,7 @@
|
|||
<script src="https://js.stripe.com/v3/"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
|
||||
<!-- Custom JS -->
|
||||
<script type="text/javascript" src="{% static 'matrixhosting/js/payment.js' %}"></script>
|
||||
{% compress js %}
|
||||
<script type="text/javascript" src="{% static 'matrixhosting/js/payment.js' %}"></script>
|
||||
{% endcompress %}
|
||||
{% endblock js_extra %}
|
||||
|
|
@ -50,7 +50,4 @@
|
|||
{% endblock %}
|
||||
|
||||
{% block js_extra %}
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"></script>
|
||||
<!-- Custom JS -->
|
||||
<script type="text/javascript" src="{% static 'matrixhosting/js/order.js' %}"></script>
|
||||
{% endblock js_extra %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue