<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse0">
<div class="row">
<div class="col-md-1"><div class="step s0">1</div></div>
<div class="col-md-11 step-text">List your Casting Call</div>
</div>
</a>
</h4>
</div>
<div id="collapse0" class="panel-collapse collapse in">
<div class="panel-body">
<div class="line-wizard l1"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11 step-text">
<div class="form-group">
<div class="input-group margin-bottom-sm col-sm-4 col-xs-12">
<span class="input-group-addon"><i class="fa fa-film fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Project Title">
</div>
<br>
<div class="input-group margin-bottom-sm col-sm-4 col-xs-12">
<span class="input-group-addon"><i class="fa fa-briefcase fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Company Name">
</div>
<br>
<div class="input-group margin-bottom-sm col-sm-4 col-xs-12">
<span class="input-group-addon"><i class="fa fa-envelope fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Email address">
</div>
<br>
<form accept-charset="UTF-8" action="" method="POST">
<textarea class="form-control counted" name="message" placeholder="Type in your message" rows="5"></textarea>
</form>
<p> </p>
<div class="control-group" id="fields">
<label class="control-label input-lg" for="field1">Role</label>
<div class="controls">
<form role="form" autocomplete="off">
<div class="entry col-sm-4 col-xs-12">
<div class="input-group">
<input class="form-control input-lg" name="fields[]" type="text" placeholder="Name of the role" />
<span class="input-group-btn">
<button class="btn btn-success btn-add btn-lg" type="button">
<span class="fa fa-plus"></span>
</button>
</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-star fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Role Type">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Salary">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-child fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Sex">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-leaf fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Age">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-globe-americas fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Ethnicity">
</div>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-square fa-fw" aria-hidden="true"></i></span>
<input class="form-control" type="text" placeholder="Email Subject">
</div>
<hr>
</div>
</form>
</div>
</div>
<br>
<div class="col-sm-12">
<small>Press <span class="fa fa-plus"></span> to add another role</small>
</div>
<!-- Sex -->
</div>
<div class="row pull-right">
<div class="col-md-1">
<div class ="step-fll-prev step-prev prev btn-primary btn" num-step="0"><i class="fa fa-angle-left text-primary" aria-hidden="true"></i></div>
</div>
<div class="col-md-1"></div>
<div class="col-md-1">
<div class ="step-fll-prev step-fll next btn-primary btn" num-step="0"><i class="fa fa-angle-right" aria-hidden="true" ></i></div>
</div>
</div>
</div>
</div><!--row-->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<div class="row">
<div class="col-md-1"><div class="step s1">2</div></div>
<div class="col-md-11 step-text">What do you want applicants to submit?</div>
</div>
</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="line-wizard l2"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11 step-text">
<p>
<small>Select personal details</small>
</p>
<div class="row">
<div class="funkyradio col-sm-4">
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox1" checked/>
<label for="checkbox1">Photos</label>
</div>
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox1"/>
<label for="checkbox1">Phone number</label>
</div>
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox1" checked/>
<label for="checkbox1">Age</label>
</div>
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox1"/>
<label for="checkbox1">Height</label>
</div>
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox2"/>
<label for="checkbox2">Weight</label>
</div>
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox3"/>
<label for="checkbox3">Eye Color</label>
</div>
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox4"/>
<label for="checkbox4">Hair Color</label>
</div>
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox5"/>
<label for="checkbox5">Shoes Size</label>
</div>
<div class="funkyradio-info">
<input type="checkbox" name="checkbox" id="checkbox6"/>
<label for="checkbox6">Shirt Size</label>
</div>
</div>
</div>
<div class="row pull-right">
<div class="col-md-1">
<div class ="step-fll-prev step-prev prev btn-primary btn" num-step="1"><i class="fa fa-angle-left text-primary" aria-hidden="true"></i></div>
</div>
<div class="col-md-1"></div>
<div class="col-md-1">
<div class ="step-fll-prev step-fll next btn-primary btn" num-step="1"><i class="fa fa-angle-right" aria-hidden="true" ></i></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<div class="row">
<div class="col-md-1"><div class="step s3">3</div></div>
<div class="col-md-11 step-text">You're almost done!</div>
</div>
</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="line-wizard l3"></div>
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-11 step-text">
<div class="panel panel-default">
<div class="panel-heading lead"><strong>Do you have project poster, flyer or company logo?</strong></div>
<div class="panel-body">
<!-- Standar Form -->
<h4>Select from your device</h4>
<form action="" method="post" enctype="multipart/form-data" id="js-upload-form">
<div class="form-inline">
<div class="form-group">
<input type="file" name="files[]" id="js-upload-files" multiple>
</div>
<button type="submit" class="btn btn-sm btn-info" id="js-upload-submit">Upload</button>
</div>
</form>
<br>
<!-- Drop Zone -->
<h4>Or drag and drop below</h4>
<div class="upload-drop-zone" id="drop-zone">
Just drag and drop photos here
</div>
</div>
</div>
<div class="row pull-right">
<div class="col-md-5">
<button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Submit</button>
</div>
<div class="col-md-5">
<button type="button" class="btn btn-lg btn-secondary">
Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.step {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 25px;
color: #fff;
line-height: 50px;
text-align: center !important;
background: #5bc0de;
transition: all 1s;
}
.step-ok {
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 25px;
color: #fff;
line-height: 50px;
text-align: center !important;
background: #39B54A;
}
.step-fll-prev {
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 30px !important;
text-align: center !important;
cursor: pointer;
}
.step-fll {
color: #fff;
margin-left: 3px;
line-height: 38px;
}
.step-prev {
background: #FFF;
border-width: 2px;
border-style: solid;
margin-left: -5px;
line-height: 35px;
}
.step-fll-prev i {
font-size: 30px !important;
}
.step-text {
/*font-family: 'SansaPro-SemiBold';*/
font-size: 15px;
padding-left: 46px;
padding-top: 5px;
}
.panel-default {
border-color: transparent;
}
.panel {
margin-bottom: 20px;
background-color: transparent;
border: 0px solid transparent;
border-radius: 4px;
-webkit-box-shadow: 0 0px 0px rgba(0,0,0,0.05);
box-shadow: 0 0px 0px rgba(0,0,0,0.05);
}
.panel-default>.panel-heading {
color: #333;
background-color: transparent;
border-color: transparent;
}
.panel-group .panel-heading+.panel-collapse .panel-body {
border-top: 0px solid #ddd;
}
.line-wizard {
position: absolute;
width: 2px;
background-color: #CCCCCC;
z-index: -1;
}
.l1 {
height: 214px;
margin-top: -44px;
margin-left: 25px;
}
.l2 {
height: 217px;
margin-top: -45px;
margin-left: 25px;
}
.l3 {
height: 131px;
margin-top: -199px;
margin-left: 25px;
}
.entry:not(:first-of-type)
{
margin-top: 10px;
}
/* RADION CSS */
.funkyradio div {
clear: both;
overflow: hidden;
}
.funkyradio label {
width: 100%;
border-radius: 3px;
border: 1px solid #D1D3D4;
font-weight: normal;
}
.funkyradio input[type="radio"]:empty,
.funkyradio input[type="checkbox"]:empty {
display: none;
}
.funkyradio input[type="radio"]:empty ~ label,
.funkyradio input[type="checkbox"]:empty ~ label {
position: relative;
line-height: 2.5em;
text-indent: 3.25em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.funkyradio input[type="radio"]:empty ~ label:before,
.funkyradio input[type="checkbox"]:empty ~ label:before {
position: absolute;
display: block;
top: 0;
bottom: 0;
left: 0;
content: '';
width: 2.5em;
background: #D1D3D4;
border-radius: 3px 0 0 3px;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label {
color: #888;
}
.funkyradio input[type="radio"]:hover:not(:checked) ~ label:before,
.funkyradio input[type="checkbox"]:hover:not(:checked) ~ label:before {
content: '\2714';
text-indent: .9em;
color: #C2C2C2;
}
.funkyradio input[type="radio"]:checked ~ label,
.funkyradio input[type="checkbox"]:checked ~ label {
color: #777;
}
.funkyradio input[type="radio"]:checked ~ label:before,
.funkyradio input[type="checkbox"]:checked ~ label:before {
content: '\2714';
text-indent: .9em;
color: #333;
background-color: #ccc;
}
.funkyradio input[type="radio"]:focus ~ label:before,
.funkyradio input[type="checkbox"]:focus ~ label:before {
box-shadow: 0 0 0 3px #999;
}
.funkyradio-default input[type="radio"]:checked ~ label:before,
.funkyradio-default input[type="checkbox"]:checked ~ label:before {
color: #333;
background-color: #ccc;
}
.funkyradio-primary input[type="radio"]:checked ~ label:before,
.funkyradio-primary input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #337ab7;
}
.funkyradio-success input[type="radio"]:checked ~ label:before,
.funkyradio-success input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5cb85c;
}
.funkyradio-danger input[type="radio"]:checked ~ label:before,
.funkyradio-danger input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #d9534f;
}
.funkyradio-warning input[type="radio"]:checked ~ label:before,
.funkyradio-warning input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #f0ad4e;
}
.funkyradio-info input[type="radio"]:checked ~ label:before,
.funkyradio-info input[type="checkbox"]:checked ~ label:before {
color: #fff;
background-color: #5bc0de;
}
/* layout.css Style */
.upload-drop-zone {
height: 100px;
border-width: 2px;
margin-bottom: 20px;
}
/* skin.css Style*/
.upload-drop-zone {
color: #ccc;
border-style: dashed;
border-color: #ccc;
line-height: 100px;
text-align: center
}
.upload-drop-zone.drop {
color: #222;
border-color: #222;
}
$(function() {
$('.next').click(function() {
var numStep = $(this).attr( "num-step" );
var clStep = '#collapse' + (parseInt(numStep) + 1);
$(clStep).collapse('show');
$('#accordion .in').collapse('hide');
console.log(clStep);
/*cambiar estilo e imagen a botón*/
$('.s' + numStep).addClass('step-ok').removeClass('step');
$('.s' + numStep).empty().append('<i class=\"fa fa-check\" aria-hidden=\"true\"><\/i>');
});
$('.prev').click(function() {
var numStep = $(this).attr( "num-step" );
var clStep = '#collapse' + (parseInt(numStep) - 1);
$(clStep).collapse('show');
$('#accordion .in').collapse('hide');
});
$('.btn-primary').click(function() {
var delay = 4000;
setTimeout(function(){ window.location = 'p3'; }, delay);
});
$('.btn-secondary').click(function() {
$('.step-ok').addClass('step').removeClass('step-ok');
$('.s0').empty().append('1');
$('.s1').empty().append('2');
$('#collapse0').collapse('show');
$('#accordion .in').collapse('hide');
});
});
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.entry:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.entry:not(:last) .btn-add')
.removeClass('btn-add').addClass('btn-remove')
.removeClass('btn-success').addClass('btn-danger')
.html('<span class="glyphicon glyphicon-minus"></span>');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.entry:first').remove();
e.preventDefault();
return false;
});
});
