sensor.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
  <meta name="google-signin-client_id" content="463509681101-3mv6658rkbcq52dst0t3h17desmq6e8l.apps.googleusercontent.com">
  <meta property="og:url" content="http://sensorweb.io">
  <meta property="og:site_name" content="SensorWeb">
  <meta property="og:title" content="Sensor detail">
  <meta property="og:description" content="Project pm2.5 for SensorWeb">
  <meta property="og:image" content="http://sensorweb.io/images/promotion_01.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">
  <meta property="og:image" content="http://sensorweb.io/images/promotion_02.png">
  <meta property="og:image:type" content="image/png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="1200">
  <meta property="twitter:title" content="SensorWeb">
  <meta property="twitter:description" content="Sensor detail">
  <meta property="twitter:image:src" content="http://sensorweb.io/images/promotion_01.png">
  <meta property="twitter:image:width" content="1200">
  <meta property="twitter:image:height" content="1200">
  <title>Sensor</title>
  <link rel="icon" type="image/x-icon" href="images/favicon.ico">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,700' rel='stylesheet' type='text/css'>
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/sensor-detail.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>

  <!-- Navigation -->
  <ul id="dropdown" class="dropdown-content">
    <li><a href="about.html">English Version</a></li>
    <li class="divider"></li>
    <li><a href="tw/about.html">中文版</a></li>
  </ul>
  <div class="navbar-fixed">
    <nav class="teal" role="navigation">
      <div class="nav-wrapper container">
        <a id="logo-container" href="/" class="brand-logo">SensorWeb</a>

        <ul class="right hide-on-med-and-down">
          <li><a href="projects.html">Projects</a></li>
          <!-- <li><a href="getting-started.html">Document</a></li> -->
          <li><a href="http://blog.sensorweb.io">Blog</a></li>
          <li><a href="about.html">About</a></li>
          <!-- Dropdown Trigger -->
          <!-- <li><a class="dropdown-button" href="#!" data-activates="dropdown">EN<i id="arrow" class="material-icons right">arrow_drop_down</i></a></li> -->
          <!-- <li class="login"><a id="login-btn" href="#google-sign-in-modal" class="modal-trigger">Log In</a></li>
          <li class="login"><a id="account-btn" class="hide">My account</a></li> -->
          <!-- <li>
            <div id="tabzilla">
              <a href="https://www.mozilla.org/en-US/" data-link-type="nav" data-link-name="tabzilla">Mozilla</a>
            </div>
          </li> -->
        </ul>

        <!-- Mobile Navigation -->
        <ul id="nav-mobile" class="side-nav">
          <li><a href="projects.html">Projects</a></li>
          <!-- <li><a href="getting-started.html">Document</a></li> -->
          <li><a href="http://blog.sensorweb.io">Blog</a></li>
          <li><a href="about.html">About</a></li>
          <li id="app-download-li" class="hide"><a class="modal-trigger" href="#app-dl-modal">Download App</a></li>
          <!-- <li><a href="user-detail.html">Log In</a></li> -->
        </ul>
        <a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>

      </div>
    </nav>
  </div>

  <div id="page-container">
  <div class="container projects" id="sensor-data">
    <div class="section">
      <div class="row">
        <div class="col s12">
          <div id="sensor-location-map"></div>
          <div style="height: 600px">
            <canvas id="sensor-data-chart" height="400"></canvas>
          </div>
          <h3 class="sensor-info">Sensor ID</h3>
          <p id="sensor-id" class="contents"></p>
          <!-- TOOD: Re-enable the API Key -->
          <!--<h3 class="sensor-info">API Key</h5>
          <p id="api-key" class="contents">bkayZOMvuy8aZOhIgxq94K9Oe7Y70Hw55</p>-->
          <h3 class="sensor-info">Project</h3>
          <p class="contents"><a href="project.html?id=pm25">PM2.5</a></p>
          <h3 class="sensor-info">Owner</h3>
          <p id="sensor-owner" class="contents"></p>
          <h3 class="sensor-info">Embed</h3>
          <p>
            <iframe id="widget" width="125" height="125" frameborder="0" scrolling="no"></iframe>
            <input id="widget-input">
          </p>
        </div>
      </div>
    </div>
    <!-- TOOD: Re-enable the update and delete buttons -->
    <!--<div class="center">
      <a class="waves-effect waves-light btn-large " href="sensor-setup.html">Edit<i class="large material-icons right">mode_edit</i></a>
      <a class="waves-effect waves-light btn-large ">Delete<i class="material-icons right">delete</i></a>
    </div>-->
  </div>

  <!-- Modal structure -->
  <div id="google-sign-in-modal" class="modal">
    <div class="modal-content">
      <h4>Login to your account</h4>
      <p>Please give us your preferred ID and sign in with google account</p>
      <div class="input-field">
        <input id="user-id" type="text" class="validate" placeholder="User ID">
        <!-- <label for="user-id">User ID</label> -->
      </div>
      <div class="g-signin2 center" data-onsuccess="onSignIn"></div>
    </div>
  </div>
  </div>

  <div id="app-dl-modal" class="modal">
    <div class="modal-content center">
      <h5>Try Out the Pre-release PM2.5 APP!</h5>
      <img src="images/pm25_app.png" width="55%" height="55%">
    </div>
    <div class="modal-footer center">
      <a href="resource/android-debug.apk" class="modal-action modal-close waves-effect waves-light btn-large teal" style="float:unset, margin-bottom: 40px">Download</a>
    </div>
  </div>

  <!-- Footer -->
  <footer class="page-footer teal">
    <div class="container">
      <div class="row">
        <div class="col l3 s12">
          <a href="http://mozilla.org" target="_blank"><img class="logo-mozilla" src="images/footer-mozilla-white.png"/></a>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text head">SensorWeb</h5>
          <ul>
            <li><a class="white-text" href="https://github.com/sensor-web" target="_blank">GitHub</a></li>
          </ul>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text head">Connect</h5>
          <ul>
            <li><a class="white-text" href="https://wiki.mozilla.org/SensorWeb" target="_blank">Wiki</a></li>
            <li><a class="white-text" href="https://wiki.mozilla.org/Connected_Devices/Participation" target="_blank">Participation</a></li>
          </ul>
        </div>
        <div class="col l3 s12">
          <h5 class="white-text head">Contact Us</h5>
          <ul>
            <li><a class="white-text" href="mailto:sensorweb@mozilla.com" target="_blank">sensorweb@mozilla.com</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
      Made by <a class="brown-text text-lighten-3" href="http://materializecss.com">Materialize</a>
      </div>
    </div>
  </footer>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://apis.google.com/js/platform.js" async defer></script>
  <script src="https://apis.google.com/js/client.js"></script>
  <script src="js/lib/purl.js"></script>
  <script src="js/materialize.min.js"></script>
  <script src="js/moment-with-locales.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.0/Chart.min.js"></script>
  <script src="js/config.js"></script>
  <script src="js/init.js"></script>
  <script src="js/auth-utils.js"></script>
  <script src="js/daqi-utils.js"></script>
  <script src="js/chart-utils.js"></script>
  <script src="js/sensor.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAWlJoUn2DS8XUYilLXZE8dxYEXbo6dnaE&signed_in=false&callback=initMap" async defer></script>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-75308712-1', 'auto');
    ga('send', 'pageview');
  </script>
</body>
</html>