ok
Mini Shell
<?php include('header.php');
$statement = $pdo->prepare("SELECT frames.*,customer.cust_firstname,customer.cust_phone FROM `frames` LEFT JOIN customer ON frames.customer_id=customer.id WHERE frames.id=".$_GET['id']);
$statement->execute();
$frames_details_data = $statement->fetchAll(PDO::FETCH_ASSOC);
?>
<style>
@media (min-width: 1200px){
.row-cols-xl-2>* {
flex: 0 0 auto;
width: 33%;
}
}
#alert-info{
background-color: #f8e5e5;
}
#note{
font-size: 14px;
color: red;
}
#kyc{
font-size: 14px;
}
@media (min-width: 1200px){
#buttonstyle {
margin-left: 13%;
color:white;
font-size: 14px;
}
}
@media (min-width: 768px){
#buttonstyle {
margin-left: 13%;
color:white;
font-size: 14px;
}
}
.wrapper .search {
border: 1px solid #c8c8c8;
overflow: hidden;
border-radius: 25px;
padding: 0 10px;
margin: 15px 0 20px;
transition: all 0.3s
}
.wrapper .search:hover,
.wrapper .search:focus-within {
border: 1px solid transparent;
box-shadow: 2px 5px 8px #1f1f1f10, 0px -4px 5px #1f1f1f10
}
.wrapper .search .form-control {
box-shadow: none;
outline: none;
border: none
}
.wrapper .search .form-control:focus::placeholder {
opacity: 0
}
.wrapper .accordion-button {
font-size: 0.9rem;
font-weight: 500
}
.wrapper .accordion-button:hover {
background-color: #f8f8f8
}
.wrapper .accordion-button:focus {
box-shadow: none
}
.wrapper .accordion-button::after {
background-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #c8c8c8;
background-position: center center;
border-radius: 50%
}
.wrapper .accordion-button:not(.collapsed) {
color: #000;
background-color: #f7f7f7;
font-weight: 600;
border-bottom: 1px solid #ddd !important
}
.accordion-button:not(.collapsed)::after {
border-color: #1E88E5
}
.wrapper .accordion-button.collapsed {
border-bottom: 1px solid #ddd !important
}
.wrapper .accordion-collapse.show {
border-bottom: 1px solid #ddd !important
}
.wrapper .accordion-collapse {
background-color: #eaf3fa
}
.wrapper .accordion-collapse ul li {
line-height: 2rem;
width: 100%;
padding: 0.5rem 1.3rem
}
.wrapper .accordion-collapse ul li:hover {
background-color: #c9e7ff
}
.wrapper .accordion-collapse ul li a {
text-decoration: none;
color: #333;
font-size: 0.85rem;
font-weight: 400;
display: block
}
.wrapper .accordion-collapse ul li:hover a {
color: #222
}
@media (max-width: 777px) {
.wrapper {
margin: 50px 20px
}
}
@media (max-width: 365px) {
.wrapper {
margin: 50px 10px
}
.w-75 {
width: 90% !important
}
}
.widgets-icons-4 {
width: 138px;
height: 138px;
display: flex;
align-items: center;
justify-content: center;
background-color: #ededed;
font-size: 27px;
border-radius: 10px;
}
.text-secondary1{
font-size: 22px;
font-family: emoji;
font-weight: bolder;
color: black !important;
}
.font-12 {
font-size: 12px;
}
</style>
<style>
.table_style {
border-collapse: collapse!important;
width: 100%;
}
.table_style td, #customers th {
border: 1px solid #ddd;
padding: 8px!important;
}
.table_style th {
padding-top: 12px!important;
padding-bottom: 12px!important;
text-align: center!important;
}
</style>
<div class="page-wrapper">
<div class="page-content">
<?php foreach($frames_details_data as $data){ ?>
<div id='DivIdToPrint'>
<div id="exportContent" class="canvas_div_pdf">
<table style="width:100%;border-collapse: collapse!important">
<tr>
<td style="text-align:center;">
<img src="https://selectionsilks.com/frames-hub/image/frames-hub-org.png" style="width:16%;height:10%;"><br>
<h2 style="font-family: SFProDisplay-Bold;font-size: 28px;margin-bottom: 2rem;font-weight: bold;">Frames Hub</h2>
</td>
</tr>
</table>
<table style="width:100%;border-collapse: collapse!important" class="table_style">
<tr>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border-right:none!important;border: 1px solid #ddd;">Name</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border-right:none!important;border-left:none!important;border: 1px solid #ddd;">:</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border-left:none;border: 1px solid #ddd;"><?=$data['cust_firstname']?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border-right:none!important;border: 1px solid #ddd;">Mobile No</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border-right:none!important;border-left:none!important;border: 1px solid #ddd;">:</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border-left:none!important;border: 1px solid #ddd;">+91 <?=$data['cust_phone']?></td>
</tr>
</table>
<br>
<table style="width:100%;border-collapse: collapse!important;border: 1px solid #ddd;" class="table_style">
<tr>
<td colspan="3">
<center><h2 style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight">Power Details</h2></center>
</td>
</tr>
<tr>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><b>Lens Type</b> : <?=$data['lens_type']?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><b>Date</b> : <?=date('d-m-Y', strtotime($data["date"]))?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><b>PD</b> : <?=$data['fram_pd_first']?> - <?=$data['frame_pd_second']?></td>
</tr>
<tr>
<td colspan="3">
<table style="width:100%;">
<tr>
<td style="border: 1px solid #ddd;"></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;">SPH</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;">CYL</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;">AXIS</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;">ADD</td>
</tr>
<tr>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;">RE</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><?=$data['right_sph']?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><?=$data['right_cyl']?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><?=$data['right_axis']?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><?=$data['right_add']?></td>
</tr>
<tr>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;">LE</td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><?=$data['left_sph']?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><?=$data['left_cyl']?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><?=$data['left_axis']?></td>
<td style="font-family: SFProDisplay-Bold!important; font-size: 20px; margin-bottom: 2rem; font-weight;text-align:center;border: 1px solid #ddd;"><?=$data['left_add']?></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
<div id="editor"></div>
</div>
<?php } ?>
<br>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
<center><input type='button' id='btn' value='Print' onclick='printDiv();' class="btn btn-warning btn-sm"> <button onclick="getPDF()" class="btn btn-primary btn-sm">Download</button> <a href="https://api.whatsapp.com/send?phone=<?=$frames_details_data[0]['cust_phone']?>&text=" target="_blank" class="btn btn-success btn-sm "><i class="fa fa-share-alt"></i> Whatsapp </a> </center>
</div>
</div>
</div>
</div>
<script>
function printDiv()
{
var divToPrint=document.getElementById('DivIdToPrint');
var newWin=window.open('','Print-Window');
newWin.document.open();
newWin.document.write('<html><body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');
newWin.document.close();
setTimeout(function(){newWin.close();},10);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js" ></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script>
$(document).ready(function() {
console.log("cdn link is working");
$('.select2').select2();
});
</script>
<script>
function getPDF(){
var HTML_Width = $(".canvas_div_pdf").width();
var HTML_Height = $(".canvas_div_pdf").height();
var top_left_margin = 15;
var PDF_Width = HTML_Width+(top_left_margin*2);
var PDF_Height = (PDF_Width*1.5)+(top_left_margin*2);
var canvas_image_width = HTML_Width;
var canvas_image_height = HTML_Height;
var totalPDFPages = Math.ceil(HTML_Height/PDF_Height)-1;
html2canvas($(".canvas_div_pdf")[0],{allowTaint:true}).then(function(canvas) {
canvas.getContext('2d');
console.log(canvas.height+" "+canvas.width);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin,canvas_image_width,canvas_image_height);
for (var i = 1; i <= totalPDFPages; i++) {
pdf.addPage(PDF_Width, PDF_Height);
pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
}
pdf.save("HTML-Document.pdf");
});
};
</script>
<?php include('footer.php'); ?>
Zerion Mini Shell 1.0