mirror of https://github.com/dnomd343/echoIP
shevonkuan
4 years ago
6 changed files with 243 additions and 76 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,120 @@ |
|||||
|
$(document).ready(function () { |
||||
|
$.get("/ip", function (data) { |
||||
|
$("#ip_default").val(data); |
||||
|
ajax_process(); |
||||
|
}); |
||||
|
$("table").hide(); |
||||
|
$("button").click(function () { |
||||
|
$("button").text("Searching..."); |
||||
|
$("table").hide(); |
||||
|
ajax_process(); |
||||
|
}); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg'; |
||||
|
|
||||
|
|
||||
|
function draw(x, y) { |
||||
|
var map = new mapboxgl.Map({ |
||||
|
container: 'map', |
||||
|
style: 'mapbox://styles/mapbox/streets-v11', |
||||
|
center: [y, x], |
||||
|
zoom: 3 |
||||
|
}); |
||||
|
|
||||
|
var size = 100; |
||||
|
|
||||
|
var pulsingDot = { |
||||
|
width: size, |
||||
|
height: size, |
||||
|
data: new Uint8Array(size * size * 4), |
||||
|
|
||||
|
onAdd: function () { |
||||
|
var canvas = document.createElement('canvas'); |
||||
|
canvas.width = this.width; |
||||
|
canvas.height = this.height; |
||||
|
this.context = canvas.getContext('2d'); |
||||
|
}, |
||||
|
|
||||
|
render: function () { |
||||
|
var duration = 1000; |
||||
|
var t = (performance.now() % duration) / duration; |
||||
|
|
||||
|
var radius = size / 2 * 0.3; |
||||
|
var outerRadius = size / 2 * 0.7 * t + radius; |
||||
|
var context = this.context; |
||||
|
|
||||
|
// draw outer circle
|
||||
|
context.clearRect(0, 0, this.width, this.height); |
||||
|
context.beginPath(); |
||||
|
context.arc(this.width / 2, this.height / 2, outerRadius, 0, Math.PI * 2); |
||||
|
context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')'; |
||||
|
context.fill(); |
||||
|
|
||||
|
// draw inner circle
|
||||
|
context.beginPath(); |
||||
|
context.arc(this.width / 2, this.height / 2, radius, 0, Math.PI * 2); |
||||
|
context.fillStyle = 'rgba(255, 100, 100, 1)'; |
||||
|
context.strokeStyle = 'white'; |
||||
|
context.lineWidth = 2 + 4 * (1 - t); |
||||
|
context.fill(); |
||||
|
context.stroke(); |
||||
|
|
||||
|
// update this image's data with data from the canvas
|
||||
|
this.data = context.getImageData(0, 0, this.width, this.height).data; |
||||
|
|
||||
|
// keep the map repainting
|
||||
|
map.triggerRepaint(); |
||||
|
|
||||
|
// return `true` to let the map know that the image was updated
|
||||
|
return true; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
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" |
||||
|
} |
||||
|
}); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
|
||||
|
function ajax_process() { |
||||
|
$.get("/info/" + $("input").val(), function (data) { |
||||
|
console.log(data); |
||||
|
$("button").text("Search"); |
||||
|
$("table").show(); |
||||
|
$("#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(',')[0])); |
||||
|
} |
||||
@ -0,0 +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"}})}))}function ajax_process(){$.get("/info/"+$("input").val(),(function(data){console.log(data),$("button").text("Search"),$("table").show(),$("#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(",")[0]))}$(document).ready((function(){$.get("/ip",(function(data){$("#ip_default").val(data),ajax_process()})),$("table").hide(),$("button").click((function(){$("button").text("Searching..."),$("table").hide(),ajax_process()}))})),mapboxgl.accessToken="pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg"; |
||||
@ -0,0 +1 @@ |
|||||
|
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><title>Dnomd343 - IP</title></head><script src="https://cdn.staticfile.org/jquery/1.11.0/jquery.min.js"></script><script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js"></script><link href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css" rel="stylesheet"><link href="assets/css/bulma.css" rel="stylesheet"><link href="assets/css/core.css" rel="stylesheet"><script src="assets/js/main.js"></script><style>body{margin:0;padding:0}#map{position:absolute;top:0;bottom:0;width:100%;z-index:-1090}</style><body><div class="hero is-fullheight is-app-grey mapbox-hero"><div id="main-hero" class="hero-body" style="padding:0"><div class="container has-text-centered"><div class="columns is-vcentered"><div class="column is-6 is-offset-6 has-text-centered is-subheader-caption"><div class="contact-page-form flex-card"><h3>Dnomd343 - IP</h3><p>Search your IP here.</p><div class="columns is-multiline"><div class="column is-12"><div class="field"><label ip="ip_default"></label><div class="control"><input type="text" class="input is-medium"></div></div></div><div class="column is-12"><div class="field"><div class="control"><button type="button" 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</td><td id="ip"></td></tr><tr><td>AS</td><td id="as"></td></tr><tr><td>City</td><td id="city"></td></tr><tr><td>Region</td><td id="region"></td></tr><tr><td>Country</td><td id="country"></td></tr><tr><td>Timezone</td><td id="timezone"></td></tr><tr><td>Location</td><td id="loc"></td></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></div></body></html> |
||||
Loading…
Reference in new issue