<!DOCTYPE html>
<html>
<head>
<title>BICT pdf editor</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="./css/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="./css/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="./css/ajax/libs/prettify/r298/prettify.min.css">
<link rel="stylesheet" href="./css/bict/bictpdf.css">
<link rel="stylesheet" href="./css/bict/pdfannotate.css">
<link rel="stylesheet" href="./css/bict/thsarabunnew.css">
</head>
<body>
<div class="toolbar">
<div class="tool">
<img src="./images/BICT_Logo45.png" alt="BICT logo" width="110" height="30">
</div>
<div class="tool">
<label for="">Brush size</label>
<input type="number" class="form-control text-right" value="1" id="brush-size" max="50">
</div>
<div class="tool">
<label for="">Font size</label>
<select id="font-size" class="form-control">
<option value="10">10</option>
<option value="12">12</option>
<option value="16" selected>16</option>
<option value="18">18</option>
<option value="24">24</option>
<option value="32">32</option>
<option value="48">48</option>
<option value="64">64</option>
<option value="72">72</option>
<option value="108">108</option>
</select>
</div>
<div class="tool">
<button class="color-tool active" style="background-color: #212121;"></button>
<button class="color-tool" style="background-color: red;"></button>
<button class="color-tool" style="background-color: blue;"></button>
<button class="color-tool" style="background-color: green;"></button>
<button class="color-tool" style="background-color: yellow;"></button>
</div>
<div class="tool">
<button class="tool-button active"><i class="fa fa-hand-paper-o" title="Free Hand" onclick="enableSelector(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-pencil" title="Pencil" onclick="enablePencil(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-font" title="Add Text" onclick="enableAddText(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-long-arrow-right" title="Add Arrow" onclick="enableAddArrow(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-square-o" title="Add rectangle" onclick="enableRectangle(event)"></i></button>
</div>
<div class="tool">
<button class="tool-button"><i class="fa fa-picture-o" title="Add an Image" onclick="addImage(event)"></i></button>
</div>
<div class="tool">
<button class="btn btn-danger btn-sm" onclick="deleteSelectedObject(event)"><i class="fa fa-trash"></i></button>
</div>
<div class="tool">
<button class="btn btn-danger btn-sm" onclick="clearPage()">Clear Page</button>
</div>
<div class="tool">
<button class="btn btn-info btn-sm" onclick="showPdfData()">{}</button>
</div>
<div class="tool">
<button class="btn btn-info btn-sm" onclick="loadImage('./images/signature-image.png')">Signature</button>
</div>
<div class="tool">
<button class="btn btn-light btn-sm" onclick="savePDF()"><i class="fa fa-save"></i> Save</button>
</div>
<div class="tool">
<button class="btn btn-light btn-sm" onclick="downloadPDF()"><i class="fa fa-download"></i> Download</button>
</div>
</div>
<div id="pdf-container"></div>
<div class="modal fade" id="dataModal" tabindex="-1" role="dialog" aria-labelledby="dataModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dataModalLabel">PDF annotation data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<pre class="prettyprint lang-json linenums">
</pre>
</div>
</div>
</div>
</div>
<script src="./js/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./js/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="./js/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="./js/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<script>pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';</script>
<script src="./js/ajax/libs/fabric.js/4.3.0/fabric.min.js"></script>
<script src="./js/ajax/libs/jspdf/2.2.0/jspdf.umd.min.js"></script>
<script src="./js/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="./js/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <!-- SweetAlert2 -->
<script src="./js/bict/arrow.fabric.js"></script>
<script src="./js/bict/pdfannotate.js"></script>
<script src="./js/bict/bictpdf.js"></script>
</body>
</html>
