253 lines
7.2 KiB
HTML
253 lines
7.2 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>XTR :: xicon trace route</title>
|
|
<style>
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 90%;
|
|
}
|
|
td
|
|
{
|
|
border:1px solid grey;
|
|
font-size: 9pt;
|
|
}
|
|
|
|
.info
|
|
{
|
|
display: block; position: absolute; right: 10px; top: 10px;
|
|
}
|
|
|
|
.info:hover .info_box
|
|
{
|
|
visibility: visible;
|
|
z-index: 4;
|
|
}
|
|
|
|
.info .info_box
|
|
{
|
|
display: block;
|
|
position: absolute;
|
|
right: 0px;
|
|
top: 0px;
|
|
visibility: hidden;
|
|
width: 502px;
|
|
border: solid 1px;
|
|
background-color: #999999;
|
|
font-size: 10pt;
|
|
}
|
|
|
|
.traceroutes
|
|
{
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.traceroutes:visited
|
|
{
|
|
color: #000000;
|
|
}
|
|
|
|
.traceroutes:hover
|
|
{
|
|
color: #880000;
|
|
transform: rotate(-30deg);
|
|
}
|
|
|
|
.traceroutes:active
|
|
{
|
|
color: #bb0000;
|
|
}
|
|
|
|
.traceroutes_rotating
|
|
{
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
color: #bb0000;
|
|
animation: spin 2s linear infinite;
|
|
}
|
|
|
|
@keyframes spin
|
|
{
|
|
0% { transform: rotate(-30deg); }
|
|
25% { transform: rotate(0deg); }
|
|
50% { transform: rotate(30deg); }
|
|
75% { transform: rotate(0deg); }
|
|
100% { transform: rotate(-30deg); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="info" class="info">ⓘ
|
|
<div id="info_box" class="info_box">
|
|
This service is free for use by accepting the <a href="aup.txt">Acceptable Use Policy</a>.<br>
|
|
<br>
|
|
This is just an interface to to give a more GUI-ish
|
|
access to the self-registered XTR clients. No traceroute requests will be saved on this server. All request to the XTR clients
|
|
are handled by your browser.<br>
|
|
<br>
|
|
Want to add your server? <a href="xtr.pl">Download XTR client</a> now. Readme included in source code!<br>
|
|
Want to run your own master server? <a href="xtrd.pl">Download XTRd</a>. Readme included in source code!<br>
|
|
<br>
|
|
Questions?/Impress? -> <a href="mailto:rest@xicon.de">Friedrich Schrader</a>
|
|
</div>
|
|
</div>
|
|
<div style="display: inline-block; border-style: solid; border-width: 0px 1px 1px 0px; border-color: #cccccc;">
|
|
<div style="display: inline-block;"><a href="#" onclick="javajscript:dosome('6');">execute these:</a><br> </div>
|
|
<div style="display: inline-block;">
|
|
<input type="checkbox" id="cb1" name="cb1" checked>
|
|
<input type="checkbox" id="cb2" name="cb2">
|
|
<input type="checkbox" id="cb3" name="cb3"><br>
|
|
<input type="checkbox" id="cb4" name="cb4">
|
|
<input type="checkbox" id="cb5" name="cb5">
|
|
<input type="checkbox" id="cb6" name="cb6">
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%;">
|
|
<div style="width: 33%; display: inline-block; margin-top: 20px;">
|
|
<select name="server1" id="server1">
|
|
</select>
|
|
<input name="target1" id="target1" value="8.8.8.8">
|
|
<a href="#" onclick="javascript:doit('1');" class="traceroutes" id="doit1">⛟</a>
|
|
<div id="div1">
|
|
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
|
|
</div>
|
|
</div>
|
|
<div style="width: 33%; display: inline-block; margin-top: 20px;">
|
|
<select name="server2" id="server2">
|
|
</select>
|
|
<input name="target2" id="target2" value="www.heise.de">
|
|
<a href="#" onclick="javascript:doit('2');" class="traceroutes" id="doit2">⛟</a>
|
|
<div id="div2">
|
|
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
|
|
</div>
|
|
</div>
|
|
<div style="width: 33%; display: inline-block; margin-top: 20px;">
|
|
<select name="server3" id="server3">
|
|
</select>
|
|
<input name="target3" id="target3" value="link11.com">
|
|
<a href="#" onclick="javascript:doit('3');" class="traceroutes" id="doit3">⛟</a>
|
|
<div id="div3">
|
|
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
|
|
</div>
|
|
</div>
|
|
<div style="width: 33%; display: inline-block; margin-top: 20px;">
|
|
<select name="server4" id="server4">
|
|
</select>
|
|
<input name="target4" id="target4" value="ipv4.xicon.eu">
|
|
<a href="#" onclick="javascript:doit('4');" class="traceroutes" id="doit4">⛟</a>
|
|
<div id="div4">
|
|
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
|
|
</div>
|
|
</div>
|
|
<div style="width: 33%; display: inline-block; margin-top: 20px;">
|
|
<select name="server5" id="server5">
|
|
</select>
|
|
<input name="target5" id="target5" value="ipv6.xicon.eu">
|
|
<a href="#" onclick="javascript:doit('5');" class="traceroutes" id="doit5">⛟</a>
|
|
<div id="div5">
|
|
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
|
|
</div>
|
|
</div>
|
|
<div style="width: 33%; display: inline-block; margin-top: 20px;">
|
|
<select name="server6" id="server6">
|
|
</select>
|
|
<input name="target6" id="target6" value="2001:638:60f:110::1:2">
|
|
<a href="#" onclick="javascript:doit('6');" class="traceroutes" id="doit6">⛟</a>
|
|
<div id="div6">
|
|
<table><tr><td>#empty</td><td>#empty</td><td>#empty</td><td>#empty</td></tr></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="jquery-3.4.1.min.js"></script>
|
|
<script>
|
|
function dosome(cb_count)
|
|
{
|
|
for (i = 1; i <= cb_count; i++)
|
|
{
|
|
var checkbox = document.getElementById("cb"+i).checked;
|
|
if( checkbox === true)
|
|
{
|
|
doit(i);
|
|
}
|
|
}
|
|
}
|
|
|
|
function doit(target_div)
|
|
{
|
|
var str1= new Object();
|
|
var server=document.getElementById("server"+target_div).value;
|
|
var target_ip=document.getElementById("target"+target_div).value;
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "http://"+server+"/v3/client/request/"+target_ip,
|
|
dataType: "JSON",
|
|
beforeSend: function ()
|
|
{
|
|
document.getElementById("doit"+target_div).classList.add('traceroutes_rotating');
|
|
}
|
|
}).done(function( jsonResult )
|
|
{
|
|
document.getElementById("doit"+target_div).classList.remove('traceroutes_rotating');
|
|
|
|
str1=JSON.parse(JSON.stringify(jsonResult));
|
|
|
|
var tbl=$("<table/>").attr("id","mytable"+target_div);
|
|
$("#div"+target_div).empty().append(tbl);
|
|
$("#mytable"+target_div).append("<tr><td><b>ip</b></td><td><b>hostname</b></td><td><b>ping</b></td><td><b>as</b></td></tr>");
|
|
for(var i=0;i<str1.length;i++)
|
|
{
|
|
var tr="<tr>";
|
|
var td1="<td>"+str1[i][0]+"</td>";
|
|
var td2="<td>"+str1[i][1]+"</td>";
|
|
var td3="<td>"+str1[i][2]+"</td>";
|
|
var td4="<td title=\""+str1[i][4]+"\">"+str1[i][3]+"</td></tr>";
|
|
|
|
$("#mytable"+target_div).append(tr+td1+td2+td3+td4);
|
|
|
|
}
|
|
|
|
});
|
|
}
|
|
|
|
function get_servers()
|
|
{
|
|
var strServer= new Object();
|
|
$.ajax(
|
|
{
|
|
type: "GET",
|
|
url: "http://xtr-master.xicon.eu/v3/server/list/online",
|
|
dataType: "JSON",
|
|
beforeSend: function ()
|
|
{
|
|
// nothing for now
|
|
}
|
|
}).done(function( jsonServerResult )
|
|
{
|
|
strServer=JSON.parse(JSON.stringify(jsonServerResult));
|
|
|
|
var list=$("<select>").attr("name","server");
|
|
$("select[name*='server']").empty().append(list);
|
|
for(var i=0;i<strServer.length;i++)
|
|
{
|
|
//var strOption = "<option value=\"" + strServer[i][0] + ":" + strServer[i][1] + "\">" + strServer[i][0] + ":" + strServer[i][1] + "(AS" + strServer[i][3] + ")</option>";
|
|
var strOption = new Option( strServer[i][0] + ":" + strServer[i][1] + " (AS" + strServer[i][2] + ")" , strServer[i][0] + ":" + strServer[i][1]);
|
|
$(strOption).html(strServer[i][0] + ":" + strServer[i][1] + " (AS" + strServer[i][2] + ")");
|
|
$("select[name*='server']").append(strOption);
|
|
}
|
|
$("select[name='server']").append("</select>");
|
|
});
|
|
}
|
|
|
|
$(document).ready(function()
|
|
{
|
|
get_servers();
|
|
});
|
|
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|