Spaces:
Running
Running
| <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Gesti贸n de Ingresos y Gastos</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| animation: { | |
| 'fade-in': 'fadeIn 0.5s ease-in', | |
| 'slide-up': 'slideUp 0.3s ease-out' | |
| }, | |
| keyframes: { | |
| fadeIn: { | |
| '0%': { opacity: '0', transform: 'translateY(10px)' }, | |
| '100%': { opacity: '1', transform: 'translateY(0)' } | |
| }, | |
| slideUp: { | |
| '0%': { transform: 'translateY(20px)', opacity: '0' }, | |
| '100%': { transform: 'translateY(0)', opacity: '1' } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-gradient-to-br from-indigo-900 via-purple-900 to-indigo-800 min-h-screen text-white"> | |
| <!-- Background Pattern --> | |
| <div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%239C92AC" fill-opacity="0.05"%3E%3Ccircle cx="30" cy="30" r="1"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30"></div> | |
| <div class="relative flex items-center justify-center min-h-screen p-4"> | |
| <div class="bg-white/10 backdrop-blur-lg border border-white/20 p-8 rounded-2xl shadow-2xl w-full max-w-lg animate-fade-in"> | |
| <!-- Header with Icon --> | |
| <div class="text-center mb-8"> | |
| <div class="inline-flex items-center justify-center w-16 h-16 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-full mb-4 shadow-lg"> | |
| <svg class="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path> | |
| </svg> | |
| </div> | |
| <h1 class="text-3xl font-bold bg-gradient-to-r from-white to-indigo-200 bg-clip-text text-transparent mb-2"> | |
| Gesti贸n Financiera | |
| </h1> | |
| <p class="text-indigo-200 text-sm">Registra tus transacciones de forma f谩cil y r谩pida</p> | |
| </div> | |
| <!-- Contenedor de mensajes flash --> | |
| <div id="mensaje" aria-live="polite" class="mb-6"></div> | |
| <form id="transaccion-form" method="POST" class="space-y-6" onsubmit="mostrarSpinner(event)"> | |
| <!-- Usuario --> | |
| <div class="group"> | |
| <label for="usuario" class="block text-sm font-semibold mb-2 text-indigo-200 group-focus-within:text-white transition-colors"> | |
| <svg class="inline w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> | |
| </svg> | |
| Usuario | |
| </label> | |
| <div class="relative"> | |
| <select id="usuario" name="usuario" required | |
| class="w-full p-4 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition-all duration-300 hover:bg-white/15 appearance-none cursor-pointer"> | |
| <option value="" class="bg-indigo-900 text-white">Selecciona un usuario</option> | |
| </select> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none"> | |
| <svg class="w-5 h-5 text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tipo --> | |
| <div class="group"> | |
| <label for="tipo" class="block text-sm font-semibold mb-2 text-indigo-200 group-focus-within:text-white transition-colors"> | |
| <svg class="inline w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path> | |
| </svg> | |
| Tipo de Transacci贸n | |
| </label> | |
| <div class="relative"> | |
| <select id="tipo" name="tipo" required onchange="cargarCategorias()" | |
| class="w-full p-4 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition-all duration-300 hover:bg-white/15 appearance-none cursor-pointer"> | |
| <option value="" class="bg-indigo-900 text-white">Selecciona un tipo</option> | |
| </select> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none"> | |
| <svg class="w-5 h-5 text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Categor铆a --> | |
| <div class="group"> | |
| <label for="categoria" class="block text-sm font-semibold mb-2 text-indigo-200 group-focus-within:text-white transition-colors"> | |
| <svg class="inline w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path> | |
| </svg> | |
| Categor铆a | |
| </label> | |
| <div class="relative"> | |
| <select id="categoria" name="categoria" required onchange="cargarSubcategorias()" | |
| class="w-full p-4 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 text-white focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition-all duration-300 hover:bg-white/15 appearance-none cursor-pointer"> | |
| <option value="" class="bg-indigo-900 text-white">Selecciona una categor铆a</option> | |
| </select> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-4 pointer-events-none"> | |
| <svg class="w-5 h-5 text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Monto --> | |
| <div class="group"> | |
| <label for="monto" class="block text-sm font-semibold mb-2 text-indigo-200 group-focus-within:text-white transition-colors"> | |
| <svg class="inline w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1"></path> | |
| </svg> | |
| Monto | |
| </label> | |
| <div class="relative"> | |
| <div class="flex items-center bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl focus-within:ring-2 focus-within:ring-indigo-400 focus-within:border-transparent transition-all duration-300 hover:bg-white/15"> | |
| <span class="px-4 text-indigo-200 font-bold text-lg">S/.</span> | |
| <input type="number" id="monto" name="monto" step="0.01" min="0.01" value="" required | |
| placeholder="0.00" | |
| class="w-full p-4 rounded-r-xl bg-transparent text-white placeholder-indigo-300 focus:outline-none text-lg font-medium"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Descripci贸n --> | |
| <div class="group"> | |
| <label for="descripcion" class="block text-sm font-semibold mb-2 text-indigo-200 group-focus-within:text-white transition-colors"> | |
| <svg class="inline w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path> | |
| </svg> | |
| Descripci贸n | |
| </label> | |
| <textarea id="descripcion" name="descripcion" rows="4" placeholder="Describe tu transacci贸n..." | |
| class="w-full p-4 rounded-xl bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-indigo-300 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:border-transparent transition-all duration-300 hover:bg-white/15 resize-none"></textarea> | |
| </div> | |
| <!-- Bot贸n de env铆o --> | |
| <div class="pt-4"> | |
| <button type="submit" | |
| class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-bold py-4 px-6 rounded-xl shadow-lg transform transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-4 focus:ring-indigo-400 focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed"> | |
| <span class="flex items-center justify-center"> | |
| <svg class="w-5 h-5 mr-2" 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> | |
| Guardar Transacci贸n | |
| </span> | |
| </button> | |
| </div> | |
| </form> | |
| <!-- Spinner de carga mejorado --> | |
| <div id="loading" class="hidden"> | |
| <div class="flex flex-col items-center justify-center py-8"> | |
| <div class="relative"> | |
| <div class="w-12 h-12 border-4 border-indigo-200 border-t-indigo-500 rounded-full animate-spin"></div> | |
| <div class="w-12 h-12 border-4 border-transparent border-t-purple-400 rounded-full animate-spin absolute top-0 left-0" style="animation-direction: reverse; animation-duration: 0.8s;"></div> | |
| </div> | |
| <p class="mt-4 text-indigo-200 font-medium animate-pulse">Procesando transacci贸n...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="scripts.js"></script> | |
| </body> | |
| </html> | |