diff --git a/PP-binding/frontend/web/.idea/.gitignore b/PP-binding/frontend/web/.idea/.gitignore
new file mode 100644
index 0000000..ab1f416
--- /dev/null
+++ b/PP-binding/frontend/web/.idea/.gitignore
@@ -0,0 +1,10 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Ignored default folder with query files
+/queries/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/
diff --git a/PP-binding/frontend/web/binding-info.html b/PP-binding/frontend/web/binding-info.html
deleted file mode 100755
index a7f2dd9..0000000
--- a/PP-binding/frontend/web/binding-info.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>隐私保护-绑定关系统计</title>
-    <script src="./web/binding-info/script/backendInfo.js"></script>
-    <script src="./web/binding-info/script/useRealData.js"></script>
-    <script src="./web/binding-info/script/useTestData.js"></script>
-    <script src="./web/public/script/scrollButton.js"></script>
-    <link rel="stylesheet" href="./web/public/style/stickTableHeadOnTop.css">
-</head>
-
-<body>
-    <script src="./web/public/script/genUI.js"></script>
-    <script src="./web/binding-info/script/UIInfo.js"></script>
-    <script>
-        // useTestData(200)
-        useRealData()
-    </script>
-    <script src="./web/public/script/changeModifyUI.js"></script>
-    <script src="./web/public/script/changeHoverdBackgroundColor.js"></script>
-    <script src="./web/binding-info/script/CRUDBasicEle.js"></script>
-    <script src="./web/binding-info/script/fillingData.js"></script>
-    <script src="./web/binding-info/script/CRUD/delete.js"></script>
-    <script src="./web/binding-info/script/CRUD/insert.js"></script>
-    <script src="./web/binding-info/script/CRUD/modify.js"></script>
-    <script src="./web/binding-info/script/determineIfFieldValid.js"></script>
-</body>
-
-</html>
diff --git a/PP-binding/frontend/web/index.html b/PP-binding/frontend/web/index.html
new file mode 100644
index 0000000..60a1505
--- /dev/null
+++ b/PP-binding/frontend/web/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>平台绑定统计</title>
+    <link rel="stylesheet" href="./style/index.css">
+</head>
+<body>
+<div class="title-container">
+    <h1 class="title">平台绑定统计</h1>
+</div>
+
+<div class="main-container">
+    <div class="tools-container">
+        <button class="add-item-button">添加</button>
+        <input placeholder="输入关键字查询"/>
+        <div class="count">总共&nbsp;<span>210</span>&nbsp;条数据</div>
+    </div>
+    <div class="table-container">
+        <div class="table-header">
+            <div>基础工具类型</div>
+            <div>基础工具ID</div>
+            <div>绑定到</div>
+            <div>危险等级</div>
+            <div>用户名</div>
+            <div>密码</div>
+            <div>备注</div>
+            <div>绑定的其他平台</div>
+            <div>操作</div>
+        </div>
+
+        <div class="table-item"></div>
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/PP-binding/frontend/web/style/index.css b/PP-binding/frontend/web/style/index.css
new file mode 100644
index 0000000..06f2727
--- /dev/null
+++ b/PP-binding/frontend/web/style/index.css
@@ -0,0 +1,80 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    padding: 10px 40px;
+}
+
+.title-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+.title-container .title {
+    letter-spacing: 5px;
+}
+
+.tools-container {
+    display: flex;
+    justify-content: space-between;
+    align-content: center;
+    padding-top: 40px;
+    padding-bottom: 20px;
+    padding-left: 50px;
+    padding-right: 50px;
+}
+
+.tools-container .add-item-button {
+    width: 60px;
+    height: 40px;
+    background-color: #80c671;
+    border: none;
+    font-size: 18px;
+    font-weight: bold;
+    color: white;
+    border-radius: 5px;
+}
+
+.tools-container .add-item-button:hover {
+    cursor: pointer;
+}
+
+.tools-container input {
+    width: 40%;
+    height: 40px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 16px;
+    border: 1px solid black;
+    border-radius: 5px;
+}
+
+.tools-container input:focus {
+    outline: 2px solid #80c671;
+    border: 1px solid transparent;
+    border-radius: 5px;
+}
+
+.tools-container .count {
+    display: flex;
+    justify-content: center;
+    align-items: end;
+}
+
+.tools-container .count span {
+    color: blue;
+}
+
+.table-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+.table-header div {
+    width: 100%;
+    text-align: center;
+    font-size: 18px;
+}
\ No newline at end of file
diff --git a/PP-binding/frontend/web/tmp/binding-info.html b/PP-binding/frontend/web/tmp/binding-info.html
new file mode 100755
index 0000000..60ed8e8
--- /dev/null
+++ b/PP-binding/frontend/web/tmp/binding-info.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>隐私保护-绑定关系统计</title>
+    <script src="webinding-info/script/backendInfo.js"></script>
+    <script src="webinding-info/script/useRealData.js"></script>
+    <script src="webinding-info/script/useTestData.js"></script>
+    <script src="webublic/script/scrollButton.js"></script>
+    <link rel="stylesheet" href="webublic/style/stickTableHeadOnTop.css">
+</head>
+
+<body>
+    <script src="webublic/script/genUI.js"></script>
+    <script src="webinding-info/script/UIInfo.js"></script>
+    <script>
+        // useTestData(200)
+        useRealData()
+    </script>
+    <script src="webublic/script/changeModifyUI.js"></script>
+    <script src="webublic/script/changeHoverdBackgroundColor.js"></script>
+    <script src="webinding-info/script/CRUDBasicEle.js"></script>
+    <script src="webinding-info/script/fillingData.js"></script>
+    <script src="webinding-info/script/CRUD/delete.js"></script>
+    <script src="webinding-info/script/CRUD/insert.js"></script>
+    <script src="webinding-info/script/CRUD/modify.js"></script>
+    <script src="webinding-info/script/determineIfFieldValid.js"></script>
+</body>
+
+</html>
diff --git a/PP-binding/frontend/web/web/binding-info/script/CRUD/delete.js b/PP-binding/frontend/web/tmp/web/binding-info/script/CRUD/delete.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/CRUD/delete.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/CRUD/delete.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/CRUD/insert.js b/PP-binding/frontend/web/tmp/web/binding-info/script/CRUD/insert.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/CRUD/insert.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/CRUD/insert.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/CRUD/modify.js b/PP-binding/frontend/web/tmp/web/binding-info/script/CRUD/modify.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/CRUD/modify.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/CRUD/modify.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/CRUDBasicEle.js b/PP-binding/frontend/web/tmp/web/binding-info/script/CRUDBasicEle.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/CRUDBasicEle.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/CRUDBasicEle.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/UIInfo.js b/PP-binding/frontend/web/tmp/web/binding-info/script/UIInfo.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/UIInfo.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/UIInfo.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/backendInfo.js b/PP-binding/frontend/web/tmp/web/binding-info/script/backendInfo.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/backendInfo.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/backendInfo.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/determineIfFieldValid.js b/PP-binding/frontend/web/tmp/web/binding-info/script/determineIfFieldValid.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/determineIfFieldValid.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/determineIfFieldValid.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/fillingData.js b/PP-binding/frontend/web/tmp/web/binding-info/script/fillingData.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/fillingData.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/fillingData.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/useRealData.js b/PP-binding/frontend/web/tmp/web/binding-info/script/useRealData.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/useRealData.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/useRealData.js
diff --git a/PP-binding/frontend/web/web/binding-info/script/useTestData.js b/PP-binding/frontend/web/tmp/web/binding-info/script/useTestData.js
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/script/useTestData.js
rename to PP-binding/frontend/web/tmp/web/binding-info/script/useTestData.js
diff --git a/PP-binding/frontend/web/web/binding-info/style/index.css b/PP-binding/frontend/web/tmp/web/binding-info/style/index.css
similarity index 100%
rename from PP-binding/frontend/web/web/binding-info/style/index.css
rename to PP-binding/frontend/web/tmp/web/binding-info/style/index.css
diff --git a/PP-binding/frontend/web/web/leaked-info/UIInfo.js b/PP-binding/frontend/web/tmp/web/leaked-info/UIInfo.js
similarity index 100%
rename from PP-binding/frontend/web/web/leaked-info/UIInfo.js
rename to PP-binding/frontend/web/tmp/web/leaked-info/UIInfo.js
diff --git a/PP-binding/frontend/web/web/public/script/changeHoverdBackgroundColor.js b/PP-binding/frontend/web/tmp/web/public/script/changeHoverdBackgroundColor.js
similarity index 100%
rename from PP-binding/frontend/web/web/public/script/changeHoverdBackgroundColor.js
rename to PP-binding/frontend/web/tmp/web/public/script/changeHoverdBackgroundColor.js
diff --git a/PP-binding/frontend/web/web/public/script/changeModifyUI.js b/PP-binding/frontend/web/tmp/web/public/script/changeModifyUI.js
similarity index 100%
rename from PP-binding/frontend/web/web/public/script/changeModifyUI.js
rename to PP-binding/frontend/web/tmp/web/public/script/changeModifyUI.js
diff --git a/PP-binding/frontend/web/web/public/script/genUI.js b/PP-binding/frontend/web/tmp/web/public/script/genUI.js
similarity index 100%
rename from PP-binding/frontend/web/web/public/script/genUI.js
rename to PP-binding/frontend/web/tmp/web/public/script/genUI.js
diff --git a/PP-binding/frontend/web/web/public/script/scrollButton.js b/PP-binding/frontend/web/tmp/web/public/script/scrollButton.js
similarity index 100%
rename from PP-binding/frontend/web/web/public/script/scrollButton.js
rename to PP-binding/frontend/web/tmp/web/public/script/scrollButton.js
diff --git a/PP-binding/frontend/web/web/public/style/stickTableHeadOnTop.css b/PP-binding/frontend/web/tmp/web/public/style/stickTableHeadOnTop.css
similarity index 100%
rename from PP-binding/frontend/web/web/public/style/stickTableHeadOnTop.css
rename to PP-binding/frontend/web/tmp/web/public/style/stickTableHeadOnTop.css