e6f3e9387e
New blueprint-based module system (hm_qc, video_qc, video_master, reporting), core framework (database, config, templates), and unified web interface with progress tracking and tab navigation. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
<!-- Reusable Progress Widget Component -->
|
|
<!-- Usage: include this template and call initProgressWidget(sessionId, containerId) -->
|
|
|
|
<div id="{{ progress_id | default('progressWidget') }}" class="progress-widget-container my-4">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">
|
|
<i class="bi bi-gear-fill me-2 spin-animation"></i>
|
|
Processing...
|
|
</h5>
|
|
<div class="progress mb-3" style="height: 1.5rem;">
|
|
<div class="progress-bar progress-bar-animated progress-bar-striped"
|
|
role="progressbar"
|
|
style="width: 0%"
|
|
aria-valuenow="0"
|
|
aria-valuemin="0"
|
|
aria-valuemax="100">
|
|
0%
|
|
</div>
|
|
</div>
|
|
<div class="progress-message text-center">
|
|
<i class="bi bi-hourglass-split me-2"></i>
|
|
<span>Initializing...</span>
|
|
</div>
|
|
<div class="progress-details mt-3 text-muted small" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
.spin-animation {
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
.progress-widget-container .card {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
</style>
|