1
1
hongwenjun 3 жил өмнө
parent
commit
4859311d24

+ 2 - 5
Dockerfile

@@ -7,13 +7,10 @@ RUN  apt update -y \
   && rm -rf /var/lib/apt/lists/*
 
 RUN  mkdir /app/templates -p  && cd /app \
-  && wget https://cdn.jsdelivr.net/npm/qqwry.ipdb/qqwry.ipdb   \
-  && wget https://raw.githubusercontent.com/hongwenjun/ip/main/app.py  \
-  && wget https://raw.githubusercontent.com/hongwenjun/ip/main/templates/hello.html \
-  && mv hello.html  templates/hello.html  \
-  && pip3 install Flask  ipip-ipdb  \
+  && pip3 install Flask  ipip-ipdb  html2text \
   && rm -rf /usr/share/python-wheels/*
 
+ADD  ./app  /app
 WORKDIR /app
 EXPOSE 5000/tcp
 

+ 1 - 1
Dockerfile.alpine

@@ -1,5 +1,5 @@
 FROM python:3.6.14-alpine3.14
-RUN  pip3 install requests Flask  ipip-ipdb
+RUN  pip3 install requests Flask  ipip-ipdb  html2text
 ADD  ./app  /app
 WORKDIR /app
 EXPOSE 5000/tcp

+ 2 - 3
app.py

@@ -12,8 +12,7 @@ def hello():
     ip = getip()
     ipaddr = iplocated(ip)
     if is_Mozilla():
-        return  render_template('hello.html',  ip=ip, ipaddr=ipaddr, city=getcity(ip)) + \
-            "<div class=\"label label-default\"  style=\"text-align:center;\">"  + request.headers["User-Agent"]  + "</div>"  
+        return  render_template('hello.html',  ip=ip, ipaddr=ipaddr, city=getcity(ip))
     else:
         return ip
 
@@ -91,7 +90,7 @@ def getmd():
     return render_template('getmd.html', passkey=make_passkey('262235.xyz'))
 
 if __name__ == '__main__':
-    #  app.run(host='0.0.0.0') 
+    # app.run(host='0.0.0.0') 
     app.run(host='0.0.0.0', debug=True, port=80) 
 
 # export FLASK_ENV=development   # 调试模式: 修改代码不用重启服务

+ 2 - 12
ips.py

@@ -2,25 +2,15 @@ import ipdb, ipaddress, requests, re, json
 from flask import Flask, request
 from socket import gethostbyname
 
-# load dynamic C library for map shift
 from ctypes import *
-# shift = cdll.LoadLibrary('./china_shift.so')
+# GPS火星坐标互转
+# from china_shift import *
 
 class Location(Structure):
     _fields_ = [
         ('lon', c_double),
         ('lat', c_double)]
 
-# shift.transformFromWGSToGCJ.argtypes = [Location]
-# shift.transformFromWGSToGCJ.restype = Location
-# shift.transformFromGCJToWGS.argtypes = [Location]
-# shift.transformFromGCJToWGS.restype = Location
-
-# shift.bd_encrypt.argtypes = [Location]
-# shift.bd_encrypt.restype = Location
-# shift.bd_decrypt.argtypes = [Location]
-# shift.bd_decrypt.restype = Location
-
 db = ipdb.BaseStation("qqwry.ipdb")
 
 def iplocated(ip):

+ 25 - 27
templates/getmd.html

@@ -1,45 +1,43 @@
-<!DOCTYPE html><html><head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<title>262235.xyz/ips | 批量ip查询地址</title>
+<!doctype html><html lang="zh-CN"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="keywords" content="批量网址转Markdown,开源WebAIP,开源IP定位,IP地址查询,极速批量IP地址查询,IP地址精确查询,IP精准定位,高精度IP定位,国外IP定位">
 <link rel="icon" href="/logo/favicon.png" type="image/png">
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
+<title>262235.xyz/getmd | 批量网址转Markdown</title>
 <style type="text/css">
-body { padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5;
-font-family: "PingFang SC", "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; }
-a, input, button { outline: none !important; }
-a:focus, a:hover, .btn-link:focus, .btn-link:hover { text-decoration: underline; text-underline-position: under; }
-.main { max-width: 950px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff;
-border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px;
-border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
--moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
-.label-site { font-size: 14px;  vertical-align: middle; margin-right: 6px; }
-.text { width: 100%; height: 150px; }
-.btn-code { padding: 6px 16px; }
-</style>
+  body { background-color: #f5f5f5;
+  font-family: "PingFang SC", "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; }
+  .main { max-width: 950px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff;
+  border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px;
+  border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
+  .f14 {font-size: 0.875em; /* 14px/16=0.875em */}
+  </style>
 </head>
 <body>
 {% include 'navbar.html' %}
 <div class="main">
 {% if urls %}
-<legend><h3><span class="label label-success label-site">262235.xyz/getmd </span> 批量网址转Markdown: <a class="label label-info label-site" href="/getmd/">返回输入网址</a></h3></legend>
-<textarea type="text" name ="urls" cols=120 rows=5 class="form-control text">{{ urls }}</textarea>
+<legend><h3><button type="button" class="btn btn-outline-success btn-sm">262235.xyz/getmd</button>  批量网址转Markdown: <a class="btn btn-warning btn-sm" href="/getmd/">返回输入网址</a></h3></legend>
+  <textarea type="text" name ="urls" cols=120 rows=5 class="form-control f14">{{ urls }}</textarea>
+
 {% else %}
 <form action="/getmd/" method="post">
-<legend><h3><span class="label label-success label-site">262235.xyz/getmd </span> 批量网址转Markdown: <a class="label label-warning label-site" href="/">返回主页</a></h3></legend>
-<textarea type="text" name ="urls" cols=120 rows=20 class="form-control text" placeholder="示例输入: # Pthon 爬虫WebAPI版: 批量网址转Markdown
+<legend><h3><button type="button" class="btn btn-outline-success btn-sm">262235.xyz/getmd</button>  批量网址转Markdown: <a class="btn btn-info btn-sm" href="/">返回主页</a></h3></legend>
+<textarea type="text" name ="urls" cols=120 rows=15 class="form-control f14" placeholder="示例输入: # Pthon 爬虫WebAPI版: 批量网址转Markdown
 https://262235.xyz/index.php/archives/584/"></textarea>
-<br>
-<h2 class="alert-success"><small>输入PASSKEY每次抓取5篇文章, PASSKEY:&nbsp;&nbsp;</small>{{ passkey }}</h2>
-<label for="inputPassword" class="sr-only">Password</label>
+
+<h3 ><button type="button" class="btn btn-outline-danger btn-sm">输入PASSKEY每次抓取5篇文章, PASSKEY:</button>&nbsp;&nbsp;{{ passkey }}</h3>
 <input type="text" id="inputPassword"  name='passkey' class="form-control" placeholder="PASSKEY" required>
 <br>
-  <button class="btn btn-lg btn-primary btn-block" type="submit">确认抓取Markdown</button>
+<button class="btn btn-primary" type="submit">确认抓取Markdown</button>
 </form>
 {%  endif  %}
 {% if texts %}
 <div class="alert-success"><h3 style="text-align:center;">getmd 抓取Markdown文本 </h3></div>
-<textarea type="text" name ="texts" cols=120 rows=30 class="form-control text">{{ texts }}</textarea>
+<textarea type="text" name ="texts" cols=120 rows=30 class="form-control f14">{{ texts }}</textarea>
 {%  endif  %}
-</div></body></html>
-
+</div>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>
+</body></html>

+ 47 - 48
templates/hello.html

@@ -1,49 +1,43 @@
-<!DOCTYPE html><html><head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<title>Hello,亲: 本WebAPI支持IP城市定位和域名查IP定位</title>
+<!doctype html><html lang="zh-CN"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="keywords" content="开源WebAIP,开源IP定位,IP地址查询,极速批量IP地址查询,IP地址精确查询,IP精准定位,高精度IP定位,国外IP定位">
 <link rel="icon" href="/logo/favicon.png" type="image/png">
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
+<title>Hello,亲: 本WebAPI支持IP城市定位和域名查IP定位</title>
 <style type="text/css">
-body { padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5;
+body { background-color: #f5f5f5;
 font-family: "PingFang SC", "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; }
-a, input, button { outline: none !important; }
-a:focus, a:hover, .btn-link:focus, .btn-link:hover { text-decoration: underline; text-underline-position: under; }
 .main { max-width: 950px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff;
 border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px;
 border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
-.label-site { font-size: 14px;  vertical-align: middle; margin-right: 6px; }
-.text { width: 100%; height: 150px; }
-.btn-code { padding: 6px 16px; }
-.div-a{ float:left;width:45%;} 
-.div-b{ float:right;width:50%;} 
-</style></head>
+.f14 {font-size: 0.875em; /* 14px/16=0.875em */}
+a {color: #666; text-decoration: none} a:hover {color: #45B6F7;text-decoration: none;} a:focus {outline: 0;}
+</style>
+</head>
 <body style="text-align:center;">
 
  {% include 'navbar.html' %}
 
-<div class="main">
+<div class="main center-block">
 {% if ip %}
-<div class="panel panel-danger">
-    <div class="panel-heading">
-      <h3 class="panel-title">Hello, 来自 {{ city }} 的亲:</h3>
-    </div>
-    <a href="https://262235.xyz/ip/maps/"> <img style="margin:5px" 
-        src="https://api.map.baidu.com/staticimage/v2?ak=tF8XaCqUG9ZjFR66lqqNXmLzeT24gtGF&mcode=666666&center=110,35&width=500&height=300&zoom=4 "/>
-        </a>
-  </div>
-  <div class="alert-success">
-    <h3>{{ ipaddr }}: <a href="https://262235.xyz/maps.php?city={{ city }}" class="label label-info label-site">查看地图 </a></h3> 
-</div>
+<button type="button" class="btn btn-outline-danger">Hello, 来自 {{ city }} 的亲:</button>
+<br>
+<a href="https://262235.xyz/ip/maps/"> <img style="margin:0px" 
+src="https://api.map.baidu.com/staticimage/v2?ak=tF8XaCqUG9ZjFR66lqqNXmLzeT24gtGF&mcode=666666&center=110,35&width=500&height=300&zoom=4 "/>
+</a><br>
+<h3 class="card-title"><button type="button" class="btn btn-outline-info btn-sm">当前IP地址: </button>
+    {{ ipaddr }} <a href="https://262235.xyz/maps.php?city={{ city }}" class="btn btn-primary btn-sm">查看地图</a> </h3>
+
 {% else %}
     <h1>Hello World!</h1>
 {%  endif  %}
 
-<div><span class="label label-success">IP/域名:</span> 
+<div><button type="button" class="btn btn-outline-danger btn-sm">填写IP/域名:</button>
 <input id="name" type="text">
-<input type="button" id="btn" value="提交" class="btn btn-primary btn-sm">
-<input type="button" id="json" value="获得json" class="btn btn-primary btn-sm"></div>
+<input type="button" id="btn" value="查询" class="btn btn-primary btn-sm">
+<input type="button" id="json" value="获得json" class="btn btn-info btn-sm"></div>
 
 <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script>
@@ -65,37 +59,42 @@ border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
         window.location.href = url + ip + '&coor=bd09ll'
     }
 </script>
-
+<br>
 <form action="/ips/" method="post">
 <div class="alert-warning">
-<h3> 批量ip查询地址: <input type="submit" value="点击查询"  class="btn btn-primary btn-sm" ></h3>
+<h5> 批量ip查询地址: <input type="submit" value="点击查询"  class="btn btn-primary btn-sm" ></h5>
 </div>
-<textarea type="text" name ="ips" cols=120 rows=8 class="form-control text"
+<textarea type="text" name ="ips" cols=120 rows=5 class="form-control f14"
 placeholder="输入多行包含ip地址的日志,例:
 http://192.168.1.189:5000/ips/
 172.67.158.52  cloudflare.com"></textarea>
 </form><br>
 
-<div class="div-a">
-<div class="panel panel-info">
-    <div class="panel-heading">
-      <h3 class="panel-title">命令行 curl 调用API:</h3>
+<div class="row">
+    <div class="col-sm-6">
+      <div class="card">
+        <div class="card-header text-white bg-secondary">命令行 curl 调用API:</div>
+        <div class="card-body f14">
+        <strong>curl -sL 262235.xyz/ip</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# 命令行 -L 参数能重定向 <br>
+        <strong>curl -sL 262235.xyz/ip/8.8.8.8</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# 查询自定义 IP 定位<br>
+        <strong>curl -sL 262235.xyz/ip/github.com</strong>&nbsp;&nbsp;# 按域名查 IP 定位    
+        </div>
+      </div>
     </div>
-<strong>curl -sL 262235.xyz/ip</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# 命令行 -L 参数能重定向 <br>
-<strong>curl -sL 262235.xyz/ip/8.8.8.8</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;# 查询自定义 IP 定位<br>
-<strong>curl -sL 262235.xyz/ip/github.com</strong>&nbsp;&nbsp;# 按域名查 IP 定位
-</div></div>
-
-<div class="div-b">
-<div class="panel panel-success">
-    <div class="panel-heading">
-      <h3 class="panel-title">本WebAPI支持IP城市定位和域名查IP定位</h3>
+    <div class="col-sm-6">
+      <div class="card">
+        <div class="card-header text-white bg-secondary">本WebAPI支持IP城市定位和域名查IP定位</div>
+        <div class="card-body f14">
+          <span class="badge rounded-pill bg-primary">github源码:</span>&nbsp;&nbsp;<a href="https://github.com/hongwenjun/ip">https://github.com/hongwenjun/ip</a><p>
+            <span class="badge rounded-pill bg-danger">docker镜像:</span>&nbsp;&nbsp;<a href="https://hub.docker.com/r/hongwenjun/ip">https://hub.docker.com/r/hongwenjun/ip</a><br>
+            <span class="badge rounded-pill bg-info text-dark">搭建WebAPI:</span>&nbsp;&nbsp;<a href="https://262235.xyz/index.php/archives/342/">Python网络开发简单的IP城市定位WebAPI</a>
+        </div>
+      </div>
     </div>
-    <span class="label label-success">github源码:</span>&nbsp;&nbsp;<a href="https://github.com/hongwenjun/ip">https://github.com/hongwenjun/ip</a><p>
-    <span class="label label-success">docker镜像:</span>&nbsp;&nbsp;<a href="https://hub.docker.com/r/hongwenjun/ip">https://hub.docker.com/r/hongwenjun/ip</a><br>
-    <span class="label label-success">搭建WebAPI:</span>&nbsp;&nbsp;<a href="https://262235.xyz/index.php/archives/342/">Python网络开发简单的IP城市定位WebAPI</a>
-</div></div>
+  </div>
 
 </div>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>
 </body></html>
 
+

+ 22 - 25
templates/ips.html

@@ -1,40 +1,37 @@
-<!DOCTYPE html><html><head>
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-<title>262235.xyz/ips | 批量ip查询地址</title>
+<!doctype html><html lang="zh-CN"><head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="keywords" content="开源WebAIP,开源IP定位,IP地址查询,极速批量IP地址查询,IP地址精确查询,IP精准定位,高精度IP定位,国外IP定位">
 <link rel="icon" href="/logo/favicon.png" type="image/png">
-<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" >
+<title>262235.xyz/ips | 批量ip查询地址</title>
 <style type="text/css">
-body { padding-top: 40px; padding-bottom: 40px; background-color: #f5f5f5;
-font-family: "PingFang SC", "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; }
-a, input, button { outline: none !important; }
-a:focus, a:hover, .btn-link:focus, .btn-link:hover { text-decoration: underline; text-underline-position: under; }
-.main { max-width: 950px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff;
-border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px;
-border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
--moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
-.label-site { font-size: 14px;  vertical-align: middle; margin-right: 6px; }
-.text { width: 100%; height: 150px; }
-.btn-code { padding: 6px 16px; }
-</style>
+  body { background-color: #f5f5f5;
+  font-family: "PingFang SC", "Helvetica Neue", "Helvetica", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; }
+  .main { max-width: 950px; padding: 19px 29px 29px; margin: 0 auto 20px; background-color: #fff;
+  border: 1px solid #e5e5e5; -webkit-border-radius: 5px; -moz-border-radius: 5px;
+  border-radius: 5px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
+  .f14 {font-size: 0.875em; /* 14px/16=0.875em */}
+  </style>
 </head>
 <body>
-
-  {% include 'navbar.html' %}
-
+{% include 'navbar.html' %}
 <div class="main">
 <form action="/ips/" method="post">
   <fieldset>
 {% if ips %}
-  <legend><h3><span class="label label-success label-site">262235.xyz/ips </span> 批量ip查询地址: <a class="label label-warning label-site" href="/ips/">重新查询</a></h3></legend>
-  <textarea type="text" name ="ips" cols=120 rows=40 class="form-control text">{{ ips }}</textarea>
+  <legend><h3><button type="button" class="btn btn-outline-success btn-sm">262235.xyz/ips</button>  批量ip查询地址: <a class="btn btn-warning btn-sm" href="/ips/">重新查询</a></h3></legend>
+  <textarea type="text" name ="ips" cols=120 rows=25 class="form-control f14">{{ ips }}</textarea>
 {% else %}
-  <legend><h3><span class="label label-success label-site">262235.xyz/ips </span> 批量ip查询地址:  <a class="label label-info label-site" href="/">返回主页</a></h3></legend>
-  <textarea type="text" name ="ips" cols=120 rows=20 class="form-control text" placeholder="输入多行包含ip地址的日志,例:
+  <legend><h3><button type="button" class="btn btn-outline-success btn-sm">262235.xyz/ips</button>  批量ip查询地址: <a class="btn btn-info btn-sm" href="/">返回主页</a></h3></legend>
+  <textarea type="text" name ="ips" cols=120 rows=15 class="form-control f14" placeholder="输入多行包含ip地址的日志,例:
 http://192.168.1.189:5000/ips/
 172.67.158.52  cloudflare.com"></textarea>
-  <br><input type="submit" value="点击查询"  class="btn btn-primary btn-code" >
+  <br><input type="submit" value="点击查询"  class="btn btn-primary btn-sm" >
 {%  endif  %}
   </fieldset>
   </form>
-</div></body></html>
+</div>
+<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" ></script>
+</body></html>

+ 2 - 1
templates/maps.html

@@ -30,7 +30,8 @@ map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
 map.addControl(new BMap.NavigationControl());    
 map.addControl(new BMap.ScaleControl());    
 map.addControl(new BMap.OverviewMapControl());    
-map.addControl(new BMap.MapTypeControl());    
+map.addControl(new BMap.MapTypeControl());
+map.addOverlay(new BMap.Marker(point));
 </script>
 {{ bdgps[3] }}
 </body>  

+ 41 - 38
templates/navbar.html

@@ -1,39 +1,42 @@
-<nav class="navbar navbar-inverse navbar-fixed-top">
-  <div class="container">
-  <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
-      <span class="sr-only">Toggle navigation</span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      <span class="icon-bar"></span>
-      </button>
-      <a class="navbar-brand" href="https://262235.xyz/ip/">Python Flask WebAPI</a>
-  </div>
-  <div id="navbar" class="collapse navbar-collapse">
-      <ul class="nav navbar-nav">
-      <li class="active"><a href="/">首页</a></li>
-      <li><a href="https://github.com/hongwenjun/ip">github源码</a></li>
-      <li><a href="https://hub.docker.com/r/hongwenjun/ip">docker镜像</a></li>
-      <li><a href="https://262235.xyz/index.php/search/webapi/">搭建WebAPI参考文章</a></li>
-      
-      <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">在线工具箱<span class="caret"></span></a>
-              <ul class="dropdown-menu">
-              <li><a href="https://262235.xyz/bs/">Bootstrap theme</a></li>
-              <li><a href="https://www.262235.xyz/index.php/246.html">编程中文文档</a></li>
-              <li><a href="https://262235.xyz/linux-command/">Linux 命令列表</a></li>
-              <li><a href="https://262235.xyz/ip/">IP定位和地图</a></li>
-              <li><a href="https://262235.xyz/ips/">批量IP查询</a></li>
-              <li><a href="https://262235.xyz/getmd/">批量网址转Markdown</a></li>
-              <li><a href="https://tool.lu/markdown/">Markdown编辑器</a></li>
-              
-             
-              </ul>
-          </li>
-      </ul>
-  </div><!--/.nav-collapse -->
-  </div>
-</nav>
+<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
+<div class="container ">
+<!-- Brand/logo -->
+<a class="navbar-brand" href="https://262235.xyz/ip/">Python Flask WebAPI</a>
 
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>  
+<!-- 导航栏 在手机显示折叠按钮 -->
+<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDarkDropdown" aria-controls="navbarNavDarkDropdown" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+</button>
+<div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
+    
+<!-- Links -->
+<ul class="navbar-nav me-auto">
+    <li class="nav-item"><a class="nav-link text-truncate" href="https://github.com/hongwenjun/ip">github源码</a></li>
+    <li class="nav-item"><a class="nav-link text-truncate" href="https://hub.docker.com/r/hongwenjun/ip">docker镜像</a></li>
+    <li class="nav-item "><a class="nav-link text-truncate" href="https://262235.xyz/index.php/search/webapi/">搭建WebAPI参考文章</a></li>
+
+    <!-- Dropdown -->
+    <li class="nav-item dropdown">
+    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-bs-toggle="dropdown">
+        在线工具箱
+    </a>
+    <div class="dropdown-menu">
+        <a class="dropdown-item" href="https://262235.xyz/bs/">Bootstrap theme</a>
+        <a class="dropdown-item" href="https://www.runoob.com/bootstrap5/bootstrap5-tutorial.html">Bootstrap5 教程</a>
+        <a class="dropdown-item" href="https://www.262235.xyz/index.php/246.html">编程中文文档</a>
+        <a class="dropdown-item" href="https://262235.xyz/linux-command/">Linux 命令列表</a>
+        <a class="dropdown-item" href="/ip/">IP定位和地图</a>
+        <a class="dropdown-item" href="/ips/">批量IP查询</a>
+        <a class="dropdown-item" href="/getmd/">批量网址转Markdown</a>
+        <a class="dropdown-item" href="https://tool.lu/markdown/">Markdown编辑器</a>
+    </div>
+    </li>
+</ul>
+
+<!-- 导航栏的表单 -->
+<form method="post" class="d-flex" action="https://262235.xyz/">
+    <input class="form-control me-2" name="s" type="text" placeholder="Search">
+    <button class="btn btn-primary"  type="submit">Search</button>      
+</form>
+</div></div>
+</nav>