Sindbad~EG File Manager

Current Path : /home/numerotech/hs.numerotech.com/scan_v1/core/templates/digital_batch/
Upload File :
Current File : //home/numerotech/hs.numerotech.com/scan_v1/core/templates/digital_batch/digital_badge.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Badge Print</title>

     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" crossorigin="anonymous">
     <link rel="shortcut icon" type="image/x-icon" href="{{('/static/images/favicon.ico')}} ">
     <link rel="stylesheet" type="text/css" href="/static/css/style.css" >
  
    {% set img_url = "/static/images/BOA2023-Badge-v1.png" %}        
    <style>
    body{
        
        /*width: 300px !important;*/
        /*height: 500px !important;*/
        
    }
    body, html {
        font-family:'PT Sans Narrow', sans-serif;
   
    }


       
        .cardbox {
                position:relative;
                padding: 0mm 8mm;
                background-image: url('{{img_url}}');
                background-size: contain;
                max-width: 1122px;
                height: 1559px;
                margin:0px auto;
        }
        .cardboxinner 
        {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
        }

        .name {
            font-size: 2.0rem;
            margin:0px;
        }

        .role
        {
            font-size: 1.3rem;
            font-weight:bold;
            color:black;
            
        }
        .display_no
        {
            font-size: 1.2rem;
            color:black;
        }
        .city
        {
            font-size: 1.2rem;
            color:black;
        }
        .mem_no
        {
            font-size: 1.2rem;
            color:black;
        }
    
    </style>
</head>
{% set img_url = "/static/images/BOA2023-Badge-v1.png" %}
   <body >

      
      <div class="row">
          

         <div class="col-lg-12 col-md-12 text-center"> 




{% for delegate in delegates %}

        
        <div class="row">
            <div class="col-12">
                <!--<h2>Badge</h2>-->
                <div class ="cardbox" style="">
                    <div class="cardboxinner">
                        <div id="name">
                            {{ delegate.full_name.upper() }}
                        </div>
                        
                        <div id="role">
                            {{delegate.role or '' }}
                        </div>
                         <div class="del-qrcode" data-qrcode="{{ delegate.delegate_no or 0 }}" style="display: block;"></div><br>
                        <h3 style="margin-top: 100px;"><b> {{ delegate.delegate_no or  '' }}</b> </h3>
                    </div>
                    
                </div>
            </div>
        </div>

{% endfor %}


          
         </div>
      </div>
    </div>     
</body>

 <script  type= "text/javascript"  src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
 <script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"  crossorigin="anonymous"></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 type="text/javascript">
$(document).ready(function(){
    
    $('.del-qrcode').each(function(index, value) {
            var width = "70" ;
            var height = "70";

            var int_val = $(this).attr('data-qrcode');
           
           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,'');


            $(this).qrcode({'width': width,'height': height,'text':del_no_str});
        });

        
    
           
           var int_val = 1000;
           
           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,'');
            
           
            var width = "50" ;
            var height = "105";
            $(".footer-qrcode").empty();
            $(".footer-qrcode").css({'width' : width, 'height' : height})
            

            $(".footer-qrcode").qrcode({'width': width,'height': height,'text':del_no_str});
            


});   
</script>
</html>

Sindbad File Manager Version 1.0, Coded By Sindbad EG ~ The Terrorists