arxplorer / templates /admin /base.html
Subhadeep Mandal
Fresh deploy
54eb2ce
Raw
History Blame Contribute Delete
5.08 kB
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Admin Panel{% endblock %} - Arxiver</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style>
* {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
/* Glassmorphism styles */
.glass {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.dark .glass {
background: rgba(17, 24, 39, 0.7);
border: 1px solid rgba(75, 85, 99, 0.3);
}
.glass-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(229, 231, 235, 0.5);
}
.dark .glass-card {
background: rgba(31, 41, 55, 0.95);
border: 1px solid rgba(75, 85, 99, 0.3);
}
.glass-nav {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}
.dark .glass-nav {
background: rgba(17, 24, 39, 0.8);
border-bottom: 1px solid rgba(75, 85, 99, 0.3);
}
/* Animated gradient background */
.gradient-bg {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
.dark .gradient-bg {
background: linear-gradient(-45deg, #1e3a8a, #7c3aed, #059669, #0891b2);
background-size: 400% 400%;
animation: gradient 15s ease infinite;
}
@keyframes gradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Smooth transitions */
* {
transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(156, 163, 175, 0.5);
border-radius: 5px;
}
.dark ::-webkit-scrollbar-thumb {
background: rgba(75, 85, 99, 0.5);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(107, 114, 128, 0.7);
}
.dark ::-webkit-scrollbar-thumb:hover {
background: rgba(107, 114, 128, 0.7);
}
</style>
{% block extra_head %}{% endblock %}
</head>
<body class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 min-h-screen">
{% block content %}{% endblock %}
{% block extra_scripts %}{% endblock %}
<!-- Theme Toggle Script -->
<script>
// Initialize theme from localStorage or default to dark
function initTheme() {
const theme = localStorage.getItem('theme') || 'dark';
if (theme === 'dark') {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}
// Toggle theme
function toggleTheme() {
const isDark = document.documentElement.classList.contains('dark');
if (isDark) {
document.documentElement.classList.remove('dark');
localStorage.setItem('theme', 'light');
} else {
document.documentElement.classList.add('dark');
localStorage.setItem('theme', 'dark');
}
}
// Run on page load
initTheme();
</script>
</body>
</html>