EDU/Website/NEducation/Views/HomeFitness/MenuContent.cshtml


@{
    ViewBag.Title = "MenuFormula";
    Layout = "~/Views/Shared/_LayoutHome.cshtml";
}

@using NEducation.NEduService;
@using NEducation.Content.Texts;
@using NEducation.Code;
@using NEducation.Controllers;
@using System.Globalization;
@using System.Linq;
@using System.Threading;


@model NEducation.Models.HfModel

<link href="~/Content/assets/css/animate.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/css/kontext.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/css/learning-flashcard.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/css/learning-diary.css" rel="stylesheet" type="text/css" />

<link href="~/Content/assets/css/learning-complete.css" rel="stylesheet" type="text/css" />
<link type="text/css" rel="stylesheet" href="~/Content/assets/css/animate.css" />
<link href="~/Content/assets/css/kontext.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/css/testing.css" rel="stylesheet" type="text/css" />
<link href="~/Content/assets/homefitness/css/hf-main.css" rel="stylesheet" type="text/css" />

@*<link href="~/Content/assets/homefitness/css/hf-counter.css" rel="stylesheet" type="text/css" />*@


@{
    List<HfData> hfDatas = Session["categories"] as List<HfData>;
    HfData menu = hfDatas.Find(x => x.PathParent == "/menu");
    HfData gym = hfDatas.Find(x => x.PathParent == "/gym");
    HfData nutrition = hfDatas.Find(x => x.PathParent == "/nutrition");
}

@{
    CultureInfo currentCulture = Thread.CurrentThread.CurrentCulture;
    String nameCulture = currentCulture.Name;
}

@section navMenu{
    <a href="/Home/" class="nav-link">@Lang.Home</a>
    <a href="/HomeFitness/Menu?id=@(menu != null ? menu.Id : "")" class="navigation-all nav-link">@Lang.menu</a>
    <a href="/HomeFitness/Menu?id=@(nutrition != null ? nutrition.Id : "")" class="navigation-all nav-link">@Lang.nutrition</a>
    <a href="/HomeFitness/Menu?id=@(gym != null ? gym.Id : "")" class="navigation-all nav-link">@Lang.gym</a>
}

@section menu{
    <a href="/Home/" class="header-menu-link ">@Lang.Home</a>
    <a href="/HomeFitness/Menu?id=@(menu != null ? menu.Id : "")" class="navigation-all header-menu-link">@Lang.menu</a>
    <a href="/HomeFitness/Menu?id=@(nutrition != null ? nutrition.Id : "")" class="navigation-all header-menu-link ">@Lang.nutrition</a>
    <a href="/HomeFitness/Menu?id=@(gym != null ? gym.Id : "")" class="navigation-all header-menu-link ">@Lang.gym</a>
}

<audio id="learning-main-audio">
    <source class="src" src="" type="audio/mpeg">
</audio>

<div class="learning-theory-body">
    <!-- Flashcard -->
    <div class="learning-theory-flashcard">
        <div id="learning-theory-kontext"
             class="kontext
             @(Model.content.ContentType == UtilsController.GetContentType.TEXT_TYPE ? "height-number" : "")
             " style="height: 100%;">
            @{
                if (Model.content.ContentType == UtilsController.GetContentType.PICTURE_FILE)
                {
                    <div class="testing-container hf-testing-container">
                        <div class="testing-container-cover">
                            <div class="testing-body hf-testing-body">
                                <div class="testing-body-cover hf-testing-body-cover">
                                    <div class="testing-countdown hf-testing-countdown" id="testing-countdown">
                                        <span class="testing-countdown-number">120</span>
                                        <svg>
                                            <circle class="circle-shadow" r="16" cx="17" cy="17"></circle>
                                            <circle class="circle" r="16" cx="17" cy="17" stroke="url(#gradientPercent)" style="stroke-dashoffset: -101px;"></circle>
                                            <linearGradient id="gradientPercent" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="0" y2="34">
                                                <stop offset="0" style="stop-color:#F88600"></stop>
                                                <stop offset="0.5" style="stop-color:#FFB500"></stop>
                                                <stop offset="1" style="stop-color:#FAD300"></stop>
                                            </linearGradient>
                                        </svg>
                                    </div><!--pronounce - sound => word -->
                                </div>
                            </div>

                            <style>
                                @@media (max-width: 768px) {
                                    .testing-exercise-answer .answer-cover {
                                        width: 100%;
                                    }
                                }
                            </style>
                        </div>
                    </div>
                }
            }

            <div class=" show exercise-current" style=" height: 100%;">
                <div class="flash-card-viewport" style=" height: 100%;">
                    <div class="flash-card-box" style=" height: 100%;">
                        <figure class="slide jbs-current
                                @(Model.content.ContentType == UtilsController.GetContentType.PICTURE_FILE ? "flash-center" : "")
                                " style="height: 100%;">
                            <div class="learning-theory-flash-card-content">
                                @{
                                    if (Model.content.ContentType == UtilsController.GetContentType.TEXT_TYPE)
                                    {
                                        <div class="card-img">
                                            <img src="~/Content/assets/homefitness/imgs/Home Fitness_image/@Model.content.Logo" alt="@Model.content.NameGlobal" />
                                        </div>
                                    }
                                }

                                <div class="card-content
                                     @(Model.content.ContentType == UtilsController.GetContentType.PICTURE_FILE ? "flash-center-100-width" : "")
                                     ">

                                    <p class="card-content-text-large" style=" margin: 20px 0;">
                                        @{
                                            if (nameCulture == "vi")
                                            {
                                                @Model.content.NameGlobal
                                            }
                                            else
                                            {
                                                @Model.content.NameLocal
                                            }
                                        }
                                    </p>
                                    @{
                                        if (Model.content.ContentType == UtilsController.GetContentType.TEXT_TYPE)
                                        {
                                            if (nameCulture == "vi")
                                            {
                                                @Html.Raw(@Model.content.ContentGlobal)
                                            }
                                            else
                                            {
                                                @Html.Raw(@Model.content.ContentLocal)
                                            }
                                        }
                                        else
                                        {
                                            <img src="~/Content/assets/homefitness/imgs/Home Fitness_image/@Model.content.ContentGlobal" alt="@if (nameCulture == "vi")
                                            {
                                                @Model.content.NameGlobal
                                            }
                                            else
                                            {
                                                @Model.content.NameLocal
                                            }" />
                                        }
                                    }
                                </div>
                                @{
                                    if (Model.content.ContentType == UtilsController.GetContentType.PICTURE_FILE)
                                    {
                                        <div class="product-detail-infor">
                                            <div class="product-detail-body" style=" text-align: initial;">
                                                <div class="product-tab-group">
                                                    <a data-toggle="tab" class="product-tab-lesson product-tab-active" href="#tab-lesson">
                                                        @if (nameCulture == "vi")
                                                        {
                                                            @Html.Raw(@Model.content.NameGlobal)
                                                        }
                                                        else
                                                        {
                                                            @Html.Raw(@Model.content.NameLocal)
                                                        }
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    }
                                }
                            </div>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="~/Content/assets/js/voca/box-slider.jquery.js"></script>
<script type="text/javascript" src="~/Content/assets/js/voca/box-slider-fx-scroll-3d.js"></script>
<script type="text/javascript" src="~/Content/assets/js/voca/kontext.js"></script>
<script type="text/javascript" src="~/Content/assets/js/voca/learning-main.js"></script>
<script type="text/javascript" src="~/Content/assets/js/voca/testing.js"></script>

<script>
    var t;
    var totalTime = 20;
    var second = totalTime;

    var readyRunCountdown = 1;
    var readyAnswer = 1;

    runCountdown2();
    function runCountdown2() {

        console.log("update process " + readyRunCountdown);
        if (readyRunCountdown == 1 && readyAnswer == 1) {
            readyRunCountdown = 0;
            second = totalTime;

            var runCircle = 0;

            t = window.setInterval(function () {
                if (window.blurred) {

                } else {

                    second = --second <= 0 ? 0 : second;

                    if (runCircle == 0) {
                        runCircle = 1;
                        $(".testing-countdown svg circle.circle").animate({
                            "stroke-dashoffset": "-101px",
                        }, (second) * 1000, "linear", function () {

                        });
                    }

                    $(".testing-countdown-number").text(second);
                    if (second == 0) {
                        window.clearInterval(t);
                        endTime();
                        return false;
                    }

                    if (second <= 5) {
                        // $(".testing-theory-time-countdown").addClass("end-time");
                        playWarningTimeSound();
                    } else {
                        playNormalTimeSound();
                    }
                }

            }, 1000);
        }
    }
    updateProcess();
</script>