4c46e8bcdd
Complete Next.js 16 application with 13 fully implemented modules: Email Signature, Word XML Generator, Registratura, Dashboard, Tag Manager, IT Inventory, Address Book, Password Vault, Mini Utilities, Prompt Generator, Digital Signatures, Word Templates, and AI Chat. Includes core platform systems (module registry, feature flags, storage abstraction, i18n, theming, auth stub, tagging), 16 technical documentation files, Docker deployment config, and legacy HTML tool reference. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
456 lines
30 KiB
HTML
456 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ro">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Configurator semnatura e-mail</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
body { font-family: 'Inter', sans-serif; }
|
|
.no-select { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
|
|
|
|
input[type=range] {
|
|
-webkit-appearance: none; appearance: none; width: 100%; height: 4px;
|
|
background: #e5e7eb; border-radius: 5px; outline: none; transition: background 0.2s ease;
|
|
}
|
|
input[type=range]:hover { background: #d1d5db; }
|
|
input[type=range]::-webkit-slider-thumb {
|
|
-webkit-appearance: none; appearance: none; width: 12px; height: 20px;
|
|
background: #22B5AB; cursor: pointer; border-radius: 4px;
|
|
margin-top: -8px; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
|
|
}
|
|
input[type=range]::-webkit-slider-thumb:active { transform: scale(1.15); box-shadow: 0 2px 6px rgba(0,0,0,0.3); }
|
|
input[type=range]::-moz-range-thumb {
|
|
width: 12px; height: 20px; background: #22B5AB; cursor: pointer;
|
|
border-radius: 4px; border: none; box-shadow: 0 1px 3px rgba(0,0,0,0.2);
|
|
}
|
|
#preview-wrapper { transition: transform 0.2s ease-in-out; transform-origin: top left; }
|
|
.color-swatch {
|
|
width: 24px; height: 24px; border-radius: 9999px; cursor: pointer;
|
|
border: 2px solid transparent; transition: all 0.2s ease;
|
|
}
|
|
.color-swatch.active { border-color: #22B5AB; transform: scale(1.1); box-shadow: 0 0 0 2px white, 0 0 0 4px #22B5AB; }
|
|
.collapsible-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
|
|
.collapsible-content.open { max-height: 1000px; /* Valoare mare pentru a permite extinderea */ }
|
|
.collapsible-trigger svg { transition: transform 0.3s ease; }
|
|
.collapsible-trigger.open svg { transform: rotate(90deg); }
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-800 no-select">
|
|
|
|
<div class="container mx-auto p-4 md:p-8">
|
|
<header class="text-center mb-10">
|
|
<h1 class="text-3xl md:text-4xl font-bold text-gray-900">Configurator semnatura e-mail</h1>
|
|
</header>
|
|
|
|
<div class="flex flex-col lg:flex-row gap-8">
|
|
|
|
<!-- Panoul de control -->
|
|
<aside class="lg:w-2/5 bg-white p-6 rounded-2xl shadow-lg border border-gray-200">
|
|
<div id="controls">
|
|
<!-- Secțiunea Date Personale -->
|
|
<div class="mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Date Personale</h3>
|
|
<div class="space-y-3">
|
|
<div>
|
|
<label for="input-prefix" class="block text-sm font-medium text-gray-700 mb-1">Titulatură (prefix)</label>
|
|
<input type="text" id="input-prefix" value="arh." class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500">
|
|
</div>
|
|
<div>
|
|
<label for="input-name" class="block text-sm font-medium text-gray-700 mb-1">Nume și Prenume</label>
|
|
<input type="text" id="input-name" value="Marius TĂRĂU" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500">
|
|
</div>
|
|
<div>
|
|
<label for="input-title" class="block text-sm font-medium text-gray-700 mb-1">Funcția</label>
|
|
<input type="text" id="input-title" value="Arhitect • Beletage SRL" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500">
|
|
</div>
|
|
<div>
|
|
<label for="input-phone" class="block text-sm font-medium text-gray-700 mb-1">Telefon (format 07xxxxxxxx)</label>
|
|
<input type="tel" id="input-phone" value="0785123433" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Culori Text (Collapsible) -->
|
|
<div class="mb-4">
|
|
<div class="collapsible-trigger flex justify-between items-center cursor-pointer border-b pb-2 mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-800">Culori Text</h3>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</div>
|
|
<div class="collapsible-content">
|
|
<div id="color-controls" class="space-y-2 pt-2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Secțiunea Stil & Aranjare (Collapsible) -->
|
|
<div class="mb-4">
|
|
<div class="collapsible-trigger flex justify-between items-center cursor-pointer border-b pb-2 mb-2">
|
|
<h3 class="text-lg font-semibold text-gray-800">Stil & Aranjare</h3>
|
|
<svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
|
|
</div>
|
|
<div class="collapsible-content">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-3 pt-2">
|
|
<div>
|
|
<label for="green-line-width" class="block text-sm font-medium text-gray-700 mb-2">Lungime linie verde (<span id="green-line-value">97</span>px)</label>
|
|
<input id="green-line-width" type="range" min="50" max="300" value="97">
|
|
</div>
|
|
<div>
|
|
<label for="section-spacing" class="block text-sm font-medium text-gray-700 mb-2">Spațiere vert. secțiuni (<span id="section-spacing-value">10</span>px)</label>
|
|
<input id="section-spacing" type="range" min="0" max="30" value="10">
|
|
</div>
|
|
<div>
|
|
<label for="logo-spacing" class="block text-sm font-medium text-gray-700 mb-2">Spațiere vert. Logo (<span id="logo-spacing-value">10</span>px)</label>
|
|
<input id="logo-spacing" type="range" min="0" max="30" value="10">
|
|
</div>
|
|
<div>
|
|
<label for="title-spacing" class="block text-sm font-medium text-gray-700 mb-2">Spațiere vert. funcție (<span id="title-spacing-value">2</span>px)</label>
|
|
<input id="title-spacing" type="range" min="0" max="20" value="2">
|
|
</div>
|
|
<div>
|
|
<label for="b-gutter-width" class="block text-sm font-medium text-gray-700 mb-2">Aliniere contact (<span id="b-gutter-value">13</span>px)</label>
|
|
<input id="b-gutter-width" type="range" min="0" max="150" value="13">
|
|
</div>
|
|
<div>
|
|
<label for="icon-text-spacing" class="block text-sm font-medium text-gray-700 mb-2">Spațiu Icon-Text (<span id="icon-text-spacing-value">5</span>px)</label>
|
|
<input id="icon-text-spacing" type="range" min="-10" max="30" value="5">
|
|
</div>
|
|
<div>
|
|
<label for="icon-vertical-pos" class="block text-sm font-medium text-gray-700 mb-2">Aliniere vert. iconițe (<span id="icon-vertical-value">1</span>px)</label>
|
|
<input id="icon-vertical-pos" type="range" min="-10" max="10" value="1">
|
|
</div>
|
|
<div>
|
|
<label for="motto-spacing" class="block text-sm font-medium text-gray-700 mb-2">Spațiere vert. motto (<span id="motto-spacing-value">3</span>px)</label>
|
|
<input id="motto-spacing" type="range" min="0" max="20" value="3">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Opțiuni -->
|
|
<div class="mb-4">
|
|
<h3 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-4">Opțiuni</h3>
|
|
<div class="space-y-2">
|
|
<label class="flex items-center space-x-3 cursor-pointer">
|
|
<input type="checkbox" id="reply-variant-checkbox" class="h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500">
|
|
<span class="text-sm font-medium text-gray-700">Variantă simplă (fără logo/adresă)</span>
|
|
</label>
|
|
<label class="flex items-center space-x-3 cursor-pointer">
|
|
<input type="checkbox" id="super-reply-variant-checkbox" class="h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500">
|
|
<span class="text-sm font-medium text-gray-700">Super-simplă (doar nume/telefon)</span>
|
|
</label>
|
|
<label class="flex items-center space-x-3 cursor-pointer">
|
|
<input type="checkbox" id="use-svg-checkbox" class="h-4 w-4 rounded border-gray-300 text-teal-600 focus:ring-teal-500">
|
|
<span class="text-sm font-medium text-gray-700">Folosește imagini SVG (calitate maximă)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Buton de Export -->
|
|
<div class="mt-8 pt-6 border-t">
|
|
<button id="export-btn" class="w-full bg-teal-600 text-white font-bold py-3 px-4 rounded-lg hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition-all duration-300 ease-in-out transform hover:scale-105">
|
|
Descarcă HTML
|
|
</button>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Previzualizare Live -->
|
|
<main class="lg:w-3/5 bg-white p-6 rounded-2xl shadow-lg border border-gray-200 overflow-hidden">
|
|
<div class="flex justify-between items-center border-b pb-3 mb-4">
|
|
<h2 class="text-2xl font-bold text-gray-900">Previzualizare Live</h2>
|
|
<button id="zoom-btn" class="text-sm bg-gray-200 text-gray-700 px-3 py-1 rounded-md hover:bg-gray-300">Zoom 100%</button>
|
|
</div>
|
|
<div id="preview-wrapper" class="overflow-auto">
|
|
<div id="preview-container">
|
|
<!-- Aici este inserat codul HTML al semnăturii -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const controls = {
|
|
prefix: document.getElementById('input-prefix'),
|
|
name: document.getElementById('input-name'),
|
|
title: document.getElementById('input-title'),
|
|
phone: document.getElementById('input-phone'),
|
|
greenLine: document.getElementById('green-line-width'),
|
|
gutter: document.getElementById('b-gutter-width'),
|
|
iconTextSpacing: document.getElementById('icon-text-spacing'),
|
|
iconVertical: document.getElementById('icon-vertical-pos'),
|
|
mottoSpacing: document.getElementById('motto-spacing'),
|
|
sectionSpacing: document.getElementById('section-spacing'),
|
|
titleSpacing: document.getElementById('title-spacing'),
|
|
logoSpacing: document.getElementById('logo-spacing'),
|
|
replyCheckbox: document.getElementById('reply-variant-checkbox'),
|
|
superReplyCheckbox: document.getElementById('super-reply-variant-checkbox'),
|
|
useSvgCheckbox: document.getElementById('use-svg-checkbox'),
|
|
exportBtn: document.getElementById('export-btn'),
|
|
zoomBtn: document.getElementById('zoom-btn'),
|
|
colorControls: document.getElementById('color-controls')
|
|
};
|
|
|
|
const values = {
|
|
greenLine: document.getElementById('green-line-value'),
|
|
gutter: document.getElementById('b-gutter-value'),
|
|
iconTextSpacing: document.getElementById('icon-text-spacing-value'),
|
|
iconVertical: document.getElementById('icon-vertical-value'),
|
|
mottoSpacing: document.getElementById('motto-spacing-value'),
|
|
sectionSpacing: document.getElementById('section-spacing-value'),
|
|
titleSpacing: document.getElementById('title-spacing-value'),
|
|
logoSpacing: document.getElementById('logo-spacing-value')
|
|
};
|
|
|
|
const previewContainer = document.getElementById('preview-container');
|
|
const previewWrapper = document.getElementById('preview-wrapper');
|
|
|
|
const imageSets = {
|
|
png: {
|
|
logo: 'https://beletage.ro/img/Semnatura-Logo.png',
|
|
greySlash: 'https://beletage.ro/img/Grey-slash.png',
|
|
greenSlash: 'https://beletage.ro/img/Green-slash.png'
|
|
},
|
|
svg: {
|
|
logo: 'https://beletage.ro/img/Logo-Beletage.svg',
|
|
greySlash: 'https://beletage.ro/img/Grey-slash.svg',
|
|
greenSlash: 'https://beletage.ro/img/Green-slash.svg'
|
|
}
|
|
};
|
|
|
|
const beletageColors = {
|
|
verde: '#22B5AB',
|
|
griInchis: '#54504F',
|
|
griDeschis: '#A7A9AA',
|
|
negru: '#323232'
|
|
};
|
|
|
|
const colorConfig = {
|
|
prefix: { label: 'Titulatură', default: beletageColors.griInchis },
|
|
name: { label: 'Nume', default: beletageColors.griInchis },
|
|
title: { label: 'Funcție', default: beletageColors.griDeschis },
|
|
address: { label: 'Adresă', default: beletageColors.griDeschis },
|
|
phone: { label: 'Telefon', default: beletageColors.griInchis },
|
|
website: { label: 'Website', default: beletageColors.griInchis },
|
|
motto: { label: 'Motto', default: beletageColors.verde }
|
|
};
|
|
|
|
let currentColors = {};
|
|
|
|
function createColorPickers() {
|
|
for (const [key, config] of Object.entries(colorConfig)) {
|
|
currentColors[key] = config.default;
|
|
const controlRow = document.createElement('div');
|
|
controlRow.className = 'flex items-center justify-between';
|
|
const label = document.createElement('span');
|
|
label.className = 'text-sm font-medium text-gray-700';
|
|
label.textContent = config.label;
|
|
controlRow.appendChild(label);
|
|
const swatchesContainer = document.createElement('div');
|
|
swatchesContainer.className = 'flex items-center space-x-2';
|
|
swatchesContainer.dataset.controlKey = key;
|
|
for (const color of Object.values(beletageColors)) {
|
|
const swatch = document.createElement('div');
|
|
swatch.className = 'color-swatch';
|
|
swatch.style.backgroundColor = color;
|
|
swatch.dataset.color = color;
|
|
if (color === config.default) swatch.classList.add('active');
|
|
swatchesContainer.appendChild(swatch);
|
|
}
|
|
controlRow.appendChild(swatchesContainer);
|
|
controls.colorControls.appendChild(controlRow);
|
|
}
|
|
|
|
controls.colorControls.addEventListener('click', (e) => {
|
|
if (e.target.classList.contains('color-swatch')) {
|
|
const key = e.target.parentElement.dataset.controlKey;
|
|
currentColors[key] = e.target.dataset.color;
|
|
e.target.parentElement.querySelectorAll('.color-swatch').forEach(s => s.classList.remove('active'));
|
|
e.target.classList.add('active');
|
|
updatePreview();
|
|
}
|
|
});
|
|
}
|
|
|
|
function generateSignatureHTML(data) {
|
|
const {
|
|
prefix, name, title, phone, phoneLink, greenLineWidth, gutterWidth,
|
|
iconTextSpacing, iconVerticalOffset, mottoSpacing, sectionSpacing, titleSpacing, logoSpacing,
|
|
isReply, isSuperReply, colors, images
|
|
} = data;
|
|
|
|
const hideTitle = isReply || isSuperReply ? 'mso-hide:all;display:none!important;max-height:0;overflow:hidden;font-size:0;line-height:0;' : '';
|
|
const hideLogoAddress = isReply || isSuperReply ? 'mso-hide:all;display:none!important;max-height:0;overflow:hidden;font-size:0;line-height:0;' : '';
|
|
const hideBottom = isSuperReply ? 'mso-hide:all;display:none!important;max-height:0;overflow:hidden;font-size:0;line-height:0;' : '';
|
|
const hidePhoneIcon = isSuperReply ? 'mso-hide:all;display:none!important;max-height:0;overflow:hidden;font-size:0;line-height:0;' : '';
|
|
|
|
const spacerWidth = Math.max(0, iconTextSpacing);
|
|
const textPaddingLeft = Math.max(0, -iconTextSpacing);
|
|
|
|
const prefixHTML = prefix ? `<span style="font-size:13px; color:${colors.prefix};">${prefix} </span>` : '';
|
|
const logoWidth = controls.useSvgCheckbox.checked ? 162 : 162;
|
|
const logoHeight = controls.useSvgCheckbox.checked ? 24 : 24;
|
|
|
|
return `
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="540" style="font-family: Arial, Helvetica, sans-serif; color:#333333; font-size:14px; line-height:18px;">
|
|
<tbody>
|
|
<tr><td style="padding:0 0 ${titleSpacing}px 0;">${prefixHTML}<span style="font-size:15px; color:${colors.name}; font-weight:700;">${name}</span></td></tr>
|
|
<tr style="${hideTitle}"><td style="padding:0 0 8px 0;"><span style="font-size:12px; color:${colors.title};">${title}</span></td></tr>
|
|
<tr style="${hideBottom}">
|
|
<td style="padding:0; font-size:0; line-height:0;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="540">
|
|
<tr>
|
|
<td width="${greenLineWidth}" height="2" bgcolor="${beletageColors.verde}" style="font-size:0; line-height:0; height:2px;"></td>
|
|
<td width="${540 - greenLineWidth}" height="2" style="font-size:0; line-height:0; height:2px;"></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr style="${hideLogoAddress}"><td style="padding:${logoSpacing}px 0 ${parseInt(logoSpacing, 10) + 2}px 0;">
|
|
<a href="https://www.beletage.ro" style="text-decoration:none; border:0;">
|
|
<img src="${images.logo}" alt="Beletage" style="display:block; border:0; height:${logoHeight}px; width:${logoWidth}px;" height="${logoHeight}" width="${logoWidth}">
|
|
</a>
|
|
</td></tr>
|
|
<tr>
|
|
<td style="padding-top:${hideLogoAddress ? '0' : sectionSpacing}px;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="540" style="font-size:13px; line-height:18px;">
|
|
<tbody>
|
|
<tr style="${hideLogoAddress}">
|
|
<td width="${gutterWidth}" style="width:${gutterWidth}px; font-size:0; line-height:0;"></td>
|
|
<td width="11" style="width:11px; vertical-align:top; padding-top:${4 + iconVerticalOffset}px;">
|
|
<img src="${images.greySlash}" alt="" width="11" height="11" style="display: block; border:0;">
|
|
</td>
|
|
<td width="${spacerWidth}" style="width:${spacerWidth}px; font-size:0; line-height:0;"></td>
|
|
<td style="vertical-align:top; padding:0 0 0 ${textPaddingLeft}px;">
|
|
<a href="https://maps.google.com/?q=str.%20Unirii%203%2C%20ap.%2026%2C%20Cluj-Napoca%20400417%2C%20Rom%C3%A2nia" style="color:${colors.address}; text-decoration:none;"><span style="color:${colors.address}; text-decoration:none;">str. Unirii, nr. 3, ap. 26<br>Cluj-Napoca, Cluj 400417<br>România</span></a>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td width="${gutterWidth}" style="width:${gutterWidth}px; font-size:0; line-height:0;"></td>
|
|
<td width="11" style="width:11px; vertical-align:top; padding-top:${12 + iconVerticalOffset}px; ${hidePhoneIcon}">
|
|
<img src="${images.greenSlash}" alt="" width="11" height="7" style="display: block; border:0;">
|
|
</td>
|
|
<td width="${isSuperReply ? 0 : spacerWidth}" style="width:${isSuperReply ? 0 : spacerWidth}px; font-size:0; line-height:0;"></td>
|
|
<td style="vertical-align:top; padding:8px 0 0 ${isSuperReply ? 0 : textPaddingLeft}px;">
|
|
<a href="${phoneLink}" style="color:${colors.phone}; text-decoration:none;"><span style="color:${colors.phone}; text-decoration:none;">${phone}</span></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr style="${hideBottom}"><td style="padding:${sectionSpacing}px 0 ${mottoSpacing}px 0;"><a href="https://www.beletage.ro" style="color:${colors.website}; text-decoration:none;"><span style="color:${colors.website}; text-decoration:none;">www.beletage.ro</span></a></td></tr>
|
|
<tr style="${hideBottom}">
|
|
<td style="padding:0; font-size:0; line-height:0;">
|
|
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="540">
|
|
<tr>
|
|
<td width="${greenLineWidth}" height="1" bgcolor="${beletageColors.verde}" style="font-size:0; line-height:0; height:1px;"></td>
|
|
<td width="${540 - greenLineWidth}" height="1" style="font-size:0; line-height:0; height:1px;"></td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr style="${hideBottom}"><td style="padding:${mottoSpacing}px 0 0 0;"><span style="font-size:12px; color:${colors.motto}; font-style:italic;">we make complex simple</span></td></tr>
|
|
</tbody>
|
|
</table>
|
|
`;
|
|
}
|
|
|
|
function updatePreview() {
|
|
const phoneRaw = controls.phone.value.replace(/\s/g, '');
|
|
let formattedPhone = controls.phone.value;
|
|
let phoneLink = `tel:${phoneRaw}`;
|
|
|
|
if (phoneRaw.length === 10 && phoneRaw.startsWith('07')) {
|
|
formattedPhone = `+40 ${phoneRaw.substring(1, 4)} ${phoneRaw.substring(4, 7)} ${phoneRaw.substring(7, 10)}`;
|
|
phoneLink = `tel:+40${phoneRaw.substring(1)}`;
|
|
}
|
|
|
|
if (controls.superReplyCheckbox.checked) {
|
|
controls.replyCheckbox.checked = true;
|
|
controls.replyCheckbox.disabled = true;
|
|
} else {
|
|
controls.replyCheckbox.disabled = false;
|
|
}
|
|
|
|
const data = {
|
|
prefix: controls.prefix.value,
|
|
name: controls.name.value,
|
|
title: controls.title.value,
|
|
phone: formattedPhone,
|
|
phoneLink: phoneLink,
|
|
greenLineWidth: controls.greenLine.value,
|
|
gutterWidth: controls.gutter.value,
|
|
iconTextSpacing: controls.iconTextSpacing.value,
|
|
iconVerticalOffset: parseInt(controls.iconVertical.value, 10),
|
|
mottoSpacing: controls.mottoSpacing.value,
|
|
sectionSpacing: controls.sectionSpacing.value,
|
|
titleSpacing: controls.titleSpacing.value,
|
|
logoSpacing: controls.logoSpacing.value,
|
|
isReply: controls.replyCheckbox.checked,
|
|
isSuperReply: controls.superReplyCheckbox.checked,
|
|
colors: { ...currentColors },
|
|
images: controls.useSvgCheckbox.checked ? imageSets.svg : imageSets.png
|
|
};
|
|
|
|
values.greenLine.textContent = data.greenLineWidth;
|
|
values.gutter.textContent = data.gutterWidth;
|
|
values.iconTextSpacing.textContent = data.iconTextSpacing;
|
|
values.iconVertical.textContent = data.iconVerticalOffset;
|
|
values.mottoSpacing.textContent = data.mottoSpacing;
|
|
values.sectionSpacing.textContent = data.sectionSpacing;
|
|
values.titleSpacing.textContent = data.titleSpacing;
|
|
values.logoSpacing.textContent = data.logoSpacing;
|
|
|
|
previewContainer.innerHTML = generateSignatureHTML(data);
|
|
}
|
|
|
|
// --- Inițializare ---
|
|
createColorPickers();
|
|
|
|
Object.values(controls).forEach(control => {
|
|
if (control.id !== 'export-btn' && control.id !== 'zoom-btn') {
|
|
control.addEventListener('input', updatePreview);
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.collapsible-trigger').forEach(trigger => {
|
|
trigger.addEventListener('click', () => {
|
|
const content = trigger.nextElementSibling;
|
|
trigger.classList.toggle('open');
|
|
content.classList.toggle('open');
|
|
});
|
|
});
|
|
|
|
controls.zoomBtn.addEventListener('click', () => {
|
|
const isZoomed = previewWrapper.style.transform === 'scale(2)';
|
|
if (isZoomed) {
|
|
previewWrapper.style.transform = 'scale(1)';
|
|
controls.zoomBtn.textContent = 'Zoom 200%';
|
|
} else {
|
|
previewWrapper.style.transform = 'scale(2)';
|
|
controls.zoomBtn.textContent = 'Zoom 100%';
|
|
}
|
|
});
|
|
|
|
controls.exportBtn.addEventListener('click', () => {
|
|
const finalHTML = previewContainer.innerHTML;
|
|
const blob = new Blob([finalHTML], { type: 'text/html' });
|
|
const a = document.createElement('a');
|
|
a.href = URL.createObjectURL(blob);
|
|
a.download = 'semnatura-beletage.html';
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
});
|
|
|
|
updatePreview();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |