98 lines
3.8 KiB
HTML
98 lines
3.8 KiB
HTML
<!-- === FILE: app/templates/base.html === -->
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{% block title %}Cloud Drive{% endblock %}</title>
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Google Fonts -->
|
|
<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=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'DM Sans', sans-serif;
|
|
background-color: #0f1117;
|
|
color: #f1f5f9;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: 'Space Grotesk', sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-screen">
|
|
<!-- Navbar -->
|
|
{% if session.user %}
|
|
<nav class="bg-[#1a1d27] border-b border-[#2a2d3e]">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex justify-between items-center h-16">
|
|
<!-- Left: Logo and Brand -->
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-8 h-8 text-[#6366f1]" fill="currentColor" viewBox="0 0 20 20">
|
|
<path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z"/>
|
|
</svg>
|
|
<span class="text-xl font-bold text-white">Cloud Drive</span>
|
|
</div>
|
|
|
|
<!-- Right: User info and logout -->
|
|
<div class="flex items-center space-x-4">
|
|
<img src="{{ session.user.profile_picture }}" alt="{{ session.user.name }}" class="w-8 h-8 rounded-full border-2 border-[#6366f1]">
|
|
<span class="text-sm text-[#94a3b8]">{{ session.user.name }}</span>
|
|
<a href="{{ url_for('auth.logout') }}" class="text-sm text-[#ef4444] hover:text-[#dc2626] transition-colors">
|
|
Sign out
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
{% endif %}
|
|
|
|
<!-- Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div id="flash-messages" class="fixed top-4 right-4 z-50 space-y-2">
|
|
{% for category, message in messages %}
|
|
<div class="flash-message px-6 py-3 rounded-lg shadow-lg {% if category == 'success' %}bg-[#22c55e]{% elif category == 'error' %}bg-[#ef4444]{% else %}bg-[#6366f1]{% endif %} text-white">
|
|
{{ message }}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Main Content -->
|
|
<main>
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- JavaScript -->
|
|
<script>
|
|
// Auto-dismiss flash messages after 4 seconds
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const flashMessages = document.querySelectorAll('.flash-message');
|
|
flashMessages.forEach(function(message) {
|
|
setTimeout(function() {
|
|
message.style.opacity = '0';
|
|
message.style.transform = 'translateX(100%)';
|
|
message.style.transition = 'all 0.3s ease-out';
|
|
setTimeout(function() {
|
|
message.remove();
|
|
}, 300);
|
|
}, 4000);
|
|
});
|
|
});
|
|
</script>
|
|
|
|
{% block scripts %}{% endblock %}
|
|
</body>
|
|
</html>
|