364 lines
10 KiB
HTML
364 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="da">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Tilbud {{quoteNumber}}</title>
|
|
<style>
|
|
@page {
|
|
margin: 25mm 20mm;
|
|
size: A4;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
font-size: 11px;
|
|
line-height: 1.4;
|
|
margin: 0;
|
|
padding: 15mm;
|
|
}
|
|
|
|
.header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
margin-bottom: 30px;
|
|
border-bottom: 2px solid #333;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.logo-left {
|
|
width: 140px;
|
|
}
|
|
|
|
.logo-right {
|
|
width: 140px;
|
|
}
|
|
|
|
.logo-left img, .logo-right img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.customer-info {
|
|
margin: 25px 0;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.customer-info strong {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.quote-header {
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.quote-header h1 {
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
margin: 0 0 20px 0;
|
|
text-align: center;
|
|
letter-spacing: 3px;
|
|
color: #333;
|
|
}
|
|
|
|
.quote-details {
|
|
font-family: "Courier New", monospace;
|
|
line-height: 1.8;
|
|
font-size: 11px;
|
|
margin-left: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
.quote-details div {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.project-section {
|
|
margin: 35px 0;
|
|
}
|
|
|
|
.project-title {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
margin-bottom: 15px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.project-address {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
margin-bottom: 25px;
|
|
color: #555;
|
|
}
|
|
|
|
.work-description {
|
|
margin-bottom: 25px;
|
|
line-height: 1.6;
|
|
text-align: justify;
|
|
}
|
|
|
|
.items-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin: 25px 0;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.items-table th {
|
|
border-bottom: 2px solid #333;
|
|
padding: 12px 5px;
|
|
text-align: left;
|
|
font-weight: bold;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.items-table th:last-child {
|
|
text-align: right;
|
|
}
|
|
|
|
.items-table td {
|
|
border-bottom: 1px solid #ddd;
|
|
padding: 10px 5px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.items-table td:last-child {
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.totals-section {
|
|
margin-top: 30px;
|
|
text-align: right;
|
|
font-size: 12px;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.totals-row {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.totals-label {
|
|
width: 200px;
|
|
text-align: left;
|
|
}
|
|
|
|
.totals-amount {
|
|
width: 100px;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.total-final {
|
|
border-top: 2px solid #333;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin-top: 10px;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.totals-line {
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.total-final {
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
border-top: 1px solid #333;
|
|
padding-top: 5px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.company-footer {
|
|
margin-top: 40px;
|
|
border-top: 1px solid #333;
|
|
padding-top: 15px;
|
|
font-size: 10px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
page-break-inside: avoid;
|
|
}
|
|
|
|
.company-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.company-contact {
|
|
flex: 1;
|
|
text-align: center;
|
|
}
|
|
|
|
.company-bank {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
|
|
.page-break {
|
|
page-break-before: always;
|
|
}
|
|
|
|
.company-description {
|
|
line-height: 1.6;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.company-description h3 {
|
|
font-size: 14px;
|
|
margin: 20px 0 10px 0;
|
|
}
|
|
|
|
.company-description p {
|
|
margin: 10px 0;
|
|
text-align: justify;
|
|
}
|
|
|
|
.elite-section {
|
|
margin: 20px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.elite-logo {
|
|
max-width: 150px;
|
|
margin: 10px 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Page 1 - Tilbud -->
|
|
<div class="header">
|
|
<div class="logo-left">
|
|
<img src="data:image/png;base64,{{mikhaelLogo}}" alt="Mikael Holck Logo">
|
|
</div>
|
|
<div class="logo-right">
|
|
<img src="data:image/png;base64,{{bygGarantiLogo}}" alt="Byg Garanti Logo">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="customer-info">
|
|
<strong>{{customerName}}</strong><br>
|
|
{{customerAddress}}
|
|
</div>
|
|
|
|
<div class="quote-header">
|
|
<h1>TILBUD</h1>
|
|
<div class="quote-details">
|
|
<div>Tilbudnr. ............ {{quoteNumber}}</div>
|
|
<div>Tilbudsdato ........ {{quoteDate}}</div>
|
|
<div>Kundenr. ........... {{customerNumber}}</div>
|
|
<div>Side ............... 1/2</div>
|
|
<br>
|
|
<div>Rekvirent: .........</div>
|
|
<div>Reference: .........</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="project-section">
|
|
<div class="project-address">{{projectAddress}}</div>
|
|
<div class="project-title">{{projectTitle}}</div>
|
|
|
|
<div class="work-description">
|
|
{{workDescription}}
|
|
</div>
|
|
</div>
|
|
|
|
<table class="items-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Varebeskrivelse</th>
|
|
<th>Beløb</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{#each items}}
|
|
<tr>
|
|
<td>{{this.description}}</td>
|
|
<td>{{this.amount}}</td>
|
|
</tr>
|
|
{{/each}}
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="totals-section">
|
|
<div class="totals-row">
|
|
<span class="totals-label">Momsfrit beløb: 0,00 - Momspligtigt beløb:</span>
|
|
<span class="totals-amount">{{subtotal}}</span>
|
|
</div>
|
|
<div class="totals-row">
|
|
<span class="totals-label">Subtotal:</span>
|
|
<span class="totals-amount">{{subtotal}}</span>
|
|
</div>
|
|
<div class="totals-row">
|
|
<span class="totals-label">25,00% Moms:</span>
|
|
<span class="totals-amount">{{vat}}</span>
|
|
</div>
|
|
<div class="totals-row total-final">
|
|
<span class="totals-label">Total DKK:</span>
|
|
<span class="totals-amount">{{total}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="company-footer">
|
|
<div class="company-info">
|
|
<strong>{{companyName}}</strong><br>
|
|
{{companyAddress}}<br>
|
|
{{companyCity}}
|
|
</div>
|
|
<div class="company-contact">
|
|
Tlf.: {{companyPhone}}<br>
|
|
Bank: {{companyBank}}<br>
|
|
Kontonr.: {{companyAccount}}
|
|
</div>
|
|
<div class="company-bank">
|
|
cvr: {{companyCvr}}<br>
|
|
mail: {{companyEmail}}<br>
|
|
{{companyWebsite}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page 2 - Firmabeskrivelse -->
|
|
<div class="page-break">
|
|
<div class="company-description">
|
|
<p>Med mange års erfaring inden for snedker- og tømrerarbejde kan vi udføre en bred vifte af
|
|
opgaver — Store som små. Vi brænder for at realisere drømme, og har gennem årene hjulpet
|
|
privatpersoner, virksomheder og offentlige institutioner i mål med deres drømme.</p>
|
|
|
|
<p>Som professionelt tømrerfirma værner vi omkring høj kvalitet og god service. Vi er af den
|
|
overbevisning at de bedste resultater skabes gennem tæt dialog med kunden. Derfor bliver dine ønsker og
|
|
behov altid hørt hos os. Ud fra disse, og med vores brede faglighed, finder vi sammen den
|
|
bedste løsning til den absolut bedste pris.</p>
|
|
|
|
<p>Hos {{companyName}} går vi aldrig på kompromis med kvaliteten af
|
|
vores arbejde. Hertil er vi medlem af Byg Garanti, hvilket er din garanti for veludført
|
|
håndværk. Hos os er du en prioritet, og ikke bare endnu en ordre i kalenderen. Vi kommer
|
|
derfor altid til tiden, og rydder selvfølgelig op efter os selv, når opgaven er udført.</p>
|
|
|
|
<h3>Vores tid er vigtig</h3>
|
|
<p>Vi bruger hver dag mange timer på at regne tilbud, og derfor vil vi sætte stor pris på at du
|
|
vender tilbage med feedback på det tilbud vi har givet dig.</p>
|
|
|
|
<p>Det er vigtigt for os med din feedback, og derfor vender vi også selv tilbage hvis vi ikke har
|
|
hørt noget fra dig. Dette gør vi for at yde den bedste service til alle vi er i dialog med.</p>
|
|
|
|
<p>Husk at det "bedste tilbud" ikke altid er billigste. Det skal udføres korrekt og til den rigtige tid.
|
|
Du skal kunne stole på din tømrer såvel som snedker — Og det kan du hos os.</p>
|
|
|
|
<h3>Anmeld Håndværker</h3>
|
|
<p>Vi er medlem af Anmeld Håndværker, og der har vi mærket "ELITE HÅNDVÆRKER" på
|
|
baggrund af vores mange gode anmeldelser.</p>
|
|
|
|
<p>På Anmeld håndværker har du mulighed for at se anmeldelser på opgaver vi har udført.<br>
|
|
Læs vores anmeldelser her: Anmeld Håndværker</p>
|
|
|
|
<div class="elite-section">
|
|
<img src="data:image/png;base64,{{eliteLogo}}" alt="Elite Håndværker Logo" class="elite-logo">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|