mstoeck3/forensic-pathways
2
0
Fork 0
Code Issues 17 Pull Requests Projects Releases Activity

UI Layout improvements

Browse Source
This commit is contained in:
overcuriousity
2025-08-05 11:58:09 +02:00
parent 3a5e8e88b2
commit 1eb49315fa
4 changed files with 226 additions and 2993 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
src/pages/index.astro
View File

@@ -21,6 +21,39 @@ const phases = data.phases;
Systematische digitale Forensik nach bewährter NIST SP 800-86 Methodik.<br>
Wählen Sie Ihren Ansatz für die Werkzeugauswahl:
</p>
<div class="ai-hero-spotlight">
<div class="ai-spotlight-content">
<div class="ai-spotlight-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
<circle cx="12" cy="12" r="2"/>
</svg>
</div>
<div class="ai-spotlight-text">
<h3>Forensic AI-Beratung</h3>
<p>Analyse des Untersuchungsszenarios mit Empfehlungen zum Vorgehen</p>
</div>
</div>
<button id="ai-query-btn" class="btn btn-accent btn-lg ai-primary-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
</svg>
KI-Beratung starten
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-2">
<line x1="7" y1="17" x2="17" y2="7"/>
<polyline points="7,7 17,7 17,17"/>
</svg>
</button>
<div class="ai-features-mini">
<span class="badge badge-secondary">Workflow-Empfehlungen</span>
<span class="badge badge-secondary">Transparenz</span>
<span class="badge badge-secondary">Sofortige Analyse</span>
</div>
</div>
<div class="approach-selector">
<div class="approach-card methodology" onclick="selectApproach('methodology')">
@@ -63,7 +96,7 @@ const phases = data.phases;
Teilnehmer der Seminargruppe CC24-w1 (oder andere Berechtigte) können die gehostete Infrastruktur nutzen.
<a href="/about#support">Kontakt bei Problemen</a>
</p>
<div class="quick-actions">
<a href="/about" class="btn btn-secondary">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -74,14 +107,6 @@ const phases = data.phases;
Infos, SSO & Zugang
</a>
<button id="ai-query-btn" class="btn btn-accent">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
</svg>
KI-Beratung
</button>
<a href="/contribute" class="btn" style="background-color: var(--color-warning); color: white; border-color: var(--color-warning);" data-contribute-button="new">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
@@ -182,7 +207,9 @@ const phases = data.phases;
document.querySelectorAll('.approach-card').forEach(card => {
card.classList.remove('selected');
});
document.querySelector(`.approach-card.${approach}`).classList.add('selected');
const selectedCard = document.querySelector(`.approach-card.${approach}`);
if (selectedCard) selectedCard.classList.add('selected');
if (approach === 'methodology') {
const methodologySection = document.getElementById('methodology-section');
@@ -238,61 +265,57 @@ const phases = data.phases;
return;
}
// AI Button click handler
if (aiQueryBtn) {
aiQueryBtn.addEventListener('click', async () => {
if (typeof window.requireClientAuth === 'function') {
await window.requireClientAuth(() => switchToView('ai'), `${window.location.pathname}?view=ai`, 'ai');
aiQueryBtn.addEventListener('click', () => {
// Visual feedback
aiQueryBtn.classList.add('activated');
setTimeout(() => aiQueryBtn.classList.remove('activated'), 400);
// Switch to AI view
switchToView('ai');
// Trigger existing view change system
window.dispatchEvent(new CustomEvent('viewChanged', { detail: 'ai' }));
// Scroll to AI interface
if (window.scrollToElementById) {
window.scrollToElementById('ai-interface');
} else {
console.warn('[AUTH] requireClientAuth not available');
switchToView('ai');
aiInterface.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
});
}
function switchToView(view) {
toolsGrid.style.display = 'none';
matrixContainer.style.display = 'none';
aiInterface.style.display = 'none';
filtersSection.style.display = 'none';
const viewToggles = document.querySelectorAll('.view-toggle');
viewToggles.forEach(btn => {
btn.classList.toggle('active', btn.getAttribute('data-view') === view);
});
switch (view) {
case 'ai':
aiInterface.style.display = 'block';
filtersSection.style.display = 'block';
hideFilterControls();
if (window.restoreAIResults) {
window.restoreAIResults();
}
const aiInput = document.getElementById('ai-query-input');
if (aiInput) {
setTimeout(() => aiInput.focus(), 100);
}
break;
case 'matrix':
matrixContainer.style.display = 'block';
filtersSection.style.display = 'block';
showFilterControls();
break;
default:
toolsGrid.style.display = 'block';
filtersSection.style.display = 'block';
showFilterControls();
break;
}
setTimeout(() => {
window.scrollToElementById('filters-section');
}, 150);
if (window.location.search) {
window.history.replaceState({}, '', window.location.pathname);
}
function switchToView(view) {
const toolsGrid = document.getElementById('tools-grid');
const matrixContainer = document.getElementById('matrix-container');
const aiInterface = document.getElementById('ai-interface');
const filtersSection = document.getElementById('filters-section');
const noResults = document.getElementById('no-results');
// Hide all views first
if (toolsGrid) toolsGrid.style.display = 'none';
if (matrixContainer) matrixContainer.style.display = 'none';
if (aiInterface) aiInterface.style.display = 'none';
if (filtersSection) filtersSection.style.display = 'none';
if (noResults) noResults.style.display = 'none';
// Show selected view
switch (view) {
case 'grid':
if (toolsGrid) toolsGrid.style.display = 'block';
if (filtersSection) filtersSection.style.display = 'block';
break;
case 'matrix':
if (matrixContainer) matrixContainer.style.display = 'block';
if (filtersSection) filtersSection.style.display = 'block';
break;
case 'ai':
if (aiInterface) aiInterface.style.display = 'block';
break;
}
}
function hideFilterControls() {
const filterSections = document.querySelectorAll('.filter-section');