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

Mejora visual

main
Damian 4 weeks 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
Unified 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"> <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 --> <!-- En el head, después de los otros scripts -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <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> </head>
<body class="bg-gray-100"> <body class="bg-gray-50">
<div class="min-h-screen flex"> <div class="min-h-screen flex">
<!-- Sidebar --> <!-- Sidebar modernizado -->
<aside class="bg-[#1E40AF] text-white w-64 min-h-screen px-4 py-6 hidden md:block"> <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-8"> <div class="flex items-center justify-center mb-12">
<span class="text-2xl font-bold">PrestamosTecmm</span> <span class="text-2xl font-light tracking-wider animate__animated animate__fadeIn">PrestamosTecmm</span>
</div> </div>
<nav> <nav>
<ul class="space-y-2"> <ul class="space-y-4">
<!-- Inicio --> <!-- Inicio -->
<li> <li>
<a href="/dashboard" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-home text-white/80"></i>
<span>Inicio</span> <span class="font-light">Inicio</span>
</a> </a>
</li> </li>
<!-- Préstamos --> <!-- Préstamos -->
<li> <li>
<a href="/prestamos" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-book text-white/80"></i>
<span>Préstamos</span> <span class="font-light">Préstamos</span>
</a> </a>
</li> </li>
<!-- Usuarios --> <!-- Usuarios -->
<li> <li>
<a href="/usuarios" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-users text-white/80"></i>
<span>Usuarios</span> <span class="font-light">Usuarios</span>
</a> </a>
</li> </li>
<!-- Configuración con Submenú --> <!-- Configuración con Submenú -->
<li x-data="{ open: false }" class="relative"> <li x-data="{ open: false }" class="relative">
<button @click="open = !open" <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"> <div class="flex items-center space-x-2">
<i class="fas fa-cog"></i> <i class="fas fa-cog text-white/80"></i>
<span>Configuración</span> <span class="font-light">Configuración</span>
</div> </div>
<i class="fas fa-chevron-down text-sm transition-transform duration-200" <i class="fas fa-chevron-down text-sm transition-transform duration-200"
:class="{ 'transform rotate-180': open }"></i> :class="{ 'transform rotate-180': open }"></i>
@ -71,43 +89,43 @@
<!-- Marca --> <!-- Marca -->
<li> <li>
<a href="{{ route('marca.index') }}" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-trademark text-white/80"></i>
<span>Marca</span> <span class="font-light">Marca</span>
</a> </a>
</li> </li>
<!-- Tipos --> <!-- Tipos -->
<li> <li>
<a href="{{ route('vehiculos.index') }}" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-car text-white/80"></i>
<span>Tipos de Vehiculos</span> <span class="font-light">Tipos de Vehiculos</span>
</a> </a>
</li> </li>
<!-- Tipos de Licencia --> <!-- Tipos de Licencia -->
<li> <li>
<a href="/configuracion/licencias" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-id-card text-white/80"></i>
<span>Tipos de Licencia</span> <span class="font-light">Tipos de Licencia</span>
</a> </a>
</li> </li>
<!-- Capacidad --> <!-- Capacidad -->
<li> <li>
<a href="/configuracion/capacidad" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-users text-white/80"></i>
<span>Capacidad</span> <span class="font-light">Capacidad</span>
</a> </a>
</li> </li>
<!-- Puestos --> <!-- Puestos -->
<li x-data="{ openPuestos: false }" class="relative"> <li x-data="{ openPuestos: false }" class="relative">
<button @click="openPuestos = !openPuestos" <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"> <div class="flex items-center space-x-2">
<i class="fas fa-user-tie"></i> <i class="fas fa-user-tie text-white/80"></i>
<span>Puestos</span> <span class="font-light">Puestos</span>
</div> </div>
<i class="fas fa-chevron-right text-xs" <i class="fas fa-chevron-right text-xs"
:class="{ 'transform rotate-90': openPuestos }"></i> :class="{ 'transform rotate-90': openPuestos }"></i>
@ -117,21 +135,21 @@
<ul x-show="openPuestos" <ul x-show="openPuestos"
class="pl-4 mt-1 space-y-1"> class="pl-4 mt-1 space-y-1">
<li> <li>
<a href="{{ route('docentes.index') }}" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-chalkboard-teacher text-white/80"></i>
<span>Docentes</span> <span class="font-light">Docentes</span>
</a> </a>
</li> </li>
<li> <li>
<a href="/configuracion/puestos/choferes" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-car text-white/80"></i>
<span>Choferes</span> <span class="font-light">Choferes</span>
</a> </a>
</li> </li>
<li> <li>
<a href="/configuracion/puestos/admin" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-user-shield text-white/80"></i>
<span>Administradores</span> <span class="font-light">Administradores</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -139,9 +157,9 @@
<!-- Estatus --> <!-- Estatus -->
<li> <li>
<a href="/configuracion/estatus" class="flex items-center space-x-2 px-4 py-2 rounded hover:bg-blue-700"> <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"></i> <i class="fas fa-toggle-on text-white/80"></i>
<span>Estatus</span> <span class="font-light">Estatus</span>
</a> </a>
</li> </li>
</ul> </ul>
@ -151,26 +169,38 @@
</aside> </aside>
<div class="flex-1 flex flex-col"> <div class="flex-1 flex flex-col">
<!-- Navbar --> <!-- Navbar modernizado -->
<header class="bg-white shadow"> <header class="bg-white/80 backdrop-blur-md shadow-sm">
<div class="flex items-center justify-between px-6 py-4"> <div class="flex items-center justify-between px-8 py-4">
<button class="md:hidden text-gray-500 hover:text-gray-700"> <button class="md:hidden text-gray-500 hover:text-gray-700 transition-colors duration-200">
<i class="fas fa-bars text-xl"></i> <i class="fas fa-bars text-xl"></i>
</button> </button>
<div class="flex items-center space-x-4"> <div class="flex items-center space-x-4">
<div class="relative" x-data="{ open: false }"> <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"> <button @click="open = !open"
<img src="https://ui-avatars.com/api/?name={{ Auth::user()->name }}" alt="Profile" class="w-8 h-8 rounded-full"> 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">
<span>{{ Auth::user()->name }}</span> <img src="https://ui-avatars.com/api/?name={{ Auth::user()->name }}"
<i class="fas fa-chevron-down"></i> 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> </button>
<!-- Menú desplegable -->
<!-- Menú desplegable modernizado -->
<div x-show="open" <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" @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') }}"> <form method="POST" action="{{ route('logout') }}">
@csrf @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 <i class="fas fa-sign-out-alt mr-2"></i> Cerrar Sesión
</button> </button>
</form> </form>
@ -181,23 +211,23 @@
</header> </header>
<!-- Main Content --> <!-- Main Content -->
<main class="flex-1 p-6"> <main class="flex-1 p-8 animate__animated animate__fadeIn">
@yield('content') @yield('content')
</main> </main>
<!-- Footer --> <!-- Footer modernizado -->
<footer class="bg-white shadow mt-auto"> <footer class="bg-white/80 backdrop-blur-md shadow-sm mt-auto">
<div class="max-w-7xl mx-auto py-4 px-6"> <div class="max-w-7xl mx-auto py-4 px-8">
<div class="flex justify-between items-center"> <div class="flex justify-between items-center">
<p class="text-gray-600">&copy; 2024 PrestamosTecmm. Todos los derechos reservados.</p> <p class="text-gray-600 text-sm">&copy; 2024 PrestamosTecmm</p>
<div class="flex space-x-4"> <div class="flex space-x-6">
<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-facebook"></i> <i class="fab fa-facebook"></i>
</a> </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> <i class="fab fa-twitter"></i>
</a> </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> <i class="fab fa-instagram"></i>
</a> </a>
</div> </div>

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

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

Write Preview
Loading…
Cancel
Save