eoffice

assets/css/responsive.css

+
+/*
+	Site Name: E-Office Portal - Online office management system
+	URI: http:http://eoffice.techware.co.in/
+	Description: This is the responsive css for E0ffice portal
+	Version: 2.0
+	Author: Amal-Techware Solution
+	Author URI: 
+	Tags:
+	
+	---------------------------
+	CUSTOM STYLES
+	---------------------------
+	
+	TABLE OF CONTENTS
+	---------------------------
+	01.0 Smartphones (portrait and landscape)
+	02.0 Smartphones (landscape)
+	03.0 Smartphones (portrait)
+	04.0 iPads (portrait and landscape)
+	05.0 iPads (landscape)
+	06.0 iPads (portrait)
+	07.0 Desktops and laptops
+	08.0 Large screens
+	09.0 iPhone 4 
+	10.0 iPhone 5
+	11.0 iPhone 6
+	12.0 iPhone 6+
+	13.0 Samsung Galaxy S3
+	14.0 Samsung Galaxy S4
+	15.0 Samsung Galaxy S5
+
+
+*/
+
+
+/* 01. Smartphones (portrait and landscape) ----------- */
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+.e_profile_detail{width:100%;padding:20px;padding-left: 0px;border:none;}
+.e_profile_detail1 li{width:100%;border:none;padding-left: 0px !important;padding-bottom: 10px;}
+.e_profile_edit_button{width:100%;margin-bottom: 10px;}
+.e_profile_changepass_button{width:100%;}
+.e_apply_leave_text{border:none;}
+.e_experience{width: 100%;padding-left: 0px;}
+.e_feed_content{padding-left: 0px;}
+.e_feed_daten_time{margin-left: 0px;padding-top: 10px;width: 100%;}
+
+}
+
+/* 02.0 Smartphones (landscape) ----------- */
+
+@media only screen and (min-width : 321px) {
+
+}
+
+/* 03.0 Smartphones (portrait) ----------- */
+
+@media only screen and (max-width : 320px) {
+
+}
+
+/* 04.0 iPads (portrait and landscape) ----------- */
+
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
+}
+
+/* 05.0 iPads (landscape) ----------- */
+
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
+
+}
+
+/* 06.0 iPads (portrait) ----------- */
+
+@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
+
+}
+
+/* 07.0 Desktops and laptops ----------- */
+
+@media only screen  and (min-width : 1224px) {
+
+}
+
+/* 08.0 Large screens ----------- */
+
+@media only screen  and (min-width : 1824px) {
+
+}
+
+/* 09.0 iPhone 4 ----------- */
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
+
+}
+
+/* 10.0 iPhone 5 ----------- */
+
+@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
+
+}
+
+/* 11.0 iPhone 6 ----------- */
+
+@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
+
+}
+
+@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
+
+}
+
+/* 12.0 iPhone 6+ ----------- */
+
+@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
+
+}
+
+/* 13.0 Samsung Galaxy S3 ----------- */
+
+@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
+
+}
+
+/* 14.0 Samsung Galaxy S4 ----------- */
+
+@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
+
+}
+
+/* 15.0 Samsung Galaxy S5 ----------- */
+
+@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
+
+}
+
+

assets/css/theme.css

+
+
+/*
+	Site Name: E-Office Portal - Online office management system
+	URI: http:http://eoffice.techware.co.in/
+	Description: This is the theme common css for E0ffice portal
+	Version: 2.0
+	Author: Amal-Techware Solution
+	Author URI: 
+	Tags:
+	
+	---------------------------
+	THEME STYLES
+	---------------------------
+	
+	TABLE OF CONTENTS
+	---------------------------
+	 01. FONTS-N-SIZES 
+	 02. FONTS-COLOR
+	 03. THEMES-N-BACKGROUNDS
+	 04. SPACING-N-POSITIONS
+	 05. ALIGMENTS
+	 06. ALERTS-N-MESSAGES
+	 07. CONTAINERS
+
+
+*/
+
+/*-------------------------------
+
+01. FONTS-N-SIZES 
+
+--------------------------------*/
+
+@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
+*{font-family: 'Roboto', sans-serif;}
+*::-webkit-scrollbar { 
+    display: none; 
+}
+*:focus {
+outline: 0 !important;
+}
+a{text-decoration: none !important;}
+ @font-face { font-family: font-awesome; font-weight: bold; src: url('Delicious-Bold.otf');}
+}
+.font_size_xs{font-size:12px !important;}
+.font_size_sm{font-size:14px !important;}
+.font_size_md{font-size:16px !important;}
+.font_size_lg{font-size:18px !important;}
+.font_size_xl{font-size:20px !important;}
+.font_size_vl{font-size:35px !important;}
+
+/*-------------------------------
+
+02. FONTS-COLOR
+
+--------------------------------*/
+
+.text_color_primary{color:#e66263 !important;}
+.text_color_secondary{color:#3d3a3b !important;}
+.text_color_white{color:#fff !important;}
+
+/*-------------------------------
+
+03. THEMES-N-BACKGROUNDS
+
+--------------------------------*/
+
+.theme_primary{background-color: #f7f7f7 !important;border: 1px solid #f7f7f7;}
+.theme_grey{background-color: #f1f1f1 !important;border: 1px solid #f1f1f1;}
+.theme_secondary{background:url("../img/e_theme_bg.jpg");background-position:center;background-size:cover;}
+.theme_signup{background:url("../assets/img/e_signup_bg.png");background-position:center;background-size:cover;}
+.border_primary{border-color:#e66263 !important;}
+.theme_transparent{background:transparent !important;}
+.theme_white{background-color: #fff !important;}
+.theme_dark_transparent{background-color: rgba(0,0,0,0.6) !important;}
+.theme_offwhite{background: #f1f1f1;}
+.theme_dark_grey{background: #4c4c4c !important;}
+
+/*-------------------------------
+
+04. SPACING-N-POSITIONS
+
+--------------------------------*/
+
+.width25{width:25% !important;}
+.width50{width:50% !important;}
+.width75{width:75% !important;}
+.widthFull{width:100% !important;}
+.height25{height:25% !important;}
+.height50{height:50% !important;}
+.height75{width:75% !important;}
+.heightFull{height:100% !important;}
+
+.p0{padding:0px !important;}
+.pl0{padding-left: 0px !important;}
+.pr0{padding-right:0px !important;}
+.pt0{padding-top:0px !important;}
+.pb0{padding-bottom: 0px !important;}
+.p10{padding:10px !important;}
+
+.m0{margin:0px !important;}
+.ml0{margin-left: 0px !important;}
+.mr0{margin-right: 0px !important;}
+.mt0{margin-top: 0px !important;}
+.mb0{margin-bottom: 0px !important;}
+
+.clear{clear:both !important;}
+
+.top10{top:10px;}
+.bottom10{bottom:10px;}
+.left10{left:10px;}
+.right10{right:10px;}
+.bottom10{bottom:10px;}
+
+.absolute{position: absolute !important;}
+.relative{position: relative !important;}
+.fixed{position: fixed !important;}
+
+/*-------------------------------
+
+05. ALIGMENTS
+
+--------------------------------*/
+
+.floatLeft{float:left !important;}
+.floatRight{float:right !important;}
+.textLeft{text-align: left !important;}
+.textRight{text-align: right !important;}
+.textCenter{text-align: center !important;}
+
+/*-------------------------------
+
+06. ALERTS-N-MESSAGES
+
+--------------------------------*/
+
+.alert{padding: 15px;margin-bottom: 20px;border: 1px solid transparent;font-weight: 600;transition: all 0.5s ease;position: fixed;border-bottom:0px;left:0px;right: 0px;}
+.warning{color: #fff;background-color: #8a6d3b;}
+.success{color: #fff;background-color: #3c763d;}
+.error{color: #fff;background-color: #a94442;}
+
+
+/*-------------------------------
+
+07. CONTAINERS
+
+--------------------------------*/
+
+.custom_container{max-width:1000px !important;}
+.borderNone{border: none !important;}

assets/js/custom.js

+
+/*
+  Site Name: E-Office Portal - Online office management system
+  URI: http:http://eoffice.techware.co.in/
+  Description: Customized JS for E-Office Portal
+  Version: 2.0
+  Author: Amal-Techware Solution
+  Author URI: 
+  Tags:
+  
+  ---------------------------
+  CUSTOM CONPONENT-SCRIPTS
+  ---------------------------
+  
+  TABLE OF CONTENTS
+  ---------------------------
+   01. FONTS-N-SIZES 
+   02. CURRENT-TIME
+   03. DATE-PICKER
+
+
+
+*/
+
+$(function(){
+
+
+/*-------------------------------
+
+01. HEADER-SHRINKER
+
+--------------------------------*/
+
+    $(window).scroll(function() {
+  if ($(document).scrollTop() > 52) {
+    $('.e_main_navbar').addClass('e_main_navbar_shrink');
+  } else{
+    $('.e_main_navbar').removeClass('e_main_navbar_shrink');
+  }
+});
+
+
+/*-------------------------------
+
+02. CURRENT-TIME
+
+--------------------------------*/
+
+var clockID;
+var yourTimeZoneFrom = -7.00; //time zone value where you are at
+
+var d = new Date();  
+//get the timezone offset from local time in minutes
+var tzDifference = yourTimeZoneFrom * 60 + d.getTimezoneOffset();
+//convert the offset to milliseconds, add to targetTime, and make a new Date
+var offset = tzDifference * 60 * 1000;
+
+function UpdateClock() {
+    var tDate = new Date(new Date().getTime()+offset);
+    var in_hours = tDate.getHours()
+    var in_minutes=tDate.getMinutes();
+    var in_seconds= tDate.getSeconds();
+
+    if(in_minutes < 10)
+        in_minutes = '0'+in_minutes;
+    if(in_seconds<10)   
+        in_seconds = '0'+in_seconds;
+    if(in_hours<10) 
+        in_hours = '0'+in_hours;
+
+   document.getElementById('theTime').innerHTML = "" 
+                   + in_hours + "&nbsp;:&nbsp;" 
+                   + in_minutes + "&nbsp;:&nbsp;" 
+                   + in_seconds;
+
+}
+function StartClock() {
+   clockID = setInterval(UpdateClock, 500);
+}
+
+function KillClock() {
+  clearTimeout(clockID);
+}
+window.onload=function() {
+  StartClock();
+}
+
+/*-------------------------------
+
+03. DATE-PICKER
+
+--------------------------------*/
+
+
+$('#e_date_picker').datepicker({
+    autoclose: true
+});
+
+$('#e_date_picker').on('show', function(e){
+    console.debug('show', e.date, $(this).data('stickyDate'));
+    
+    if ( e.date ) {
+         $(this).data('stickyDate', e.date);
+    }
+    else {
+         $(this).data('stickyDate', null);
+    }
+});
+
+$('#e_date_picker').on('hide', function(e){
+    console.debug('hide', e.date, $(this).data('stickyDate'));
+    var stickyDate = $(this).data('stickyDate');
+    
+    if ( !e.date && stickyDate ) {
+        console.debug('restore stickyDate', stickyDate);
+        $(this).datepicker('setDate', stickyDate);
+        $(this).data('stickyDate', null);
+    }
+});
+
+
+});
+

includes/footer.php

+	
+	<!-- FOOTER-START -->
+	
+	<footer class="e_main_footer">
+	</footer>
+	
+	<!-- INCLUDED-JAVASCRIPTS -->
+	
+	<script src="../assets/js/jquery-3.2.1.min.js"></script>
+    <script src="../assets/js/jquery-3.2.1.slim.min.js"></script>
+    <script src="../assets/js/popper.min.js"></script>
+    <script src="../assets/js/bootstrap.min.js"></script>
+	<script src="../assets/js/material.min.js"></script>
+	<script src="../assets/js/bootstrap-datepicker.js"></script>
+	<script src="../assets/js/custom.js"></script>
+	<script src="https://use.fontawesome.com/b0a450f77f.js"></script>
+	
+	<!-- END-INCLUDED-JAVASCRIPTS -->
+	
+</body>
+</html>
+
+	<!-- END-FOOTER -->
\ No newline at end of file

includes/header.php

+
+	<!-- HEADER-START -->
+
+<!DOCTYPE html>
+
+<html lang="en">
+
+	<head>
+		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta name="description" content="">
+		<meta name="author" content="">
+		<link rel="icon" href="../assets/img/e_logo_nav_bar.png">
+
+	<!-- WEB-TITLE -->
+
+		<title>E Office Portal</title>
+
+    <!-- INCLUDED-CASCADE-STYLE-SHEETS -->
+
+		<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
+		<link href="../assets/css/custom.css" rel="stylesheet">
+		<link href="../assets/css/theme.css" rel="stylesheet">
+		<link href="../assets/css/responsive.css" rel="stylesheet">
+		<link href="../assets/css/material.min.css" rel="stylesheet">
+		<link href="../assets/css/datepicker3.css" rel="stylesheet">
+		<link href="../assets/css/font-awesome.min.css" rel="stylesheet">
+	</head>
+
+	<body class="widthFull heightFull">
+
+	<!-- NAVIGATION-BAR -->
+
+    <nav class="navbar navbar-expand-md fixed-top e_main_navbar">
+
+    <!-- NAVIGATION-CONTAINER -->
+
+		<div class="container custom_container">
+			<a class="navbar-brand" href="home_index.php"><img class="e_logo_expand" src="../assets/img/e_logo_nav_bar.png"><img class="e_logo_shrink" src="../assets/img/e_logo_shrink.png"></a>
+			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+				<span class="navbar-toggler-icon"></span>
+			</button>
+			<div class="collapse navbar-collapse" id="navbarsExampleDefault">
+				<div class="container">
+					<div class="e_profile_account floatRight" id="menu7">
+						<div class="e_nav_profile_pic floatRight">
+							<span><img src="../assets/img/e_drop_down_orange.png"></span>
+						</div>
+						<div class="e_nav_profile floatRight">
+							<p>Sophia Lewis</p>
+						</div>
+						<ul class="e_account_drop mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="menu7">
+							<a href="myprofile.php">
+								<li><i class="fa fa-user" aria-hidden="true"></i>My Profile</li>
+							</a>
+							<li><i class="fa fa-key" aria-hidden="true"></i>Change Password</li>
+							<a href="editprofile.php">
+								<li class="mdl-menu__item--full-bleed-divider"><i class="fa fa-pencil" aria-hidden="true"></i>Edit Profile</li>
+							</a>
+							<li><i class="fa fa-sign-out" aria-hidden="true"></i>Logout</li>
+						</ul>
+					</div>
+
+
+	<!-- NAVIGATION-MENU-LIST -->
+
+					<div  class="e_nav_bar_menu_list">
+						<ul>
+							<li><a class="text_color_white">Welcome</a></li>
+							<li id="menu1">Attendence<span><img src="../assets/img/e_drop_down.png"></span></li>
+								<ul class="e_nav_menu_drop_down mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="menu1">
+								  <li>
+								  	<a href="attendence.php">
+								  Daily Attendence
+								  	</a>
+								  </li>
+								  <li>
+								  	<a href="custom_attendence.php">
+								  Custom Attendence
+								  	</a>
+								  </li>
+								</ul>
+							<li id="menu2">Work<span><img src="../assets/img/e_drop_down.png"></span></li>
+								<ul class="e_nav_menu_drop_down mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="menu2">
+								  <li>Work Status</li>
+								  <li>
+								  	<a href="temp_work_status.php">
+								  Temporary Work Status
+								  	</a>
+								  </li>
+								</ul>
+							<li id="menu3">Leave<span><img src="../assets/img/e_drop_down.png"></span></li>
+								<ul class="e_nav_menu_drop_down mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="menu3">
+								  <li>
+								  	<a href="apply_leave.php">
+								  Apply Leave
+								  	</a>
+								  </li>
+								  <li>
+								  	<a href="leave_status.php">
+								  Leave Status
+									</a>
+								</li>
+								  <li>
+								  	<a href="leave_summary.php">
+								  Leave Summary
+								  	</a>
+								</li>
+								</ul>
+							<li id="menu4">View<span><img src="../assets/img/e_drop_down.png"></span></li>
+								<ul class="e_nav_menu_drop_down mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="menu4">
+								  <li>
+								  	<a href="thought_of_day.php">
+								  	Though of the Day
+								  	</a>
+								  </li>
+								  <li>Appreciation</li>
+								  <li>
+								  	<a href="view_birthday.php">
+								  Birthday
+									</a>
+									</li>
+								  <li>
+								  	<a href="view_annoucement.php">
+								  Announcement
+									</a>
+								  </li>
+								  <li>
+								  	<a href="view_events.php">
+								  Events
+								  	</a>
+								</li>
+								</ul>
+							<li id="menu5">Reports<span><img src="../assets/img/e_drop_down.png"></span></li>
+								<ul class="e_nav_menu_drop_down mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="menu5">
+								  <li>
+								  	<a href="attendence_report.php">
+								  My Attendence
+									</a>
+								  </li>
+								  <li>
+								  	<a href="work_report.php">
+								  My Work Report
+								  	</a>
+									</li>
+								</ul>
+							<li id="menu6">Project<span><img src="../assets/img/e_drop_down.png"></span></li>
+								<ul class="e_nav_menu_drop_down mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="menu6">
+								  <li>
+								  	<a href="myproject.php">
+								  My Projects
+									</a>
+								</li>
+	
+								</ul>
+							<div class="clear"></div>
+						</ul>
+					</div>
+
+	<!-- NAVIGATION-MENU-LIST-ENDS -->	
+				
+					<div class="clear"></div>
+				</div>
+			</div>
+		</div>
+
+	<!-- NAVIGATION-CONTAINER-ENDS -->
+
+    </nav>
+
+	<!-- END-NAVIGATION-BAR -->
+
+	<!-- END-HEADER -->
+
+	<!-- CHANGE-PASSWORD-MODAL-STARTS-->
+
+	<div id="changepass" class="modal fade" role="dialog">
+	  	<div class="modal-dialog">
+	    	<div class="modal-content e_change_password_modal_content">
+	      		<div class="e_change_password_modal_container">
+	        		<div class="e_content_head">
+						<div class="e_title_circle color1 floatLeft">
+							<img src="../assets/img/e_lock.png">
+						</div>
+						<h5 class="floatLeft">Change Password</h5>
+						<div class="clear"></div>				
+					</div>
+					<div class="e_change_password_content">
+						<div class="e_change_pass_row">
+							<p>Old Password</p>
+							<input class="e_change_pass_input" placeholder="Old Password">
+						</div>
+						<div class="e_change_pass_row">
+							<p>New Password</p>
+							<input class="e_change_pass_input" placeholder="New Password">
+						</div>
+						<div class="e_change_pass_row">
+							<p>Confirm New Password</p>
+							<input class="e_change_pass_input" placeholder="Confirm New Password">
+						</div>
+						<div class="e_change_pass_row">
+							<div class="row">
+								<div class="col-md-6"><button class="e_change_pass_submit" data-dismiss="modal">Submit</button></div>
+								<div class="col-md-6"><button class="e_change_pass_reset" data-dismiss="modal">Reset</button></div>
+							</div>
+						</div>
+					</div>
+	      		</div>
+	   		 </div>
+	  	</div>
+	</div>
+
+    <!-- ENDS-CHANGE-PASSWORD-MODAL-->

pages/apply_leave.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull heightFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Apply Leave
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+	<!-- APPLY-LEAVE-HEAD -->
+
+						<div class="e_content_head theme_grey">
+							<div class="e_title_circle color1 floatLeft">
+								<img src="../assets/img/e_p5.png">
+							</div>
+							<h5 class="floatLeft">Leave Management</h5>
+							<div class="clear"></div>				
+						</div>
+
+
+	<!-- ENDS-APPLY-LEAVE-HEAD -->
+
+	<!-- APPLY-LEAVE-CONTENT -->
+
+						<div class="e_apply_leave_content">
+							<div class="row">
+								<div class="col-md-3">
+									<div class="e_apply_leave_text">
+										Leave Permission<br>
+										<strong class="color1">2</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text">
+										Carry Left<br>
+										<strong class="color2">0</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text">
+										Leave Taken<br>
+										<strong class="color2">0</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text borderNone">
+										Remaining Leave<br>
+										<strong class="color3">1</strong>
+									</div>
+								</div>
+								<div class="col-md-3">
+									<button class="e_work_add_btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect floatRight" data-toggle="modal" data-target="#e_applyleave">Apply<i class="fa fa-check" aria-hidden="true"></i></button>
+
+	<!-- APPLY-LEAVE-MODAL -->
+									
+										<div id="e_applyleave" class="modal fade" role="dialog">
+											<div class="modal-dialog">
+											    <div class="modal-content e_apply_leave_modal">
+											     	<div class="e_apply_leave_container">
+											   	 		<div class="e_content_head">
+															<div class="e_title_circle color1 floatLeft">
+																<img src="../assets/img/e_p6.png">
+															</div>
+															<h5 class="floatLeft">Leave apply details info</h5>
+															<div class="clear"></div>				
+														</div>
+														<div class="e_apply_modal_description">
+															<div class="row">
+																<div class="col-md-6">
+																	<p>Leave Date</p>
+																	<input class="e_apply_modal_input" id="e_date_picker" type="text" placeholder="dd mm yyyy">
+																</div>
+																<div class="col-md-6 p0">
+																	<p>Leave Type</p>
+																	<div class="e_radio_button_div">
+																		<label class="e_radio_button inline"> 
+																			   <input type="radio" name="report" value="summary" checked>
+																			   <span>Full Day</span> 
+																		</label>
+																		<label class="e_radio_button inline"> 
+																			    <input type="radio" name="report" value="detailed">
+																			    <span>Half Day</span> 
+										  								</label>
+																	</div>
+																</div>
+															</div>
+															<br>
+															<div class="row">
+																<div class="col-md-12">
+																	<p>Leave Reason</p>
+																	<textarea class="e_apply_modal_textarea" rows="4"></textarea>
+																</div>
+															</div>
+															<div class="row">
+																<div class="col-md-12">
+																	<button class="e_apply_modal_submit">Submit</button>
+																</div>
+															</div>
+														</div>
+										   	 		</div>
+											    </div>
+											</div>
+										</div>
+
+	<!-- ENDS-APPLY-LEAVE-MODAL -->
+
+									<div class="clear"></div>	
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-APPLY-LEAVE-CONTENT -->
+
+					</div>
+				</div>
+			</div>
+
+	<!-- ENDS-PARTITION -->
+
+	<!-- LEAVE-DETAILS -->
+
+			<div class="e_leave_details">
+				<div class="row">
+					<div class="col-md-8">
+
+	<!-- LEAVE-INFORMATION -->
+
+						<div class="e_leave_information">
+
+	<!-- LEAVE-INFORMATION-HEAD -->
+
+							<div class="e_content_head theme_grey">
+								<div class="e_title_circle color1 floatLeft">
+									<img src="../assets/img/e_p6.png">
+								</div>
+								<h5 class="floatLeft">Leave Information</h5>
+								<div class="clear"></div>				
+							</div>
+
+	<!-- ENDS-LEAVE-INFORMATION-HEAD -->
+
+	<!-- OFFICE-HOLIDAY-LIST -->
+
+							<div class="e_office_holiday_list">
+								<div class="row">
+									<div class="col-md-6">
+										<div class="e_year_title">
+											<p>2015</p>
+											<h6>Techware Holiday List</h6>
+										</div>										
+									</div>
+									<div class="col-md-6">
+										<button class="e_holiday_info_btn">Holiday Info</button>
+									</div>
+								</div>
+								<ul>
+									<li>
+										<div class="row">
+											<div class="col-md-1">
+												<h5>SI#</h5>
+											</div>
+											<div class="col-md-11">
+												<h5>National Holidays - 2015</h5>
+											</div>
+										</div>
+									</li>
+									<li>
+										<div class="row">
+											<div class="col-md-1">
+												<p>1</p>
+											</div>
+											<div class="col-md-3">
+												<p>26th January, 2015</p>
+											</div>
+											<div class="col-md-3">
+												<p>Republic Day</p>
+											</div>
+											<div class="col-md-5">
+												<p>Monday</p>
+											</div>
+										</div>
+									</li>
+									<li>
+										<div class="row">
+											<div class="col-md-1">
+												<p>2</p>
+											</div>
+											<div class="col-md-3">
+												<p>26th January, 2015</p>
+											</div>
+											<div class="col-md-3">
+												<p>Republic Day</p>
+											</div>
+											<div class="col-md-5">
+												<p>Monday</p>
+											</div>
+										</div>
+									</li>
+									<li>
+										<div class="row">
+											<div class="col-md-1">
+												<p>3</p>
+											</div>
+											<div class="col-md-3">
+												<p>26th January, 2015</p>
+											</div>
+											<div class="col-md-3">
+												<p>Republic Day</p>
+											</div>
+											<div class="col-md-5">
+												<p>Monday</p>
+											</div>
+										</div>
+									</li>
+									<li>
+										<div class="row">
+											<div class="col-md-1">
+												<p>4</p>
+											</div>
+											<div class="col-md-3">
+												<p>26th January, 2015</p>
+											</div>
+											<div class="col-md-3">
+												<p>Republic Day</p>
+											</div>
+											<div class="col-md-5">
+												<p>Monday</p>
+											</div>
+										</div>
+									</li>
+									<li>
+										<div class="row">
+											<div class="col-md-1">
+												<p>5</p>
+											</div>
+											<div class="col-md-3">
+												<p>26th January, 2015</p>
+											</div>
+											<div class="col-md-3">
+												<p>Republic Day</p>
+											</div>
+											<div class="col-md-5">
+												<p>Monday</p>
+											</div>
+										</div>
+									</li>
+								</ul>
+							</div>
+
+	<!-- ENDS-OFFICE-HOLIDAY-LIST -->
+	
+						</div>
+
+	<!-- ENDS-LEAVE-INFORMATION -->
+
+					</div>
+					<div class="col-md-4">
+
+	<!-- SPECIAL-NOTES -->
+
+						<div class="e_special_notes">
+
+	<!-- SPECIAL-NOTES-HEAD -->
+
+							<div class="e_content_head">
+								<div class="e_title_circle color1 floatLeft">
+									<img src="../assets/img/e_p6.png">
+								</div>
+								<h5 class="floatLeft">Special Notes</h5>
+								<div class="clear"></div>				
+							</div>
+
+	<!-- ENDS-SPECIAL-NOTES -->
+
+	<!-- SPECIAL-NOTES-DETAILS -->
+
+							<div class="e_special_notes_details">
+								<ul>
+									<li>
+										December 24 - to be worked on 12th December (Before Christmas), who are needed.
+										
+									</li>
+									<li>
+										December 24 - to be worked on 12th December (Before Christmas), who are needed.
+										
+									</li>
+								</ul>
+							</div>
+
+	<!-- ENDS-SPECIAL-NOTES-DETAILS -->
+
+						</div>
+
+	<!-- ENDS-SPECIAL-NOTES -->
+
+					</div>
+				</div>
+			</div>
+
+	<!-- ENDS-LEAVE-DETAILS -->
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+
+
+
+
+
+
+
+

pages/attendence.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Daily Attendence
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+		<div class="row">
+
+	<!-- LEFT-PART-FEEDS -->
+
+			<div class="col-md-8">
+				<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+					<div class="e_current_time">
+						<p>Current Time</p>
+						<h3><span id="theTime"></span>
+						</h3>
+
+					</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+	<!-- ATTENDENCE-FOR-THE-DAY-DIV -->
+
+					<div class="e_attendence_for_day">
+						<p>Attendence for the day<strong>02 May 2017 </strong></p>
+					</div>
+
+	<!-- ENDS-ATTENDENCE-FOR-THE-DAY-DIV -->
+
+	<!-- ATTENDENCE-FROM-TO-DIV -->
+
+					<div class="e_attendence_from_to_div">
+						<div class="row m0">
+							<div class="col-md-5 col-xs-5 p0">
+								<div class="e_attendence_from">
+									<h4>Working Hours</h4>
+									<p>08 : 00 <strong>hrs</strong></p>
+								</div>
+							</div>
+							<div class="col-md-7 col-xs-7 p0">
+								<div class="e_attendence_to">
+									<h4>Last Punchin Time</h4>
+									<p>08 : 30 am</p>
+								</div>
+							</div>
+						</div>
+					</div>
+
+	<!-- ENDS-ATTENDENCE-FROM-TO-DIV -->
+
+	<!-- REMARKS-DIV -->
+
+					<div class="e_attendence_remarks">
+						<textarea class="e_attendence_textarea" rows="4" placeholder="Enter your remarks"></textarea>
+					</div>
+
+	<!-- ENDS-REMARKS-DIV -->
+
+	<!-- MARK-BUTTONS -->
+
+					<div class="e_marks_btn_bay">
+						<button class="e_mark_in floatLeft mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Mark in <i class="fa fa-sign-in" aria-hidden="true"></i></button>
+						<button class="e_mark_out floatRight mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Mark Out<i class="fa fa-sign-out" aria-hidden="true"></i></button>
+						<div class="clear"></div>
+					</div>
+					<div class="e_marks_btn_bay">
+						<a href="custom_attendence.php">
+						<button class="e_mark_custom floatLeft mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Custom</button>
+						</a>
+						<div class="clear"></div>
+					</div>
+
+	<!-- ENDS-MARKS-BUTTONS -->
+
+				</div>
+			</div>
+
+	<!-- ENDS-LEFT-PART-FEEDS -->
+
+	<!-- RIGHT-PART-INFO -->
+
+			<div class="col-md-4">
+				<div class="e_content_wrapper">
+
+	<!-- EVENT-INFO-HEADER -->
+
+					<div class="e_content_head">
+						<div class="e_title_circle color1 floatLeft">
+							<img src="../assets/img/e_info.png">
+						</div>
+						<h5 class="floatLeft">Announcement</h5>
+						<p class="floatRight">See all<span><img src="../assets/img/e_see_all.png"></span></p>
+						<div class="clear"></div>				
+					</div>
+
+	<!-- ENDS-EVENT-INFO-HEADER -->
+
+	<!-- ANNOUNCEMENT-DIV -->
+
+					<div class="e_announcement_div">
+						<div class="e_feed_title">
+							<div class="e_feed_btm">
+								<div class="e_feed_daten_time floatLeft m0">
+										<span><img src="../assets/img/e_timeout.png"></span>
+										<span>20&nbsp;/&nbsp;05&nbsp;/&nbsp;2017</span>
+										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+										<span>10&nbsp;:&nbsp;00&nbsp;am</span>
+								</div>
+							</div>
+							<div class="e_feed_inner floatLeft p0">
+								<h4>Eoffice Attendance Marking - Mandatory</h4>
+							</div>
+							<div class="clear"></div>
+						</div>
+						<div class="e_feed_content p0">
+							<div class="e_feeds_messages">
+								<p>Hi Team, </p>
+								<p>It has been observed most employees were using “Custom Attendance”option in Eoffice for marking attendance instead of “Daily Attendance”. </p>
+								<p>Custom Attendance markings can be used only when there are any Eoffice or network problems you are facing at the time of login. It must be done with proper explanation of reason with the approval of your respective Team Lead or appropriate person. </p>
+								<p>Kindly take a note of the same.Looking forward for a positive outcome.</p>
+								<p>Regards<br>
+								HR</p>
+							</div>
+							<div class="e_feed_btm">
+								<div class="e_feed_view floatLeft">View</div>
+								<div class="clear"></div>
+							</div>
+						</div>
+					</div>
+
+	<!-- ENDS-ANNOUCEMENT-DIV -->
+
+				</div>
+			</div>
+
+	<!-- ENDS-RIGHT-PART-INFO -->
+
+		</div>
+
+	<!-- ENDS-PARTITION -->
+
+	<!-- TIME-ZONE-DIV -->
+
+		<div class="e_time_zones">
+		<hr>
+			<ul>
+				<li>
+					<h6>US</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag1.png">
+					</div>
+					<p>02:00 am</p>
+				</li>
+				<li>
+					<h6>Britain</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag2.png">
+					</div>
+					<p>02:00 am</p>
+				</li>
+				<li>
+					<h6>Holand</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag3.png">
+					</div>
+					<p>02:00 am</p>
+				</li>
+				<li>
+					<h6>US</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag4.png">
+					</div>
+					<p>02:00 am</p>
+				</li>
+				<li>
+					<h6>US</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag5.png">
+					</div>
+					<p>02:00 am</p>
+				</li>
+				<li>
+					<h6>US</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag6.png">
+					</div>
+					<p>02:00 am</p>
+				</li>
+				<li>
+					<h6>US</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag7.png">
+					</div>
+					<p>02:00 am</p>					
+				</li>
+				<li>
+					<h6>US</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag8.png">
+					</div>
+					<p>02:00 am</p>
+				</li>
+				<li>
+					<h6>US</h6>
+					<div class="e_flag">
+						<img src="../assets/img/e_flag9.png">
+					</div>
+					<p>02:00 am</p>
+				</li>
+			</ul>
+		</div>
+
+	<!-- ENDS-TIME-ZONE-DIV -->	
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/attendence_report.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				My Attendence Status
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+			<hr>
+
+	<!-- ATTENDENCE-STATUS -->
+
+			<div class="e_attendence_status">
+				<div class="row">
+					<div class="col-md-8">
+						<p>Select month and year to generate report</p>
+						<div class="row">
+							<div class="col-md-4"><h6>Select Month</h6></div>
+							<div class="col-md-4"><h6>Select Year</h6></div>
+							<div class="col-md-4"></div>
+						</div>
+						<div class="row">
+							<div class="col-md-4">
+								<select class="e_attendence_select">
+									<option>Month</option>
+								</select>
+							</div>
+							<div class="col-md-4">
+								<select class="e_attendence_select">
+									<option>Year</option>
+								</select>	
+							</div>
+							<div class="col-md-1"></div>
+							<div class="col-md-3 textRight">
+								<button class="e_attendence_submit mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Submit</button>
+							</div>
+						</div>
+						<br>
+						<p>Users Attendance Report Info</p>
+						<div class="row">
+							<div class="col-md-8">
+								<div class="e_attendence_report_info">
+									<div class="e_attendence_report_pic">
+										<img src="../assets/img/e_pic3.jpg">
+									</div>
+									<div class="e_attendence_report_detail">
+										<ul>
+											<li>
+												<div class="child1">Username</div>
+												<div class="child2">:&nbsp;&nbsp;&nbsp;&nbsp;James Walton</div>
+												<div class="clear"></div>
+											</li>
+											<li>
+												<div class="child1">Employee ID</div>
+												<div class="child2">:&nbsp;&nbsp;&nbsp;&nbsp;TWS 123</div>
+												<div class="clear"></div>
+											</li>
+											<li>
+												<div class="child1">Report month/Year</div>
+												<div class="child2">:&nbsp;&nbsp;&nbsp;&nbsp;May 2017</div>
+												<div class="clear"></div>
+											</li>
+										</ul>
+									</div>
+									<div class="clear"></div>
+								</div>
+							</div>
+							<div class="col-md-4"></div>
+						</div>
+					</div>
+					<div class="col-md-4"></div>
+				</div>
+				<br>
+				<br>
+				<div class="row">
+					<div class="col-md-12">
+
+	<!-- LEAVE-STATUS-TABLES -->
+
+						<div class="e_leave_status_table">
+
+	<!-- LEAVE-STATUS-HEAD -->
+
+							<div class="e_leave_status_head">
+								<div class="row">
+									<div class="col-md-1">
+										<select class="e_leave_status_sl">
+											<option>10</option>
+											<option>20</option>
+										</select>
+									</div>
+									<div class="col-md-2"><span>Sort by:</span>
+										<select class="e_leave_status_sort">
+											<option>Date</option>
+											<option>Time</option>
+										</select>
+									</div>
+									<div class="col-md-5"></div>
+									<div class="col-md-4">
+										<div class="e_leave_search_box">
+											<input class="e_leave_search_input" placeholder="Search here">
+										</div>
+									</div>
+								</div>
+							</div>
+
+	<!-- ENDS-LEAVE-STATUS-HEAD -->
+
+	<!-- LEAVE-STATUS-TABLE-DIV -->
+
+							<div class="table-responsive">          
+							  	<table class="table">
+							    	<thead>
+							      		<tr>
+									        <th>SL</th>
+									        <th>Signin Date</th>
+									        <th>Sigin Time</th>
+									        <th>Sigout Time</th>
+									        <th>Working Hours</th>
+									        <th>Signin Note</th>
+									        <th>Signout Note</th>
+									        <th>Status</th>
+							      		</tr>
+							    	</thead>
+								    <tbody>
+								      <tr>
+								        <td>01</td>
+								        <td>05-May-2017</td>
+								        <td>08:40 am</td>
+								        <td>06:00 pm</td>
+								        <td>09 hrs 30 mins</td>
+								        <td>No Internet</td>
+								        <td>Meeting</td>
+								        <td><div class="e_completed">Complete<i class="fa fa-check" aria-hidden="true"></i></div></td>
+								      </tr>
+								      <tr>
+								        <td>02</td>
+								        <td>05-May-2017</td>
+								        <td>08:40 am</td>
+								        <td>06:00 pm</td>
+								        <td>09 hrs 30 mins</td>
+								        <td>No Internet</td>
+								        <td>Meeting</td>
+								        <td><div class="e_holiday">Holiday<i class="fa fa-circle-o" aria-hidden="true"></i></div></td>
+								      </tr>
+								       <tr>
+								        <td>03</td>
+								        <td>05-May-2017</td>
+								        <td>08:40 am</td>
+								        <td>06:00 pm</td>
+								        <td>09 hrs 30 mins</td>
+								        <td>No Internet</td>
+								        <td>Meeting</td>
+								        <td><div class="e_leave">Leave<i class="fa fa-info" aria-hidden="true"></i></div></td>
+								      </tr>
+								    </tbody>
+							  	</table>
+			 				</div>
+
+
+	<!-- ENDS-LEAVE-STATUS-TABLE-DIV -->
+
+						</div>
+
+	<!-- APPLY-LEAVE-CONTENT -->
+
+						<div class="e_apply_leave_content pl0 pr0">
+							<div class="row">
+								<div class="col-md-2">
+									<div class="e_apply_leave_text">
+										Total Working Hours<br>
+										<strong class="color1">210:20:40</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text">
+										Incomplete Days<br>
+										<strong class="color3">0</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text">
+										Late Puchin Days<br>
+										<strong class="color3">0</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text">
+										Completed Days<br>
+										<strong class="color5">20</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text">
+										Total Leave<br>
+										<strong class="color4">1</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text borderNone">
+										Total Holidays<br>
+										<strong class="color2">1</strong>
+									</div>
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-APPLY-LEAVE-CONTENT -->
+
+					</div>
+				</div>
+			</div>
+
+	<!-- ENDS-ATTENDENCE-STATUS -->
+	
+	<!-- ENDS-PARTITION -->
+
+
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/custom_attendence.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Custom Attendence
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+
+	<!-- LEFT-PART-FEEDS -->
+
+				<div class="col-md-8">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<p>Current Time</p>
+							<h3><span id="theTime"></span></h3>
+
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+	<!-- ATTENDENCE-FOR-THE-DAY-DIV -->
+
+						<div class="e_attendence_for_day">
+							<p>Attendence for the day<strong>02 May 2017 </strong></p>
+						</div>
+
+	<!-- ENDS-ATTENDENCE-FOR-THE-DAY-DIV -->
+
+	<!-- ATTENDENCE-FROM-TO-DIV -->
+
+						<div class="e_attendence_from_to_div">
+							<div class="row m0">
+								<div class="col-md-5 col-xs-5 p0">
+									<div class="e_attendence_from">
+										<h4>Working Hours</h4>
+										<p>08 : 00 <strong>hrs</strong></p>
+									</div>
+								</div>
+								<div class="col-md-7 col-xs-7 p0">
+									<div class="e_attendence_to">
+										<h4>Last Punchin Time</h4>
+										<p>08 : 30 am</p>
+									</div>
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-ATTENDENCE-FROM-TO-DIV -->
+
+	<!-- REMARKS-DIV -->
+
+						<div class="e_attendence_remarks">
+							<textarea class="e_attendence_textarea" rows="4" placeholder="Enter your remarks"></textarea>
+						</div>
+
+	<!-- ENDS-REMARKS-DIV -->
+
+	<!-- MARK-BUTTONS -->
+
+						<div class="e_marks_btn_bay">
+							<p>Time Picker</p>
+							<div class="e_time_picker_div">
+								<select class="e_time_picker">
+									<option>01</option>						
+								</select>
+								<span>:</span>
+								<select class="e_time_picker">
+									<option>01</option>									
+								</select>
+							</div>
+							<div class="clear"></div>
+							<button class="e_mark_in floatLeft mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Custom Mark in <i class="fa fa-sign-in" aria-hidden="true"></i></button>
+							<button class="e_mark_custom_out floatRight mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Custom Mark Out<i class="fa fa-sign-out" aria-hidden="true"></i></button>
+							<div class="clear"></div>
+						</div>
+
+	<!-- ENDS-MARKS-BUTTONS -->
+
+					</div>
+				</div>
+
+	<!-- ENDS-LEFT-PART-FEEDS -->
+
+	<!-- RIGHT-PART-INFO -->
+
+				<div class="col-md-4">
+					<div class="e_content_wrapper">
+
+	<!-- EVENT-INFO-HEADER -->
+
+						<div class="e_content_head">
+							<div class="e_title_circle color1 floatLeft">
+								<img src="../assets/img/e_info.png">
+							</div>
+							<h5 class="floatLeft">Announcement</h5>
+							<p class="floatRight">See all<span><img src="../assets/img/e_see_all.png"></span></p>
+							<div class="clear"></div>				
+						</div>
+
+	<!-- ENDS-EVENT-INFO-HEADER -->
+
+	<!-- ANNOUNCEMENT-DIV -->
+
+						<div class="e_announcement_div">
+							<div class="e_feed_title">
+								<div class="e_feed_btm">
+									<div class="e_feed_daten_time floatLeft m0">
+											<span><img src="../assets/img/e_timeout.png"></span>
+											<span>20&nbsp;/&nbsp;05&nbsp;/&nbsp;2017</span>
+											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+											<span>10&nbsp;:&nbsp;00&nbsp;am</span>
+									</div>
+								</div>
+								<div class="e_feed_inner floatLeft p0">
+									<h4>Eoffice Attendance Marking - Mandatory</h4>
+								</div>
+								<div class="clear"></div>
+							</div>
+							<div class="e_feed_content p0">
+								<div class="e_feeds_messages">
+									<p>Hi Team, </p>
+									<p>It has been observed most employees were using “Custom Attendance”option in Eoffice for marking attendance instead of “Daily Attendance”. </p>
+									<p>Custom Attendance markings can be used only when there are any Eoffice or network problems you are facing at the time of login. It must be done with proper explanation of reason with the approval of your respective Team Lead or appropriate person. </p>
+									<p>Kindly take a note of the same.Looking forward for a positive outcome.</p>
+									<p>Regards<br>
+									HR</p>
+								</div>
+								<div class="e_feed_btm">
+									<div class="e_feed_view floatLeft">View</div>
+									<div class="clear"></div>
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-ANNOUCEMENT-DIV -->
+
+					</div>
+				</div>
+
+	<!-- ENDS-RIGHT-PART-INFO -->
+
+			</div>
+
+	<!-- ENDS-PARTITION -->
+
+	<!-- TIME-ZONE-DIV -->
+
+			<div class="e_time_zones">
+			<hr>
+				<ul>
+					<li>
+						<h6>US</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag1.png">
+						</div>
+						<p>02:00 am</p>
+					</li>
+					<li>
+						<h6>Britain</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag2.png">
+						</div>
+						<p>02:00 am</p>
+					</li>
+					<li>
+						<h6>Holand</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag3.png">
+						</div>
+						<p>02:00 am</p>
+					</li>
+					<li>
+						<h6>US</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag4.png">
+						</div>
+						<p>02:00 am</p>
+					</li>
+					<li>
+						<h6>US</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag5.png">
+						</div>
+						<p>02:00 am</p>
+					</li>
+					<li>
+						<h6>US</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag6.png">
+						</div>
+						<p>02:00 am</p>
+					</li>
+					<li>
+						<h6>US</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag7.png">
+						</div>
+						<p>02:00 am</p>					
+					</li>
+					<li>
+						<h6>US</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag8.png">
+						</div>
+						<p>02:00 am</p>
+					</li>
+					<li>
+						<h6>US</h6>
+						<div class="e_flag">
+							<img src="../assets/img/e_flag9.png">
+						</div>
+						<p>02:00 am</p>
+					</li>
+				</ul>
+			</div>
+
+	<!-- ENDS-TIME-ZONE-DIV -->	
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/editprofile.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Edit Profile
+			</div>
+
+	<!-- EDIT-PROFILE-BANNER-STARTS -->
+
+			<div class="e_edit_profile_banner">
+				<div class="e_edit_profile_pic floatLeft">
+					<div class="e_profile_detail_pic_overlay"></div>
+					<img src="../assets/img/e_pic4.jpg">
+				</div>
+				<div class="e_edit_profile_detail floatLeft">
+					<h3>Ann Alexander</h3>
+					<h5>Software Developer</h5>
+					<p>EMP ID: TWS 134</p>
+				</div>
+				<div class="clear"></div>
+			</div>
+
+	<!-- ENDS-EDIT-PROFILE-BANNER-STARTS -->
+
+	<!-- EDIT-PROFILE-DETAIL-STARTS -->
+
+			<div class="e_edit_profile_detail_div">
+				<div class="row">
+					<div class="col-md-5">
+						<div class="e_edit_profile_section">
+							<div class="e_edit_profile_row">
+								<p>Name</p>
+								<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+									<input class="mdl-textfield__input e_edit_input" type="text" id="sample1">
+									<label class="mdl-textfield__label e_edit_input_label" for="uname">Ann Alexander</label>
+								</div>
+							</div>
+							<div class="e_edit_profile_row">
+								<p>Gender</p>
+								<div class="e_radio_button_div">
+									<label class="e_radio_button inline"> 
+									    <input type="radio" name="report" value="summary" checked>
+									    <span>Male</span> 
+									</label>
+									<label class="e_radio_button inline"> 
+									    <input type="radio" name="report" value="detailed">
+									    <span>Female</span> 
+  									</label>
+								</div>
+							</div>
+							<div class="e_edit_profile_row">
+								<p>Email</p>
+								<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+									<input class="mdl-textfield__input e_edit_input" type="text" id="sample1">
+									<label class="mdl-textfield__label e_edit_input_label" for="uname">[email protected]</label>
+								</div>
+							</div>
+							<div class="e_edit_profile_row">
+								<p>Address</p>
+								<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+									<textarea class="mdl-textfield__input e_edit_input" type="text" id="sample1" rows="4" style="height:auto;"></textarea>
+									<label class="mdl-textfield__label e_edit_input_label" for="uname">Dummy Address</label>
+								</div>
+							</div>
+							<div class="e_edit_profile_row">
+								<p>Date of Birth</p>
+								<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+									<input class="mdl-textfield__input e_edit_input" type="text" id="sample1">
+									<label class="mdl-textfield__label e_edit_input_label" for="uname">13 - 04 - 1993</label>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="col-md-6">
+						<div class="e_edit_profile_section borderNone">
+							<div class="e_edit_profile_row">
+								<p>Qualification</p>
+								<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+									<input class="mdl-textfield__input e_edit_input" type="text" id="sample1">
+									<label class="mdl-textfield__label e_edit_input_label" for="uname">B tech ComputerScience Engineering</label>
+								</div>
+							</div>
+							<div class="e_edit_profile_row">
+								<p>Phone number</p>
+								<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+									<input class="mdl-textfield__input e_edit_input" type="text" id="sample1">
+									<label class="mdl-textfield__label e_edit_input_label" for="uname">+91 9961531199</label>
+								</div>
+							</div>
+							<div class="e_edit_profile_row">
+								<p>Blood Group</p>
+								<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+									<input class="mdl-textfield__input e_edit_input" type="text" id="sample1">
+									<label class="mdl-textfield__label e_edit_input_label" for="uname">A+</label>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+	<!-- ENDS-EDIT-PROFILE-DETAIL -->
+
+	<!-- EDIT-PROFILE-BUTTON-BAY -->
+
+			<div class="e_edit_profile_btn_bay">
+				<button class="e_save_changes_btn">Save changes<img src="../assets/img/e_check.png"></button>
+				<button class="e_reset_btn">Reset</button>
+			</div>
+
+
+	<!-- ENDS-EDIT-PROFILE-BUTTON-BAY -->
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/home_index.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Welcome <a>Sophia Lewis..</a>
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+		<div class="row">
+
+	<!-- LEFT-PART-FEEDS -->
+
+			<div class="col-md-8">
+				<div class="e_content_wrapper">
+
+	<!-- FEEDS-HEADER -->
+
+					<div class="e_content_head theme_grey">
+						<div class="e_title_circle color1 floatLeft">
+							<img src="../assets/img/e_feeds.png">
+						</div>
+						<h5 class="floatLeft">Techware Feeds</h5>
+						<div class="clear"></div>				
+					</div>
+
+	<!-- END-FEEDS-HEADER -->
+
+					<div class="e_content_feed_list">
+
+	<!-- FEEDS-LIST -->
+
+						<ul>
+							<li>
+								<div class="e_feed_title">
+									<div class="e_title_circle color2 floatLeft">
+										<img src="../assets/img/e_info.png">
+									</div>
+									<div class="e_feed_inner floatLeft">
+										<h6>Announcement Title:</h6>
+										<h4>Eoffice Attendance Marking - Mandatory</h4>
+									</div>
+									<div class="clear"></div>
+								</div>
+								<div class="e_feed_content">
+									<h6>Announcement Info:</h6>
+									<div class="e_feeds_image">
+										<ul>
+											<li><img src="../assets/img/e_office1.png"></li>
+											<li><img src="../assets/img/e_office2.png"></li>
+											<div class="clear"></div>
+										</ul>
+									</div>
+									<div class="e_feeds_messages">
+										<p>Hi Team, </p>
+										<p>It has been observed most employees were using “Custom Attendance”option in Eoffice for marking attendance instead of “Daily Attendance”. </p>
+										<p>Custom Attendance markings can be used only when there are any Eoffice or network problems you are facing at the time of login. It must be done with proper explanation of reason with the approval of your respective Team Lead or appropriate person. </p>
+										<p>Kindly take a note of the same.Looking forward for a positive outcome.</p>
+										<p>Regards<br>
+										HR</p>
+									</div>
+									<div class="e_feed_btm">
+										<div class="e_feed_view floatLeft">View</div>
+										<div class="e_feed_daten_time floatLeft">
+											<span><img src="../assets/img/e_timeout.png"></span>
+											<span>20&nbsp;/&nbsp;05&nbsp;/&nbsp;2017</span>
+											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+											<span>10&nbsp;:&nbsp;00&nbsp;am</span>
+										</div>
+										<div class="clear"></div>
+									</div>
+									<br>	
+									<hr>
+									<br>
+								</div>
+							</li>
+							<li>
+								<div class="e_feed_title">
+									<div class="e_title_circle color3 floatLeft">
+										<img src="../assets/img/e_info.png">
+									</div>
+									<div class="e_feed_inner floatLeft">
+										<h6>Announcement Title:</h6>
+										<h4>Eoffice Attendance Marking - Mandatory</h4>
+									</div>
+									<div class="clear"></div>
+								</div>
+								<div class="e_feed_content">
+									<h6>Announcement Info:</h6>
+									<div class="e_feeds_image">
+										<ul>
+											<li><img src="../assets/img/e_office1.png"></li>
+											<li><img src="../assets/img/e_office2.png"></li>
+											<div class="clear"></div>
+										</ul>
+									</div>
+									<div class="e_feeds_messages">
+										<p>Hi Team, </p>
+										<p>It has been observed most employees were using “Custom Attendance”option in Eoffice for marking attendance instead of “Daily Attendance”. </p>
+										<p>Custom Attendance markings can be used only when there are any Eoffice or network problems you are facing at the time of login. It must be done with proper explanation of reason with the approval of your respective Team Lead or appropriate person. </p>
+										<p>Kindly take a note of the same.Looking forward for a positive outcome.</p>
+										<p>Regards<br>
+										HR</p>
+									</div>
+									<div class="e_feed_btm">
+										<div class="e_feed_view floatLeft">View</div>
+										<div class="e_feed_daten_time floatLeft">
+											<span><img src="../assets/img/e_timeout.png"></span>
+											<span>20&nbsp;/&nbsp;05&nbsp;/&nbsp;2017</span>
+											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+											<span>10&nbsp;:&nbsp;00&nbsp;am</span>
+										</div>
+										<div class="clear"></div>
+									</div>
+									<br>	
+									<hr>
+									<br>
+								</div>
+							</li>					
+						</ul>
+
+	<!-- ENDS-FEEDS-LIST -->
+
+					</div>
+				</div>
+			</div>
+
+	<!-- ENDS-LEFT-PART-FEEDS -->
+
+	<!-- RIGHT-PART-INFO -->
+
+			<div class="col-md-4">
+				<div class="e_content_wrapper">
+
+	<!-- BIRTHDAY-INFO-HEADER -->
+
+					<div class="e_content_head">
+						<div class="e_title_circle color1 floatLeft">
+							<img src="../assets/img/e_birthday.png">
+						</div>
+						<h5 class="floatLeft">Birthday Info</h5>
+						<a href="view_birthday.php">
+						<p class="floatRight">See all<span><img src="../assets/img/e_see_all.png"></span></p>
+						</a>
+						<div class="clear"></div>				
+					</div>
+
+	<!-- ENDS-BIRTHDAY-INFO-HEADER -->
+
+					<div class="e_info_content">
+						<div class="e_info_head">
+							Upcoming Birthdays
+						</div>
+
+	<!-- BIRTHDAY-LIST -->
+
+						<ul>
+							<li>
+								<div class="e_info_pic_div floatLeft">
+									<img src="../assets/img/e_pic1.jpg">
+								</div>
+								<div class="e_info_detail_div floatLeft">
+									<h5>Morgan Freeman</h5>
+									<h6>17th June</h6>
+								</div>
+								<div class="clear"></div>
+							</li>
+							<li>
+								<div class="e_info_pic_div floatLeft">
+									<img src="../assets/img/e_pic2.jpg">
+								</div>
+								<div class="e_info_detail_div floatLeft">
+									<h5>Logan Vale</h5>
+									<h6>28th June</h6>
+								</div>
+								<div class="clear"></div>
+							</li>
+							<li>
+								<div class="e_info_pic_div floatLeft">
+									<img src="../assets/img/e_pic4.jpg">
+								</div>
+								<div class="e_info_detail_div floatLeft">
+									<h5>Christina Lorenz</h5>
+									<h6>10th July</h6>
+								</div>
+								<div class="clear"></div>
+							</li>
+							<li>
+								<div class="e_info_pic_div floatLeft">
+									<img src="../assets/img/e_pic5.jpg">
+								</div>
+								<div class="e_info_detail_div floatLeft">
+									<h5>Heather Marks</h5>
+									<h6>15th July</h6>
+								</div>
+								<div class="clear"></div>
+							</li>
+						</ul>
+
+	<!-- ENDS-BIRTHDAY-LIST -->
+
+					</div>
+
+	<!-- EVENT-INFO-HEADER -->
+
+					<div class="e_content_head">
+						<div class="e_title_circle color1 floatLeft">
+							<img src="../assets/img/e_event.png">
+						</div>
+						<h5 class="floatLeft">Event Info</h5>
+						<a href="view_events.php">
+						<p class="floatRight">See all<span><img src="../assets/img/e_see_all.png"></span></p>
+						</a>
+						<div class="clear"></div>				
+					</div>
+
+	<!-- ENDS-EVENT-INFO-HEADER -->
+
+	<!-- EVENT-LIST -->	
+
+					<div class="e_event_list">
+						<ul>
+							<li>
+								<div class="e_calender_event floatLeft">
+									<img src="../assets/img/e_calender.png">
+								</div>
+								<div class="e_event_detail floatLeft">
+									<h5>Halloween</h5>
+									<h6>27th Oct 2017</h6>
+								</div>
+								<div class="clear"></div>
+							</li>
+							<li>
+								<div class="e_calender_event floatLeft">
+									<img src="../assets/img/e_calender.png">
+								</div>
+								<div class="e_event_detail floatLeft">
+									<h5>Christmas</h5>
+									<h6>25th Dec 2017</h6>
+								</div>
+								<div class="clear"></div>
+							</li>
+						</ul>
+					</div>
+
+	<!-- ENDS-EVENT-LIST -->			
+
+
+
+
+				</div>
+			</div>
+
+	<!-- ENDS-RIGHT-PART-INFO -->
+
+		</div>
+
+	<!-- ENDS-PARTITION -->
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/landing.php

+
+<?php
+	include "../includes/header.php";
+?>
+<style>
+	.e_main_navbar{display:none;}
+	.e_main_footer{display:none;}
+</style>
+
+	<main role="main" class="widthFull heightFull">
+
+	<!-- MAIN-BODY -->
+	
+	<div class="e_landing_main_div widthFull heightFull theme_secondary">
+	
+	<!-- LOGIN-FORM -->
+	
+	<div class="e_login_container">
+	
+	<!-- LOGO-DIV -->
+		
+		<div class="e_logo_div textCenter">
+			<img src="../assets/img/e_logo.png">
+			<p><span>20&nbsp;/&nbsp;05&nbsp;/&nbsp;2017</span><span class="e_logo_bar">|</span><span>10&nbsp;:&nbsp;00&nbsp;am</span></p>
+		</div>
+	
+	<!-- END-LOGO-DIV -->
+	
+	<!-- LOGIN-WRAP -->
+	
+	<div class="e_login_wrap">
+		<h4>Welcome back</h4>
+		<p>to Techware <a>e-office</a></p>
+		<hr>
+		<div class="e_login_form_row">
+			<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+				<input class="mdl-textfield__input e_login_input" type="text" id="sample1">
+				<label class="mdl-textfield__label e_login_mdl_label" for="uname">Username</label>
+			</div>
+		</div>
+		<div class="e_login_form_row">
+			<div class="mdl-textfield mdl-js-textfield e_login_mdl_textfield ">
+				<input class="mdl-textfield__input e_login_input" type="text" id="sample1">
+				<label class="mdl-textfield__label e_login_mdl_label" for="password">Password</label>
+			</div>
+		</div>
+		<div class="e_login_form_row textCenter">
+			<a href="home_index.php">
+			<button class="e_signin_btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect e_signin_btn  btn-sm">Signin<i class="fa fa-angle-right" aria-hidden="true"></i></button>
+			</a>
+		</div>
+		<div class="e_login_form_row p0 textCenter">
+			<p>Forgot Password?</p>
+		</div>
+	</div>
+	
+	<!-- END-LOGIN-WRAP -->
+	
+	</div>
+	
+	<!-- END-LOGIN-FORM -->
+	
+	<!-- LANDING-FOOTER -->
+	
+		<div class="e_landing_footer textCenter">
+			<p class="font_size_xs">Copyright © techware.co.in</p>
+			<div class="e_landing_bottom_bar"></div>
+		</div>
+		
+	<!-- END-LANDING-FOOTER -->
+	
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	
+	</main>
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+	
+

pages/leave_status.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull heightFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Leave Status
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+
+	<!-- ENDS-PARTITION -->
+
+	<!-- LEAVE-STATUS-TABLES -->
+
+			<div class="e_leave_status_table">
+
+	<!-- LEAVE-STATUS-HEAD -->
+
+				<div class="e_leave_status_head">
+					<div class="row">
+						<div class="col-md-1">
+							<select class="e_leave_status_sl">
+								<option>10</option>
+								<option>20</option>
+							</select>
+						</div>
+						<div class="col-md-2"><span>Sort by:</span>
+							<select class="e_leave_status_sort">
+								<option>Date</option>
+								<option>Time</option>
+							</select>
+						</div>
+						<div class="col-md-5"></div>
+						<div class="col-md-4">
+							<div class="e_leave_search_box">
+								<input class="e_leave_search_input" placeholder="Search here">
+							</div>
+						</div>
+					</div>
+				</div>
+
+	<!-- ENDS-LEAVE-STATUS-HEAD -->
+
+	<!-- LEAVE-STATUS-TABLE-DIV -->
+
+				<div class="table-responsive">          
+				  	<table class="table">
+				    	<thead>
+				      		<tr>
+						        <th>Username</th>
+						        <th>From date</th>
+						        <th>Day Mention (Half/Full)</th>
+						        <th>Leave Reason</th>
+						        <th>Apply Date</th>
+						        <th>Status</th>
+						        <th>Cancel</th>
+				      		</tr>
+				    	</thead>
+					    <tbody>
+					      <tr>
+					        <td>Sophie Lewis</td>
+					        <td>27-10-2017</td>
+					        <td>Full Day</td>
+					        <td>Medical Leave</td>
+					        <td>25-10-2017</td>
+					        <td class="pending">Pending</td>
+					        <td class="cancel"></td>
+					      </tr>
+					      <tr>
+					        <td>Sophie Lewis</td>
+					        <td>27-10-2017</td>
+					        <td>Full Day</td>
+					        <td>Medical Leave</td>
+					        <td>25-10-2017</td>
+					        <td class="approved">Approved</td>
+					        <td class="cancel"></td>
+					      </tr>
+					      <tr>
+					        <td>Sophie Lewis</td>
+					        <td>27-10-2017</td>
+					        <td>Full Day</td>
+					        <td>Medical Leave</td>
+					        <td>25-10-2017</td>
+					        <td class="pending">Pending</td>
+					        <td class="cancel"></td>
+					      </tr>
+					    </tbody>
+				  	</table>
+ 				</div>
+
+
+ 	<!-- ENDS-LEAVE-STATUS-TABLE-DIV -->
+
+			</div>
+
+	<!-- ENDS-LEAVE-STATUS-TABLES -->
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/leave_summary.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull heightFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Leave Status
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+
+	<!-- ENDS-PARTITION -->
+
+	<!-- LEAVE-STATUS-TABLES -->
+
+			<div class="e_leave_status_table">
+
+	<!-- LEAVE-STATUS-HEAD -->
+
+				<div class="e_leave_status_head">
+					<div class="row">
+						<div class="col-md-1">
+							<select class="e_leave_status_sl">
+								<option>10</option>
+								<option>20</option>
+							</select>
+						</div>
+						<div class="col-md-2"><span>Sort by:</span>
+							<select class="e_leave_status_sort">
+								<option>Date</option>
+								<option>Time</option>
+							</select>
+						</div>
+						<div class="col-md-5"></div>
+						<div class="col-md-4">
+							<div class="e_leave_search_box">
+								<input class="e_leave_search_input" placeholder="Search here">
+							</div>
+						</div>
+					</div>
+				</div>
+
+	<!-- ENDS-LEAVE-STATUS-HEAD -->
+
+	<!-- LEAVE-STATUS-TABLE-DIV -->
+
+				<div class="table-responsive">          
+				  	<table class="table">
+				    	<thead>
+				      		<tr>
+						        <th>Username</th>
+						        <th>From date</th>
+						        <th>Day Mention (Half/Full)</th>
+						        <th>Leave Reason</th>
+						        <th>Apply Date</th>
+						        <th>Status</th>
+				      		</tr>
+				    	</thead>
+					    <tbody>
+					      <tr>
+					        <td>Sophie Lewis</td>
+					        <td>27-10-2017</td>
+					        <td>Full Day</td>
+					        <td>Medical Leave</td>
+					        <td>25-10-2017</td>
+					        <td class="pending">Pending</td>
+					      </tr>
+					      <tr>
+					        <td>Sophie Lewis</td>
+					        <td>27-10-2017</td>
+					        <td>Full Day</td>
+					        <td>Medical Leave</td>
+					        <td>25-10-2017</td>
+					        <td class="approved">Approved</td>
+					      </tr>
+					      <tr>
+					        <td>Sophie Lewis</td>
+					        <td>27-10-2017</td>
+					        <td>Full Day</td>
+					        <td>Medical Leave</td>
+					        <td>25-10-2017</td>
+					        <td class="pending">Pending</td>
+					      </tr>
+					    </tbody>
+				  	</table>
+ 				</div>
+
+
+ 	<!-- ENDS-LEAVE-STATUS-TABLE-DIV -->
+
+			</div>
+
+	<!-- ENDS-LEAVE-STATUS-TABLES -->
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/myprofile.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull heightFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				My Profile
+			</div>
+
+	<!-- PROFILE-DETAIL-DIV-STARTS -->
+
+
+			<div class="e_content_wrapper">
+				<div class="e_profile_detail_div">
+						<div class="e_profile_detail_pic">
+							<div class="e_profile_detail_pic_overlay"></div>
+							<img src="../assets/img/e_pic4.jpg">
+						</div>
+						<div class="e_profile_detail">
+							<h3>Ann Alexander</h3>
+							<h5>Software Developer</h5>
+							<p>EMP ID: TWS 134</p>
+							<div class="e_profile_detail1">
+								<li>
+									<p class="e_msg">[email protected]</p>
+									<p class="e_call">+91 9961531199</p>
+								</li>
+								<li class="borderNone" style="padding-left: 20px;">
+									<p class="e_loc">Loremipsum , Dummy Street<br>Los Angles, 406 A</p>
+								</li>
+								<div class="clear"></div>
+							</div>
+						</div>
+						<div class="e_experience">
+							<img src="../assets/img/e_experience.png">
+							<h5>Techware Experience</h5>
+							<p><strong>1</strong>Year, <strong>11</strong> Months, <strong>8</strong>Days</p>
+						</div>
+						<div class="clear"></div>
+				</div>
+			</div>
+
+			<hr>
+
+	<!-- ENDS-PROFILE-DETAIL-DIV-STARTS -->
+
+	<!-- APPLY-LEAVE-CONTENT -->
+
+						<div class="e_apply_leave_content pl0 pr0">
+							<div class="row">
+								<div class="col-md-2">
+									<div class="e_apply_leave_text e_profile_leave_dept">
+										Department<br>
+										<strong>SDU</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text e_profile_leave_dept">
+										Join Date<br>
+										<strong>28 - 08 - 2016</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text e_profile_leave_dept">
+										Qualification<br>
+										<strong>Graduate</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text e_profile_leave_dept">
+										Date of Birth<br>
+										<strong>1993-06-17</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text e_profile_leave_dept">
+										Blood Group<br>
+										<strong>O+</strong>
+									</div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_apply_leave_text e_profile_leave_dept borderNone">
+										Gender<br>
+										<strong>Male</strong>
+									</div>
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-APPLY-LEAVE-CONTENT -->
+
+						<div class="e_profile_btn_bay">
+							<a href="editprofile.php">
+								<button class="e_profile_edit_button ">Edit Profile<span><img src="../assets/img/e_profile_edit.png"></span>
+								</button>
+							</a>
+							<button class="e_profile_changepass_button" data-toggle="modal" data-target="#changepass">Change Password<span><img src="../assets/img/e_profile_pass.png"></span></button>
+						</div>
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+
+
+

pages/myproject.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull heightFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Leave Status
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+			<hr>
+
+	<!-- ENDS-PARTITION -->
+
+	<!-- LEAVE-STATUS-TABLES -->
+
+			<div class="row">
+				<div class="col-md-8">
+					<div class="e_leave_status_table">
+
+	<!-- LEAVE-STATUS-HEAD -->
+						<div class="e_content_head">
+							<div class="e_title_circle color1 floatLeft">
+								<img src="../assets/img/e_p7.png">
+							</div>
+							<h5 class="floatLeft">My Project List</h5>
+							<div class="clear"></div>				
+						</div>
+						<br><br>
+
+						<div class="e_leave_status_head">
+							<div class="row">
+								<div class="col-md-2">
+									<select class="e_leave_status_sl">
+										<option>10</option>
+										<option>20</option>
+									</select>
+								</div>
+								<div class="col-md-3"><span>Sort by:</span>
+									<select class="e_leave_status_sort">
+										<option>Date</option>
+										<option>Time</option>
+									</select>
+								</div>
+								<div class="col-md-3"></div>
+								<div class="col-md-4">
+									<div class="e_leave_search_box">
+										<input class="e_leave_search_input" placeholder="Search here">
+									</div>
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-LEAVE-STATUS-HEAD -->
+
+	<!-- LEAVE-STATUS-TABLE-DIV -->
+
+						<div class="table-responsive">          
+						  	<table class="table">
+						    	<thead>
+						      		<tr>
+								        <th>SL</th>
+								        <th>Project Name</th>
+						      		</tr>
+						    	</thead>
+							    <tbody>
+							      <tr>
+							        <td>1</td>
+							        <td>Book my Doc</td>
+							      </tr>
+							      <tr>
+							        <td>2</td>
+							        <td>Book my saloon</td>
+							      </tr>
+							      <tr>
+							        <td>3</td>
+							        <td>Omega Nutri</td>
+							      </tr>
+							    </tbody>
+						  	</table>
+		 				</div>
+
+
+ 	<!-- ENDS-LEAVE-STATUS-TABLE-DIV -->
+
+					</div>
+
+	<!-- ENDS-LEAVE-STATUS-TABLES -->
+					
+				</div>
+				<div class="col-md-4"></div>
+			</div>
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/temp_work_status.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull heightFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Temporary work status
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+		<div class="row">
+			<div class="col-md-12">
+				<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+					<div class="e_current_time">
+						<div class="row">
+							<div class="col-md-2">
+								<p>Current Time</p>
+								<h3><span id="theTime"></span></h3>
+							</div>
+							<div class="col-md-10">
+								<div class="e_status_for_day">
+									<p>Status for the day<strong>02 May 2017</strong></p>
+								</div>
+							</div>
+						</div>
+					</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+	<!-- WORK-STATUS-DIV -->
+
+					<div class="e_work_status_div">
+
+	<!-- WORK-STATUS-HEAD -->
+
+						<div class="e_work_status_head">
+							<div class="row">
+								<div class="col-md-3">
+									<div class="e_work_status_circle">
+										<img src="../assets/img/e_p1.png">
+									</div>
+									<p>Project name</p>
+									<div class="clear"></div>
+								</div>
+								<div class="col-md-2">
+									<div class="e_work_status_circle">
+										<img src="../assets/img/e_p2.png">
+									</div>
+									<p>Work Type</p>
+									<div class="clear"></div>							
+								</div>
+								<div class="col-md-2">
+									<div class="e_work_status_circle">
+										<img src="../assets/img/e_p3.png">
+									</div>
+									<p>No. of Hour</p>
+									<div class="clear"></div>
+								</div>
+								<div class="col-md-5">
+									<div class="e_work_status_circle">
+										<img src="../assets/img/e_p4.png">
+									</div>
+									<p>Comments</p>
+									<div class="clear"></div>
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-WORK-STATUS-HEAD -->
+
+	<!-- WORK-STATUS-CONTENT -->
+
+						<div class="e_work_status_content">
+							<ul>
+								<li>
+									<div class="row">
+										<div class="col-md-3">
+											<select class="e_work_status_select">
+												<option>Select Project name</option>
+											</select>
+										</div>
+										<div class="col-md-2">
+											<select class="e_work_status_select">
+												<option>Work Type</option>
+											</select>							
+										</div>
+										<div class="col-md-2">
+
+											<select class="e_work_status_select1 floatLeft">
+												<option>00</option>
+											</select>
+											<span>:</span>
+											<select class="e_work_status_select1 floatRight">
+												<option>00</option>
+											</select>
+											<div class="clear"></div>
+										</div>
+										<div class="col-md-5">
+											<textarea class="e_work_status_textarea floatLeft" rows="3" placeholder="Comments here">
+											</textarea>
+											<button class="e_work_add_btn mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect floatRight">Add<i class="fa fa-plus" aria-hidden="true"></i></button>
+										</div>
+									</div>
+								</li>
+							</ul>
+						</div>
+
+	<!-- ENDS-WORK-STATUS-CONTENT -->
+
+					</div>
+
+	<!-- ENDS-WORK-STATUS -->
+
+				</div>
+			</div>
+		</div>
+
+	<!-- ENDS-PARTITION -->
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/thought_of_day.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull heightFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Thought of the day
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+			<hr>
+
+	<!-- THOUGHT-OF-THE-DAY-DIV -->
+
+			<div class="e_thought_div">
+
+	<!-- THOUGHT-DIV-LEFT-->
+
+				<div class="e_thought_div_left">
+					<img src="../assets/img/e_thought.png">
+				</div>
+
+	<!-- ENDS-THOUGHT-DIV-LEFT -->
+
+	<!-- THOUGHT-DIV-RIGHT-->
+
+				<div class="e_thought_div_right">
+					<p>“ One small positive thought in the morning <br>
+   can change your whole day ”</p>
+				</div>
+
+	<!-- ENDS-THOUGHT-DIV-RIGHT -->
+
+				<div class="clear"></div>
+
+			</div>
+	
+	<!-- END-THOUGHT-OF-THE-DAY-DIV -->		
+
+	<!-- ENDS-PARTITION -->
+
+
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/view_annoucement.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Announcement
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+			<hr>
+
+	<!-- THOUGHT-OF-THE-DAY-DIV -->
+
+			<div class="e_thought_div">
+
+	<!-- THOUGHT-DIV-LEFT-->
+
+				<div class="e_thought_div_left">
+					<img src="../assets/img/e_announcement.png">
+				</div>
+
+	<!-- ENDS-THOUGHT-DIV-LEFT -->
+
+	<!-- THOUGHT-DIV-RIGHT-->
+
+				<div class="e_annoucement_list_div_right">
+					<div class="row">
+						<div class="col-md-8">
+
+	<!-- ANNOUNCEMENT-DIV -->
+
+							<ul>
+								<li>
+									<div class="e_feed_title">
+										<div class="e_feed_inner floatLeft p0">
+											<h4>Eoffice Attendance Marking - Mandatory</h4>
+										</div>
+										<div class="clear"></div>
+										<div class="e_feed_btm">
+											<div class="e_feed_daten_time floatLeft m0">
+													<span><img src="../assets/img/e_timeout.png"></span>
+													<span>20&nbsp;/&nbsp;05&nbsp;/&nbsp;2017</span>
+													&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+													<span>10&nbsp;:&nbsp;00&nbsp;am</span>
+											</div>
+											<div class="clear"></div>
+										</div>
+										<br>
+									</div>
+									<div class="e_feed_content p0">
+										<h6>Announcement Info:</h6>
+												<div class="e_feeds_image">
+													<ul>
+														<li><img src="../assets/img/e_office1.png"></li>
+														<li><img src="../assets/img/e_office2.png"></li>
+														<div class="clear"></div>
+													</ul>
+												</div>
+										<div class="e_feeds_messages">
+											<p>Hi Team, </p>
+											<p>It has been observed most employees were using “Custom Attendance”option in Eoffice for marking attendance instead of “Daily Attendance”. </p>
+											<p>Custom Attendance markings can be used only when there are any Eoffice or network problems you are facing at the time of login. It must be done with proper explanation of reason with the approval of your respective Team Lead or appropriate person. </p>
+											<p>Kindly take a note of the same.Looking forward for a positive outcome.</p>
+											<p>Regards<br>
+											HR</p>
+										</div>
+									</div>
+									<hr>
+								</li>
+								<li>
+									<div class="e_feed_title">
+										<div class="e_feed_inner floatLeft p0">
+											<h4>Eoffice Attendance Marking - Mandatory</h4>
+										</div>
+										<div class="clear"></div>
+										<div class="e_feed_btm">
+											<div class="e_feed_daten_time floatLeft m0">
+													<span><img src="../assets/img/e_timeout.png"></span>
+													<span>20&nbsp;/&nbsp;05&nbsp;/&nbsp;2017</span>
+													&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+													<span>10&nbsp;:&nbsp;00&nbsp;am</span>
+											</div>
+											<div class="clear"></div>
+										</div>
+										<br>
+									</div>
+									<div class="e_feed_content p0">
+										<h6>Announcement Info:</h6>
+												<div class="e_feeds_image">
+													<ul>
+														<li><img src="../assets/img/e_office1.png"></li>
+														<li><img src="../assets/img/e_office2.png"></li>
+														<div class="clear"></div>
+													</ul>
+												</div>
+										<div class="e_feeds_messages">
+											<p>Hi Team, </p>
+											<p>It has been observed most employees were using “Custom Attendance”option in Eoffice for marking attendance instead of “Daily Attendance”. </p>
+											<p>Custom Attendance markings can be used only when there are any Eoffice or network problems you are facing at the time of login. It must be done with proper explanation of reason with the approval of your respective Team Lead or appropriate person. </p>
+											<p>Kindly take a note of the same.Looking forward for a positive outcome.</p>
+											<p>Regards<br>
+											HR</p>
+										</div>
+									</div>
+									<hr>
+								</li>
+								<li>
+									<div class="e_feed_title">
+										<div class="e_feed_inner floatLeft p0">
+											<h4>Eoffice Attendance Marking - Mandatory</h4>
+										</div>
+										<div class="clear"></div>
+										<div class="e_feed_btm">
+											<div class="e_feed_daten_time floatLeft m0">
+													<span><img src="../assets/img/e_timeout.png"></span>
+													<span>20&nbsp;/&nbsp;05&nbsp;/&nbsp;2017</span>
+													&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+													<span>10&nbsp;:&nbsp;00&nbsp;am</span>
+											</div>
+											<div class="clear"></div>
+										</div>
+										<br>
+									</div>
+									<div class="e_feed_content p0">
+										<h6>Announcement Info:</h6>
+												<div class="e_feeds_image">
+													<ul>
+														<li><img src="../assets/img/e_office1.png"></li>
+														<li><img src="../assets/img/e_office2.png"></li>
+														<div class="clear"></div>
+													</ul>
+												</div>
+										<div class="e_feeds_messages">
+											<p>Hi Team, </p>
+											<p>It has been observed most employees were using “Custom Attendance”option in Eoffice for marking attendance instead of “Daily Attendance”. </p>
+											<p>Custom Attendance markings can be used only when there are any Eoffice or network problems you are facing at the time of login. It must be done with proper explanation of reason with the approval of your respective Team Lead or appropriate person. </p>
+											<p>Kindly take a note of the same.Looking forward for a positive outcome.</p>
+											<p>Regards<br>
+											HR</p>
+										</div>
+									</div>
+									<hr>
+								</li>
+							</ul>
+
+	<!-- ENDS-ANNOUCEMENT-DIV -->
+							
+						</div>
+						<div class="col-md-4"></div>
+					</div>			
+				</div>
+
+	<!-- ENDS-THOUGHT-DIV-RIGHT -->
+
+				<div class="clear"></div>
+
+			</div>
+	
+	<!-- END-THOUGHT-OF-THE-DAY-DIV -->		
+
+	<!-- ENDS-PARTITION -->
+
+
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/view_birthday.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull heightFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Birthday
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+			<hr>
+
+	<!-- THOUGHT-OF-THE-DAY-DIV -->
+
+			<div class="e_thought_div">
+
+	<!-- THOUGHT-DIV-LEFT-->
+
+				<div class="e_thought_div_left">
+					<img src="../assets/img/e_birthday1.png">
+				</div>
+
+	<!-- ENDS-THOUGHT-DIV-LEFT -->
+
+	<!-- THOUGHT-DIV-RIGHT-->
+
+				<div class="e_birthday_list_div_right">
+					<ul>
+						<li>
+							<div class="e_expand"></div>
+							<div class="e_birthday_profile_pic">
+								<img src="../assets/img/e_pic3.jpg">
+							</div>
+							<h5>TONY STARK</h5>
+							<ul>
+								<li>
+									<div class="child">Department</div>
+									<div class="child">: &nbsp;&nbsp;Developement</div>
+									<div class="clear"></div>
+								</li>
+								<li>
+									<div class="child">Designation</div>
+									<div class="child">: &nbsp;&nbsp;UI/UX Developer</div>
+									<div class="clear"></div>
+								</li>
+								<li>
+									<div class="child">Employee ID</div>
+									<div class="child">: &nbsp;&nbsp;TWS 125</div>
+									<div class="clear"></div>
+								</li>
+								<li>
+									<div class="child">DOB</div>
+									<div class="child">: &nbsp;&nbsp;13 / 10 / 1993</div>
+									<div class="clear"></div>
+								</li>
+							</ul>
+						</li>
+						<li>
+							<div class="e_expand"></div>
+							<div class="e_birthday_profile_pic">
+								<img src="../assets/img/e_pic6.jpg">
+							</div>
+							<h5>MIA ROBERTSON</h5>
+							<ul>
+								<li>
+									<div class="child">Department</div>
+									<div class="child">: &nbsp;&nbsp;Developement</div>
+									<div class="clear"></div>
+								</li>
+								<li>
+									<div class="child">Designation</div>
+									<div class="child">: &nbsp;&nbsp;UI/UX Developer</div>
+									<div class="clear"></div>
+								</li>
+								<li>
+									<div class="child">Employee ID</div>
+									<div class="child">: &nbsp;&nbsp;TWS 125</div>
+									<div class="clear"></div>
+								</li>
+								<li>
+									<div class="child">DOB</div>
+									<div class="child">: &nbsp;&nbsp;13 / 10 / 1993</div>
+									<div class="clear"></div>
+								</li>
+							</ul>
+						</li>
+					</ul>
+				</div>
+
+	<!-- ENDS-THOUGHT-DIV-RIGHT -->
+
+				<div class="clear"></div>
+
+			</div>
+	
+	<!-- END-THOUGHT-OF-THE-DAY-DIV -->		
+
+	<!-- ENDS-PARTITION -->
+
+
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/view_events.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				Events
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+			<hr>
+
+	<!-- THOUGHT-OF-THE-DAY-DIV -->
+
+			<div class="e_thought_div">
+
+	<!-- THOUGHT-DIV-LEFT-->
+
+				<div class="e_thought_div_left">
+					<img src="../assets/img/e_event1.png">
+				</div>
+
+	<!-- ENDS-THOUGHT-DIV-LEFT -->
+
+	<!-- THOUGHT-DIV-RIGHT-->
+
+				<div class="e_event_list_div_right">
+
+	<!-- LEAVE-STATUS-TABLES -->
+
+					<div class="e_leave_status_table">
+
+	<!-- LEAVE-STATUS-HEAD -->
+
+						<div class="e_leave_status_head">
+							<div class="row">
+								<div class="col-md-2">
+									<select class="e_leave_status_sl">
+										<option>10</option>
+										<option>20</option>
+									</select>
+								</div>
+								<div class="col-md-3"><span>Sort by:</span>
+									<select class="e_leave_status_sort">
+										<option>Date</option>
+										<option>Time</option>
+									</select>
+								</div>
+								<div class="col-md-3"></div>
+								<div class="col-md-4">
+									<div class="e_leave_search_box">
+										<input class="e_leave_search_input" placeholder="Search here">
+									</div>
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-LEAVE-STATUS-HEAD -->
+
+	<!-- LEAVE-STATUS-TABLE-DIV -->
+
+						<div class="table-responsive">          
+						  	<table class="table">
+						    	<thead>
+						      		<tr>
+								        <th>Sl</th>
+								        <th>Title</th>
+								        <th style="width: 45%;">Description of the Event</th>
+								        <th> Date</th>
+								        <th>View</th>
+						      		</tr>
+						    	</thead>
+							    <tbody>
+							      <tr>
+							        <td>1</td>
+							        <td>Onam Celebration</td>
+							        <td>
+							        	Dear All,<br><br>
+
+With Immense joy and pleasure, we would like to inform you that this year 'Techware Onam Celebrations' will be held on 27th August 2015 with variety of events along with ONAM SADHYA. <br><br> 
+
+Venue: Techware Office<br>
+
+Date: 27th August 2015<br>
+
+Time: 9.00 AM to 3.00 PM<br><br>
+
+
+<strong>Note:</strong> <br><br>
+
+
+ 1. Compulsory attendance will be maintained for the day.<br>
+
+ 2. Gents dress code: Mundu and Kurtha/Shirt.<br>
+
+      Ladies dress code: Kerala Saree
+							        </td>
+							        <td>05-May-2017</td>
+							        <td class="viewall"></td>
+							      </tr>
+							      <tr>
+							        <td>2</td>
+							        <td>Onam Celebration</td>
+							        <td>
+							        	Dear All,<br><br>
+
+With Immense joy and pleasure, we would like to inform you that this year 'Techware Onam Celebrations' will be held on 27th August 2015 with variety of events along with ONAM SADHYA. <br><br> 
+
+Venue: Techware Office<br>
+
+Date: 27th August 2015<br>
+
+Time: 9.00 AM to 3.00 PM<br><br>
+
+
+<strong>Note:</strong> <br><br>
+
+
+ 1. Compulsory attendance will be maintained for the day.<br>
+
+ 2. Gents dress code: Mundu and Kurtha/Shirt.<br>
+
+      Ladies dress code: Kerala Saree
+							        </td>
+							        <td>05-May-2017</td>
+							        <td class="viewall"></td>
+							      </tr>
+							    </tbody>
+						  	</table>
+		 				</div>
+
+
+ 	<!-- ENDS-LEAVE-STATUS-TABLE-DIV -->
+
+					</div>
+
+	<!-- ENDS-LEAVE-STATUS-TABLES -->
+		
+				</div>
+
+	<!-- ENDS-THOUGHT-DIV-RIGHT -->
+
+				<div class="clear"></div>
+
+			</div>
+	
+	<!-- END-THOUGHT-OF-THE-DAY-DIV -->		
+
+	<!-- ENDS-PARTITION -->
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+

pages/work_report.php

+<?php
+	include "../includes/header.php";
+?>
+    <main role="main" class="heightFull">
+	
+	<!-- MAIN-BODY -->
+	
+	<div class="e_main_div widthFull  theme_primary">
+
+	<!-- CONTAINER-STARTS -->
+
+		<div class="container custom_container">
+			<div class="e_landing_page_title">
+				My Work Report
+			</div>
+
+	<!-- PARTITION-STARTS -->
+
+			<div class="row">
+				<div class="col-md-12">
+					<div class="e_content_wrapper">
+
+	<!-- CURRENT-TIME-DIV -->
+
+						<div class="e_current_time">
+							<div class="row">
+								<div class="col-md-2">
+									<p>Current Time</p>
+									<h3><span id="theTime"></span></h3>
+								</div>
+								<div class="col-md-10">
+									
+								</div>
+							</div>
+						</div>
+
+	<!-- ENDS-CURRENT-TIME -->
+
+					</div>
+				</div>
+			</div>
+			<hr>
+
+	<!-- ATTENDENCE-STATUS -->
+
+			<div class="e_attendence_status">
+				<div class="row">
+					<div class="col-md-12">
+						<p>Select month and year to generate report</p>
+						<div class="row">
+							<div class="col-md-3"><h6>Select Month</h6></div>
+							<div class="col-md-3"><h6>Select Year</h6></div>
+							<div class="col-md-4"><h6>Select Report</h6></div>
+							<div class="col-md-2"></div>
+						</div>
+						<div class="row">
+							<div class="col-md-3">
+								<select class="e_attendence_select">
+									<option>Month</option>
+								</select>
+							</div>
+							<div class="col-md-3">
+								<select class="e_attendence_select">
+									<option>Year</option>
+								</select>	
+							</div>
+							<div class="col-md-4">
+								<div class="e_radio_button_div">
+									<label class="e_radio_button inline"> 
+									    <input type="radio" name="report" value="summary" checked>
+									    <span>Summary Report</span> 
+									</label>
+									<label class="e_radio_button inline"> 
+									    <input type="radio" name="report" value="detailed">
+									    <span>Detailed Report</span> 
+  									</label>
+								</div>
+							</div>
+							<div class="col-md-2 textRight">
+								<button class="e_attendence_submit mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">Submit</button>
+							</div>
+						</div>
+						<br>
+						<p>Users Attendance Report Info</p>
+						<div class="row">
+							<div class="col-md-6">
+								<div class="e_attendence_report_info">
+									<div class="e_attendence_report_pic">
+										<img src="../assets/img/e_pic3.jpg">
+									</div>
+									<div class="e_attendence_report_detail">
+										<ul>
+											<li>
+												<div class="child1">Username</div>
+												<div class="child2">:&nbsp;&nbsp;&nbsp;&nbsp;James Walton</div>
+												<div class="clear"></div>
+											</li>
+											<li>
+												<div class="child1">Employee ID</div>
+												<div class="child2">:&nbsp;&nbsp;&nbsp;&nbsp;TWS 123</div>
+												<div class="clear"></div>
+											</li>
+											<li>
+												<div class="child1">Report month/Year</div>
+												<div class="child2">:&nbsp;&nbsp;&nbsp;&nbsp;May 2017</div>
+												<div class="clear"></div>
+											</li>
+										</ul>
+									</div>
+									<div class="clear"></div>
+								</div>
+							</div>
+							<div class="col-md-6"></div>
+						</div>
+					</div>
+				</div>
+				<br>
+				<br>
+				<div class="row">
+					<div class="col-md-12">
+
+	<!-- LEAVE-STATUS-TABLES -->
+
+						<div class="e_leave_status_table">
+
+	<!-- LEAVE-STATUS-HEAD -->
+
+							<div class="e_leave_status_head">
+								<div class="row">
+									<div class="col-md-1">
+										<select class="e_leave_status_sl">
+											<option>10</option>
+											<option>20</option>
+										</select>
+									</div>
+									<div class="col-md-2"><span>Sort by:</span>
+										<select class="e_leave_status_sort">
+											<option>Date</option>
+											<option>Time</option>
+										</select>
+									</div>
+									<div class="col-md-5"></div>
+									<div class="col-md-4">
+										<div class="e_leave_search_box">
+											<input class="e_leave_search_input" placeholder="Search here">
+										</div>
+									</div>
+								</div>
+							</div>
+
+	<!-- ENDS-LEAVE-STATUS-HEAD -->
+
+	<!-- LEAVE-STATUS-TABLE-DIV -->
+
+							<div class="table-responsive">          
+							  	<table class="table">
+							    	<thead>
+							      		<tr>
+									        <th>Report Date</th>
+									        <th>Signin Time</th>
+									        <th>Signout Time</th>
+									        <th>Working Hours</th>
+									        <th>Punchin Note</th>
+									        <th>Punchout Note</th>
+									        <th>Status</th>
+									        <th>Report info</th>
+							      		</tr>
+							    	</thead>
+								    <tbody>
+								      <tr>
+								        <td>05-may-2017</td>
+								        <td>08:40 am</td>
+								        <td>06:00 pm</td>
+								        <td>09 hrs 30 mins</td>
+								        <td>sfsffsf</td>
+								        <td></td>
+								        <td><div class="e_completed">Complete<i class="fa fa-check" aria-hidden="true"></i></div></td>
+								        <td><div class="e_info" data-toggle="collapse" data-target="#demo">Info<i class="fa fa-info-circle" aria-hidden="true"></i></div>
+								        </td>
+								      </tr>
+								      <tr>
+								        <td>05-may-2017</td>
+								        <td>08:40 am</td>
+								        <td>06:00 pm</td>
+								        <td>09 hrs 30 mins</td>
+								        <td></td>
+								        <td></td>
+								        <td><div class="e_holiday">Holiday<i class="fa fa-circle-o" aria-hidden="true"></i></div></td>
+								        <td><div class="e_info">Info<i class="fa fa-info-circle" aria-hidden="true"></i></div></td>
+								      </tr>
+								      <tr>
+								        <td>05-may-2017</td>
+								        <td>08:40 am</td>
+								        <td>06:00 pm</td>
+								        <td>09 hrs 30 mins</td>
+								        <td></td>
+								        <td>sfsffsfsf</td>
+								        <td><div class="e_leave">Leave<i class="fa fa-info" aria-hidden="true"></i></div></td>
+								        <td><div class="e_info">Info<i class="fa fa-info-circle" aria-hidden="true"></i></div></td>
+								      </tr>
+								    </tbody>
+							  	</table>
+			 				</div>
+
+
+	<!-- ENDS-LEAVE-STATUS-TABLE-DIV -->
+
+						</div>
+
+					</div>
+				</div>
+			</div>
+
+	<!-- ENDS-ATTENDENCE-STATUS -->
+	
+	<!-- ENDS-PARTITION -->
+
+
+
+		</div>
+
+	<!-- END-CONTAINER -->
+
+	</div>
+
+	<!-- END-MAIN-BODY -->
+	 
+    </main>
+	
+	
+<?php
+	include "../includes/footer.php";
+?>
+
+