<?php defined('ABSPATH') || die('Cheatin\' uh?');?>
<link href="https://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<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" />
    
        <div class="main-pannel" style="background-color:rgba(0,0,0,9);background-image:radial-gradient(at 59% 90%, hsla(180, 90%, 10%, 1) 0px, transparent 50%), radial-gradient(at 0% 42%, hsla(180, 90%, 11%, 1) 0px, transparent 50%), radial-gradient(at 90% 4%, hsla(180, 90%, 17%, 1) 0px, transparent 50%); display:flex;overflow:hidden;flex-wrap:wrap;gap:1.1vw;height:100%;padding-top:2vw;padding-bottom:2vw;padding-left:0.2vw;">
            <div style="display:flex;overflow:hidden;flex-wrap:wrap;gap:1.7vw;width:88vw;padding-left:2vw;">
            <div style="padding-left:1vw;">
                <div style="postition:absolute;font-weight:700;font-size:3vw;color:white;">Starbox</div>
                <div style="color:#fbcc34;font-weight:700;font-size:0.9vw;">DARE STAND OUT.</div>
            </div>

            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back2.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back4.png".' alt="">';?>
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back9.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width: 12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back1.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width: 12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back2.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width: 12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back9.png".' alt="">';?> 

            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Holiday/back2.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fitness/back7.png".' alt="">';?>
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Fashion/back4.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width: 12vw;;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Interior+Design/back9.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width: 12vw;;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Food/back5.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width: 12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Parenting/back8.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back4.png".' alt="">';?> 

            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Photo/back6.png".' alt="">';?>
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width:12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Geek/back1.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width: 12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Tech/back1.png".' alt="">';?> 
            <?php   echo '<img class="back-img"  style="border-radius:0.2vw;width: 12vw;height:12vw;" src='."https://starbox-pro.s3.eu-west-1.amazonaws.com/images/Backgrounds/Pets/back7.png".' alt="">';?> 
        </div>

        <div style="z-index:10;height:20vw;width:30vw;position:absolute;top:12vw;left:27.3vw;background-color:rgba(0,0,0,0.8);border-radius:5px;">
            <div class="activation-form" style="padding-left:25px;margin-top:2vw;">
                <div style="color:white;font-size:1vw;">Welcome to Starbox</div>
                <div style="color:gray;font-size:0.7vw;width:20vw;font-weight:700;">Set it Up in Minutes: Bring your author bio to life and draw readers into your world with just a few clicks.</div>
                <div class=spann style="display:flex; justify-content:space-between; align-items:center;max-width:50em;">
                    <div style="display:flex;font-weight:600;margin-top:2vw;">
                        <div style="color:white;font-size:0.8vw;">Get you activation code on: </div><a  style="margin-left:5px;color:rgba(255,255,255,0.7);font-size:0.8vw;" href='https://customer.digitalpackglobal.com' target="_blank">https://customer.digitalpackglobal.com</a>
                    </div>
                </div>

                <div class="input-fields" style="margin-top:1px;">
                    <input type="text" class="input-tk" name="accesToken" value=""  style="margin-top:1vw;font-size:0.8vw;height:2.2vw;width:20vw;border:none;background-color:rgba(222,220,222,0.7);"/>
                </div>

                <div class="token-alert" style="display:none;color:red;font-size:0.6vw;margin-top:-5px;font-weight:500;">Please enter a valid token.</div>
                <br>

                <div class="">
                    <button style="background-color:#fbcc34;font-size:0.9vw;font-weight:700;width:9vw;height:2.2vw;border:none;margin-top:2vw;"  class="strb-check-token"><?php echo esc_html__("Activate", 'squirrly-seo'); ?></button>
                </div>
            </div>
        </div>
    </div>
    <div style="margin-left:2vw;width:15vw;font-weight:500;display:flex;flex-direction:column;gap:0.5vw;padding-bottom:2vw;">
        <a href="https://www.squirrly.co/terms-of-use/" target="_blank" style="color:white;font-size:0.8vw;">Terms of Use</a>
        <a href="https://www.squirrly.co/privacy-policy/" target="_blank" style="color:white;font-size:0.8vw;">Privacy Policy under GDPR law</a>
        <div style="color:white;font-size:0.8vw;">support@squirrly.co</div>

        <a href="https://www.instagram.com/starbox_plugin/" target="_blank"><i style="color:white;" class="fa-brands fa-instagram squirrly-strb-item"></i></a>
    </div>
</div>
<style>
    body{
        height:100%;
        background-color:rgba(0,0,0,9);background-image:radial-gradient(at 59% 90%, hsla(180, 90%, 10%, 1) 0px, transparent 50%), radial-gradient(at 0% 42%, hsla(180, 90%, 11%, 1) 0px, transparent 50%), radial-gradient(at 90% 4%, hsla(180, 90%, 17%, 1) 0px, transparent 50%);
    }
html{
        height:100%;
    }
    .back-img:hover{
        opacity:80%;
    }
</style>


    
 

