
<?php defined('ABSPATH') || die('Cheatin\' uh?');?>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Work+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abril+Fatface&display=swap" rel="stylesheet">

<div class="frontend-wrapper">
    <div class="scale-wrapper">
        <div class="modern-theme-wrapper-m3">
            <div class="wrapper-color-m3  business-edit-clr edit-clr" style="background-color:<?php $STB_user_theme->echoData("pnl_color")?>;">
                <div class="content-pannel-m3">

                    <div class="squirrly-strb-background-img" style="width:100%;">
                        <img class="squirrly-strb-background-image" style="border-radius:20px;height:350px;width:99%;object-fit:cover;filter:opacity(<?php $STB_user_theme->echoData("opacity")?>%) grayscale(<?php $STB_user_theme->echoData("grayscale")?>%) brightness(<?php $STB_user_theme->echoData("brightness")?>%) saturate(<?php $STB_user_theme->echoData("saturation")?>);"  src="<?php if($backgroundImg!="." && $backgroundImg!=null) echo $backgroundImg; else echo "https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back1.png";  ?>"   />
                    </div>
                   
                    <div class="auth-content-m3">
                        <div style="">
                                <div class="autor-name-m3 name-options" style="color:<?php $STB_user_theme->echoData("name-color")?>;font-size:<?php $STB_user_theme->echoData("name-size")?>px;">
                                    <?php echo get_user_meta($user_id,"first_name",true);?>
                                    <?php echo get_user_meta($user_id,"last_name",true); ?>
                                </div>
                                <div class="autor-subtitle-m3 subtitle-options" style="color:<?php $STB_user_theme->echoData("subtitle-color")?>;font-size:<?php $STB_user_theme->echoData("subtitle-size")?>px;">
                                    <?php $STB_user_data->echoData("companyslug")?>
                                    <?php $STB_user_data->echoData("job"); ?>
                                </div>
                        </div>
                    
                    </div>
                </div>
            </div>  
        </div>
    </div>
</div>

<style>
    .modern-theme-wrapper-m3{
        width:500px;
        height:470px;
        box-shadow: 0 4px 30px rgba(0,0,0,0.2);
        border-radius:20px;
    }
    .wrapper-color-m3{
        height:100%;
        border-radius:20px;
        box-shadow: 0 4px 30px rgba(0,0,0,0.2);
        background-color:#76b5c5;
    }
    .qrcode-m3{
        background-color:#76b5c5;
    }
    .content-pannel-m3{
        width:100%;
        padding:15px;
        position:relative;
        display:flex;
        flex-direction:column;
    }
    .auth-content-m3{
        width:100%;
        margin-top:10px;
        display:flex;
        position:relative;
        flex-direction:column;
        align-items:center;
    }
    .autor-name-m3{
        font-size:22px;
        font-weight:500;
        color:white; 
        margin-top:10px;
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .autor-subtitle-m3{
        font-weight:500;
        font-size:15px;
        width:100%;
        line-height:17px;
        color:white; 
        display:flex;
        justify-content:center;
        align-items:center;
    }
    .strb-shad{
        box-shadow:5px 5px 0px blue;
    }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js" integrity="sha512-NFUcDlm4V+a2sjPX7gREIXgCSFja9cHtKPOL1zj6QhnE0vcY695MODehqkaGYTLyL2wxe/wtr4Z49SvqXq12UQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    (function ($){

        var qr_urlm3=$('.qr_urlm3').val();
        if(qr_urlm3!=''){
            $('.qrcode-m3').qrcode({
                text : qr_urlm3,
                height:70,
                width:70,
            });	
        }   
    }(jQuery));
</script>
