dnomd343
/
echoIP
mirror of https://github.com/dnomd343/echoIP
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

修改了ui样式,优化ajax过程返回,解决了地图无法移动的bug

master
Dnomd343 3 years ago
parent
0b022f34db
commit
5d45b53bd4
4 changed files with 115 additions and 80 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 26
      assets/js/main.js
  2. 2
      assets/js/main.min.js
  3. 15
      backend/queryInfo.php
  4. 152
      index.html

26
assets/js/main.js
View File

@ -1,23 +1,32 @@
$(document).ready(function() { $(document).ready(function () {
$.get("/ip", function(data) { $.get("/ip", function (data) {
$("#ip_default").val(data); $("#ip_default").val(data);
getInfo(); getInfo();
}); });
$("table").hide(); $("table").hide();
$("button").click(function() { $("button").click(function () {
$("button").text("Searching..."); $("button").text("Searching...");
$("table").hide(1000); $("table").hide(1000);
getInfo(); getInfo();
}); });
}); });
$(document).keydown(function (event) {
if (event.keyCode == 13) {
$("button").click();
}
});
function getInfo() { function getInfo() {
$.get("/info/" + $("input").val(), function(data) { $.get("/info/" + $("input").val(), function (data) {
console.log(data); if (data.status == "F") {
$("button").text("Illegal IP");
$("button").css({ 'border-color': '#ff406f', 'background-color': '#ff406f' });
return 0;
}
if (!$("input").val()) { if (!$("input").val()) {
$("input").val(data.ip); $("input").val(data.ip);
} }
$("button").text("Search"); $("button").text("Search");
$("button").css({ 'border-color': '', 'background-color': '' });
$("table").show(1000); $("table").show(1000);
$("#ip").text(data.ip); $("#ip").text(data.ip);
$("#as").text(data.as); $("#as").text(data.as);
@ -25,11 +34,14 @@ function getInfo() {
$("#region").text(data.region); $("#region").text(data.region);
$("#country").text(data.country); $("#country").text(data.country);
$("#timezone").text(data.timezone); $("#timezone").text(data.timezone);
$("#loc").text(data.loc); var earth = "https://earth.google.com/web/@" + data.loc + ",0a,398836d,1y,0h,0t,0r";
$("#loc").html('<a href=' + earth + 'target="_blank">' + data.loc + '</a>');
$("#isp").text(data.isp); $("#isp").text(data.isp);
$("#scope").text(data.scope); $("#scope").text(data.scope);
$("#detail").text(data.detail); $("#detail").text(data.detail);
draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1])); draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1]));
}); });
} }

2
assets/js/main.min.js
View File

@ -1 +1 @@
function getInfo(){$.get("/info/"+$("input").val(),(function(data){console.log(data),$("input").val()||$("input").val(data.ip),$("button").text("Search"),$("table").show(1e3),$("#ip").text(data.ip),$("#as").text(data.as),$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone),$("#loc").text(data.loc),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[1]))}))}function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}$(document).ready((function(){$.get("/ip",(function(data){$("#ip_default").val(data),getInfo()})),$("table").hide(),$("button").click((function(){$("button").text("Searching..."),$("table").hide(1e3),getInfo()}))})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg"; function getInfo(){$.get("/info/"+$("input").val(),(function(data){if("F"==data.status)return $("button").text("Illegal IP"),$("button").css({"border-color":"#ff406f","background-color":"#ff406f"}),0;$("input").val()||$("input").val(data.ip),$("button").text("Search"),$("button").css({"border-color":"","background-color":""}),$("table").show(1e3),$("#ip").text(data.ip),$("#as").text(data.as),$("#city").text(data.city),$("#region").text(data.region),$("#country").text(data.country),$("#timezone").text(data.timezone);var earth="https://earth.google.com/web/@"+data.loc+",0a,398836d,1y,0h,0t,0r";$("#loc").html("<a href="+earth+'target="_blank">'+data.loc+"</a>"),$("#isp").text(data.isp),$("#scope").text(data.scope),$("#detail").text(data.detail),draw(parseFloat(data.loc.split(",")[0]),parseFloat(data.loc.split(",")[1]))}))}function draw(x,y){var map=new mapboxgl.Map({container:"map",style:"mapbox://styles/mapbox/streets-v11",center:[y,x],zoom:3}),size=100,pulsingDot={width:100,height:100,data:new Uint8Array(4e4),onAdd:function(){var canvas=document.createElement("canvas");canvas.width=this.width,canvas.height=this.height,this.context=canvas.getContext("2d")},render:function(){var duration=1e3,t=performance.now()%1e3/1e3,radius=15,outerRadius=35*t+15,context=this.context;return context.clearRect(0,0,this.width,this.height),context.beginPath(),context.arc(this.width/2,this.height/2,outerRadius,0,2*Math.PI),context.fillStyle="rgba(255, 200, 200,"+(1-t)+")",context.fill(),context.beginPath(),context.arc(this.width/2,this.height/2,15,0,2*Math.PI),context.fillStyle="rgba(255, 100, 100, 1)",context.strokeStyle="white",context.lineWidth=2+4*(1-t),context.fill(),context.stroke(),this.data=context.getImageData(0,0,this.width,this.height).data,map.triggerRepaint(),!0}};map.on("load",(function(){map.addImage("pulsing-dot",pulsingDot,{pixelRatio:2}),map.addLayer({id:"points",type:"symbol",source:{type:"geojson",data:{type:"FeatureCollection",features:[{type:"Feature",geometry:{type:"Point",coordinates:[y,x]}}]}},layout:{"icon-image":"pulsing-dot"}})}))}$(document).ready((function(){$.get("/ip",(function(data){$("#ip_default").val(data),getInfo()})),$("table").hide(),$("button").click((function(){$("button").text("Searching..."),$("table").hide(1e3),getInfo()}))})),$(document).keydown((function(event){13==event.keyCode&&$("button").click()})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg";

15
backend/queryInfo.php
View File

@ -74,7 +74,8 @@ function getIPInfo($ip) {
$cli .= "Detail: ".$info['detail'] . PHP_EOL; $cli .= "Detail: ".$info['detail'] . PHP_EOL;
return $cli; return $cli;
} }
$info['status'] = 'T';
header('Content-Type: application/json; charset=utf-8'); // 以JSON格式发送 header('Content-Type: application/json; charset=utf-8'); // 以JSON格式发送
return json_encode($info); return json_encode($info);
} }
@ -116,12 +117,18 @@ function tryCIDR($beginIP, $endIP) { // 给定IP范围，尝试计算CIDR
function main() { function main() {
$ip = $_GET['ip']; $ip = $_GET['ip'];
if (!filter_var($ip, \FILTER_VALIDATE_IP)) { // 输入IP不合法 if (!filter_var($ip, \FILTER_VALIDATE_IP)) { // 输入IP不合法
echo "Illegal IP format".PHP_EOL; if ($_GET['cli'] == "true") {
echo "Illegal IP format" . PHP_EOL;
} else {
header('Content-Type: application/json; charset=utf-8');
$reply = array();
$reply['status'] = 'F';
$reply['message'] = 'Illegal IP format';
echo json_encode($reply);
}
exit; exit;
} }
echo getIPInfo($ip); echo getIPInfo($ip);
} }
main(); main();
?>

152
index.html
View File

@ -32,86 +32,102 @@
margin-top: 0px; margin-top: 0px;
margin-bottom: 20px; margin-bottom: 20px;
} }
.positioncontrol {
position: absolute;
left: calc(100vw*0.8 - 190px);
}
@media screen and (max-width: 600px) {
.positioncontrol {
position: absolute;
left: 0;
right: 0;
}
}
a {
text-decoration: none;
}
</style> </style>
<body> <body>
<div class="hero is-fullheight is-app-grey mapbox-hero"> <div class="hero is-fullheight is-app-grey mapbox-hero">
<div id="main-hero" class="hero-body" style="padding: 0;"> <div id="main-hero" class="hero-body" style="padding: 0;">
<div class="container has-text-centered"> <div class="has-text-centered is-subheader-caption positioncontrol" style="padding-bottom: 0;">
<div class="columns is-vcentered"> <div class="contact-page-form flex-card"
<div class="column is-6 is-offset-6 has-text-centered is-subheader-caption"> style="background-color: rgba(255, 255, 255, 0.7);backdrop-filter: blur(1.5px);">
<div class="contact-page-form flex-card"> <h3 id="sub-title">echoIP</h3>
<h3 id="sub-title">echoIP</h3> <div class="columns is-multiline">
<div class="columns is-multiline"> <div class="column">
<div class="column is-6"> <div class="field">
<div class="field"> <div class="control">
<div class="control"> <input type="text" placeholder="Search your IP here." class="input is-medium"
<input type="text" placeholder="Search your IP here." class="input is-medium"> style="background-color: rgba(255, 255, 255, 0.5);">
</div>
</div>
</div> </div>
<div class="column is-6"> </div>
<div class="field"> </div>
<div class="control"> <div class="column">
<button type="button" <div class="field">
class="button button-cta primary-btn no-lh is-bold raised is-fullwidth">Search</button> <div class="control">
</div> <button type="button"
</div> class="button button-cta primary-btn no-lh is-bold raised is-fullwidth">Search</button>
</div> </div>
</div> </div>
<table class="table">
<tr>
<td>IP</th>
<td id="ip">
</th>
</tr>
<tr>
<td>AS</th>
<td id="as">
</th>
</tr>
<tr>
<td>City</th>
<td id="city">
</th>
</tr>
<tr>
<td>Region</th>
<td id="region">
</th>
</tr>
<tr>
<td>Country</th>
<td id="country">
</th>
</tr>
<tr>
<td>Timezone</th>
<td id="timezone">
</th>
</tr>
<tr>
<td>Location</th>
<td id="loc">
</th>
</tr>
<tr>
<td>ISP</td>
<td id="isp"></td>
</tr>
<tr>
<td>Scope</td>
<td id="scope"></td>
</tr>
<tr>
<td>Detail</td>
<td id="detail"></td>
</tr>
</table>
</div> </div>
</div> </div>
<table class="table" style="background-color: transparent;">
<tr>
<td>IP</th>
<td id="ip">
</th>
</tr>
<tr>
<td>AS</th>
<td id="as">
</th>
</tr>
<tr>
<td>City</th>
<td id="city">
</th>
</tr>
<tr>
<td>Region</th>
<td id="region">
</th>
</tr>
<tr>
<td>Country</th>
<td id="country">
</th>
</tr>
<tr>
<td>Timezone</th>
<td id="timezone">
</th>
</tr>
<tr>
<td>Location</th>
<td id="loc">
</th>
</tr>
<tr>
<td>ISP</td>
<td id="isp"></td>
</tr>
<tr>
<td>Scope</td>
<td id="scope"></td>
</tr>
<tr>
<td>Detail</td>
<td id="detail"></td>
</tr>
</table>
</div> </div>
</div> </div>
<div id='map'></div> <div id='map'></div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save