Skip to content

C
chatbot-canifa-dev-experimentall
Commit e5f37a41 authored by Vũ Hoàng Anh's avatar Vũ Hoàng Anh
Browse files
Options

UI: teal theme + DEV badge + container rename canifa-backend-dev-experimental

parent fea57242
Pipeline #3372 failed with stage
    Show whitespace changes
    Inline Side-by-side
    Showing with 76 additions and 76 deletions
    backend/docker-compose.dev.yml
    View file @ e5f37a41
    ...@@ -2,7 +2,7 @@ services: ...@@ -2,7 +2,7 @@ services:
    # --- Backend Service --- # --- Backend Service ---
    backend: backend:
    build: . build: .
    container_name: canifa_backend container_name: canifa-backend-dev-experimental
    env_file: .env env_file: .env
    ports: ports:
    - "5005:5000" - "5005:5000"
    ......
    backend/docker-compose.prod.yml
    View file @ e5f37a41
    ...@@ -4,7 +4,7 @@ services: ...@@ -4,7 +4,7 @@ services:
    build: build:
    context: . context: .
    dockerfile: Dockerfile.prod dockerfile: Dockerfile.prod
    container_name: canifa_backend container_name: canifa-backend-dev-experimental
    env_file: .env env_file: .env
    ports: ports:
    - "5005:5000" - "5005:5000"
    ......
    backend/static/changelog.html
    View file @ e5f37a41
    ...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
    /* ═══ SIDEBAR ═══ */ /* ═══ SIDEBAR ═══ */
    .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; } .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
    .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; } .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
    .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; } .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
    .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; } .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
    .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; } .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
    .nav-group { padding: 16px 12px 8px; } .nav-group { padding: 16px 12px 8px; }
    ...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
    .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
    .nav-item:hover { background: #161b22; color: #e6edf3; } .nav-item:hover { background: #161b22; color: #e6edf3; }
    .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; } .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
    .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
    .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; } .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
    .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
    .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); } .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
    .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); } .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
    .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); } .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
    .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); } .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
    .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; } .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
    ...@@ -41,9 +41,9 @@ ...@@ -41,9 +41,9 @@
    /* ═══ FORM ═══ */ /* ═══ FORM ═══ */
    .form-input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; } .form-input { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; }
    .form-input:focus { outline: none; border-color: #667eea; } .form-input:focus { outline: none; border-color: #0d9488; }
    .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; } .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; }
    .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: #fff; } .btn-primary { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; }
    .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
    /* ═══ CHANGELOG ═══ */ /* ═══ CHANGELOG ═══ */
    ......
    backend/static/dashboard.html
    View file @ e5f37a41
    ...@@ -40,7 +40,7 @@ ...@@ -40,7 +40,7 @@
    .brand-icon { .brand-icon {
    width: 40px; height: 40px; width: 40px; height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #0d9488, #065f46);
    border-radius: 10px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
    font-size: 1.3em; flex-shrink: 0; font-size: 1.3em; flex-shrink: 0;
    ...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
    .nav-item.active::before { .nav-item.active::before {
    content: ''; position: absolute; left: 0; top: 50%; content: ''; position: absolute; left: 0; top: 50%;
    transform: translateY(-50%); width: 3px; height: 20px; transform: translateY(-50%); width: 3px; height: 20px;
    background: linear-gradient(180deg, #667eea, #764ba2); background: linear-gradient(180deg, #0d9488, #065f46);
    border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
    } }
    ...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
    } }
    .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); } .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
    .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); } .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
    .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); } .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
    .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); } .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
    ...@@ -331,7 +331,7 @@ ...@@ -331,7 +331,7 @@
    .btn:hover { background: #1b2030; color: #e6edf3; border-color: #30363d; } .btn:hover { background: #1b2030; color: #e6edf3; border-color: #30363d; }
    .btn-primary { .btn-primary {
    background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #0d9488, #065f46);
    border-color: transparent; color: #fff; border-color: transparent; color: #fff;
    } }
    ...@@ -609,7 +609,7 @@ ...@@ -609,7 +609,7 @@
    } }
    .form-input:focus, .form-textarea:focus, .form-select:focus { .form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none; border-color: #667eea; outline: none; border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(102,126,234,0.15); box-shadow: 0 0 0 3px rgba(102,126,234,0.15);
    } }
    ...@@ -644,7 +644,7 @@ ...@@ -644,7 +644,7 @@
    .loading .spinner { .loading .spinner {
    width: 36px; height: 36px; border: 3px solid #1b2030; width: 36px; height: 36px; border: 3px solid #1b2030;
    border-top-color: #667eea; border-radius: 50%; border-top-color: #0d9488; border-radius: 50%;
    animation: spin 0.7s linear infinite; margin-bottom: 16px; animation: spin 0.7s linear infinite; margin-bottom: 16px;
    } }
    ......
    backend/static/experiment_detail.html
    View file @ e5f37a41
    ...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
    /* ═══ SIDEBAR ═══ */ /* ═══ SIDEBAR ═══ */
    .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; } .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
    .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; } .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
    .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; } .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
    .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; } .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
    .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; } .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
    .nav-group { padding: 16px 12px 8px; } .nav-group { padding: 16px 12px 8px; }
    ...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
    .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
    .nav-item:hover { background: #161b22; color: #e6edf3; } .nav-item:hover { background: #161b22; color: #e6edf3; }
    .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; } .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
    .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
    .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; } .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
    .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
    .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); } .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
    .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); } .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
    .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); } .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
    .badge-dev { background: rgba(167,139,250,0.15); color: #a78bfa; border: 1px solid rgba(167,139,250,0.25); } .badge-dev { background: rgba(167,139,250,0.15); color: #a78bfa; border: 1px solid rgba(167,139,250,0.25); }
    .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; } .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
    ...@@ -49,7 +49,7 @@ ...@@ -49,7 +49,7 @@
    .btn { padding: 8px 18px; border-radius: 10px; font-size: 0.82em; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .btn { padding: 8px 18px; border-radius: 10px; font-size: 0.82em; font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
    .btn-outline { background: none; border: 1px solid #30363d; color: #8b949e; } .btn-outline { background: none; border: 1px solid #30363d; color: #8b949e; }
    .btn-outline:hover { color: #e6edf3; border-color: #484f58; } .btn-outline:hover { color: #e6edf3; border-color: #484f58; }
    .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: #fff; } .btn-primary { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; }
    .btn-primary:hover { opacity: 0.9; } .btn-primary:hover { opacity: 0.9; }
    /* ─── CONTENT PANELS ─── */ /* ─── CONTENT PANELS ─── */
    ...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
    .desc-text { font-size: 0.88em; color: #8b949e; line-height: 1.8; white-space: pre-wrap; } .desc-text { font-size: 0.88em; color: #8b949e; line-height: 1.8; white-space: pre-wrap; }
    .desc-text.empty-hint { color: #484f58; font-style: italic; } .desc-text.empty-hint { color: #484f58; font-style: italic; }
    .desc-edit { width: 100%; padding: 14px; background: #161b22; border: 1px solid #21262d; border-radius: 10px; color: #e6edf3; font-size: 0.88em; line-height: 1.7; resize: vertical; min-height: 100px; outline: none; font-family: inherit; } .desc-edit { width: 100%; padding: 14px; background: #161b22; border: 1px solid #21262d; border-radius: 10px; color: #e6edf3; font-size: 0.88em; line-height: 1.7; resize: vertical; min-height: 100px; outline: none; font-family: inherit; }
    .desc-edit:focus { border-color: #667eea; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); } .desc-edit:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(102,126,234,0.1); }
    .desc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } .desc-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
    /* ─── VERSION TIMELINE ─── */ /* ─── VERSION TIMELINE ─── */
    ...@@ -73,7 +73,7 @@ ...@@ -73,7 +73,7 @@
    .v-entry { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(27,32,48,0.5); position: relative; } .v-entry { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(27,32,48,0.5); position: relative; }
    .v-entry:last-child { border-bottom: none; } .v-entry:last-child { border-bottom: none; }
    .v-timeline { display: flex; flex-direction: column; align-items: center; width: 28px; flex-shrink: 0; padding-top: 3px; } .v-timeline { display: flex; flex-direction: column; align-items: center; width: 28px; flex-shrink: 0; padding-top: 3px; }
    .v-dot { width: 10px; height: 10px; border-radius: 50%; background: #667eea; border: 2px solid #0d1117; box-shadow: 0 0 0 2px #667eea; } .v-dot { width: 10px; height: 10px; border-radius: 50%; background: #0d9488; border: 2px solid #0d1117; box-shadow: 0 0 0 2px #0d9488; }
    .v-line { flex: 1; width: 2px; background: #1b2030; margin-top: 4px; } .v-line { flex: 1; width: 2px; background: #1b2030; margin-top: 4px; }
    .v-entry:last-child .v-line { display: none; } .v-entry:last-child .v-line { display: none; }
    .v-content { flex: 1; } .v-content { flex: 1; }
    ...@@ -92,10 +92,10 @@ ...@@ -92,10 +92,10 @@
    .add-form h4 { font-size: 0.8em; font-weight: 700; color: #8b949e; margin-bottom: 10px; letter-spacing: 0.5px; } .add-form h4 { font-size: 0.8em; font-weight: 700; color: #8b949e; margin-bottom: 10px; letter-spacing: 0.5px; }
    .add-row { display: flex; gap: 8px; margin-bottom: 8px; } .add-row { display: flex; gap: 8px; margin-bottom: 8px; }
    .add-row input { flex: 1; padding: 8px 12px; background: #161b22; border: 1px solid #21262d; border-radius: 8px; color: #e6edf3; font-size: 0.8em; outline: none; } .add-row input { flex: 1; padding: 8px 12px; background: #161b22; border: 1px solid #21262d; border-radius: 8px; color: #e6edf3; font-size: 0.8em; outline: none; }
    .add-row input:focus { border-color: #667eea; } .add-row input:focus { border-color: #0d9488; }
    .add-row input::placeholder { color: #484f58; } .add-row input::placeholder { color: #484f58; }
    .add-note { width: 100%; padding: 8px 12px; background: #161b22; border: 1px solid #21262d; border-radius: 8px; color: #e6edf3; font-size: 0.8em; outline: none; resize: none; font-family: inherit; min-height: 44px; } .add-note { width: 100%; padding: 8px 12px; background: #161b22; border: 1px solid #21262d; border-radius: 8px; color: #e6edf3; font-size: 0.8em; outline: none; resize: none; font-family: inherit; min-height: 44px; }
    .add-note:focus { border-color: #667eea; } .add-note:focus { border-color: #0d9488; }
    .add-actions { display: flex; justify-content: flex-end; margin-top: 8px; } .add-actions { display: flex; justify-content: flex-end; margin-top: 8px; }
    @media (max-width: 1024px) { @media (max-width: 1024px) {
    ......
    backend/static/feedback_demo.html
    View file @ e5f37a41
    ...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
    /* Nav */ /* Nav */
    .nav-header { .nav-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    padding: 14px 30px; padding: 14px 30px;
    display: flex; display: flex;
    justify-content: space-between; justify-content: space-between;
    ...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
    .chat-header .avatar { .chat-header .avatar {
    width: 40px; width: 40px;
    height: 40px; height: 40px;
    background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #0d9488, #065f46);
    border-radius: 12px; border-radius: 12px;
    display: flex; display: flex;
    align-items: center; align-items: center;
    ...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
    } }
    .msg-bubble.user { .msg-bubble.user {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    color: white; color: white;
    border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
    } }
    ...@@ -175,7 +175,7 @@ ...@@ -175,7 +175,7 @@
    } }
    .fb-btn:hover { .fb-btn:hover {
    border-color: #667eea; border-color: #0d9488;
    color: #b0b0dd; color: #b0b0dd;
    transform: translateY(-1px); transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
    ...@@ -268,14 +268,14 @@ ...@@ -268,14 +268,14 @@
    } }
    .category-chip:hover { .category-chip:hover {
    border-color: #667eea; border-color: #0d9488;
    color: #667eea; color: #0d9488;
    } }
    .category-chip.selected { .category-chip.selected {
    background: rgba(102, 126, 234, 0.2); background: rgba(102, 126, 234, 0.2);
    border-color: #667eea; border-color: #0d9488;
    color: #667eea; color: #0d9488;
    font-weight: 600; font-weight: 600;
    } }
    ...@@ -295,7 +295,7 @@ ...@@ -295,7 +295,7 @@
    .feedback-textarea:focus { .feedback-textarea:focus {
    outline: none; outline: none;
    border-color: #667eea; border-color: #0d9488;
    } }
    .feedback-textarea::placeholder { .feedback-textarea::placeholder {
    ...@@ -332,7 +332,7 @@ ...@@ -332,7 +332,7 @@
    } }
    .fb-send-btn { .fb-send-btn {
    background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #0d9488, #065f46);
    color: white; color: white;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3); box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    } }
    ...@@ -395,7 +395,7 @@ ...@@ -395,7 +395,7 @@
    .chat-input-bar input:focus { .chat-input-bar input:focus {
    outline: none; outline: none;
    border-color: #667eea; border-color: #0d9488;
    } }
    .chat-input-bar input::placeholder { .chat-input-bar input::placeholder {
    ...@@ -404,7 +404,7 @@ ...@@ -404,7 +404,7 @@
    .send-btn { .send-btn {
    padding: 12px 24px; padding: 12px 24px;
    background: linear-gradient(135deg, #667eea, #764ba2); background: linear-gradient(135deg, #0d9488, #065f46);
    border: none; border: none;
    border-radius: 14px; border-radius: 14px;
    color: white; color: white;
    ...@@ -452,7 +452,7 @@ ...@@ -452,7 +452,7 @@
    } }
    .product-mini:hover { .product-mini:hover {
    border-color: #667eea; border-color: #0d9488;
    transform: translateY(-2px); transform: translateY(-2px);
    } }
    ......
    backend/static/guide.html
    View file @ e5f37a41
    ...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
    /* ═══ SIDEBAR ═══ */ /* ═══ SIDEBAR ═══ */
    .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; } .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
    .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; } .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
    .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; } .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
    .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; } .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
    .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; } .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
    .nav-group { padding: 16px 12px 8px; } .nav-group { padding: 16px 12px 8px; }
    ...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
    .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
    .nav-item:hover { background: #161b22; color: #e6edf3; } .nav-item:hover { background: #161b22; color: #e6edf3; }
    .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; } .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
    .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
    .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; } .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
    .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
    .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); } .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
    .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); } .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
    .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); } .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
    .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; } .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
    .version-info { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #161b22; border-radius: 8px; border: 1px solid #1b2030; } .version-info { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #161b22; border-radius: 8px; border: 1px solid #1b2030; }
    ......
    backend/static/history.html
    View file @ e5f37a41
    ...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
    } }
    .nav-header { .nav-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    padding: 15px 30px; padding: 15px 30px;
    display: flex; display: flex;
    justify-content: space-between; justify-content: space-between;
    ...@@ -270,7 +270,7 @@ ...@@ -270,7 +270,7 @@
    <body> <body>
    <div class="nav-header"> <div class="nav-header">
    <h1>🤖 Canifa AI System</h1> <h1>🤖 Canifa AI <span style="background:#fbbf24;color:#1e1e1e;padding:2px 10px;border-radius:6px;font-size:0.6em;vertical-align:middle;margin-left:8px;font-weight:700;letter-spacing:1px;">DEV</span></h1>
    <div class="nav-links"> <div class="nav-links">
    <a href="/static/dashboard.html">📊 Dashboard</a> <a href="/static/dashboard.html">📊 Dashboard</a>
    <a href="/static/index.html">💬 Chatbot</a> <a href="/static/index.html">💬 Chatbot</a>
    ......
    backend/static/index.html
    View file @ e5f37a41
    ...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
    <head> <head>
    <meta charset="UTF-8"> <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canifa Chatbot Test</title> <title>Canifa DEV Experimental</title>
    <style> <style>
    body { body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    ...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
    /* Navigation Header */ /* Navigation Header */
    .nav-header { .nav-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    padding: 15px 30px; padding: 15px 30px;
    display: flex; display: flex;
    justify-content: space-between; justify-content: space-between;
    ...@@ -289,7 +289,7 @@ ...@@ -289,7 +289,7 @@
    .product-card:hover { .product-card:hover {
    transform: translateY(-5px); transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    border-color: #667eea; border-color: #0d9488;
    } }
    .product-card img { .product-card img {
    ...@@ -308,7 +308,7 @@ ...@@ -308,7 +308,7 @@
    .product-sku { .product-sku {
    font-size: 0.75em; font-size: 0.75em;
    color: #667eea; color: #0d9488;
    font-weight: bold; font-weight: bold;
    margin-bottom: 5px; margin-bottom: 5px;
    } }
    ...@@ -349,7 +349,7 @@ ...@@ -349,7 +349,7 @@
    .product-link { .product-link {
    display: block; display: block;
    text-align: center; text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    color: white; color: white;
    text-decoration: none; text-decoration: none;
    padding: 8px 12px; padding: 8px 12px;
    ...@@ -405,7 +405,7 @@ ...@@ -405,7 +405,7 @@
    } }
    .message-view-toggle button.active { .message-view-toggle button.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    color: white; color: white;
    } }
    ...@@ -544,7 +544,7 @@ ...@@ -544,7 +544,7 @@
    } }
    .prompt-tab-btn.active { .prompt-tab-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    color: #fff; color: #fff;
    } }
    ...@@ -583,7 +583,7 @@ ...@@ -583,7 +583,7 @@
    .prompt-textarea:focus { .prompt-textarea:focus {
    outline: none; outline: none;
    border-color: #667eea; border-color: #0d9488;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(102, 126, 234, 0.2); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(102, 126, 234, 0.2);
    } }
    ...@@ -700,8 +700,8 @@ ...@@ -700,8 +700,8 @@
    } }
    .feedback-bar .fb-btn:hover { .feedback-bar .fb-btn:hover {
    border-color: #667eea; border-color: #0d9488;
    color: #667eea; color: #0d9488;
    background: rgba(102, 126, 234, 0.1); background: rgba(102, 126, 234, 0.1);
    } }
    ...@@ -763,14 +763,14 @@ ...@@ -763,14 +763,14 @@
    } }
    .complaint-form .cat-chip:hover { .complaint-form .cat-chip:hover {
    border-color: #667eea; border-color: #0d9488;
    color: #667eea; color: #0d9488;
    } }
    .complaint-form .cat-chip.selected { .complaint-form .cat-chip.selected {
    border-color: #667eea; border-color: #0d9488;
    background: rgba(102, 126, 234, 0.2); background: rgba(102, 126, 234, 0.2);
    color: #667eea; color: #0d9488;
    } }
    .complaint-form textarea { .complaint-form textarea {
    ...@@ -808,7 +808,7 @@ ...@@ -808,7 +808,7 @@
    } }
    .complaint-form .btn-submit { .complaint-form .btn-submit {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    color: white; color: white;
    } }
    ...@@ -870,7 +870,7 @@ ...@@ -870,7 +870,7 @@
    margin: 8px 0; padding-left: 22px; margin: 8px 0; padding-left: 22px;
    } }
    .filtered-content .md-content li { margin: 4px 0; } .filtered-content .md-content li { margin: 4px 0; }
    .filtered-content .md-content li::marker { color: #667eea; } .filtered-content .md-content li::marker { color: #0d9488; }
    .filtered-content .md-content .md-heading { .filtered-content .md-content .md-heading {
    font-weight: 700; color: #fff; margin: 12px 0 6px; font-weight: 700; color: #fff; margin: 12px 0 6px;
    } }
    ...@@ -883,7 +883,7 @@ ...@@ -883,7 +883,7 @@
    <body> <body>
    <!-- Navigation Header --> <!-- Navigation Header -->
    <div class="nav-header"> <div class="nav-header">
    <h1>🤖 Canifa AI System</h1> <h1>🧪 Canifa AI <span style="background:#fbbf24;color:#1e1e1e;padding:2px 10px;border-radius:6px;font-size:0.6em;vertical-align:middle;margin-left:8px;font-weight:700;letter-spacing:1px;">DEV EXPERIMENTAL</span></h1>
    <div class="nav-links"> <div class="nav-links">
    <a href="/static/dashboard.html">📊 Dashboard</a> <a href="/static/dashboard.html">📊 Dashboard</a>
    <a href="/static/index.html" class="active">💬 Chatbot</a> <a href="/static/index.html" class="active">💬 Chatbot</a>
    ...@@ -899,7 +899,7 @@ ...@@ -899,7 +899,7 @@
    <div class="container"> <div class="container">
    <div class="chat-internal-wrapper"> <div class="chat-internal-wrapper">
    <div class="header"> <div class="header">
    <h2>🤖 Canifa AI Chat</h2> <h2>🧪 Dev Experimental Chat</h2>
    <div class="config-area" <div class="config-area"
    style="flex-wrap: wrap; display: flex; align-items: center; gap: 10px;"> style="flex-wrap: wrap; display: flex; align-items: center; gap: 10px;">
    <div style="display: flex; gap: 5px; align-items: center;"> <div style="display: flex; gap: 5px; align-items: center;">
    ...@@ -955,7 +955,7 @@ ...@@ -955,7 +955,7 @@
    <button onclick="document.getElementById('imageFileInput').click()" id="imgBtn" <button onclick="document.getElementById('imageFileInput').click()" id="imgBtn"
    title="Upload Image (Experimental 📸)" title="Upload Image (Experimental 📸)"
    style="background: #4a4a4a; color: #ccc; padding: 0 14px; border: 1px dashed #666; border-radius: 8px; font-size: 1.2em; cursor: pointer; transition: all 0.2s;" style="background: #4a4a4a; color: #ccc; padding: 0 14px; border: 1px dashed #666; border-radius: 8px; font-size: 1.2em; cursor: pointer; transition: all 0.2s;"
    onmouseover="this.style.background='#5a5a5a'; this.style.borderColor='#667eea'; this.style.color='#667eea'" onmouseover="this.style.background='#5a5a5a'; this.style.borderColor='#0d9488'; this.style.color='#0d9488'"
    onmouseout="this.style.background='#4a4a4a'; this.style.borderColor='#666'; this.style.color='#ccc'">📷</button> onmouseout="this.style.background='#4a4a4a'; this.style.borderColor='#666'; this.style.color='#ccc'">📷</button>
    <input type="text" id="userInput" placeholder="Type your message..." <input type="text" id="userInput" placeholder="Type your message..."
    onkeypress="handleKeyPress(event)" autocomplete="off"> onkeypress="handleKeyPress(event)" autocomplete="off">
    ...@@ -1923,7 +1923,7 @@ ...@@ -1923,7 +1923,7 @@
    limitDiv.style.padding = '8px'; limitDiv.style.padding = '8px';
    limitDiv.style.background = 'rgba(255, 255, 255, 0.05)'; limitDiv.style.background = 'rgba(255, 255, 255, 0.05)';
    limitDiv.style.borderRadius = '6px'; limitDiv.style.borderRadius = '6px';
    limitDiv.style.borderLeft = '3px solid #667eea'; limitDiv.style.borderLeft = '3px solid #0d9488';
    const limitText = `📊 Message Limit: ${data.limit_info.used}/${data.limit_info.limit} (Còn ${data.limit_info.remaining} tin nhắn)`; const limitText = `📊 Message Limit: ${data.limit_info.used}/${data.limit_info.limit} (Còn ${data.limit_info.remaining} tin nhắn)`;
    limitDiv.innerText = limitText; limitDiv.innerText = limitText;
    ......
    backend/static/notes.html
    View file @ e5f37a41
    ...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
    /* ═══ SIDEBAR ═══ */ /* ═══ SIDEBAR ═══ */
    .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; } .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
    .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; } .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
    .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; } .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
    .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; } .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
    .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; } .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
    .nav-group { padding: 16px 12px 8px; } .nav-group { padding: 16px 12px 8px; }
    ...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
    .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
    .nav-item:hover { background: #161b22; color: #e6edf3; } .nav-item:hover { background: #161b22; color: #e6edf3; }
    .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; } .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
    .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
    .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; } .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
    .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
    .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); } .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
    .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); } .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
    .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); } .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
    .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); } .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
    .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; } .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
    ...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
    /* ═══ BUTTONS ═══ */ /* ═══ BUTTONS ═══ */
    .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; } .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; }
    .btn:hover { background: #1b2030; border-color: #30363d; } .btn:hover { background: #1b2030; border-color: #30363d; }
    .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: #fff; } .btn-primary { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; }
    .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
    /* ═══ FILTERS ═══ */ /* ═══ FILTERS ═══ */
    ...@@ -80,7 +80,7 @@ ...@@ -80,7 +80,7 @@
    .form-group { margin-bottom: 14px; } .form-group { margin-bottom: 14px; }
    .form-label { font-size: 0.78em; font-weight: 600; color: #8b949e; margin-bottom: 6px; display: block; } .form-label { font-size: 0.78em; font-weight: 600; color: #8b949e; margin-bottom: 6px; display: block; }
    .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; } .form-input, .form-select, .form-textarea { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; }
    .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #667eea; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: #0d9488; }
    .form-textarea { min-height: 120px; resize: vertical; } .form-textarea { min-height: 120px; resize: vertical; }
    .form-select { cursor: pointer; } .form-select { cursor: pointer; }
    .form-select option { background: #161b22; } .form-select option { background: #161b22; }
    ......
    backend/static/resources.html
    View file @ e5f37a41
    ...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
    /* ═══ SIDEBAR ═══ */ /* ═══ SIDEBAR ═══ */
    .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; } .sidebar { width: 260px; min-height: 100vh; background: #0d1117; border-right: 1px solid #1b2030; display: flex; flex-direction: column; position: fixed; top: 0; left: 0; z-index: 100; }
    .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; } .sidebar-brand { padding: 24px 20px; border-bottom: 1px solid #1b2030; display: flex; align-items: center; gap: 12px; }
    .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #667eea, #764ba2); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; } .brand-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #0d9488, #065f46); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; flex-shrink: 0; }
    .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; } .brand-text h2 { font-size: 1em; font-weight: 700; color: #e6edf3; }
    .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; } .brand-text span { font-size: 0.7em; color: #484f58; font-weight: 500; }
    .nav-group { padding: 16px 12px 8px; } .nav-group { padding: 16px 12px 8px; }
    ...@@ -20,11 +20,11 @@ ...@@ -20,11 +20,11 @@
    .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; color: #8b949e; text-decoration: none; font-size: 0.88em; font-weight: 500; transition: all 0.2s; margin-bottom: 2px; cursor: pointer; position: relative; }
    .nav-item:hover { background: #161b22; color: #e6edf3; } .nav-item:hover { background: #161b22; color: #e6edf3; }
    .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; } .nav-item.active { background: linear-gradient(135deg, rgba(102,126,234,0.15), rgba(118,75,162,0.1)); color: #a78bfa; font-weight: 600; }
    .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #667eea, #764ba2); border-radius: 0 3px 3px 0; } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; background: linear-gradient(180deg, #0d9488, #065f46); border-radius: 0 3px 3px 0; }
    .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; } .nav-icon { font-size: 1.1em; width: 22px; text-align: center; flex-shrink: 0; }
    .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; } .nav-badge { margin-left: auto; font-size: 0.7em; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
    .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); } .badge-live { background: rgba(76,175,80,0.15); color: #4caf50; border: 1px solid rgba(76,175,80,0.25); }
    .badge-new { background: rgba(102,126,234,0.15); color: #667eea; border: 1px solid rgba(102,126,234,0.25); } .badge-new { background: rgba(102,126,234,0.15); color: #0d9488; border: 1px solid rgba(102,126,234,0.25); }
    .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); } .badge-beta { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.25); }
    .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); } .badge-count { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.2); }
    .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; } .sidebar-footer { margin-top: auto; padding: 16px; border-top: 1px solid #1b2030; }
    ...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
    /* ═══ BUTTONS ═══ */ /* ═══ BUTTONS ═══ */
    .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; } .btn { padding: 8px 16px; border-radius: 8px; font-size: 0.82em; font-weight: 600; border: 1px solid #1b2030; background: #161b22; color: #c9d1d9; cursor: pointer; transition: all 0.2s; }
    .btn:hover { background: #1b2030; border-color: #30363d; } .btn:hover { background: #1b2030; border-color: #30363d; }
    .btn-primary { background: linear-gradient(135deg, #667eea, #764ba2); border: none; color: #fff; } .btn-primary { background: linear-gradient(135deg, #0d9488, #065f46); border: none; color: #fff; }
    .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); } .btn-primary:hover { opacity: 0.9; transform: translateY(-1px); }
    /* ═══ FILTERS ═══ */ /* ═══ FILTERS ═══ */
    ...@@ -86,7 +86,7 @@ ...@@ -86,7 +86,7 @@
    .form-group { margin-bottom: 14px; } .form-group { margin-bottom: 14px; }
    .form-label { font-size: 0.78em; font-weight: 600; color: #8b949e; margin-bottom: 6px; display: block; } .form-label { font-size: 0.78em; font-weight: 600; color: #8b949e; margin-bottom: 6px; display: block; }
    .form-input, .form-select { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; } .form-input, .form-select { width: 100%; padding: 10px 14px; border-radius: 8px; border: 1px solid #1b2030; background: #0d1117; color: #e6edf3; font-size: 0.88em; font-family: inherit; transition: border-color 0.2s; }
    .form-input:focus, .form-select:focus { outline: none; border-color: #667eea; } .form-input:focus, .form-select:focus { outline: none; border-color: #0d9488; }
    .form-select { cursor: pointer; } .form-select { cursor: pointer; }
    .form-select option { background: #161b22; } .form-select option { background: #161b22; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    ......
    backend/static/save.html
    View file @ e5f37a41
    ...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
    /* Navigation Header */ /* Navigation Header */
    .nav-header { .nav-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    padding: 15px 30px; padding: 15px 30px;
    display: flex; display: flex;
    justify-content: space-between; justify-content: space-between;
    ...@@ -289,7 +289,7 @@ ...@@ -289,7 +289,7 @@
    .product-card:hover { .product-card:hover {
    transform: translateY(-5px); transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3); box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
    border-color: #667eea; border-color: #0d9488;
    } }
    .product-card img { .product-card img {
    ...@@ -308,7 +308,7 @@ ...@@ -308,7 +308,7 @@
    .product-sku { .product-sku {
    font-size: 0.75em; font-size: 0.75em;
    color: #667eea; color: #0d9488;
    font-weight: bold; font-weight: bold;
    margin-bottom: 5px; margin-bottom: 5px;
    } }
    ...@@ -349,7 +349,7 @@ ...@@ -349,7 +349,7 @@
    .product-link { .product-link {
    display: block; display: block;
    text-align: center; text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    color: white; color: white;
    text-decoration: none; text-decoration: none;
    padding: 8px 12px; padding: 8px 12px;
    ...@@ -395,7 +395,7 @@ ...@@ -395,7 +395,7 @@
    } }
    .message-view-toggle button.active { .message-view-toggle button.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #0d9488 0%, #065f46 100%);
    color: white; color: white;
    } }
    ...@@ -543,7 +543,7 @@ ...@@ -543,7 +543,7 @@
    .prompt-textarea:focus { .prompt-textarea:focus {
    outline: none; outline: none;
    border-color: #667eea; border-color: #0d9488;
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(102, 126, 234, 0.2); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(102, 126, 234, 0.2);
    } }
    ...@@ -615,7 +615,7 @@ ...@@ -615,7 +615,7 @@
    <body> <body>
    <!-- Navigation Header --> <!-- Navigation Header -->
    <div class="nav-header"> <div class="nav-header">
    <h1>🤖 Canifa AI System</h1> <h1>🤖 Canifa AI <span style="background:#fbbf24;color:#1e1e1e;padding:2px 10px;border-radius:6px;font-size:0.6em;vertical-align:middle;margin-left:8px;font-weight:700;letter-spacing:1px;">DEV</span></h1>
    <div class="nav-links"> <div class="nav-links">
    <a href="/static/dashboard.html">📊 Dashboard</a> <a href="/static/dashboard.html">📊 Dashboard</a>
    <a href="/static/index.html" class="active">💬 Chatbot</a> <a href="/static/index.html" class="active">💬 Chatbot</a>
    ......
    Markdown is supported
    0% or
    You are about to add 0 people to the discussion. Proceed with caution.
    Finish editing this message first!
    Please register or to comment