System bereit. Wähle Dokumente aus dem Archiv für die Analyse.
</main>
Neues Dokument archivieren
<script>
// Datenstruktur & Status
let documents = JSON.parse(localStorage.getItem('si_docs')) || [];
let isThinking = false;
let currentFilter = 'GESAMT';
// Initialisierung
window.onload = () => {
renderDocs();
updateUI();
};
// UI Funktionen
function toggleSidebar() { document.getElementById('sidebar').classList.toggle('collapsed'); }
function openModal() { document.getElementById('modalOverlay').classList.remove('hidden'); }
function closeModal() { document.getElementById('modalOverlay').classList.add('hidden'); }
function autoResize(textarea) {
textarea.style.height = 'auto';
textarea.style.height = textarea.scrollHeight + 'px';
}
function checkKey(e) {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault();
sendMessage();
}
}
// Dokumente verwalten
function saveDocument() {
const name = document.getElementById('docName').value || "Unbenannt";
const content = document.getElementById('docContent').value;
const element = document.getElementById('docElement').value;
if (!content) return alert("Inhalt darf nicht leer sein.");
const newDoc = {
id: Date.now(),
name: name,
content: content,
element: element,
active: true,
length: content.length
};
documents.push(newDoc);
updateStorage();
renderDocs();
closeModal();
// Reset Form
document.getElementById('docName').value = '';
document.getElementById('docContent').value = '';
}
function deleteDoc(id) {
documents = documents.filter(d => d.id !== id);
updateStorage();
renderDocs();
}
function toggleDoc(id) {
const doc = documents.find(d => d.id === id);
if (doc) doc.active = !doc.active;
updateStorage();
renderDocs();
}
function updateStorage() {
localStorage.setItem('si_docs', JSON.stringify(documents));
updateUI();
}
function renderDocs() {
const list = document.getElementById('docList');
list.innerHTML = '';
documents.forEach(doc => {
const item = document.createElement('div');
item.className = `doc-item ${doc.active ? 'active-doc' : ''}`;
item.onclick = () => toggleDoc(doc.id);
item.innerHTML = `
${doc.name}
${doc.element}${doc.length} ZEICHEN
`;
list.appendChild(item);
});
}
// Chat & Analyse Logik
function sendMessage() {
const input = document.getElementById('inputField');
const text = input.value.trim();
if (!text || isThinking) return;
// User Nachricht anzeigen
appendMessage('user', text);
input.value = '';
autoResize(input);
// KI Simulation
startThinking();
setTimeout(() => {
const activeDocs = documents.filter(d => d.active);
let response = "";
if (activeDocs.length === 0) {
response = "WARNUNG: Keine aktiven Dokumente im Archiv. Analyseergebnisse könnten unvollständig sein.\n\nSystem benötigt Kontext-Daten für präzise Auswertung.";
} else {
const totalLen = activeDocs.reduce((s, d) => s + d.length, 0);
response = `Analyse der ${activeDocs.length} aktiven Dokumente abgeschlossen (${totalLen} Zeichen Kontext).\n\nErgebnis: Die Datenstrukturen weisen eine hohe Korrelation auf. Verfahrensbeschreibung in Sektion [${activeDocs[0].element}] identifiziert.`;
}
appendMessage('si', response);
stopThinking();
}, 1500);
}
function appendMessage(role, text) {
document.getElementById('emptyState').style.display = 'none';
const container = document.getElementById('messages');
const div = document.createElement('div');
div.className = `message ${role}`;
div.innerHTML = `
${role === 'user' ? 'MENSCH' : 'SI'}
${text}
`;
container.appendChild(div);
document.getElementById('bottom').scrollIntoView({ behavior: 'smooth' });
}
function startThinking() {
isThinking = true;
const dot = document.getElementById('statusDot');
dot.className = 'status-dot thinking';
document.getElementById('statusLabel').innerText = "ANALYSIERE...";
document.getElementById('sendBtn').disabled = true;
}
function stopThinking() {
isThinking = false;
const dot = document.getElementById('statusDot');
dot.className = 'status-dot active';
document.getElementById('statusLabel').innerText = "BEREIT";
document.getElementById('sendBtn').disabled = false;
}
function updateUI() {
const activeDocs = documents.filter(d => d.active);
const totalChars = activeDocs.reduce((sum, doc) => sum + doc.length, 0);
// Token Bar Update
const percent = Math.min((totalChars / 80000) * 100, 100);
document.getElementById('tokenFill').style.width = percent + '%';
document.getElementById('tokenInfo').innerText = `${totalChars.toLocaleString()} / 80.000 ZEICHEN`;
// Status Badge Sidebar
const badge = document.getElementById('activeCountBadge');
// document.getElementById('sendBtn').disabled = (activeDocs.length === 0);
}
function filterDocs(type) {
// Visuelles Feedback für die Pill-Buttons
document.querySelectorAll('.pill').forEach(p => {
p.classList.toggle('active', p.innerText === type);
});
// In dieser Version dient der Filter nur als UI-Element.
// Logik könnte hier erweitert werden.
}
</script>
Full-width layout options
Create modern looking edge-to-edge layout with ease.
Full width
This layout allows creating a modern edge-to-edge layout
Full width with one side column
Header and footer stretch edge-to-edge.
Full width with two side column
Header and footer stretch edge-to-edge.
Boxed layout options
You can add a full-scale background image to the boxed layout to make your content area really stand out.
Boxed layout
A simple boxed layout.
Boxed layout with shadow
Boxed layout with drop shadow.
Boxed layout with one side column
Boxed layout with one side column.
Boxed layout with two side columns
Boxed layout with two side columns.
More options
Besides these layout options that partially use the Contao layout framework you are free to create any layout based on the Pocketgrid engine, using articles as layout elements.
