| 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 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>
</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="2" width="124px">
Man Kit Construction
</td>
<td rowspan="2" width="40px">1</td>
<td rowspan="2" width="100px">45/20/100</td>
<td rowspan="2" width="40px">300</td>
<td width="80px">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"></td>
<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 rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></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 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"></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 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 rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></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 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"></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 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="signature-pad--body">
<canvas class="canvasSp"></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>
<!-- <button id="draw">Draw</button> -->
<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="erase">Erase</button> -->
<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>
/* let imgData = localStorage.getItem("imgdata"); */
/* console.log(imgData); */
const wrapper = document.getElementById('signature-pad');
$(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 canvas_id = 0
/*
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', '#undo', function() {
$("canvas").each(function(index, item) {
console.log(item.id);
});
})
/* $(document).on('click', '.undoBtn', function () {
const data = signaturePad.toData()
if (data) {
data.pop() // remove the last dot or line
signaturePad.fromData(data)
}
}) */
$(document).on('change', '.penColor', function() {
var color = $(this).val()
signaturePad.penColor = color;
})
let eraseSize = $('.penSize').val();
let penSize = $('.eraseSize').val();
$(document).on('change', '.penSize', function() {
var penSizeSelect = $(this).val()
penSize = penSizeSelect;
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';
})
$(document).on('click', '.penSize', function() {
var penSizeSelect = $(this).val()
penSize = penSizeSelect;
signaturePad.maxWidth = penSize;
signaturePad.minWidth = penSize;
var ctx = canvas.getContext('2d');
$('canvas').addClass("penOn");
$('canvas').removeClass("eraseOn");
console.log(canvas);
ctx.globalCompositeOperation = 'source-over';
})
/* 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).on('change', '.eraseSize', function() {
var eraseSizeSelect = $(this).val();
eraseSize = eraseSizeSelect;
signaturePad.maxWidth = eraseSize;
signaturePad.minWidth = eraseSize;
var ctx = canvas.getContext('2d');
console.log(ctx);
$('canvas').addClass("eraseOn");
$('canvas').removeClass("penOn");
ctx.globalCompositeOperation = 'destination-out';
});
$(document).on('click', '.eraseSize', function() {
var eraseSizeSelect = $(this).val();
eraseSize = eraseSizeSelect;
signaturePad.maxWidth = eraseSize;
signaturePad.minWidth = eraseSize;
$('canvas').addClass("eraseOn");
$('canvas').removeClass("penOn");
var ctx = canvas.getContext('2d');
console.log(canvas);
ctx.globalCompositeOperation = 'destination-out';
});
/* 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.getElementById('undo').addEventListener('click', function() {
const data = signaturePad.toData();
if (data) {
data.pop(); // remove the last dot or line
signaturePad.fromData(data);
}
});
$(document).on('click', '.printBtn', function() {
window.print();
})
$(document).on('click', '#saveSvgBtn', function() {
if (signaturePad.isEmpty()) {
alert("Please provide a signature first.");
} else {
const dataURL = signaturePad.toDataURL();
var context = canvas.getContext('2d');
var image = new Image();
image.src = dataURL;
image.onload = function() {
context.drawImage(image, 0, 0, image.width / 2, image.height / 2);
}
/* localStorage.setItem("imgdata", dataURL); */
/* const dataURL = signaturePad.toDataURL('image/svg+xml'); */
/* download(dataURL, "signature.svg"); */
}
})
/* setInterval(function() {
loopItem();
}, 3000); */
$('#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()
})
function createSignPad(canvas_id) {
const canvas = wrapper.querySelector('.canvas' + canvas_id);
new SignaturePad(canvas, {
minWidth: 1.5,
maxWidth: 1.5,
// It's Necessary to use an opaque color when saving image as JPEG;
// this option can be omitted if only saving as PNG or SVG
backgroundColor: 'rgb(255, 255, 255)',
})
function resizeCanvas() {
// When zoomed out to less than 100%, for some very strange reason,
// some browsers report devicePixelRatio as less than 1
// and only part of the canvas is cleared then.
const ratio = Math.max(window.devicePixelRatio || 1, 2)
// This part causes the canvas to be cleared
canvas.width = canvas.offsetWidth * ratio
canvas.height = canvas.offsetHeight * ratio
canvas.getContext('2d').scale(ratio, ratio)
// This library does not listen for canvas changes, so after the canvas is automatically
// cleared by the browser, SignaturePad#isEmpty might still return false, even though the
// canvas looks empty, because the internal data of this library wasn't cleared. To make sure
// that the state of this library is consistent with visual state of the canvas, you
// have to clear it manually.
//signaturePad.clear();
// If you want to keep the drawing on resize instead of clearing it you can reset the data.
}
$('signature-pad--body').onresize = resizeCanvas
resizeCanvas()
}
// 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')
})
function loopItem(canvas_id) {
$(
` <tr>
<td colspan="72" class="rowData">
<table class="table" cellpadding="6" cellspacing="0" border="0">
<tbody>
<tr>
<td rowspan="2" width="124px">
Man Kit Construction
</td>
<td rowspan="2" width="40px">1</td>
<td rowspan="2" width="100px">45/20/100</td>
<td rowspan="2" width="40px">300</td>
<td width="80px">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>
<td rowspan="2" width="700px">
<div class="modalWrap">
<div class="d-flex mb-2">
<div>
<a
href="javascript:void(0);"
class="icon bellBtn"
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" />
</div>
<div class="col">
車數:
<select>
<option value="0"></option>
<option value="1">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>
</select>
:
<select class="sec">
<option value="0"></option>
</select>
To:
<select class="hour">
<option value="0"></option>
</select>
:
<select class="sec">
<option value="0"></option>
</select>
</div>
</div>
<div class="row gap10 mb-2">
<div class="col-title">
最後出車時間:
<input type="checkbox" />
</div>
<div class="col">
時間:
<select class="hour">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
:
<select class="sec">
<option value="0"></option>
<option value="1">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>
<div class="row gap10 mb-2">
<div class="col-title">
開始出車時間:
<input type="checkbox" />
</div>
<div class="col">
時間:
<select class="hour">
<option value="0"></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
:
<select class="sec">
<option value="0"></option>
</select>
</div>
</div>
<div class="row gap10 mb-2">
<div class="col-title">
超出預訂量:
<input type="checkbox" />
</div>
</div>
<div class="row gap10 mb-2">
<div class="col-title">
每小時最多車數:
<input type="checkbox" />
</div>
<div class="col">
車數:
<select>
<option value="0"></option>
<option value="1">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>
<div class="row gap10 mb-2">
<div class="col-title">
送貨單備註:
</div>
<div class="col">
<textarea rows="2"></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>
<!-- <a type="button" class="modal-toggle" href="#">Write</a> -->
</td>
</tr>
<tr>
<td class="carBottomNo"></td>
<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 rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></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 class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td></td>
<td rowspan="2">
<div class="modalWrap">
<div class="d-flex mb-2">
<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>
</td>
</tr>
<tr>
<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 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 rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td rowspan="2"></td>
<td></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 class="carNo left_line"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td class="carNo"></td>
<td></td>
<td rowspan="2">
<div class="modalWrap">
<div class="d-flex mb-2">
<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>
</td>
</tr>
<tr>
<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 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="signature-pad--body">
<canvas class="canvas` +
canvas_id +
`" id="` +
canvas_id +
`"></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>
<!-- <button id="draw">Draw</button> -->
<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="erase">Erase</button> -->
<button id="undo">Undo</button>
<button id="saveSvgBtn">Save</button>
</div>`,
).appendTo('.dataBoay')
}
</script>
<script src="js/signature_pad.umd.js"></script>
<script src="js/app.js"></script>
</body>
</html>