| 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="css/style.css?v20231122123123123256" />
<script src="https://code.jquery.com/jquery-3.6.3.js"
integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
<script src="js/plugin/PortrayCanvas-master/dist/portraycanvas.js"></script>
<style>
.sig {
height: 100%;
}
.signature-pad--body canvas {
width: 1675px;
height: 432px;
}
</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>
<th rowspan="2" width="700px" id="Remark">Remark</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="72" 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>
<td rowspan="6" 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 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">
<div class="typed"></div>
<canvas class="pad canvasSp" id="canvasSp" width="1675" height="432"></canvas>
<input type="hidden" name="output" class="output">
</div>
<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>
<option value="20">20</option>
<option value="40">40</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>
<!--
<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>
</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>
var canvas = document.getElementById('canvasSp');
var portray = new PortrayCanvas(canvas);
const wrapper = document.getElementById('signature-pad');
let canvas_id = '';
$(function() {
var canvas = document.getElementById('canvasSp');
var portray = new PortrayCanvas(canvas);
var canvas_id = 0;
var looper = setInterval(function() {
canvas_id++
loopItem(canvas_id);
createSignPad(canvas_id);
/* console.log(canvas_id); */
if (canvas_id >= 10) {
clearInterval(looper)
}
}, 2000)
});
function createSignPad(canvas_id) {
const canvas = wrapper.querySelector('.canvasSp' + canvas_id);
new PortrayCanvas(canvas);
}
$(document).on('change', '.penSize', function() {
var penSizeSelect = $(this).val()
penSize = penSizeSelect;
portray.setlineWidth(penSize);
$('canvas').addClass("penOn");
$('canvas').removeClass("eraseOn");
});
$(document).on('click', '.penSize', function() {
var penSizeSelect = $(this).val()
penSize = penSizeSelect;
var canvasClass = $(this).parent().parent().parent().find('canvas');
var canvas = canvasClass.get(0);
var ctx = canvas.getContext('2d');
console.log(ctx);
$('canvas').addClass("penOn");
$('canvas').removeClass("eraseOn");
ctx.globalCompositeOperation = 'source-over';
})
$(document).on('change', '.penColor', function() {
var color = $(this).val();
portray.setColor(color);
var canvasClass = $(this).parent().parent().parent().find('canvas');
var canvas = canvasClass.get(0);
var ctx = canvas.getContext('2d');
console.log(ctx);
$('canvas').addClass("penOn");
$('canvas').removeClass("eraseOn");
ctx.globalCompositeOperation = 'source-over';
});
/* $(document).on('change', '.eraseSize', function() {
var eraseSizeSelect = $(this).val();
eraseSize = eraseSizeSelect;
portray.setlineWidth(1);
var ctx = canvas.getContext('2d');
$('canvas').addClass("eraseOn");
$('canvas').removeClass("penOn");
ctx.globalCompositeOperation = 'source-over';
portray.lineTo(position.x, position.y);
portray.stroke();
}); */
$(document).on('click', '.eraseSize', function() {
var eraseSizeSelect = $(this).val();
eraseSize = 10;
var canvasClass = $(this).parent().parent().parent().find('.sig canvas');
var canvas = canvasClass.get(0);
var ctx = canvas.getContext('2d');
console.log(ctx);
$('canvas').addClass("penOn");
$('canvas').removeClass("eraseOn");
ctx.globalCompositeOperation = 'destination-in';
ctx.beginPath();
// Only erase when left mouse button is pressed
ctx.fillRect(0, 0, canvasClass.width, canvasClass.height);
/* var ctx = canvas.getContext('2d');
// Erase the pixels within the eraser size
ctx.globalCompositeOperation = 'destination-out';
ctx.beginPath();
ctx.arc(1, 2, eraserSize / 2, 0, 2 * Math.PI);
ctx.fill();
console.log(ctx); */
});
$(document).on('click', '#undo', function() {
portray.undo();
});
/*
$(".penSize").change(function() {
var penSizeSelect = $(this).val();
penSize = penSizeSelect;
signaturePad.penWidth = penSize;
});
*/
function loopItem(canvas_id) {
$(` <tr> <td colspan="72" 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>
<td rowspan="6" 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 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 signature-pad--body">
<div class="sig">
<div class="typed"></div>
<canvas class="pad canvasSp${canvas_id}" id="${canvas_id}" width="1675" height="432"></canvas>
<input type="hidden" name="output" class="output">
</div>
<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>
<option value="20">20</option>
<option value="40">40</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>
</td>
</tr>
`).appendTo('.dataBoay');
}
/* setInterval(function() {
$('.sigPad').signaturePad({
drawOnly: true,
penCap: 'butt',
penWidth: 2,
lineColour: '#ccc',
lineWidth: 0,
lineTop: 0,
bgColour: 'rgba(255,255,255,0)',
drawBezierCurves: true,
});
loopItem();
}, 3000); */
</script>
</body>
</html>