Redesign upload UI + update Gitea org references
web/static/index.html: Complete redesign with clean modern layout: - RTL Hebrew throughout - Two-column layout: upload zone + pending files - Cleaner drag & drop with visual feedback - Improved classification form with radio buttons - Better progress tracking display - Status bar with system metrics CLAUDE.md: Updated Gitea URL to new org ezer-mishpati/legal-ai Closes ezer-mishpati/legal-ai#1 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -56,7 +56,7 @@
|
|||||||
| PostgreSQL + pgvector | בסיס נתונים ראשי | `legal-ai-postgres` |
|
| PostgreSQL + pgvector | בסיס נתונים ראשי | `legal-ai-postgres` |
|
||||||
| Redis | תור משימות | `legal-ai-redis` |
|
| Redis | תור משימות | `legal-ai-redis` |
|
||||||
| n8n | אוטומציית workflows | להגדרה |
|
| n8n | אוטומציית workflows | להגדרה |
|
||||||
| Gitea | מאגר קוד | `gitea.nautilus.marcusgroup.org` |
|
| Gitea | מאגר קוד | `gitea.nautilus.marcusgroup.org/ezer-mishpati` |
|
||||||
| ezer-mishpati-web | ממשק העלאת מסמכים | `upload.nautilus.marcusgroup.org` |
|
| ezer-mishpati-web | ממשק העלאת מסמכים | `upload.nautilus.marcusgroup.org` |
|
||||||
| Infisical | ניהול סודות | `secret.dev.marcus-law.co.il` |
|
| Infisical | ניהול סודות | `secret.dev.marcus-law.co.il` |
|
||||||
|
|
||||||
|
|||||||
@@ -3,84 +3,146 @@
|
|||||||
<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>העלאת מסמכים משפטיים</title>
|
<title>עוזר משפטי — העלאת מסמכים</title>
|
||||||
<style>
|
<style>
|
||||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
body {
|
body {
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||||
background: #f5f6fa;
|
background: #f5f5f5;
|
||||||
color: #2d3436;
|
color: #1a1a2e;
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
.container { max-width: 900px; margin: 0 auto; padding: 20px; }
|
|
||||||
|
/* Header */
|
||||||
header {
|
header {
|
||||||
background: #2d3436;
|
background: #1a1a2e;
|
||||||
color: white;
|
color: #ffffff;
|
||||||
padding: 20px;
|
padding: 18px 32px;
|
||||||
text-align: center;
|
display: flex;
|
||||||
margin-bottom: 24px;
|
align-items: center;
|
||||||
border-radius: 8px;
|
gap: 12px;
|
||||||
|
}
|
||||||
|
header h1 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
header .sep {
|
||||||
|
width: 2px;
|
||||||
|
height: 20px;
|
||||||
|
background: rgba(255,255,255,0.2);
|
||||||
|
border-radius: 1px;
|
||||||
|
}
|
||||||
|
header .subtitle {
|
||||||
|
font-size: 0.85em;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Main Layout */
|
||||||
|
.main {
|
||||||
|
flex: 1;
|
||||||
|
max-width: 1200px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 28px 24px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.card {
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 1px 4px rgba(0,0,0,0.06), 0 0 1px rgba(0,0,0,0.08);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
padding: 14px 20px;
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1a1a2e;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
.card-header .icon {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
.card-body {
|
||||||
|
padding: 20px;
|
||||||
}
|
}
|
||||||
header h1 { font-size: 1.5em; font-weight: 600; }
|
|
||||||
header p { opacity: 0.7; margin-top: 4px; font-size: 0.9em; }
|
|
||||||
|
|
||||||
/* Upload Zone */
|
/* Upload Zone */
|
||||||
.upload-zone {
|
.upload-zone {
|
||||||
border: 2px dashed #b2bec3;
|
border: 2px dashed #ccc;
|
||||||
border-radius: 12px;
|
border-radius: 10px;
|
||||||
padding: 40px;
|
padding: 60px 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: white;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s;
|
transition: border-color 0.2s, background 0.2s;
|
||||||
margin-bottom: 24px;
|
background: #fafafa;
|
||||||
}
|
}
|
||||||
.upload-zone:hover, .upload-zone.dragover {
|
.upload-zone:hover,
|
||||||
border-color: #0984e3;
|
.upload-zone.dragover {
|
||||||
background: #f0f7ff;
|
border-color: #e94560;
|
||||||
|
background: #fff5f7;
|
||||||
|
}
|
||||||
|
.upload-zone .upload-icon {
|
||||||
|
font-size: 3em;
|
||||||
|
color: #ccc;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
.upload-zone:hover .upload-icon,
|
||||||
|
.upload-zone.dragover .upload-icon {
|
||||||
|
color: #e94560;
|
||||||
|
}
|
||||||
|
.upload-zone h2 {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #555;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
}
|
||||||
|
.upload-zone p {
|
||||||
|
font-size: 0.8em;
|
||||||
|
color: #aaa;
|
||||||
}
|
}
|
||||||
.upload-zone h2 { color: #636e72; font-size: 1.1em; margin-bottom: 8px; }
|
|
||||||
.upload-zone p { color: #b2bec3; font-size: 0.85em; }
|
|
||||||
.upload-zone input[type="file"] { display: none; }
|
.upload-zone input[type="file"] { display: none; }
|
||||||
|
|
||||||
.upload-progress {
|
.upload-progress {
|
||||||
margin-top: 12px;
|
margin-top: 16px;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.upload-progress .bar {
|
.upload-progress .bar {
|
||||||
height: 4px;
|
height: 4px;
|
||||||
background: #dfe6e9;
|
background: #eee;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.upload-progress .bar-fill {
|
.upload-progress .bar-fill {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #0984e3;
|
background: #e94560;
|
||||||
width: 0;
|
width: 0;
|
||||||
transition: width 0.3s;
|
transition: width 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Cards */
|
|
||||||
.card {
|
|
||||||
background: white;
|
|
||||||
border-radius: 8px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
|
|
||||||
padding: 20px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
.card h3 {
|
|
||||||
font-size: 1em;
|
|
||||||
margin-bottom: 12px;
|
|
||||||
color: #2d3436;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pending Files */
|
/* Pending Files */
|
||||||
.pending-file {
|
.pending-file {
|
||||||
border: 1px solid #dfe6e9;
|
border: 1px solid #eee;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
.pending-file:hover {
|
||||||
|
border-color: #ddd;
|
||||||
}
|
}
|
||||||
.pending-file .file-info {
|
.pending-file .file-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -90,12 +152,13 @@ header p { opacity: 0.7; margin-top: 4px; font-size: 0.9em; }
|
|||||||
}
|
}
|
||||||
.pending-file .file-name {
|
.pending-file .file-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 0.95em;
|
font-size: 0.9em;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
|
color: #1a1a2e;
|
||||||
}
|
}
|
||||||
.pending-file .file-size {
|
.pending-file .file-size {
|
||||||
color: #636e72;
|
color: #999;
|
||||||
font-size: 0.8em;
|
font-size: 0.78em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-right: 12px;
|
margin-right: 12px;
|
||||||
}
|
}
|
||||||
@@ -105,6 +168,43 @@ header p { opacity: 0.7; margin-top: 4px; font-size: 0.9em; }
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Empty State */
|
||||||
|
.empty {
|
||||||
|
text-align: center;
|
||||||
|
color: #bbb;
|
||||||
|
padding: 40px 20px;
|
||||||
|
font-size: 0.88em;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Radio Group */
|
||||||
|
.radio-group {
|
||||||
|
display: flex;
|
||||||
|
gap: 4px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.radio-group label {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 0.82em;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
background: #fff;
|
||||||
|
transition: all 0.15s;
|
||||||
|
}
|
||||||
|
.radio-group label:hover {
|
||||||
|
border-color: #e94560;
|
||||||
|
}
|
||||||
|
.radio-group input[type="radio"] {
|
||||||
|
accent-color: #e94560;
|
||||||
|
}
|
||||||
|
.conditional { display: none; }
|
||||||
|
.conditional.active { display: block; }
|
||||||
|
|
||||||
/* Form Elements */
|
/* Form Elements */
|
||||||
.form-row {
|
.form-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -113,133 +213,201 @@ header p { opacity: 0.7; margin-top: 4px; font-size: 0.9em; }
|
|||||||
align-items: end;
|
align-items: end;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
.form-group { flex: 1; min-width: 150px; }
|
.form-group {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 140px;
|
||||||
|
}
|
||||||
.form-group label {
|
.form-group label {
|
||||||
display: block;
|
display: block;
|
||||||
font-size: 0.8em;
|
font-size: 0.78em;
|
||||||
color: #636e72;
|
color: #888;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
.form-group select, .form-group input {
|
.form-group select,
|
||||||
|
.form-group input[type="text"],
|
||||||
|
.form-group input[type="date"] {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
border: 1px solid #dfe6e9;
|
border: 1px solid #ddd;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
font-size: 0.9em;
|
font-size: 0.88em;
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
direction: rtl;
|
direction: rtl;
|
||||||
|
background: #fff;
|
||||||
|
transition: border-color 0.15s;
|
||||||
}
|
}
|
||||||
.radio-group {
|
.form-group select:focus,
|
||||||
display: flex;
|
.form-group input:focus {
|
||||||
gap: 16px;
|
outline: none;
|
||||||
margin-bottom: 10px;
|
border-color: #e94560;
|
||||||
}
|
}
|
||||||
.radio-group label {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.conditional { display: none; }
|
|
||||||
.conditional.active { display: block; }
|
|
||||||
|
|
||||||
/* Buttons */
|
/* Subject Grid */
|
||||||
.btn {
|
|
||||||
padding: 8px 20px;
|
|
||||||
border: none;
|
|
||||||
border-radius: 6px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
font-family: inherit;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.15s;
|
|
||||||
}
|
|
||||||
.btn-primary { background: #0984e3; color: white; }
|
|
||||||
.btn-primary:hover { background: #0770c2; }
|
|
||||||
.btn-danger { background: #d63031; color: white; }
|
|
||||||
.btn-danger:hover { background: #b71c1c; }
|
|
||||||
.btn-sm { padding: 5px 12px; font-size: 0.8em; }
|
|
||||||
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
||||||
|
|
||||||
/* Processing Tasks */
|
|
||||||
.task-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
padding: 12px;
|
|
||||||
border: 1px solid #dfe6e9;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
.task-item .spinner {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
border: 2px solid #dfe6e9;
|
|
||||||
border-top-color: #0984e3;
|
|
||||||
border-radius: 50%;
|
|
||||||
animation: spin 0.8s linear infinite;
|
|
||||||
}
|
|
||||||
.task-item.done .spinner {
|
|
||||||
border-color: #00b894;
|
|
||||||
border-top-color: #00b894;
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
.task-item.failed .spinner {
|
|
||||||
border-color: #d63031;
|
|
||||||
border-top-color: #d63031;
|
|
||||||
animation: none;
|
|
||||||
}
|
|
||||||
@keyframes spin { to { transform: rotate(360deg); } }
|
|
||||||
.task-info { flex: 1; }
|
|
||||||
.task-info .task-name { font-size: 0.9em; font-weight: 500; }
|
|
||||||
.task-info .task-status { font-size: 0.8em; color: #636e72; }
|
|
||||||
|
|
||||||
/* Subject checkboxes */
|
|
||||||
.subject-grid {
|
.subject-grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, 1fr);
|
grid-template-columns: repeat(3, 1fr);
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
}
|
}
|
||||||
.subject-grid label {
|
.subject-grid label {
|
||||||
font-size: 0.8em;
|
font-size: 0.78em;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
.subject-grid input[type="checkbox"] {
|
||||||
|
accent-color: #e94560;
|
||||||
|
}
|
||||||
|
|
||||||
/* Empty state */
|
/* Buttons */
|
||||||
.empty { text-align: center; color: #b2bec3; padding: 24px; font-size: 0.9em; }
|
.btn {
|
||||||
|
padding: 8px 20px;
|
||||||
|
border: none;
|
||||||
|
border-radius: 6px;
|
||||||
|
font-size: 0.88em;
|
||||||
|
font-family: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.15s;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
background: #e94560;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: #d6304a;
|
||||||
|
}
|
||||||
|
.btn-danger {
|
||||||
|
background: transparent;
|
||||||
|
color: #e94560;
|
||||||
|
border: 1px solid #e94560;
|
||||||
|
font-size: 0.78em;
|
||||||
|
padding: 4px 10px;
|
||||||
|
}
|
||||||
|
.btn-danger:hover {
|
||||||
|
background: #fff0f3;
|
||||||
|
}
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.4;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Task Items */
|
||||||
|
.task-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
background: #fafafa;
|
||||||
|
}
|
||||||
|
.task-item .spinner {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border: 2.5px solid #eee;
|
||||||
|
border-top-color: #e94560;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.task-item.done .spinner {
|
||||||
|
border-color: #27ae60;
|
||||||
|
border-top-color: #27ae60;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
.task-item.failed .spinner {
|
||||||
|
border-color: #e94560;
|
||||||
|
border-top-color: #e94560;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
@keyframes spin { to { transform: rotate(360deg); } }
|
||||||
|
.task-info { flex: 1; min-width: 0; }
|
||||||
|
.task-info .task-name {
|
||||||
|
font-size: 0.88em;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #1a1a2e;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.task-info .task-status {
|
||||||
|
font-size: 0.78em;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status Bar */
|
||||||
|
.status-bar {
|
||||||
|
background: #1a1a2e;
|
||||||
|
color: rgba(255,255,255,0.5);
|
||||||
|
font-size: 0.75em;
|
||||||
|
padding: 8px 32px;
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.status-bar .stat {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
}
|
||||||
|
.status-bar .stat-value {
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
/* Toast */
|
/* Toast */
|
||||||
.toast {
|
.toast {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 20px;
|
bottom: 60px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%) translateY(10px);
|
||||||
background: #2d3436;
|
background: #1a1a2e;
|
||||||
color: white;
|
color: white;
|
||||||
padding: 12px 24px;
|
padding: 10px 24px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 0.9em;
|
font-size: 0.85em;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 0.3s;
|
transition: opacity 0.3s, transform 0.3s;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.toast.show {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateX(-50%) translateY(0);
|
||||||
|
}
|
||||||
|
.toast.error { background: #e94560; }
|
||||||
|
.toast.success { background: #27ae60; }
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 800px) {
|
||||||
|
.main {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
header { padding: 14px 16px; }
|
||||||
|
.status-bar { padding: 8px 16px; flex-wrap: wrap; gap: 12px; }
|
||||||
}
|
}
|
||||||
.toast.show { opacity: 1; }
|
|
||||||
.toast.error { background: #d63031; }
|
|
||||||
.toast.success { background: #00b894; }
|
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
|
||||||
<header>
|
<header>
|
||||||
<h1>העלאת מסמכים משפטיים</h1>
|
<h1>עוזר משפטי</h1>
|
||||||
<p>העלאה, סיווג ועיבוד מסמכים — עזר משפטי | דין לאומי</p>
|
<div class="sep"></div>
|
||||||
|
<span class="subtitle">העלאת מסמכים</span>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Upload Zone -->
|
<div class="main">
|
||||||
|
<!-- Right Column (visually) — Upload -->
|
||||||
|
<div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-body">
|
||||||
<div class="upload-zone" id="dropZone">
|
<div class="upload-zone" id="dropZone">
|
||||||
|
<div class="upload-icon">📄</div>
|
||||||
<h2>גרור קבצים לכאן או לחץ לבחירה</h2>
|
<h2>גרור קבצים לכאן או לחץ לבחירה</h2>
|
||||||
<p>PDF, DOCX, RTF, TXT — עד 50MB</p>
|
<p>PDF, DOCX, RTF, TXT — עד 50MB</p>
|
||||||
<input type="file" id="fileInput" multiple accept=".pdf,.docx,.rtf,.txt">
|
<input type="file" id="fileInput" multiple accept=".pdf,.docx,.rtf,.txt">
|
||||||
@@ -247,20 +415,43 @@ header p { opacity: 0.7; margin-top: 4px; font-size: 0.9em; }
|
|||||||
<div class="bar"><div class="bar-fill" id="uploadBar"></div></div>
|
<div class="bar"><div class="bar-fill" id="uploadBar"></div></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<!-- Pending Files -->
|
|
||||||
<div class="card" id="pendingCard" style="display:none">
|
|
||||||
<h3>קבצים ממתינים לסיווג</h3>
|
|
||||||
<div id="pendingList"></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Processing Tasks -->
|
<!-- Processing Tasks -->
|
||||||
<div class="card" id="tasksCard" style="display:none">
|
<div class="card" id="tasksCard" style="display:none; margin-top: 16px;">
|
||||||
<h3>עיבוד</h3>
|
<div class="card-header">עיבוד</div>
|
||||||
<div id="tasksList"></div>
|
<div class="card-body" id="tasksList"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Left Column (visually) — Pending Files -->
|
||||||
|
<div>
|
||||||
|
<div class="card" id="pendingCard" style="display:none">
|
||||||
|
<div class="card-header">קבצים ממתינים לסיווג</div>
|
||||||
|
<div class="card-body" id="pendingList">
|
||||||
|
<div class="empty">אין קבצים ממתינים</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" id="emptyCard">
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="empty">
|
||||||
|
העלה מסמכים באמצעות אזור הגרירה<br>
|
||||||
|
הקבצים יופיעו כאן לסיווג ועיבוד
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Status Bar -->
|
||||||
|
<div class="status-bar" id="statusBar">
|
||||||
|
<div class="stat">תיקים: <span class="stat-value" id="statCases">—</span></div>
|
||||||
|
<div class="stat">מסמכים: <span class="stat-value" id="statDocs">—</span></div>
|
||||||
|
<div class="stat">קטעים: <span class="stat-value" id="statChunks">—</span></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="toast" id="toast"></div>
|
<div class="toast" id="toast"></div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
@@ -343,14 +534,17 @@ async function loadPending() {
|
|||||||
const res = await fetch(API + '/uploads');
|
const res = await fetch(API + '/uploads');
|
||||||
const files = await res.json();
|
const files = await res.json();
|
||||||
const card = document.getElementById('pendingCard');
|
const card = document.getElementById('pendingCard');
|
||||||
|
const emptyCard = document.getElementById('emptyCard');
|
||||||
const list = document.getElementById('pendingList');
|
const list = document.getElementById('pendingList');
|
||||||
|
|
||||||
if (!files.length) {
|
if (!files.length) {
|
||||||
card.style.display = 'none';
|
card.style.display = 'none';
|
||||||
|
emptyCard.style.display = 'block';
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
card.style.display = 'block';
|
card.style.display = 'block';
|
||||||
|
emptyCard.style.display = 'none';
|
||||||
await loadCases();
|
await loadCases();
|
||||||
|
|
||||||
list.innerHTML = files.map(f => `
|
list.innerHTML = files.map(f => `
|
||||||
@@ -359,13 +553,13 @@ async function loadPending() {
|
|||||||
<span class="file-name">${esc(f.filename.replace(/^\d+_/, ''))}</span>
|
<span class="file-name">${esc(f.filename.replace(/^\d+_/, ''))}</span>
|
||||||
<div class="file-actions">
|
<div class="file-actions">
|
||||||
<span class="file-size">${formatSize(f.size)}</span>
|
<span class="file-size">${formatSize(f.size)}</span>
|
||||||
<button class="btn btn-danger btn-sm" onclick="deleteFile('${esc(f.filename)}')">מחק</button>
|
<button class="btn btn-danger" onclick="deleteFile('${esc(f.filename)}')">מחק</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="radio-group">
|
<div class="radio-group">
|
||||||
<label><input type="radio" name="cat_${esc(f.filename)}" value="case" onchange="showFields(this)"> עזר משפטי — מסמך תיק</label>
|
<label><input type="radio" name="cat_${esc(f.filename)}" value="case" onchange="showFields(this)"> מסמך תיק</label>
|
||||||
<label><input type="radio" name="cat_${esc(f.filename)}" value="training" onchange="showFields(this)"> עזר משפטי — החלטה (אימון)</label>
|
<label><input type="radio" name="cat_${esc(f.filename)}" value="training" onchange="showFields(this)"> החלטה לאימון</label>
|
||||||
<label><input type="radio" name="cat_${esc(f.filename)}" value="dinleumi" onchange="showFields(this)"> דין לאומי — פסק דין בל"ל</label>
|
<label><input type="radio" name="cat_${esc(f.filename)}" value="dinleumi" onchange="showFields(this)"> דין לאומי</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="conditional case-fields" id="case_${esc(f.filename)}">
|
<div class="conditional case-fields" id="case_${esc(f.filename)}">
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
@@ -409,10 +603,10 @@ async function loadPending() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="conditional dinleumi-fields" id="dinleumi_${esc(f.filename)}">
|
<div class="conditional dinleumi-fields" id="dinleumi_${esc(f.filename)}">
|
||||||
<p style="font-size:0.85em;color:#636e72;margin:4px 0 8px">המטאדאטא (בית משפט, שופט, תאריך, נושא, תוצאה) תחולץ אוטומטית מתוך פסק הדין</p>
|
<p style="font-size:0.82em;color:#999;margin:4px 0 8px">המטאדאטא (בית משפט, שופט, תאריך, נושא, תוצאה) תחולץ אוטומטית מתוך פסק הדין</p>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top:12px">
|
<div style="margin-top:12px">
|
||||||
<div class="form-group" style="max-width:300px;margin-bottom:8px">
|
<div class="form-group" style="max-width:300px;margin-bottom:10px">
|
||||||
<label>כותרת (אופציונלי)</label>
|
<label>כותרת (אופציונלי)</label>
|
||||||
<input type="text" class="doc-title" placeholder="שם המסמך">
|
<input type="text" class="doc-title" placeholder="שם המסמך">
|
||||||
</div>
|
</div>
|
||||||
@@ -554,13 +748,14 @@ function trackTask(taskId, displayName) {
|
|||||||
if (m.judge) parts.push('שופט: ' + m.judge);
|
if (m.judge) parts.push('שופט: ' + m.judge);
|
||||||
if (m.decision_date) parts.push(m.decision_date);
|
if (m.decision_date) parts.push(m.decision_date);
|
||||||
if (m.outcome) parts.push({accepted:'התקבלה',rejected:'נדחתה',partial:'חלקית',remanded:'הוחזרה'}[m.outcome] || m.outcome);
|
if (m.outcome) parts.push({accepted:'התקבלה',rejected:'נדחתה',partial:'חלקית',remanded:'הוחזרה'}[m.outcome] || m.outcome);
|
||||||
if (parts.length) metaHtml += '<br><small style="color:#636e72">' + esc(parts.join(' | ')) + '</small>';
|
if (parts.length) metaHtml += '<br><small style="color:#999">' + esc(parts.join(' | ')) + '</small>';
|
||||||
if (m.topics && m.topics.length) metaHtml += '<br><small style="color:#0984e3">' + m.topics.map(t => esc(t)).join(', ') + '</small>';
|
if (m.topics && m.topics.length) metaHtml += '<br><small style="color:#e94560">' + m.topics.map(t => esc(t)).join(', ') + '</small>';
|
||||||
statusEl.innerHTML = metaHtml;
|
statusEl.innerHTML = metaHtml;
|
||||||
} else if (r.chunks !== undefined) {
|
} else if (r.chunks !== undefined) {
|
||||||
statusEl.textContent = `הושלם — ${r.chunks} קטעים, ${r.pages || '?'} עמודים`;
|
statusEl.textContent = `הושלם — ${r.chunks} קטעים, ${r.pages || '?'} עמודים`;
|
||||||
}
|
}
|
||||||
toast('העיבוד הושלם: ' + esc(displayName), 'success');
|
toast('העיבוד הושלם: ' + esc(displayName), 'success');
|
||||||
|
loadStatus();
|
||||||
} else if (data.status === 'failed') {
|
} else if (data.status === 'failed') {
|
||||||
div.classList.add('failed');
|
div.classList.add('failed');
|
||||||
es.close();
|
es.close();
|
||||||
@@ -571,6 +766,19 @@ function trackTask(taskId, displayName) {
|
|||||||
es.onerror = () => { es.close(); };
|
es.onerror = () => { es.close(); };
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ── Status Bar ────────────────────────────────────────────────
|
||||||
|
async function loadStatus() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(API + '/processing-status');
|
||||||
|
const data = await res.json();
|
||||||
|
document.getElementById('statCases').textContent = data.cases ?? '—';
|
||||||
|
document.getElementById('statDocs').textContent = data.documents ?? '—';
|
||||||
|
document.getElementById('statChunks').textContent = data.chunks ?? '—';
|
||||||
|
} catch (e) {
|
||||||
|
// Silently ignore — status bar stays at default
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// ── Helpers ───────────────────────────────────────────────────
|
// ── Helpers ───────────────────────────────────────────────────
|
||||||
function esc(s) {
|
function esc(s) {
|
||||||
const d = document.createElement('div');
|
const d = document.createElement('div');
|
||||||
@@ -593,6 +801,7 @@ function toast(msg, type = '') {
|
|||||||
|
|
||||||
// Initial load
|
// Initial load
|
||||||
loadPending();
|
loadPending();
|
||||||
|
loadStatus();
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Reference in New Issue
Block a user