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

fix: frontend update

master
Dnomd343 3 years ago
parent
0d2b97ef56
commit
9319b571bb
4 changed files with 38 additions and 42 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. BIN
      assets/favicon.png
  2. 59
      assets/js/main.js
  3. 2
      assets/js/main.min.js
  4. 19
      index.html

BIN
assets/favicon.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

59
assets/js/main.js
View File

@ -1,22 +1,40 @@
$(document).ready(function () {
$.get("/ip", function (data) {
$(document).ready(function() {
$.get("/ip", function(data) {
$("#ip_default").val(data);
ajax_process();
getInfo();
});
$("table").hide();
$("button").click(function () {
$("button").click(function() {
$("button").text("Searching...");
$("table").hide();
ajax_process();
$("table").hide(1000);
getInfo();
});
});
function getInfo() {
$.get("/info/" + $("input").val(), function(data) {
console.log(data);
if (!$("input").val()) {
$("input").val(data.ip);
}
$("button").text("Search");
$("table").show(1000);
$("#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]));
});
}
mapboxgl.accessToken = 'pk.eyJ1Ijoic2hldm9ua3VhbiIsImEiOiJja20yMjlnNDYybGg2Mm5zNW40eTNnNnUwIn0.6xj6sgjWvdQgT_7OQUy_Jg';
function draw(x, y) {
var map = new mapboxgl.Map({
container: 'map',
@ -75,9 +93,7 @@ function draw(x, y) {
};
map.on('load', function () {
map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 });
map.addLayer({
"id": "points",
"type": "symbol",
@ -100,24 +116,3 @@ function draw(x, y) {
});
});
};
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]));
});
}

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

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

19
index.html
View File

@ -4,13 +4,16 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="shortcut icon" href="./assets/favicon.png">
<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/main.min.css" rel="stylesheet" />
<script src="assets/js/main.min.js"></script>
<style>
body {
margin: 0;
@ -24,6 +27,11 @@
width: 100%;
z-index: -1090;
}
#sub-title {
margin-top: 0px;
margin-bottom: 20px;
}
</style>
<body>
@ -33,16 +41,12 @@
<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>
<h3 id="sub-title">echoIP</h3>
<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">
<input type="text" placeholder="Search your IP here." class="input is-medium">
</div>
</div>
</div>
@ -110,10 +114,7 @@
</div>
<div id='map'></div>
</div>
</div>
</body>
</html>
Write Preview
Loading…
Cancel
Save