Merge pull request #173 from nisum-inc/MyTeam_LoginPage

MT-173: New Theme login page styles added.

src/main/webapp/WEB-INF/css/login.css

+/* 	File Name:	login.css
+	Date	 :	22/08/2018
+	Author	 :	Vanavaraju A 
+*/
+.myteam-login {
+    overflow: hidden
+}
+.myteam-login .slider {
+    text-align: left;
+}
+.myteam-login .login {
+    background: #fff;
+    border: 3px solid #00b4e5;
+	border-radius: 10px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    padding: 40px 80px;
+    transform: translate(-50%, -50%)
+}
+/*.carousel-inner img {
+	background-size: cover;
+	height: 100vh;
+    width: 100%vw !important; 
+} */
+.carousel-inner .slide1, .slide2, .slide3, .slide4, .slide5 {
+	width: 100%;
+    height: 100vh;
+    background-position: center !important;
+    background-repeat: no-repeat !important;
+    background-size: cover !important;
+}
+.carousel-inner .slide1 {
+    background: url(../images/projectManagement.png) no-repeat;
+}
+.carousel-inner .slide2 {
+    background: url(../images/teamManagement.jpg) no-repeat;
+}
+.carousel-inner .slide3 {
+    background: url(../images/chartsReport.jpg) no-repeat;
+}
+.carousel-inner .slide4 {
+    background: url(../images/biometric.jpg) no-repeat;
+}
+.carousel-inner .slide5 {
+    background: url(../images/email.jpg) no-repeat;
+}
+.carousel-control {
+    border-radius: 15px;
+}
+.carousel-control.left, .carousel-control.right {
+	border-radius: 0 !important;
+}
+.carousel-caption {
+	background: #000;
+	opacity: 0.6;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+}
+.carousel-caption h3 {
+	margin: 0 0 10px 0;
+}
+.carousel-indicators {
+	bottom: 10px;
+	left: 0;
+	margin: 0;
+	width: 100%;
+}

src/main/webapp/WEB-INF/templates/login.html

@@ -33,27 +33,10 @@
 </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>
+<link rel="stylesheet" href="css/login.css" />
 </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 class="myteam-login" ng-controller="loginController" id="popupContainer">
+	<div class="slider">
 		<div id="myCarousel" class="carousel slide" data-ride="carousel">
 			<!-- Indicators -->
 			<ol class="carousel-indicators">
@@ -65,68 +48,53 @@
 			</ol>
 
 			<!-- Wrapper for slides -->
-				<div class="carousel-inner" style="border-radius:15px">
+			<div class="carousel-inner">
 			<div class="item active">
-						<img src="images/projectManagement.png" alt="ProjectManagement"
-							style="width: 930px; height: 550px; border-radius: 15px;" />
+					<div class="bgslides slide1"></div>
 					<div class="carousel-caption">
 						<h3>Project Management</h3>
 						<p>Application will help for project management and tracking!!!</p>
 					</div>
 				</div>
 					<div class="item">
-						<img src="images/teamManagement.jpg" alt="Teams"
-							style="width: 930px; height: 550px; border-radius: 15px;" />
+					<div class="bgslides slide2"></div>
 					<div class="carousel-caption">
 						<h3>Teams</h3>
 						<p>Application provide detail about team</p>
 					</div>
 				</div>
 					<div class="item">
-						<img src="images/chartsReport.jpg" alt="ProjectManagementReports"
-							style="width: 930px; height: 550px; border-radius: 15px;" />
+					<div class="bgslides slide3"></div>
 					<div class="carousel-caption">
 						<h3>Reports</h3>
 						<p>Application provide detail reports on projects and resource utilization</p>
 					</div>
 				</div>
 				<div class="item ">
-						<img src="images/biometric.jpg" alt="BioMetric"
-							style="width: 930px; height: 550px; border-radius: 15px;" />
+					<div class="bgslides slide4"></div>
 					<div class="carousel-caption">
 						<h3>Biometric Integration</h3>
 						<p>Application is integrated with Biometric system to track
 							employee login hours!!!</p>
 					</div>
 				</div>
-
 				<div class="item">
-						<img src="images/email.jpg" alt="Email"
-							style="width: 930px; height: 550px; border-radius: 15px;" />
+						<div class="bgslides slide5"></div>
 					<div class="carousel-caption">
 						<h3>Mail Notification</h3>
 						<p> Provides the option of sending email notifications !!!</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>
+			<a class="left carousel-control" data-slide="prev"> </a> 
+			<a class="right carousel-control" data-slide="next"> </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 class="login">
+		<div align="center">
+			<img class="img img-rounded" alt="MyTeam Logo" src="images/myteam.png" /> <br><br>
 			<div id="my-signin2"></div>
 		</div>
 	</div>
-	</div>
 </div>
\ No newline at end of file