<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
body {
|
|
background-color: black;
|
|
}
|
|
#globe, #traceout {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
}
|
|
#cmdout {
|
|
color: white;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<?php include "php/traceroute.php" ?>
|
|
|
|
<div id="globe">
|
|
<!-- This is where our renderer will attach the scene -->
|
|
<canvas></canvas>
|
|
</div>
|
|
|
|
<script src="js/points.js"></script>
|
|
<script src="js/external/three.js"></script>
|
|
<script src="js/external/orbital-controls.js"></script>
|
|
<script src="js/animations.js"></script>
|
|
|
|
<div id="traceout">
|
|
<button id="btnrun">Run Traceroute to google.com</button>
|
|
<p id="cmdout"></p>
|
|
</div>
|
|
<script>
|
|
init();
|
|
|
|
var runTraceroute = function() {
|
|
var rawout = '<?php traceroute(); raw_output() ?>';
|
|
var tracepoints = '<?php json_output(); ?>';
|
|
document.getElementById('cmdout').innerHTML += rawout;
|
|
init.addTracePoints(JSON.parse(tracepoints));
|
|
document.getElementById("btnrun").style.display = "none";
|
|
};
|
|
document.getElementById ("btnrun").addEventListener ("click", runTraceroute, false);
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|