haikal/templates/base.html

109 lines
3.9 KiB
HTML

{% load static %} {% load i18n %}
<!DOCTYPE html>
{% get_current_language as LANGUAGE_CODE %}
<html lang="{{ LANGUAGE_CODE }}" dir="{% if LANGUAGE_CODE == 'ar' %}rtl{% else %}ltr{% endif %}" data-bs-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="mobile-web-app-capable" content="yes" />
<title>{% block title %}{% trans 'HAIKAL' %}{% endblock %}</title>
<link href="{% static 'css/themes/cosmo/_variables.scss' %}" rel="stylesheet" />
<link href="{% static 'css/custom.css' %}" rel="stylesheet" />
{% if LANGUAGE_CODE == 'ar' %}
<link href="{% static 'css/themes/cosmo/bootstrap.rtl.css' %}" rel="stylesheet" />
{% else %}
<link href="{% static 'css/themes/cosmo/bootstrap.css' %}" rel="stylesheet" />
{% endif %}
<link href="{% static 'css/themes/cosmo/_bootswatch.scss' %}" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ttskch/select2-bootstrap4-theme@x.x.x/dist/select2-bootstrap4.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.10.5/dist/sweetalert2.all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<style>
body {
min-height: 100vh;
text-transform: uppercase;
}
.btn {
text-transform: uppercase;
}
</style>
</head>
<body>
{% include 'header.html' %}
{% include 'messages.html' %}
{% block content %}
<!-- Main content goes here -->
{% endblock %}
{% include 'footer.html' %}
<!-- JavaScript Files -->
<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
$('.form-select').select2({
theme: 'bootstrap4',
});
'use strict';
// Fetch all the forms with the "needs-validation" class
const forms = document.querySelectorAll('.needs-validation');
// Loop over them and add submit event listeners
forms.forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
});
});
});
const themeButtons = document.querySelectorAll("[data-bs-theme-value]");
function changeTheme(theme) {
document.documentElement.setAttribute("data-bs-theme", theme);
themeButtons.forEach((button) => {
const isActive = button.getAttribute("data-bs-theme-value") === theme;
button.setAttribute("aria-pressed", isActive.toString());
});
}
themeButtons.forEach((button) => {
button.addEventListener("click", () => {
const theme = button.getAttribute("data-bs-theme-value");
changeTheme(theme);
});
});
const defaultTheme = "light";
const savedTheme = localStorage.getItem("theme") || defaultTheme;
changeTheme(savedTheme);
themeButtons.forEach((button) => {
button.addEventListener("click", () => {
const theme = button.getAttribute("data-bs-theme-value");
localStorage.setItem("theme", theme);
});
});
</script>
</body>
</html>