Skip to content

Commit 31b2a98

Browse files
semicoloncolonelsemicoloncolonel
committed
fix: improve color contrast and readability - use defined CSS variables, darker text colors
1 parent 7238000 commit 31b2a98

1 file changed

Lines changed: 30 additions & 30 deletions

File tree

‎src/deeptrace/dashboard/templates/case_browser.html‎

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<style>
1010
body {
1111
min-height: 100vh;
12-
background: var(--bg-main);
12+
background: var(--bg-primary);
1313
}
1414
.theme-toggle-fab {
1515
position: fixed;
@@ -43,7 +43,7 @@
4343
</button>
4444
<div style="padding:24px;max-width:1400px;margin:0 auto">
4545
<!-- FBI Tip Reporting Banner -->
46-
<div style="background:linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.08) 100%);border:1px solid var(--border);border-radius:10px;padding:16px 20px;margin-bottom:24px">
46+
<div style="background:linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(99,102,241,0.08) 100%);border:1px solid var(--border-primary);border-radius:10px;padding:16px 20px;margin-bottom:24px">
4747
<div style="display:flex;align-items:start;gap:16px">
4848
<div style="font-size:32px">📞</div>
4949
<div style="flex:1">
@@ -53,16 +53,16 @@ <h3 style="margin:0 0 8px 0;color:var(--text-primary);font-size:16px">Report Tip
5353
</div>
5454
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px">
5555
<div style="font-size:12px">
56-
<strong style="color:var(--accent-blue)">📝 Online:</strong>
57-
<a href="https://tips.fbi.gov" target="_blank" style="color:var(--accent-blue);text-decoration:underline">tips.fbi.gov</a>
56+
<strong style="color:var(--primary-600)">📝 Online:</strong>
57+
<a href="https://tips.fbi.gov" target="_blank" style="color:var(--primary-600);text-decoration:underline">tips.fbi.gov</a>
5858
</div>
5959
<div style="font-size:12px">
60-
<strong style="color:var(--accent-blue)">☎️ Phone:</strong>
60+
<strong style="color:var(--primary-600)">☎️ Phone:</strong>
6161
<span style="color:var(--text-primary)">1-800-CALL-FBI (225-5324)</span>
6262
</div>
6363
<div style="font-size:12px">
64-
<strong style="color:var(--accent-blue)">🏛️ Field Offices:</strong>
65-
<a href="https://www.fbi.gov/contact-us/field-offices" target="_blank" style="color:var(--accent-blue);text-decoration:underline">Find Local Office</a>
64+
<strong style="color:var(--primary-600)">🏛️ Field Offices:</strong>
65+
<a href="https://www.fbi.gov/contact-us/field-offices" target="_blank" style="color:var(--primary-600);text-decoration:underline">Find Local Office</a>
6666
</div>
6767
</div>
6868
</div>
@@ -72,36 +72,36 @@ <h3 style="margin:0 0 8px 0;color:var(--text-primary);font-size:16px">Report Tip
7272
<div style="margin-bottom:24px;display:flex;align-items:center;justify-content:space-between">
7373
<h2 style="margin:0;color:var(--text-primary)">📁 Case Browser</h2>
7474
<div style="display:flex;gap:12px;align-items:center;flex-wrap:wrap">
75-
<select id="source-filter" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary)" onchange="onSourceChange()">
75+
<select id="source-filter" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--text-primary)" onchange="onSourceChange()">
7676
<option value="fbi">FBI Most Wanted</option>
7777
<option value="namus">NamUs</option>
7878
<option value="ncmec" disabled>NCMEC (Coming Soon)</option>
7979
</select>
8080

8181
<!-- NamUs-specific filters (hidden by default) -->
8282
<div id="namus-filters" style="display:none;gap:8px">
83-
<select id="namus-case-type" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary)">
83+
<select id="namus-case-type" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--text-primary)">
8484
<option value="missing">Missing Persons</option>
8585
<option value="unidentified">Unidentified Persons</option>
8686
<option value="unclaimed">Unclaimed Persons</option>
8787
</select>
88-
<select id="namus-state" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary)">
88+
<select id="namus-state" style="padding:6px 12px;border-radius:6px;border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--text-primary)">
8989
<option value="">All States</option>
9090
<!-- Populated dynamically -->
9191
</select>
92-
<input type="number" id="namus-limit" placeholder="Limit (default: 20)" min="1" max="100" value="20" style="padding:6px 12px;width:150px;border-radius:6px;border:1px solid var(--border);background:var(--bg-secondary);color:var(--text-primary)">
92+
<input type="number" id="namus-limit" placeholder="Limit (default: 20)" min="1" max="100" value="20" style="padding:6px 12px;width:150px;border-radius:6px;border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--text-primary)">
9393
</div>
9494

9595
<button class="btn btn-primary" onclick="loadCases()">🔄 Load Cases</button>
9696
</div>
9797
</div>
9898

99-
<div id="loading-indicator" style="display:none;text-align:center;padding:40px;color:var(--cyan)">
99+
<div id="loading-indicator" style="display:none;text-align:center;padding:40px;color:var(--primary-500)">
100100
<div style="font-size:24px;margin-bottom:12px">⏳</div>
101101
<div id="loading-text">Loading cases...</div>
102102
</div>
103103

104-
<div id="error-message" style="display:none;padding:16px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:8px;color:#ef4444;margin-bottom:24px"></div>
104+
<div id="error-message" style="display:none;padding:16px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.4);border-radius:8px;color:#dc2626;font-weight:500;margin-bottom:24px"></div>
105105

106106
<div id="cases-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px"></div>
107107

@@ -149,7 +149,7 @@ <h3 id="modal-title" style="margin:0"></h3>
149149

150150
.modal-header {
151151
padding: 20px 24px;
152-
border-bottom: 1px solid var(--border);
152+
border-bottom: 1px solid var(--border-primary);
153153
display: flex;
154154
align-items: center;
155155
justify-content: space-between;
@@ -159,7 +159,7 @@ <h3 id="modal-title" style="margin:0"></h3>
159159
background: none;
160160
border: none;
161161
font-size: 28px;
162-
color: var(--text-dim);
162+
color: var(--text-tertiary);
163163
cursor: pointer;
164164
padding: 0;
165165
width: 32px;
@@ -177,7 +177,7 @@ <h3 id="modal-title" style="margin:0"></h3>
177177

178178
.case-card {
179179
background: var(--bg-secondary);
180-
border: 1px solid var(--border);
180+
border: 1px solid var(--border-primary);
181181
border-radius: 10px;
182182
overflow: hidden;
183183
transition: transform 0.2s, box-shadow 0.2s;
@@ -187,7 +187,7 @@ <h3 id="modal-title" style="margin:0"></h3>
187187
.case-card:hover {
188188
transform: translateY(-4px);
189189
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
190-
border-color: var(--accent-blue);
190+
border-color: var(--primary-600);
191191
}
192192

193193
.case-image {
@@ -331,7 +331,7 @@ <h3 id="modal-title" style="margin:0"></h3>
331331
casesGrid.textContent = '';
332332

333333
if (cases.length === 0) {
334-
casesGrid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text-dim)">No cases found</div>';
334+
casesGrid.innerHTML = '<div style="grid-column:1/-1;text-align:center;padding:40px;color:var(--text-tertiary)">No cases found</div>';
335335
return;
336336
}
337337

@@ -352,7 +352,7 @@ <h3 id="modal-title" style="margin:0"></h3>
352352

353353
const imageHTML = imageUrl
354354
? '<img src="' + imageUrl + '" class="case-image" alt="Case image">'
355-
: '<div class="case-image" style="display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--text-dim)">📋</div>';
355+
: '<div class="case-image" style="display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--text-tertiary)">📋</div>';
356356

357357
// Handle description field (different names for FBI vs NamUs)
358358
const description = caseData.description || caseData.physical_description || caseData.circumstances || '';
@@ -364,7 +364,7 @@ <h3 id="modal-title" style="margin:0"></h3>
364364
'<div class="case-description">' + escapeHtml(description) + '</div>' +
365365
'<div style="display:flex;gap:4px;flex-wrap:wrap;margin-top:8px">' +
366366
'<span class="badge" style="font-size:10px">' + escapeHtml(source) + '</span>' +
367-
(caseData.reward_text ? '<span class="badge" style="font-size:10px;background:rgba(34,197,94,0.2);color:#22c55e">💰 Reward</span>' : '') +
367+
(caseData.reward_text ? '<span class="badge" style="font-size:10px;background:rgba(34,197,94,0.15);color:#16a34a;font-weight:600">💰 Reward</span>' : '') +
368368
'</div>' +
369369
'</div>';
370370

@@ -393,45 +393,45 @@ <h3 id="modal-title" style="margin:0"></h3>
393393

394394
// Warning message
395395
if (caseData.warning_message) {
396-
detailHTML += '<div style="padding:12px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.3);border-radius:6px;margin-bottom:16px;color:#ef4444">' +
396+
detailHTML += '<div style="padding:12px;background:rgba(239,68,68,0.12);border:1px solid rgba(239,68,68,0.4);border-radius:6px;margin-bottom:16px;color:#dc2626;font-weight:500">' +
397397
'<strong>⚠️ Warning:</strong> ' + escapeHtml(caseData.warning_message) +
398398
'</div>';
399399
}
400400

401401
// Caution
402402
if (caseData.caution) {
403-
detailHTML += '<div style="padding:12px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.3);border-radius:6px;margin-bottom:16px;color:#f59e0b">' +
403+
detailHTML += '<div style="padding:12px;background:rgba(245,158,11,0.12);border:1px solid rgba(245,158,11,0.4);border-radius:6px;margin-bottom:16px;color:#d97706;font-weight:500">' +
404404
'<strong>⚠️ Caution:</strong> ' + escapeHtml(caseData.caution) +
405405
'</div>';
406406
}
407407

408408
// Reward
409409
if (caseData.reward_text) {
410-
detailHTML += '<div style="padding:12px;background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);border-radius:6px;margin-bottom:16px;color:#22c55e">' +
410+
detailHTML += '<div style="padding:12px;background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.4);border-radius:6px;margin-bottom:16px;color:#16a34a;font-weight:500">' +
411411
'<strong>💰 Reward:</strong> ' + escapeHtml(caseData.reward_text) +
412412
'</div>';
413413
}
414414

415415
// Description
416416
if (caseData.description) {
417417
detailHTML += '<div style="margin-bottom:16px">' +
418-
'<h4 style="color:var(--text-dim);font-size:12px;margin:0 0 8px 0">DESCRIPTION</h4>' +
418+
'<h4 style="color:var(--text-tertiary);font-size:12px;margin:0 0 8px 0">DESCRIPTION</h4>' +
419419
'<div style="font-size:14px;line-height:1.6;color:var(--text-primary)">' + escapeHtml(caseData.description) + '</div>' +
420420
'</div>';
421421
}
422422

423423
// Details
424424
if (caseData.details) {
425425
detailHTML += '<div style="margin-bottom:16px">' +
426-
'<h4 style="color:var(--text-dim);font-size:12px;margin:0 0 8px 0">DETAILS</h4>' +
426+
'<h4 style="color:var(--text-tertiary);font-size:12px;margin:0 0 8px 0">DETAILS</h4>' +
427427
'<div style="font-size:14px;line-height:1.6;color:var(--text-primary)">' + escapeHtml(caseData.details) + '</div>' +
428428
'</div>';
429429
}
430430

431431
// Subjects
432432
if (caseData.subjects && caseData.subjects.length > 0) {
433433
detailHTML += '<div style="margin-bottom:16px">' +
434-
'<h4 style="color:var(--text-dim);font-size:12px;margin:0 0 8px 0">SUBJECTS</h4>' +
434+
'<h4 style="color:var(--text-tertiary);font-size:12px;margin:0 0 8px 0">SUBJECTS</h4>' +
435435
'<div style="display:flex;gap:6px;flex-wrap:wrap">';
436436
caseData.subjects.forEach(function(subject) {
437437
detailHTML += '<span class="badge">' + escapeHtml(subject) + '</span>';
@@ -442,7 +442,7 @@ <h3 id="modal-title" style="margin:0"></h3>
442442
// Field Offices
443443
if (caseData.field_offices && caseData.field_offices.length > 0) {
444444
detailHTML += '<div style="margin-bottom:16px">' +
445-
'<h4 style="color:var(--text-dim);font-size:12px;margin:0 0 8px 0">FIELD OFFICES</h4>' +
445+
'<h4 style="color:var(--text-tertiary);font-size:12px;margin:0 0 8px 0">FIELD OFFICES</h4>' +
446446
'<div style="display:flex;gap:6px;flex-wrap:wrap">';
447447
caseData.field_offices.forEach(function(office) {
448448
detailHTML += '<span class="badge">' + escapeHtml(office) + '</span>';
@@ -458,8 +458,8 @@ <h3 id="modal-title" style="margin:0"></h3>
458458
}
459459

460460
// Tip Submission Section
461-
detailHTML += '<div style="border-top:1px solid var(--border);padding-top:16px;margin-top:16px;margin-bottom:16px">' +
462-
'<h4 style="color:var(--text-dim);font-size:12px;margin:0 0 8px 0">SUBMIT A TIP</h4>' +
461+
detailHTML += '<div style="border-top:1px solid var(--border-primary);padding-top:16px;margin-top:16px;margin-bottom:16px">' +
462+
'<h4 style="color:var(--text-tertiary);font-size:12px;margin:0 0 8px 0">SUBMIT A TIP</h4>' +
463463
'<div style="background:rgba(59,130,246,0.08);border:1px solid rgba(59,130,246,0.2);border-radius:6px;padding:12px">' +
464464
'<div style="font-size:12px;color:var(--text-secondary);margin-bottom:10px">Have information about this case?</div>' +
465465
'<div style="display:flex;flex-wrap:wrap;gap:8px">' +
@@ -480,7 +480,7 @@ <h3 id="modal-title" style="margin:0"></h3>
480480
const importData = caseData.id ? "'" + escapeHtml(caseData.id) + "'" :
481481
"null, '" + escapeHtml(caseData.case_id) + "', " + caseData.namus_id + ", '" + (caseData.case_type.includes('Missing') ? 'missing' : 'unidentified') + "'";
482482

483-
detailHTML += '<div style="border-top:1px solid var(--border);padding-top:16px;margin-top:16px">' +
483+
detailHTML += '<div style="border-top:1px solid var(--border-primary);padding-top:16px;margin-top:16px">' +
484484
'<button class="btn btn-primary" onclick="importCase(' + importData + ')">📥 Import into Investigation</button>' +
485485
'</div>';
486486

0 commit comments

Comments
 (0)