ijuanes/GestionTablets
ijuanes/GestionTablets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add corporate logo and update colors to Cobalt Blue, Tiger Orange, Emerald Green

Browse source 
- 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
This commit is contained in:
ijuanes 2026-06-20 12:40:00 +01:00
parent c23304052a
commit 8c1d12a5c4
3 changed files with 225 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

65
templates/base.html
View file

@ -24,7 +24,7 @@
height: 20px;
border: 3px solid rgba(0,0,0,.3);
border-radius: 50%;
border-top-color: #10b981;
border-top-color: #FC6A03;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
@ -41,7 +41,7 @@
}
</style>
<!-- Tailwind config for custom colors -->
<!-- Tailwind config for custom corporate colors -->
<script>
tailwind.config = {
theme: {
@ -58,6 +58,42 @@
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',
}
}
}
@ -72,15 +108,12 @@
<!-- Container -->
<div class="min-h-screen">
<!-- Header -->
<header class="bg-primary-600 text-white shadow-lg">
<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">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
</svg>
<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>
@ -134,39 +167,39 @@
{% endwith %}
<!-- Navigation -->
<nav class="bg-primary-600 rounded-lg shadow-md mb-6" aria-label="Main 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-primary-700 transition-colors whitespace-nowrap">
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-primary-700 transition-colors whitespace-nowrap">
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-primary-700 transition-colors whitespace-nowrap">
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-primary-700 transition-colors whitespace-nowrap">
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-primary-700 transition-colors whitespace-nowrap">
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-primary-700 transition-colors whitespace-nowrap">
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-primary-700 transition-colors whitespace-nowrap">
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-primary-700 transition-colors whitespace-nowrap">
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>