Vista Escaner y Agregar equipo agregados
This commit is contained in:
jls846
@@ -0,0 +1,10 @@
|
||||
|
||||
// Colores
|
||||
$color-primary: #003e79;
|
||||
$color-secondary: #fab403;
|
||||
$color-background: #f5f5f7;
|
||||
$color-text: #000000;
|
||||
|
||||
// Tipografía
|
||||
$font-primary: "Inter", sans-serif;
|
||||
$font-titles: "Montserrat", sans-serif;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@import "variables";
|
||||
|
||||
html {
|
||||
font-size: 62.5%;
|
||||
box-sizing: border-box;
|
||||
@@ -16,13 +18,14 @@ html {
|
||||
body {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
background-color: #f5f5f7;
|
||||
font-family: "Inter", sans-serif;
|
||||
background-color: $color-background;
|
||||
font-family: $font-primary;
|
||||
font-style: normal;
|
||||
font-size: 2rem;
|
||||
font-optical-sizing: auto;
|
||||
min-height: 100dvh;
|
||||
width: 100vw;
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -31,10 +34,14 @@ p {
|
||||
}
|
||||
|
||||
a {
|
||||
color: #003e79;
|
||||
color: $color-primary;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
margin: 10px 5px;
|
||||
|
||||
&:hover {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -42,7 +49,7 @@ h2,
|
||||
h3 {
|
||||
margin: 0 0 5rem 0;
|
||||
font-weight: 600;
|
||||
font-family: "Montserrat", sans-serif; /* 👈 Títulos con Montserrat */
|
||||
font-family: $font-titles;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -63,10 +63,9 @@
|
||||
position: absolute;
|
||||
flex-direction: column;
|
||||
min-width: 200px;
|
||||
max-width: 300px; /* Ajusta según tu diseño */
|
||||
max-width: 300px;
|
||||
left: 0;
|
||||
background-color: #003e79;
|
||||
transition: color 0.3s ease;
|
||||
transition: opacity 0.4s ease, max-height 0.4s ease;
|
||||
}
|
||||
|
||||
@@ -74,15 +73,6 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.subMenu.open ul {
|
||||
display: flex;
|
||||
color: rgba(0, 61, 121, 1);
|
||||
}
|
||||
|
||||
.subMenu ul:hover {
|
||||
color: #5b8cc9;
|
||||
}
|
||||
|
||||
.subMenu:hover ul {
|
||||
opacity: 1;
|
||||
max-height: 500px;
|
||||
@@ -106,11 +96,6 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.containerLinks {
|
||||
padding: 0 !important;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -121,11 +106,28 @@
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody {
|
||||
font-size: 1.25rem;
|
||||
/* Estilo del botón de cierre de sesión */
|
||||
.logout-button {
|
||||
background-color: #ff4d4d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
font-size: 1.2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
|
||||
&:hover {
|
||||
background-color: #e63939;
|
||||
}
|
||||
}
|
||||
|
||||
/* ✅ Ajustes para móvil */
|
||||
@media (max-width: 800px) {
|
||||
.menuToggle {
|
||||
display: flex;
|
||||
@@ -133,18 +135,12 @@ tbody {
|
||||
align-items: end;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.barNavigation {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.menuToggle.center {
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.barNavigation {
|
||||
font-size: 15px;
|
||||
display: block;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.barNavigation ul {
|
||||
@@ -156,10 +152,11 @@ tbody {
|
||||
display: none;
|
||||
z-index: 1;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.barNavigation {
|
||||
padding: 0;
|
||||
.barNavigation ul.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.barNavigation li:hover {
|
||||
@@ -176,6 +173,14 @@ tbody {
|
||||
background-color: rgb(1, 92, 184);
|
||||
}
|
||||
|
||||
|
||||
.logout-button {
|
||||
margin-top: 10px;
|
||||
font-size: 1rem;
|
||||
padding: 6px 12px;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
thead,
|
||||
tbody {
|
||||
font-size: 1rem;
|
||||
|
||||
@@ -0,0 +1,159 @@
|
||||
.agregarEquipoContainer {
|
||||
background-color: #ffffff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
|
||||
.innerContainer {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 1rem;
|
||||
text-align: center;
|
||||
color: #0056b3;
|
||||
margin-bottom: 20px;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
.equipoForm {
|
||||
display: flex;
|
||||
gap: 30px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
|
||||
.formGroup {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc; /* Borde azul como en la imagen */
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s ease;
|
||||
height: 40px;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: #007bff;
|
||||
box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
textarea.textAreaLarge {
|
||||
height: auto;
|
||||
min-height: 80px;
|
||||
max-height: 150px;
|
||||
resize: none;
|
||||
padding: 12px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
select {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
background-size: 12px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.formActions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
|
||||
.btnGuardar {
|
||||
background-color: #ffb700;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background-color: #ffcc33;
|
||||
}
|
||||
}
|
||||
|
||||
.btnCancelar {
|
||||
background-color: #0056b3;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background-color: #004494;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive: en móvil, una columna */
|
||||
@media (max-width: 768px) {
|
||||
.agregarEquipoContainer .innerContainer {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.equipoForm {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
|
||||
.column {
|
||||
flex: 1 1 100%;
|
||||
min-width: auto;
|
||||
|
||||
.formGroup {
|
||||
input,
|
||||
select {
|
||||
width: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.formActions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
font-size: 18px;
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
.dashboard-container {
|
||||
max-width: 900px;
|
||||
margin: 50px auto;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #004aad; // azul marino
|
||||
font-size: 2rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
background-color: #d4af37; // dorado
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #b5952e;
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
flex: 1;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.search-section, .scanner-section, .equipos-section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.search-section input, .search-section button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.scanner-section video {
|
||||
border: 2px solid #004aad;
|
||||
border-radius: 10px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.equipos-section ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.equipos-section li {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 15px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ccc;
|
||||
margin-bottom: 10px;
|
||||
background: white;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.equipos-section li:hover {
|
||||
background: #e6f0ff;
|
||||
}
|
||||
|
||||
.estado-disponible {
|
||||
color: green;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.estado-reparacion {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -0,0 +1,133 @@
|
||||
.dashboardContainer {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 24px;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.scanView {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30px 20px;
|
||||
gap: 20px;
|
||||
|
||||
h3 {
|
||||
font-size: 16px;
|
||||
font-weight:500;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scannerFrame {
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
height: 300px;
|
||||
border: 2px solid #0056b3;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f9f9f9;
|
||||
font-size: 80px;
|
||||
color: #000;
|
||||
img{
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.scanButton {
|
||||
background-color: #ffb700;
|
||||
color: #000;
|
||||
border: none;
|
||||
padding: 10px 24px;
|
||||
border-radius: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
color:#003E79 ;
|
||||
&:hover {
|
||||
background-color: #ffcc33;
|
||||
}
|
||||
}
|
||||
|
||||
.searchBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 80%;
|
||||
max-width: 400px;
|
||||
border: 2px solid #0056b3;
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 16px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.searchButton {
|
||||
background-color: #0056b3;
|
||||
color: white;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
padding: 0 5px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
margin-right: 10px;
|
||||
display: flex; // ← Activa Flexbox
|
||||
align-items: center; // ← Centra verticalmente
|
||||
justify-content: center; // ← Centra horizontalmente
|
||||
width: 36px; // ← Opcional: da un ancho fijo para que sea cuadrado
|
||||
height: 36px; // ← Opcional: altura igual al ancho
|
||||
|
||||
&:hover {
|
||||
background-color: #004494;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 20px; // ← Ajusta el tamaño del icono
|
||||
height: auto; // ← Mantiene proporción
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user