Damian_Aceves
/
PrestamosTecmm
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Mejora visual

main
Damian 2 months ago
parent
1ba028120d
commit
480e26b168
2 changed files with 95 additions and 67 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 160
      resources/views/layouts/dashboard.blade.php
  2. 2
      resources/views/vehiculosCrearEditar.blade.php

160
resources/views/layouts/dashboard.blade.php
View File

@ -12,47 +12,65 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<!-- En el head, después de los otros scripts -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<!-- Agregamos animate.css para más animaciones -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<style>
/* Animaciones personalizadas */
.nav-item-hover {
@apply transition-all duration-300 ease-in-out transform hover:translate-x-2;
}
.sidebar {
@apply transition-all duration-300 ease-in-out;
}
.menu-item {
@apply transition-colors duration-200 ease-in-out;
}
</style>
</head>
<body class="bg-gray-100">
<body class="bg-gray-50">
<div class="min-h-screen flex">
<!-- Sidebar -->
<aside class="bg-[#1E40AF] text-white w-64 min-h-screen px-4 py-6 hidden md:block">
<div class="flex items-center justify-center mb-8">
<span class="text-2xl font-bold">PrestamosTecmm</span>
<!-- Sidebar modernizado -->
<aside class="sidebar bg-gradient-to-b from-[#1E40AF] to-[#1E3A8A] text-white w-64 min-h-screen px-4 py-6 hidden md:block shadow-xl">
<div class="flex items-center justify-center mb-12">
<span class="text-2xl font-light tracking-wider animate__animated animate__fadeIn">PrestamosTecmm</span>
</div>
<nav>
<ul class="space-y-2">
<ul class="space-y-4">
<!-- Inicio -->
<li>
<a href="/dashboard" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-home"></i>
<span>Inicio</span>
<a href="/dashboard" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-home text-white/80"></i>
<span class="font-light">Inicio</span>
</a>
</li>
<!-- Préstamos -->
<li>
<a href="/prestamos" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-book"></i>
<span>Préstamos</span>
<a href="/prestamos" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-book text-white/80"></i>
<span class="font-light">Préstamos</span>
</a>
</li>
<!-- Usuarios -->
<li>
<a href="/usuarios" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-users"></i>
<span>Usuarios</span>
<a href="/usuarios" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-users text-white/80"></i>
<span class="font-light">Usuarios</span>
</a>
</li>
<!-- Configuración con Submenú -->
<li x-data="{ open: false }" class="relative">
<button @click="open = !open"
class="flex items-center justify-between w-full px-4 py-2 rounded hover:bg-blue-700">
class="nav-item-hover flex items-center justify-between w-full px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<div class="flex items-center space-x-2">
<i class="fas fa-cog"></i>
<span>Configuración</span>
<i class="fas fa-cog text-white/80"></i>
<span class="font-light">Configuración</span>
</div>
<i class="fas fa-chevron-down text-sm transition-transform duration-200"
:class="{ 'transform rotate-180': open }"></i>
@ -71,43 +89,43 @@
<!-- Marca -->
<li>
<a href="{{ route('marca.index') }}" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-trademark"></i>
<span>Marca</span>
<a href="{{ route('marca.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-trademark text-white/80"></i>
<span class="font-light">Marca</span>
</a>
</li>
<!-- Tipos -->
<li>
<a href="{{ route('vehiculos.index') }}" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-car"></i>
<span>Tipos de Vehiculos</span>
<a href="{{ route('vehiculos.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-car text-white/80"></i>
<span class="font-light">Tipos de Vehiculos</span>
</a>
</li>
<!-- Tipos de Licencia -->
<li>
<a href="/configuracion/licencias" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-id-card"></i>
<span>Tipos de Licencia</span>
<a href="/configuracion/licencias" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-id-card text-white/80"></i>
<span class="font-light">Tipos de Licencia</span>
</a>
</li>
<!-- Capacidad -->
<li>
<a href="/configuracion/capacidad" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-users"></i>
<span>Capacidad</span>
<a href="/configuracion/capacidad" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-users text-white/80"></i>
<span class="font-light">Capacidad</span>
</a>
</li>
<!-- Puestos -->
<li x-data="{ openPuestos: false }" class="relative">
<button @click="openPuestos = !openPuestos"
class="flex items-center justify-between w-full px-4 py-2 rounded hover:bg-blue-700">
class="nav-item-hover flex items-center justify-between w-full px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<div class="flex items-center space-x-2">
<i class="fas fa-user-tie"></i>
<span>Puestos</span>
<i class="fas fa-user-tie text-white/80"></i>
<span class="font-light">Puestos</span>
</div>
<i class="fas fa-chevron-right text-xs"
:class="{ 'transform rotate-90': openPuestos }"></i>
@ -117,21 +135,21 @@
<ul x-show="openPuestos"
class="pl-4 mt-1 space-y-1">
<li>
<a href="{{ route('docentes.index') }}" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-chalkboard-teacher"></i>
<span>Docentes</span>
<a href="{{ route('docentes.index') }}" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-chalkboard-teacher text-white/80"></i>
<span class="font-light">Docentes</span>
</a>
</li>
<li>
<a href="/configuracion/puestos/choferes" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-car"></i>
<span>Choferes</span>
<a href="/configuracion/puestos/choferes" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-car text-white/80"></i>
<span class="font-light">Choferes</span>
</a>
</li>
<li>
<a href="/configuracion/puestos/admin" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-user-shield"></i>
<span>Administradores</span>
<a href="/configuracion/puestos/admin" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-user-shield text-white/80"></i>
<span class="font-light">Administradores</span>
</a>
</li>
</ul>
@ -139,9 +157,9 @@
<!-- Estatus -->
<li>
<a href="/configuracion/estatus" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700">
<i class="fas fa-toggle-on"></i>
<span>Estatus</span>
<a href="/configuracion/estatus" class="nav-item-hover flex items-center space-x-3 px-4 py-3 rounded-lg hover:bg-white/10 backdrop-blur-sm">
<i class="fas fa-toggle-on text-white/80"></i>
<span class="font-light">Estatus</span>
</a>
</li>
</ul>
@ -151,26 +169,38 @@
</aside>
<div class="flex-1 flex flex-col">
<!-- Navbar -->
<header class="bg-white shadow">
<div class="flex items-center justify-between px-6 py-4">
<button class="md:hidden text-gray-500 hover:text-gray-700">
<!-- Navbar modernizado -->
<header class="bg-white/80 backdrop-blur-md shadow-sm">
<div class="flex items-center justify-between px-8 py-4">
<button class="md:hidden text-gray-500 hover:text-gray-700 transition-colors duration-200">
<i class="fas fa-bars text-xl"></i>
</button>
<div class="flex items-center space-x-4">
<div class="relative" x-data="{ open: false }">
<button @click="open = !open" class="flex items-center space-x-2 text-gray-700 hover:text-gray-900">
<img src="https://ui-avatars.com/api/?name={{ Auth::user()->name }}" alt="Profile" class="w-8 h-8 rounded-full">
<span>{{ Auth::user()->name }}</span>
<i class="fas fa-chevron-down"></i>
<button @click="open = !open"
class="flex items-center space-x-3 text-gray-700 hover:text-gray-900 px-4 py-2 rounded-full hover:bg-gray-100 transition-all duration-200">
<img src="https://ui-avatars.com/api/?name={{ Auth::user()->name }}"
alt="Profile"
class="w-8 h-8 rounded-full ring-2 ring-blue-500/20">
<span class="font-medium">{{ Auth::user()->name }}</span>
<i class="fas fa-chevron-down text-sm transition-transform duration-200"
:class="{ 'transform rotate-180': open }"></i>
</button>
<!-- Menú desplegable -->
<!-- Menú desplegable modernizado -->
<div x-show="open"
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="opacity-0 transform scale-95"
x-transition:enter-end="opacity-100 transform scale-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="opacity-100 transform scale-100"
x-transition:leave-end="opacity-0 transform scale-95"
@click.away="open = false"
class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1">
class="absolute right-0 mt-2 w-48 bg-white rounded-xl shadow-lg py-2 ring-1 ring-black ring-opacity-5">
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<button type="submit" class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-150">
<i class="fas fa-sign-out-alt mr-2"></i> Cerrar Sesión
</button>
</form>
@ -181,23 +211,23 @@
</header>
<!-- Main Content -->
<main class="flex-1 p-6">
<main class="flex-1 p-8 animate__animated animate__fadeIn">
@yield('content')
</main>
<!-- Footer -->
<footer class="bg-white shadow mt-auto">
<div class="max-w-7xl mx-auto py-4 px-6">
<!-- Footer modernizado -->
<footer class="bg-white/80 backdrop-blur-md shadow-sm mt-auto">
<div class="max-w-7xl mx-auto py-4 px-8">
<div class="flex justify-between items-center">
<p class="text-gray-600">&copy; 2024 PrestamosTecmm. Todos los derechos reservados.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 hover:text-gray-900">
<p class="text-gray-600 text-sm">&copy; 2024 PrestamosTecmm</p>
<div class="flex space-x-6">
<a href="#" class="text-gray-400 hover:text-[#1E40AF] transition-colors duration-200">
<i class="fab fa-facebook"></i>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900">
<a href="#" class="text-gray-400 hover:text-[#1E40AF] transition-colors duration-200">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900">
<a href="#" class="text-gray-400 hover:text-[#1E40AF] transition-colors duration-200">
<i class="fab fa-instagram"></i>
</a>
</div>

2
resources/views/vehiculosCrearEditar.blade.php
View File

@ -130,5 +130,3 @@ document.addEventListener('DOMContentLoaded', function() {
</script>
@endsection

Write Preview
Loading…
Cancel
Save