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

fix: auto adjust position, add animation

master
Dnomd343 3 years ago
parent
d172bb0452
commit
55cc049b35
6 changed files with 83 additions and 55 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      README.md
  2. 10
      assets/css/main.css
  3. 2
      assets/css/main.min.css
  4. 6
      assets/js/main.js
  5. 2
      assets/js/main.min.js
  6. 108
      index.html

10
README.md
View File

@ -299,6 +299,16 @@ Detail: 美国俄亥俄州哥伦布市DoD网络信息中心
数据库文件位于 `backend/qqwry.dat`，数据库更新脚本位于 `backend/qqwryUpdate.sh`，查询代码位于 `backend/qqwry.php`，数据解析服务位于 `backend/qqwryFormat/*` 数据库文件位于 `backend/qqwry.dat`，数据库更新脚本位于 `backend/qqwryUpdate.sh`，查询代码位于 `backend/qqwry.php`，数据解析服务位于 `backend/qqwryFormat/*`
Docker部署方式中，容器内已经预留了 `qqwry.dat` 的自动升级功能，每天00:00时会运行脚本拉取数据库更新。对于其他部署方式，可以配置 `crontab` 自动执行更新脚本，示例如下
```
# 打开crontab任务列表
shell> crontab -e
···
# 添加如下一行，表示每天00:00时自动运行指定脚本
0 0 * * * /var/www/echoIP/backend/qqwryUpdate.sh
```
## 许可证 ## 许可证
MIT ©2021 [@dnomd343](https://github.com/dnomd343) [@ShevonKuan](https://github.com/ShevonKuan) MIT ©2021 [@dnomd343](https://github.com/dnomd343) [@ShevonKuan](https://github.com/ShevonKuan)

10
assets/css/main.css
View File

@ -394,7 +394,8 @@ table td:not([align]) {
padding: .75rem padding: .75rem
} }
@media screen and (min-width:769px), /* @media screen and (min-width:769px), */
@media all and (orientation : landscape),
print { print {
.column.is-6 { .column.is-6 {
-webkit-box-flex: 0; -webkit-box-flex: 0;
@ -438,7 +439,8 @@ print {
align-items: center align-items: center
} }
@media screen and (min-width:769px), /* @media screen and (min-width:769px), */
@media all and (orientation : landscape),
print { print {
.columns:not(.is-desktop) { .columns:not(.is-desktop) {
display: -webkit-box; display: -webkit-box;
@ -828,11 +830,11 @@ body::-webkit-scrollbar-thumb {
} }
} }
@media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) { /* @media only screen and (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
.columns { .columns {
padding: 0 10% padding: 0 10%
} }
} } */
@font-face { @font-face {
font-family: slick; font-family: slick;

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

File diff suppressed because one or more lines are too long

6
assets/js/main.js
View File

@ -9,7 +9,7 @@ $(document).ready(function() {
$("input").val(getQuery("ip")); $("input").val(getQuery("ip"));
getInfo(); getInfo();
} }
$("table").hide(); $("#table").hide();
$("#share").hide(); $("#share").hide();
$("button").click(function() { $("button").click(function() {
$(this).css({ $(this).css({
@ -17,7 +17,7 @@ $(document).ready(function() {
'background-color': '' 'background-color': ''
}); });
$(this).text("Searching..."); $(this).text("Searching...");
$("table").hide(1000); $("#table").hide(500);
$("input").val(trim($("input").val())); $("input").val(trim($("input").val()));
if ($("input").val() == '' || checkIP($("input").val()) == "ok") { if ($("input").val() == '' || checkIP($("input").val()) == "ok") {
getInfo(); getInfo();
@ -118,7 +118,6 @@ function getInfo() {
$("input").val(data.ip); $("input").val(data.ip);
} }
$("button").text("Search"); $("button").text("Search");
$("table").show(1000);
$("#ip").text(data.ip); $("#ip").text(data.ip);
data.city = (data.city == null) ? "Unknow" : data.city; data.city = (data.city == null) ? "Unknow" : data.city;
data.region = (data.region == null) ? "Unknow" : data.region; data.region = (data.region == null) ? "Unknow" : data.region;
@ -149,6 +148,7 @@ function getInfo() {
$("#loc").html('<a href="' + earthUri + '" target="_blank" title="View on Google Earth">' + data.loc + '</a>'); $("#loc").html('<a href="' + earthUri + '" target="_blank" title="View on Google Earth">' + data.loc + '</a>');
draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1])); draw(parseFloat(data.loc.split(',')[0]), parseFloat(data.loc.split(',')[1]));
} }
$("#table").show(500);
}); });
} }

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

File diff suppressed because one or more lines are too long

108
index.html
View File

@ -48,6 +48,10 @@
color: #5165db; color: #5165db;
} }
.input {
background-color: rgba(255, 255, 255, 0.5);
}
.table { .table {
color: #282828; color: #282828;
} }
@ -76,14 +80,25 @@
.positioncontrol { .positioncontrol {
position: absolute; position: absolute;
left: calc(100vw*0.8 - 190px); left: calc(80vw - 180px);
transform: translate(-20%, 0);
} }
@media screen and (max-width: 600px) { @media screen and (max-width: 800px) {
.positioncontrol { .positioncontrol {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
transform: translate(0, 0);
}
}
@media all and (orientation : portrait) {
.positioncontrol {
position: absolute;
left: 0;
right: 0;
transform: translate(0, 0);
} }
} }
@ -112,7 +127,6 @@
#qrcode canvas { #qrcode canvas {
display: block; display: block;
} }
</style> </style>
<body> <body>
@ -127,7 +141,7 @@
<div class="column"> <div class="column">
<div class="field"> <div class="field">
<div class="control"> <div class="control">
<input type="text" placeholder="Search here." class="input is-medium" style="background-color: rgba(255, 255, 255, 0.5);"> <input type="text" placeholder="Search here." class="input is-medium">
</div> </div>
</div> </div>
</div> </div>
@ -139,48 +153,50 @@
</div> </div>
</div> </div>
</div> </div>
<table class="table" style="background-color: transparent;"> <div id="table">
<tr> <table class="table" style="background-color: transparent;">
<td>IP</td> <tr>
<td id="ip"></td> <td>IP</td>
</tr> <td id="ip"></td>
<tr> </tr>
<td>AS</td> <tr>
<td id="as"></td> <td>AS</td>
</tr> <td id="as"></td>
<tr> </tr>
<td>City</td> <tr>
<td id="city"></td> <td>City</td>
</tr> <td id="city"></td>
<tr> </tr>
<td>Region</td> <tr>
<td id="region"></td> <td>Region</td>
</tr> <td id="region"></td>
<tr> </tr>
<td>Country</td> <tr>
<td id="country"></td> <td>Country</td>
</tr> <td id="country"></td>
<tr> </tr>
<td>Timezone</td> <tr>
<td id="timezone"></td> <td>Timezone</td>
</tr> <td id="timezone"></td>
<tr> </tr>
<td>Location</td> <tr>
<td id="loc"></td> <td>Location</td>
</tr> <td id="loc"></td>
<tr> </tr>
<td>ISP</td> <tr>
<td id="isp"></td> <td>ISP</td>
</tr> <td id="isp"></td>
<tr> </tr>
<td>Scope</td> <tr>
<td id="scope"></td> <td>Scope</td>
</tr> <td id="scope"></td>
<tr> </tr>
<td>Detail</td> <tr>
<td id="detail"></td> <td>Detail</td>
</tr> <td id="detail"></td>
</table> </tr>
</table>
</div>
</div> </div>
</div> </div>
<div id="share"> <div id="share">

Write Preview
Loading…
Cancel
Save