codebook / potato /templates /adjudication.html
davidjurgens's picture
Deploy: Potato — Codebook Annotation
aceb1b2 verified
Raw
History Blame Contribute Delete
9.19 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ annotation_task_name }} - Adjudication</title>
<!-- Bootstrap CSS (vendored at /static/vendor/bootstrap-5.3.3.min.css) -->
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap-5.3.3.min.css') }}">
<!-- Font Awesome (vendored at /static/vendor/font-awesome-6.7.2/) -->
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/font-awesome-6.7.2/css/all.min.css') }}">
<!-- Custom Styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<!-- Adjudication Styles -->
<link rel="stylesheet" href="{{ url_for('static', filename='adjudication.css') }}?v=3">
</head>
<body>
<!-- Header navigation bar -->
<nav class="potato-navbar" role="navigation" style="margin-bottom: 0;">
<div class="navbar-inner">
<div class="navbar-brand">
<span class="task-name">{{ annotation_task_name }} — Adjudication</span>
</div>
<div class="navbar-end" style="margin-left: auto;">
<a href="/annotate" class="adjudicate-btn">
<i class="fas fa-edit" aria-hidden="true"></i> Annotate
</a>
<div class="user-pill">
<i class="fas fa-gavel" aria-hidden="true" style="font-size: 0.7rem;"></i>
<span class="username">{{ username }}</span>
<a href="/logout" class="logout-btn">Logout</a>
</div>
</div>
</div>
</nav>
<div class="adjudication-container">
<!-- Sidebar: Queue -->
<div class="adj-sidebar">
<div class="adj-sidebar-header">
<h5><i class="fas fa-list-check" aria-hidden="true"></i> Queue</h5>
<div class="adj-progress-bar">
<div class="adj-progress-fill" id="adj-progress-fill" style="width: 0%"></div>
</div>
<div class="adj-progress-text" id="adj-progress-text">Loading...</div>
</div>
<div class="adj-queue-filters">
<button class="adj-filter-btn active" data-filter="pending">Pending</button>
<button class="adj-filter-btn" data-filter="all">All</button>
<button class="adj-filter-btn" data-filter="completed">Done</button>
</div>
<div class="adj-queue-list" id="adj-queue-list">
<!-- Populated by JS -->
</div>
</div>
<!-- Main Content -->
<div class="adj-main">
<div class="adj-content" id="adj-content">
<!-- Empty state -->
<div class="adj-empty-state" id="adj-empty-state">
<i class="fas fa-gavel" aria-hidden="true"></i>
<h5>Adjudication Mode</h5>
<p>Select an item from the queue to begin adjudicating.</p>
</div>
<!-- Item view (hidden initially) -->
<div id="adj-item-view" style="display: none;">
<!-- Item header -->
<div class="adj-item-header">
<h4 id="adj-item-id"></h4>
<div>
<span class="adj-agreement-badge" id="adj-item-agreement"></span>
<span class="text-muted" style="font-size: 0.8rem; margin-left: 8px;" id="adj-item-annotators"></span>
</div>
</div>
<!-- Item text -->
<div class="adj-item-text" id="adj-item-text"></div>
<!-- Annotator Responses -->
<div class="adj-responses-section">
<div class="adj-responses-header">
<h5><i class="fas fa-users" aria-hidden="true"></i> Annotator Responses</h5>
</div>
<div id="adj-responses-container">
<!-- Populated by JS per schema -->
</div>
</div>
<!-- Similar Items (Phase 3) -->
<div id="adj-similar-items-panel" style="display: none;"></div>
<!-- Decision Section -->
<div class="adj-decision-section">
<div class="adj-decision-header">
<h5><i class="fas fa-check-circle" aria-hidden="true"></i> Your Decision</h5>
</div>
<div id="adj-decision-forms">
<!-- Populated by JS per schema -->
</div>
<!-- Metadata: Confidence, Error Taxonomy, Notes -->
<div class="adj-metadata-section">
<h6>Decision Metadata</h6>
<div class="adj-metadata-row">
{% if adj_config.require_confidence %}
<div class="adj-metadata-field">
<label for="adj-confidence">Confidence</label>
<select id="adj-confidence">
<option value="high">High</option>
<option value="medium" selected>Medium</option>
<option value="low">Low</option>
</select>
</div>
{% endif %}
</div>
<div class="adj-metadata-row">
<div class="adj-metadata-field" style="flex: 2;">
<label>Error Type</label>
<div class="adj-error-taxonomy" id="adj-error-taxonomy">
{% for tag in adj_config.error_taxonomy %}
<label class="adj-error-tag" data-tag="{{ tag }}">
<input type="checkbox" value="{{ tag }}">
{{ tag | replace("_", " ") | title }}
</label>
{% endfor %}
</div>
</div>
</div>
<div class="adj-metadata-row">
<div class="adj-metadata-field" style="flex: 1;">
<label for="adj-notes">Notes</label>
<textarea id="adj-notes" placeholder="Optional notes about this decision..."></textarea>
</div>
</div>
<!-- Guideline update flag -->
<div class="adj-guideline-section">
<label class="adj-guideline-check">
<input type="checkbox" id="adj-guideline-flag">
Flag for guideline update
</label>
<div class="adj-guideline-notes" id="adj-guideline-notes">
<div class="adj-metadata-field">
<label for="adj-guideline-text">What needs updating?</label>
<textarea id="adj-guideline-text" placeholder="Describe the guideline issue..."></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom Navigation -->
<div class="adj-nav-bar" id="adj-nav-bar" style="display: none;">
<button class="btn btn-outline-secondary" id="adj-btn-prev">
<i class="fas fa-arrow-left" aria-hidden="true"></i> Previous
</button>
<div class="d-flex gap-2">
<button class="btn btn-outline-secondary" id="adj-btn-skip">
Skip
</button>
<button class="btn btn-primary" id="adj-btn-submit">
Submit and continue <i class="fas fa-arrow-right" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Pass config to JS -->
<script>
window.ADJ_CONFIG = {{ adj_config | tojson }};
window.ANNOTATION_SCHEMES = {{ annotation_schemes | tojson }};
</script>
<!-- Adjudication JS -->
<script src="{{ url_for('static', filename='adjudication-forms.js') }}?v=3"></script>
<script src="{{ url_for('static', filename='adjudication.js') }}?v=3"></script>
</body>
</html>