Hugging Face's logo

Spaces:
AkshitShubham
/
Report-Generator
Runtime error

App Files Community
Report-Generator / templates /base.html
t
style: add smooth animations and byte-accurate progress bar
c3812ef
raw
history blame contribute delete
8.66 kB
<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>{% block title %}DocuPDF{% endblock %}</title>
 {% block styles %}{% endblock %}
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
 <link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.bootstrap5.min.css" rel="stylesheet">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 <style>
 /* === UNIFIED DESIGN SYSTEM === */
 :root {
 --bg-dark: #212529;
 --bg-card: #2b3035;
 --bg-elevated: #343a40;
 --bg-hover: #3d444b;
 --border-subtle: #495057;
 --border-muted: #6c757d;
 --text-primary: #e9ecef;
 --text-muted: #adb5bd;
 --accent-primary: #0d6efd;
 --accent-info: #0dcaf0;
 --accent-success: #198754;
 --accent-warning: #ffc107;
 --accent-danger: #dc3545;
 --transition-fast: 0.15s ease;
 --transition-normal: 0.25s ease;
 --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
 --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
 }
 /* --- Unified Button Pill Style --- */
 .btn-pill {
 border-radius: 50px;
 font-weight: 500;
 transition: all var(--transition-fast);
 }
 .btn-pill:hover {
 transform: translateY(-1px);
 box-shadow: var(--shadow-sm);
 }
 .btn-pill:active {
 transform: translateY(0);
 }
 /* --- Enhanced Button Hover Effects --- */
 .btn {
 transition: all var(--transition-fast);
 }
 .btn:hover {
 transform: translateY(-1px);
 }
 .btn:active {
 transform: translateY(0);
 }
 /* --- Unified Modal Headers --- */
 .modal-content {
 border: 1px solid var(--border-subtle);
 }
 .modal-header {
 background: linear-gradient(180deg, var(--bg-card), var(--bg-dark));
 border-bottom-color: var(--border-subtle);
 }
 .modal-footer {
 border-top-color: var(--border-subtle);
 }
 /* --- Unified Card Styles --- */
 .card {
 transition: all var(--transition-fast);
 }
 .card:hover {
 border-color: var(--accent-primary) !important;
 }
 /* --- Unified Note Section/Card --- */
 .note-section, .note-card {
 background: linear-gradient(135deg, rgba(13, 202, 240, 0.08), rgba(13, 202, 240, 0.15));
 border: 1px solid rgba(13, 202, 240, 0.3);
 border-radius: 10px;
 padding: 12px;
 transition: all var(--transition-fast);
 }
 .note-section:hover, .note-card:hover {
 border-color: var(--accent-info);
 box-shadow: 0 0 12px rgba(13, 202, 240, 0.15);
 }
 .note-section h6 {
 color: var(--accent-info);
 margin-bottom: 10px;
 font-weight: 600;
 font-size: 0.85rem;
 text-transform: uppercase;
 letter-spacing: 0.5px;
 }
 /* --- Unified Progress Bars --- */
 .progress-bar {
 background: linear-gradient(90deg, var(--accent-primary), var(--accent-info));
 }
 /* --- Tom Select Dark Mode Fix --- */
 .ts-control {
 background-color: var(--bg-card) !important;
 border-color: var(--border-subtle) !important;
 color: #fff !important;
 }
 .ts-control input {
 color: #fff !important;
 }
 .ts-dropdown, .ts-dropdown .optgroup-header {
 background-color: var(--bg-card) !important;
 border-color: var(--border-subtle) !important;
 }
 .ts-dropdown .option:hover, .ts-dropdown .active {
 background-color: var(--accent-primary) !important;
 }
 .ts-control .item {
 background-color: var(--accent-primary) !important;
 color: #fff !important;
 }
 /* --- Unified Badge Styles --- */
 .badge {
 font-weight: 500;
 padding: 0.5em 0.75em;
 transition: all var(--transition-fast);
 }
 /* --- Unified Table Styles --- */
 .table {
 --bs-table-bg: transparent;
 --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
 --bs-table-hover-bg: rgba(13, 110, 253, 0.1);
 color: var(--text-primary);
 border-color: var(--bg-elevated);
 }
 .table th {
 background-color: var(--bg-dark);
 color: var(--text-muted);
 font-weight: 600;
 }
 .table td {
 border-color: var(--bg-elevated);
 vertical-align: middle;
 }
 /* --- Unified Nav Pills --- */
 .nav-pills .nav-link {
 color: var(--text-muted);
 background-color: transparent;
 border: 1px solid var(--border-subtle);
 border-radius: 50px;
 transition: all var(--transition-fast);
 }
 .nav-pills .nav-link:hover {
 color: #fff;
 background-color: var(--bg-elevated);
 transform: translateY(-1px);
 }
 .nav-pills .nav-link.active {
 color: #fff !important;
 background-color: var(--accent-primary) !important;
 border-color: var(--accent-primary);
 }
 /* --- Unified Form Controls --- */
 .form-control, .form-select {
 background-color: var(--bg-dark);
 border-color: var(--border-subtle);
 color: var(--text-primary);
 transition: all var(--transition-fast);
 }
 .form-control:focus, .form-select:focus {
 background-color: var(--bg-dark);
 border-color: var(--accent-primary);
 box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
 color: var(--text-primary);
 }
 /* --- Smooth Page Transitions --- */
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(8px); }
 to { opacity: 1; transform: translateY(0); }
 }
 .container, .container-fluid {
 animation: fadeIn 0.25s ease-out;
 }
 /* --- Alert Animations --- */
 .alert {
 animation: slideInDown 0.25s ease-out;
 }
 @keyframes slideInDown {
 from { opacity: 0; transform: translateY(-8px); }
 to { opacity: 1; transform: translateY(0); }
 }
 /* --- Dropdown Animations --- */
 .dropdown-menu {
 animation: dropdownFadeIn 0.15s ease-out;
 }
 @keyframes dropdownFadeIn {
 from { opacity: 0; transform: scale(0.95); }
 to { opacity: 1; transform: scale(1); }
 }
 /* --- Smooth List Item Transitions --- */
 .list-group-item {
 transition: all var(--transition-fast);
 }
 .list-group-item:hover {
 background-color: var(--bg-hover);
 }
 /* --- Focus Ring Enhancement --- */
 :focus-visible {
 outline: 2px solid var(--accent-primary);
 outline-offset: 2px;
 }
 /* --- Skeleton Loading Animation --- */
 .skeleton {
 background: linear-gradient(90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75%);
 background-size: 200% 100%;
 animation: skeleton-loading 1.5s infinite;
 }
 @keyframes skeleton-loading {
 0% { background-position: 200% 0; }
 100% { background-position: -200% 0; }
 }
 </style>
 {% block head %}{% endblock %}
</head>
<body>
 {% include '_navbar.html' %}
 <div class="content-wrapper" style="min-height: calc(100vh - 56px); overflow-y: auto;">
 {% block content %}{% endblock %}
 </div>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
 {% block scripts %}{% endblock %}
</body>
</html>