<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<br><br>
<div class="M1" >
<div class="container-fluid" ><br><br>
<div class="col-xs-1 col-md-1" style=" padding-left:10px">
<br>
<div style="text-align: left; ">
<div class="container">
<div class="btn-group btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-user"></span>
<p>Profile</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-calendar"></span>
<p>Calendar</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-globe"></span>
<p>Network</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-picture"></span>
<p>Upload </p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-time"></span>
<p>Statistics</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-bell"></span>
<p>Events</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-th"></span>
<p>ALL</p>
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4 col-md-6">
<form role="form" class="form-inline col-md-9 go-right" style="color: Green;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" 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" style="color:red" selected>Male</option>
<option id="FeMale" Value="FM" style="color:green">Female</option>
<option id="NotInterested" Value="NI" style="color:blue">Not interested</option>
</select>
</div>
<div class="form-group">
<input id="date" name="date" type="date" class="form-control">
<label for="date">DOB<span class="glyphicon glyphicon-calendar"></label>
</div>
<br><br>
<div class="form-group">
<textarea id="message" name="phone" class="form-control" style="width:400px;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" style="width:400px;" 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" style="width:400px;" 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" style="width:400px;" placeholder="Website" ></textarea>
<label for="Vweb">WebSite <span class="glyphicon glyphicon-align-envelope"></label>
</div>
<br>
<br>
<p1>Address</p1>
<br>
<div class="form-group">
<input id="Address" name="Address" type="tel" class="form-control" required>
<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" style="width: 600px" >
<input input id="autocomplete" name="LocationPicker" type="text" onFocus="geolocate()" style=" moz-border-radius: 22px;border-radius: 7px;" >
<label for="LocationPicker">Location Picker</label>
</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>
</div>
<div class="col-xs-1 col-md-1" id="Customer feed">
</div>
</div></div>
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
.M1{
width: 160%;
height: 100px;
position: absolute;
align:center;
}
.form-control{
background: transparent;
}
form {
width: 320px;
margin: 20px;
}
form > div {
position: relative;
overflow: hidden;
}
form input, form textarea {
width: 100%;
border: 2px solid gray;
background: none;
position: relative;
top: 0;
left: 0;
z-index: 1;
padding: 8px 12px;
outline: 0;
}
form input:valid, form textarea:valid {
background: #F0F7F7;
}
form input:focus, form textarea:focus {
border-color: #357EBD;
}
form input:focus + label, form textarea:focus + label {
background: #FA0;
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: #FA0;
color: #fff;
text-align: left;
text-shadow: 0 2px 6px 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 */
box-sizing: border-box;
}
body {
background: url(http://habrastorage.org/files/90a/010/3e8/90a0103e8ec749c4843ffdd8697b10e2.jpg);
text-align: right;
padding-top: 40px;
padding-left: 20px;
}
.btn-nav {
color: Green;
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: #e92d00;
cursor: pointer;
-webkit-transition: color 1s; /* For Safari 3.1 to 6.0 */
transition: color 1s;
}
.btn-nav.active {
color: #e92d00;
padding: 2px;
border-top: 6px solid #e92d00;
border-bottom: 6px solid #e92d00;
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: #e92d00 transparent;
display: block;
width: 0;
z-index: 1;
margin-left: -6px;
top: 0;
left: 50%;
}
.btn-nav .glyphicon {
padding-top: 16px;
font-size: 40px;
}
.btn-nav.active p {
margin-bottom: 8px;
}
@-webkit-keyframes pulsate {
50% { color: #000; }
}
@keyframes pulsate {
50% { color: #000; }
}
@media (max-width: 480px) {
.btn-group {
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
}
@media (max-width: 600px) {
.btn-nav .glyphicon {
padding-top: 12px;
font-size: 26px;
}
}
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() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
// Get each component of the address from the place details
// and fill the corresponding field on the form.
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;
}
}
}
// [END region_fillform]
// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
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());
});
}
}
$(function () {
$('body').on('click', '.list-group .list-group-item', function () {
$(this).toggleClass('active');
});
$('.list-arrows button').click(function () {
var $button = $(this), actives = '';
if ($button.hasClass('move-left')) {
actives = $('.list-right ul li.active');
actives.clone().appendTo('.list-left ul');
actives.remove();
} else if ($button.hasClass('move-right')) {
actives = $('.list-left ul li.active');
actives.clone().appendTo('.list-right ul');
actives.remove();
}
});
$('.dual-list .selector').click(function () {
var $checkBox = $(this);
if (!$checkBox.hasClass('selected')) {
$checkBox.addClass('selected').closest('.well').find('ul li:not(.active)').addClass('active');
$checkBox.children('i').removeClass('glyphicon-unchecked').addClass('glyphicon-check');
} else {
$checkBox.removeClass('selected').closest('.well').find('ul li.active').removeClass('active');
$checkBox.children('i').removeClass('glyphicon-check').addClass('glyphicon-unchecked');
}
});
$('[name="SearchDualList"]').keyup(function (e) {
var code = e.keyCode || e.which;
if (code == '9') return;
if (code == '27') $(this).val(null);
var $rows = $(this).closest('.dual-list').find('.list-group li');
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function () {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
});
</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 = 2;
$(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>
