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>
    .cover {
    width: 400px;
    height: 400px;
    animation: flip-animate 20s linear infinite; /*   Làm xoay các ảnh */
    transform-style: preserve-3d; /*   các thành phần bên trong class cover sẽ hiển thị dưới dạng 3D */
    }

    #container .cover div {
    width: 400px;
    height: 400px;
    position: absolute;
    }

    #container .cover div img {
    width: 400px;
    height: 400px;
    }

    #container .cover .front {
    transform: translateZ(200px); /*   định vị lại ảnh trong class front dọc theo trục z trong không gian 3D */
    }

    #container .cover .back {
    transform: rotateY(180deg) translateZ(200px);
    /*   xoay ảnh theo trục y là 180 độ và dịch chuyển đến trục Z */
    }

    #container .cover .left {
    transform: rotateY(-90deg) translateX(-200px);
    /*   xoay ảnh theo trục y là -90 độ và dịch chuyển đến trục X */
    transform-origin: left; /*   Cho phép dịch chuyển phần tử sang trái */
    }

    #container .cover .right {
    transform: rotateY(90deg) translateX(200px); /*   xoay ảnh theo trục Y là 90 độ và dịch chuyển đến trục X */
    transform-origin: right; /*   Cho phép dịch chuyển phần tử sang phải */
    }

    #container .cover .top {
    transform: rotateX(-90deg) translateY(-200px); /*   xoay ảnh theo trục X là -90 độ và dịch chuyển đến trục Y */
    transform-origin: top; /*   Cho phép dịch chuyển phần tử lên trên */
    }

    #container .cover .bottom {
    transform: rotateX(90deg) translateY(200px); /*   xoay ảnh theo trục X là 90 độ và dịch chuyển đến trục Y */
    transform-origin: bottom; /*   Cho phép dịch chuyển phần tử xuống dưới */
    }

    @@keyframes flip-animate {
    0% {
    transform: rotateY(0);
    }

    100% {
    transform: rotateY(360deg);
    }
    }
    /* điều khiển các hiệu ứng của thuộc tính animation */
    </style>*@

<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" style="background: linear-gradient(182.09deg, #921010 45.77%, rgba(188, 70, 70, 0.704875) 127.71%, rgba(213, 19, 19, 0.541667) 166.12%, rgba(255, 0, 0, 0) 185.46%);">
    <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 HTG
            </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 id="container">
        <div class="cover">
        <div class="front">
        <img src="https://zicxa.com/hinh-anh/wp-content/uploads/2019/09/T%E1%BB%95ng-h%E1%BB%A3p-h%C3%ACnh-%E1%BA%A3nh-nh%E1%BB%AFng-ng%C6%B0%E1%BB%9Di-c%C3%B3-r%C4%83ng-kh%E1%BB%83nh-d%E1%BB%85-th%C6%B0%C6%A1ng-nh%E1%BA%A5t-19.jpg">
        </div>
        <div class="back">
        <img src="https://thuthuatnhanh.com/wp-content/uploads/2019/12/anh-girl-rang-khenh.jpg">
        </div>
        <div class="top">
        <img src="https://giupban.com.vn/wp-content/uploads/2019/09/anh-hot-girl-lanh-lung-12.jpg">
        </div>
        <div class="bottom">
        <img src="https://nhakhoachoban.vn/wp-content/uploads/2019/09/bi-mat-cua-chiec-rang-khenh-3-1.jpg">
        </div>
        <div class="left">
        <img src="https://image.thanhnien.vn/660/uploaded/phunggiao/2018_12_03/misthy-2_layc.jpg">
        </div>
        <div class="right">
        <img src="https://znews-photo.zadn.vn/w660/Uploaded/mdf_uswreo/2019_01_30/13.jpg">
        </div>
        </div>
        </div>*@

    @*    <div class="cards" style="display:inline-block; width:70%;">
        <div class="flip-card">
        <div class="flip-card-inner">
        <div class="flip-card-front">
        <div class="" style="    width: 80%;">
        <div class="home-ad1-info">
        <div class="row" style="margin: 0 1px;">
        <div class="col-3 time-container">
        <div class="time-box">
        <h6>Days</h6>
        <h4 id="days-display">1</h4>
        </div>
        </div>
        <div class="col-3 time-container">
        <div class="time-box">
        <h6>Hours</h6>
        <h4 id="hours-display">1</h4>
        </div>
        </div>
        <div class="col-3 time-container">
        <div class="time-box">
        <h6>Mins</h6>
        <h4 id="minutes-display">1</h4>
        </div>
        </div>
        <div class="col-3 time-container">
        <div class="time-box">
        <h6>Secs</h6>
        <h4 id="seconds-display">1</h4>
        </div>
        </div>
        </div>
        </div>
        </div>
        </div>
        <div class="flip-card-back">
        <div class="">
        <div class="home-ad1-info" style="    width: 80%;">
        <h5>
        @Lang.have_chance_to_get
        </h5>
        <h4>
        > 1.000.000 HTG
        </h4>
        </div>
        </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>