<#include "layout/layout.ftl">
<#include "layout/common/article.ftl">
<style type="text/css">
    /*h1{
      font-size: 2.5rem;
      font-family: 'Montserrat';
      font-weight: normal;
      color: #444;
      text-align: center;
      margin: 2rem 0;
    }*/
    .header{
        text-align: center;
        color: #9C9C9C;
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 2em;
    }
    .wrapper{
        width: 90%;
        margin: 0 auto;
        max-width: 100rem;
    }

    .cols{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: left;
    }

    .col{
        width: calc(25% - 2rem);
        margin: 1rem;
        cursor: pointer;
    }

    .c-container{
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }

    .front,
    .back{
        background-size: cover;
        background-position: center;
        -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        text-align: center;
        min-height: 280px;
        height: auto;
        border-radius: 10px;
        color: red;
        font-size: 1.5rem;
    }

    .back{
        background: #cedce7;
        background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
        background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
        background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
    }

    .front:after{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        content: '';
        display: block;
        opacity: .6;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-radius: 10px;
    }
    .c-container:hover .front,
    .c-container:hover .back{
        -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
        transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    }

    .back{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

    .inner{
        -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
        transform: translateY(-50%) translateZ(60px) scale(0.94);
        top: 50%;
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 5rem;
        font-size: 1.7em;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        outline: 1px solid transparent;
        -webkit-perspective: inherit;
        perspective: inherit;
        z-index: 2;
    }

    .c-container .back{
        -webkit-transform: rotateY(180deg);
        transform: rotateY(180deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .c-container .front{
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .c-container:hover .back{
        -webkit-transform: rotateY(0deg);
        transform: rotateY(0deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .c-container:hover .front{
        -webkit-transform: rotateY(-180deg);
        transform: rotateY(-180deg);
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }

    .front .inner p{
        font-size: 4rem;
        margin-bottom: 2rem;
        position: relative;
    }

    .front .inner p:after{
        content: '';
        width: 4rem;
        height: 2px;
        position: absolute;
        background: #C6D4DF;
        display: block;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: -.75rem;
    }

    .front .inner span{
        color: rgba(255,255,255,0.7);
        font-family: 'Montserrat';
        font-weight: 300;
    }

    @media screen and (max-width: 64rem){
        .col{
            width: calc(33.333333% - 2rem);
        }
    }

    @media screen and (max-width: 48rem){
        .col{
            width: calc(50% - 2rem);
        }
    }

    @media screen and (max-width: 32rem){
        .col{
            width: 100%;
            margin: 0 0 2rem 0;
        }
    }
</style>

<@layout type="urlNav" title="${post.title!} - ${blog_title!}" keywords="${options.seo_keywords!},${tagWords!}" description="${post.summary!}" canonical="${post.fullPath!}">
    <#assign count = 0>
    <#assign dcount = 0>

    <header class="header">

        <h1>截至当前： <span id="_date"></span> </h1>
        <h1>Elastic开源社区：<span style="color: orange;">Elastic认证工程师</span> 已通过 <span style="color:red" id="graduate-count">${count}</span> 位 </h1>
        <h1>历时：<span id="_count"></span>天&nbsp;&nbsp;&nbsp;&nbsp;零基础率：>80%</h1>
        <h1>平均备考周期：30-35天&nbsp;&nbsp;&nbsp;&nbsp;最快通过考试：7天</h1>
    </header>
    <script>
        //计算出相差天数
        var today = function () {
            var nowdate = new Date();
            var year = nowdate.getFullYear(),
                month = nowdate.getMonth() + 1,
                date = nowdate.getDate(),
                day = nowdate.getDay(),
                h = nowdate.getHours(),
                m = nowdate.getMinutes(),
                s = nowdate.getSeconds(),
                h = checkTime(h),
                m = checkTime(m),
                s = checkTime(s);
            return year + "-" + month + "-" + date;
        }
        var now = function () {
            var nowdate = new Date();
            var year = nowdate.getFullYear(),
                month = nowdate.getMonth() + 1,
                date = nowdate.getDate(),
                day = nowdate.getDay(),
                h = nowdate.getHours(),
                m = nowdate.getMinutes(),
                s = nowdate.getSeconds(),
                h = checkTime(h),
                m = checkTime(m),
                s = checkTime(s);
            return year + "-" + month + "-" + date + " " + h + ":"+m+":"+s;
        }

        var checkTime = function (i) {
            if (i < 10) {
                i = "0" + i;
            }
            return i;
        }
        var tem= new Date(Date.parse(today())).getTime()-new Date(Date.parse("2021-09-20")).getTime();  //时间差的毫秒数
        document.getElementById("_date").innerHTML = now();
        document.getElementById("_count").innerHTML = Math.floor(tem/(24*3600*1000));
        var div = document.getElementById("_date");
        setInterval (function() {
            div.innerHTML = now();
        }, 1000);  //反复执行函数
    </script>

    <div class="wrapper">
        <div class="cols">
            <!-- 获取特定条件下 链接数量 -->
            <@linkTag method="listTeams">
                <#list teams as item>
                    <#if item.team?? && item.team?contains('Elastic毕业墙') >
                        <#list item.links?sort_by('createTime')?reverse  as link>
                            <#assign count = count + 1>
                            <#assign dcount = dcount + 1>
                        </#list>
                    </#if>
                </#list>
            </@linkTag>
            <script>
                document.querySelector("#graduate-count").innerHTML = "${count}";
            </script>
            <@linkTag method="listTeams">
                <#list teams as item>
                    <#if item.team?? && item.team?contains('Elastic毕业墙') >
                        <#list item.links?sort_by('createTime')?reverse  as link>
                            <div class="col" ontouchstart="this.classList.toggle('hover');">
                                <div class="c-container">
                                    <div class="front" style="background-image: url(${link.logo})">
                                        <div class="inner">
                                            <p>no.${dcount}</p>
                                        </div>
                                    </div>
                                    <div class="back">
                                        <a href="${link.url}" target="_blank" rel="nofollow noopener external">
                                            <div>
                                                <div class="inner">
                                                    点击查看官网证书
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <#assign dcount = dcount - 1>
                        </#list>
                    </#if>
                </#list>
            </@linkTag>
        </div>
    </div>
</@layout>