finalize AI
This commit is contained in:
overcuriousity
parent
74f28f4fd9
commit
2b061db94e
203
README.md
203
README.md
@ -44,19 +44,206 @@ Die Seite ist dann unter `http://localhost:4321` verfügbar.
|
||||
|
||||
### Produktions-Deployment
|
||||
|
||||
#### Voraussetzungen
|
||||
|
||||
- Ubuntu/Debian server
|
||||
- Node.js 18+
|
||||
- Nginx
|
||||
- Domain
|
||||
- SSL Zertifikat
|
||||
|
||||
#### Installationsschritte
|
||||
|
||||
##### 1. Vorbereitung
|
||||
|
||||
```bash
|
||||
# Build erstellen
|
||||
npm install && npm run build
|
||||
# Klonen des Repositorys
|
||||
git clone https://git.cc24.dev/mstoeck3/cc24-hub
|
||||
cd cc24-hub
|
||||
|
||||
# Abhängigkeiten installieren
|
||||
npm install
|
||||
|
||||
# Production-Build anstoßen
|
||||
npm run build
|
||||
```
|
||||
|
||||
Die statische Seite wird im `dist/` Verzeichnis generiert und kann in die Webroot des Webservers kopiert werden.
|
||||
##### 2. Webroot vorbereiten
|
||||
|
||||
### Verfügbare Scripts
|
||||
```bash
|
||||
# Webroot erstellen und Berechtigungen setzen
|
||||
sudo mkdir -p /var/www/cc24-hub
|
||||
sudo chown $USER:$USER /var/www/cc24-hub
|
||||
|
||||
# Build in Webroot kopieren
|
||||
cp -r ./dist/* /var/www/cc24-hub/
|
||||
cp package.json /var/www/cc24-hub/
|
||||
|
||||
# Prod-Abhängigkeiten installieren
|
||||
cd /var/www/cc24-hub
|
||||
npm install --production
|
||||
|
||||
# Berechtigungen setzen
|
||||
sudo chown -R www-data:www-data /var/www/cc24-hub
|
||||
```
|
||||
|
||||
##### 3. Umgebungsvariablen setzen
|
||||
|
||||
Erstelle `/var/www/cc24-hub/.env`:
|
||||
|
||||
```bash
|
||||
# AI Konfiguration
|
||||
AI_API_ENDPOINT=https://llm.mikoshi.de # hier geeigneten Endpunkt setzen
|
||||
AI_API_KEY=your_ai_api_key
|
||||
AI_MODEL=mistral/mistral-small-latest # hier geeignetes KI-Modell wählen
|
||||
|
||||
# Authentifizierung ("false" setzen für Tests, oder wenn kostenlose KI verwendet wird)
|
||||
AUTHENTICATION_NECESSARY=true
|
||||
OIDC_ENDPOINT=https://cloud.cc24.dev
|
||||
OIDC_CLIENT_ID=your_oidc_client_id
|
||||
OIDC_CLIENT_SECRET=your_oidc_client_secret
|
||||
AUTH_SECRET=your_super_secret_jwt_key_min_32_chars
|
||||
|
||||
# Public Configuration
|
||||
PUBLIC_BASE_URL=https://your-domain.com # hier die URL setzen, mit der von außen zugegriffen wird
|
||||
```
|
||||
|
||||
```bash
|
||||
# .env sichern
|
||||
sudo chmod 600 /var/www/cc24-hub/.env
|
||||
sudo chown www-data:www-data /var/www/cc24-hub/.env
|
||||
```
|
||||
|
||||
##### 4. Systemd-Service erstellen
|
||||
|
||||
Create `/etc/systemd/system/cc24-hub.service`:
|
||||
|
||||
```ini
|
||||
[Unit]
|
||||
Description=CC24-Hub DFIR Tool Directory
|
||||
After=network.target
|
||||
Wants=network.target
|
||||
|
||||
[Service]
|
||||
Type=simple
|
||||
User=www-data
|
||||
Group=www-data
|
||||
WorkingDirectory=/var/www/cc24-hub
|
||||
ExecStart=/usr/bin/node server/entry.mjs
|
||||
Restart=always
|
||||
RestartSec=5
|
||||
StartLimitInterval=60s
|
||||
StartLimitBurst=3
|
||||
|
||||
# Environment
|
||||
Environment=NODE_ENV=production
|
||||
Environment=PORT=3000
|
||||
|
||||
# Security
|
||||
NoNewPrivileges=true
|
||||
PrivateTmp=true
|
||||
ProtectSystem=strict
|
||||
ReadWritePaths=/var/www/cc24-hub
|
||||
|
||||
# Logging
|
||||
StandardOutput=journal
|
||||
StandardError=journal
|
||||
SyslogIdentifier=cc24-hub
|
||||
|
||||
[Install]
|
||||
WantedBy=multi-user.target
|
||||
```
|
||||
|
||||
##### 5. Nginx Reverse Proxy konfigurieren
|
||||
|
||||
Erstelle `/etc/nginx/sites-available/cc24-hub`:
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name your-domain.com;
|
||||
return 301 https://$server_name$request_uri;
|
||||
}
|
||||
|
||||
server {
|
||||
listen 443 ssl http2;
|
||||
server_name your-domain.com;
|
||||
|
||||
# SSL Configuration (adjust paths for your certificates)
|
||||
ssl_certificate /etc/letsencrypt/live/your-domain.com/fullchain.pem;
|
||||
ssl_certificate_key /etc/letsencrypt/live/your-domain.com/privkey.pem;
|
||||
|
||||
# SSL Security
|
||||
ssl_protocols TLSv1.2 TLSv1.3;
|
||||
ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384;
|
||||
ssl_prefer_server_ciphers off;
|
||||
|
||||
# Security Headers
|
||||
add_header X-Frame-Options DENY;
|
||||
add_header X-Content-Type-Options nosniff;
|
||||
add_header X-XSS-Protection "1; mode=block";
|
||||
add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
|
||||
|
||||
# Proxy to Node.js application
|
||||
location / {
|
||||
proxy_pass http://localhost:3000;
|
||||
proxy_http_version 1.1;
|
||||
proxy_set_header Upgrade $http_upgrade;
|
||||
proxy_set_header Connection 'upgrade';
|
||||
proxy_set_header Host $host;
|
||||
proxy_set_header X-Real-IP $remote_addr;
|
||||
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||
proxy_set_header X-Forwarded-Proto $scheme;
|
||||
proxy_cache_bypass $http_upgrade;
|
||||
proxy_read_timeout 300s;
|
||||
proxy_connect_timeout 75s;
|
||||
}
|
||||
|
||||
# Optional: Serve static assets directly (performance optimization)
|
||||
location /_astro/ {
|
||||
proxy_pass http://localhost:3000;
|
||||
expires 1y;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
##### 6. Daemon starten und Autostart setzen
|
||||
|
||||
```bash
|
||||
# Enable Nginx site
|
||||
sudo ln -s /etc/nginx/sites-available/cc24-hub /etc/nginx/sites-enabled/
|
||||
sudo nginx -t
|
||||
sudo systemctl reload nginx
|
||||
|
||||
# Enable and start CC24-Hub service
|
||||
sudo systemctl daemon-reload
|
||||
sudo systemctl enable cc24-hub
|
||||
sudo systemctl start cc24-hub
|
||||
|
||||
# Check status
|
||||
sudo systemctl status cc24-hub
|
||||
```
|
||||
|
||||
##### 7. Deployment verifizieren
|
||||
|
||||
```bash
|
||||
# Check application logs
|
||||
sudo journalctl -u cc24-hub -f
|
||||
|
||||
# Check if app is responding
|
||||
curl http://localhost:3000
|
||||
|
||||
# Check external access
|
||||
curl https://your-domain.com
|
||||
```
|
||||
|
||||
#### OIDC Konfigurieren
|
||||
|
||||
Nextcloud OIDC Einstellungen (sollte auch mit anderen OIDC-Anwendungen klappen):
|
||||
- **Redirect URI**: `https://your-domain.com/auth/callback`
|
||||
- **Logout URI**: `https://your-domain.com`
|
||||
|
||||
- `npm run dev` - Development Server
|
||||
- `npm run build` - Produktions-Build
|
||||
- `npm run preview` - Vorschau des Builds
|
||||
- `npm run deploy:static` - Statisches Deployment (Script)
|
||||
|
||||
## 📁 Projektstruktur
|
||||
|
||||
|
||||
@ -368,6 +368,8 @@ Beispiele:
|
||||
<script define:vars={{ toolsData: tools }}>
|
||||
// Global tool data for quick lookup
|
||||
window.aiToolsData = toolsData;
|
||||
// Store AI session results
|
||||
window.aiSessionResults = null;
|
||||
|
||||
// Authentication check function
|
||||
async function checkAuthentication() {
|
||||
@ -454,6 +456,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
queryInput.value = '';
|
||||
charCount.textContent = '0';
|
||||
hideAllStates();
|
||||
// Clear session results
|
||||
window.aiSessionResults = null;
|
||||
});
|
||||
}
|
||||
|
||||
@ -461,10 +465,22 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
if (newQueryBtn) {
|
||||
newQueryBtn.addEventListener('click', () => {
|
||||
hideAllStates();
|
||||
// Clear session results
|
||||
window.aiSessionResults = null;
|
||||
queryInput?.focus();
|
||||
});
|
||||
}
|
||||
|
||||
// Function to restore previous results when switching back to AI view
|
||||
function restoreSessionResults() {
|
||||
if (window.aiSessionResults) {
|
||||
showResults(window.aiSessionResults);
|
||||
}
|
||||
}
|
||||
|
||||
// Make restore function globally accessible
|
||||
window.restoreAIResults = restoreSessionResults;
|
||||
|
||||
// State management functions
|
||||
function showLoadingState() {
|
||||
hideAllStates();
|
||||
@ -482,6 +498,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
function showResults(recommendation) {
|
||||
hideAllStates();
|
||||
populateResults(recommendation);
|
||||
// Save results to session
|
||||
window.aiSessionResults = recommendation;
|
||||
resultsEl.style.display = 'block';
|
||||
submitBtn.disabled = false;
|
||||
}
|
||||
@ -518,10 +536,14 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const phaseTools = recommendedTools.filter(tool => tool.phase === phaseId);
|
||||
|
||||
if (phaseTools.length === 0) {
|
||||
container.innerHTML = '<p class="text-muted" style="font-size: 0.875rem; margin: 0; font-style: italic;">Keine spezifischen Tools für diese Phase empfohlen.</p>';
|
||||
container.innerHTML = '<p class="text-muted" style="font-size: 0.875rem; margin: 0; font-style: italic; grid-column: 1 / -1; text-align: center; padding: 2rem;">Keine spezifischen Tools für diese Phase empfohlen.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
// Sort by priority: high -> medium -> low
|
||||
const priorityOrder = { 'high': 1, 'medium': 2, 'low': 3 };
|
||||
phaseTools.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
|
||||
|
||||
container.innerHTML = phaseTools.map(recTool => {
|
||||
const toolData = window.aiToolsData.find(t => t.name === recTool.name);
|
||||
if (!toolData) return '';
|
||||
@ -543,15 +565,29 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
"${recTool.justification}"
|
||||
</div>
|
||||
|
||||
<div class="tool-rec-metadata">
|
||||
<span>💻 ${(toolData.platforms || []).join(', ')}</span>
|
||||
<span>•</span>
|
||||
<span>📈 ${toolData.skillLevel}</span>
|
||||
<span>•</span>
|
||||
<span>📄 ${toolData.license}</span>
|
||||
${hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
|
||||
${isOSS ? '<span class="badge badge-success">Open Source</span>' : ''}
|
||||
${hasKnowledgebase ? '<span class="badge badge-error">Infos 📖</span>' : ''}
|
||||
<div style="margin-top: auto;">
|
||||
<div class="tool-rec-metadata">
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
||||
<line x1="9" y1="9" x2="15" y2="9"></line>
|
||||
<line x1="9" y1="15" x2="15" y2="15"></line>
|
||||
</svg>
|
||||
<span>${(toolData.platforms || []).join(', ')}</span>
|
||||
</div>
|
||||
<div style="display: flex; align-items: center; gap: 0.25rem; margin-bottom: 0.5rem;">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<path d="M12 6v6l4 2"></path>
|
||||
</svg>
|
||||
<span>${toolData.skillLevel}</span>
|
||||
</div>
|
||||
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
|
||||
${hasValidProjectUrl ? '<span class="badge badge-primary">Self-Hosted</span>' : ''}
|
||||
${isOSS ? '<span class="badge badge-success">Open Source</span>' : ''}
|
||||
${hasKnowledgebase ? '<span class="badge badge-error">Infos 📖</span>' : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@ -118,11 +118,18 @@ ${phasesDescription}
|
||||
FORENSISCHE DOMÄNEN:
|
||||
${domainsDescription}
|
||||
|
||||
PRIORITÄTEN:
|
||||
1. Self-hosted Tools (projectUrl: "self-hosted") bevorzugen
|
||||
2. Open Source Tools bevorzugen (license != "Proprietary")
|
||||
3. Maximal 3 Tools pro Phase empfehlen
|
||||
4. Deutsche Antworten für deutsche Anfragen, English for English queries
|
||||
WICHTIGE REGELN:
|
||||
1. Open Source Tools bevorzugen (license != "Proprietary")
|
||||
2. Pro Phase 1-3 Tools empfehlen (immer mindestens 1 wenn verfügbar)
|
||||
3. Tools können in MEHREREN Phasen empfohlen werden wenn sinnvoll - versuche ein Tool für jede Phase zu empfehlen!
|
||||
4. Für Reporting-Phase: Visualisierungs- und Dokumentationstools einschließen
|
||||
5. Deutsche Antworten für deutsche Anfragen, English for English queries
|
||||
|
||||
TOOL-AUSWAHL NACH PHASE:
|
||||
- data-collection: Imaging, Acquisition, Remote Collection Tools
|
||||
- examination: Parsing, Extraction, Initial Analysis Tools
|
||||
- analysis: Deep Analysis, Correlation, Visualization Tools
|
||||
- reporting: Documentation, Visualization, Presentation Tools (z.B. QGIS für Geodaten, Timeline-Tools)
|
||||
|
||||
ANTWORT-FORMAT (strict JSON):
|
||||
{
|
||||
@ -132,7 +139,7 @@ ANTWORT-FORMAT (strict JSON):
|
||||
"name": "EXAKTER Name aus der Database",
|
||||
"priority": "high|medium|low",
|
||||
"phase": "data-collection|examination|analysis|reporting",
|
||||
"justification": "Warum dieses Tool für dieses Szenario geeignet ist"
|
||||
"justification": "Warum dieses Tool für diese Phase und Szenario geeignet ist"
|
||||
}
|
||||
],
|
||||
"workflow_suggestion": "Vorgeschlagener Untersuchungsablauf",
|
||||
|
||||
@ -174,6 +174,12 @@ const tools = data.tools;
|
||||
switch (view) {
|
||||
case 'ai':
|
||||
aiInterface!.style.display = 'block';
|
||||
// Keep filters visible in AI mode for view switching
|
||||
filtersSection!.style.display = 'block';
|
||||
// Restore previous AI results if they exist
|
||||
if ((window as any).restoreAIResults) {
|
||||
(window as any).restoreAIResults();
|
||||
}
|
||||
// Focus on the input
|
||||
const aiInput = document.getElementById('ai-query-input');
|
||||
if (aiInput) {
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
/* CSS Reset and Base Styles */
|
||||
*, *::before, *::after {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -8,11 +10,11 @@
|
||||
/* CSS Variables for Theming */
|
||||
:root {
|
||||
/* Light Theme Colors */
|
||||
--color-bg: #ffffff;
|
||||
--color-bg: #fff;
|
||||
--color-bg-secondary: #f5f5f5;
|
||||
--color-bg-tertiary: #e0e0e0;
|
||||
--color-text: #1a1a1a;
|
||||
--color-text-secondary: #666666;
|
||||
--color-text-secondary: #666;
|
||||
--color-border: #d0d0d0;
|
||||
--color-primary: #2563eb;
|
||||
--color-primary-hover: #1d4ed8;
|
||||
@ -24,9 +26,9 @@
|
||||
--color-hosted-bg: #f3f0ff;
|
||||
--color-oss: #10b981;
|
||||
--color-oss-bg: #ecfdf5;
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 5%);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 10%);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
@ -47,9 +49,9 @@
|
||||
--color-hosted-bg: #2e1065;
|
||||
--color-oss: #34d399;
|
||||
--color-oss-bg: #064e3b;
|
||||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
|
||||
--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 30%);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 40%);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 50%);
|
||||
}
|
||||
|
||||
/* Base Styles */
|
||||
@ -69,18 +71,40 @@ body {
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.5rem; }
|
||||
h2 { font-size: 2rem; }
|
||||
h3 { font-size: 1.5rem; }
|
||||
h4 { font-size: 1.25rem; }
|
||||
h5 { font-size: 1.125rem; }
|
||||
h6 { font-size: 1rem; }
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
@ -210,7 +234,9 @@ nav {
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
input, select, textarea {
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border: 1px solid var(--color-border);
|
||||
@ -221,10 +247,12 @@ input, select, textarea {
|
||||
transition: border-color 0.2s ease;
|
||||
}
|
||||
|
||||
input:focus, select:focus, textarea:focus {
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
|
||||
}
|
||||
|
||||
select {
|
||||
@ -279,10 +307,21 @@ input[type="checkbox"] {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
|
||||
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||||
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||||
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
.grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
/* Tool Matrix */
|
||||
.matrix-wrapper {
|
||||
@ -326,41 +365,41 @@ input[type="checkbox"] {
|
||||
/* Matrix Highlighting */
|
||||
.matrix-table tr.highlight-row th,
|
||||
.matrix-table tr.highlight-row td {
|
||||
background-color: rgba(37, 99, 235, 0.08);
|
||||
border-color: rgba(37, 99, 235, 0.2);
|
||||
background-color: rgb(37 99 235 / 8%);
|
||||
border-color: rgb(37 99 235 / 20%);
|
||||
}
|
||||
|
||||
.matrix-table th.highlight-column,
|
||||
.matrix-table td.highlight-column {
|
||||
background-color: rgba(37, 99, 235, 0.08);
|
||||
border-color: rgba(37, 99, 235, 0.2);
|
||||
background-color: rgb(37 99 235 / 8%);
|
||||
border-color: rgb(37 99 235 / 20%);
|
||||
}
|
||||
|
||||
.matrix-table tr.highlight-row th.highlight-column,
|
||||
.matrix-table tr.highlight-row td.highlight-column {
|
||||
background-color: rgba(37, 99, 235, 0.15);
|
||||
border-color: rgba(37, 99, 235, 0.4);
|
||||
box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3);
|
||||
background-color: rgb(37 99 235 / 15%);
|
||||
border-color: rgb(37 99 235 / 40%);
|
||||
box-shadow: inset 0 0 0 1px rgb(37 99 235 / 30%);
|
||||
}
|
||||
|
||||
/* Dark theme adjustments */
|
||||
[data-theme="dark"] .matrix-table tr.highlight-row th,
|
||||
[data-theme="dark"] .matrix-table tr.highlight-row td {
|
||||
background-color: rgba(59, 130, 246, 0.12);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
background-color: rgb(59 130 246 / 12%);
|
||||
border-color: rgb(59 130 246 / 30%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .matrix-table th.highlight-column,
|
||||
[data-theme="dark"] .matrix-table td.highlight-column {
|
||||
background-color: rgba(59, 130, 246, 0.12);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
background-color: rgb(59 130 246 / 12%);
|
||||
border-color: rgb(59 130 246 / 30%);
|
||||
}
|
||||
|
||||
[data-theme="dark"] .matrix-table tr.highlight-row th.highlight-column,
|
||||
[data-theme="dark"] .matrix-table tr.highlight-row td.highlight-column {
|
||||
background-color: rgba(59, 130, 246, 0.2);
|
||||
border-color: rgba(59, 130, 246, 0.5);
|
||||
box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.4);
|
||||
background-color: rgb(59 130 246 / 20%);
|
||||
border-color: rgb(59 130 246 / 50%);
|
||||
box-shadow: inset 0 0 0 1px rgb(59 130 246 / 40%);
|
||||
}
|
||||
|
||||
.tool-chip {
|
||||
@ -467,7 +506,7 @@ input[type="checkbox"] {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: rgb(0 0 0 / 50%);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
@ -483,6 +522,7 @@ input[type="checkbox"] {
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.badge-primary {
|
||||
@ -551,23 +591,63 @@ footer {
|
||||
}
|
||||
|
||||
/* Utility Classes */
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.text-muted { color: var(--color-text-secondary); }
|
||||
.mt-1 { margin-top: 0.25rem; }
|
||||
.mt-2 { margin-top: 0.5rem; }
|
||||
.mt-4 { margin-top: 1rem; }
|
||||
.mb-1 { margin-bottom: 0.25rem; }
|
||||
.mb-2 { margin-bottom: 0.5rem; }
|
||||
.mb-4 { margin-bottom: 1rem; }
|
||||
.gap-1 { gap: 0.25rem; }
|
||||
.gap-2 { gap: 0.5rem; }
|
||||
.gap-4 { gap: 1rem; }
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-muted {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mb-1 {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-4 {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
@ -577,6 +657,7 @@ footer {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
max-height: 1000px;
|
||||
@ -586,15 +667,22 @@ footer {
|
||||
}
|
||||
|
||||
@keyframes highlight-flash {
|
||||
0% { background-color: rgba(37, 99, 235, 0.1); }
|
||||
100% { background-color: transparent; }
|
||||
0% {
|
||||
background-color: rgb(37 99 235 / 10%);
|
||||
}
|
||||
|
||||
100% {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
/* Loading spinner enhancement */
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -606,6 +694,7 @@ footer {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
@ -626,7 +715,8 @@ footer {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.kb-content ul, .kb-content ol {
|
||||
.kb-content ul,
|
||||
.kb-content ol {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
@ -635,7 +725,7 @@ footer {
|
||||
background-color: var(--color-bg-secondary);
|
||||
padding: 0.125rem 0.25rem;
|
||||
border-radius: 0.25rem;
|
||||
font-family: 'Monaco', 'Courier New', monospace;
|
||||
font-family: Monaco, 'Courier New', monospace;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
@ -775,7 +865,7 @@ footer {
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
max-height: 120px;
|
||||
max-height: 60px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease, opacity 0.3s ease;
|
||||
position: relative;
|
||||
@ -800,12 +890,10 @@ footer {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 40px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
transparent 0%,
|
||||
transparent 60%,
|
||||
var(--color-bg) 100%
|
||||
);
|
||||
background: linear-gradient(to bottom,
|
||||
transparent 0%,
|
||||
transparent 60%,
|
||||
var(--color-bg) 100%);
|
||||
pointer-events: none;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease;
|
||||
@ -900,23 +988,36 @@ footer {
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.grid-cols-2 { grid-template-columns: 1fr; }
|
||||
.grid-cols-3 { grid-template-columns: 1fr; }
|
||||
.grid-cols-4 { grid-template-columns: 1fr; }
|
||||
|
||||
@media (width <= 768px) {
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
h1 { font-size: 2rem; }
|
||||
h2 { font-size: 1.5rem; }
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.collaboration-tools-compact {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -925,119 +1026,136 @@ footer {
|
||||
min-width: auto;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
|
||||
.domain-phase-container {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
.phase-buttons {
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
|
||||
.phase-button {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
|
||||
.tag-cloud {
|
||||
max-height: 100px;
|
||||
}
|
||||
|
||||
|
||||
.tag-header {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.ai-interface {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
|
||||
.workflow-container {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
.phase-header {
|
||||
padding: 1rem;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
.phase-number {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
font-size: 1rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
||||
.phase-title {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
|
||||
.phase-tools {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.tool-recommendation {
|
||||
padding: 1rem;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.tool-rec-header {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
|
||||
.tool-rec-metadata {
|
||||
flex-direction: column;
|
||||
align-items: start;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
.ai-input-container textarea {
|
||||
min-height: 100px;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@media (width <= 600px) {
|
||||
.phase-tools {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 640px) {
|
||||
.phase-buttons {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
.phase-button {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.tag-cloud {
|
||||
max-height: 80px;
|
||||
}
|
||||
|
||||
|
||||
.tag-cloud.expanded {
|
||||
max-height: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (width <= 480px) {
|
||||
.phase-buttons {
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
|
||||
.phase-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ai-query-section {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
|
||||
.phase-header {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
.tool-recommendation {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
.tool-rec-justification {
|
||||
padding: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* AI Interface Styles - Add to global.css */
|
||||
.phase-tools {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* AI Interface Container */
|
||||
.ai-interface {
|
||||
@ -1057,20 +1175,21 @@ footer {
|
||||
.ai-input-container textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
|
||||
box-shadow: 0 0 0 3px rgb(37 99 235 / 10%);
|
||||
}
|
||||
|
||||
/* Loading, Error, and Results States */
|
||||
.ai-loading, .ai-error, .ai-results {
|
||||
.ai-loading,
|
||||
.ai-error,
|
||||
.ai-results {
|
||||
animation: fadeIn 0.3s ease-in;
|
||||
}
|
||||
|
||||
/* Workflow Visualization */
|
||||
.workflow-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
max-width: 900px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@ -1114,16 +1233,16 @@ footer {
|
||||
}
|
||||
|
||||
.phase-title {
|
||||
margin: 0 0 1rem 0;
|
||||
margin: 0 0 1rem;
|
||||
color: var(--color-text);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.phase-tools {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.workflow-arrow {
|
||||
@ -1134,23 +1253,28 @@ footer {
|
||||
|
||||
/* Tool Recommendation Cards */
|
||||
.tool-recommendation {
|
||||
background-color: var(--color-bg-secondary);
|
||||
background-color: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1rem;
|
||||
padding: 1.25rem;
|
||||
transition: all 0.2s ease;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
.tool-recommendation:hover {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.tool-recommendation.hosted {
|
||||
background-color: var(--color-hosted-bg);
|
||||
border-color: var(--color-hosted);
|
||||
box-shadow: 0 0 0 1px var(--color-hosted);
|
||||
}
|
||||
|
||||
.tool-recommendation.oss {
|
||||
@ -1209,9 +1333,8 @@ footer {
|
||||
|
||||
.tool-rec-metadata {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
@ -1240,8 +1363,6 @@ footer {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ai-results {
|
||||
animation: fadeInUp 0.5s ease-out;
|
||||
}
|
||||
@ -1250,11 +1371,17 @@ footer {
|
||||
animation: fadeInUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
.tool-recommendation:nth-child(1) { animation-delay: 0.1s; }
|
||||
.tool-recommendation:nth-child(2) { animation-delay: 0.2s; }
|
||||
.tool-recommendation:nth-child(3) { animation-delay: 0.3s; }
|
||||
.tool-recommendation:nth-child(1) {
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
.tool-recommendation:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
.tool-recommendation:nth-child(3) {
|
||||
animation-delay: 0.3s;
|
||||
}
|
||||
|
||||
.ai-loading p {
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user