Untitled

<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css);
* {
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}
body {
  background-position: cover;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
}

.overlay {
  z-index: 1;
  opacity: 0.5;
  background-color: #000;
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.leftcontent {
  z-index: 2;
  height: calc(100% - 120px);
  width: calc(100% - 470px);
  margin-top: 60px;
  margin-left: 60px;
  position: fixed;
  top: 0;
  left: 0;
}

.ltitle {
  color: #fff;
  font-size: 36px;
  font-weight: 200;
}

.lcontent {
  color: #fff;
  font-size: 18px;
  font-weight: 200;
}

.sidebar {
  background-color: #fff;
  width: 350px;
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  padding-top: 60px;
}

.rtitle {
  color: #333;
  font-size: 36px;
  font-weight: 200;
  padding-left: 30px;
}

.textinput {
  margin-left: 35px;
  height: 40px;
  border-width: 0;
  border-style: solid;
  border-color: #666;
  border-left-width: 5px;
  background-color: #eee;
  width: 270px;
  padding-left: 10px;
  outline: 0;
}

.textinput:focus {
  background-color: #f4f4f4;
}

.submit {
  background-color: #1e90ff;
  height: 50px;
  width: 50px;
  border-style: solid;
  border-width: 0;
  border-radius: 100px;
  position: fixed;
  bottom: 30px;
  right: 30px;
  color: #fff;
  outline: 0;
  cursor: pointer;
}

h2 {
  text-align: center;
}

table caption {
	padding: .5em 15;
}

@media screen and (max-width: 767px) {
  table caption {
    border-bottom: 1px solid #ddd;
  }
}

.p {
  text-align: center;
  padding-top: 140px;
  font-size: 14px;
}

#marketplaceContentTableLines, #inProgressContentTableLines {
	text-align: center;
}


.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}


.button3 {
  background-color: white;
  color: black;
  border: 2px solid #008CBA;
}

.button3:hover {
  background-color: #008CBA;
  color: white;
}

.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

body{
  margin: 30px;
}
.my-container{
  border: 3px solid green;
}
.my-row{
  border: 3px solid red;
}
.my-col{
  border: 3px dotted blue;
}
.abstand{
  height: 20px;
  background: transparent;
}
.demo-tabelle .col{
  background: lightskyblue;
  border: 1px solid white;
}
.demo-tabelle .row{
  min-height: 10px;
}
.rechts{
  text-align: right;
}
#formular-container{
  background-color: #e3f2fd;
  text-align: left;
  max-width: 600px;
  border-radius: 4px;
  padding-top: 10px;
  padding-bottom: 10px;
}


</style>

</head>
<body>
<div class="overlay">
</div>
<div class="leftcontent">
  <br>
  <span class="lcontent" >
  	<button class="button button3" id="inProgressButton" style="display: none" onclick="Marketplace.viewInProgressContent(); return false;">In progress</button>
  	<button class="button button3" id="marketplaceButton" style="display: none" onclick="Marketplace.viewMarketplaceContent(); return false;">Marketplace</button>
	<br>
	<div class="container" id="marketplaceContent" style="display: block">
	<h2>Marketplace projects</h2>
	<br>
	<br>
	  <div class="row">
	    <div class="col-xs-12">
	      <div class="table-responsive" id="marketplaceContentTable">
	        <table class="table table-bordered table-hover" border="5">
	          <thead>
	            <tr>
	              <th style="padding:0 20px 0 20px;" scope="col">Description</th>
	              <th style="padding:0 20px 0 20px;" scope="col">FL reward</th>
	              <th style="padding:0 20px 0 20px;" scope="col">EV reward</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Expertise area</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Solving time</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Evaluation time</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Manager</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Apply</th>
	            </tr>
	          </thead>

	          <tbody id="marketplaceContentTableLines">
	            <!--tr>
	              <td>Web medical application</td>
	              <td>150$</td>
	              <td>25$</td>
	              <td>Java, Angular</td>
	              <td>1000</td>
	              <td>150</td>
	              <td>Giani</td>
	              <td><i class="fa fa-check" aria-hidden="true" style="cursor: pointer;"></i></td>
	            </tr-->
        	  </tbody>

	        </table>
	      </div><!--end of .table-responsive-->
	    </div>
	  </div>
	</div>


	<div class="container" id="inProgressContent" style="display: none">
	<h2>In progress projects</h2>
	<br>
	<br>
	<div class="container">
	  <div class="row">
	    <div class="col-xs-12">
	      <div class="table-responsive" id="inProgressContentTable">
	        <table class="table table-bordered table-hover" border="5">
	          <thead>
	            <tr>
	              <th style="padding:0 20px 0 20px;" scope="col">Description</th>
	              <th style="padding:0 20px 0 20px;" scope="col">FL reward</th>
	              <th style="padding:0 20px 0 20px;" scope="col">EV reward</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Expertise area</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Solving time</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Evaluation time</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Manager</th>
	              <th style="padding:0 20px 0 20px;" scope="col">Finish</th>
	            </tr>
	          </thead>

	          <tbody id="inProgressContentTableLines">
        	  </tbody>

		        </table>
		      </div><!--end of .table-responsive-->
		    </div>
		  </div>
		</div>
	</div>

	<div class="container" id="managerForm" style="display: none">

		<div id="formular-container" class="container">
			<form>
		    <div class="form-group">
		      <label style="color: black;">Description</label>
		      <input type="text" class="form-control" id="description">
		    </div>
		    <div class="form-group">
		      <label style="color: black;">Freelancer Reward</label>
		      <input type="text" class="form-control" id="freelancerReward">
		    </div>
		    <div class="form-group">
		      <label style="color: black;">Evaluator Reward</label>
		      <input type="text" class="form-control" id="evaluationReward">
		    </div>
		    <div class="form-group">
		      <label style="color: black;">Category of expertise</label>
		      <input type="text" class="form-control" id="categoryOfExpertise">
		    </div>
		    <div class="form-group">
		      <label style="color: black;">Freelancer time</label>
		      <input type="text" class="form-control" id="freelancerTime">
		    </div>
		    <div class="form-group">
		      <label style="color: black;">Evaluator</label>
		      <input type="text" class="form-control" id="evaluator">
		    </div>
		   <div class="form-group">
		      <label style="color: black;">Evaluator time</label>
		      <input type="text" class="form-control" id="evaluatorTime">
		    </div>
		        <button onclick="Marketplace.submitForm(); return false;" type="submit" class="btn btn-primary">Submit</button>
		  </form>
		 </div>

	</div>
  </span>
</div>
<div class="sidebar">
  <span class="rtitle" id="loginText" style="display: block">Login</span>
  <span class="rtitle" id="welcomeText" style="display: none; font-size: 14px;"><p id="accountAddress" class="text-center" ></p></span>
  <br>
  <br>
  <form id="formLogin" style="display: block">
    <input class="textinput" type="text" name="username" autofocus="autofocus" placeholder="Username" id="username">
    <br>
    <br>
    <br>
    <button class="submit" type="submit">
      <img src="http://www.yachtsale.se/wp-content/themes/Yachtsales/images/arrow-left.png" height="24px" onclick="Marketplace.login(document.getElementById('username').value); return false;"/>
    </button>
  </form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/web3.min.js"></script>
<script src="js/truffle-contract.js"></script>
<script src="js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>