Revonzy Mini Shell

<?php 
	require_once('lib/functions.php');
	$db=new login_function();
	
	$crt_id	=	"";
	$details = array();
	
	if(isset($_GET['crt_id']))
	{
		$crt_id	=	$_GET['crt_id'];
	}
	
	$details   =   $db->get_all_certificates_data_from_id($crt_id);
	$counter    =   0;
	if(!empty($details))
	{
	    $res_id     =   $details[$counter][0];
		$res_roll_no   =    $details[$counter][1];
		$res_registration_no    =   $details[$counter][2];
		$res_course =   $details[$counter][3];
		$res_name   =   $details[$counter][4];
		$res_date   =   $details[$counter][5];
		$res_time   =   $details[$counter][6];
		$qualification= $details[$counter][7];
		$mobile_number  =   $details[$counter][8];
		$address    =   $details[$counter][9];
		
?>
<div id="capture" class="certificate_page" style="background-image:url('images/certificate.png'); height:750px; width:500px; background-size:100% 100%; margin:auto;">
    
    <div style="display:inline-table; width:100%;margin-top:275px; font-weight:bold; font-size:17px; margin-left:75px;"><?php echo $res_id; ?></div>
    
    <div style="display:inline-table; width:100%;margin-top:132px; font-weight:bold; font-size:17px; margin-left:232px;"><?php echo $res_name; ?></div>
    
    <div style="margin:auto;margin-top:42px; width:80%; text-shadow:1px 0px #FF0000; font-weight:bold; height:42px; font-size:17px; text-align:center; color:red;"><?php echo $res_course; ?></div>

<?php
    $res_date_data = explode("-",$res_date);
    $res_date = $res_date_data[2]."-".$res_date_data[1]."-".$res_date_data[0];
?>
    
    <div style="float:right;margin-top:5px; text-shadow:1px 0px #008000; font-weight:bold; font-size:17px; text-align:center; color:#228B22; margin-right:45px;"><?php echo $res_date; ?></div>

    
</div>
<?php
	}
	else
	{
	    echo "No Certificate Data Found";
	}
?>

<br /><br />

<center><button id="btn" style="">Donwload Certificate</button></center>

<br /><br />

<style>
#btn
{
    padding:10px; border:1px solid #DDD; color:#333; background-color:#EFEFEF;
    font-weight:bold;
    font-size:18px;
    cursor:pointer;
}
#btn:hover
{
    color:#8C2DC4;
    background-color:#FAFAFA;
}
</style>

<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/html2canvas.js" type="text/javascript"></script>
<script src="js/html2canvas.min.js" type="text/javascript"></script>
<script type="text/javascript">
function capture() {
    const captureElement = document.querySelector('#capture')
    html2canvas(captureElement)
        .then(canvas => {
            canvas.style.display = 'none'
            document.body.appendChild(canvas)
            return canvas
        })
        .then(canvas => {
            const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream')
            const a = document.createElement('a')
            a.setAttribute('download', '<?php echo $res_name."-".$res_course; ?>.png')
            a.setAttribute('href', image)
            a.click()
            canvas.remove()
        })
}

const btn = document.querySelector('#btn')
btn.addEventListener('click', capture)

</script>