File: /home/imensosw/www/imenso.co/demo/stellar/index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>stellarsearch</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet"> -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon.png">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/chosen.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="login">
<div class="container">
<div class="container_new">
<div class="login_area">
<div class="logo">
<a href="#"> <img src="images/logo.png" alt="logo"> </a>
</div>
<form class="mt5">
<div class="form-group float-label-control">
<label for=""> Email</label>
<input type="text" class="form-control" placeholder="Email" name="When Should Call">
</div>
<div class="form-group float-label-control">
<label for="">Password</label>
<input type="text" class="form-control" placeholder="Password" name="Linkedin Profile">
</div>
<div class="text-center mt3">
<!-- <button type="submit" class="btn btn-blue">Log In</button> -->
<a href="mywork.php" class="btn-orange btn-big">Log In</a>
</div>
<div><a href="#" class="forgot_pass">Forgot password?</a></div>
</form>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">
(function ($) {
$.fn.floatLabels = function (options) {
// Settings
var self = this;
var settings = $.extend({}, options);
// Event Handlers
function registerEventHandlers() {
// self.on('input keyup change focus', 'input, textarea', function () {
// actions.swapLabels(this);
// });
self.on('focusin', 'input, textarea', function () {
actions.addFocus(this);
});
self.on('focusout', 'input, textarea', function () {
actions.removeFocus(this);
});
self.on('mousedown', '.select-dropdown li a', function(){
actions.selectValue(this);
});
self.on('keyup', 'select + input', function(){
actions.dropdownFilter(this);
});
}
// Actions
var actions = {
initialize: function() {
self.each(function () {
var $this = $(this);
var $label = $this.children('label');
var $field = $this.find('input,textarea').first();
if ($this.children().first().is('label')) {
$this.children().first().remove();
$this.append($label);
}
var placeholderText = ($field.attr('placeholder') && $field.attr('placeholder') != $label.text()) ? $field.attr('placeholder') : $label.text();
$label.data('placeholder-text', placeholderText);
$label.data('original-text', $label.text());
if ($field.val() == '') {
$field.addClass('empty')
}
});
},
changeSelectFields: function () {
self.each(function () {
var $this = $(this);
// console.log($this);
var $selectFields = $this.find('select');
//console.log($selectFields.length);
if ($selectFields.length){
$selectFields.hide();
$selectedFieldID = $selectFields.attr('id');
$selectFields.after('<input type="text" class="form-control replaced-select-field" id="'+$selectedFieldID+'-styled">');
$options = $selectFields.find('option');
$styledElements = Array();
$options.each(function($i, $option){
$icon = $option.getAttribute('data-icon');
$icon = ($icon) ? '<i class="'+ $icon +'"></i> ' : '';
$html = '<li>'+
'<a href="#" data-option="'+$option.value+'">'+
$icon + $option.text
'</a>'+
'</li> '
$styledElements.push($html);
});
$styledElements ='<ul class="dropdown-menu select-dropdown" id="'+$selectedFieldID+'-dropdown">' + $styledElements.join(' ') + '</ul>' ;
$this.append($styledElements)
}
});
},
selectValue: function(dropdown_elemet){
$dropdown_elemet = $(dropdown_elemet);
$relatedSelectFiled = $dropdown_elemet.parents('.select-dropdown').siblings('select');
$relatedInputFiled = $dropdown_elemet.parents('.select-dropdown').siblings('input');
$relatedSelectFiled.val($dropdown_elemet.data('option'));
$relatedInputFiled.val($.trim($dropdown_elemet.text()));
},
dropdownFilter: function(inputField){
$inputField = $(inputField);
$relatedDDField = $inputField.siblings('.select-dropdown');
$options = $relatedDDField.find('a');
$options.each(function(i, option){
$option = $(option);
if($.trim($option.text().toLowerCase()).search($.trim($inputField.val()).toLowerCase()) === -1){
$option.addClass('hide');
}else{
$option.removeClass('hide');
}
});
},
swapLabels: function (field) {
var $field = $(field);
var $label = $(field).siblings('label').first();
var isEmpty = Boolean($field.val());
if (isEmpty) {
$field.removeClass('empty');
$label.text($label.data('original-text'));
}
else {
$field.addClass('empty');
$label.text($label.data('placeholder-text'));
}
},
addFocus: function (field) {
var $field = $(field);
var $label = $(field).siblings('label').first();
// var isEmpty = Boolean($field.val());
$field.removeClass('empty');
$label.text($label.data('original-text'));
if($field.hasClass('replaced-select-field')){
$field.siblings('ul.select-dropdown').addClass('show');
}
},
removeFocus: function (field) {
var $field = $(field);
var $label = $(field).siblings('label').first();
var isEmpty = Boolean($field.val());
if(isEmpty){
$field.removeClass('empty');
$label.text($label.data('placeholder-text'));
}else{
$field.addClass('empty');
$label.text($label.data('original-text'));
}
if($field.hasClass('replaced-select-field')){
$field.siblings('ul.select-dropdown').removeClass('show');
}
}
};
// Initialization
function init() {
registerEventHandlers();
actions.initialize();
actions.changeSelectFields();
self.each(function () {
actions.swapLabels($(this).find('input,textarea').first());
});
}
init();
return this;
};
})(jQuery);
$(function () {
$('.float-label-control').floatLabels();
});
</script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>