<head>
<script type="text/javascript">
	$(function() {
		//Preventing back, refresh button clicks of browser
		$(window).on('beforeunload', function(){
		    return false;
		});
		
		//carousel auto rotation of images
		$('.carousel').carousel({
			interval : 2000
		});
		$('.carousel-control.right').trigger('click');
		
	});
	function renderButton() {
		gapi.load('auth2', function () {
		    gapi.auth2.init({
		        client_id: "685521475239-ujm7l2hkgrltk7loi8efl0ed702asm2r.apps.googleusercontent.com",
		        hosted_domain: 'nisum.com'
		    });
		});
		gapi.signin2.render('my-signin2', {
			'scope': 'profile email',
			'width': 190,
			'height': 40,
			'longtitle': true,
			'theme': 'dark',
			'onsuccess': onSignIn,
			'onfailure': onFailure
		});
	 }
</script>
<script src="https://apis.google.com/js/platform.js?onload=renderButton"></script>
<meta name="google-signin-client_id" content="685521475239-ujm7l2hkgrltk7loi8efl0ed702asm2r.apps.googleusercontent.com">
<style type="text/css">
.abcRioButtonBlue {
    background-color: rgba(0, 178, 226, .6) !important;
    border: none;
    color: #fff;
    border-radius: 5px 5px 5px 5px;
}
.abcRioButtonBlue .abcRioButtonIcon {
    background-color: inherit;
    -webkit-border-radius: 1px;
    border-radius: 1px;
}
</style>
</head>
<div class="md-padding"
	style="background-color: #eee; width: 100%; height: 100%; display: table; position: absolute;"
	ng-controller="loginController" id="popupContainer">
	<div class="row col-lg-12"
		style="display: table-cell; vertical-align: middle;">
		<div class="col-lg-9 col-md-12 col-sm-12 col-xs-12"
			style="margin-left: auto; margin-right: auto;">
			<div id="myCarousel" class="carousel slide" data-ride="carousel">
				<!-- Indicators -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>
					<li data-target="#myCarousel" data-slide-to="2"></li>
				</ol>

				<!-- Wrapper for slides -->
				<div class="carousel-inner" style="border-radius:15px">
					<div class="item active">
						<img src="images/biometric.jpg" alt="BioMetric"
							style="width: 930px; height: 550px; border-radius: 15px;" />
						<div class="carousel-caption">
							<h3>Biometric Integration</h3>
							<p>MyTime is integrated with Biometric system to track
								employee login hours!!!</p>
						</div>
					</div>

					<div class="item">
						<img src="images/reports.jpg" alt="Reports"
							style="width: 930px; height: 550px; border-radius: 15px;" />
						<div class="carousel-caption">
							<h3>Reports</h3>
							<p>MyTime provides the feasibility of generating timesheets
								reports!!!</p>
						</div>
					</div>

					<div class="item">
						<img src="images/email.jpg" alt="Email"
							style="width: 930px; height: 550px; border-radius: 15px;" />
						<div class="carousel-caption">
							<h3>Mail Notification</h3>
							<p>MyTime provides the option of sending email notifications
								regarding timesheets!!!</p>
						</div>
					</div>
				</div>

				<!-- Left and right controls -->
				<a class="left carousel-control" data-slide="prev"
					style="border-radius: 15px;"> </a> <a
					class="right carousel-control" data-slide="next"
					style="border-radius: 15px;"> </a>
			</div>
		</div>
		<div class="row col-lg-3 col-md-12 col-sm-12 col-xs-12" align="center"
			style="margin-left: auto; margin-right: auto;margin-top:15%;">
			<div class="row col-xs-12" align="center">
				<img class="img img-rounded" alt="MyTime Logo"
					src="images/loginlogo.png">
			</div>
			<div class="row" style="height: 25px"></div>
			<div class="row col-xs-12" align="center">
				<div id="my-signin2"></div>
			</div>
		</div>
	</div>
</div>