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

97
core/templates/base.html
View File

@ -15,13 +15,13 @@
--bs-body-font-family: 'Space Grotesk', sans-serif;
}
body {
background-color: #ffffff;
color: #000000;
/* Ensure smooth transition for theme change */
html, body {
transition: background-color 0.3s ease, color 0.3s ease;
}
.navbar {
border-bottom: 2px solid #000;
border-bottom: 2px solid var(--bw-border, #000);
}
.navbar-brand {
@ -38,45 +38,106 @@
}
footer {
border-top: 2px solid #000;
border-top: 2px solid var(--bw-border, #000);
margin-top: 5rem;
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>
<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>
<body>
<nav class="navbar navbar-expand-lg py-3 sticky-top bg-white">
<body class="bw-bg bw-text">
<nav class="navbar navbar-expand-lg py-3 sticky-top bw-bg">
<div class="container">
<a class="navbar-brand" 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">
<a class="navbar-brand bw-text" href="{% url 'index' %}">DevLearn</a>
<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>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto align-items-center">
<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>
{% if user.is_authenticated %}
<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 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 class="nav-item ms-lg-2">
<form method="post" action="{% url 'logout' %}" class="d-inline">
{% 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>
</li>
{% else %}
<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 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>
{% endif %}
<li class="nav-item">
<button id="theme-toggle" class="theme-toggle">B/W</button>
</li>
</ul>
</div>
</div>
@ -86,7 +147,7 @@
{% if messages %}
<div class="container mt-3">
{% 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 }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@ -98,9 +159,9 @@
{% endblock %}
</main>
<footer class="bg-white">
<footer class="bw-bg bw-border">
<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>
</footer>