Skip to content

Commit fff1f4a

Browse files
maxcz6maxcz6
authored
Add files via upload
vercion 1 de repuesto
1 parent 895e87e commit fff1f4a

6 files changed

Lines changed: 3407 additions & 0 deletions

File tree

‎cssinit.css‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
:root {
2+
--dorado: #FFD700;
3+
--azul-medianoche: #1A2B3C;
4+
--gris-plata: #C0C0C0;
5+
--purpura: #8A2BE2;
6+
--blanco: #F8F8F8;
7+
}
8+
9+
body {
10+
font-family: 'Segoe UI', Arial, sans-serif;
11+
margin: 0;
12+
padding: 2rem;
13+
background: var(--azul-medianoche);
14+
color: var(--blanco);
15+
min-height: 100vh;
16+
}
17+
18+
h1, h2 {
19+
text-align: center;
20+
color: var(--dorado);
21+
text-transform: uppercase;
22+
letter-spacing: 2px;
23+
text-shadow: 0 2px 4px rgba(0,0,0,0.2);
24+
}
25+
26+
form {
27+
background: linear-gradient(145deg, rgba(26,43,60,0.9), rgba(26,43,60,0.7));
28+
padding: 2rem;
29+
margin: 2rem auto;
30+
border-radius: 15px;
31+
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
32+
backdrop-filter: blur(10px);
33+
border: 1px solid rgba(255,215,0,0.1);
34+
max-width: 500px;
35+
transition: transform 0.3s ease;
36+
}
37+
38+
form:hover {
39+
transform: translateY(-5px);
40+
}
41+
42+
input, select, button {
43+
width: 100%;
44+
padding: 12px;
45+
margin: 8px 0;
46+
border-radius: 8px;
47+
border: 2px solid var(--gris-plata);
48+
background: rgba(248,248,248,0.05);
49+
color: var(--blanco);
50+
transition: all 0.3s ease;
51+
}
52+
53+
input:focus, select:focus {
54+
outline: none;
55+
border-color: var(--dorado);
56+
box-shadow: 0 0 10px rgba(255,215,0,0.3);
57+
}
58+
59+
button {
60+
background: var(--purpura);
61+
color: var(--blanco);
62+
border: none;
63+
font-weight: bold;
64+
text-transform: uppercase;
65+
letter-spacing: 1px;
66+
cursor: pointer;
67+
transition: all 0.3s ease;
68+
}
69+
70+
button:hover {
71+
background: var(--dorado);
72+
box-shadow: 0 0 20px rgba(255,215,0,0.4);
73+
transform: scale(1.02);
74+
}
75+
76+
section {
77+
background: linear-gradient(145deg, rgba(26,43,60,0.9), rgba(26,43,60,0.7));
78+
padding: 2rem;
79+
margin: 2rem auto;
80+
border-radius: 15px;
81+
box-shadow: 0 8px 32px rgba(0,0,0,0.3);
82+
backdrop-filter: blur(10px);
83+
border: 1px solid rgba(255,215,0,0.1);
84+
max-width: 1200px;
85+
}
86+
87+
table {
88+
width: 100%;
89+
border-collapse: separate;
90+
border-spacing: 0 8px;
91+
margin-top: 20px;
92+
}
93+
94+
th {
95+
background: var(--azul-medianoche);
96+
color: var(--dorado);
97+
padding: 15px;
98+
text-align: left;
99+
text-transform: uppercase;
100+
font-size: 0.9em;
101+
letter-spacing: 1px;
102+
}
103+
104+
td {
105+
background: rgba(248,248,248,0.05);
106+
padding: 15px;
107+
color: var(--blanco);
108+
border-top: 1px solid rgba(255,215,0,0.1);
109+
border-bottom: 1px solid rgba(255,215,0,0.1);
110+
transition: all 0.3s ease;
111+
}
112+
113+
tr:hover td {
114+
background: rgba(248,248,248,0.1);
115+
transform: scale(1.01);
116+
}
117+
118+
td:first-child {
119+
border-left: 1px solid rgba(255,215,0,0.1);
120+
border-top-left-radius: 8px;
121+
border-bottom-left-radius: 8px;
122+
}
123+
124+
td:last-child {
125+
border-right: 1px solid rgba(255,215,0,0.1);
126+
border-top-right-radius: 8px;
127+
border-bottom-right-radius: 8px;
128+
}
129+
130+
/* Estilos para los botones de acción en la tabla */
131+
td button {
132+
width: auto;
133+
padding: 8px 16px;
134+
margin: 0 4px;
135+
font-size: 1em;
136+
background: transparent;
137+
border: 1px solid var(--purpura);
138+
}
139+
140+
td button:hover {
141+
background: var(--purpura);
142+
border-color: var(--purpura);
143+
}
144+
145+
/* Animaciones y efectos adicionales */
146+
@keyframes fadeIn {
147+
from { opacity: 0; transform: translateY(20px); }
148+
to { opacity: 1; transform: translateY(0); }
149+
}
150+
151+
form, section {
152+
animation: fadeIn 0.5s ease-out;
153+
}
154+
155+
/* Estilos para mensajes de alerta personalizados */
156+
.alert {
157+
padding: 15px;
158+
margin: 10px 0;
159+
border-radius: 8px;
160+
background: rgba(138,43,226,0.2);
161+
border: 1px solid var(--purpura);
162+
color: var(--blanco);
163+
text-align: center;
164+
}
165+
166+
/* Agregar al final del archivo CSS existente */
167+
168+
/* Diseño responsivo */
169+
@media screen and (max-width: 1200px) {
170+
section {
171+
margin: 1rem;
172+
padding: 1rem;
173+
}
174+
175+
table {
176+
font-size: 0.9em;
177+
}
178+
}
179+
180+
@media screen and (max-width: 768px) {
181+
body {
182+
padding: 1rem;
183+
}
184+
185+
form {
186+
margin: 1rem auto;
187+
padding: 1.5rem;
188+
}
189+
190+
table {
191+
display: block;
192+
overflow-x: auto;
193+
white-space: nowrap;
194+
}
195+
196+
td button {
197+
padding: 6px 12px;
198+
font-size: 0.9em;
199+
}
200+
}
201+
202+
@media screen and (max-width: 480px) {
203+
h1 {
204+
font-size: 1.8em;
205+
}
206+
207+
h2 {
208+
font-size: 1.4em;
209+
}
210+
211+
form {
212+
padding: 1rem;
213+
}
214+
215+
input, select, button {
216+
padding: 10px;
217+
font-size: 0.9em;
218+
}
219+
220+
td, th {
221+
padding: 10px;
222+
font-size: 0.85em;
223+
}
224+
225+
.alert {
226+
padding: 10px;
227+
font-size: 0.9em;
228+
}
229+
}

‎index.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!DOCTYPE html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Gestión de Inventario</title>
7+
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
8+
<link rel="stylesheet" href="cssinit.css">
9+
</head>
10+
<body>
11+
<h1>Gestión de Inventario</h1>
12+
13+
<form id="formAgregar">
14+
<h2>Agregar Producto</h2>
15+
<input type="text" id="producto" placeholder="Producto" required />
16+
<input type="number" id="stock" placeholder="Stock" min="1" required />
17+
<select id="categoria" required>
18+
<option value="">Selecciona una categoría</option>
19+
<option value="Alimentos">Alimentos</option>
20+
<option value="Ropa">Ropa</option>
21+
<option value="Tecnología">Tecnología</option>
22+
<option value="Hogar">Hogar</option>
23+
<option value="Otros">Otros</option>
24+
</select>
25+
<input type="number" id="precio_unit" placeholder="Precio Unitario" step="0.01" min="0" required />
26+
<button type="submit">Agregar</button>
27+
</form>
28+
29+
<form id="formEliminar">
30+
<h2>Eliminar Producto</h2>
31+
<input type="text" id="nombreEliminar" placeholder="Nombre del producto" required />
32+
<button type="submit">Eliminar</button>
33+
</form>
34+
35+
<section>
36+
<h2>Inventario Completo</h2>
37+
<table>
38+
<thead>
39+
<tr>
40+
<th>ID (ofuscado)</th>
41+
<th>Producto</th>
42+
<th>Stock</th>
43+
<th>Categoría</th>
44+
<th>Precio Unitario</th>
45+
<th>Valor Total</th>
46+
<th>Acciones</th>
47+
</tr>
48+
</thead>
49+
<tbody id="tablaInventario"></tbody>
50+
</table>
51+
52+
</section>
53+
54+
<script src="jsinit.js"></script>
55+
</body>
56+
</html>

0 commit comments

Comments
 (0)