UI Layout improvements
This commit is contained in:
overcuriousity
parent
3a5e8e88b2
commit
1eb49315fa
File diff suppressed because one or more lines are too long
@ -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');
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1750,7 +1750,93 @@ input[type="checkbox"] {
|
||||
border-color: var(--color-accent) !important;
|
||||
}
|
||||
|
||||
.ai-hero-spotlight {
|
||||
background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-bg-secondary) 100%);
|
||||
border: 2px solid var(--color-accent);
|
||||
border-radius: 1rem;
|
||||
padding: 2rem;
|
||||
margin: 1.5rem auto;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ai-hero-spotlight::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
|
||||
}
|
||||
|
||||
.ai-spotlight-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ai-spotlight-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary) 100%);
|
||||
border-radius: 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.ai-spotlight-text h3 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.ai-spotlight-text p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.ai-primary-btn {
|
||||
padding: 0.875rem 2rem;
|
||||
margin: 0 0 1rem 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ai-primary-btn:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg), 0 8px 20px rgba(5, 150, 105, 0.3);
|
||||
}
|
||||
|
||||
.ai-primary-btn svg:last-child {
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.ai-primary-btn:hover svg:last-child {
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
|
||||
/* Mini features display */
|
||||
.ai-features-mini {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.ai-features-mini .badge {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
16. AI INTERFACE (CONSOLIDATED)
|
||||
@ -1985,21 +2071,7 @@ input[type="checkbox"] {
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for micro-task progress */
|
||||
@keyframes micro-task-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.micro-step.active {
|
||||
animation: micro-task-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes micro-task-complete {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.micro-step.completed {
|
||||
animation: micro-task-complete 0.6s ease-out;
|
||||
@ -2566,6 +2638,32 @@ footer {
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation for micro-task progress */
|
||||
@keyframes micro-task-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.7; }
|
||||
}
|
||||
|
||||
.micro-step.active {
|
||||
animation: micro-task-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes micro-task-complete {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.1); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
@keyframes ai-spotlight-pulse {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.02); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.ai-primary-btn.activated {
|
||||
animation: ai-spotlight-pulse 0.4s ease-out;
|
||||
}
|
||||
|
||||
/* ===================================================================
|
||||
21. SMART PROMPTING INTERFACE (MISSING STYLES ADDED BACK)
|
||||
================================================================= */
|
||||
@ -3353,6 +3451,30 @@ footer {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.ai-spotlight-content {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ai-spotlight-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.ai-spotlight-text h3 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.ai-primary-btn {
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.ai-features-mini {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.approach-hero {
|
||||
padding: 2rem 1rem;
|
||||
@ -3625,6 +3747,14 @@ footer {
|
||||
flex: 1 1 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.ai-hero-spotlight {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.ai-features-mini {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user