prism-backend / templates /base.html
Penguindrum920's picture
Prepare PRISM backend for Hugging Face Spaces
7bc5fde verified
Raw
History Blame Contribute Delete
5.05 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Parkinson's Disease Assessment System{% endblock %}</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<style>
/* Light mode - Default label visibility */
[data-theme="light"] .form-label,
.form-label {
color: #000 !important;
background-color: transparent !important;
font-weight: 600 !important;
display: inline-block !important;
margin-bottom: 8px !important;
padding: 2px 0 !important;
}
/* Dark mode label visibility */
[data-theme="dark"] .form-label {
color: #f8f9fa !important;
background-color: transparent !important;
font-weight: 600 !important;
}
/* Dark mode card styling */
[data-theme="dark"] .card {
background-color: #1e1e1e !important;
border-color: #444 !important;
color: #f8f9fa !important;
}
[data-theme="dark"] .card-header {
background-color: #2a2a2a !important;
border-color: #444 !important;
color: #f8f9fa !important;
}
/* Dark mode form controls */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
background-color: #2a2a2a !important;
border-color: #555 !important;
color: #f8f9fa !important;
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
background-color: #333 !important;
border-color: #61a0ff !important;
color: #f8f9fa !important;
}
/* Dark mode body */
[data-theme="dark"] body {
background-color: #121212 !important;
color: #f8f9fa !important;
}
/* Dark mode footer */
[data-theme="dark"] .footer {
background-color: #1a1a1a !important;
color: #f8f9fa !important;
}
[data-theme="dark"] .text-muted {
color: #aaa !important;
}
</style>
{% block extra_css %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">
<i class="fas fa-brain me-2"></i>PD Assessment System
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="/"><i class="fas fa-home me-1"></i> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/assessment"><i class="fas fa-stethoscope me-1"></i> Assessment</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/twin"><i class="fas fa-project-diagram me-1"></i> Digital Twin</a>
</li>
<!--<li class="nav-item">
<a class="nav-link" href="/about"><i class="fas fa-info-circle me-1"></i> About</a>
</li>-->
<li class="nav-item">
<button class="btn btn-outline-light ms-2" id="themeToggle">
<i class="fas fa-moon"></i>
</button>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-4 mb-5">
{% block content %}{% endblock %}
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container text-center">
<span class="text-muted">© 2023 Parkinson's Disease Assessment System</span>
</div>
</footer>
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Custom JS -->
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>