<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="throbber" style="display:none; min-height:120px;"></div>
<div id="noty-holder"></div>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://cijulenlinea.ucr.ac.cr/dev-users/">
</br>
Swisher Dominicana, Inc.
</a>
</div>
<!-- Top Menu Items -->
<ul class="nav navbar-right top-nav">
<li><a href="#" data-placement="bottom" data-toggle="tooltip" href="#" data-original-title="Stats"><i class="fa fa-bar-chart-o"></i>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Admin User <b class="fa fa-angle-down"></b></a>
<ul class="dropdown-menu">
<li><a href="#"><i class="fa fa-fw fa-user"></i> Edit Profile</a></li>
<li><a href="#"><i class="fa fa-fw fa-cog"></i> Change Password</a></li>
<li class="divider"></li>
<li><a href="#"><i class="fa fa-fw fa-power-off"></i> Logout</a></li>
</ul>
</li>
</ul>
<!-- Sidebar Menu Items - These collapse to the responsive navigation menu on small screens -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav side-nav">
<li>
<a href="#" data-toggle="collapse" data-target="#submenu-1"><i class="fa fa-fw fa-search"></i> MENU 1 <i class="fa fa-fw fa-angle-down pull-right"></i></a>
<ul id="submenu-1" class="collapse">
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.1</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.2</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 1.3</a></li>
</ul>
</li>
<li>
<a href="#" data-toggle="collapse" data-target="#submenu-2"><i class="fa fa-fw fa-star"></i> MENU 2 <i class="fa fa-fw fa-angle-down pull-right"></i></a>
<ul id="submenu-2" class="collapse">
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.1</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.2</a></li>
<li><a href="#"><i class="fa fa-angle-double-right"></i> SUBMENU 2.3</a></li>
</ul>
</li>
<li>
<a href="investigaciones/favoritas"><i class="fa fa-fw fa-user-plus"></i> MENU 3</a>
</li>
<li>
<a href="sugerencias"><i class="fa fa-fw fa-paper-plane-o"></i> MENU 4</a>
</li>
<li>
<a href="faq"><i class="fa fa-fw fa fa-question-circle"></i> MENU 5</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
<div id="page-wrapper">
<div class="container-fluid">
<!-- Page Heading -->
<div class="row" id="main" >
<div class="col-xs-12 .col-sm-6 .col-lg-8">
<div class="well">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" th:text="#{QCT.SupplierData.text}"></div>
<div class="panel-body">
<div class="row">
<div class="col-md-2">
<div class="form-group">
<label for="id" th:text="#{QCT.SupplierID.text}"></label>
<input type="text" id="id" placeholder="ID" class="form-control"/>
</div>
</div>
<div class="col-md-10">
<div class="form-group">
<label for="suppliername" th:text="#{QCT.SupplierName.text}"></label>
<input type="text" id="suppliername" placeholder="Supplier Name"
class="form-control"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="aql" th:text="#{QCT.SupplierAQL.text}"></label>
<input type="text" id="aql" class="form-control"/>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="inspeclevel" th:text="#{QCT.inspeclevel.text}"></label>
<input type="text" id="inspeclevel" class="form-control"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" th:text="#{QCT.TestDetails.text}"></div>
<div class="panel-body">
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="recdoc" th:text="#{QCT.RecDoc.text}"></label>
<input type="text" id="recdoc" class="form-control"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="receivedquantity"
th:text="#{QCT.ReceivedQuantity.text}"></label>
<input type="text" id="receivedquantity"
class="form-control"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="samplesize" th:text="#{QCT.SampleSize.text}"></label>
<input type="text" id="samplesize"
class="form-control"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="inspecletter" th:text="#{QCT.InspectionLetter.text}"></label>
<input type="text" id="inspecletter"
class="form-control"/>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="ac" th:text="#{QCT.AC.text}"></label>
<input type="text" id="ac" class="form-control"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="teststodo" th:text="#{QCT.TestToDo.text}"></label>
<input type="text" id="teststodo" class="form-control"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="testsdone" th:text="#{QCT.TestDone.text}"></label>
<input type="text" id="testsdone" class="form-control"/>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<button type="submit" class="btn btn-primary"
th:text="#{QCT.ViewTest.text}"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" th:text="#{QCT.Variables.text}"></div>
<div class="panel-body">
<table class="table table-responsive">
<thead>
<tr align="center">
<th>#</th>
<th>Atribute</th>
<th>Level</th>
<th>Select</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Color</td>
<td>Low</td>
<td><input type="checkbox"/></td>
</tr>
<tr>
<th scope="row">1</th>
<td>Color</td>
<td>Low</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" th:text="#{QCT.Atributes.text}"></div>
<div class="panel-body">
<table class="table table-responsive">
<thead>
<tr align="center">
<th>#</th>
<th>Vriable</th>
<th>Unit</th>
<th>Initial Value</th>
<th>Ending Value</th>
<th>Real Value</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Humidity</td>
<td>LT</td>
<td>20</td>
<td>50</td>
<td>30</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Humidity</td>
<td>LT</td>
<td>20</td>
<td>50</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
</div><!-- /#wrapper -->
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
@media(min-width:768px) {
body {
margin-top: 50px;
}
/*html, body, #wrapper, #page-wrapper {height: 100%; overflow: hidden;}*/
}
#wrapper {
padding-left: 0;
}
#page-wrapper {
width: 100%;
padding: 0;
background-color: #fff;
}
@media(min-width:768px) {
#wrapper {
padding-left: 225px;
}
#page-wrapper {
padding: 22px 10px;
}
}
/* Top Navigation */
.top-nav {
padding: 0 15px;
}
.top-nav>li {
display: inline-block;
float: left;
}
.top-nav>li>a {
padding-top: 20px;
padding-bottom: 20px;
line-height: 20px;
color: #fff;
}
.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
color: #fff;
background-color: #1a242f;
}
.top-nav>.open>.dropdown-menu {
float: left;
position: absolute;
margin-top: 0;
/*border: 1px solid rgba(0,0,0,.15);*/
border-top-left-radius: 0;
border-top-right-radius: 0;
background-color: #fff;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.top-nav>.open>.dropdown-menu>li>a {
white-space: normal;
}
/* Side Navigation */
@media(min-width:768px) {
.side-nav {
position: fixed;
top: 60px;
left: 225px;
width: 225px;
margin-left: -225px;
border: none;
border-radius: 0;
border-top: 1px rgba(0,0,0,.5) solid;
overflow-y: auto;
background-color: #222;
/*background-color: #5A6B7D;*/
bottom: 0;
overflow-x: hidden;
padding-bottom: 40px;
}
.side-nav>li>a {
width: 225px;
border-bottom: 1px rgba(0,0,0,.3) solid;
}
.side-nav li a:hover,
.side-nav li a:focus {
outline: none;
background-color: #1a242f !important;
}
}
.side-nav>li>ul {
padding: 0;
border-bottom: 1px rgba(0,0,0,.3) solid;
}
.side-nav>li>ul>li>a {
display: block;
padding: 10px 15px 10px 38px;
text-decoration: none;
/*color: #999;*/
color: #fff;
}
.side-nav>li>ul>li>a:hover {
color: #fff;
}
.navbar .nav > li > a > .label {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: absolute;
top: 14px;
right: 6px;
font-size: 10px;
font-weight: normal;
min-width: 15px;
min-height: 15px;
line-height: 1.0em;
text-align: center;
padding: 2px;
}
.navbar .nav > li > a:hover > .label {
top: 10px;
}
.navbar-brand {
padding: 5px 15px;
}
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$(".side-nav .collapse").on("hide.bs.collapse", function() {
$(this).prev().find(".fa").eq(1).removeClass("fa-angle-right").addClass("fa-angle-down");
});
$('.side-nav .collapse').on("show.bs.collapse", function() {
$(this).prev().find(".fa").eq(1).removeClass("fa-angle-down").addClass("fa-angle-right");
});
})