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

Merge branch 'main' of https://github.com/dnomd343/echoIP into main

master
Dnomd343 4 years ago
parent
d9f9aeab38 8c19aebe16
commit
f85ea98267
11 changed files with 245 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. BIN
      assets/fonts/text/nexa/Nexa Bold.otf
  4. BIN
      assets/fonts/text/nexa/Nexa Light.otf
  5. BIN
      assets/fonts/text/nexa/NexaBold.ttf
  6. BIN
      assets/fonts/text/nexa/NexaBold.woff
  7. BIN
      assets/fonts/text/nexa/NexaLight.ttf
  8. BIN
      assets/fonts/text/nexa/NexaLight.woff
  9. 123
      assets/js/main.js
  10. 1
      assets/js/main.min.js
  11. 187
      index.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

BIN
assets/fonts/text/nexa/Nexa Bold.otf
View File

Binary file not shown.

BIN
assets/fonts/text/nexa/Nexa Light.otf
View File

Binary file not shown.

BIN
assets/fonts/text/nexa/NexaBold.ttf
View File

Binary file not shown.

BIN
assets/fonts/text/nexa/NexaBold.woff
View File

Binary file not shown.

BIN
assets/fonts/text/nexa/NexaLight.ttf
View File

Binary file not shown.

BIN
assets/fonts/text/nexa/NexaLight.woff
View File

Binary file not shown.

123
assets/js/main.js
View File

@ -0,0 +1,123 @@
$(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(',')[1]));
});
}

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(",")[1]))}))}$(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='https://api.tiles.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />
<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>
Write Preview
Loading…
Cancel
Save