Spaces:
Running
Running
File size: 12,327 Bytes
277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 277094c 40c6147 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 |
<!DOCTYPE html>
<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>
|