style enhancements
This commit is contained in:
overcuriousity
parent
69aa19642c
commit
644dff2387
@ -24,7 +24,7 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ai-input-container" style="max-width: 800px; margin: 0 auto;">
|
||||
<div class="ai-input-container" style="max-width: 1000px; margin: 0 auto;">
|
||||
<div class="ai-mode-toggle" style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.75rem; border: 1px solid var(--color-border);">
|
||||
<span id="workflow-label" class="toggle-label active" style="font-weight: 500; color: var(--color-primary); cursor: pointer; transition: var(--transition-fast);">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem; vertical-align: middle;">
|
||||
@ -46,41 +46,45 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="ai-input-layout">
|
||||
<div class="ai-textarea-section">
|
||||
<textarea
|
||||
id="ai-query-input"
|
||||
placeholder="Beschreiben Sie Ihr forensisches Szenario... z.B. 'Verdacht auf Ransomware-Angriff auf Windows-Domänencontroller mit verschlüsselten Dateien und verdächtigen Netzwerkverbindungen'"
|
||||
style="min-height: 120px; resize: vertical; font-size: 0.9375rem; line-height: 1.5;"
|
||||
style="min-height: 220px; resize: vertical; font-size: 0.9375rem; line-height: 1.5;"
|
||||
maxlength="2000"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Smart Prompting Container -->
|
||||
<div class="ai-suggestions-section">
|
||||
<div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
|
||||
<div class="card contextual-analysis-card approach">
|
||||
<div class="prompting-card">
|
||||
<div id="prompting-status" class="prompting-status">
|
||||
💡 KI analysiert Ihre Eingabe...
|
||||
<div class="status-icon">💡</div>
|
||||
<span class="status-text">Analysiere Eingabe...</span>
|
||||
<div id="prompting-spinner" class="prompting-spinner" style="display: none;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
|
||||
<path d="M21 12a9 9 0 11-6.219-8.56"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="suggested-questions" class="suggested-questions" style="display: none;">
|
||||
<p style="margin: 0 0 0.75rem 0; font-size: 0.875rem; color: var(--color-text-secondary); line-height: 1.5;">
|
||||
Zur besseren Analyse könnten diese Zusatzinformationen hilfreich sein:
|
||||
</p>
|
||||
<div id="questions-list"></div>
|
||||
<div style="margin-top: 1rem; text-align: right;">
|
||||
<button id="dismiss-suggestions" class="btn-icon" style="font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; background-color: var(--color-bg-secondary);">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
|
||||
<div class="suggestions-header">
|
||||
<span class="suggestions-label">Zur besseren Analyse:</span>
|
||||
</div>
|
||||
<div id="questions-list" class="questions-list"></div>
|
||||
<button id="dismiss-suggestions" class="dismiss-button">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
Ausblenden
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 0.5rem; margin-bottom: 1rem;">
|
||||
<p style="font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; line-height: 1.4;">
|
||||
@ -105,7 +109,6 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ai-loading" class="ai-loading" style="display: none; text-align: center; padding: 2rem;">
|
||||
<div style="display: inline-block; margin-bottom: 1rem;">
|
||||
@ -117,27 +120,34 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
||||
</div>
|
||||
<p id="loading-text" style="color: var(--color-text-secondary);">Analysiere Szenario und generiere Empfehlungen...</p>
|
||||
|
||||
<div id="queue-status" style="margin-top: 1rem; padding: 1rem; background-color: var(--color-bg-secondary); border-radius: 0.5rem; border: 1px solid var(--color-border); display: none;">
|
||||
<div style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.75rem;">
|
||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
||||
<div id="queue-position-badge" style="width: 24px; height: 24px; background-color: var(--color-primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.875rem;">1</div>
|
||||
<span style="font-weight: 500;">Position in Warteschlange</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 0.875rem; color: var(--color-text-secondary); text-align: center;">
|
||||
<div id="queue-length-info" style="margin-bottom: 0.5rem;">
|
||||
<span id="queue-length">0</span> Anfrage(n) in der Warteschlange
|
||||
</div>
|
||||
<div id="estimated-time-info">
|
||||
Geschätzte Wartezeit: <span id="estimated-time">--</span>
|
||||
</div>
|
||||
<div id="task-id-info" style="margin-top: 0.5rem; font-family: monospace; font-size: 0.75rem; opacity: 0.7;">
|
||||
Task-ID: <span id="current-task-id">--</span>
|
||||
<div id="queue-status" class="queue-status-card" style="display: none;">
|
||||
<div class="queue-header">
|
||||
<div class="queue-position-display">
|
||||
<div id="queue-position-badge" class="position-badge">1</div>
|
||||
<span class="position-label">Position in Warteschlange</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 1rem; background-color: var(--color-bg-tertiary); border-radius: 0.25rem; height: 4px; overflow: hidden;">
|
||||
<div id="queue-progress" style="height: 100%; background-color: var(--color-primary); width: 0%; transition: width 0.3s ease;"></div>
|
||||
<div class="queue-details">
|
||||
<div class="queue-stat">
|
||||
<span class="stat-label">Warteschlange:</span>
|
||||
<span id="queue-length" class="stat-value">0</span>
|
||||
<span class="stat-unit">Anfrage(n)</span>
|
||||
</div>
|
||||
<div class="queue-stat">
|
||||
<span class="stat-label">Geschätzte Zeit:</span>
|
||||
<span id="estimated-time" class="stat-value">--</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="queue-progress-container">
|
||||
<div class="queue-progress-track">
|
||||
<div id="queue-progress" class="queue-progress-fill"></div>
|
||||
</div>
|
||||
<div class="task-id-display">
|
||||
<span class="task-label">Task:</span>
|
||||
<code id="current-task-id" class="task-id">--</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -258,29 +268,31 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
}
|
||||
|
||||
// Smart Prompting Functions - Simplified
|
||||
function showPromptingStatus(state) {
|
||||
if (!smartPromptingContainer || !promptingStatus || !promptingSpinner) return;
|
||||
|
||||
const statusText = promptingStatus.querySelector('.status-text');
|
||||
if (!statusText) return;
|
||||
|
||||
switch (state) {
|
||||
case 'analyzing':
|
||||
smartPromptingContainer.style.display = 'block';
|
||||
promptingStatus.textContent = '💡 KI analysiert Ihre Eingabe...';
|
||||
statusText.textContent = 'Analysiere Eingabe...';
|
||||
promptingSpinner.style.display = 'inline-block';
|
||||
suggestedQuestions.style.display = 'none';
|
||||
break;
|
||||
case 'suggestions':
|
||||
promptingStatus.textContent = '✅ Verbesserungsvorschläge verfügbar';
|
||||
statusText.textContent = 'Verbesserungsvorschläge verfügbar';
|
||||
promptingSpinner.style.display = 'none';
|
||||
suggestedQuestions.style.display = 'block';
|
||||
break;
|
||||
case 'rate-limited':
|
||||
promptingStatus.textContent = '⏸️ Verbesserungen nach Hauptabfrage verfügbar';
|
||||
statusText.textContent = 'Nach Hauptabfrage verfügbar';
|
||||
promptingSpinner.style.display = 'none';
|
||||
suggestedQuestions.style.display = 'none';
|
||||
break;
|
||||
case 'error':
|
||||
smartPromptingContainer.style.display = 'none'; // Just hide on error
|
||||
smartPromptingContainer.style.display = 'none';
|
||||
break;
|
||||
case 'hidden':
|
||||
smartPromptingContainer.style.display = 'none';
|
||||
@ -293,15 +305,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
questionsList.innerHTML = '';
|
||||
|
||||
suggestions.forEach((question, index) => {
|
||||
suggestions.forEach((question) => {
|
||||
const questionElement = document.createElement('div');
|
||||
questionElement.className = 'suggestion-item';
|
||||
|
||||
questionElement.innerHTML = `
|
||||
<span class="suggestion-number">${index + 1}.</span>
|
||||
${question}
|
||||
`;
|
||||
|
||||
questionElement.textContent = question;
|
||||
questionsList.appendChild(questionElement);
|
||||
});
|
||||
|
||||
|
||||
@ -967,6 +967,23 @@ input[type="checkbox"] {
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.ai-input-layout {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ai-textarea-section {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.ai-suggestions-section {
|
||||
flex: 0 0 320px;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.ai-input-container textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
@ -1922,46 +1939,139 @@ footer {
|
||||
.kb-entry .flex.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.ai-input-layout {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.prompting-card {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
padding: 0.375rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.position-badge {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.queue-status-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Smart Prompting Styles - Simplified */
|
||||
.smart-prompting-container {
|
||||
margin-top: 1rem;
|
||||
height: 100%;
|
||||
animation: smartPromptSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.prompting-card {
|
||||
background-color: var(--color-bg-tertiary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
height: 100%;
|
||||
min-height: 120px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
opacity: 0.85;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
|
||||
.prompting-card:hover {
|
||||
opacity: 1;
|
||||
border-color: var(--color-accent);
|
||||
}
|
||||
|
||||
.prompting-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.status-icon {
|
||||
font-size: 1rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-text {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.prompting-spinner {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.suggested-questions {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.suggestions-header {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.suggestions-label {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
}
|
||||
|
||||
.questions-list {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.suggestion-item {
|
||||
background-color: var(--color-bg-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.375rem;
|
||||
padding: 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-text);
|
||||
border-left: 3px solid var(--color-accent);
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.4;
|
||||
color: var(--color-text-secondary);
|
||||
border-left: 2px solid var(--color-accent);
|
||||
transition: var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.suggestion-item::before {
|
||||
content: counter(suggestion-counter);
|
||||
counter-increment: suggestion-counter;
|
||||
position: absolute;
|
||||
left: -8px;
|
||||
top: -6px;
|
||||
background-color: var(--color-accent);
|
||||
color: white;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.625rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.questions-list {
|
||||
counter-reset: suggestion-counter;
|
||||
}
|
||||
|
||||
.suggestion-number {
|
||||
color: var(--color-accent);
|
||||
@ -1969,17 +2079,161 @@ footer {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
/* Improved animation - smoother and simpler */
|
||||
.dismiss-button {
|
||||
align-self: flex-end;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
transition: var(--transition-fast);
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dismiss-button:hover {
|
||||
background-color: var(--color-bg-secondary);
|
||||
color: var(--color-text);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Queue Status - Improved Design */
|
||||
.queue-status-card {
|
||||
max-width: 400px;
|
||||
margin: 1.5rem auto 0;
|
||||
background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.queue-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.queue-position-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.position-badge {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.position-label {
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
.queue-details {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.queue-stat {
|
||||
text-align: center;
|
||||
padding: 0.75rem;
|
||||
background-color: var(--color-bg);
|
||||
border-radius: 0.5rem;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.stat-unit {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.queue-progress-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.queue-progress-track {
|
||||
background-color: var(--color-bg);
|
||||
border-radius: 8px;
|
||||
height: 6px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--color-border);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.queue-progress-fill {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent) 100%);
|
||||
width: 0%;
|
||||
transition: width 0.3s ease;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.task-id-display {
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--color-bg);
|
||||
border-radius: 0.375rem;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.task-label {
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin-right: 0.5rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.025em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.task-id {
|
||||
font-family: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
|
||||
font-size: 0.6875rem;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-bg-secondary);
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 0.25rem;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
@keyframes smartPromptSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px);
|
||||
transform: translateX(20px);
|
||||
max-height: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
max-height: 200px;
|
||||
opacity: 0.85;
|
||||
transform: translateX(0);
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user