<!-- <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta charset="utf-8" />
<title>Atimetrik-BCP</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
<META HTTP-EQUIV="Expires" CONTENT="-1" />
<link rel="icon" href="img/altimetrik_favicon.ico" type="image/x-icon">
<script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="js/Chart.js"></script>
<script src="js/header.js"></script>
<script src="js/common.js"></script>
<script src="js/popper.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/bootstrap-glypicons.css" rel="stylesheet" />
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/moment.js"></script>
<script src="js/all.js"></script>
<script src="js/summary.js"></script>
<script src="js/attendanceUpload.js"></script>
</head>
<body>
	
	<p>List of Colors :</p>
<select id='myColors'>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="White">White</option>
 <option value="Black">Black</option>
 </select>
</body>
</html> -->



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script>
<script src="js/Chart.js"></script>
<script src="js/header.js"></script>
<script src="js/common.js"></script>
<script src="js/popper.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/common.css" rel="stylesheet" />
<link href="css/bootstrap-glypicons.css" rel="stylesheet" />
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome.min.css">
<script src="js/moment.js"></script>
<script src="js/all.js"></script>
<script src="js/summary.js"></script>
<script src="js/attendanceUpload.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
<!-- <script src="js/jquery-3.4.1.min.js" type="text/javascript"></script> -->
<!-- <script src="js/bootstrap.min.js" type="text/javascript"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
 -->

<style>
* {
  box-sizing: border-box;
}

/* Add a gray background color with some padding */
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}

/* Header/Blog Title */
.header {
  padding: 3px;
  font-size: 10px;
  text-align: center;
  background: white;
  width: 800px;
  
}

/* Create two unequal columns that floats next to each other */
/* Left column */
.leftcolumn {   
  float: left;
  width: 35%;
}

/* Right column */
.rightcolumn {
  float: left;
  width: 26%;
  padding-left: 3px;
}

/* Fake image */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}

/* Add a card effect for articles */
.card {
   background-color: white;
    padding: 3px; 
   margin-top: 3px;
   font-size: 10px;
  text-align: center;
}

.header1 {
   background-color: white;
    padding: 3px; 
   margin-top: 3px;
   font-size: 10px;
  text-align: center;
  width: 800px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
  
}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
</style>
<script>
$(document).ready(function(){
	
	$("#projects" ).change(function() {
		//alert(this.value);
		if(this.value === "BCP"){
			$("#desc").html('Attendance employee wise data maintaince');
			$("#name").html('BCP');
			$("#tech").html('Core Java, Spring Boot, ORM');
			$("#create").html('FIS Team');
			$("#last").html('10,Jan 2021');
			document.getElementById("button").setAttribute('onclick',"window.open('http://192.168.68.122:9011/','_blank');");
		} else if(this.value === "Python"){
			$("#desc").html('It is Basic Python program');
			$("#name").html('Python');
			$("#tech").html('Basic Python Module');
			$("#create").html('FIS Team');
			$("#last").html('11,Jan 2021');
			document.getElementById("button").setAttribute('onclick',"window.open('http://192.168.68.122:9012/','_blank');");
		} else if(this.value === "Perl"){
			$("#desc").html('Basic Perl Script file ');
			$("#name").html('Perl');
			$("#tech").html('Perl Script');
			$("#create").html('FIS Team');
			$("#last").html('12,Jan 2021');
			document.getElementById("button").setAttribute('onclick',"window.open('http://192.168.68.122:9013/','_blank');");
		}
		  $(".grid").show();
		});
});
</script>
</head>
<body>

<form >
  <label for="projects">Project :</label>
  <select name="projects" id="projects" style="padding:8px">
  <option hidden disabled selected value> -- please select project -- </option>
    <option value="BCP">BCP Dashboard</option>
    <option value="Python">Python</option>
    <option value="Perl">Perl</option>
  </select>
  <br><br>
</form>

<!-- <p>List of Colors :</p>
<select id='myColors'>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="White">White</option>
 <option value="Black">Black</option>
 </select> -->
<br><br>
<div class="grid" style="display:none;">
<div class="header">
  <h2>Project Name</h2>
  <h3 id="name">BCP</h3>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>Project Description</h2>
      <h3 id="desc"></h3>
    </div>
    <div class="card">
      <h2>Tech Stack</h2>
      <h3 id="tech"></h3>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>Created By</h2>
      <h3 id="create">Popular Post</h3>
    </div>
    <div class="card">
    <h2>Last Modified on</h2>
      <h3 id="last">Popular Post</h3>
    </div>
  </div>
</div>
<div class="header1">
 <!--  <h2>Project Name</h2>
  <h3>BCP</h3> -->
  <h3>Click Here to load workspace</h3>
  <button id="button" style="padding:8px" onclick="window.location.href='https://www.w3docs.com';">View/Edit</button>
</div>
</div>


</body>
</html>
