| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/hkc/ |
Upload File : |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Signature Pad demo</title>
<meta name="description"
content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation." />
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- <link href="js/plugin/jquery.signaturepad.css" rel="stylesheet"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<link rel="stylesheet" href="css/signature-pad.css?v20212333" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="css/style.css?v231220" />
<script src="https://code.jquery.com/jquery-3.6.3.js"
integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<style>
/* .body{
touch-action:none;
}
.sigPad{
touch-action:auto;
} */
.sig {
height: 100%;
}
.signature-pad--body canvas {
width: 1675px;
height: 366px !important;
}
.thead{
text-transform: uppercase;
width: 124px;
padding: 10px 5px;
}
</style>
</head>
<body>
<div class="topWrap justify-content-between">
<div class="d-flex">
<label>Choice Date:</label>
<input id="datepicker" type="text" />
</div>
<div class="d-flex gap10 controlBtn">
<button type="text" class="hiddenBoradBtn">隱藏畫板</button>
<button type="text">保存</button>
<button type="text">刷新</button>
<button type="text" class="printBtn">列印</button>
</div>
</div>
<div class="topWrap">
<p class="title">
Hong Kong China Concrete Company Limited
<br />
Hong Kong Concrete Company Limited
<br />
DAILY DESPATCH SHEET
</p>
<div class="col">
<table border="1" cellpadding="4" cellspacing="0" class="mb-2 w-100">
<tr>
<td>Doc.No : QR(9)-1001</td>
</tr>
<tr>
<td>Date : 09/15</td>
</tr>
</table>
<div class="inputGroup">
<label>First Docket:</label>
<input type="text" />
</div>
<div class="inputGroup">
<label>Last Docket:</label>
<input type="text" />
</div>
<div class="inputGroup">
<label>Cancelled Docket:</label>
<input type="text" />
</div>
<div class="inputGroup">
<label>Plant:</label>
<input type="text" />
</div>
</div>
<div class="col">
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td colspan="2" class="text-center"><b>PREDICTED USAGE</b></td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>CT:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>17D:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>PFA:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>PVZ:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>GGBS:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>SNN:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>20mm:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup">
<label>Other:</label>
<input type="text" />
</div>
</td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>10mm:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>S/F:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td></td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>R/S:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td></td>
</tr>
</table>
</div>
<div class="col">
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td colspan="6" class="text-center"><b>OPENING STOCK</b></td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>CT:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>S/F:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>17D:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>PVZ:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup">
<label>Other:</label>
<input type="text" />
</div>
</td>
<td>
<div class="inputGroup">
<label>Other:</label>
<input type="text" />
</div>
</td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>PFA:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>R/S:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>HWRL:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>SNN:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>20mm:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>Sil.F:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
<td>
<div class="inputGroup tip">
<label>Mortard:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<div class="inputGroup tip">
<label>10mm:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
</td>
<td></td>
<td>
<div class="inputGroup tip">
<label>Daravair:</label>
<div class="tipitemL">
<input type="text" />
</div>
</div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="col">
<div class="inputGroup">
<label>Silt Content:</label>
<input type="text" />
</div>
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td colspan="4" class="text-center">
<b>Random inspection of residues in truck mixer</b>
</td>
</tr>
<tr>
<td>
Truck No.
</td>
<td>
<input type="text" />
</td>
<td>
Inspected by
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
A.M.
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
P.M.
</td>
</tr>
</table>
</div>
<div class="col">
<div class="inputGroup">
<label>Date:</label>
<input type="text" />
</div>
<div class="inputGroup">
<label>Weather:</label>
A.M.
<input type="text" />
P.M.
<input type="text" />
</div>
<table border="1" cellpadding="4" cellspacing="0">
<tr>
<td>
Moisture:
</td>
<td>
20mm
</td>
<td>
A.M.
</td>
<td>
<input type="text" />
</td>
<td>
P.M.
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
10mm
</td>
<td>
A.M.
</td>
<td>
<input type="text" />
</td>
<td>
P.M.
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
S/F
</td>
<td>
A.M.
</td>
<td>
<input type="text" />
</td>
<td>
P.M.
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<input type="text" />
</td>
<td>
R/S
</td>
<td>
A.M.
</td>
<td>
<input type="text" />
</td>
<td>
P.M.
</td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td colspan="2">
Temperature:
</td>
<td>
A.M.
</td>
<td>
<input type="text" />
</td>
<td>
P.M.
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
</div>
</div>
<div class="text-center topWrap">
<button class="orangeThemeBtn btn" type="button">Office Hours</button>
<button class="blueThemeBtn btn" type="button">Non-Office Hours</button>
</div>
<div class="body" onselectstart="return false">
<div id="signature-pad" class="signature-pad">
<div class="wrap">
<table class="table mainTable orangeTheme mb-0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th rowspan="2" width="124px">CUSTOMER / SITE</th>
<th rowspan="2" width="40px">Job No.</th>
<th rowspan="2" width="100px">MIX</th>
<th rowspan="2" width="40px">Qty (m3)</th>
<th rowspan="2" width="80px">MIX CODE</th>
<th colspan="5" class="left_line">7</th>
<th colspan="5" class="left_line">8</th>
<th colspan="5" class="left_line">9</th>
<th colspan="5" class="left_line">10</th>
<th colspan="5" class="left_line">11</th>
<th colspan="5" class="left_line">12</th>
<th colspan="5" class="left_line">1</th>
<th colspan="5" class="left_line">2</th>
<th colspan="5" class="left_line">3</th>
<th colspan="5" class="left_line">4</th>
<th colspan="5" class="left_line">5</th>
<th colspan="5" class="left_line">6</th>
<th colspan="5" class="left_line">7</th>
<th rowspan="2" width="50px">Total</th>
</tr>
<tr>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th class="left_line"></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody class="dataBoay">
<tr>
<td colspan="71" class="rowData">
<table class="table" cellpadding="6" cellspacing="0" border="0">
<tbody>
<tr>
<td rowspan="6" width="124px">
Man Kit Construction
</td>
<td rowspan="6" width="40px">1</td>
<td rowspan="6" width="100px">45/20/100</td>
<td rowspan="6" width="40px">300</td>
<td width="80px" rowspan="6">MCP214</td>
<td class="carNo left_line">12345</td>
<td class="carNo">12345</td>
<td class="carNo">12345</td>
<td class="carNo">12345</td>
<td class="carNo orange">12345</td>
<td class="carNo left_line">12345</td>
<td class="carNo">12345</td>
<td class="carNo">12345</td>
<td class="carNo">12345</td>
<td class="carNo orange">12345</td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo "></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td width="50px"></td>
</tr>
<tr>
<td class="carBottomNo left_line">28</td>
<td class="carBottomNo">12</td>
<td class="carBottomNo">28</td>
<td class="carBottomNo">28</td>
<td class="carBottomNo">28</td>
<td class="carBottomNo left_line">28</td>
<td class="carBottomNo">28</td>
<td class="carBottomNo">12</td>
<td class="carBottomNo">28</td>
<td class="carBottomNo">28</td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
</tr>
<tr>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td></td>
</tr>
<tr>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
</tr>
<tr>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td></td>
</tr>
<tr>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo left_line"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
<td class="carBottomNo"></td>
</tr>
</tbody>
</table>
<!-- <div class="sigPad" id="smoothed" style="width:404px;">
<h2>Bezier Curves (constant pen width)</h2>
<ul class="sigNav">
<li class="drawIt"><a href="#draw-it" >Draw It</a></li>
<li class="clearButton"><a href="#clear">Clear</a></li>
</ul>
<div class="sig sigWrapper" style="height:auto;">
<div class="typed"></div>
<canvas class="pad" width="400" height="250"></canvas>
<input type="hidden" name="output-2" class="output">
</div>
</div> -->
<div class="sigPad signature-pad--body">
<div class="sig">
<canvas id='draw' class="canvasSp pad" width="1675" height="366"></canvas>
</div>
<div class="dotSetting">
<div class="penSize">Brush/Eraser size:
<select id='size'>
<option value='5' selected>5px</option>
<option value='10' >10px</option>
<option value='20'>20px</option>
<option value='30'>30px</option>
<option value='40'>40px</option>
<option value='50'>50px</option>
</select>
</div>
<div>
Pen Color :
<input type='color' id='color-picker' value='#cce6ff'></input>
</div>
<div id='tools' class="tools">
<span class='active-tool' data-name='pencil'><i
class='la la-pencil'></i> Pencil</span>
<span data-name='brush' ><i class='la la-paint-brush'></i> Brush</span>
<span data-name='eraser'><i class='la la-eraser'></i> Eraser</span>
</div>
<!-- <button id="undo">Undo</button> -->
<button id="save">Save</button>
</div>
</div>
<!--
<div class="signature-pad--body sigPad">
<canvas class="canvasSp pad"></canvas>
<div class="dotSetting">
<div>
Pen Size :
<select class="penSize" id="penSize0">
<option value="0.5">0.5</option>
<option value="1.5" selected>1.5</option>
<option value="2.5">2.5</option>
</select>
</div>
<div>
Pen Color :
<input type="color" id="penColor0" class="penColor" />
</div>
<div>
Erase Size :
<select class="eraseSize" id="eraseSize0">
<option value="1">1</option>
<option value="4" selected="">4</option>
<option value="8">8</option>
</select>
</div>
<button id="undo">Undo</button>
<button id="saveSvgBtn">Save</button>
</div>
</div> -->
</td>
</tr>
<tr>
<td colspan="71">
<div class="d-flex align-items" >
<div class="thead" >
Remark
</div>
<div >
<div class="modalWrap align-items">
<div class="d-flex ">
<div>
<a href="javascript:void(0);" class="icon bellBtn active"
class="bell-toggle">
<i class="fas fa-bell"></i>
</a>
<div class="modalBell modal">
<div class="modal-overlay modal-toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<button class="modal-close modal-toggle">
<i class="fas fa-times"></i>
</button>
<h2 class="modal-heading">
Reminder Details:
</h2>
</div>
<div class="modal-body">
<div class="modal-content">
<div class="row gap10 mb-2">
<div class="col-title">
每小時出車數:
<input type="checkbox" checked />
</div>
<div class="col">
車數:
<select>
<option value="0"></option>
<option value="1" selected>
1
</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="col">
Time From:
<select class="hour">
<option value="0"></option>
<option value="1" selected>
1
</option>
</select>
:
<select class="sec">
<option value="0"></option>
<option value="1" selected>
1
</option>
</select>
To:
<select class="hour">
<option value="0"></option>
<option value="1" selected>
1
</option>
</select>
:
<select class="sec">
<option value="0"></option>
<option value="1" selected>
1
</option>
</select>
</div>
</div>
<div class="row gap10 mb-2">
<div class="col-title">
最後出車時間:
<input type="checkbox" checked />
</div>
<div class="col">
時間:
<select class="hour">
<option value="0"></option>
<option value="1" selected>
1
</option>
</select>
:
<select class="sec">
<option value="0"></option>
<option value="1" selected>
1
</option>
</select>
</div>
</div>
<div class="row gap10 mb-2">
<div class="col-title">
開始出車時間:
<input type="checkbox" checked />
</div>
<div class="col">
時間:
<select class="hour">
<option value="0"></option>
<option value="1" selected>
1
</option>
</select>
:
<select class="sec">
<option value="0"></option>
<option value="1" selected>
1
</option>
</select>
</div>
</div>
<div class="row gap10 mb-2">
<div class="col-title">
超出預訂量:
<input type="checkbox" checked />
</div>
</div>
<div class="row gap10 mb-2">
<div class="col-title">
每小時最多車數:
<input type="checkbox" checked />
</div>
<div class="col">
車數:
<select>
<option value="0"></option>
<option value="1">1</option>
<option value="2" selected>
2
</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
<div class="row gap10 mb-2">
<div class="col-title">
送貨單備註:
</div>
<div class="col w-68">
<textarea rows="2"
class="w-68">備註備註備註備註備註備註備註備註備註備註備註備註</textarea>
</div>
</div>
<button class="modal-toggle saveReminderBtn">
Save
</button>
</div>
</div>
</div>
</div>
</div>
<select class="remark">
<option value="0"></option>
<option value="到地盤">到地盤</option>
<option value="直出車">直出車</option>
<option value="車/小時">車/小時</option>
<option value="等電話">等電話</option>
<option value="地盤故障">地盤故障</option>
</select>
</div>
<div class="inputDetailWrap"></div>
<div class="modalRemark modal">
<div class="modal-overlay modal-toggle"></div>
<div class="modal-wrapper modal-transition">
<div class="modal-header">
<button class="modal-close modal-toggle">
<i class="fas fa-times"></i>
</button>
<h2 class="modal-heading">
System time:
<span class="display-time"></span>
</h2>
</div>
<div class="modal-body">
<div class="modal-content">
<input type="text" class="detail" />
<button class="modal-toggle saveBtn">
Save
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="totalWrap">
<div class="d-flex justify-content-between">
<div class="total">
<table cellpadding="6" cellspacing="0" border="0">
<tr>
<td>BOOKING TOTAL:</td>
<td><input type="text" /></td>
</tr>
</table>
</div>
<div class="totalDetail">
<table cellpadding="6" cellspacing="0" border="0">
<tr>
<td>DAYS TOTAL:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>MONTH TOTAL:</td>
<td><input type="text" /></td>
</tr>
</table>
</div>
</div>
</div>
<div class="formFooter">
<div class="d-flex gap10">
<span class="nowrap">ORDERED QUANTITY:</span>
<div class="inputGroup tip">
<label>CT:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>PFA:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>20mm:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>10mm:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>PFA:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>S/F:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>R/S:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup">
<label>17D:</label>
<input type="text" />
</div>
<div class="inputGroup">
<label>Other:</label>
<input type="text" />
</div>
</div>
<div class="d-flex gap10">
<span class="nowrap">DELIVERED QUANTITY:</span>
<div class="inputGroup tip">
<label>CT:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>PFA:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>20mm:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>10mm:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>PFA:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>S/F:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup tip">
<label>R/S:</label>
<div class="tipitemT">
<input type="text" />
</div>
</div>
<div class="inputGroup">
<label>17D:</label>
<input type="text" />
</div>
<div class="inputGroup">
<label>Other:</label>
<input type="text" />
</div>
<div class="inputGroup">
<label>MIX CODE TABLE CHECKED BY:</label>
<input type="text" />
</div>
<div class="inputGroup">
<label>PLANT MANAGER:</label>
<input type="text" />
</div>
</div>
</div>
<script src="js/drawing2.js?123124"></script>
<script>
$(function() {
/*
if (imgData != null) {
var context = canvas.getContext('2d');
var image = new Image();
image.src = imgData;
image.onload = function() {
context.drawImage(image, 0, 0, image.width / 2, image.height / 2);
}
}
*/
/*
var looper = setInterval(function() {
canvas_id++
loopItem(canvas_id);
createSignPad(canvas_id)
if (canvas_id >= 10) {
clearInterval(looper)
}
}, 2000) */
$(document).on('click', '.blueThemeBtn', function() {
$('.mainTable').removeClass('orangeTheme');
$('.mainTable').addClass('blueTheme');
})
$(document).on('click', '.orangeThemeBtn', function() {
$('.mainTable').removeClass('blueTheme');
$('.mainTable').addClass('orangeTheme');
})
/* $(document).on('click', '.undoBtn', function () {
const data = signaturePad.toData()
if (data) {
data.pop() // remove the last dot or line
signaturePad.fromData(data)
}
}) */
/* document.getElementById('draw').addEventListener('click', function() {
signaturePad.maxWidth = penSize;
signaturePad.minWidth = penSize;
var ctx = canvas.getContext('2d');
$('canvas').addClass("penOn");
$('canvas').removeClass("eraseOn");
console.log(ctx.globalCompositeOperation);
ctx.globalCompositeOperation = 'source-over'; // default value
});
*/
/* document.getElementById('erase').addEventListener('click', function() {
signaturePad.maxWidth = eraseSize;
signaturePad.minWidth = eraseSize;
var ctx = canvas.getContext('2d');
$('canvas').addClass("eraseOn");
$('canvas').removeClass("penOn");
ctx.globalCompositeOperation = 'destination-out';
}); */
$(document).on('click', '.printBtn', function() {
window.print();
})
$('#datepicker').datepicker()
for (let i = 0; i <= 24; i++) {
hour = i
$('<option value="' + hour + '">' + hour + '</option>').appendTo(
'.hour',
)
}
for (let s = 0; s <= 60; s++) {
sec = s
$('<option value="' + sec + '">' + sec + '</option>').appendTo('.sec')
}
showTime()
})
// Time
function showTime() {
let time = new Date()
$(".display-time").text(time.toLocaleTimeString('en-US', {
hour12: false,
}))
setTimeout(showTime, 1000)
}
$('.saveBtn').on('click', function(e) {
var inputVal = $(this).parent().find('.detail').val();
var setTime = $(this).closest('.modalWrap').find(".display-time").text();
$(this)
.closest('.modalWrap')
.find('.modalRemark')
.toggleClass('is-visible')
$(this)
.closest('.modalWrap')
.find('.inputDetailWrap')
.append(
'<div class="inputDetailItem"><span>' +
inputVal +
'</span><span class="red">' +
setTime +
'</span> <a href="javascript:void(0);" class="deleteBtn"><i class="fas fa-trash"></i></a></div>',
)
})
$(document).on('click', '.deleteBtn', function() {
$(this).closest('div').remove()
})
$('.saveReminderBtn').on('click', function() {
$(this).closest('.modalBell').toggleClass('is-visible')
})
$('.remark').on('change', function(e) {
var val = $(this).val()
$(this).closest('.modalWrap').find('.detail').val(val)
e.preventDefault()
$(this)
.closest('.modalWrap')
.find('.modalRemark')
.toggleClass('is-visible')
})
$('.hiddenBoradBtn').on('click', function(e) {
if ($(".signature-pad--body").hasClass('hiddenCanvas')) {
alert("畫板已經顯示");
} else {
alert("畫板已經隱藏");
}
$(".signature-pad--body").toggleClass('hiddenCanvas');
})
$('.bellBtn').on('click', function(e) {
$(this).parent().find('.modalBell').toggleClass('is-visible')
})
$('.modal-close').on('click', function(e) {
e.preventDefault()
$('.modal').removeClass('is-visible')
})
</script>
</body>
</html>