| Server IP : 74.208.127.88 / Your IP : 3.137.172.252 Web Server : Apache/2.4.41 (Ubuntu) System : Linux ubuntu 5.4.0-163-generic #180-Ubuntu SMP Tue Sep 5 13:21:23 UTC 2023 x86_64 User : www-data ( 33) PHP Version : 7.4.3-4ubuntu2.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : ON Directory : /var/www/html/t/sae/appsae/core/app/view/ |
Upload File : |
<style>
* {
box-sizing: border-box;
}
body {
font-family: 'Roboto', sans-serif;
background: #E5E5E5;
}
.row {
width: 100%;
margin: auto;
padding: 20px;
}
.formulario {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.formulario__label {
display: block;
font-weight: 700;
padding: 10px;
cursor: pointer;
}
.formulario__grupo-input {
position: relative;
}
.formulario__input {
width: 100%;
background: #B6DED4;
border: 3px solid transparent;
border-radius: 3px;
height: 45px;
line-height: 45px;
padding: 0 40px 0 10px;
transition: .3s ease all;
}
.formulario__input:focus {
border: 3px solid #0075FF;
outline: none;
box-shadow: 3px 0px 30px rgba(163,163,163, 0.4);
}
.formulario__input-error {
font-size: 12px;
margin-bottom: 0;
display: none;
}
.formulario__input-error2 {
font-size: 12px;
margin-bottom: 0;
display: none;
}
.formulario__input-error-activo {
display: block;
}
.formulario__validacion-estado {
position: absolute;
right: 10px;
bottom: 15px;
z-index: 100;
font-size: 16px;
opacity: 0;
}
.formulario__checkbox {
margin-right: 10px;
}
.formulario__grupo-terminos,
.formulario__mensaje,
.formulario__grupo-btn-enviar {
grid-column: span 2;
}
.formulario__mensaje {
height: 45px;
line-height: 45px;
background: #F66060;
padding: 0 15px;
border-radius: 3px;
display: none;
}
.formulario__mensaje-activo {
display: block;
}
.formulario__mensaje p {
margin: 0;
}
.formulario__grupo-btn-enviar {
display: flex;
flex-direction: column;
align-items: center;
}
.formulario__btn {
height: 45px;
line-height: 45px;
width: 30%;
background: #000;
color: #fff;
font-weight: bold;
border: none;
border-radius: 3px;
cursor: pointer;
transition: .1s ease all;
}
.formulario__btn:hover {
box-shadow: 3px 0px 30px rgba(163,163,163, 1);
}
.formulario__mensaje-exito {
font-size: 14px;
color: #119200;
display: none;
}
.formulario__mensaje-exito-activo {
display: block;
}
/* ----- ----- Estilos para Validacion ----- ----- */
.formulario__grupo-correcto .formulario__validacion-estado {
color: #1ed12d;
opacity: 1;
}
.formulario__grupo-incorrecto .formulario__label {
color: #bb2929;
}
.formulario__grupo-incorrecto .formulario__validacion-estado {
color: #bb2929;
opacity: 1;
}
.formulario__grupo-incorrecto .formulario__input {
border: 3px solid #bb2929;
}
/* ----- ----- Mediaqueries ----- ----- */
@media screen and (max-width: 800px) {
.formulario {
grid-template-columns: 1fr;
}
.formulario__grupo-terminos,
.formulario__mensaje,
.formulario__grupo-btn-enviar {
grid-column: 1;
}
.formulario__btn {
width: 100%;
}
}
</style>
<nav class = "navbar navbar-inverse">
<div class = "container-fluid">
<a href = "#" class = "navbar-brand">Registro Producto Nuevo</a>
</div>
</nav>
<div class="box box-primary">
<div class="row">
<form action="" class="formulario" id="formulario" autocomplete="off">
<!-- Grupo: Usuario -->
<div class="formulario__grupo" id="grupo__usuario">
<label for="usuario" class="formulario__label">Codigo Barras</label>
<div class="formulario__grupo-input">
<input type="text" class="formulario__input" name="usuario" id="usuario" placeholder="C001">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">El codigo tiene que ser de 4 a 11 dígitos y solo puede contener numeros, letras y guion bajo.</p>
<p class="formulario__input-error2">Codigo Existente.</p>
</div>
<!-- Grupo: Nombre -->
<div class="formulario__grupo" id="grupo__nombre">
<label for="nombre" class="formulario__label">Nombre Producto</label>
<div class="formulario__grupo-input">
<input type="text" class="formulario__input" name="nombre" id="nombre" placeholder="CREPE">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">El usuario tiene que ser de 5 a 50 dígitos y solo puede contener numeros, letras y guion bajo.</p>
</div>
<!-- Grupo: cantidad de prod por caja -->
<div class="formulario__grupo" id="grupo_empaque">
<label for="password" class="formulario__label">multiplo(cajas)</label>
<div class="formulario__grupo-input">
<input type="number" class="formulario__input" name="empaque" id="empaque">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">El precio tiene que ser de 1 a 12 dígitos.</p>
</div>
<!-- Grupo: precio empaque -->
<div class="formulario__grupo" id="grupo__password">
<label for="password" class="formulario__label">Precio Caja</label>
<div class="formulario__grupo-input">
<input type="number" class="formulario__input" name="price_empaque" id="price_empaque">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">El precio tiene que ser de 1 a 12 dígitos.</p>
</div>
<!-- Grupo: precio entrada -->
<div class="formulario__grupo" id="grupo__password">
<label for="password" class="formulario__label">Precio entrada</label>
<div class="formulario__grupo-input">
<input type="text" class="formulario__input" name="password" id="password">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">El precio tiene que ser de 1 a 12 dígitos.</p>
</div>
<!-- Grupo: precio salida 2 -->
<div class="formulario__grupo" id="grupo__price_out">
<label for="price_out" class="formulario__label">Precio Venta</label>
<div class="formulario__grupo-input">
<input type="text" class="formulario__input" name="price_out" id="price_out">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">El precio tiene que ser de 1 a 12 dígitos.</p>
</div>
<!-- Grupo: Correo Electronico -->
<div class="formulario__grupo" id="grupo__correo">
<label for="correo" class="formulario__label">Descripcion</label>
<div class="formulario__grupo-input">
<input type="text" class="formulario__input" name="correo" id="correo" placeholder="Descripcion detallada del producto">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">la descripcion solo puede contener letras, numeros, puntos, guiones y guion bajo.</p>
</div>
<!-- Grupo: Teléfono -->
<div class="formulario__grupo" id="grupo__telefono">
<label for="telefono" class="formulario__label">Existencia Inicial</label>
<div class="formulario__grupo-input">
<input type="text" class="formulario__input" name="telefono" id="telefono" placeholder="20">
<i class="formulario__validacion-estado fas fa-times-circle"></i>
</div>
<p class="formulario__input-error">La Existencia solo puede contener numeros y el maximo son 14 dígitos.</p>
</div>
<!-- Grupo: Terminos y Condiciones -->
<div class="formulario__grupo" id="grupo__terminos">
<label class="formulario__label">
<input class="formulario__checkbox" type="checkbox" name="terminos" id="terminos">
Es inventariable
</label>
</div>
<div class="formulario__mensaje" id="formulario__mensaje">
<p><i class="fas fa-exclamation-triangle"></i> <b>Error:</b> Por favor rellena el formulario correctamente. </p>
</div>
<div class="formulario__grupo formulario__grupo-btn-enviar">
<button type="submit" class="formulario__btn" id="formulario__btn" name="formulario__btn" >Guardar Registro</button>
<p class="formulario__mensaje-exito" id="formulario__mensaje-exito">Registro Guardado Exitosamente!</p>
</div>
<div class="respuesta"></div>
</form>
</div>
</div>
<script src="js/formulario.js"></script>
<script src="https://kit.fontawesome.com/2c36e9b7b1.js" crossorigin="anonymous"></script>