Untitled

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css"/>
    <title>Rocket League Stats</title>
    <style>
        .spa { display: none; }
        #tabDevice { display: block; }
         {

        }
        body{
            background-image: url("assets/bg.jpg");
            background-repeat: no-repeat;
            background-size: auto;

            color: white;
        }
        .logo{
            width: 100%;
        }
        p{
            text-shadow: -2px -2px 25px rgba(0, 0, 0, 1);
        }
        .titel {
            color: white;
            font-size: 29px;
            font-family: "Libre Baskerville", sans-serif;
            line-height: 45px;
            text-align: center;
            text-shadow: -2px -2px 25px rgba(0, 0, 0, 1);
            padding-top: 20px; }
        .kleur{
            background-color: #0081D5;
        }
        td, th {
            border: 1px solid #ddd;
            text-align: left;
        }
        table {
            background-color: rgba(0, 0, 0, 0.3);
            border: 1px solid #ddd;
            text-align: left;
            padding-top: 20px;
            border-collapse: collapse;
            width: 100%;
        }

th, td {
    padding: 15px;
}
    </style>
    <script type="text/javascript">

  document.addEventListener("deviceready", function() {
  // Define a div tag with id="map_canvas"
  var mapDiv = document.getElementById("map_canvas");

  // Initialize the map plugin
  var map = plugin.google.maps.Map.getMap(mapDiv);

      map.getMyLocation(function(location) {
  var msg = ["Current your location:\n",
    "latitude:" + location.latLng.lat,
    "longitude:" + location.latLng.lng,
    "speed:" + location.speed,
    "time:" + location.time,
    "bearing:" + location.bearing].join("\n");

  map.addMarker({
    'position': location.latLng,
    'title': msg
  }, function(marker) {
    marker.showInfoWindow();
  });
});

  // You have to wait the MAP_READY event.
  map.on(plugin.google.maps.event.MAP_READY, onMapInit);
});

function onMapInit(map) {
}
    </script>
</head>
<body>
<!-- Fixed navbar -->
<div class="navbar-fixed">
    <nav class="kleur ">
        <div class="nav-wrapper container"><a href="#!" class="brand-logo center">RL Stats</a>
            <a href="#!" data-activates="nav-mobile" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
        </div>
    </nav>
</div>
<!-- Fixed sideNav -->
<ul id="nav-mobile" class="side-nav">
    <li><a href="#!" data-show="tabHome"><i class="material-icons">home</i>Home</a></li>
    <li>
        <div class="divider"></div>
    </li>
    <li><a href="#!" data-show="tabStats"><i class="material-icons">timeline</i>Stats</a></li>
    <li>
        <div class="divider"></div>
    </li>
    <li><a href="#!" data-show="tabMedia"><i class="material-icons">update</i>Media</a></li>
        <li>
        <div class="divider"></div>
    </li>
    <li><a href="#!" data-show="tabInfo"><i class="material-icons">visibility</i>Info</a></li>

</ul>
<!-- Grid -->
<div class="container">
    <div class="row home" id="tabHome">
        <div class="col s12">
            <h4><i class="material-icons">home</i> Home</h4>
            <p class="titel">Rocket League Stats</p>
            <p><img class="logo" src="assets/rllogo.png"/></p>
        </div>
    </div>
    <div class="row spa" id="tabStats">
        <div class="col s12">
            <h4><i class="material-icons">timeline</i> Stats</h4>
            <h5 id="Stats"></h5>
            <p class="titel">Personal statistics</p>

        </div>
    </div>
    <div class="row spa" id="tabMedia">
        <div class="col s12">
            <h4><i class="material-icons">update</i> Media</h4>
            <p class="titel">Highlighted video:</p>
            <iframe width="100%" height="100%" src="https://www.youtube.com/embed/RpYhslQz2l4"> </iframe>
            <p>Highlighted picture:</p>
            <img class="logo" src="https://images4.alphacoders.com/860/thumb-1920-860666.jpg"/>
        </div>
    </div>
    <div class="row spa" id="tabInfo">
        <div class="col s12">
            <h4><i class="material-icons">visibility</i> Info</h4>
            <p class="titel">Info about the application:</p>
            <table>
              <tr>
                <th>Naam</th>
                <th>Thomas Vansprengel</th>
              </tr>
              <tr>
                <td>E-mail</td>
                <td>vansprengelthomas@gmail.com</td>
              </tr>
              <tr>
                <td>GSM-Nummer</td>
                <td><a href="tel:0493688482">0493688482</a></td>
              </tr>
            </table>
            <p>My home:</p>
             <div style="width:100%;height:400px" id="map_canvas"></div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="cordova.js"></script>
<script src="js/device.js"></script>
<script src="js/network.js"></script>
<script src="js/compass.js"></script>
<script defer src="js/app.js"></script>
</body>
</html>