@using WeApp.Helpers
@model bool
<style>
    body {
        background-image: url('/Content/Image/ExerciseV2/bg.jpg');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        width: 100vw;
        height: 100vh;
    }

    .box #bg_title {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        width: 100%;
        font-weight: 600;
        font-size: 38px;
        color: #fff;
    }
</style>
<img id="bg_header" src="/Content/Image/ExerciseV2/bg_header_ruler.png" style="position: absolute; top: 0; width: 100%; height: auto; opacity: 0; visibility: hidden;" />
@using (Html.BeginScripts())
{
    <script>
    @if (Model)
    {
        <text>
            $(function () {
                resizeHeight();
                window.addEventListener('resize', resizeHeight);
            });
        </text>
    }
    function resizeHeight(fun) {
        var w_h = $(window).height();
        var h = 126,
            txt = w_h > 850 ? 66 : 76,
            fs = w_h > 850 ? 38:45;
        var bh = Math.floor($('#bg_header').height());
        var newFs = Math.floor(fs * bh / h),
            newTxt = Math.floor(txt * bh / h),
            mb = bh - newTxt
        $(".box #bg_title").height(newTxt).css({ "fontSize": newFs + "px", "marginBottom": mb + "px" });
        fun && fun(bh,w_h,h)
    }
    </script>
}