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

wow

pull/1/head
shevonkuan 4 years ago
parent
e68acf8039
commit
2c5be66024
6 changed files with 243 additions and 76 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      assets/css/main.css
  2. 1
      assets/css/main.min.css
  3. 120
      assets/js/main.js
  4. 1
      assets/js/main.min.js
  5. 187
      index.html
  6. 1
      index.min.html

9
assets/css/main.css
View File

File diff suppressed because one or more lines are too long

1
assets/css/main.min.css
View File

File diff suppressed because one or more lines are too long

120
assets/js/main.js
View File

@ -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]));
}

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

@ -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";

187
index.html
View File

@ -1,84 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dnomd343 - IP</title>
<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>
$(document).ready(function(){
$.get("/ip",function(data){
$("input").val(data);
});
$("table").hide();
$("button").click(function(){
$("p").text("Please Wait...");
$("table").hide();
$.get("/info/"+$("input").val(),function(data){
console.log(data);
$("p").text("");
$("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);
});
});
});
</script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.js'></script>
<link href="assets/css/main.min.css" rel="stylesheet" />
<script src="assets/js/main.min.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</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>
</div>
<h2>IP info</h2>
<input type="text">
<button>Submit</button>
<p></p>
<table border="1">
<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>
</body>
</html>
</html>

1
index.min.html
View File

@ -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>
Write Preview
Loading…
Cancel
Save