admin/38222-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v2

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-08 12:13:33 +00:00
parent 3c3b3ecffe
commit 0f00c92670
1 changed files with 80 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
core/templates/base.html
View File

@ -15,13 +15,13 @@
--bs-body-font-family: 'Space Grotesk', sans-serif; --bs-body-font-family: 'Space Grotesk', sans-serif;
} }
body { /* Ensure smooth transition for theme change */
background-color: #ffffff; html, body {
color: #000000; transition: background-color 0.3s ease, color 0.3s ease;
} }
.navbar { .navbar {
border-bottom: 2px solid #000; border-bottom: 2px solid var(--bw-border, #000);
} }
.navbar-brand { .navbar-brand {
@ -38,45 +38,106 @@
} }
footer { footer {
border-top: 2px solid #000; border-top: 2px solid var(--bw-border, #000);
margin-top: 5rem; margin-top: 5rem;
padding: 3rem 0; padding: 3rem 0;
} }
/* Theme Toggle Button Specifics */
.theme-toggle {
cursor: pointer;
border: 2px solid var(--bw-text, #000);
background: var(--bw-bg, #fff);
color: var(--bw-text, #000);
padding: 5px 15px;
font-family: 'JetBrains Mono', monospace;
font-weight: 700;
margin-left: 15px;
transition: all 0.2s ease;
text-transform: uppercase;
font-size: 0.8rem;
}
.theme-toggle:hover {
background: var(--bw-text, #000);
color: var(--bw-bg, #fff);
}
</style> </style>
<script>
// Check for saved theme preference or use system preference
const getPreferredTheme = () => {
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
return savedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const setTheme = (theme) => {
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
// Update button text
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
themeToggle.innerText = theme === 'dark' ? 'W/B' : 'B/W';
}
};
// Initialize theme before page load to prevent flicker
document.documentElement.setAttribute('data-theme', getPreferredTheme());
window.addEventListener('DOMContentLoaded', () => {
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
// Set initial button text
themeToggle.innerText = getPreferredTheme() === 'dark' ? 'W/B' : 'B/W';
themeToggle.addEventListener('click', () => {
const currentTheme = document.documentElement.getAttribute('data-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
setTheme(newTheme);
});
}
});
</script>
</head> </head>
<body> <body class="bw-bg bw-text">
<nav class="navbar navbar-expand-lg py-3 sticky-top bg-white"> <nav class="navbar navbar-expand-lg py-3 sticky-top bw-bg">
<div class="container"> <div class="container">
<a class="navbar-brand" href="{% url 'index' %}">DevLearn</a> <a class="navbar-brand bw-text" href="{% url 'index' %}">DevLearn</a>
<button class="navbar-toggler border-2 rounded-0" type="button" data-bs-toggle="collapse" data-bs-toggle="collapse" data-bs-target="#navbarNav"> <button class="navbar-toggler border-2 rounded-0 bw-border" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto align-items-center"> <ul class="navbar-nav ms-auto align-items-center">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link px-3" href="{% url 'index' %}">Courses</a> <a class="nav-link px-3 bw-text" href="{% url 'index' %}">Courses</a>
</li> </li>
{% if user.is_authenticated %} {% if user.is_authenticated %}
<li class="nav-item"> <li class="nav-item">
<a class="nav-link px-3" href="{% url 'dashboard' %}">Dashboard</a> <a class="nav-link px-3 bw-text" href="{% url 'dashboard' %}">Dashboard</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link px-3" href="{% url 'profile' %}">Profile</a> <a class="nav-link px-3 bw-text" href="{% url 'profile' %}">Profile</a>
</li> </li>
<li class="nav-item ms-lg-2"> <li class="nav-item ms-lg-2">
<form method="post" action="{% url 'logout' %}" class="d-inline"> <form method="post" action="{% url 'logout' %}" class="d-inline">
{% csrf_token %} {% csrf_token %}
<button type="submit" class="btn btn-dark rounded-0 px-4 text-uppercase fw-bold small">Logout</button> <button type="submit" class="btn btn-bw rounded-0 px-4 text-uppercase fw-bold small">Logout</button>
</form> </form>
</li> </li>
{% else %} {% else %}
<li class="nav-item"> <li class="nav-item">
<a class="nav-link px-3" href="{% url 'login' %}">Login</a> <a class="nav-link px-3 bw-text" href="{% url 'login' %}">Login</a>
</li> </li>
<li class="nav-item ms-lg-2"> <li class="nav-item ms-lg-2">
<a class="btn btn-dark rounded-0 px-4 text-uppercase fw-bold small" href="{% url 'signup' %}">Join Now</a> <a class="btn btn-bw rounded-0 px-4 text-uppercase fw-bold small" href="{% url 'signup' %}">Join Now</a>
</li> </li>
{% endif %} {% endif %}
<li class="nav-item">
<button id="theme-toggle" class="theme-toggle">B/W</button>
</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -86,7 +147,7 @@
{% if messages %} {% if messages %}
<div class="container mt-3"> <div class="container mt-3">
{% for message in messages %} {% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-0 border-2" role="alert"> <div class="alert alert-bw alert-dismissible fade show rounded-0 border-2" role="alert">
{{ message }} {{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div> </div>
@ -98,12 +159,12 @@
{% endblock %} {% endblock %}
</main> </main>
<footer class="bg-white"> <footer class="bw-bg bw-border">
<div class="container text-center"> <div class="container text-center">
<p class="fw-bold text-uppercase small mb-0">© 2026 DevLearn. Built for developers by developers.</p> <p class="fw-bold text-uppercase small mb-0 bw-text">© 2026 DevLearn. Built for developers by developers.</p>
</div> </div>
</footer> </footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body> </body>
</html> </html>