8c1d12a5c4
- Add Schamann.png logo to static/ directory - Update base.html header with logo (force scaled to 40px) - Replace primary color with corporate color palette: - Cobalt Blue (#1338BE) for headers and navigation - Tiger Orange (#FC6A03) for accents and loading indicators - Emerald Green (#028A0F) for success states - Add full shade ranges (50-900) for all three colors in Tailwind config - Create docs/CORPORATE_DESIGN.md with color specifications and usage guidelines
221 lines
10 KiB
HTML
221 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="{{ language or 'en' }}">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ _('Tablet Management System') }}</title>
|
|
|
|
<!-- Tailwind CSS via CDN -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- HTMX -->
|
|
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
|
|
|
|
<!-- Custom styles -->
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
|
|
}
|
|
|
|
/* HTMX loading spinner */
|
|
.htmx-indicator {
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
border: 3px solid rgba(0,0,0,.3);
|
|
border-radius: 50%;
|
|
border-top-color: #FC6A03;
|
|
animation: spin 1s ease-in-out infinite;
|
|
}
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* Hide HTMX indicator by default */
|
|
.htmx-indicator {
|
|
opacity: 0;
|
|
transition: opacity 200ms ease-in;
|
|
}
|
|
.htmx-request .htmx-indicator {
|
|
opacity: 1;
|
|
}
|
|
</style>
|
|
|
|
<!-- Tailwind config for custom corporate colors -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#ecfdf5',
|
|
100: '#d1fae5',
|
|
200: '#a7f3d0',
|
|
300: '#6ee7b7',
|
|
400: '#34d399',
|
|
500: '#10b981',
|
|
600: '#059669',
|
|
700: '#047857',
|
|
800: '#065f46',
|
|
900: '#064e3b',
|
|
},
|
|
cobalt: {
|
|
50: '#f0f5ff',
|
|
100: '#e0eaff',
|
|
200: '#b3c6ff',
|
|
300: '#80a0ff',
|
|
400: '#4d7aff',
|
|
500: '#1338BE',
|
|
600: '#0f2a9c',
|
|
700: '#0b1f72',
|
|
800: '#081552',
|
|
900: '#060f38',
|
|
},
|
|
tiger: {
|
|
50: '#fff8f0',
|
|
100: '#ffe8d6',
|
|
200: '#ffccab',
|
|
300: '#ffae80',
|
|
400: '#ff8c55',
|
|
500: '#FC6A03',
|
|
600: '#e05a00',
|
|
700: '#b84500',
|
|
800: '#8c3300',
|
|
900: '#662500',
|
|
},
|
|
emerald: {
|
|
50: '#f0fdf4',
|
|
100: '#dcfce7',
|
|
200: '#bbf7d0',
|
|
300: '#86efac',
|
|
400: '#4ade80',
|
|
500: '#028A0F',
|
|
600: '#006b0c',
|
|
700: '#005209',
|
|
800: '#003d07',
|
|
900: '#002904',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-gray-50 text-gray-900">
|
|
<!-- Skip to main content -->
|
|
<a href="#main-content" class="sr-only focus:not-sr-only">Skip to main content</a>
|
|
|
|
<!-- Container -->
|
|
<div class="min-h-screen">
|
|
<!-- Header -->
|
|
<header class="bg-cobalt-600 text-white shadow-lg">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center justify-between h-16">
|
|
<!-- Logo / Title -->
|
|
<div class="flex items-center gap-3">
|
|
<img src="/static/Schamann.png" alt="Corporate Logo" class="h-10 w-auto object-contain" style="max-height: 40px; height: 40px !important;">
|
|
<h1 class="text-xl font-bold">{{ _('Tablet Management System') }}</h1>
|
|
</div>
|
|
|
|
<!-- Language Switcher -->
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-sm opacity-80">{{ _('Language') }}:</span>
|
|
{% for lang_code, lang_name in config['LANGUAGES'].items() %}
|
|
<a
|
|
href="?lang={{ lang_code }}"
|
|
class="px-2 py-1 text-sm rounded hover:bg-white/20 transition-colors
|
|
{% if language == lang_code %}bg-white/30 font-medium{% endif %}"
|
|
>
|
|
{{ lang_name }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Flash Messages -->
|
|
{% with messages = get_flashed_messages(with_categories=true) %}
|
|
{% if messages %}
|
|
<div class="mb-6 space-y-3">
|
|
{% for category, message in messages %}
|
|
<div class="p-4 rounded-lg
|
|
{% if category == 'success' %}bg-green-100 text-green-800
|
|
{% elif category == 'error' %}bg-red-100 text-red-800
|
|
{% elif category == 'warning' %}bg-yellow-100 text-yellow-800
|
|
{% else %}bg-blue-100 text-blue-800{% endif %}">
|
|
<div class="flex items-center gap-2">
|
|
{% if category == 'success' %}
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M5 13l4 4L19 7"></path>
|
|
</svg>
|
|
{% elif category == 'error' %}
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
|
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
{% endif %}
|
|
<span>{{ _(message) }}</span>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<!-- Navigation -->
|
|
<nav class="bg-cobalt-600 rounded-lg shadow-md mb-6" aria-label="Main navigation">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-wrap justify-center sm:justify-start gap-1 sm:gap-2 py-3">
|
|
<a href="/"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
|
{{ _('Home') }}
|
|
</a>
|
|
<a href="/add_tablet"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
|
{{ _('Add Tablet') }}
|
|
</a>
|
|
<a href="/add_user"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
|
{{ _('Add User') }}
|
|
</a>
|
|
<a href="/loan_tablet"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
|
{{ _('Loan Tablet') }}
|
|
</a>
|
|
<a href="/history"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
|
{{ _('History') }}
|
|
</a>
|
|
<a href="/user_loans"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
|
{{ _('User Loans') }}
|
|
</a>
|
|
<a href="/non_loanable_devices"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
|
{{ _('Non-Loanable Devices') }}
|
|
</a>
|
|
<a href="/project_management"
|
|
class="px-3 py-2 text-sm sm:text-base text-white rounded hover:bg-cobalt-700 transition-colors whitespace-nowrap">
|
|
{{ _('Project Management') }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Page Content -->
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="mt-12 py-6 border-t border-gray-200">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-sm text-gray-500">
|
|
<p>{{ _('Tablet Management System - Internal Tool') }}</p>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</body>
|
|
</html>
|