1_Datensicherung2222 | DJ-INDUSTRIETEILEHANDEL

<div id="ui-service-bar" style="background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 10px 15px; display: flex; justify-content: center; gap: 30px; font-size: 12px; color: #444444; font-family: Arial, sans-serif; text-transform: uppercase; letter-spacing: 0.5px;">
<div style="display: flex; align-items: center; gap: 5px;"><span style="color:#002f6c; font-size:14px;">★</span> <span style="font-weight: bold; color: #002f6c;">Top-Bewertet</span></div>
<div style="display: flex; align-items: center; gap: 5px;"><span style="color:#002f6c; font-size:14px;">+</span> <span style="font-weight: bold; color: #002f6c;">Blitzversand</span></div>
<div style="display: flex; align-items: center; gap: 5px;"><span style="color:#002f6c; font-size:14px;">✔</span> <span style="font-weight: bold; color: #002f6c;">Geprüfter Händler</span></div>
</div>

<div id="ui-logo-bar" style="background: #ffffff; color: #333333; padding: 30px 20px; text-align: left; border-bottom: 5px solid #002f6c; display: flex; align-items: center;">
<span id="viewLogoText" style="font-size: 32px; font-weight: bold; display: inline;">[Ihr Firmenname / Logo-Text]</span>
<img id="viewLogoImg" src="" alt="Firmenlogo" style="max-height: 60px; object-fit: contain; display: none;">
</div>

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; background:#ffffff; font-family:Arial, sans-serif; border-collapse:collapse; margin-top:20px; margin-bottom:20px;">
<tbody><tr>

<td width="50%" valign="top" style="width:50%; padding:20px; text-align:center;">
<div style="width:100%; max-width:380px; height:380px; display:inline-block; border:1px solid #eeeeee; background:#fafafa; border-radius:4px; overflow:hidden; position:relative; vertical-align:middle;">

<img id="viewMainImage1" src="" style="width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; padding:10px; display:block; margin:0 auto;">

</div>
<table cellpadding="0" cellspacing="0" border="0" align="center" style="margin-top:15px;">
<tbody><tr>
<td id="lbl-thumb1" style="display:none; padding:4px;"><img id="thumb1" src="" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>
<td id="lbl-thumb2" style="display:none; padding:4px;"><img id="thumb2" src="" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>
<td id="lbl-thumb3" style="display:none; padding:4px;"><img id="thumb3" src="" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>
<td id="lbl-thumb4" style="display:none; padding:4px;"><img id="thumb4" src="" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>
<td id="lbl-thumb5" style="display:none; padding:4px;"><img id="thumb5" src="" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>
</tr>
</tbody></table>
</td>

<td width="50%" valign="top" style="width:50%; padding:20px; text-align:left; font-family:Arial, sans-serif;">
<div id="viewTitle" style="font-size:22px; color:#222222; margin-bottom:15px; font-weight:bold; line-height:1.4; display:block; width:100%;">[Ihr Artikeltitel]</div>
<div id="viewPrice" style="font-size:26px; color:#e53238; font-weight:bold; margin-bottom:20px; display:block; width:100%; border-bottom:1px solid #eeeeee; padding-bottom:12px;">0,00 €</div>
<div id="viewBullets" style="font-size:14px; color:#444444; line-height:1.8; display:block; width:100%;"></div>
</td>
</tr>
</tbody></table>

<table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; border-collapse:collapse; font-family:Arial, sans-serif; margin-top:20px;">

<tbody><tr><td id="ui-tab-header1" style="background:#002f6c; color:#ffffff; padding:12px 20px; font-weight:bold; text-transform:uppercase; font-size:14px; border-bottom:3px solid #e53238;">Produktbeschreibung</td></tr>
<tr><td style="padding:25px; font-size:14px; color:#444444; line-height:1.6; background:#ffffff; border-bottom:1px solid #eeeeee;"><div id="inner-beschreibung" style="white-space: pre-line;"></div></td></tr>


<tr><td id="ui-tab-header2" style="background:#002f6c; color:#ffffff; padding:12px 20px; font-weight:bold; text-transform:uppercase; font-size:14px; border-bottom:3px solid #e53238;">Zahlungshinweise</td></tr>
<tr><td style="padding:25px; font-size:14px; color:#444444; line-height:1.6; background:#ffffff; border-bottom:1px solid #eeeeee;"><div id="inner-zahlung" style="white-space: pre-line;"></div></td></tr>


<tr><td id="ui-tab-header3" style="background:#002f6c; color:#ffffff; padding:12px 20px; font-weight:bold; text-transform:uppercase; font-size:14px; border-bottom:3px solid #e53238;">Versanddetails</td></tr>
<tr><td style="padding:25px; font-size:14px; color:#444444; line-height:1.6; background:#ffffff; border-bottom:1px solid #eeeeee;"><div id="inner-versand" style="white-space: pre-line;"></div></td></tr>


<tr><td id="ui-tab-header4" style="background:#002f6c; color:#ffffff; padding:12px 20px; font-weight:bold; text-transform:uppercase; font-size:14px; border-bottom:3px solid #e53238;">Impressum & Rechtliche Informationen</td></tr>
<tr><td style="padding:25px; background:#ffffff; text-align:left;"><div id="inner-kontakt" style="font-size:14px !important; color:#444444 !important; line-height:1.6 !important; font-family:Arial, sans-serif !important; white-space:pre-line !important;"></div></td></tr>
</table>

<div id="ui-template-footer" style="text-align: center; padding: 15px; background: #ffffff; border-top: 1px solid #eeeeee; font-size: 11px; color: #999999; font-family: Arial, sans-serif;">
Template-Design by template-generator24.de
</div>
</div>
</div>

<div class="editor-container">
<h2>Einstellungs-Panel</h2>

<div style="margin-bottom: 20px; display: flex; gap: 10px;">
<button type="button" onclick="openModal('modalAnleitung')" style="flex: 1; background: #007bff; color: white; border: none; padding: 10px; font-size: 12px; font-weight: bold; border-radius: 4px; cursor: pointer; text-transform: uppercase;">Anleitung</button>
<button type="button" onclick="openModal('modalEula')" style="flex: 1; background: #6c757d; color: white; border: none; padding: 10px; font-size: 12px; font-weight: bold; border-radius: 4px; cursor: pointer; text-transform: uppercase;">Lizenz (EULA)</button>
</div>

<div class="form-group">
<label>Design-Farben anpassen</label>
<div class="color-picker-row">
<div class="color-picker-group">
<span style="display:block; font-size:11px; color:#6c757d; font-weight:bold; margin-bottom:3px;">HAUPTFARBE</span>
<input type="color" id="colorMain" value="#002f6c" oninput="updatePreview()">
</div>
<div class="color-picker-group">
<span style="display:block; font-size:11px; color:#6c757d; font-weight:bold; margin-bottom:3px;">AKZENT / PREIS</span>
<input type="color" id="colorAccent" value="#e53238" oninput="updatePreview()">
</div>
</div>
<div style="margin-top: 12px;">
<button type="button" onclick="resetColors()" style="background: #6c757d; color: white; border: none; padding: 6px 12px; font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.5px; width: 100%;">↩ Auf Startwerte zurücksetzen</button>
</div>
</div>
<hr>

<div class="form-group">
<label for="inputLogo">Logo-Text / Shop-Name</label>
<input type="text" id="inputLogo" value="[Ihr Firmenname / Shop-Name]" oninput="updatePreview()">
</div>
<div class="form-group">
<label for="inputLogoImg" style="color: #002f6c; font-weight: bold;">Alternative: Logo Bild-URL</label>
<div style="background: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; line-height: 1.4; text-align: left;">
<strong>DSGVO-Hinweis:</strong> Bild-URLs müssen mit <strong>https://</strong> beginnen. Laden Sie Grafiken nur auf eigenem Webspace hoch (keine unbekannten Freehoster).
</div>
<input type="text" id="inputLogoImg" placeholder="https://ihre-domain.de" value="" oninput="updatePreview()">
</div>

<div class="form-group">
<label style="color: #002f6c; margin-bottom: 5px; font-weight: bold;">Kopfzeilen-Verlinkungen (eBay-URLs)</label>
<div style="background: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; line-height: 1.4; text-align: left;">
<strong>WICHTIG:</strong> Hinterlegen Sie hier ausschließlich Links, die **innerhalb der eBay-Plattform** bleiben. Externe Links zu eigenen Onlineshops sind streng verboten.
</div>
<div class="sub-label-group"><input type="text" id="linkShop" value="https://ebay.de" oninput="updatePreview()"></div>
<div class="sub-label-group"><input type="text" id="linkKontakt" value="https://ebay.de" oninput="updatePreview()"></div>
<div class="sub-label-group"><input type="text" id="linkBewertungen" value="https://ebay.de" oninput="updatePreview()"></div>
</div>
<div class="form-group">
<label for="inputTitle">Auktionstitel</label>
<input type="text" id="inputTitle" value="Premium Produktbezeichnung - Modell 2026" oninput="updatePreview()">
</div>

<div class="form-group">
<label for="inputPrice">Preis (€)</label>
<input type="text" id="inputPrice" value="49,95 €" oninput="updatePreview()">
</div>

<div class="form-group gallery-inputs">
<label style="color: #002f6c; font-weight: bold;">Bilder-Galerie (Bis zu 5 URLs einfügen)</label>
<div style="background: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; line-height: 1.4; text-align: left;">
<strong>HINWEIS:</strong> Alle Bild-Links müssen zwingend über das verschlüsselte <strong>https://</strong>-Protokoll geladen werden, um Darstellungsfehler bei eBay zu vermeiden.
</div>
<input type="text" id="imgUrl1" placeholder="Bild 1 URL" value="https://picsum.photos" oninput="updateImages()">
<input type="text" id="imgUrl2" placeholder="Bild 2 URL" value="https://picsum.photos" oninput="updateImages()">
<input type="text" id="imgUrl3" placeholder="Bild 3 URL" value="" oninput="updateImages()">
<input type="text" id="imgUrl4" placeholder="Bild 4 URL" value="" oninput="updateImages()">
<input type="text" id="imgUrl5" placeholder="Bild 5 URL" value="" oninput="updateImages()">
</div>

<div class="form-group">
<label for="inputBullets">Kurzhighlights (Eine Zeile pro Punkt)</label>
<textarea id="inputBullets" oninput="updatePreview()">Kostenloser Blitzversand per DHL / DPD
Individuell auf Ihre Bedürfnisse anpassbar
Hergestellt aus robustem und langlebigem Material
24 Monate gesetzliche Gewährleistung inklusive
Komplettes Zubehör im Lieferumfang enthalten</textarea>
</div>
<hr>

<div class="form-group">
<label for="textBeschreibung" style="color: #002f6c; font-weight: bold;">Inhalt: Beschreibung</label>
<div style="background: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; line-height: 1.4; text-align: left;">
<strong>HINWEIS:</strong> Beschreiben Sie den Artikelzustand stets wahrheitsgemäß. Fehlerhafte Angaben lösen Gewährleistungsansprüche aus.
</div>
<textarea id="textBeschreibung" oninput="updatePreview()">[Geben Sie hier Ihre ausführliche Produktbeschreibung ein]</textarea>
</div>

<div class="form-group">
<label for="textZahlung" style="color: #002f6c; font-weight: bold;">Inhalt: Zahlung</label>
<div style="background: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; line-height: 1.4; text-align: left;">
<strong>HINWEIS:</strong> Nennen Sie hier ausschließlich Zahlungsarten, die Sie über die offizielle eBay-Kaufabwicklung anbieten.
</div>
<textarea id="textZahlung" oninput="updatePreview()">Bezahlen Sie bequem und sicher über die von eBay bereitgestellten Zahlungsmethoden.</textarea>
</div>

<div class="form-group">
<label for="textVersand" style="color: #002f6c; font-weight: bold;">Inhalt: Versand</label>
<div style="background: #fff3cd; color: #856404; border: 1px solid #ffeeba; padding: 10px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; line-height: 1.4; text-align: left;">
<strong>HINWEIS:</strong> Machen Sie konkrete Angaben zu Versandzeiten. Schwammige Formulierungen sind wettbewerbswidrig.
</div>
<textarea id="textVersand" oninput="updatePreview()">Standardversand innerhalb Deutschlands per DHL oder DPD.</textarea>
</div>
<div class="form-group">
<label for="textKontakt" style="color: #002f6c; font-weight: bold;">Inhalt: Impressum / Widerruf / AGB</label>
<div style="background: #fff3cd; color: #d9383a; border: 1px solid #f5c6cb; padding: 10px; border-radius: 4px; font-size: 12px; margin-bottom: 8px; line-height: 1.4; text-align: left;">
<strong>DRINGENDE WARNUNG:</strong> Gewerbliche Verkäufer müssen hier ein vollständiges Impressum sowie eine Widerrufsbelehrung hinterlegen. Der offizielle EU-Link zur Online-Streitbeilegung wird unten unlöschbar angehängt!
</div>
<textarea id="textKontakt" oninput="updatePreview()">--------------------------------------------------
RECHTLICHE INFORMATIONEN DES VERKÄUFERS (IMPRESSUM)
--------------------------------------------------
Firma / Inhaber:
Anschrift:
E-Mail:
Telefon:
Umsatzsteuer-Identifikationsnummer:

--------------------------------------------------
WIDERRUFSBELEHRUNG & WIDERRUFSFORMULAR
--------------------------------------------------

--------------------------------------------------
ALLGEMEINE GESCHÄFTSBEDINGUNGEN (AGB)
--------------------------------------------------
</textarea>
</div>

<button class="btn-copy" onclick="copyHTML()">HTML für eBay kopieren</button>
<div class="editor-footer-cr">Plattform betrieben durch: <b>template-generator24.de</b></div>
</div>

<div id="modalAnleitung" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 999999; display: none; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;">
<div style="background: white; width: 100%; max-width: 650px; max-height: 85vh; border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
<div style="padding: 15px 20px; background: #002f6c; color: white; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-family: Arial, sans-serif;"><span>📖 Schritt-für-Schritt-Anleitung</span><span style="cursor:pointer; font-size:22px;" onclick="closeModal('modalAnleitung')">×</span></div>
<div style="padding: 20px; overflow-y: auto; font-size: 13px; line-height: 1.6; color: #333; text-align: left; font-family: Arial, sans-serif;">
<p><strong>Bilder & Links einfügen:</strong> Nutzen Sie ausschließlich sichere <code>https://</code> Links für Bilder, um Darstellungsfehler bei eBay zu vermeiden.</p>
</div>
</div>
</div>

<div id="modalEula" style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 999999; display: none; justify-content: center; align-items: center; padding: 20px; box-sizing: border-box;">
<div style="background: white; width: 100%; max-width: 600px; max-height: 80vh; border-radius: 6px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
<div style="padding: 15px 20px; background: #002f6c; color: white; display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-family: Arial, sans-serif;"><span>⚖️ Lizenzvereinbarung (EULA)</span><span style="cursor:pointer; font-size:22px;" onclick="closeModal('modalEula')">×</span></div>
<div style="padding: 20px; overflow-y: auto; font-size: 13px; line-height: 1.6; color: #333; text-align: left; font-family: Arial, sans-serif;">
<p><strong>Nutzungsrechte:</strong> Einfaches, nicht übertragbares Recht zur Erstellung gewerblicher eBay-Vorlagen während der Abolaufzeit auf template-generator24.de.</p>
</div>
</div>
</div>

<script>
function openModal(id) { document.getElementById(id).style.display = 'flex'; }
function closeModal(id) { document.getElementById(id).style.display = 'none'; }

function updatePreview() {
var mainColor = document.getElementById('colorMain').value;
var accentColor = document.getElementById('colorAccent').value;

document.getElementById('ui-top-bar').style.background = mainColor;
document.getElementById('ui-logo-bar').style.borderBottomColor = mainColor;
document.getElementById('viewPrice').style.color = accentColor;

for (var i = 1; i <= 4; i++) {
var header = document.getElementById('ui-tab-header' + i);
if (header) {
header.style.background = mainColor;
header.style.borderBottomColor = accentColor;
}
}

var logoText = document.getElementById('inputLogo').value;
var logoImgUrl = document.getElementById('inputLogoImg').value.trim();
var viewText = document.getElementById('viewLogoText');
var viewImg = document.getElementById('viewLogoImg');

if (logoImgUrl !== "") {
viewImg.src = logoImgUrl;
viewImg.style.display = 'inline-block';
viewText.style.display = 'none';
} else {
viewText.innerText = logoText;
viewText.style.display = 'inline-block';
viewImg.style.display = 'none';
}
document.getElementById('viewLinkShop').href = document.getElementById('linkShop').value;
document.getElementById('viewLinkContact').href = document.getElementById('linkKontakt').value;
document.getElementById('viewLinkBewertungen').href = document.getElementById('linkBewertungen').value;
document.getElementById('viewTitle').innerText = document.getElementById('inputTitle').value;
document.getElementById('viewPrice').innerText = document.getElementById('inputPrice').value;

var lines = document.getElementById('inputBullets').value.split('\n');
var bulletHTML = '';
for (var j = 0; j < lines.length; j++) {
var currentLine = lines[j].trim();
if (currentLine) {
bulletHTML += '<div style="margin-bottom:6px; display:flex; align-items:flex-start; font-family:Arial, sans-serif;"><span style="color:' + accentColor + '; font-weight:bold; margin-right:8px;">✓</span> ' + currentLine + '</div>';
}
}
document.getElementById('viewBullets').innerHTML = bulletHTML;

document.getElementById('inner-beschreibung').innerHTML = document.getElementById('textBeschreibung').value.replace(/\n/g, '<br>');
document.getElementById('inner-zahlung').innerHTML = document.getElementById('textZahlung').value.replace(/\n/g, '<br>');
document.getElementById('inner-versand').innerHTML = document.getElementById('textVersand').value.replace(/\n/g, '<br>');

var rawKontaktText = document.getElementById('textKontakt').value;
var osLinkHTML = '<div style="margin-top:25px; padding-top:15px; border-top:1px dashed #ced4da; font-weight:bold; font-family:Arial, sans-serif;">' +
'Plattform der EU-Kommission zur Online-Streitbeilegung: ' +
'<a href="https://europa.eu" target="_blank" style="color:' + mainColor + '; text-decoration:underline; font-weight:bold;">' +
'https://europa.eu</a></div>';

document.getElementById('inner-kontakt').innerHTML = rawKontaktText.replace(/\n/g, '<br>') + osLinkHTML;
}

function resetColors() {
document.getElementById('colorMain').value = '#002f6c';
document.getElementById('colorAccent').value = '#e53238';
updatePreview();
}

function updateImages() {
var img1 = document.getElementById('imgUrl1').value.trim();
var mainImg = document.getElementById('viewMainImage1');
if (mainImg) {
mainImg.src = img1 || 'https://picsum.photos';
}

for (var i = 1; i <= 5; i++) {
var url = document.getElementById('imgUrl' + i).value.trim();
var thumbImg = document.getElementById('thumb' + i);
var thumbLabel = document.getElementById('lbl-thumb' + i);

if (url !== "") {
if (thumbImg) thumbImg.src = url;
if (thumbLabel) thumbLabel.style.display = 'table-cell';
} else {
if (thumbImg) thumbImg.src = '';
if (thumbLabel) thumbLabel.style.display = 'none';
}
}
}

function copyHTML() {
var mainColor = document.getElementById('colorMain').value;
var accentColor = document.getElementById('colorAccent').value;

var beschreibungText = document.getElementById('inner-beschreibung').innerHTML;
var zahlungText = document.getElementById('inner-zahlung').innerHTML;
var versandText = document.getElementById('inner-versand').innerHTML;
var kontaktText = document.getElementById('inner-kontakt').innerHTML;

var img1 = document.getElementById('imgUrl1').value.trim();
var img2 = document.getElementById('imgUrl2').value.trim();
var img3 = document.getElementById('imgUrl3').value.trim();
var img4 = document.getElementById('imgUrl4').value.trim();
var img5 = document.getElementById('imgUrl5').value.trim();

var topBarHTML = document.getElementById('ui-top-bar').outerHTML;
var serviceBarHTML = document.getElementById('ui-service-bar').outerHTML;
var logoBarHTML = document.getElementById('ui-logo-bar').outerHTML;
var titleText = document.getElementById('viewTitle').innerText;
var priceText = document.getElementById('viewPrice').innerText;
var bulletsHTML = document.getElementById('viewBullets').innerHTML;

var thumb1Cell = img1 ? '<td style="padding:4px;"><img src="' + img1 + '" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>' : '';
var thumb2Cell = img2 ? '<td style="padding:4px;"><img src="' + img2 + '" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>' : '';
var thumb3Cell = img3 ? '<td style="padding:4px;"><img src="' + img3 + '" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>' : '';
var thumb4Cell = img4 ? '<td style="padding:4px;"><img src="' + img4 + '" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>' : '';
var thumb5Cell = img5 ? '<td style="padding:4px;"><img src="' + img5 + '" style="width:55px; height:55px; object-fit:contain; border:1px solid #ccc; padding:2px; border-radius:3px;"></td>' : '';

var templateHTML =
'<div style="width:100%; max-width:850px; background:#ffffff; border:1px solid #ced4da; border-radius:4px; overflow:hidden; font-family:Arial, sans-serif; margin:0 auto;">' +
topBarHTML + serviceBarHTML + logoBarHTML +

'<table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; background:#ffffff; font-family:Arial, sans-serif; border-collapse:collapse; margin-top:20px; margin-bottom:20px;">' +
' <tr>' +
' <td width="50%" valign="top" style="width:50%; padding:20px; text-align:center;">' +
' <div style="width:100%; max-width:380px; height:380px; display:inline-block; border:1px solid #eeeeee; background:#fafafa; border-radius:4px; overflow:hidden; position:relative; vertical-align:middle;">' +
' <img src="' + (img1 || 'https://picsum.photos') + '" style="width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; padding:10px; display:block; margin:0 auto;">' +
' </div>' +
' <table cellpadding="0" cellspacing="0" border="0" align="center" style="margin-top:15px;">' +
' <tr>' + thumb1Cell + thumb2Cell + thumb3Cell + thumb4Cell + thumb5Cell + '</tr>' +
' </table>' +
' </td>' +
' <td width="50%" valign="top" style="width:50%; padding:20px; text-align:left; font-family:Arial, sans-serif;">' +
' <div style="font-size:22px; color:#222222; margin-bottom:15px; font-weight:bold; line-height:1.4; display:block; width:100%;">' + titleText + '</div>' +
' <div style="font-size:26px; color:' + accentColor + '; font-weight:bold; margin-bottom:20px; display:block; width:100%; border-bottom:1px solid #eeeeee; padding-bottom:12px;">' + priceText + '</div>' +
' <div style="font-size:14px; color:#444444; line-height:1.8; display:block; width:100%;">' + bulletsHTML + '</div>' +
' </td>' +
' </tr>' +
'</table>' +

'<table cellpadding="0" cellspacing="0" border="0" width="100%" style="width:100%; border-collapse:collapse; font-family:Arial, sans-serif; margin-top:20px;">' +
' <tr><td style="background:' + mainColor + '; color:#ffffff; padding:12px 20px; font-weight:bold; text-transform:uppercase; font-size:14px; border-bottom:3px solid ' + accentColor + ';">Produktbeschreibung</td></tr>' +
' <tr><td style="padding:25px; font-size:14px; color:#444444; line-height:1.6; background:#ffffff; border-bottom:1px solid #eeeeee;">' + beschreibungText + '</td></tr>' +
' <tr><td style="background:' + mainColor + '; color:#ffffff; padding:12px 20px; font-weight:bold; text-transform:uppercase; font-size:14px; border-bottom:3px solid ' + accentColor + ';">Zahlungshinweise</td></tr>' +
' <tr><td style="padding:25px; font-size:14px; color:#444444; line-height:1.6; background:#ffffff; border-bottom:1px solid #eeeeee;">' + zahlungText + '</td></tr>' +
' <tr><td style="background:' + mainColor + '; color:#ffffff; padding:12px 20px; font-weight:bold; text-transform:uppercase; font-size:14px; border-bottom:3px solid ' + accentColor + ';">Versanddetails</td></tr>' +
' <tr><td style="padding:25px; font-size:14px; color:#444444; line-height:1.6; background:#ffffff; border-bottom:1px solid #eeeeee;">' + versandText + '</td></tr>' +
' <tr><td style="background:' + mainColor + '; color:#ffffff; padding:12px 20px; font-weight:bold; text-transform:uppercase; font-size:14px; border-bottom:3px solid ' + accentColor + ';">Impressum & Rechtliche Informationen</td></tr>' +
' <tr><td style="padding:25px; font-size:14px; color:#444444; line-height:1.6; background:#ffffff;">' + kontaktText + '</td></tr>' +
'</table>' +

'<div style="text-align: center; padding: 15px; background: #ffffff; border-top: 1px solid #eeeeee; font-size: 11px; color: #999999; font-family: Arial, sans-serif;">Template-Design by template-generator24.de</div>' +
'</div>';

navigator.clipboard.writeText(templateHTML).then(function() {
alert('Rechtssicherer HTML-Code für eBay erfolgreich kopiert!');
}).catch(function(err) {
alert('Fehler beim Kopieren: ', err);
});
}

setTimeout(function() {
updatePreview();
updateImages();
}, 500);
</script>