style enhancements
This commit is contained in:
overcuriousity
parent
69aa19642c
commit
644dff2387
@ -24,86 +24,89 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</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);">
|
<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);">
|
<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;">
|
<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"/>
|
<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"/>
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
||||||
</svg>
|
</svg>
|
||||||
Workflow-Empfehlung
|
Workflow-Empfehlung
|
||||||
</span>
|
</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-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 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>
|
||||||
|
|
||||||
<textarea
|
<span id="tool-label" class="toggle-label" style="font-weight: 500; color: var(--color-text-secondary); cursor: pointer; transition: var(--transition-fast);">
|
||||||
id="ai-query-input"
|
<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;">
|
||||||
placeholder="Beschreiben Sie Ihr forensisches Szenario... z.B. 'Verdacht auf Ransomware-Angriff auf Windows-Domänencontroller mit verschlüsselten Dateien und verdächtigen Netzwerkverbindungen'"
|
<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"/>
|
||||||
style="min-height: 120px; resize: vertical; font-size: 0.9375rem; line-height: 1.5;"
|
</svg>
|
||||||
maxlength="2000"
|
Spezifische Software oder Methode
|
||||||
></textarea>
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- Smart Prompting Container -->
|
<div class="ai-input-layout">
|
||||||
<div id="smart-prompting-container" class="smart-prompting-container" style="display: none;">
|
<div class="ai-textarea-section">
|
||||||
<div class="card contextual-analysis-card approach">
|
<textarea
|
||||||
<div id="prompting-status" class="prompting-status">
|
id="ai-query-input"
|
||||||
💡 KI analysiert Ihre Eingabe...
|
placeholder="Beschreiben Sie Ihr forensisches Szenario... z.B. 'Verdacht auf Ransomware-Angriff auf Windows-Domänencontroller mit verschlüsselten Dateien und verdächtigen Netzwerkverbindungen'"
|
||||||
<div id="prompting-spinner" class="prompting-spinner" style="display: none;">
|
style="min-height: 220px; resize: vertical; font-size: 0.9375rem; line-height: 1.5;"
|
||||||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="2">
|
maxlength="2000"
|
||||||
<path d="M21 12a9 9 0 11-6.219-8.56"/>
|
></textarea>
|
||||||
</svg>
|
</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>
|
|
||||||
<div id="suggested-questions" class="suggested-questions" style="display: none;">
|
<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;">
|
<div class="suggestions-header">
|
||||||
Zur besseren Analyse könnten diese Zusatzinformationen hilfreich sein:
|
<span class="suggestions-label">Zur besseren Analyse:</span>
|
||||||
</p>
|
</div>
|
||||||
<div id="questions-list"></div>
|
<div id="questions-list" class="questions-list"></div>
|
||||||
<div style="margin-top: 1rem; text-align: right;">
|
<button id="dismiss-suggestions" class="dismiss-button">
|
||||||
<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">
|
||||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.25rem;">
|
|
||||||
<line x1="18" y1="6" x2="6" y2="18"/>
|
<line x1="18" y1="6" x2="6" y2="18"/>
|
||||||
<line x1="6" y1="6" x2="18" y2="18"/>
|
<line x1="6" y1="6" x2="18" y2="18"/>
|
||||||
</svg>
|
</svg>
|
||||||
Ausblenden
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 0.5rem; margin-bottom: 1rem;">
|
<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;">
|
<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;">
|
<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"/>
|
<circle cx="12" cy="12" r="10"/>
|
||||||
<line x1="12" y1="8" x2="12" y2="12"/>
|
<line x1="12" y1="8" x2="12" y2="12"/>
|
||||||
<line x1="12" y1="16" x2="12.01" y2="16"/>
|
<line x1="12" y1="16" x2="12.01" y2="16"/>
|
||||||
</svg>
|
</svg>
|
||||||
Ihre Anfrage wird über die kostenlose API von mistral.ai übertragen, wird für KI-Training verwendet und unterliegt deren
|
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>
|
<a href="https://mistral.ai/privacy-policy/" target="_blank" rel="noopener noreferrer" style="color: var(--color-primary); text-decoration: underline;">Datenschutzrichtlinien</a>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="display: flex; justify-content: center; gap: 1rem;">
|
<div style="display: flex; justify-content: center; gap: 1rem;">
|
||||||
<button id="ai-submit-btn" class="btn btn-accent" style="padding: 0.75rem 2rem;">
|
<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;">
|
<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="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="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"/>
|
<path d="M12 17h.01"/>
|
||||||
</svg>
|
</svg>
|
||||||
<span id="submit-btn-text">Empfehlungen generieren</span>
|
<span id="submit-btn-text">Empfehlungen generieren</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -117,27 +120,34 @@ const domainAgnosticSoftware = data['domain-agnostic-software'] || [];
|
|||||||
</div>
|
</div>
|
||||||
<p id="loading-text" style="color: var(--color-text-secondary);">Analysiere Szenario und generiere Empfehlungen...</p>
|
<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 id="queue-status" class="queue-status-card" style="display: none;">
|
||||||
<div style="display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 0.75rem;">
|
<div class="queue-header">
|
||||||
<div style="display: flex; align-items: center; gap: 0.5rem;">
|
<div class="queue-position-display">
|
||||||
<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>
|
<div id="queue-position-badge" class="position-badge">1</div>
|
||||||
<span style="font-weight: 500;">Position in Warteschlange</span>
|
<span class="position-label">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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div style="margin-top: 1rem; background-color: var(--color-bg-tertiary); border-radius: 0.25rem; height: 4px; overflow: hidden;">
|
<div class="queue-details">
|
||||||
<div id="queue-progress" style="height: 100%; background-color: var(--color-primary); width: 0%; transition: width 0.3s ease;"></div>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -258,29 +268,31 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Smart Prompting Functions - Simplified
|
|
||||||
function showPromptingStatus(state) {
|
function showPromptingStatus(state) {
|
||||||
if (!smartPromptingContainer || !promptingStatus || !promptingSpinner) return;
|
if (!smartPromptingContainer || !promptingStatus || !promptingSpinner) return;
|
||||||
|
|
||||||
|
const statusText = promptingStatus.querySelector('.status-text');
|
||||||
|
if (!statusText) return;
|
||||||
|
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case 'analyzing':
|
case 'analyzing':
|
||||||
smartPromptingContainer.style.display = 'block';
|
smartPromptingContainer.style.display = 'block';
|
||||||
promptingStatus.textContent = '💡 KI analysiert Ihre Eingabe...';
|
statusText.textContent = 'Analysiere Eingabe...';
|
||||||
promptingSpinner.style.display = 'inline-block';
|
promptingSpinner.style.display = 'inline-block';
|
||||||
suggestedQuestions.style.display = 'none';
|
suggestedQuestions.style.display = 'none';
|
||||||
break;
|
break;
|
||||||
case 'suggestions':
|
case 'suggestions':
|
||||||
promptingStatus.textContent = '✅ Verbesserungsvorschläge verfügbar';
|
statusText.textContent = 'Verbesserungsvorschläge verfügbar';
|
||||||
promptingSpinner.style.display = 'none';
|
promptingSpinner.style.display = 'none';
|
||||||
suggestedQuestions.style.display = 'block';
|
suggestedQuestions.style.display = 'block';
|
||||||
break;
|
break;
|
||||||
case 'rate-limited':
|
case 'rate-limited':
|
||||||
promptingStatus.textContent = '⏸️ Verbesserungen nach Hauptabfrage verfügbar';
|
statusText.textContent = 'Nach Hauptabfrage verfügbar';
|
||||||
promptingSpinner.style.display = 'none';
|
promptingSpinner.style.display = 'none';
|
||||||
suggestedQuestions.style.display = 'none';
|
suggestedQuestions.style.display = 'none';
|
||||||
break;
|
break;
|
||||||
case 'error':
|
case 'error':
|
||||||
smartPromptingContainer.style.display = 'none'; // Just hide on error
|
smartPromptingContainer.style.display = 'none';
|
||||||
break;
|
break;
|
||||||
case 'hidden':
|
case 'hidden':
|
||||||
smartPromptingContainer.style.display = 'none';
|
smartPromptingContainer.style.display = 'none';
|
||||||
@ -293,15 +305,10 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||||||
|
|
||||||
questionsList.innerHTML = '';
|
questionsList.innerHTML = '';
|
||||||
|
|
||||||
suggestions.forEach((question, index) => {
|
suggestions.forEach((question) => {
|
||||||
const questionElement = document.createElement('div');
|
const questionElement = document.createElement('div');
|
||||||
questionElement.className = 'suggestion-item';
|
questionElement.className = 'suggestion-item';
|
||||||
|
questionElement.textContent = question;
|
||||||
questionElement.innerHTML = `
|
|
||||||
<span class="suggestion-number">${index + 1}.</span>
|
|
||||||
${question}
|
|
||||||
`;
|
|
||||||
|
|
||||||
questionsList.appendChild(questionElement);
|
questionsList.appendChild(questionElement);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -967,6 +967,23 @@ input[type="checkbox"] {
|
|||||||
transition: var(--transition-fast);
|
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 {
|
.ai-input-container textarea:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--color-primary);
|
border-color: var(--color-primary);
|
||||||
@ -1922,46 +1939,139 @@ footer {
|
|||||||
.kb-entry .flex.gap-2 {
|
.kb-entry .flex.gap-2 {
|
||||||
gap: 0.5rem;
|
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 Styles - Simplified */
|
||||||
.smart-prompting-container {
|
.smart-prompting-container {
|
||||||
margin-top: 1rem;
|
height: 100%;
|
||||||
animation: smartPromptSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
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 {
|
.prompting-status {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
margin-bottom: 0.75rem;
|
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;
|
font-weight: 500;
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.prompting-spinner {
|
.prompting-spinner {
|
||||||
display: inline-block;
|
flex-shrink: 0;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggested-questions {
|
.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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 0.5rem;
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.suggestion-item {
|
.suggestion-item {
|
||||||
background-color: var(--color-bg-secondary);
|
background-color: var(--color-bg);
|
||||||
border: 1px solid var(--color-border);
|
border: 1px solid transparent;
|
||||||
border-radius: 0.375rem;
|
border-radius: 0.375rem;
|
||||||
padding: 0.75rem;
|
padding: 0.5rem 0.75rem;
|
||||||
font-size: 0.875rem;
|
font-size: 0.8125rem;
|
||||||
line-height: 1.5;
|
line-height: 1.4;
|
||||||
color: var(--color-text);
|
color: var(--color-text-secondary);
|
||||||
border-left: 3px solid var(--color-accent);
|
border-left: 2px solid var(--color-accent);
|
||||||
transition: var(--transition-fast);
|
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 {
|
.suggestion-number {
|
||||||
color: var(--color-accent);
|
color: var(--color-accent);
|
||||||
@ -1969,17 +2079,161 @@ footer {
|
|||||||
margin-right: 0.5rem;
|
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 {
|
@keyframes smartPromptSlideIn {
|
||||||
from {
|
from {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(-10px);
|
transform: translateX(20px);
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
}
|
}
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 0.85;
|
||||||
transform: translateY(0);
|
transform: translateX(0);
|
||||||
max-height: 200px;
|
max-height: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user