index.html

<!DOCTYPE html>
<html lang="en" class="gr__materializecss_com">

<head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-JE0V807433"></script>
    <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
     gtag('js', new Date());

     gtag('config', 'G-JE0V807433');
    </script>
    <!-- Google Tag Manager -->
    <script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({
                'gtm.start': new Date().getTime(),
                event: 'gtm.js'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.src =
                'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-WQBQJWP');
    </script>
    <!-- End Google Tag Manager -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DJL - Deep Java Library</title>
    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="shortcut icon" type="image/x-icon" href="website/img/favicon.png" />
    <link rel="shortcut icon" sizes="96x96" href="website/img/favicon.png">
    <link rel="apple-touch-icon" href="website/img/favicon.png">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css">
    <link href="website/css/style.css" type="text/css" rel="stylesheet" media="screen,projection">

</head>

<body data-gr-c-s-loaded="true">
    <div id="app">
        <div class="app-swiper-container swiper-container">
            <!-- Google Tag Manager (noscript) -->
            <noscript>
                <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WQBQJWP" height="0" width="0"
                    style="display:none;visibility:hidden"></iframe>
            </noscript>
            <!-- End Google Tag Manager (noscript) -->
            <nav class="white app-nav swiper-no-swiping" role="navigation" v-cloak>
                <div class="nav-wrapper">
                    <div class="row">
                        <a href="https://djl.ai" class="logo" id="logo-container">
                            <img src="website/img/djl-middle.png">
                        </a>
                        <div class="right col s10 hide-on-med-and-down navLinksWrap">
                            <ul class="nav-ul">
                                <li v-for="(item, i) in navLinks" :key="i">
                                    <a :href="item.url">{{item.name}}</a>
                                </li>
                            </ul>
                        </div>
                        <ul id="nav-mobile" class="sidenav">
                            <li v-for="(item, i) in navLinks" :key="i">
                                <a :href="item.url">{{item.name}}</a>
                            </li>
                        </ul>
                        <a data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>
                    </div>
                </div>
            </nav>
            <main class="swiper-wrapper">
                <section id="index-banner" class="parallax-container swiper-slide page1">
                    <div class="sky-bg background">
                    </div>
                    <div id="particles-js" class="section">
                        <div class="container graph-container" v-cloak>
                            <br><br>
                            <h1 class="header center light-blue-text text-accent-2">{{page1.title}}
                            </h1>
                            <div class="row center">
                                <h5 class="header col s12 light an-1">{{page1.abstract}}</h5>
                            </div>
                            <div class="row center">
                                <a :href="page1.getStartUtl"
                                    class="btn-large waves-effect waves-light light-blue accent-2 an-2">Get Started</a>
                                <a :href="page1.gitHubUrl"
                                    class="btn-large waves-effect waves-light light-blue accent-2 an-2">GitHub</a>
                            </div>
                            <!-- Begin Mailchimp Signup Form -->
                            <!-- <link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css"> -->
                            <div id="mc_embed_signup">
                                <form
                                    action="https://djl.us7.list-manage.com/subscribe/post?u=f7896b2c176e28fed0ac92717&amp;id=03099ec163"
                                    method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form"
                                    class="validate swiper-no-swiping" target="_blank" novalidate>
                                    <div id="mc_embed_signup_scroll">
                                        <h5 class="an-1">Join the DJL newsletter</h5>
                                        <input type="email" value="" name="EMAIL" class="email email-input"
                                            id="mce-EMAIL" placeholder="email address" required>
                                        <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
                                        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input
                                                type="text" name="b_f7896b2c176e28fed0ac92717_03099ec163" tabindex="-1"
                                                value=""></div>
                                        <div class="clear">
                                            <input type="submit" value="Subscribe" name="subscribe"
                                                id="mc-embedded-subscribe"
                                                class="button btn-small waves-effect waves-light light-blue accent-2 subscribe-btn an-2">
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <br><br>
                            <!--End mc_embed_signup-->
                        </div>
                    </div>
                </section>

                <section class="swiper-slide featureWrap page2">
                    <div class="feature-bg background">
                    </div>
                    <div class="section ">
                        <!--   Icon Section   -->
                        <div class="container">
                            <div :class="'row feature-item'+i" v-for="(item, i) in page2.feature" :key="i">
                                <!-- <div class="icon-block"> -->
                                <div class="col s12 m2 icon-block">
                                    <h3 class="center an-1 feature-title"><i class="material-icons">{{ item.icon }}</i>
                                    </h3>
                                </div>
                                <div class="col s12 m8">
                                    <h5 class="center an-1">{{ item.title }}</h5>
                                </div>
                                <div class="col s12 m8">
                                    <div class="light an-2">{{ item.des }}</div>
                                </div>
                                <!-- </div> -->
                            </div>
                        </div>
                        <!-- </div> -->
                </section>
                <section class="swiper-slide page3">
                    <div class="twitter-bg background">
                    </div>
                    <div class="section timelineWrap">
                        <div class="container">
                            <div class="an-1">
                                <a class="twitter-timeline " data-height="80vh" data-dnt="true"
                                    href="https://twitter.com/deepjavalibrary?ref_src=twsrc%5Etfw">Tweets by
                                    deepjavalibrary</a>
                                <img v-if="!hasRenderTwitter" width="80%" src="./website/img/deepjavalibrary.png"
                                    alt="">
                                <!-- <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> -->
                            </div>
                        </div>
                    </div>
                </section>

                <section class="swiper-slide customerWrap page4">
                    <div class="customer-bg background"></div>
                    <div class="section">
                        <div class="container ">
                            <h4 class="center an-1 ">{{ page4.title }}</h4>
                            <div class="swiper-container an-2 customer-swiper">
                                <div class="parallax-bg swiper-lazy" data-swiper-parallax="-30%"
                                    data-src="./website/img/bg/img-customer-bg.jpg">
                                </div>
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for='(item, i) in page4.customers' :key="i">
                                        <!-- <img src="website/img/stars-in-the-night-sky.jpg"> -->
                                        <div class="caption" data-swiper-parallax="-10%">
                                            <div class="customerContent">
                                                <h5>{{ item.words }}</h5>
                                                <br>
                                                <h6 class="light grey-text text-lighten-3">
                                                    {{ item.by }}</h6>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="customer-swiper-pagination swiper-pagination"></div>
                                <div class="swiper-button-prev swiper-button-white"></div>
                                <div class="swiper-button-next swiper-button-white"></div>
                            </div>
                        </div>
                    </div>
                </section>

                <section class="app-footer swiper-slide page5">
                    <div class="footer-bg background"></div>
                    <div class="section">
                        <div class="container">
                            <div class="row">
                                <div class="col l12 s12">
                                    <h3 class="white-text an-1">{{ page5.title }}</h3>
                                    <h5 class="grey-text text-lighten-4 an-1 ">
                                        {{ page5.abstract }}
                                    </h5>
                                    <div class="swiper-container an-1 leader-swiper">
                                        <div class="swiper-wrapper">
                                            <div class="swiper-slide" v-for='(item, i) in page5.leadrs' :key="i">
                                                <img class="leaders-img swiper-lazy" :data-src="item.url"
                                                    :alt="item.name" :title="item.name">
                                                <div>{{ item.name }}</div>
                                                <div class="swiper-lazy-preloader"></div>
                                            </div>
                                        </div>
                                        <div class="leader-swiper-pagination swiper-pagination"></div>
                                    </div>
                                    <br>
                                    <a :href="page5.contactUrl"
                                        class="btn-small waves-effect waves-light light-blue accent-2  an-2">
                                        DJL Developers</a>
                                </div>
                            </div>
                        </div>
                        <div class="footer-copyright">
                            <div class="container swiper-no-swiping">
                                <div>
                                   Copyright <span class="an-1">2019-{{ new Date().getFullYear() }}</span>
                                   <a class="blue-text text-lighten-3 text-underLine"
                                        href="http://aws.amazon.com/" target="_blank"><i class="material-icons tiny"
                                            style="vertical-align: middle;">link</i>Amazon.com,
                                        Inc.</a> or its affiliates. All Rights Reserved.
                                </div>
                                <div>Website builder & Maintainer: <a class="blue-text text-lighten-3 text-underLine"
                                        href="https://github.com/fuyz" target="_blank">
                                        <i class="material-icons tiny" style="vertical-align: middle;">link</i>fuyingzhi
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
            </main>
            <div class="app-swiper-pagination swiper-pagination"></div>
        </div>
        <!-- <div class="sidenav-overlay"></div>
        <div class="drag-target"></div> -->
    </div>

    <!--  Scripts-->
    <!-- 生产环境版本，优化了尺寸和速度 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <!-- <script src="website/js/init.js"></script> -->
    <!-- <script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'></script> -->

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.jquery.min.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script>
    <!-- <script src="website/js/script.js"></script> -->
    <script src="website/js/index.js"></script>


</body>

</html>