<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="col-xs-16 col-md-10 " >
<div class="btn-pref btn-group btn-group-justified " role="group">
<div class="card hovercard" style="background:orange;height:relative;" >
<div class=" card-background " >
<img class=" fb-image-lg" alt="row card-bkimg" src="http://lorempixel.com/555/300/sports">
</div>
<div class="useravatar"> <img alt="card-bkimg" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/JamesCameronHWOFOct2012.jpg"> </div>
<div class="card-info"> <span class="card-title">James cameron</span> </div>
</div>
<div class="pagination">
<div class="btn-group btn-group-justified btn-group-horizontal">
<div class="btn-group " role="group">
<button id="b1" type="button" class="btn btn-nav" href="#tab1" data-toggle="tab" >
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="visible-lg" >Profile</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab2" data-toggle="tab" >
<span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span>
<div class="visible-lg">Location</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab3" data-toggle="tab">
<span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
<div class="visible-lg">Work</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab4" data-toggle="tab">
<span class="glyphicon glyphicon-cloud-upload" aria-hidden="true"></span>
<div class="visible-lg">Upload</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab5" data-toggle="tab">
<span class="glyphicon glyphicon-dashboard" aria-hidden="true"></span>
<div class="visible-lg">Dashboard</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-nav" href="#tab6" data-toggle="tab">
<span class="glyphicon glyphicon-bell" aria-hidden="true"></span>
<div class="visible-lg">Studio</div>
</button>
</div>
</div>
</div>
<div class="panel">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1" style="padding-left:10%; color: #0084b4;">
<center style="padding-right: 30%">
<form role="form" class="form-inline go-right" style="color:#0084b4 ;background-color:#FAFAFF;border-radius:0px 22px 22px 22px; ">
<h2>Profile</h2>
<p>Please update your profile for more security.</p>
<div class="form-group">
<input id="Firstname" name="Firstname" type="text" class="form-control" required>
<label for="Firstname">First Name <span class="glyphicon glyphicon-user"> </span></label>
</div>
<div class="form-group">
<input id="Lastname" name="Lastname" type="text" class="form-control" required>
<label for="Lastname">Last Name <span class="glyphicon glyphicon-user"> </label>
</div>
<div class="form-group">
<input id="Middlename" name="Middlename" type="text" class="form-control" placeholder="Middle Name">
<label for="Middlename">Middle Name <span class="glyphicon glyphicon-user"> </label>
</div>
<br>
<br>
<div class="form-group">
<input id="phone" name="phone" type="tel" class="form-control" required>
<label for="fphone">Primary Phone <span class="glyphicon glyphicon-phone"></label>
</div>
<div class="form-group">
<input id="password" name="phone" type="tel" class="form-control input-sm" placeholder="secondary phone">
<label for="sphone">Secondary Phone <span class="glyphicon glyphicon-phone"></label>
</div>
<br><br>
<div class="form-group">
<select class="form-control">
<option id="Male" Value="M" selected>Male</option>
<option id="FeMale" Value="FM" >Female</option>
<option id="NotInterested" Value="NI">Not interested</option>
</select>
</div>
<div class="form-group">
<input id="date" name="date" type="date" class="form-control">
</div>
<br><br>
<div class="form-group">
<textarea id="message" name="phone" class="form-control" style="width:relative;height:100px" placeholder="Short Description" ></textarea>
<label for="message">Short Description <span class="glyphicon glyphicon-align-justify"></label>
</div>
<br><br>
<div class="form-group">
<input id="Email1" name="phone" class="form-control" placeholder="Registered email" ></textarea>
<label for="Email1">Registered email <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br><br>
<div class="form-group">
<input id="Email2" name="phone" class="form-control" placeholder="Alternate email" ></textarea>
<label for="Email2">Alternate email <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br><br>
<div class="form-group">
<input id="Vweb" name="phone" class="form-control" placeholder="Website" ></textarea>
<label for="Vweb">WebSite <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br><br>
<button class="go-bottom">
Save
</button>
<br>
<br>
</form>
</center>
</div>
<div class="tab-pane fade in" id="tab2" style="padding-left:10%; color: #0084b4;">
<center style="padding-right: 30%">
<form role="form" class="form-inline go-right" style="color: #0084b4;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;">
<h2>Address</h2>
<br>
<div class="form-group" >
<input id="Address" name="Address" type="tel" class="form-control" >
<label for="Address">Flat NO/House No</label>
</div>
<div class="form-group" >
<input id="LandMark" name="LandMark" type="text" class="form-control" placeHolder="Land Mark">
<label for="LandMark">Land Mark</label>
</div>
<br><br>
<p3>(Enter Pincode/Area to pick your nearest location)<span class="glyphicon glyphicon-map-marker"></p3>
<br><br>
<div class="form-group input-lg" >
<input class="form-control" id="autocomplete" name="LocationPicker" type="text" onFocus="geolocate()" style=" moz-border-radius: 22px;border-radius: 7px;" >
</div>
<br><br>
<div class="form-group">
<input id="route" name="route" type="tel" class="form-control" required disabled="true">
<label for="route">Route/Locality</label>
</div>
<div class="form-group">
<input id="locality" name="locality" type="tel" class="form-control" required disabled="true">
<label for="locality">City/Town</label>
</div>
<br>
<div class="form-group">
<input id="administrative_area_level_2" name="administrative_area_level_2" type="tel" class="form-control" required disabled="true">
<label for="administrative_area_level_2">District</label>
</div>
<div class="form-group">
<input id="administrative_area_level_1" name="administrative_area_level_1" type="tel" class="form-control" required disabled="true">
<label for="administrative_area_level_1">State</label>
</div>
<br>
<div class="form-group">
<input id="country" name="country" type="text" class="form-control" required disabled="true">
<label for="country">Country</label>
</div>
<div class="form-group">
<input id="postal_code" name="postal_code" type="tel" class="form-control" required disabled="true">
<label for="postal_code">Pin Code</label>
</div>
<br><br>
<button>
Save
</button>
<br>
<br>
</form>
</center>
</div>
<div class="tab-pane fade in" id="tab3" style="padding-left:10%; color: #0084b4;">
<div class="container">
<div id="main_area">
<!-- Slider -->
<div class="pagination">
<div class=" pagination col-sm-3" id="slider-thumbs">
<br>
<label> uploaded images</label>
<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/150x150&text=1"></a>
<ul class="hide-bullets">
<li class="col-sm-4">
<a class="thumbnail" id="carousel-selector-0">
<img src="http://placehold.it/150x150&text=zero">
</a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-1"><img src="http://placehold.it/150x150&text=1"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-2"><img src="http://placehold.it/150x150&text=2"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-3"><img src="http://placehold.it/150x150&text=3"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-4"><img src="http://placehold.it/150x150&text=4"></a>
</li>
<li class="col-sm-4">
<a class="thumbnail" id="carousel-selector-5"><img src="http://placehold.it/150x150&text=5"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-6"><img src="http://placehold.it/150x150&text=6"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-7"><img src="http://placehold.it/150x150&text=7"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-8"><img src="http://placehold.it/150x150&text=8"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-9"><img src="http://placehold.it/150x150&text=9"></a>
</li>
<li class="col-sm-4">
<a class="thumbnail" id="carousel-selector-10"><img src="http://placehold.it/150x150&text=10"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-11"><img src="http://placehold.it/150x150&text=11"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-12"><img src="http://placehold.it/150x150&text=12"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-13"><img src="http://placehold.it/150x150&text=13"></a>
</li>
<li class="col-sm-3">
<a class="thumbnail" id="carousel-selector-14"><img src="http://placehold.it/150x150&text=14"></a>
</li>
<li class="col-sm-30">
<a class="thumbnail" id="carousel-selector-15"><img src="http://placehold.it/150x150&text=15"></a>
</li>
</ul>
</div>
<div class="col-sm-6">
<div class="col-xs-12" id="slider">
<!-- Top part of the slider -->
<div class="row">
<div class="col-sm-12" id="carousel-bounding-box">
<div class="carousel slide" id="myCarousel">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="http://placehold.it/470x480&text=zero"></div>
<div class="item" data-slide-number="1">
<img src="http://placehold.it/470x480&text=1"></div>
<div class="item" data-slide-number="2">
<img src="http://placehold.it/470x480&text=2"></div>
<div class="item" data-slide-number="3">
<img src="http://placehold.it/470x480&text=3"></div>
<div class="item" data-slide-number="4">
<img src="http://placehold.it/470x480&text=4"></div>
<div class="item" data-slide-number="5">
<img src="http://placehold.it/470x480&text=5"></div>
<div class="item" data-slide-number="6">
<img src="http://placehold.it/470x480&text=6"></div>
<div class="item" data-slide-number="7">
<img src="http://placehold.it/470x480&text=7"></div>
<div class="item" data-slide-number="8">
<img src="http://placehold.it/470x480&text=8"></div>
<div class="item" data-slide-number="9">
<img src="http://placehold.it/470x480&text=9"></div>
<div class="item" data-slide-number="10">
<img src="http://placehold.it/470x480&text=10"></div>
<div class="item" data-slide-number="11">
<img src="http://placehold.it/470x480&text=11"></div>
<div class="item" data-slide-number="12">
<img src="http://placehold.it/470x480&text=12"></div>
<div class="item" data-slide-number="13">
<img src="http://placehold.it/470x480&text=13"></div>
<div class="item" data-slide-number="14">
<img src="http://placehold.it/470x480&text=14"></div>
<div class="item" data-slide-number="15">
<img src="http://placehold.it/470x480&text=15"></div>
</div>
<!-- Carousel nav -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>
</div>
</div>
</div>
<!--/Slider-->
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="tab4" style="padding-left:10%; color: #0084b4;">
<form role="form" class="form-inline go-right" style="color: #0084b4;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;">
<h3>Upload your Images and Videos</h3>
<input type="file" class="form-control" required>
<br>
<input type="file" class="form-control" >
<br>
<input type="file" class="form-control" >
<br>
<input type="file" class="form-control" >
<br>
<input type="file" class="form-control" >
<br>
<input type="file" class="form-control" >
<br>
<br>
<button> SAVE </button>
</form>
</div>
<div class="tab-pane fade in" id="tab5" style="padding-left:10%; color: #0084b4;">
<div class="container">
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://placehold.it/150x150&text=13" alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading" style="color: Black;">Test Dash Board</h4>
Helllo Every One !!!
This Test Dash Board and Yet to be developed......
</div>
</div>
</div>
</div>
<div class="form-group tab-pane fade in" id="tab6" >
<form role="form" class="form-horizontal go-right" style="color: #0084b4;background-color:#FAFAFF;border-radius:0px 22px 22px 22px;">
<h2>Studio Information</h2>
<br>
<br>
<div class="container">
<div class="panel panel-default recipients">
<div class="panel-heading">
<span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">All Guests</button>
<input type="checkbox" id="showall" class="hidden" checked />
</span>
<span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Not Yet Invited</button>
<input type="checkbox" id="showall" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Yes RSVP</button>
<input type="checkbox" id="showall" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">No RSVP</button>
<input type="checkbox" id="showall" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Maybe RSVP</button>
<input type="checkbox" id="showall" class="hidden" />
</span>
<span class="button-checkbox">
<button type="button" class="btn btn-sm" data-color="default">Not Yet Replied</button>
<input type="checkbox" id="showall" class="hidden" />
</span>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-sm-6 visible-lg">
<br>
<div class="well"
style="height: 400px; width: 200px; background-color: #0084b4; border: 1px">
<img class="card-bkimg"
style="height: 180px; width: 180px; border: 1px; background-color: Grey;"
alt="" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/JamesCameronHWOFOct2012.jpg">
<br> <br>
<p> James cameron</p>
<h4> Hello Every One!!!</h4>
</div>
<div class="well" style="height: 290px; width: 200px; color:purple">
</div>
</div>
html,
body {
/*css for full size background image http://p1.pichost.me/i/66/1910857.jpg*/
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
background-color: #FA0;
color: #fff;
text-align: left;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 100%;
height: 100%; /* For at least Firefox */
min-height: 100%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
/* Related to SIde MENU Text */
.btn-nav {
color: #e92d00;
background-color: #fff;
border: 1px solid #e0e1db;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
.btn-nav:hover {
color: #1dcaff;
cursor: pointer;
-webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
transition: color 1s;
}
.btn-nav.active {
background: grey;
color: #1dcaff;
padding: 2px;
border-top: 6px solid #1dcaff;
border-bottom: 6px solid #1dcaff ;
border-left: 0;
border-right: 0;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
-webkit-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-moz-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-ms-transition: border 0.3s ease-out, color 0.3s ease 0.5s; /* IE10 is actually unprefixed */
-o-transition: border 0.3s ease-out, color 0.3s ease 0.5s;
transition: border 0.3s ease-out, color 0.3s ease 0.5s;
-webkit-animation: pulsate 1.2s linear infinite;
animation: pulsate 1.2s linear infinite;
}
.btn-nav.active:before {
content: '';
position: absolute;
border-style: solid;
border-width: 6px 6px 0;
border-color: #1dcaff transparent;
display: block;
width: 0;
z-index: 0;
margin-left: -6px;
top: 0;
left: 50%;
}
.btn-nav .glyphicon {
padding-top: 8px;
font-size: 30px;
}
.btn-nav.active p {
margin-bottom: 8px;
}
@-webkit-keyframes pulsate {
50% { color: #000; }
}
@keyframes pulsate {
50% { color: #000; }
}
@media (max-width: 100%) {
.btn-group {
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 100%) {
.btn-nav .glyphicon {
padding-top: 12px;
font-size: 26px;
}
}
/**************************************************************************************************/
/* USER PROFILE PAGE */
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
min-width: relative;
height: relative;
margin-top: 10%;
margin-bottom: -10%;
}
.card-background img.fb-image-lg{
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
filter: blur(25px);
margin-left: -10%;
margin-top: -10%;
margin-right: -10%;
min-width: relative;
}
.card.hovercard .useravatar {
position: absolute;
bottom: 50px;
left: relative;
}
.card.hovercard .useravatar img {
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: relative;
}
.card.hovercard .card-info .card-title {
padding:0 5px;
font-size: 30px;
line-height: 1;
color: #0084b4;
background-color: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.card.hovercard .card-info {
overflow: hidden;
font-size: 12px;
line-height: 20px;
color: #737373;
text-overflow: ellipsis;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
.form-group{
position: relative;
width: auto;
}
.form-control{
background: transparent;
width: relative;
}
form {
width: relative;
margin: 0;
}
form > div {
position: relative;
overflow: hidden;
}
form input, form textarea {
width: 100%;
border: 1px solid brown;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
}
form input:valid, form textarea:valid {
background: white;
}
form input:focus, form textarea:focus {
border-color: #357EBD;
}
form input:focus + label, form textarea:focus + label {
background: #0084b4;
color: white;
font-size: 70%;
padding: 1px 6px;
z-index: 2;
text-transform: uppercase;
}
form label {
-webkit-transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
transition: background 0.2s, color 0.2s, top 0.2s, bottom 0.2s, right 0.2s, left 0.2s;
position: absolute;
color: #999;
padding: 7px 6px;
font-weight: normal;
}
form textarea {
display: block;
resize: vertical;
}
form.go-bottom input, form.go-bottom textarea {
padding: 12px 12px 12px 12px;
}
form.go-bottom label {
top: 0;
bottom: 0;
left: 0;
width: 100%;
}
form.go-bottom input:focus, form.go-bottom textarea:focus {
padding: 4px 6px 20px 6px;
}
form.go-bottom input:focus + label, form.go-bottom textarea:focus + label {
top: 100%;
margin-top: -16px;
}
form.go-right label {
border-radius: 0 5px 5px 0;
height: 100%;
top: 0;
right: 100%;
width: 100%;
margin-right: -100%;
}
form.go-right input:focus + label, form.go-right textarea:focus + label {
right: 0;
margin-right: 0;
width: 40%;
padding-top: 5px;
}
html,
body {
/*css for full size background image http://p1.pichost.me/i/66/1910857.jpg*/
background: url() no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
background-color: #d9d9d9;
color: #fff;
text-align: left;
text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.site-wrapper {
display: table;
width: 50%;
height: 50%; /* For at least Firefox */
min-height: 50%;
-webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
box-shadow: inset 0 0 100px rgba(0,0,0,.5);
}
.site-wrapper-inner {
display: table-cell;
vertical-align: top;
}
.cover-container {
margin-right: auto;
margin-left: auto;
}
body {
padding-top: 0px;
}
.material-button-anim {
position: relative;
padding: 10px 15px 27px;
text-align: center;
max-width: relative;
margin: 0 auto 20px;
}
.material-button {
position: relative;
top: 0;
z-index: 1;
width: 70px;
height: 70px;
font-size: 1.5em;
color: #fff;
background: #2C98DE;
border: none;
border-radius: 50%;
box-shadow: 0 3px 6px rgba(0,0,0,.275);
outline: none;
}
.material-button-toggle {
z-index: 5;
width: 90px;
height: 90px;
margin: 0 auto;
}
.material-button-toggle span {
-webkit-transform: none;
transform: none;
-webkit-transition: -webkit-transform .175s cubic-bazier(.175,.67,.83,.67);
transition: transform .175s cubic-bazier(.175,.67,.83,.67);
}
.material-button-toggle.open {
-webkit-transform: scale(1.3,1.3);
transform: scale(1.3,1.3);
-webkit-animation: toggleBtnAnim .175s;
animation: toggleBtnAnim .175s;
}
.material-button-toggle.open span {
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: -webkit-transform .175s cubic-bazier(.175,.67,.83,.67);
transition: transform .175s cubic-bazier(.175,.67,.83,.67);
}
#options {
height: 70px;
}
.option {
position: relative;
}
.option .option1,
.option .option2,
.option .option3 {
filter: blur(5px);
-webkit-filter: blur(5px);
-webkit-transition: all .175s;
transition: all .175s;
}
.option .option1 {
-webkit-transform: translate3d(90px,90px,0) scale(.8,.8);
transform: translate3d(90px,90px,0) scale(.8,.8);
}
.option .option2 {
-webkit-transform: translate3d(0,90px,0) scale(.8,.8);
transform: translate3d(0,90px,0) scale(.8,.8);
}
.option .option3 {
-webkit-transform: translate3d(-90px,90px,0) scale(.8,.8);
transform: translate3d(-90px,90px,0) scale(.8,.8);
}
.option.scale-on .option1,
.option.scale-on .option2,
.option.scale-on .option3 {
filter: blur(0);
-webkit-filter: blur(0);
-webkit-transform: none;
transform: none;
-webkit-transition: all .175s;
transition: all .175s;
}
.option.scale-on .option2 {
-webkit-transform: translateY(-28px) translateZ(0);
transform: translateY(-28px) translateZ(0);
-webkit-transition: all .175s;
transition: all .175s;
}
@keyframes toggleBtnAnim {
0% {
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
25% {
-webkit-transform: scale(1.4,1.4);
transform: scale(1.4,1.4);
}
75% {
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
100% {
-webkit-transform: scale(1.3,1.3);
transform: scale(1.3,1.3);
}
}
@-webkit-keyframes toggleBtnAnim {
0% {
-webkit-transform: scale(1,1);
transform: scale(1,1);
}
25% {
-webkit-transform: scale(1.4,1.4);
transform: scale(1.4,1.4);
}
75% {
-webkit-transform: scale(1.2,1.2);
transform: scale(1.2,1.2);
}
100% {
-webkit-transform: scale(1.3,1.3);
transform: scale(1.3,1.3);
}
}
.hide-bullets {
list-style:none;
margin-left: -40px;
margin-top:20px;
}
.thumbnail {
padding: 0;
}
.carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
.recipients .panel-body {
overflow: auto;
max-height: 200px;
}
.recipients .recipient {
display: block;
float: left;
width: 140px;
margin: 0 5px 5px 0;
font-size: 0.85em;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
.recipients .recipient img {
float: left;
height: 28px;
margin-right: 5px;
}
.recipients .recipient .email {
font-size: 0.9em;
color: #999;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
}
$(function () {
$('.button-checkbox').each(function () {
// Settings
var $widget = $(this),
$button = $widget.find('button'),
$checkbox = $widget.find('input:checkbox'),
color = $button.data('color'),
settings = {
on: {
icon: 'glyphicon glyphicon-check'
},
off: {
icon: 'glyphicon glyphicon-unchecked'
}
};
// Event Handlers
$button.on('click', function () {
$checkbox.prop('checked', !$checkbox.is(':checked'));
$checkbox.triggerHandler('change');
updateDisplay();
});
$checkbox.on('change', function () {
updateDisplay();
});
// Actions
function updateDisplay() {
var isChecked = $checkbox.is(':checked');
// Set the button's state
$button.data('state', (isChecked) ? "on" : "off");
// Set the button's icon
$button.find('.state-icon')
.removeClass()
.addClass('state-icon ' + settings[$button.data('state')].icon);
// Update the button's color
if (isChecked) {
$button
.removeClass('btn-default')
.addClass('btn-' + color + ' active');
}
else {
$button
.removeClass('btn-' + color + ' active')
.addClass('btn-default');
}
}
// Initialization
function init() {
updateDisplay();
// Inject the icon if applicable
if ($button.find('.state-icon').length == 0) {
$button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> ');
}
}
init();
});
});
jQuery(document).ready(function($) {
$('#myCarousel').carousel({
interval: 5000
});
//Handles the carousel thumbnails
$('[id^=carousel-selector-]').click(function () {
var id_selector = $(this).attr("id");
try {
var id = /-(\d+)$/.exec(id_selector)[1];
console.log(id_selector, id);
jQuery('#myCarousel').carousel(parseInt(id));
} catch (e) {
console.log('Regex failed!', e);
}
});
// When the carousel slides, auto update the text
$('#myCarousel').on('slid.bs.carousel', function (e) {
var id = $('.item.active').data('slide-number');
$('#carousel-text').html($('#slide-content-'+id).html());
});
});
var placeSearch, autocomplete;
var componentForm = {
route: 'long_name',
locality: 'long_name',
administrative_area_level_2:'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomplete.addListener('place_changed', fillInAddress);
}
// [START region_fillform]
function fillInAddress() {
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
var circle = new google.maps.Circle({
center: geolocation,
radius: position.coords.accuracy
});
autocomplete.setBounds(circle.getBounds());
});
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&libraries=places&callback=initAutocomplete"
async defer></script>
<script type="text/javascript">
var activeEl = 0;
$(function() {
var items = $('.btn-nav');
$( items[activeEl] ).addClass('active');
$( ".btn-nav" ).click(function() {
$( items[activeEl] ).removeClass('active');
$( this ).addClass('active');
activeEl = $( ".btn-nav" ).index( this );
});
});
</script>
