Sindbad~EG File Manager
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Photo Badge</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' type='text/css' media='screen' href='/static/css/webcam-demo.css'>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/static/js/webcam-easy.min.js"></script>
<style type="text/css">
body {
/*background-image: url("images/background/selfie-booth_V1.jpg");*/
background-repeat: no-repeat;
background-size: 100%;
background-color: transparent !important;
}
.loader {
position: absolute;
z-index: 10000;
background: #fff;
width: 100%;
height: 100vh;
top: 0;
}
.loader-text
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.frame {
/* background-image: url("/static/images/selfie_booth/frame_v2.png");*/
/*background-repeat: no-repeat;*/
/*background-size: 100%;*/
/*background-color: transparent !important;*/
width:449px;
height:624px;
/*width:263px;*/
/*height:366px;*/
position: relative;
}
.frame_bg {
background-image: url("/static/images/selfie_booth/frame_v4.png");
background-repeat: no-repeat;
background-size: 100%;
background-color: transparent !important;
width:449px;
height:675px;
/*width:263px;*/
/*height:366px;*/
position: absolute;
z-index :2;
}
.frame_box {
position: absolute;
/* z-index: -1; */
width: 100%;
height: 500px;
background: black;
overflow: hidden;
top: 104px;
}
.scan_box {
position: absolute;
width: 100%;
bottom: 125px;
z-index: 3;
color:#fff;
}
.frame_layout img
{
z-index: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*height: 157px;*/
/*width: auto;*/
height: auto;
width: auto;
min-width: 100px;
max-width: 211px;
}
#webcam-app {
/*background-image: url('static/images/photobooth/photo-booth-bg.jpeg');*/
/*background-position: center center;*/
/*background-repeat: no-repeat;*/
/*background-size: cover;*/
/*background-color: black;*/
width: 100vw;
height:calc(100vw * 0.4) ;
}
/*.list-group-item { color:#fff !important; }*/
/*.list-group-item { background: green !important; }
.list-group-item:nth-child(odd) { background: y !important; }*/
.barcodeTarget{
text-align: center !important;
margin:0px auto;
/*margin-left: 100px;*/
/*margin-left: 123px; */
}
#cameraFlip
{
padding:0px;
background:none;
}
.flip_btn
{
font-size: 41px !important;
padding: 5px !important;
/* background: none; */
margin: 0px;
/* height: 10px; */
display: inline;
}
.barcode_box{
position: absolute;
padding: 5px;
background: white;
/* width: 200px; */
transform: translateX(-50%);
left: 50%;
margin: 0px auto;
z-index: 2;
bottom: 34px;
}
</style>
</head>
<body>
<br/><br/><br/>
<div class="loader" style="display:none;"><h4 class="text-center text-danger loader-text" >Please wait..</h4></div>
<div class="row">
<div class="col-2 text-center"></div>
<div class="col-8 text-center">
<h2 class="text-center" style="color: white;"></h2>
</div>
<div class="col-2 text-right">
<!-- BACK TO BUTTON-->
</div>
</div>
<img src="" id="img2">
<input type="hidden" name="del_nos_array" id="del_nos_array" value="{{del_nos_array}}">
<!--<div class="frame d-none" id="frame" >-->
<!-- <div class="frame_bg">-->
<!-- </div>-->
<!-- <div class="frame_box">-->
<!-- <div class="frame_layout">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div id="delegate_details" class="scan_box"> -->
<!-- <div class="text-center mt-3 h5">-->
<!-- {{del_data.full_name or '' }}-->
<!-- </div>-->
<!-- <div class="text-center">-->
<!-- {{del_data.delegate_no or '' }}-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="barcode_box">-->
<!-- <div class="barcodeTarget_1 barcodeTarget text-center" ></div>-->
<!-- </div>-->
<!--</div>-->
<!--<div class="frame" id="frame">-->
<!-- <img src="" id="img2">-->
<!-- <div id="delegate_details" class="scan_box"> -->
<!-- <div class="text-center text-dark mt-3 ">-->
<!-- Mr. Ganesan Jeyaraman-->
<!-- </div>-->
<!-- <div class="barcodeTarget_1 barcodeTarget mt-3 text-center" ></div>-->
<!-- <div class="text-center">-->
<!-- 1-->
<!-- </div>-->
<!-- </div>-->
<!-- </div> -->
<!--<img src="/static/images/selfie_booth/frame_v2.png" id="img1" style="display: none" >-->
<!-- <div id="loader" class="alert alert-warning">Please Wait.. Your Snap is generating</div> -->
<main id="webcam-app">
<div class="form-control webcam-start" id="webcam-control">
<label class="form-switch">
<input type="checkbox" id="webcam-switch">
<i></i>
<span id="webcam-caption">Click to Start Camera</span>
</label>
<button id="cameraFlip" class="btn d-none"><i class="material-icons flip_btn">cameraswitch</i></button>
</div>
<div class="row">
<div class="col-4 col-md-4" ></div>
<div id="successMsg" class="col-4 col-md-4 alert-success text-center d-none">
<h2 class="text-center">Selfie Capture Success</h2>
<button id="closeSuccess" class="btn btn-primary ml-3">OK</button>
</div>
<div class="col-4 col-md-4" ></div>
</div>
<div id="errorMsg" class="col-12 col-md-6 alert-danger d-none">
Fail to start camera, please allow permision to access camera. <br/>
If you are browsing through social media built in browsers, you would need to open the page in Sarafi (iPhone)/ Chrome (Android)
<button id="closeError" class="btn btn-primary ml-3">OK</button>
</div>
<div class="md-modal md-effect-12">
<div id="app-panel" class="app-panel md-content row p-0 m-0">
<div id="webcam-container" class="webcam-container col-12 d-none p-0 m-0">
<video id="webcam" autoplay playsinline width="640" height="480"></video>
<canvas id="canvas" class="d-none"></canvas>
<!--<img src="" id="canvas">-->
<canvas id="canvas2" class="d-none"></canvas>
<div class="flash"></div>
<audio id="snapSound" src="/static/audio/snap.wav" preload = "auto"></audio>
</div>
<div id="cameraControls" class="cameraControls">
<a href="#" id="exit-app" title="Exit App" class="d-none"><i class="material-icons">exit_to_app</i></a>
<a href="#" id="take-photo" title="Take Photo"><i class="material-icons">camera_alt</i></a>
<a href="#" id="download-photo" download="selfie.png" target="_blank" title="Download Photo" class="d-none"><i class="material-icons">file_download</i></a>
<!-- <a href="#" id="save-photo" title="Save Photo" class="d-none"><i class="material-icons">download_done</i></a> -->
<a href="#" id="resume-camera" title="Resume Camera" class="d-none"><i class="material-icons">camera_front</i></a>
</div>
</div>
</div>
<div class="md-overlay"></div>
</main>
<div class="row">
<div class="col-2 text-center"></div>
<div class="col-8 text-center">
<h2 class="text-center" style="color: white;"></h2>
</div>
<div class="col-2 text-right">
<!-- BACK TO BUTTON-->
</div>
</div>
<script type="text/javascript" src='/static/js/app_del.js'></script>
<script type="text/javascript" src="/static/js/jquery-qrcode.js"></script>
<script type="text/javascript" src="/static/js/jquery-barcode.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
<script type="text/javascript">
var baseUrl = document.location.protocol+'//' + document.domain + ':' + location.port;
var user_id = "1";
$(document).ready(function()
{
// after document load
var del_nos_array = $("#del_nos_array").val();
var is_qrcode = $("#is_qrcode").val();
var aa = del_nos_array.replace("[", "");
var bb = aa.replace("]", "");
let arr = bb.split(',');
for (let i = 0; i < arr.length; i++)
{
var int_val = arr[i];
var listvalue = ".qrcode_"+int_val;
var listvalue = listvalue.replace(" ", "");
var del_no = int_val;
if(del_no >0 && del_no < 10)
{
var del_no_str = del_no.toString();
var del_no_str = "00"+del_no_str;
}
else if (del_no >9 && del_no < 100)
{
var del_no_str = del_no.toString();
var del_no_str = "0"+del_no_str;
}
else
{
var del_no_str = del_no.toString();
}
del_no_str = del_no_str.replace(/\s+/g,'');
// here qr code will come // end
// bar code print start
var btype = "code128";
del_no_str = del_no_str.replace(/\s+/g,'');
var barcode_div_id = ".barcodeTarget_"+del_no;
var barcode_div_id = barcode_div_id.replace(" ", "");
// old barHeight was 60
$(""+barcode_div_id+"").html("").show().barcode(del_no_str, btype,{"barWidth":2, "barHeight":40, "showHRI":false});
// barcode print end
}
// end
$( "#download-photo" ).click(function()
{
gallery_data = $("#download-photo").attr('href');
// alert(gallery_data);
save_selfe_image(user_id,gallery_data);
});
$( "#closeSuccess" ).click(function()
{
$("#successMsg").hide();
});
});
// function save_selfe_image(user_id,gallery_data) {
// $.ajax({
// type: "POST",
// data: {'gallery_data':gallery_data},
// url: baseUrl+"/save_selfie/"+user_id,
// dataType: "json",
// success: function(data)
// {
// if(data.status == 1)
// {
// removeCapture();
// $("#webcam-switch").prop("checked", false).change();
// $("#successMsg").show();
// $("#successMsg").removeClass("d-none");
// }
// else
// {
// alert("Error !.")
// }
// }
// });
// }
</script>
</body>
</html>
Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists