OfferteTOOL

Beste iedereen weet dat een boekhoud programma geld kost en soms onnodig omdat je nog niet veel klanten hebt en niet wil vasthangen aan maandelijkse abonnementen.

Hoe Artificiële intelligentie DeepSeek jullie kan helpen zodat jullie altijd nog verteringen kunnen aanbrengen waar open-Source voor is ontwikkeld om verder op te bouwen om het uiteindelijke doel samen te bereiken zonder tegen gewerkt te worden. Alvast in de bijlage van het bestand zowel een voorbeeld als offerte of factuur.

Succes

Functionaliteiten van deze software:

Factuur/Offerte modus: Schakel eenvoudig tussen factuur- en offertemodus met een toggle.
Gegevens invoeren:
- Bedrijfsgegevens (naam, adres, KVK, BTW-nummer)
- Klantgegevens
- Factuur/offerte nummer en datum
- Producten/diensten met hoeveelheden en prijzen
- Aanpasbare opmerkingen
Dynamische voorbeeldweergave: Alle wijzigingen worden direct weergegeven in de preview.
Itembeheer:
- Voeg nieuwe regels toe
- Verwijder regels
- Automatische berekening van totaalbedragen
Afdrukfunctionaliteit:
- Druk factuur/offerte af als PDF of op papier
- Professionele opmaak voor afdrukken
Responsive design: Werkt op desktop en mobiele apparaten.
Geen server nodig: Alles werkt in de browser, geen gegevens worden extern opgeslagen.

Om de software te gebruiken, sla je de bovenstaande code op als HTML-bestand (bijvoorbeeld factuur-offerte.html) en open je het in een moderne webbrowser.

Programma Voor Offerten En Facturen Html

HTML bestand – 21,8 KB 39 downloads

Download

Belangrijke nieuwe functies:

BTW-tarief selector: Radio buttons voor 0%, 6%, 12%, en 21% BTW
Groene tinten design: Alle blauwe kleuren zijn vervangen door groene tinten
Auto-save functionaliteit: Gegevens worden automatisch opgeslagen in de browser
Extra knoppen: PDF download, email voorbeeld, template opslaan
BTW badge: Toont het geselecteerde BTW-tarief in de preview
Status indicator: Toont of auto-save actief is
Verbeterde UI: Betere hover effects en visuele feedback

De software slaat alle gegevens automatisch op in de lokale opslag van je browser, zodat je werk niet verloren gaat als je de pagina per ongeluk sluit.

Voorbeeld van een programma schrijven met DeepSeek

Ik heb een software programma in html nodig voor facturen te sturen met een gouden tint alstublieft.

Daarna kan je deze software knippen en in DeepSeek bewerken met voorbeeld u bedrijftsnaaam,... veel succes

(Dan krijg je dit als resultaat en het bestand staat helemaal va onderen)

Belangrijke kenmerken van deze gouden factuursoftware:

Luxe gouden tint design:
- Gouden gradient kleuren (D4AF37, B8860B, FF

En de code is :

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Golden Invoice Pro - Factuursoftware</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--gold-primary: #D4AF37;
--gold-secondary: #B8860B;
--gold-light: #FFD700;
--gold-dark: #996515;
--cream: #FFF8E7;
--ivory: #FFFFF0;
--dark-gray: #2C2C2C;
--light-gray: #F5F5F5;
}

body {
background: linear-gradient(135deg, #FFFDF6 0%, #FFF8E7 100%);
color: #2C2C2C;
line-height: 1.6;
padding: 20px;
max-width: 1400px;
margin: 0 auto;
font-family: 'Montserrat', sans-serif;
}

.container {
display: flex;
flex-direction: column;
gap: 25px;
}

/* Header Styling */
header {
background: linear-gradient(135deg, var(--gold-primary), var(--gold-dark));
color: white;
padding: 35px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(212, 175, 55, 0.2);
text-align: center;
position: relative;
overflow: hidden;
}

header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
background-size: 30px 30px;
transform: rotate(30deg);
}

.logo-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 15px;
}

.logo {
font-size: 3.5rem;
color: #FFD700;
text-shadow: 0 0 20px rgba(255, 215, 0, 0.5);
animation: pulse 2s infinite;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}

h1 {
font-family: 'Playfair Display', serif;
font-size: 2.8rem;
margin-bottom: 10px;
letter-spacing: 1px;
}

.subtitle {
font-size: 1.2rem;
opacity: 0.95;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}

/* Main Content */
.app-container {
display: flex;
flex-wrap: wrap;
gap: 30px;
}

.input-section {
flex: 1;
min-width: 350px;
background: var(--ivory);
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(212, 175, 55, 0.1);
}

.preview-section {
flex: 1;
min-width: 350px;
background: var(--ivory);
padding: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(212, 175, 55, 0.1);
display: flex;
flex-direction: column;
}

h2 {
color: var(--gold-dark);
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 3px solid var(--gold-primary);
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
position: relative;
}

h2::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 60px;
height: 3px;
background: var(--gold-light);
}

h3 {
color: var(--gold-secondary);
margin: 25px 0 15px 0;
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
}

/* Form Elements */
.form-group {
margin-bottom: 25px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--dark-gray);
}

input, select, textarea {
width: 100%;
padding: 14px 18px;
border: 2px solid #E0D6C2;
border-radius: 8px;
font-size: 16px;
transition: all 0.3s;
background: white;
font-family: 'Montserrat', sans-serif;
}

input:focus, select:focus, textarea:focus {
border-color: var(--gold-primary);
outline: none;
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}

textarea {
resize: vertical;
min-height: 80px;
}

.row {
display: flex;
gap: 20px;
}

.row .form-group {
flex: 1;
}

/* BTW Selector */
.vat-selector {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-top: 10px;
}

.vat-option input[type="radio"] {
display: none;
}

.vat-option label {
display: block;
padding: 15px 10px;
text-align: center;
background: linear-gradient(to bottom, #FFF8E7, #FAF3E0);
border: 2px solid #E8DFC8;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
color: var(--dark-gray);
}

.vat-option input[type="radio"]:checked + label {
background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
color: white;
border-color: var(--gold-dark);
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
}

.vat-option label:hover {
background: linear-gradient(to bottom, #FAF3E0, #F5EBD8);
border-color: var(--gold-primary);
}

/* Items Table */
.items-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin-top: 10px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #E8DFC8;
}

.items-table th {
background: linear-gradient(to bottom, var(--gold-primary), var(--gold-secondary));
color: white;
padding: 16px;
text-align: left;
font-weight: 600;
}

.items-table td {
padding: 12px;
border-bottom: 1px solid #E8DFC8;
background: white;
}

.items-table tr:last-child td {
border-bottom: none;
}

.items-table input {
border: 1px solid #E0D6C2;
padding: 10px;
background: transparent;
}

.items-table input:focus {
border-color: var(--gold-primary);
}

/* Buttons */
.btn {
background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
color: white;
border: none;
padding: 15px 25px;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: 600;
transition: all 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
letter-spacing: 0.5px;
}

.btn:hover {
background: linear-gradient(135deg, var(--gold-secondary), var(--gold-dark));
transform: translateY(-2px);
box-shadow: 0 7px 20px rgba(212, 175, 55, 0.3);
}

.btn-add {
background: linear-gradient(135deg, #2E8B57, #3CB371);
}

.btn-add:hover {
background: linear-gradient(135deg, #3CB371, #2E8B57);
}

.btn-remove {
background: linear-gradient(135deg, #DC143C, #B22222);
padding: 8px 12px;
font-size: 14px;
}

.btn-remove:hover {
background: linear-gradient(135deg, #B22222, #8B0000);
}

.btn-print {
background: linear-gradient(135deg, #4682B4, #5F9EA0);
}

.btn-print:hover {
background: linear-gradient(135deg, #5F9EA0, #4682B4);
}

.btn-secondary {
background: linear-gradient(135deg, #DAA520, #CD853F);
}

.btn-secondary:hover {
background: linear-gradient(135deg, #CD853F, #DAA520);
}

.actions {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: 20px;
}

/* Toggle Switch */
.toggle-container {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 25px;
background: linear-gradient(to right, #FFF8E7, #FAF3E0);
padding: 20px;
border-radius: 10px;
border: 1px solid rgba(212, 175, 55, 0.2);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.toggle-label {
font-weight: 600;
color: var(--gold-dark);
font-size: 1.1rem;
}

.switch {
position: relative;
display: inline-block;
width: 70px;
height: 34px;
}

.switch input {
opacity: 0;
width: 0;
height: 0;
}

.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to right, #E0D6C2, #D4C9A8);
transition: .4s;
border-radius: 34px;
}

.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
transition: .4s;
border-radius: 50%;
}

input:checked + .slider {
background: linear-gradient(to right, #B8860B, #D4AF37);
}

input:checked + .slider:before {
transform: translateX(36px);
}

.status-indicator {
display: flex;
align-items: center;
gap: 15px;
}

#toggleStatus {
font-weight: 700;
font-size: 1.2rem;
color: var(--gold-dark);
min-width: 100px;
}

.status-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: linear-gradient(135deg, #32CD32, #228B22);
animation: pulse 2s infinite;
}

.auto-save {
font-size: 0.9rem;
color: var(--gold-secondary);
}

/* Invoice Preview */
.invoice-preview {
flex: 1;
background: white;
border-radius: 10px;
padding: 30px;
overflow-y: auto;
margin-bottom: 20px;
border: 2px solid #E8DFC8;
box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.03);
}

.invoice-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 30px;
padding-bottom: 25px;
border-bottom: 3px solid var(--gold-primary);
position: relative;
}

.invoice-header::after {
content: '';
position: absolute;
bottom: -3px;
left: 0;
width: 100px;
height: 3px;
background: var(--gold-light);
}

.invoice-title {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
color: var(--gold-dark);
letter-spacing: 1px;
}

.invoice-number {
font-size: 1.2rem;
color: #666;
margin-top: 5px;
}

.invoice-info {
display: flex;
justify-content: space-between;
margin-bottom: 30px;
}

.company-info, .client-info {
flex: 1;
padding: 20px;
background: #FFF8E7;
border-radius: 8px;
border: 1px solid #E8DFC8;
}

.company-info {
margin-right: 15px;
}

.client-info {
margin-left: 15px;
}

.info-label {
font-weight: 600;
margin-bottom: 10px;
color: var(--gold-dark);
font-size: 1.1rem;
}

.invoice-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
margin: 30px 0;
border-radius: 8px;
overflow: hidden;
border: 1px solid #E8DFC8;
}

.invoice-table th {
background: linear-gradient(to bottom, #FAF3E0, #F5EBD8);
padding: 18px;
text-align: left;
font-weight: 600;
color: var(--gold-dark);
border-bottom: 2px solid var(--gold-primary);
}

.invoice-table td {
padding: 16px;
border-bottom: 1px solid #E8DFC8;
}

.invoice-table tbody tr:hover {
background: #FFF8E7;
}

.text-right {
text-align: right;
}

.total-row {
font-weight: 700;
font-size: 1.2rem;
background: #FAF3E0;
}

.total-row td {
border-top: 2px solid var(--gold-primary);
border-bottom: none !important;
}

.vat-badge {
display: inline-block;
padding: 6px 15px;
background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
color: white;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
margin-left: 10px;
}

.footer-note {
margin-top: 30px;
padding: 25px;
background: #FFF8E7;
border-radius: 8px;
border-left: 4px solid var(--gold-primary);
}

.invoice-type {
display: inline-block;
padding: 10px 25px;
background: linear-gradient(135deg, var(--gold-primary), var(--gold-secondary));
color: white;
border-radius: 8px;
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 15px;
box-shadow: 0 4px 10px rgba(212, 175, 55, 0.3);
}

/* Footer */
footer {
text-align: center;
margin-top: 40px;
padding-top: 25px;
border-top: 1px solid #E8DFC8;
color: #666;
font-size: 0.9rem;
background: #FFF8E7;
padding: 25px;
border-radius: 10px;
}

.gold-text {
color: var(--gold-primary);
font-weight: 600;
}

/* Print Styles */
@media print {
body * {
visibility: hidden;
}

.preview-section, .preview-section * {
visibility: visible;
}

.preview-section {
position: absolute;
left: 0;
top: 0;
width: 100%;
box-shadow: none;
border: none;
padding: 20px;
}

.btn, .toggle-container, .input-section, header, footer {
display: none !important;
}

.invoice-preview {
box-shadow: none;
border: 1px solid #ccc;
}
}

/* Responsive Design */
@media (max-width: 1100px) {
.app-container {
flex-direction: column;
}

.input-section, .preview-section {
min-width: 100%;
}

.row {
flex-direction: column;
gap: 15px;
}
}

/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}

::-webkit-scrollbar-track {
background: #FFF8E7;
}

::-webkit-scrollbar-thumb {
background: linear-gradient(var(--gold-primary), var(--gold-secondary));
border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
background: var(--gold-dark);
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo-container">
<div class="logo">
<i class="fas fa-crown"></i>
</div>
<div>
<h1>Golden Invoice Pro</h1>
<p class="subtitle">Professionele facturatie software voor ondernemers - Luxe gouden tint ontwerp</p>
</div>
</div>
</header>

<div class="toggle-container">
<div class="toggle-label">Document Type:</div>
<div class="status-indicator">
<span id="toggleStatus">Factuur</span>
<label class="switch">
<input type="checkbox" id="invoiceToggle">
<span class="slider"></span>
</label>
<div class="status-dot"></div>
<span class="auto-save">Auto-opslag actief</span>
</div>
</div>

<div class="app-container">
<div class="input-section">
<h2><i class="fas fa-edit"></i> Factuurgegevens</h2>

<div class="row">
<div class="form-group">
<label for="invoiceNumber"><i class="fas fa-hashtag"></i> Factuurnummer</label>
<input type="text" id="invoiceNumber" value="GOLD-2023-001">
</div>
<div class="form-group">
<label for="invoiceDate"><i class="fas fa-calendar"></i> Datum</label>
<input type="date" id="invoiceDate" value="">
</div>
</div>

<div class="form-group">
<label for="companyName"><i class="fas fa-building"></i> Uw Bedrijfsnaam</label>
<input type="text" id="companyName" value="Golden Solutions BV">
</div>

<div class="row">
<div class="form-group">
<label for="companyKvk"><i class="fas fa-file-contract"></i> KVK-nummer</label>
<input type="text" id="companyKvk" value="12345678">
</div>
<div class="form-group">
<label for="companyVat"><i class="fas fa-percentage"></i> BTW-nummer</label>
<input type="text" id="companyVat" value="NL123456789B01">
</div>
</div>

<div class="form-group">
<label for="companyAddress"><i class="fas fa-map-marker-alt"></i> Uw Adres</label>
<textarea id="companyAddress" rows="3">Keizersgracht 123
1015 CJ Amsterdam</textarea>
</div>

<h3><i class="fas fa-coins"></i> BTW Tarief</h3>
<div class="form-group">
<div class="vat-selector">
<div class="vat-option">
<input type="radio" id="vat0" name="vatRate" value="0" checked>
<label for="vat0">0%</label>
</div>
<div class="vat-option">
<input type="radio" id="vat6" name="vatRate" value="6">
<label for="vat6">6%</label>
</div>
<div class="vat-option">
<input type="radio" id="vat12" name="vatRate" value="12">
<label for="vat12">12%</label>
</div>
<div class="vat-option">
<input type="radio" id="vat21" name="vatRate" value="21">
<label for="vat21">21%</label>
</div>
</div>
</div>

<h3><i class="fas fa-user-tie"></i> Klantgegevens</h3>

<div class="form-group">
<label for="clientName"><i class="fas fa-user"></i> Klantnaam</label>
<input type="text" id="clientName" value="Luxe Interieurs BV">
</div>

<div class="form-group">
<label for="clientAddress"><i class="fas fa-map-pin"></i> Klantadres</label>
<textarea id="clientAddress" rows="3">Herengracht 456
1017 CB Amsterdam</textarea>
</div>

<h3><i class="fas fa-box-open"></i> Producten & Diensten</h3>

<table class="items-table">
<thead>
<tr>
<th>Omschrijving</th>
<th>Aantal</th>
<th>Prijs</th>
<th>Totaal</th>
<th></th>
</tr>
</thead>
<tbody id="itemsTableBody">
</tbody>
</table>

<button class="btn btn-add" id="addItemBtn">
<i class="fas fa-plus-circle"></i> Nieuw item toevoegen
</button>

<div class="form-group">
<label for="notes"><i class="fas fa-sticky-note"></i> Opmerkingen</label>
<textarea id="notes" rows="4">Bedankt voor uw vertrouwen. Gelieve het bedrag binnen 30 dagen over te maken.

Bankgegevens:
IBAN: NL12 GOLD 0123 4567 89
Ten name van: Golden Solutions BV
Bank: GOLDENBANK

Voor vragen kunt u contact opnemen via facturatie@goldensolutions.nl</textarea>
</div>

<div class="actions">
<button class="btn" id="saveTemplateBtn">
<i class="fas fa-save"></i> Opslaan
</button>
<button class="btn btn-secondary" id="loadTemplateBtn">
<i class="fas fa-folder-open"></i> Laden
</button>
<button class="btn btn-print" id="printBtn">
<i class="fas fa-print"></i> Afdrukken
</button>
<button class="btn" id="emailBtn">
<i class="fas fa-paper-plane"></i> Versturen
</button>
</div>
</div>

<div class="preview-section">
<h2><i class="fas fa-eye"></i> Voorbeeld</h2>
<div class="invoice-preview" id="invoicePreview">
</div>
<div class="actions">
<button class="btn" id="downloadPDFBtn">
<i class="fas fa-file-pdf"></i> PDF Downloaden
</button>
<button class="btn btn-secondary" id="copyLinkBtn">
<i class="fas fa-copy"></i> Kopieer factuur
</button>
<button class="btn" id="newInvoiceBtn">
<i class="fas fa-file-invoice"></i> Nieuwe factuur
</button>
</div>
</div>
</div>

<footer>
<p><span class="gold-text">Golden Invoice Pro</span> © 2023 - Professionele facturatie software | <i class="fas fa-shield-alt"></i> 100% veilig & lokaal opslag</p>
<p>Alle gegevens worden alleen in uw browser opgeslagen - geen cloud opslag</p>
</footer>
</div>

// Voeg standaard items toe
addInvoiceItem('Consultancy uren', 10, 125);
addInvoiceItem('Webdesign premium pakket', 1, 1500);
addInvoiceItem('Onderhoud & support (maand)', 3, 200);

// Initialiseer preview
updateInvoicePreview();

// Event listeners
document.getElementById('addItemBtn').addEventListener('click', function() {
addInvoiceItem('Nieuwe dienst/product', 1, 99.99);
updateInvoicePreview();
});

document.getElementById('printBtn').addEventListener('click', function() {
window.print();
});

document.getElementById('downloadPDFBtn').addEventListener('click', function() {
downloadAsPDF();
});

document.getElementById('emailBtn').addEventListener('click', function() {
sendEmail();
});

document.getElementById('copyLinkBtn').addEventListener('click', function() {
copyInvoiceToClipboard();
});

document.getElementById('saveTemplateBtn').addEventListener('click', function() {
saveTemplate();
showNotification('Template opgeslagen!', 'success');
});

document.getElementById('loadTemplateBtn').addEventListener('click', function() {
loadTemplate();
showNotification('Template geladen!', 'success');
});

document.getElementById('newInvoiceBtn').addEventListener('click', function() {
createNewInvoice();
showNotification('Nieuwe factuur aangemaakt!', 'success');
});

// Toggle voor factuur/offerte
document.getElementById('invoiceToggle').addEventListener('change', function() {
const status = document.getElementById('toggleStatus');
if (this.checked) {
status.textContent = 'Offerte';
status.style.color = '#D4AF37';
} else {
status.textContent = 'Factuur';
status.style.color = '#996515';
}
updateInvoicePreview();
autoSave();
});

// BTW rate change listeners
document.querySelectorAll('input[name="vatRate"]').forEach(radio => {
radio.addEventListener('change', function() {
updateInvoicePreview();
autoSave();
});
});

// Auto-update bij invoer wijzigingen
const inputs = document.querySelectorAll('#input-section input, #input-section textarea, #input-section select');
inputs.forEach(input => {
input.addEventListener('input', function() {
updateInvoicePreview();
autoSave();
});
});

// Laad opgeslagen data
loadFromStorage();
});

// Functies
function getInvoiceType() {
return document.getElementById('invoiceToggle').checked ? 'Offerte' : 'Factuur';
}

function getSelectedVatRate() {
const selected = document.querySelector('input[name="vatRate"]:checked');
return parseFloat(selected ? selected.value : 21);
}

// Event listeners voor nieuwe rij
row.querySelector('.item-desc').addEventListener('input', function() {
updateInvoicePreview();
autoSave();
});
row.querySelector('.item-qty').addEventListener('input', function() {
updateItemTotal(row);
updateInvoicePreview();
autoSave();
});
row.querySelector('.item-price').addEventListener('input', function() {
updateItemTotal(row);
updateInvoicePreview();
autoSave();
});

row.querySelector('.remove-item-btn').addEventListener('click', function() {
if (confirm('Weet u zeker dat u dit item wilt verwijderen?')) {
row.remove();
updateInvoicePreview();
autoSave();
}
});
}

function updateItemTotal(row) {
const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
const price = parseFloat(row.querySelector('.item-price').value) || 0;
const total = qty * price;
row.querySelector('.item-total').textContent = '€ ' + total.toFixed(2);
}

function updateInvoicePreview() {
// Verzamel gegevens
const isOfferte = document.getElementById('invoiceToggle').checked;
const invoiceNumber = document.getElementById('invoiceNumber').value;
const invoiceDate = document.getElementById('invoiceDate').value;
const companyName = document.getElementById('companyName').value;
const companyKvk = document.getElementById('companyKvk').value;
const companyVat = document.getElementById('companyVat').value;
const companyAddress = document.getElementById('companyAddress').value;
const clientName = document.getElementById('clientName').value;
const clientAddress = document.getElementById('clientAddress').value;
const notes = document.getElementById('notes').value;
const vatRate = getSelectedVatRate();

// Verzamel items
const items = [];
let subtotal = 0;

document.querySelectorAll('#itemsTableBody tr').forEach(row => {
const desc = row.querySelector('.item-desc').value;
const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
const price = parseFloat(row.querySelector('.item-price').value) || 0;
const total = qty * price;

if (desc.trim() !== '') {
items.push({desc, qty, price, total});
subtotal += total;
}
});

// Bereken BTW en totaal
const vatAmount = subtotal * (vatRate / 100);
const totalAmount = subtotal + vatAmount;

// Formatteer datum
const formattedDate = new Date(invoiceDate).toLocaleDateString('nl-NL', {
year: 'numeric',
month: 'long',
day: 'numeric'
});

// Bouw preview
const invoiceType = getInvoiceType();
const invoiceTitle = isOfferte ? 'OFFERTE' : 'FACTUUR';

// Bepaal BTW label
let vatLabel = `BTW (${vatRate}%)`;
if (vatRate === 0) vatLabel = 'BTW (0% - vrijgesteld)';
else if (vatRate === 6) vatLabel = 'BTW (6% - verlaagd)';
else if (vatRate === 12) vatLabel = 'BTW (12% - verlaagd)';

const invoiceHTML = `
<div class="invoice-type">${invoiceType}</div>
<div class="invoice-header">
<div>
<div class="invoice-title">${invoiceTitle}</div>
<div class="invoice-number">${invoiceType}nummer: <strong>${invoiceNumber}</strong></div>
</div>
<div style="text-align: right;">
<div><strong>Datum:</strong> ${formattedDate}</div>
<div><strong>BTW-tarief:</strong> <span class="vat-badge">${vatRate}%</span></div>
</div>
</div>

<div class="invoice-info">
<div class="company-info">
<div class="info-label">AFZENDER:</div>
<div><strong>${companyName}</strong></div>
<div>${companyAddress.replace(/\n/g, '<br>')}</div>
<div>KVK: ${companyKvk}</div>
<div>BTW: ${companyVat}</div>
</div>
<div class="client-info">
<div class="info-label">GEADRESSEERDE:</div>
<div><strong>${clientName}</strong></div>
<div>${clientAddress.replace(/\n/g, '<br>')}</div>
</div>
</div>

<table class="invoice-table">
<thead>
<tr>
<th>Omschrijving</th>
<th>Aantal</th>
<th>Prijs per eenheid</th>
<th class="text-right">Totaal</th>
</tr>
</thead>
<tbody>
${itemsHTML}
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-right"><strong>Subtotaal:</strong></td>
<td class="text-right">€ ${subtotal.toFixed(2)}</td>
</tr>
<tr>
<td colspan="3" class="text-right"><strong>${vatLabel}:</strong></td>
<td class="text-right">€ ${vatAmount.toFixed(2)}</td>
</tr>
<tr class="total-row">
<td colspan="3" class="text-right"><strong>TOTAAL:</strong></td>
<td class="text-right">€ ${totalAmount.toFixed(2)}</td>
</tr>
</tfoot>
</table>

<div class="footer-note">
<p><strong>Opmerkingen:</strong></p>
<p>${notes.replace(/\n/g, '<br>')}</p>
${isOfferte ? '<p style="color: #D4AF37; font-weight: 600; margin-top: 10px;"><i class="fas fa-clock"></i> Deze offerte is geldig tot 30 dagen na datum.</p>' :
'<p style="color: #D4AF37; font-weight: 600; margin-top: 10px;"><i class="fas fa-calendar-check"></i> Gelieve te voldoen binnen 30 dagen na factuurdatum.</p>'}
</div>
`;

document.getElementById('invoicePreview').innerHTML = invoiceHTML;
}

// Storage functies
function autoSave() {
const data = {
invoiceNumber: document.getElementById('invoiceNumber').value,
invoiceDate: document.getElementById('invoiceDate').value,
companyName: document.getElementById('companyName').value,
companyKvk: document.getElementById('companyKvk').value,
companyVat: document.getElementById('companyVat').value,
companyAddress: document.getElementById('companyAddress').value,
clientName: document.getElementById('clientName').value,
clientAddress: document.getElementById('clientAddress').value,
notes: document.getElementById('notes').value,
vatRate: getSelectedVatRate(),
isOfferte: document.getElementById('invoiceToggle').checked,
items: []
};

localStorage.setItem('goldenInvoiceData', JSON.stringify(data));
}

function loadFromStorage() {
const saved = localStorage.getItem('goldenInvoiceData');
if (saved) {
try {
const data = JSON.parse(saved);
document.getElementById('invoiceNumber').value = data.invoiceNumber || 'GOLD-' + new Date().getFullYear() + '-001';
document.getElementById('invoiceDate').value = data.invoiceDate || '';
document.getElementById('companyName').value = data.companyName || 'Golden Solutions BV';
document.getElementById('companyKvk').value = data.companyKvk || '12345678';
document.getElementById('companyVat').value = data.companyVat || 'NL123456789B01';
document.getElementById('companyAddress').value = data.companyAddress || 'Keizersgracht 123\n1015 CJ Amsterdam';
document.getElementById('clientName').value = data.clientName || 'Luxe Interieurs BV';
document.getElementById('clientAddress').value = data.clientAddress || 'Herengracht 456\n1017 CB Amsterdam';
document.getElementById('notes').value = data.notes || '';
document.getElementById('invoiceToggle').checked = data.isOfferte || false;
document.getElementById('toggleStatus').textContent = data.isOfferte ? 'Offerte' : 'Factuur';

if (data.vatRate !== undefined) {
document.querySelector(`input[name="vatRate"][value="${data.vatRate}"]`).checked = true;
}

document.getElementById('itemsTableBody').innerHTML = '';
if (data.items && data.items.length > 0) {
data.items.forEach(item => {
addInvoiceItem(item.desc, parseFloat(item.qty), parseFloat(item.price));
});
}

updateInvoicePreview();
} catch (e) {
console.error('Fout bij laden:', e);
}
}
}

function createNewInvoice() {
if (confirm('Weet u zeker dat u een nieuwe factuur wilt aanmaken? Niet-opgeslagen wijzigingen gaan verloren.')) {
document.getElementById('invoiceNumber').value = 'GOLD-' + new Date().getFullYear() + '-' + (Math.floor(Math.random() * 900) + 100);
document.getElementById('invoiceDate').value = new Date().toISOString().split('T')[0];
document.getElementById('clientName').value = '';
document.getElementById('clientAddress').value = '';
document.getElementById('itemsTableBody').innerHTML = '';
addInvoiceItem('Dienst/product', 1, 0);
updateInvoicePreview();
}
}

function downloadAsPDF() {
alert('PDF download functie wordt geladen...\nIn een volledige versie zou dit een PDF genereren via jsPDF of vergelijkbare library.');
}

function copyInvoiceToClipboard() {
const invoiceText = `
${getInvoiceType()}: ${document.getElementById('invoiceNumber').value}
Datum: ${new Date(document.getElementById('invoiceDate').value).toLocaleDateString('nl-NL')}

Van: ${document.getElementById('companyName').value}
${document.getElementById('companyAddress').value.replace(/\n/g, ', ')}

Aan: ${document.getElementById('clientName').value}
${document.getElementById('clientAddress').value.replace(/\n/g, ', ')}

Totaal: € ${calculateTotal().toFixed(2)}
`;
navigator.clipboard.writeText(invoiceText).then(() => {
showNotification('Factuurgegevens gekopieerd!', 'success');
});
}

function calculateTotal() {
let subtotal = 0;
document.querySelectorAll('#itemsTableBody tr').forEach(row => {
const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
const price = parseFloat(row.querySelector('.item-price').value) || 0;
subtotal += qty * price;
});
const vatRate = getSelectedVatRate();
return subtotal + (subtotal * vatRate / 100);
}

function showNotification(message, type) {
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
background: ${type === 'success' ? 'linear-gradient(135deg, #2E8B57, #3CB371)' : 'linear-gradient(135deg, #DC143C, #B22222)'};
color: white;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
z-index: 1000;
font-weight: 600;
`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
}
</script>
</body>
</html>

Gouden Factuuratie Of Offerte Programma Deepseek Html 20260123 Ac 4 Bd 7 Html

HTML bestand – 29,9 KB 40 downloads

Download

Dit is waar onze reis begint. Maak kennis met ons bedrijf en wat we doen. Wij staan voor kwaliteit en goede service. Sluit je aan, terwijl we samen groeien en succesvol worden. We zijn blij dat je hier bent om deel uit te maken van ons verhaal.

Laten we beginnen