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

feat: new frontend 

Merge pull request #2 from ShevonKuan/main
master
Dnomd343 4 years ago
committed by GitHub
parent
e68acf8039 cba7b2aa56
commit
1a47ff802f
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 244 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. 121
      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

121
assets/js/main.js
View File

@ -0,0 +1,121 @@
$(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