FaceCrop Progress Bar : ps

This commit is contained in:
VE10-Sanjeev 2022-10-03 18:31:09 +05:30
parent aa811d7daa
commit 77235dd3b1
15 changed files with 433 additions and 241 deletions

View File

@ -5812,7 +5812,7 @@ class PD_Controller extends REST_Controller
}
}
$db_result = $this->PD_Model->selectCustomRecords(array('facecrop'), array('fk_pd_id' => $pdid,'isactive'=>1), PDAPPLICANTSDETAILS);
$db_result = $this->PD_Model->selectCustomRecords(array('facecrop'), array('fk_pd_id' => $pdid,'isactive'=>1,'facemark_image_generated'=>1), PDAPPLICANTSDETAILS);
$fc_array = array();
if(!empty($db_result)){
for ($dinx = 0; $dinx < count($db_result); $dinx++) {
@ -5909,6 +5909,7 @@ class PD_Controller extends REST_Controller
$pdf_doc = $this->pdfgenerator->generate($t, $filename = 'version', $stream = false, $paper = 'A4', $orientation = "portrait");
//End of PDF Gen using DOM PDF
$output_file2 = $this->external_path . "/pd_reports/" . $pdid . "/sample.pdf";
// $output_file2 = $this->external_path . "/pd_reports/sample.pdf";
$ti = file_put_contents($output_file2, $pdf_doc);
echo $output_file2;
echo $ti;

View File

@ -6,9 +6,6 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -742,16 +739,25 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<br>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -761,19 +767,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<p contenteditable="true"><b>Loan Applicants:</b></p>

View File

@ -6,9 +6,6 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -750,15 +747,24 @@ font-weight: bolder;;
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -768,19 +774,15 @@ font-weight: bolder;;
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}
}
}
?>

View File

@ -6,9 +6,6 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -745,16 +742,25 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<br>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -764,19 +770,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<p contenteditable="true"><b>Loan Applicants:</b></p>

View File

@ -753,60 +753,46 @@ if ( isset($pdf) ) {
?>
<br>
<?php
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'progress-bar progress-bar-success';
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'progress-bar progress-bar-warning';
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'progress-bar progress-bar-danger';
$progress_bar_class = 'rcorners_red';
}
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
// echo '<div><div class="facecrop">';
// echo '<img src="data:image/png;base64,'. $si["base64"].'" width="50" height="50" alt="'.$si["name"].'" align="left"/>';
// echo $symbol;
// // if(round($ci[$i]["Similarity"]) > 50){ echo '<center><h1>'.$equal_mark.'</h1></center>'; }else{ echo '<center><h1>'.$notequal_mark.'</h1></center>'; }
// echo '<img src="data:image/png;base64,'. $ci[$i]["base64"].'" width="50" height="50" alt="'.$ci[$i]["name"].'" align="right"/>';
// echo '</div></div>';
// echo '<div class="progress">
// <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
// '.round($ci[$i]["Similarity"]).'
// </div>
// </div>';
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
</div>
<div class="facecrop_column">'.$symbol.'</div>
<div class="facecrop_column">
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
</div>
<div class="facecrop_column">'.$symbol.'</div>
<div class="facecrop_column">
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).' %</span>
</p>
<div class="progress">
<div class="'.$progress_bar_class.'" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).' %">
'.round($ci[$i]["Similarity"]).' %
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// echo '<div class="container"></div>';
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<p contenteditable="true"><b><?php echo $loan_word;?> Applicants:</b></p>
@ -5189,9 +5175,37 @@ if($total_no_of_business > 0) {
echo "</table>";
}
// ########################### End Of Score Card Section #########################################
echo "here check";
?>
<div class="PB-container">
<div class="PB-skills">
<h3>Similarty</h3>
<div class="PB-progress-bar">
<div class="PB-red">
<span>70%</span>
</div>
</div>
<h3>Similarty</h3>
<div class="PB-progress-bar">
<div class="PB-green">
<span>55%</span>
</div>
</div>
<h3>Similarty</h3>
<div class="PB-progress-bar">
<div class="PB-orange">
<span>67%</span>
</div>
</div>
<h3>Similarty</h3>
<div class="PB-progress-bar">
<div class="PB-html">
<span>37</span>
</div>
</div>
</div>
</div>
</body>
</html>

View File

@ -5,9 +5,6 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<html lang="en" id="mydoc" onkeyup="saveEdits(event)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">

View File

@ -9,9 +9,6 @@ $loan_word = $pd_master_details[0]['lender_short_name'] != 'CFPL' ? 'Loan' : 'Fa
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -743,16 +740,25 @@ if ( isset($pdf) ) {
<br>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -762,19 +768,16 @@ if ( isset($pdf) ) {
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<p contenteditable="true"><b><?php echo $loan_word;?> Applicants:</b></p>

View File

@ -474,8 +474,8 @@ $loan_word = $pd_master_details[0]['lender_short_name'] != 'CFPL' ? 'Loan' : 'Fa
.facecrop_row { display: flex; }
/* Create three equal columns that sits next to each other */
.facecrop_column { flex: 33.33%; padding: 5px;}
/* ######### TOOLTIP CSS END ######### */
/* ######### TOOLTIP CSS END ######### */
</style>
<script type="text/javascript">
@ -741,13 +741,22 @@ if ( isset($pdf) ) {
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -757,15 +766,11 @@ if ( isset($pdf) ) {
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
@ -5070,7 +5075,11 @@ if($total_no_of_business > 0) {
?>
<script>
const parentDOM = document.getElementsByClassName("PB-html");
const test = parentDOM;
test[0].style.background = "white";
</script>
</body>
</html>

View File

@ -4,11 +4,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en" id="mydoc" onkeyup="saveEdits(event)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -709,16 +706,25 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<br>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -728,19 +734,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<p contenteditable="true"><b>Loan Applicants:</b></p>

View File

@ -4,11 +4,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en" id="mydoc" onkeyup="saveEdits(event)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -709,16 +706,25 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<br>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -728,19 +734,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<p contenteditable="true"><b>Loan Applicants:</b></p>

View File

@ -4,11 +4,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en" id="mydoc" onkeyup="saveEdits(event)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -710,16 +707,25 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<br>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -729,19 +735,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<p contenteditable="true"><b>Loan Applicants:</b></p>
<table class="scorecard_table">

View File

@ -4,11 +4,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en" id="mydoc" onkeyup="saveEdits(event)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -709,16 +706,25 @@ defined('BASEPATH') OR exit('No direct script access allowed');
?>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -728,19 +734,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<!-- <br> -->

View File

@ -4,11 +4,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en" id="mydoc" onkeyup="saveEdits(event)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -717,16 +714,25 @@ font-weight: bolder;;
?>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -736,19 +742,16 @@ font-weight: bolder;;
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<!-- <br> -->

View File

@ -4,11 +4,8 @@ defined('BASEPATH') OR exit('No direct script access allowed');
?><!DOCTYPE html>
<html lang="en" id="mydoc" onkeyup="saveEdits(event)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
@ -711,16 +708,25 @@ defined('BASEPATH') OR exit('No direct script access allowed');
?>
<?php
if(!empty($facecrop)){
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
for ($fc = 0; $fc < count($facecrop); $fc++) {
$fc_arr = $facecrop[$fc];
$ci = !empty($fc_arr[0]['compare_image']) ? $fc_arr[0]['compare_image'] :array() ;
$si = !empty($fc_arr[1]['source_image']) ? $fc_arr[1]['source_image'] : array();
// ########################### Percentage Bar Section #########################################
echo "<h3>Face Comparison</h3>" ;
$notequal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>≠</center></span>';
$equal_mark ='<span style="font-family: DejaVu Sans; sans-serif;"><center>=</center></span>';
for ($i = 0; $i < count($ci); $i++) {
$symbol = (round($ci[$i]["Similarity"]) > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$symbol = ($similarity > 50) ? '<center><h1>'.$equal_mark.'</h1></center>': '<center><h1>'.$notequal_mark.'</h1></center>';
$similarity = round($ci[$i]["Similarity"]);
if ($similarity > 80) { // above 81 green
$progress_bar_class = 'rcorners_green';
} else if ($similarity <= 80 && $similarity > 60) { // in between 61 to 80 orange
$progress_bar_class = 'rcorners_amber';
} else if ($similarity <= 60) { // below 60 red
$progress_bar_class = 'rcorners_red';
}
echo '<div class="facecrop_row facecrop">
<div class="facecrop_column">
<img src="data:image/png;base64,'. $si["base64"].'" alt="'.$si["name"].'" width="50" height="50" align="left">
@ -730,19 +736,16 @@ defined('BASEPATH') OR exit('No direct script access allowed');
<img src="data:image/png;base64,'. $ci[$i]["base64"].'" alt="'.$ci[$i]["name"].'" width="50" height="50" align="right">
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.round($ci[$i]["Similarity"]).'</span>
</p>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:'.round($ci[$i]["Similarity"]).'%">
'.round($ci[$i]["Similarity"]).'
</div>
</div>';
echo '<p style="text-align:left;">Similarity
<span style="float:right;">'.$similarity.' %</span>
</p>';
echo '<div style="width: 100% !important; "id="'. $progress_bar_class .'"></div>';
}
// ########################### End of Percentage Bar Section #########################################
}}
}
}
?>
<!-- <br> -->

View File

@ -0,0 +1,142 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Merriweather" rel="stylesheet">
<style type="text/css">
/* ######### TOOLTIP CSS END ######### */
.PB-container {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.PB-skill h3 {
font-weight: 400;
letter-spacing: 1px;
margin-top: 40px;
margin-bottom: 5px;
color: #fff;
font-size: 16px;
}
.PB-progress-bar {
width: 600px;
height: 10px;
background: #959595;
border-radius: 5px;
}
.PB-progress-bar div {
width: 0%;
height: 10px;
border-radius: 5px;
}
.PB-progress-bar span {
width: 41px;
height: 41px;
background: #FFF;
border-radius: 50%;
float: right;
margin-top: -15px;
margin-right: -20px;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.PB-html {
background: #0191ed;
animation: PB-html 1s linear forwards
}
.PB-html span {
border: 1px solid #e91e63;
}
@keyframes PB-html {
100% {
width: 86%;
}
}
.PB-red {
background: #e00201;
animation: PB-red 1s linear forwards
}
.PB-red span {
border: 1px solid #e00201;
}
@keyframes PB-red {
100% {
width: 70%;
}
}
.PB-green {
background: #33cc33;
animation: PB-green 1s linear forwards
}
.PB-green span {
border: 1px solid #33cc33;
}
@keyframes PB-green {
100% {
width: 55%;
}
}
.PB-orange {
background: #ff9900;
animation: PB-orange 1s linear forwards
}
.PB-orange span {
border: 1px solid #ff9900;
}
@keyframes PB-orange {
100% {
width: 67%;
}
}
</style>
<div class="PB-container">
<div class="PB-skills">
<h3>Similarty</h3>
<div class="PB-progress-bar">
<div class="PB-red">
<span>70%</span>
</div>
</div>
<h3>Similarty</h3>
<div class="PB-progress-bar">
<div class="PB-green">
<span>55%</span>
</div>
</div>
<h3>Similarty</h3>
<div class="PB-progress-bar">
<div class="PB-orange">
<span>67%</span>
</div>
</div>
<h3>Similarty</h3>
<div class="PB-progress-bar">
<div class="PB-html">
<span>37</span>
</div>
</div>
</div>
</body>
</html>