websites/homedocs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-03-30 23:42:24 +02:00
parent 3b2f1db4ce
commit 5c16964b76
47 changed files with 2080 additions and 1053 deletions
Download patch file Download diff file Expand all files Collapse all files

86
app/templates/layout.html
View file

@ -15,10 +15,13 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/app.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/tabler.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='libs/tabler-icons/tabler-icons.min.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/tabler.min.css') }}"
onerror="this.onerror=null;this.href='https://cdn.jsdelivr.net/npm/@tabler/core@latest/dist/css/tabler.min.css';">
<link rel="stylesheet" href="{{ url_for('static', filename='libs/tabler-icons/tabler-icons.min.css') }}"
onerror="this.onerror=null;this.href='https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css';">
<link rel="stylesheet" href="{{ url_for('static', filename='css/custom.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/markdown.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/theme.css') }}">
<!-- Favicon -->
<link rel="icon" type="image/png" href="{{ url_for('static', filename='img/favicon.png') }}">
{% block styles %}{% endblock %}
@ -267,11 +270,13 @@
<li><a class="dropdown-item" href="{{ url_for('auth.logout') }}">Logout</a></li>
</ul>
</div>
<div class="nav-item ms-2">
<button id="theme-toggle" class="btn btn-icon" aria-label="Toggle theme">
<span class="ti ti-moon dark-icon d-none"></span>
<span class="ti ti-sun light-icon"></span>
</button>
<div class="navbar-nav flex-row order-md-last">
<div class="nav-item me-2">
<button id="theme-toggle" class="btn btn-icon" aria-label="Toggle theme">
<span class="ti ti-moon dark-icon d-none"></span>
<span class="ti ti-sun light-icon"></span>
</button>
</div>
</div>
</div>
</div>
@ -529,6 +534,73 @@
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// Add transition class to main content
const mainContent = document.querySelector('.page-body');
if (mainContent) {
mainContent.classList.add('page-transition');
}
// Theme toggle enhancement
const themeToggle = document.getElementById('theme-toggle');
if (themeToggle) {
themeToggle.addEventListener('click', function () {
const currentTheme = document.documentElement.getAttribute('data-bs-theme');
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
document.documentElement.setAttribute('data-bs-theme', newTheme);
localStorage.setItem('theme', newTheme);
// Update toggle icon
const darkIcon = document.querySelector('.dark-icon');
const lightIcon = document.querySelector('.light-icon');
if (darkIcon && lightIcon) {
if (newTheme === 'dark') {
darkIcon.classList.remove('d-none');
lightIcon.classList.add('d-none');
} else {
darkIcon.classList.add('d-none');
lightIcon.classList.remove('d-none');
}
}
// Show theme change notification
showNotification('success', `${newTheme.charAt(0).toUpperCase() + newTheme.slice(1)} mode activated`);
});
}
});
// Notification function
function showNotification(type, message) {
const notificationArea = document.getElementById('notification-area');
if (!notificationArea) return;
const notification = document.createElement('div');
notification.className = `alert alert-${type} alert-dismissible fade show`;
notification.style.animation = 'fadeIn 0.3s ease-out';
notification.innerHTML = `
${message}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
`;
notificationArea.appendChild(notification);
// Auto dismiss after 3 seconds
setTimeout(() => {
notification.style.animation = 'fadeOut 0.3s ease-in';
setTimeout(() => {
notification.remove();
}, 300);
}, 3000);
}
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
</script>
{% block scripts %}{% endblock %}
</body>