index.html

<!DOCTYPE html>
<html lang="zh-hant-tw" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>g0v dashboard</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;400;700&display=swap" rel="stylesheet">
    <style media="screen">
      body {
        font-family: 'Noto Sans TC', sans-serif;
      }
      .card {
        transition: .3s;
      }
      .card .card-text span {
        font-size: 4em;
        min-height: 100vh;
      }
      .card a:link, .card a:visited {
        color: #333;
        text-decoration: underline;
      }
      .card a:hover {
        color: #AAA;
      }
      .card:hover {
        background-color: #EEE;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="#">g0v dashboard</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <a role="button" href="https://yunlin-teng-437911.middle2.me" target="_blank" class="btn btn-outline-light" id="update-time">上次更新時間: <span>n/a</span></a>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/g0v/g0v-dashboard" target="_blank">github</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://jothon.g0v.tw" target="_blank">揪松網</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="https://g0v.tw" target="_blank">g0v.tw</a>
          </li>
        </ul>
      </div>
    </nav>
    <p class="text-center" id="loading-text">讀取資料中......</p>
    <div class="container py-4">
      <div class="card-columns">
        <div class="card" id="slack-users">
          <div class="card-body text-center">
            <p class="card-text">
              <span>0</span><a style="font-size: 3em;">+</a><br>
              參與者
            </p>
          </div>
        </div>
        <div class="card" id="slack-channels">
          <div class="card-body text-center">
            <p class="card-text">
              <span>0</span>個<br>
              slack討論頻道
            </p>
          </div>
        </div>
        <div class="card" id="slack-messages">
          <div class="card-body text-center">
            <p class="card-text">
              <span>0</span><a style="font-size: 3em;">+</a><br>
              <a href="https://join.g0v.tw/" target="_blank">slack討論訊息</a>
            </p>
          </div>
        </div>
        <div class="card" id="summit-count">
          <div class="card-body text-center">
            <p class="card-text">
              <span>0</span>次<br>
              <a href="https://summit.g0v.tw/" target="_blank">國際雙年會</a>
            </p>
          </div>
        </div>
        <div class="card" id="hackathon-count">
          <div class="card-body text-center">
            <p class="card-text">
              <span>0</span>次<br>
              <a href="https://jothon.g0v.tw/events/" target="_blank">雙月大黑客松</a>
            </p>
          </div>
        </div>
        <div class="card" id="hackathon-proposals">
          <div class="card-body text-center">
            <p class="card-text">
              <span>0</span>個<br>
              <a href="https://docs.google.com/spreadsheets/d/1C9-g1pvkfqBJbfkjPB0gvfBbBxVlWYJj6tTVwaI5_x8/" target="_blank">大松提案</a>
            </p>
          </div>
          </div>
          <div class="card" id="fanpage-like">
            <div class="card-body text-center">
              <p class="card-text">
                <span>0</span>人<br>
                <a href="https://www.facebook.com/g0v.tw" target="_blank">說g0v粉專讚</a>
              </p>
            </div>
          </div>
          <div class="card" id="fanpage-follow">
            <div class="card-body text-center">
              <p class="card-text">
                <span>0</span>人<br>
                <a>追蹤g0v粉專</a>
              </p>
            </div>
          </div>
          <div class="card" id="github-repos">
            <div class="card-body text-center">
              <p class="card-text">
                <span>0</span><a style="font-size: 3em;">+</a><br>
                <a href="https://github.com/" target="_blank">github專案</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <script type="text/javascript">
      $.get("https://yunlin-teng-437911.middle2.me/", function(data){
        $("#loading-text").fadeOut();
        console.log(data);
        var date = new Date(data.create_at);
        $("#update-time span").text(date.toLocaleString());
        var titles = Object.keys(data.data);
        titles.forEach((_title) => {
          _data = data.data[_title];
          var subtitles = Object.keys(_data);
          subtitles.forEach((_subtitle) => {
            console.log(`${_title}-${_subtitle}: ${_data[_subtitle]}`);
            $(`#${_title}-${_subtitle} .card-text span`).text(_data[_subtitle]);
          });

        });
      });
    </script>
  </body>
</html>