document.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en" class="no-js">
<!--<![endif]-->

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
	<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
	<title>Portal Network | Document</title>
	<meta name="description" content="Portal Network Roadmap">
	<meta name="author" content="Portal Network">
	<meta name="keywords" content="Portal Network Roadmap" />
	<meta property="og:title" content="Portal Network Roadmap" />
  <meta property="og:type" content="website" />
  <meta property="og:description" content="Portal Network Roadmap" />
  <meta property="og:url" content="https://www.portal.network/roadmap.html" />
  <meta property="og:image" content="./assets/meta_share.png" />
  <meta property="og:image:url" content="./assets/meta_share.png" />
  <link rel="shortcut icon" type="image/x-icon" href="./assets/favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/css/swiper.min.css" rel="stylesheet">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.2.6/js/swiper.min.js"></script>
  <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe"
    crossorigin="anonymous"></script>

  <script>
    (function () { var w = window; var ic = w.Intercom; if (typeof ic === "function") { ic('reattach_activator'); ic('update', intercomSettings); } else { var d = document; var i = function () { i.c(arguments) }; i.q = []; i.c = function (args) { i.q.push(args) }; w.Intercom = i; function l() { var s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'https://widget.intercom.io/widget/an50zjec'; var x = d.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); } if (w.attachEvent) { w.attachEvent('onload', l); } else { w.addEventListener('load', l, false); } } })()
  </script>
  <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-KKLX3T6');
  </script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

<body>
  <noscript>
    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KKLX3T6" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
  <div id="document" v-cloak>
    <div class="header">
      <div class="header-container">
        <a href="/">
          <img src="images/logo/column_logo.png" />
        </a>

        <ul class="outline">
          <li>
            <a href="./blog.html" target="_blank">Blog</a>
          </li>
          <li>
            <a href="https://search.portal.network/" target="_blank">Showcase</a>
          </li>
          <li>
            <a href="https://hackathon.portal.network/" target="_blank">Hackathon</a>
          </li>
        </ul>

      </div>
    </div>

    <div id="roadmap">
      <a href="https://t.me/portalnetworkofficial" class="telegramBtn" target="_blank"><img src="images/roadmap/tel.png" alt=""></a>
      <div class="nav">
        <div class="nav-item" @click="scrollToChapter(0)">
          <span class="title">Chapter 1</span>
          <span class="chapter-name">Community Contribution</span>
        </div>
        <div class="nav-item" @click="scrollToChapter(1)">
          <span class="title">Chapter 2</span>
          <span class="chapter-name">Development Progress</span>
        </div>
        <div class="nav-item" @click="scrollToChapter(2)">
          <span class="title">Chapter 3</span>
          <span class="chapter-name">Education & Partnership</span>
        </div>
        <div class="nav-item" @click="scrollToChapter(3)">
          <span class="title">Chapter 4</span>
          <span class="chapter-name">Event</span>
        </div>
      </div>

      <div class="main">
        <div class="chapter" v-for="(chapter, chapterIdx) in roadmapData" :key="chapterIdx">
          <div class="banner">
            <div class="icon">
              <img :src="chapter.icon" />
            </div>
            <span class="title">{{ chapter.title }}</span>
          </div>

          <div class="flag" v-for="(flag, flagIdx) in chapter.flags" :key="flagIdx">
            <div class="headline-container">
              <h1 class="headline">{{ flag.title }}</h1>
              <div class="icons-container">
                <ul class="icon_list" v-if="flag.links.length > 0">
                  <li v-for="(link, linkIdx) in flag.links" :key="link.url">
                    <a :href="link.url" :class="{icon: true, link: true }" target="_blank">{{ flag.links.length >= 2 ? link.title: '' }}</a>
                  </li>
                </ul>

                <ul class="icon_list">
                  <li v-for="(video, videoIdx) in flag.videos" :key="video.url">
                    <a :href="video.url" :class="{icon: true, video: true, expand: flag.videos.length >= 2 }" target="_blank">{{ flag.videos.length >= 2 ? video.title: '' }}</a>
                  </li>
                </ul>

                <a v-for="(file, fileIdx) in flag.files" :key="file.url" :href="file.url" :class="{icon: true, file: true, expand: flag.files.length >= 2 }"
                  target="_blank">
                  {{ flag.files.length >= 2 ? file.title: '' }}
                </a>

                <a v-for="(github, githubIdx) in flag.githubs" :key="github.url" :href="github.url" :class="{icon: true, github: true, expand: flag.githubs.length >= 2 }"
                  target="_blank">
                  {{ flag.githubs.length >= 2 ? github.title: '' }}
                </a>
              </div>
            </div>

            <div class="time-location">
              {{flag.time}},{{flag.location}}
            </div>

            <div class="content">
              <div :class="{description: true, 'has-photos': flag.photos !== null}" v-html="flag.content"></div>
              <div class="photos" v-if="flag.photos !== null">
                <div v-for="(photo, photoIdx) in flag.photos" @click="openModal(flag.photos)" :class="{ cover: flag.photos.length > 2 && photoIdx === 1}" 
                  :key="photoIdx" v-if="photoIdx < 2">
                  <img :src="photo" alt="">
                  <span class="number">+{{flag.photos.length}}</span>
                </div>
              </div>
            </div>

            <div class="progress-container" v-if="flag.progress > 0">
              <div class="progress-bar">
                <div class="progress" :style="{ width: flag.progress + '%'}"></div>
              </div>
              <span class="number">{{flag.progress}}%</span>
            </div>
          </div>
        </div>
      </div>

      <div v-show="isOpenPop" class="photoPop">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(photo, photoIdx) in nowPhotos">
                <img :src="photo" alt="" />
              </div>
            </div>
            <div class="swiper-button-prev swiper-button-white"></div>
            <div class="swiper-button-next swiper-button-white"></div>
          </div>
          <a @click="closeModal" class="closeBtn">
            <i class="fas fa-times fa-2x"></i>
          </a>
        </div>
    </div>

  </div>
<script type="text/javascript" src="./js/vendor.js?f92db54f&f92db54f1d7daa2af217"></script><script type="text/javascript" src="./js/document.js?f92db54f&f92db54f1d7daa2af217"></script></body>

</html>