<!DOCTYPE html>
<html>
<head>
<title>eVinify</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#keypad button").click(function () {
$("#txt_value").append($(this).val());
});
$("#key_enter").click(function () {
//Code to save record and update list
});
$("#clear").click(function () {
$("#txt_value").empty();
});
});
</script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="home">
<div data-role="header">
<h1>eVinify Home</h1>
</div><!-- /header -->
<div role="main" class="ui-content">
<p><a href="#pg_batch_mgmt" data-role="button">Batch Management</a></p>
<p><a href="#pg_rec_mat" data-role="button">Material Receiving</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of batch management page -->
<div data-role="page" id="pg_batch_mgmt">
<div data-role="header">
<h1>Batch Management</h1>
<a href="index.html" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-home">Home</a>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>I'm the second in the source order so I'm hidden when the page loads. I'm just shown if a link that references my id is beeing clicked.</p>
</div><!-- /content -->
<div data-role="footer">
<h4>© Micaden Sofware 2018</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of Material Receiving page -->
<div data-role="page" id="pg_rec_mat">
<div data-role="header">
<h1>Material Receiving</h1>
<a href="index.html" class="ui-btn-right ui-btn ui-btn-inline ui-mini ui-corner-all ui-btn-icon-left ui-icon-home">Home</a>
</div><!-- /header -->
<div role="main" class="ui-content">
<p>
<select id="batch" name="batch">
<option selected value="-1">Select a Batch</option>
<option value="1">Leon Millot 2018</option>
</select>
</p>
<p><select id="material_type" name="material_type">
<option selected value="-1">Select Material Type</option>
<option value="1">Grapes</option>
<option value="2">Juice</option>
<option value="3">Bulk Wine</option>
</select></p>
<p><select id="uom" name="uom">
<option selected value="-1">Select UOM</option>
<option value="1">Lbs</option>
<option value="2">Tons</option>
<option value="3">Gallons</option>
<option value="4">Litres</option>
</select></p>
<div id="keypad" style="border:groove;width:200px;border-radius:10px;">
<table style="width:200px">
<tr>
<td colspan="3">
<div style="text-align:center; border-radius:5px; font-size:30px;background:white;height:35px;border:thin;border-color:gray;" id="txt_value"></div>
</td>
</tr>
<tr>
<td><button value="7">7</button> </td>
<td><button value="8">8</button> </td>
<td><button value="9">9</button> </td>
</tr>
<tr>
<td><button value="4">4</button> </td>
<td><button value="5">5</button> </td>
<td><button value="6">6</button> </td>
</tr>
<tr>
<td><button value="1">1</button> </td>
<td><button value="2">2</button> </td>
<td><button value="3">3</button> </td>
</tr>
<tr>
<td colspan="2"><button id="zero" value="0">0</button></td>
<td><button value=".">.</button></td>
</tr>
<tr>
<td colspan="3"><input type="button" id="key_enter" value="ENTER" /></td>
</tr>
<tr>
<td colspan="3"><input type="button" id="clear" name="clear" value="CLEAR" /></td>
</tr>
</table>
</div>
</div><!-- /content -->
<div data-role="footer">
<h4>© Micaden Sofware 2018</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>