HTML-Code

Kopiere nachfolgenden Code und speichere ihn als HTML-Datei ab.

<!DOCTYPE html>

<head>

<title>Meine Link-Clipboard Liste Pro</title>

<style>

body { background: #f9f5ee; font-family: system-ui, -apple-system, sans-serif; }

.section-header {

font-size: 1.75rem; font-weight: 700; color: #c2410c;

margin-bottom: 1.5rem; padding-bottom: 0.4rem;

border-bottom: 3px solid #fb923c; display: inline-block;

}

.no-select { user-select: none; }

.link-card { transition: all 0.2s ease; }

/* Versteckt das Standard-Input-Feld für den Import */

#importInput { display: none; }

</style>

</head>

Meine Link-Clipboard Liste

</h1>

<input type="text" id="searchInput" oninput="render()" placeholder="Suchen..."

class="w-full px-5 py-3 rounded-2xl border-2 border-orange-200 focus:border-orange-500 outline-none shadow-sm transition-all">

</div>

<h2 class="section-header">Links</h2>

<i class="fas fa-plus"></i> Link hinzufügen

</button>

</div>

</div>

<div>

<h2 class="section-header">Texte zum Kopieren</h2>

<button onclick="addSection()" class="bg-orange-100 hover:bg-orange-200 text-orange-700 px-4 py-2 rounded-xl transition font-bold">+ Neuer Bereich</button>

<i class="fas fa-download"></i> Backup

</button>

<i class="fas fa-upload"></i> Import

</button>

</div>

</div>

<i class="fas fa-save"></i> Speichern

</button>

// DATEN INITIALISIEREN

let links = JSON.parse(localStorage.getItem('myLinks')) || [];

let sections = JSON.parse(localStorage.getItem('mySections')) || [];

// SPEICHER-FUNKTION

function saveAll(silent = false) {

localStorage.setItem('myLinks', JSON.stringify(links));

localStorage.setItem('mySections', JSON.stringify(sections));

if (silent) return;

const btn = document.getElementById('floatSave');

const orig = btn.innerHTML;

btn.innerHTML = '<i class="fas fa-check"></i> Gespeichert!';

btn.classList.replace('bg-emerald-600', 'bg-emerald-800');

setTimeout(() => {

btn.innerHTML = orig;

btn.classList.replace('bg-emerald-800', 'bg-emerald-600');

}, 1500);

}

// VERSCHIEBE-LOGIK (Universell)

function moveItem(type, index, direction, sectionIdx = null) {

let targetArr = (type === 'link') ? links : (type === 'section') ? sections : sections[sectionIdx].buttons;

const newIndex = index + direction;

if (newIndex < 0 || newIndex >= targetArr.length) return;

const temp = targetArr[index];

targetArr[index] = targetArr[newIndex];

targetArr[newIndex] = temp;

saveAll(true);

render();

}

// RENDERING DER SEITE

function render() {

const search = document.getElementById('searchInput').value.toLowerCase();

// Links Rendering

document.getElementById('linksContainer').innerHTML = links.map((l, idx) => {

if (search && !l.name.toLowerCase().includes(search)) return '';

return `

</div>

`;

}).join('');

// Sektionen Rendering

document.getElementById('sectionsContainer').innerHTML = sections.map((sec, sIdx) => {

const hasVisibleButtons = sec.buttons.some(b => !search || b.label.toLowerCase().includes(search) || b.copy.toLowerCase().includes(search));

if (search && !sec.title.toLowerCase().includes(search) && !hasVisibleButtons) return '';

return `

</div>

<input value="${sec.title}" class="text-2xl font-bold text-orange-800 bg-transparent border-b-2 border-orange-400 focus:outline-none focus:border-orange-600 w-full"

onchange="sections[${sIdx}].title = this.value; saveAll(true)">

</div>

<button onclick="addButton(${sIdx})" class="text-sm bg-orange-100 hover:bg-orange-200 text-orange-700 px-4 py-2 rounded-xl transition font-bold">+ Button</button>

</div>

${sec.buttons.map((btn, bIdx) => {

if (search && !btn.label.toLowerCase().includes(search) && !btn.copy.toLowerCase().includes(search)) return '';

return `

<button onclick="copyText('${btn.copy.replace(/'/g, "\\'")}', this)"

class="w-full bg-gradient-to-br from-orange-500 to-orange-600 hover:from-orange-600 hover:to-orange-700 text-white font-medium py-4 px-5 rounded-2xl shadow-md transition-all flex items-center justify-between gap-3">

<span class="truncate">${btn.label}</span>

</button>

</div>

</div>`;

}).join('')}

</div>

`;

}).join('');

}

// --- LOGIK FUNKTIONEN ---

function addLink() {

const n = prompt("Name:"); const u = prompt("URL:");

if (n && u) { links.push({ id: Date.now(), name: n, url: u }); saveAll(true); render(); }

}

function editLink(id) {

const l = links.find(x => x.id === id);

const n = prompt("Name:", l.name); const u = prompt("URL:", l.url);

if (n) l.name = n; if (u) l.url = u; saveAll(true); render();

}

function deleteLink(id) { if(confirm("Link löschen?")) { links = links.filter(x => x.id !== id); saveAll(true); render(); } }

function addSection() {

const t = prompt("Bereich Name:");

if (t) { sections.push({ title: t, buttons: [] }); saveAll(true); render(); }

}

function deleteSection(idx) { if(confirm("Ganzen Bereich löschen?")) { sections.splice(idx, 1); saveAll(true); render(); } }

function addButton(sIdx) {

const l = prompt("Button Name:"); const c = prompt("Inhalt zum Kopieren:");

if (l && c) { sections[sIdx].buttons.push({ label: l, copy: c }); saveAll(true); render(); }

}

function editButton(sIdx, bIdx) {

const b = sections[sIdx].buttons[bIdx];

const l = prompt("Name:", b.label); const c = prompt("Inhalt:", b.copy);

if (l) b.label = l; if (c) b.copy = c; saveAll(true); render();

}

function deleteButton(sIdx, bIdx) { if(confirm("Button löschen?")) { sections[sIdx].buttons.splice(bIdx, 1); saveAll(true); render(); } }

function copyText(text, button) {

navigator.clipboard.writeText(text).then(() => {

const origH = button.innerHTML; const origC = button.className;

button.className = origC.replace(/orange/g, 'emerald');

button.innerHTML = '<span>Kopiert!</span><span>✓</span>';

setTimeout(() => { button.className = origC; button.innerHTML = origH; }, 1200);

});

}

// --- BACKUP & IMPORT LOGIK ---

function exportData() {

const data = JSON.stringify({ links, sections }, null, 2);

const blob = new Blob([data], { type: 'application/json' });

const a = document.createElement('a');

a.href = URL.createObjectURL(blob);

a.download = `clipboard_backup_${new Date().toISOString().slice(0,10)}.json`;

a.click();

}

function importData() {

document.getElementById('importInput').click();

}

function handleFileSelect(event) {

const file = event.target.files[0];

if (!file) return;

const reader = new FileReader();

reader.onload = function(e) {

try {

const imported = JSON.parse(e.target.result);

if (imported.links && imported.sections) {

if (confirm("Backup laden? Aktuelle Daten werden überschrieben.")) {

links = imported.links;

sections = imported.sections;

saveAll(true);

render();

alert("Import erfolgreich!");

}

} else {

alert("Fehler: Die Datei hat nicht das richtige Format.");

}

} catch (err) {

alert("Fehler beim Lesen der Datei: " + err.message);

}

};

reader.readAsText(file);

// Input zurücksetzen, damit die gleiche Datei nochmal gewählt werden kann

event.target.value = '';

}

render();

</script>

</body>

</html>