Skip to content

Commit

Permalink
Add Register
Browse files Browse the repository at this point in the history
  • Loading branch information
@JesusHT
JesusHT committed Sep 24, 2022
1 parent f5b8a08 commit f87f7ba
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 106 deletions.
126 changes: 64 additions & 62 deletions public/js/nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,78 +4,80 @@ var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
if(animating) return false;
animating = true;
if(animating) return false;
animating = true;

current_fs = $(this).parent();
next_fs = $(this).parent().next();
current_fs = $(this).parent();
next_fs = $(this).parent().next();

//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
//activate next step on progressbar using the index of next_fs
$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");

//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
//show the next fieldset
next_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale current_fs down to 80%
scale = 1 - (1 - now) * 0.2;
//2. bring next_fs from the right(50%)
left = (now * 50)+"%";
//3. increase opacity of next_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({
'transform': 'scale('+scale+')',
'position': 'absolute'
});
next_fs.css({'left': left, 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});

$(".previous").click(function(){
if(animating) return false;
animating = true;
if(animating) return false;
animating = true;

current_fs = $(this).parent();
previous_fs = $(this).parent().prev();
current_fs = $(this).parent();
previous_fs = $(this).parent().prev();

//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
//de-activate current step on progressbar
$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");

//show the previous fieldset
previous_fs.show();
//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
//show the previous fieldset
previous_fs.show();

//hide the current fieldset with style
current_fs.animate({opacity: 0}, {
step: function(now, mx) {
//as the opacity of current_fs reduces to 0 - stored in "now"
//1. scale previous_fs from 80% to 100%
scale = 0.8 + (1 - now) * 0.2;
//2. take current_fs to the right(50%) - from 0%
left = ((1-now) * 50)+"%";
//3. increase opacity of previous_fs to 1 as it moves in
opacity = 1 - now;
current_fs.css({'left': left});
previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
},
duration: 800,
complete: function(){
current_fs.hide();
animating = false;
},
//this comes from the custom easing plugin
easing: 'easeInOutBack'
});
});

$(".submit").click(function(){
return false;
console.log("Si funciono xd");
return false;
})
3 changes: 0 additions & 3 deletions views/header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@
Inicio
</span>
</a>

</li>
<li class="has-subnav">
<a href="<?php echo constant('URL');?>perfil">
Expand All @@ -26,7 +25,6 @@
Perfil
</span>
</a>

</li>
<li class="has-subnav">
<a href="<?php echo constant('URL');?>consulta">
Expand All @@ -35,7 +33,6 @@
Consulta
</span>
</a>

</li>
<li class="has-subnav">
<a href="<?php echo constant('URL');?>nuevo">
Expand Down
81 changes: 40 additions & 41 deletions views/nuevo/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,48 +11,47 @@
<?php require 'views/header.php'; ?>

<div class="">

<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Datos personales</li>
<li>Domicilio</li>
<li>Contacto</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Registro De Clientes</h2>
<h3 class="fs-subtitle">Campos Obligatorios!</h3>
<input type="text" name="inp_nombreCompleto" id="inp_nombreCompleto" class="form-control" required placeholder="Nombre Completo">
<input type="number" name="inp_edad" id="inp_edad" class="form-control" required placeholder="Edad">
<input type="date" name="inp_fechaNacimiento" id="inp_fechaNacimiento" class="form-control" required placeholder="Fecha de nacimiento">
<input type="text" name="inp_curp" id="inp_curp" class="form-control" required placeholder="CURP">
<label for="">Foto del Cliente</label>
<input type="file" name="featured" id="featured" class="form-control" required accept="image/*" class="form-control" >
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Domicilio</h2>
<h3 class="fs-subtitle">Campos Obligatorios!</h3>
<input type="text" name="inp_domicilio" id="inp_domicilio" class="form-control" required placeholder="Domicilio">
<input type="text" name="inp_codigoPostal" id="inp_codigoPostal" class="form-control" required placeholder="Codigo postal">
<input type="text" name="inp_municipio" id="inp_municipio" class="form-control" required placeholder="Municipio">
<input type="text" name="inp_pais" id="inp_pais" class="form-control" required placeholder="Pais">
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
<h2 class="fs-title">Contacto</h2>
<h3 class="fs-subtitle">Campos Obligatorios!</h3>
<input type="number" name="inp_numeroTelefonico" id="inp_numeroTelefonico" class="form-control" required placeholder="Numero de Telefono">
<input type="text" name="inp_email" id="inp_email" class="form-control" required placeholder="Correo electronico">
<input type="text" name="inp_contraseña" id="inp_contraseña" class="form-control" required placeholder="Contraseña">
<input type="text" name="inp_contraseña2" id="inp_contraseña2" class="form-control" required placeholder="Confirmar Contraseña">
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Datos personales</li>
<li>Domicilio</li>
<li>Contacto</li>
</ul>
<!-- fieldsets -->
<fieldset>
<h2 class="fs-title">Registro De Clientes</h2>
<h3 class="fs-subtitle">Campos Obligatorios!</h3>
<input type="text" name="inp_nombreCompleto" id="inp_nombreCompleto" class="form-control" required placeholder="Nombre Completo">
<input type="number" name="inp_edad" id="inp_edad" class="form-control" required placeholder="Edad">
<input type="date" name="inp_fechaNacimiento" id="inp_fechaNacimiento" class="form-control" required placeholder="Fecha de nacimiento">
<input type="text" name="inp_curp" id="inp_curp" class="form-control" required placeholder="CURP">
<label for="">Foto del Cliente</label>
<input type="file" name="featured" id="featured" class="form-control" required accept="image/*" class="form-control" >
<input type="button" name="next" class="next action-button" value="Next">
</fieldset>
<fieldset>
<h2 class="fs-title">Domicilio</h2>
<h3 class="fs-subtitle">Campos Obligatorios!</h3>
<input type="text" name="inp_domicilio" id="inp_domicilio" class="form-control" required placeholder="Domicilio">
<input type="text" name="inp_codigoPostal" id="inp_codigoPostal" class="form-control" required placeholder="Codigo postal">
<input type="text" name="inp_municipio" id="inp_municipio" class="form-control" required placeholder="Municipio">
<input type="text" name="inp_pais" id="inp_pais" class="form-control" required placeholder="Pais">
<input type="button" name="previous" class="previous action-button" value="Previous">
<input type="button" name="next" class="next action-button" value="Next">
</fieldset>
<fieldset>
<h2 class="fs-title">Contacto</h2>
<h3 class="fs-subtitle">Campos Obligatorios!</h3>
<input type="number" name="inp_numeroTelefonico" id="inp_numeroTelefonico" class="form-control" required placeholder="Numero de Telefono">
<input type="text" name="inp_email" id="inp_email" class="form-control" required placeholder="Correo electronico">
<input type="text" name="inp_contraseña" id="inp_contraseña" class="form-control" required placeholder="Contraseña">
<input type="text" name="inp_contraseña2" id="inp_contraseña2" class="form-control" required placeholder="Confirmar Contraseña">
<input type="button" name="previous" class="previous action-button" value="Previous">
<input type="submit" name="submit" class="submit action-button" value="Submit">
</fieldset>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
Expand Down

0 comments on commit f87f7ba

Please sign in to comment.