lottery/website/Views/Shared/Components/AdvertiseArea/AdvertiseArea.cshtml

@*
    For more information on enabling MVC for empty projects, visit http://go.microsoft.com/fwlink/?LinkID=397860
*@
@using LotteryWebApp.Languages;
@using LotteryWebApp.Components;

@model AdvertiseAreaModel

<link rel="stylesheet" type="text/css" href="@ViewBag.MyConfig.MyValue/css/flip-style.css">


<style>
    .flip-card {
        display: inline-block;
        background-color: transparent;
        width: 300px;
        height: 300px;
        perspective: 1000px;
    }

    .flip-card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        text-align: center;
        transition: transform 0.6s;
        transform-style: preserve-3d;
        /*box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);*/
    }

    .flip-card-front,
    .flip-card-back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
    }

    .flip-card-front {
        /*background-color: #bbb;*/
        color: black;
        z-index: 2;
    }

    .flip-card-back {
        /*background-color: #2980b9;*/
        color: white;
        transform: rotateX(180deg);
        z-index: 1;
    }

    .flip-card .flip-card-inner {
        animation: rotate 3s .3s infinite;
    }

    .flip-card:nth-child(2) .flip-card-inner {
        animation-delay: .6s;
    }

    /*    .flip-card:nth-child(3) .flip-card-inner {
                        animation-delay: .9s;
                    }

                    .flip-card:nth-child(4) .flip-card-inner {
                        animation-delay: 1.2s;
                    }*/

    @@keyframes rotate {
        0%, 60% {
            transform: rotateX(0);
        }

        10%, 50% {
            transform: rotateX(180deg);
        }
    }
</style>

<div class="home-ad1-container">
    <div class="flip-box icon-one">
        <div class="home-ad1-info" style="    width: 75%;">
            <h5>
                @Lang.have_chance_to_get
            </h5>
            <h4>
                > 1.000.000 @Lang.curency
            </h4>

        </div>
    </div>
    <div class="flip-box icon-two" style="    width: 80%;">
        <div class="home-ad1-info">
            <div class="row" style="margin: 0 1px;">
                <div class="time-container" style="width: 60px; font-size: 15px; margin-top: 3px">
                    @Lang.next_draw
                </div>

                <div class="time-container">
                    <div class="time-box">
                        <h6>@Lang.days</h6>
                        <h3 id="days-display">1</h3>
                    </div>
                </div>
                <div class="time-container">
                    <div class="time-box">
                        <h6>@Lang.hours</h6>
                        <h3 id="hours-display">1</h3>
                    </div>
                </div>
                <div class="time-container">
                    <div class="time-box">
                        <h6>@Lang.mins</h6>
                        <h3 id="minutes-display">1</h3>
                    </div>
                </div>
                <div class="time-container">
                    <div class="time-box">
                        <h6>@Lang.seconds</h6>
                        <h3 id="seconds-display">1</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="home-ad1-button">
        <button type="button" class="btn btn-outline-primary adv-button btn-block login-button-action buy-ticket-button"
                onclick="navigatorClick('BuyTicket')" style="font-size: 12px;">
            <i class="ft-unlock"></i> @Lang.buy_ticket.ToUpper()
        </button>
    </div>
</div>



@* <form class="form-horizontal" action="@ViewBag.MyConfig.MyValue/Home/BuyTicket" method="post">
    @Html.AntiForgeryToken()
</form> *@

<script>
    var a = document.querySelectorAll('.flip-box');
    a = Array.prototype.slice.call(a);

    var timings = {
    //easing: 'ease-in-out',
    iterations: Infinity,
    direction: 'alternate',
    fill: 'both'
    }

    a.forEach(function(el, i, ra) {
    timings.delay = i * 5000;


    timings.duration = 5000;
    el.animate([
    {transform: 'rotateX(180deg)', opacity: 0,},
    {transform:'rotateX(-0deg)', opacity: 1,}
    ], timings);

    //timings.duration = 5000;
    //el.animate([
    //  {opacity: 1},
    //  {opacity: 0}
    //], timings);

    timings.duration = 2000;

    });
</script>


<script type="text/javascript">

    if (@Model.timeLeft <= 0) {
        //var seconds = @Model.timeLeft,
        //    $seconds = document.querySelector('#countdown');
        //(function countdown() {
        //    $seconds.textContent = seconds + ' s';
        //    if (seconds-- > 0) setTimeout(countdown, 1000);
        //    else {
        //    }
        //})();
    } else {
        var countDownDate = new Date('@Model.timeExpired').getTime();
        var now = new Date('@Model.timeNow').getTime();

        var now2 = new Date('Jan 5, 2021 15:37:25').getTime();
        console.log("countDownDate: ", countDownDate);
        console.log("now: ", now);
        console.log("now2: ", now2);

        // Update the count down every 1 second
        var x = setInterval(function () {

            // Get today's date and time
            //var now1 = new Date().getTime();
            //console.log("now1: ", now1);

            //console.log("now2: ", now);
            // Find the distance between now and the count down date
            var distance = countDownDate - now;

            // Time calculations for days, hours, minutes and seconds
            var days = Math.floor(distance / (1000 * 60 * 60 * 24));
            var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // Display the result in the element with id="demo"
            document.getElementById("days-display").innerHTML = days
            document.getElementById("hours-display").innerHTML = hours
            document.getElementById("minutes-display").innerHTML = minutes
            document.getElementById("seconds-display").innerHTML = seconds

            // If the count down is finished, write some text
            if (distance < 0) {
                clearInterval(x);
                //document.getElementById("demo").innerHTML = "EXPIRED";
            }
            now += 1000;

        }, 1000);
        //setTimeout("countdown()", 1000);
    }
</script>