style enhancements
This commit is contained in:
overcuriousity
@@ -24,86 +24,89 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="ai-input-container" style="max-width: 800px; 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;">
|
||||
<polyline points="9,11 12,14 22,4"/>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
||||
</svg>
|
||||
Workflow-Empfehlung
|
||||
</span>
|
||||
|
||||
<div class="toggle-switch" style="position: relative; width: 50px; height: 24px; background-color: var(--color-primary); border-radius: 12px; cursor: pointer; transition: var(--transition-fast);">
|
||||
<div class="toggle-slider" style="position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border-radius: 50%; transition: var(--transition-fast); transform: translateX(0);"></div>
|
||||
</div>
|
||||
|
||||
<span id="tool-label" class="toggle-label" style="font-weight: 500; color: var(--color-text-secondary); 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;">
|
||||
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
|
||||
</svg>
|
||||
Spezifische Software oder Methode
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<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;"
|
||||
maxlength="2000"
|
||||
></textarea>
|
||||
<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;">
|
||||
<polyline points="9,11 12,14 22,4"/>
|
||||
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
||||
</svg>
|
||||
Workflow-Empfehlung
|
||||
</span>
|
||||
|
||||
<!-- Smart Prompting Container -->
|
||||
<div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
|
||||
<div class="card contextual-analysis-card approach">
|
||||
<div id="prompting-status" class="prompting-status">
|
||||
💡 KI analysiert Ihre Eingabe...
|
||||
<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">
|
||||
<path d="M21 12a9 9 0 11-6.219-8.56"/>
|
||||
</svg>
|
||||
<div class="toggle-switch" style="position: relative; width: 50px; height: 24px; background-color: var(--color-primary); border-radius: 12px; cursor: pointer; transition: var(--transition-fast);">
|
||||
<div class="toggle-slider" style="position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background-color: white; border-radius: 50%; transition: var(--transition-fast); transform: translateX(0);"></div>
|
||||
</div>
|
||||
|
||||
<span id="tool-label" class="toggle-label" style="font-weight: 500; color: var(--color-text-secondary); 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;">
|
||||
<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>
|
||||
</svg>
|
||||
Spezifische Software oder Methode
|
||||
</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: 220px; resize: vertical; font-size: 0.9375rem; line-height: 1.5;"
|
||||
maxlength="2000"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="ai-suggestions-section">
|
||||
<div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
|
||||
<div class="prompting-card">
|
||||
<div id="prompting-status" class="prompting-status">
|
||||
<div class="status-icon">💡</div>
|
||||
<span class="status-text">Analysiere Eingabe...</span>
|
||||
<div id="prompting-spinner" class="prompting-spinner" style="display: none;">
|
||||
<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>
|
||||
<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 id="suggested-questions" class="suggested-questions" style="display: none;">
|
||||
<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 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;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem; vertical-align: middle;">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="12" y1="8" x2="12" y2="12"/>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"/>
|
||||
</svg>
|
||||
Ihre Anfrage wird über die kostenlose API von mistral.ai übertragen, wird für KI-Training verwendet und unterliegt deren
|
||||
<a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary); text-decoration: underline;">Datenschutzrichtlinien</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: center; gap: 1rem;">
|
||||
<button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
|
||||
<path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
|
||||
<path d="M12 17h.01"/>
|
||||
</svg>
|
||||
<span id="submit-btn-text">Empfehlungen generieren</span>
|
||||
</button>
|
||||
</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;">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem; vertical-align: middle;">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="12" y1="8" x2="12" y2="12"/>
|
||||
<line x1="12" y1="16" x2="12.01" y2="16"/>
|
||||
</svg>
|
||||
Ihre Anfrage wird über die kostenlose API von mistral.ai übertragen, wird für KI-Training verwendet und unterliegt deren
|
||||
<a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary); text-decoration: underline;">Datenschutzrichtlinien</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; justify-content: center; gap: 1rem;">
|
||||
<button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem;">
|
||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
|
||||
<path d="M14.828 14.828a4 4 0 0 1-5.656 0"/>
|
||||
<path d="M9 9a3 3 0 1 1 6 0c0 .749-.269 1.433-.73 1.96L11 14v1a1 1 0 0 1-1 1h-1a1 1 0 0 1-1-1v-1l-3.27-3.04A3 3 0 0 1 5 9a3 3 0 0 1 6 0"/>
|
||||
<path d="M12 17h.01"/>
|
||||
</svg>
|
||||
<span id="submit-btn-text">Empfehlungen generieren</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user