<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dental Lab Conformity Certificate</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.form-section {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
background-color: #f9f9f9;
}
h1, h2 {
color: #2c3e50;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, select, textarea {
width: 100%;
padding: 8px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #3498db;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
button:hover {
background-color: #2980b9;
}
.download-btn {
background-color: #e74c3c;
}
.download-btn:hover {
background-color: #c0392b;
}
#certificatePreview {
border: 1px solid #ddd;
padding: 20px;
margin-top: 20px;
background-color: white;
}
</style>
</head>
<body>
<h1>Dental Lab Conformity Certificate Generator</h1>
<div class="form-section">
<label for="language">Language / Taal:</label>
<select id="language" onchange="updateLanguage()">
<option value="en">English</option>
<option value="nl">Nederlands</option>
<option value="fr">Français</option>
<option value="de">Deutsch</option>
</select>
</div>
<div class="form-section">
<h2 id="labTitle">Laboratory Information</h2>
<label for="labName">Laboratory Name:</label>
<input type="text" id="labName" placeholder="Enter laboratory name">
<label for="labAddress">Laboratory Address:</label>
<textarea id="labAddress" rows="3" placeholder="Enter laboratory address"></textarea>
<label for="labContact">Laboratory Contact:</label>
<input type="text" id="labContact" placeholder="Enter contact information">
<label for="certNumber">Certificate Number:</label>
<input type="text" id="certNumber" placeholder="Enter certificate number">
</div>
<div class="form-section">
<h2 id="patientTitle">Patient & Product Information</h2>
<label for="patientId">Patient ID:</label>
<input type="text" id="patientId" placeholder="Enter patient ID">
<label for="dentist">Dentist:</label>
<input type="text" id="dentist" placeholder="Enter dentist name">
<label for="productType">Product Type:</label>
<select id="productType">
<option value="crown">Crown</option>
<option value="bridge">Bridge</option>
<option value="denture">Denture</option>
<option value="implant">Implant Restoration</option>
<option value="veneer">Veneer</option>
<option value="inlay">Inlay/Onlay</option>
<option value="other">Other</option>
</select>
<label for="productDesc">Product Description:</label>
<textarea id="productDesc" rows="3" placeholder="Enter product description"></textarea>
<label for="dateCompleted">Date Completed:</label>
<input type="date" id="dateCompleted">
</div>
<div class="form-section">
<h2 id="declarationTitle">Declaration</h2>
<textarea id="declaration" rows="5">We hereby declare that the dental technical product described above has been manufactured in accordance with the applicable regulations and standards for medical devices. The product has been manufactured with materials that comply with CE marking and according to the specifications of the treating dentist.</textarea>
<label for="standards">Applied Standards:</label>
<input type="text" id="standards" value="EN ISO 13485:2016, EN ISO 14971:2019, Regulation (EU) 2017/745">
</div>
<button id="previewBtn" onclick="generatePreview()">Preview Certificate</button>
<button id="downloadBtn" onclick="generatePDF()" class="download-btn">Download PDF</button>
<div id="certificatePreview"></div>
<script>
// Translations
const translations = {
en: {
labTitle: "Laboratory Information",
labName: "Laboratory Name:",
labAddress: "Laboratory Address:",
labContact: "Laboratory Contact:",
certNumber: "Certificate Number:",
patientTitle: "Patient & Product Information",
patientId: "Patient ID:",
dentist: "Dentist:",
productType: "Product Type:",
productDesc: "Product Description:",
dateCompleted: "Date Completed:",
declarationTitle: "Declaration",
standards: "Applied Standards:",
previewBtn: "Preview Certificate",
downloadBtn: "Download PDF",
certificateTitle: "Conformity Certificate",
certifiedBy: "Certified by",
date: "Date",
signature: "Signature",
labInfo: "Laboratory Information",
patientInfo: "Patient Information",
productInfo: "Product Information",
declaration: "Declaration",
appliedStandards: "Applied Standards",
defaultDeclaration: "We hereby declare that the dental technical product described above has been manufactured in accordance with the applicable regulations and standards for medical devices. The product has been manufactured with materials that comply with CE marking and according to the specifications of the treating dentist.",
productTypes: {
crown: "Crown",
bridge: "Bridge",
denture: "Denture",
implant: "Implant Restoration",
veneer: "Veneer",
inlay: "Inlay/Onlay",
other: "Other"
}
},
nl: {
labTitle: "Laboratorium Gegevens",
labName: "Naam Laboratorium:",
labAddress: "Adres Laboratorium:",
labContact: "Contact Laboratorium:",
certNumber: "Certificaatnummer:",
patientTitle: "Patiënt- en Productinformatie",
patientId: "Patiënt ID:",
dentist: "Tandarts:",
productType: "Product Type:",
productDesc: "Productbeschrijving:",
dateCompleted: "Datum Voltooid:",
declarationTitle: "Conformiteitsverklaring",
standards: "Toegepaste Normen:",
previewBtn: "Voorbeeld Bekijken",
downloadBtn: "PDF Downloaden",
certificateTitle: "Conformiteitsattest",
certifiedBy: "Gecertificeerd door",
date: "Datum",
signature: "Handtekening",
labInfo: "Laboratorium Informatie",
patientInfo: "Patiënt Informatie",
productInfo: "Product Informatie",
declaration: "Verklaring",
appliedStandards: "Toegepaste Normen",
defaultDeclaration: "Hierbij verklaren wij dat het hierboven beschreven tandtechnische product is vervaardigd volgens de geldende regelgeving en normen voor medische hulpmiddelen. Het product is vervaardigd met materialen die voldoen aan de CE-markering en volgens de specificaties van de behandelend tandarts.",
productTypes: {
crown: "Kroon",
bridge: "Brug",
denture: "Prothese",
implant: "Implantaatrestauratie",
veneer: "Facing",
inlay: "Inlay/Onlay",
other: "Overig"
}
},
fr: {
labTitle: "Détails du Laboratoire",
labName: "Nom du Laboratoire:",
labAddress: "Adresse du Laboratoire:",
labContact: "Contact du Laboratoire:",
certNumber: "Numéro de Certificat:",
patientTitle: "Informations sur le Patient et le Produit",
patientId: "ID Patient:",
dentist: "Dentiste:",
productType: "Type de Produit:",
productDesc: "Description du Produit:",
dateCompleted: "Date d'Achèvement:",
declarationTitle: "Déclaration de Conformité",
standards: "Normes Appliquées:",
previewBtn: "Aperçu du Certificat",
downloadBtn: "Télécharger PDF",
certificateTitle: "Certificat de Conformité",
certifiedBy: "Certifié par",
date: "Date",
signature: "Signature",
labInfo: "Informations du Laboratoire",
patientInfo: "Informations du Patient",
productInfo: "Informations du Produit",
declaration: "Déclaration",
appliedStandards: "Normes Appliquées",
defaultDeclaration: "Nous déclarons par la présente que le produit technique dentaire décrit ci-dessus a été fabriqué conformément aux réglementations et normes applicables aux dispositifs médicaux. Le produit a été fabriqué avec des matériaux conformes au marquage CE et selon les spécifications du dentiste traitant.",
productTypes: {
crown: "Couronne",
bridge: "Bridge",
denture: "Prothèse",
implant: "Restauration sur Implant",
veneer: "Facette",
inlay: "Inlay/Onlay",
other: "Autre"
}
},
de: {
labTitle: "Labordetails",
labName: "Laborname:",
labAddress: "Laboradresse:",
labContact: "Laborkontakt:",
certNumber: "Zertifikatnummer:",
patientTitle: "Patienten- und Produktinformationen",
patientId: "Patienten-ID:",
dentist: "Zahnarzt:",
productType: "Produkttyp:",
productDesc: "Produktbeschreibung:",
dateCompleted: "Fertigstellungsdatum:",
declarationTitle: "Konformitätserklärung",
standards: "Angewandte Normen:",
previewBtn: "Vorschau Zertifikat",
downloadBtn: "PDF Herunterladen",
certificateTitle: "Konformitätsbescheinigung",
certifiedBy: "Zertifiziert durch",
date: "Datum",
signature: "Unterschrift",
labInfo: "Laborinformationen",
patientInfo: "Patienteninformationen",
productInfo: "Produktinformationen",
declaration: "Erklärung",
appliedStandards: "Angewandte Normen",
defaultDeclaration: "Hiermit erklären wir, dass das oben beschriebene zahntechnische Produkt gemäß den geltenden Vorschriften und Normen für Medizinprodukte hergestellt wurde. Das Produkt wurde mit Materialien hergestellt, die der CE-Kennzeichnung entsprechen und gemäß den Spezifikationen des behandelnden Zahnarztes.",
productTypes: {
crown: "Krone",
bridge: "Brücke",
denture: "Prothese",
implant: "Implantatversorgung",
veneer: "Veneer",
inlay: "Inlay/Onlay",
other: "Sonstiges"
}
}
};
let currentLanguage = 'en';
// Set today's date as default when page loads
window.onload = function() {
document.getElementById('dateCompleted').value = new Date().toISOString().split('T')[0];
updateLanguage(); // Initialize with default language
};
// Update UI with selected language
function updateLanguage() {
currentLanguage = document.getElementById('language').value;
const texts = translations[currentLanguage];
// Update headings
document.getElementById('labTitle').textContent = texts.labTitle;
document.getElementById('patientTitle').textContent = texts.patientTitle;
document.getElementById('declarationTitle').textContent = texts.declarationTitle;
// Update button text
document.getElementById('previewBtn').textContent = texts.previewBtn;
document.getElementById('downloadBtn').textContent = texts.downloadBtn;
// Update form labels
updateFormLabels();
// Set default declaration if empty
const declarationField = document.getElementById('declaration');
if (!declarationField.value || declarationField.value === translations.en.defaultDeclaration ||
declarationField.value === translations.nl.defaultDeclaration ||
declarationField.value === translations.fr.defaultDeclaration ||
declarationField.value === translations.de.defaultDeclaration) {
declarationField.value = texts.defaultDeclaration;
}
// Update product type dropdown
updateProductTypes();
}
// Update all form labels
function updateFormLabels() {
const texts = translations[currentLanguage];
const labels = document.querySelectorAll('label');
labels.forEach(label => {
const forAttr = label.getAttribute('for');
if (forAttr && texts[forAttr]) {
label.textContent = texts[forAttr];
}
});
}
// Update product type dropdown
function updateProductTypes() {
const texts = translations[currentLanguage];
const productTypeSelect = document.getElementById('productType');
const currentValue = productTypeSelect.value;
productTypeSelect.innerHTML = '';
for (const [value, label] of Object.entries(texts.productTypes)) {
const option = document.createElement('option');
option.value = value;
option.textContent = label;
productTypeSelect.appendChild(option);
}
productTypeSelect.value = currentValue;
}
// Generate certificate preview
function generatePreview() {
const preview = document.getElementById('certificatePreview');
// Get form values
const labName = document.getElementById('labName').value || 'Lab Name';
const labAddress = document.getElementById('labAddress').value || 'Lab Address';
const labContact = document.getElementById('labContact').value || 'Lab Contact';
const certNumber = document.getElementById('certNumber').value || 'Certificate Number';
const patientId = document.getElementById('patientId').value || 'Patient ID';
const dentist = document.getElementById('dentist').value || 'Dentist Name';
const productTypeSelect = document.getElementById('productType');
const productTypeText = productTypeSelect.options[productTypeSelect.selectedIndex].text;
const productDesc = document.getElementById('productDesc').value || 'Product Description';
const dateCompleted = document.getElementById('dateCompleted').value;
const formattedDate = dateCompleted ? new Date(dateCompleted).toLocaleDateString() : '';
const declaration = document.getElementById('declaration').value;
const standards = document.getElementById('standards').value;
// Create certificate HTML
preview.innerHTML = `
<div id="certificate" style="padding: 20px; font-family: Arial, sans-serif; border: 1px solid #333; width: 210mm; min-height: 277mm; box-sizing: border-box;">
<div style="text-align: center; margin-bottom: 20px;">
<h1 style="color: #2c3e50;">Conformity Certificate</h1>
<p><strong>${certNumber}</strong></p>
</div>
<div style="margin-bottom: 20px;">
<h2 style="color: #2c3e50;">Laboratory Information</h2>
<p><strong>${labName}</strong><br>
${labAddress.replace(/\n/g, '<br>')}<br>
${labContact}</p>
</div>
<div style="margin-bottom: 20px;">
<h2 style="color: #2c3e50;">Patient Information</h2>
<p><strong>Patient ID:</strong> ${patientId}<br>
<strong>Dentist:</strong> ${dentist}</p>
</div>
<div style="margin-bottom: 20px;">
<h2 style="color: #2c3e50;">Product Information</h2>
<p><strong>Product Type:</strong> ${productTypeText}<br>
<strong>Product Description:</strong> ${productDesc}<br>
<strong>Date Completed:</strong> ${formattedDate}</p>
</div>
<div style="margin-bottom: 20px;">
<h2 style="color: #2c3e50;">Declaration</h2>
<p>${declaration}</p>
</div>
<div style="margin-bottom: 30px;">
<h2 style="color: #2c3e50;">Applied Standards</h2>
<p>${standards}</p>
</div>
<div style="margin-top: 50px;">
<div style="display: flex; justify-content: space-between;">
<div style="flex: 1; border-top: 1px solid #000; margin: 0 10px; text-align: center;">
<p>Certified by: ${labName}</p>
</div>
<div style="flex: 1; border-top: 1px solid #000; margin: 0 10px; text-align: center;">
<p>Date: ${new Date().toLocaleDateString()}</p>
</div>
<div style="flex: 1; border-top: 1px solid #000; margin: 0 10px; text-align: center;">
<p>Signature</p>
</div>
</div>
</div>
</div>
`;
}
// Generate and download PDF
function generatePDF() {
// Update preview first
generatePreview();
// Get the certificate element
const element = document.getElementById('certificate');
// Wait for the HTML to render completely
setTimeout(() => {
// Use html2canvas with higher scale for better quality
html2canvas(element, {
scale: 2, // Higher scale for better quality
useCORS: true,
logging: false
}).then(canvas => {
// The canvas now represents the certificate element
const imgData = canvas.toDataURL('image/png');
// Initialize jsPDF with A4 dimensions (210 x 297 mm)
const { jsPDF } = window.jspdf;
const pdf = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4' // Explicitly set A4 format
});
// A4 dimensions
const pdfWidth = 210; // A4 width in mm
const pdfHeight = 297; // A4 height in mm
// Calculate dimensions to fit content on A4 while maintaining aspect ratio
const imgWidth = canvas.width;
const imgHeight = canvas.height;
let ratio = Math.min((pdfWidth - 20) / imgWidth, (pdfHeight - 20) / imgHeight);
// Calculate centered position
const imgX = (pdfWidth - imgWidth * ratio) / 2;
const imgY = 10; // Top margin
// Add image to PDF
pdf.addImage(imgData, 'PNG', imgX, imgY, imgWidth * ratio, imgHeight * ratio);
// Save PDF with filename based on certificate number
pdf.save(`dental_certificate_${document.getElementById('certNumber').value || 'certificate'}.pdf`);
});
}, 500); // Give a 500ms delay to ensure rendering is complete
}
</script>
</body>
</html>
