EduMentorAI / src /templates /base.html
ziadtarek12's picture
OCR Done!
65c4ece
Raw
History Blame Contribute Delete
8.55 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 %}EduMentorAI{% endblock %}</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
{% load static %}
<link rel="stylesheet" href="{% static 'css/main.css' %}">
<link rel="stylesheet" href="{% static 'css/base.css' %}">
{% block extra_css %}{% endblock %}
</head>
<body class="{% block body_class %}{% endblock %}">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid px-3">
<a class="navbar-brand fw-bold d-flex align-items-center" href="{% url 'rag_app:home' %}">
<i class="fas fa-graduation-cap me-2"></i>
<span class="d-none d-md-inline">EduMentorAI</span>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto">
{% if user.is_authenticated %}
<li class="nav-item"><a class="nav-link" href="{% url 'rag_app:dashboard' %}"><i class="fas fa-tachometer-alt me-1"></i>Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'rag_app:chat' %}"><i class="fas fa-comments me-1"></i>Chat</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'rag_app:subject_list' %}"><i class="fas fa-book me-1"></i>Subjects</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'rag_app:document_list' %}"><i class="fas fa-file-alt me-1"></i>Documents</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'rag_app:slide_generate' %}"><i class="fas fa-file-powerpoint me-1"></i>Generate Slides</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'rag_app:quiz_list' %}"><i class="fas fa-question-circle me-1"></i>Quizzes</a></li>
{% endif %}
</ul>
<ul class="navbar-nav align-items-center">
<li class="nav-item">
<button id="theme-toggle" class="dark-mode-toggle d-flex align-items-center justify-content-center" aria-label="Toggle dark mode">
<span class="visually-hidden">Toggle dark mode</span>
<i id="theme-toggle-icon" class="fas fa-moon"></i>
</button>
</li>
{% if user.is_authenticated %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle d-flex align-items-center" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
<div class="user-avatar me-2">
{% if user.userprofile.avatar %}
<img src="{{ user.userprofile.avatar.url }}" alt="Avatar" class="rounded-circle" width="32" height="32">
{% else %}
<div class="avatar-placeholder">
{{ user.first_name|first|default:user.username|first|upper }}
</div>
{% endif %}
</div>
<span class="d-none d-md-inline">{{ user.first_name|default:user.username }}</span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="{% url 'rag_app:profile' %}"><i class="fas fa-user me-2"></i>Profile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="{% url 'account_change_password' %}"><i class="fas fa-key me-2"></i>Change Password</a></li>
<li><a class="dropdown-item" href="{% url 'account_logout' %}"><i class="fas fa-sign-out-alt me-2"></i>Logout</a></li>
</ul>
</li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}"><i class="fas fa-sign-in-alt me-1"></i>Login</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'account_signup' %}"><i class="fas fa-user-plus me-1"></i>Sign Up</a></li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="main-content" style="background: var(--background-color); color: var(--text-primary);">
{% if messages %}
<div class="container-fluid mt-3">
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show shadow-sm rounded" role="alert" style="background: var(--card-bg); color: var(--text-primary); border: 1px solid var(--border-color);">
<i class="fas fa-{% if message.tags == 'success' %}check-circle{% elif message.tags == 'error' %}exclamation-circle{% elif message.tags == 'warning' %}exclamation-triangle{% else %}info-circle{% endif %} me-2"></i>
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
</div>
{% endif %}
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<footer class="footer mt-auto py-4" style="background: var(--card-bg); border-top: 1px solid var(--border-color);">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6">
<h6 class="fw-bold mb-1">EduMentorAI</h6>
<p class="text-muted small mb-0" style="color: var(--text-secondary) !important;">Your AI-powered learning companion</p>
</div>
<div class="col-md-6 text-md-end">
<p class="text-muted small mb-0" style="color: var(--text-secondary) !important;">
Made with <i class="fas fa-heart text-danger"></i> for education
</p>
</div>
</div>
</div>
</footer>
<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay" style="display: none;">
<div class="loading-spinner">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="mt-3">Processing...</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<!-- MathJax Configuration -->
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']],
processEscapes: true,
processEnvironments: true
},
options: {
skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
ignoreHtmlClass: 'tex2jax_ignore',
processHtmlClass: 'tex2jax_process'
},
svg: {
fontCache: 'global'
}
};
</script>
<!-- MathJax Library -->
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<!-- Custom JS -->
<script src="{% static 'js/main.js' %}"></script>
{% block extra_js %}{% endblock %}
<script src="{% static 'js/base.js' %}"></script>
</body>
</html>