更新（20191109）

2019-11-09 21:11:12 +08:00
parent c852933c6b
commit dcd6b5c7b3
26 changed files with 2666 additions and 274 deletions
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@

 ### 自定义

-[下载](https://github.com/Frost-ZX/frost-navigation/archive/master.zip) 后打开 `docs/index.html` 和 `docs/js/script.js` 根据需要进行修改。
+[下载](https://github.com/Frost-ZX/frost-navigation/archive/master.zip) 后打开 `docs/index.html` 和 `docs/js/script.min.js`（完整文件：`dev/js/script.js`） 根据需要进行修改。

 ## 第三方资源

@@ -39,7 +39,9 @@

 ## To Do

- [x] 搜索框
+- [x] 搜索框（搜索引擎）
+- [x] 搜索框（网址）
+- [x] 小工具
 - [ ] 加入链接图标
 - [ ] 加入更多的链接
 - [ ] 美化
--- a/dev/css/all.css
+++ b/dev/css/all.css
@@ -0,0 +1,103 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+/* 背景 */
+
+.page-background {
+    z-index: -100;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-attachment: fixed;
+    background-image: url(../img/Unsplash_V6TWE6h8gyg_Blur.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+/*
+.page-background:after {
+    content: "";
+    z-index: -90;
+    position: inherit;
+    top: inherit;
+    left: inherit;
+    width: inherit;
+    height: inherit;
+    background: inherit;
+    filter: blur(4px);
+}
+*/
+
+/* 滚动条 */
+
+::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #CCC;
+    border-radius: 0;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: #03A9F4;
+}
+::-webkit-scrollbar-track {
+    background-color: #FFF;
+    border-radius: 0;
+}
+
+/* 选中 */
+
+::selection {
+    background:#03A9F4;
+    color:#FFF;
+}
+::-moz-selection {
+    background:#03A9F4;
+    color:#FFF;
+}
+::-webkit-selection {
+    background:#03A9F4;
+    color:#FFF;
+}
+
+/* 动画 */
+
+@keyframes spinner {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+@keyframes FloatingBarSlide {
+    from {
+        bottom: -50px;
+    }
+}
+@keyframes ToTopAnimation {
+    0% {
+    }
+    50% {
+        right: 25px;
+        bottom: 25px;
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+        font-size: 20px;
+        color: #FFF;
+    }
+    100% {
+        color: #2196F3;
+        transform: rotate(360deg);
+    }
+}
--- a/docs/css/style.css
+++ b/docs/css/style.css
@@ -13,16 +13,10 @@
    border-radius: 0;
    box-sizing: border-box;
    font-weight: normal;
-    margin: 0;
    outline: none;
-    padding: 0;
    user-select: none;
 }

-html {
-    scroll-behavior: smooth;
-}
-
 body {
    background-color: #999;
    color: #000;
@@ -211,51 +205,6 @@ footer p {
    width: 1.5em;
 }

-/* 背景 */
-
-.page-background {
-    z-index: -100;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-attachment: fixed;
-    background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-.page-background:after {
-    content: "";
-    z-index: -90;
-    position: inherit;
-    top: inherit;
-    left: inherit;
-    width: inherit;
-    height: inherit;
-    background: inherit;
-    filter: blur(4px);
-}
-
-/* 滚动条 */
-
-::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #CCC;
-    border-radius: 0;
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: #03A9F4;
-}
-::-webkit-scrollbar-track {
-    background-color: #FFF;
-    border-radius: 0;
-}
-
 /* 工具面板 */

 .tool-panel {
@@ -548,34 +497,3 @@ main section li a:not(.back) {
 .floating-bar-totop {
    margin-left: 5px;
 }
-
-/* 选中 */
-
-::selection {
-    background:#03A9F4;
-    color:#FFF;
-}
-::-moz-selection {
-    background:#03A9F4;
-    color:#FFF;
-}
-::-webkit-selection {
-    background:#03A9F4;
-    color:#FFF;
-}
-
-/* 动画 */
-
-@keyframes spinner {
-    from {
-        transform: rotate(0deg);
-    }
-    to {
-        transform: rotate(360deg);
-    }
-}
-@keyframes FloatingBarSlide {
-    from {
-        bottom: -50px;
-    }
-}
--- a/dev/css/slinky.css
+++ b/dev/css/slinky.css
@@ -0,0 +1,109 @@
+@charset "UTF-8";
+
+.slinky-menu {
+    overflow: hidden;
+    transform: translateZ(0);
+}
+
+.slinky-menu > ul {
+    left: 0;
+    position: relative;
+    transform: translateZ(0);
+}
+
+.slinky-menu ul,
+.slinky-menu li {
+    list-style: none;
+    margin: 0;
+}
+
+.slinky-menu ul {
+    width: 100%;
+}
+
+.slinky-menu a {
+    align-items: center;
+    display: flex;
+}
+
+.slinky-menu a span {
+    flex: 1;
+    line-height: 1.4;
+}
+
+.slinky-menu li ul {
+    display: none;
+    left: 100%;
+    position: absolute;
+    top: 0;
+}
+
+.slinky-menu .header {
+    display: flex;
+}
+
+.slinky-menu .header .title {
+    flex: 1;
+    line-height: 1.4;
+    margin: 0;
+    order: 1;
+}
+
+.slinky-theme-default {
+    width: 100%;
+    background: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+}
+
+.slinky-theme-default .title {
+    color: #333;
+    padding: 1em;
+}
+
+.slinky-theme-default li {
+    line-height: 1;
+}
+
+.slinky-theme-default a:not(.back) {
+    color: #333;
+    padding: 1em;
+}
+
+.slinky-theme-default a:not(.back):hover {
+    background: rgba(90, 200, 250, 0.25);
+}
+
+.slinky-theme-default a:not(.back):active {
+    background: rgba(90, 200, 250, 0.5);
+}
+
+.slinky-theme-default .next::after,
+.slinky-theme-default .back::before {
+    background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+ICAgIDxwYXRoIGQ9Ik0xMi4yMTkgMi4yODFMMTAuNzggMy43MiAxOC4wNjIgMTFIMnYyaDE2LjA2M2wtNy4yODIgNy4yODEgMS40MzggMS40MzggOS05IC42ODctLjcxOS0uNjg3LS43MTl6IiAvPjwvc3ZnPg==) center no-repeat;
+    background-size: 1em;
+    content: '';
+    height: 1em;
+    opacity: 0.25;
+    transition: 200ms;
+    width: 1em;
+}
+
+.slinky-theme-default .next::after {
+    margin-left: 1em;
+}
+
+.slinky-theme-default .back::before {
+    padding: 1em;
+    transform: scaleX(-1);
+}
+
+.slinky-theme-default .next:hover::after,
+.slinky-theme-default .back:hover::before {
+    opacity: 0.75;
+}
+
+.slinky-theme-default .next:active::after,
+.slinky-theme-default .back:active::before {
+    opacity: 1;
+}
--- a/dev/css/tool.css
+++ b/dev/css/tool.css
@@ -0,0 +1,215 @@
+@charset "UTF-8";
+
+body {
+    padding: 20px 0 50px 0;
+    background-color: #999;
+    scroll-behavior: smooth;
+}
+
+/* 主要 */
+
+.main {
+    margin: 0 auto;
+    width: 90%;
+    max-width: 450px;
+}
+.main > div {
+    margin: 20px 0;
+    padding: 15px;
+    box-sizing: border-box;
+    width: 100%;
+    border-radius: 5px;
+    background-color: #FFF;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
+}
+.main > div header {
+    margin-bottom: 10px;
+    text-align: center;
+    font-size: 20px;
+    font-weight: bold;
+    user-select: none;
+}
+.main > div input:focus {
+    outline: none;
+}
+.main > div textarea {
+    padding: 5px;
+    box-sizing: border-box;
+    width: 100%;
+    border: 1px solid #03A9F4;
+    box-shadow: 0 0 5px rgba(3, 169, 244, 0.2);
+    font-size: 14px;
+}
+.main > div textarea:focus {
+    outline: none;
+}
+.tool-button {
+    display: inline-block;
+    user-select: none;
+    padding: 5px 10px;
+    background-color: #03A9F4;
+    text-align: center;
+    font-size: 14px;
+    color: #FFF;
+    border-radius: 5px;
+    box-shadow: 2px 2px 5px rgba(3, 169, 244, 0.4);
+    transition: background 0.2s;
+}
+.tool-button:hover {
+    background-color: #2196F3;
+}
+
+/* 索引 */
+
+.tool-nav ul li {
+    display: inline-block;
+    list-style: none;
+}
+.tool-nav ul li a {
+    display: block;
+    float: left;
+    padding: 5px 9px;
+    border-radius: 5px;
+    background-color: #4CAF50;
+    text-decoration: none;
+    font-size: 14px;
+    color: #FFF;
+    transition: background 0.2s;
+}
+.tool-nav ul li a:hover {
+    background-color: #8BC34A;
+}
+.tool-nav-link {
+    margin: 0 auto;
+    box-sizing: border-box;
+    width: 100%;
+}
+
+/* Unix 时间戳转换 */
+#tool-unixtime > div {
+    user-select: none;
+}
+#tool-unixtime > div > span {
+    display: inline-block;
+    width: 100px;
+    text-align: right;
+    font-size: 14px;
+    font-weight: bold;
+}
+#tool-unixtime > p {
+    text-align: center;
+    font-size: 16px;
+    font-weight: bold;
+}
+#tool-unixtime input[type="text"] {
+    width: 160px;
+    border: 1px solid #03A9F4;
+    font-size: 14px;
+}
+#tool-unixtime label {
+    font-size: 14px;
+}
+#tool-unixtime .tool-button {
+    margin: 5px 5px 2px 0;
+}
+
+/* 计算下载用时 */
+#tool-downloadtime {
+    
+}
+#tool-downloadtime-input {
+    padding: 0 0 10px 0;
+    border-bottom: 1px solid #EEE;
+}
+#tool-downloadtime-output {
+    padding: 10px 0;
+    border-bottom: 1px solid #EEE;
+}
+#tool-downloadtime .tool-button {
+    margin: 10px 5px 10px 0;
+}
+#tool-downloadtime-help {
+    padding: 10px 0 0 0;
+    border-top: 1px solid #EEE;
+    font-size: 14px;
+}
+
+/* 简易计算 */
+
+#tool-calculate textarea {
+    resize: vertical;
+    font-size: 16px;
+}
+#tool-calculate-tofixed {
+    width: 20px;
+    font-size: 14px;
+}
+#tool-calculate .tool-button {
+    margin: 5px 5px 2px 0;
+}
+
+/* 生成批量下载链接 */
+
+#tool-genlink hr {
+    height: 0;
+    border: 0.5px solid #EEE;
+}
+#tool-genlink-link input {
+    margin-bottom: 10px;
+    padding: 0 2px;
+    height: 20px;
+    width: 80%;
+    border: 1px solid #03A9F4;
+}
+#tool-genlink-settings {
+    user-select: none;
+    font-size: 14px;
+}
+#tool-genlink-settings > div {
+    margin: 5px 0;
+}
+#tool-genlink-settings input[type="text"] {
+    width: 25px;
+    font-size: 14px;
+}
+#tool-genlink .tool-button {
+    margin: 10px 5px 10px 0;
+}
+#tool-genlink textarea {
+    resize: vertical;
+    font-size: 14px;
+}
+
+/* 运行 JavaScript */
+
+#tool-runjs textarea {
+    resize: vertical;
+    font-family: monospace;
+    font-size: 14px;
+}
+#tool-runjs .tool-button {
+    margin: 5px 5px 0 0;
+}
+
+/* 返回顶部 */
+
+.to-top {
+    position: fixed;
+    right: 20px;
+    bottom: 20px;
+    height: 50px;
+    width: 50px;
+    border-radius: 50%;
+    box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.1);
+    background-color: #FFF;
+    text-align: center;
+    line-height: 50px;
+    font-family: monospace;
+    font-size: 20px;
+    color: #2196F3;
+    user-select: none;
+    transition: all 0.5s;
+}
+.to-top:hover {
+    animation: ToTopAnimation 0.5s ease-in-out;
+}
--- a/dev/favicon.ico
+++ b/dev/favicon.ico
--- a/dev/files/heart.svg
+++ b/dev/files/heart.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ff2d55">
+    <path d="M16.398 4C14.602 4 13 4.898 12 6.3 11 4.899 9.398 4 7.602 4A5.591 5.591 0 0 0 2 9.602C2 14 12 22 12 22s10-8 10-12.398C22 6.5 19.5 4 16.398 4z"/>
+</svg>
--- a/dev/files/slinky.svg
+++ b/dev/files/slinky.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100">
+	<rect fill="#6BA73C" width="100" height="10"/>
+	<rect fill="#ECAE3C" y="18" width="100" height="10"/>
+	<rect fill="#DB752D" y="36" width="100" height="10"/>
+	<rect fill="#C43935" y="54" width="100" height="10"/>
+	<rect fill="#742F81" y="72" width="100" height="10"/>
+	<rect fill="#3E82CC" y="90" width="100" height="10"/>
+</svg>
--- a/dev/img/Unsplash_V6TWE6h8gyg.jpg
+++ b/dev/img/Unsplash_V6TWE6h8gyg.jpg
--- a/dev/img/Unsplash_V6TWE6h8gyg_Blur.jpg
+++ b/dev/img/Unsplash_V6TWE6h8gyg_Blur.jpg
--- a/dev/img/Unsplash_V6TWE6h8gyg_Original.jpg
+++ b/dev/img/Unsplash_V6TWE6h8gyg_Original.jpg
--- a/dev/index.html
+++ b/dev/index.html
--- a/docs/js/script.js
+++ b/docs/js/script.js
@@ -1,8 +1,50 @@
-/* ------------------------------------------- */
-/* 查找字符 tChar 在 str 中第 num 次出现的位置 */
-/* ------------------------------------------- */
+/* ---- */
+/* 变量 */
+/* ---- */
+
+// Slinky 插件的设置 //
+
+var SlinkyOption = {
+    title: true,
+    speed: 200
+};
+
+var ListID = "#list_";                                                         // 列表 ID 前缀
+var ListCount = 0;
+var ListCountMax = 17;                                                         // 列表总数
+var FullsSreenText = document.getElementsByClassName("fullscreen-text")[0];    // 全屏文字
+
+// main 中的 A 标签的对象的集合（链接列表）//
+
+var LinkList = document.getElementsByTagName("main")[0].getElementsByTagName("a");
+
+// 搜索面板 //
+
+var SearchMode = 1;
+var SearchPanel = document.getElementsByClassName("search-panel")[0];          // 搜索面板
+var SearchInput = document.getElementsByClassName("search-input")[0];          // 搜索输入框
+var SearchResultTitle = document.getElementById("search-result-title");        // 搜索结果（标题）
+var SearchResultLink = document.getElementById("search-result-link");          // 搜索结果（链接）
+var SearchResultItem = "";
+
+// 搜索引擎 //
+
+var SearchEngineBaidu = document.getElementById("search-engine-baidu");        // 百度
+var SearchEngineBing = document.getElementById("search-engine-bing");          // Bing
+var SearchEngineGoogle = document.getElementById("search-engine-google");      // Google
+var SearchEnginebilibili = document.getElementById("search-engine-bilibili");  // bilibili
+
+// 工具面板 //
+
+var ToolPanel = document.getElementsByClassName("tool-panel")[0];   
+
+
+/* ---- */
+/* 函数 */
+/* ---- */
+
+// 查找字符 tChar 在 str 中第 num 次出现的位置 //

-/* 暂不使用
 function findChar(str, tChar, num) {
    var charPos = str.indexOf(tChar);
    num = num - 1;
@@ -13,44 +55,8 @@ function findChar(str, tChar, num) {
    }
    return charPos;
 }
-*/

-/* -------- */
-/* 加载列表 */
-/* -------- */
-
-// Slinky 插件的 Option //
-var SlinkyOption = {
-    title: true,
-    speed: 200
-};
-var ListID = "#list_";                                                      // 列表 ID 前缀
-var ListCount = 0;
-var ListCountMax = 17;                                                      // 列表总数
-var FullsSreenText = document.getElementsByClassName("fullscreen-text")[0]; // 全屏文字
-function loadList() {
-    ListCount = ListCount + 1;
-    ListID = "#list_" + ListCount;
-    $(ListID).slinky(SlinkyOption);
-    FullsSreenText.innerText = "已加载 " + ListCount + " 个分类";           // 全屏文字
-    // 加载完毕 //
-    if (ListCount == ListCountMax) {
-        clearInterval(I_LoadList);                                          // 停止定时执行
-        FullsSreenText.innerText = "加载完毕";                              // 全屏文字
-        setTarget();                                                        // 设置 target
-        displayList();                                                      // 显示列表
-    }
-}
-
-/* --------------------------------------- */
-/* main 中的 A 标签的对象的集合（链接列表）*/
-/* --------------------------------------- */
-
-var LinkList = document.getElementsByTagName("main")[0].getElementsByTagName("a");
-
-/* ---------------------- */
-/* 设置 target = "_blank" */
-/* ---------------------- */
+// 设置 target = "_blank" //

 function setTarget() {
    for (var i = 0; i < LinkList.length; i++) {
@@ -66,9 +72,7 @@ function setTarget() {
    }
 }

-/* -------- */
-/* 显示列表 */
-/* -------- */
+// 显示列表 //

 function displayList() {
    document.getElementsByTagName("main")[0].style.opacity = "1";
@@ -76,28 +80,31 @@ function displayList() {
    setTimeout("document.getElementsByClassName('fullscreen-text')[0].style.display = 'none';", 1000);
 }

-/* ----------------------- */
-/* 加载列表，间隔 100 毫秒 */
-/* ----------------------- */
+// 加载列表 //

-var I_LoadList = setInterval("loadList()", 100);
+function loadList() {
+    ListCount = ListCount + 1;
+    ListID = "#list_" + ListCount;
+    $(ListID).slinky(SlinkyOption);
+    FullsSreenText.innerText = "已加载 " + ListCount + " 个分类";              // 全屏文字
+    // 加载完毕 //
+    if (ListCount == ListCountMax) {
+        clearInterval(I_LoadList);                                             // 停止定时执行
+        FullsSreenText.innerText = "加载完毕";                                 // 全屏文字
+        setTarget();                                                           // 设置 target
+        displayList();                                                         // 显示列表
+    }
+}
+var I_LoadList = setInterval("loadList()", 100);                               // 加载列表，间隔 100 毫秒

-/* -------- */
-/* 搜索面板 */
-/* -------- */
+// 搜索面板 //

-var SearchMode = 1;
-var SearchPanel = document.getElementsByClassName("search-panel")[0];   // 搜索面板
-var SearchInput = document.getElementsByClassName("search-input")[0];   // 搜索输入框
-var SearchResultTitle = document.getElementById("search-result-title"); // 搜索结果（标题）
-var SearchResultLink = document.getElementById("search-result-link");   // 搜索结果（链接）
-var SearchResultItem = "";
 function searchLink() {
-    var LinkListCount = LinkList.length;                                // 循环次数
-    var SearchWord = SearchInput.value.toLowerCase();                   // 搜索关键词
+    var LinkListCount = LinkList.length;                                       // 循环次数
+    var SearchWord = SearchInput.value.toLowerCase();                          // 搜索关键词
    if (SearchMode == 1 && SearchWord != "") {
-        SearchResultTitle.innerHTML = "";                               // 清空搜索结果（标题）
-        SearchResultLink.innerHTML = "";                                // 清空搜索结果（链接）
+        SearchResultTitle.innerHTML = "";                                      // 清空搜索结果（标题）
+        SearchResultLink.innerHTML = "";                                       // 清空搜索结果（链接）
        for (var i = 0; i < LinkListCount; i++) {
            // 排除 href 是 # 的元素 //
            if (LinkList[i].href.endsWith("#") == false) {
@@ -105,11 +112,11 @@ function searchLink() {
                if (LinkList[i].innerText.toLowerCase().indexOf(SearchWord) != -1) {
                    // 匹配标题 //
                    SearchResultItem = LinkList[i].cloneNode(true);
-                    SearchResultTitle.appendChild(SearchResultItem); // 复制元素
+                    SearchResultTitle.appendChild(SearchResultItem);           // 复制元素
                } else if (LinkList[i].href.indexOf(SearchWord) != -1) {
                    // 匹配链接 //
                    SearchResultItem = LinkList[i].cloneNode(true);
-                    SearchResultLink.appendChild(SearchResultItem);  // 复制元素
+                    SearchResultLink.appendChild(SearchResultItem);            // 复制元素
                }
            }
        }
@@ -117,42 +124,60 @@ function searchLink() {
        SearchResultTitle.innerHTML = "";
        SearchResultLink.innerHTML = "未输入关键词";
    } else if (SearchMode == 2) {
-        SearchInput.value = "";                       // 清空输入框
-        SearchResultTitle.innerHTML = "";             // 清空搜索结果（标题）
-        SearchResultLink.innerHTML = "";              // 清空搜索结果（链接）
-        SearchPanel.style.visibility = "hidden";      // 隐藏搜索面板
+        SearchInput.value = "";                                                // 清空输入框
+        SearchResultTitle.innerHTML = "";                                      // 清空搜索结果（标题）
+        SearchResultLink.innerHTML = "";                                       // 清空搜索结果（链接）
+        SearchPanel.style.visibility = "hidden";                               // 隐藏搜索面板
    } else {
        SearchResultTitle.innerHTML = "";
        SearchResultLink.innerHTML = "异常";
    }
 }

-/* -------- */
-/* 搜索引擎 */
-/* -------- */
+// 搜索引擎 //

 function searchWeb() {
-    var GetSearchWord = document.getElementById("search-engine-input");                      // 关键词输入框
-    var SearchWord = GetSearchWord.value;                                                    // 关键词
-    var GetSearchEngineBaidu = document.getElementById("search-engine-baidu").checked;       // 百度
-    var GetSearchEngineBing = document.getElementById("search-engine-bing").checked;         // Bing
-    var GetSearchEngineGoogle = document.getElementById("search-engine-google").checked;     // Google
-    var GetSearchEnginebilibili = document.getElementById("search-engine-bilibili").checked; // bilibili
-    if (GetSearchEngineBaidu == true) {
+    var GetSearchWord = document.getElementById("search-engine-input");        // 关键词输入框
+    var SearchWord = GetSearchWord.value;                                      // 关键词
+    if (SearchEngineBaidu.checked == true) {
        window.open("https://www.baidu.com/s?ie=UTF-8&wd=" + SearchWord);
-    } else if (GetSearchEngineBing == true) {
+    } else if (SearchEngineBing.checked == true) {
        window.open("https://cn.bing.com/search?q=" + SearchWord);
-    } else if (GetSearchEngineGoogle == true) {
+    } else if (SearchEngineGoogle.checked == true) {
        window.open("https://www.google.com/search?q=" + SearchWord);
-    } else if (GetSearchEnginebilibili == true) {
+    } else if (SearchEnginebilibili.checked == true) {
        window.open("https://search.bilibili.com/all" + "?keyword=" + SearchWord);
    } else {
        GetSearchWord.value = "搜索引擎选择有误！"
    }
 }
-
-/* -------- */
-/* 工具面板 */
-/* -------- */
-
-var ToolPanel = document.getElementsByClassName("tool-panel")[0];   // 工具面板
+function setSearchEngine(Name) {
+    switch (Name)
+    {
+        case "baidu":
+        localStorage.setItem("SearchEngine", "baidu");
+        break;
+        case "bing":
+        localStorage.setItem("SearchEngine", "bing");
+        break;
+        case "google":
+        localStorage.setItem("SearchEngine", "google");
+        break;
+        case "bilibili":
+        localStorage.setItem("SearchEngine", "bilibili");
+        break;
+    }
+}
+function getSearchEngine() {
+    var SearchEngine = localStorage.getItem("SearchEngine");
+    if (SearchEngine == "baidu") {
+        SearchEngineBaidu.checked = true;
+    } else if (SearchEngine == "bing") {
+        SearchEngineBing.checked = true;
+    } else if (SearchEngine == "google") {
+        SearchEngineGoogle.checked = true;
+    } else if (SearchEngine == "bilibili") {
+        SearchEnginebilibili.checked = true;
+    }
+}
+getSearchEngine();
--- a/dev/js/jquery-3.2.1.min.js
+++ b/dev/js/jquery-3.2.1.min.js
--- a/dev/js/slinky.min.js
+++ b/dev/js/slinky.min.js
@@ -0,0 +1,8 @@
+!function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var r in e)n.d(i,r,function(t){return e[t]}.bind(null,r));return i},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){n(1),e.exports=n(2)},function(e,t){function n(e,t){var n=Object.keys(e);return Object.getOwnPropertySymbols&&n.push.apply(n,Object.getOwnPropertySymbols(e)),t&&(n=n.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),n}function i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function r(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}function s(e,t,n){return t&&r(e.prototype,t),n&&r(e,n),e}
+/*
+ * Slinky
+ * Rather sweet menus
+ * @author Ali Zahid <ali.zahid@live.com>
+ * @license MIT
+ */
+var a=function(){function e(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.settings=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(r,!0).forEach(function(t){i(e,t,r[t])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(r).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})}return e}({},this.options,{},r),this._init(t)}return s(e,[{key:"options",get:function(){return{resize:!0,speed:300,theme:"slinky-theme-default",title:!1}}}]),s(e,[{key:"_init",value:function(e){this.menu=jQuery(e),this.base=this.menu.children().first();var t=this.menu,n=this.settings;t.addClass("slinky-menu").addClass(n.theme),this._transition(n.speed),jQuery("a + ul",t).prev().addClass("next"),jQuery("li > a",t).wrapInner("<span>");var i=jQuery("<li>").addClass("header");jQuery("li > ul",t).prepend(i);var r=jQuery("<a>").prop("href","#").addClass("back");jQuery(".header",t).prepend(r),n.title&&jQuery("li > ul",t).each(function(e,t){var n=jQuery(t).parent().find("a").first().text();if(n){var i=jQuery("<header>").addClass("title").text(n);jQuery("> .header",t).append(i)}}),this._addListeners(),this._jumpToInitial()}},{key:"_addListeners",value:function(){var e=this,t=this.menu,n=this.settings;jQuery("a",t).on("click",function(i){if(e._clicked+n.speed>Date.now())return!1;e._clicked=Date.now();var r=jQuery(i.currentTarget);(0===r.attr("href").indexOf("#")||r.hasClass("next")||r.hasClass("back"))&&i.preventDefault(),r.hasClass("next")?(t.find(".active").removeClass("active"),r.next().show().addClass("active"),e._move(1),n.resize&&e._resize(r.next())):r.hasClass("back")&&(e._move(-1,function(){t.find(".active").removeClass("active"),r.parent().parent().hide().parentsUntil(t,"ul").first().addClass("active")}),n.resize&&e._resize(r.parent().parent().parentsUntil(t,"ul")))})}},{key:"_jumpToInitial",value:function(){var e=this.menu,t=this.settings,n=e.find(".active");n.length>0&&(n.removeClass("active"),this.jump(n,!1)),setTimeout(function(){return e.height(e.outerHeight())},t.speed)}},{key:"_move",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:function(){};if(0!==e){var n=this.settings,i=this.base,r=Math.round(parseInt(i.get(0).style.left))||0;i.css("left","".concat(r-100*e,"%")),"function"==typeof t&&setTimeout(t,n.speed)}}},{key:"_resize",value:function(e){this.menu.height(e.outerHeight())}},{key:"_transition",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:300,t=this.menu,n=this.base;t.css("transition-duration","".concat(e,"ms")),n.css("transition-duration","".concat(e,"ms"))}},{key:"jump",value:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];if(e){var n=this.menu,i=this.settings,r=jQuery(e),s=n.find(".active"),a=0;s.length>0&&(a=s.parentsUntil(n,"ul").length),n.find("ul").removeClass("active").hide();var o=r.parentsUntil(n,"ul");o.show(),r.show().addClass("active"),t||this._transition(0),this._move(o.length-a),i.resize&&this._resize(r),t||this._transition(i.speed)}}},{key:"home",value:function(){var e=!(arguments.length>0&&void 0!==arguments[0])||arguments[0],t=this.base,n=this.menu,i=this.settings;e||this._transition(0);var r=n.find(".active"),s=r.parentsUntil(n,"ul");this._move(-s.length,function(){r.removeClass("active").hide(),s.not(t).hide()}),i.resize&&this._resize(t),!1===e&&this._transition(i.speed)}},{key:"destroy",value:function(){var e=this,t=this.base,n=this.menu;jQuery(".header",n).remove(),jQuery("a",n).removeClass("next").off("click"),n.css({height:"","transition-duration":""}),t.css({left:"","transition-duration":""}),jQuery("li > a > span",n).contents().unwrap(),n.find(".active").removeClass("active"),n.attr("class").split(" ").forEach(function(e){0===e.indexOf("slinky")&&n.removeClass(e)});["settings","menu","base"].forEach(function(t){return delete e[t]})}}]),e}();jQuery.fn.slinky=function(e){return new a(this,e)}},function(e,t,n){}]);
--- a/docs/js/tool.js
+++ b/docs/js/tool.js
--- a/dev/tool.html
+++ b/dev/tool.html
@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="zh-cmn-Hans">
+<head>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="shortcut icon" href="favicon.ico" />
+    <title>Frost 网址导航 - 小工具</title>
+    <link rel="stylesheet" href="css/all.css" />
+    <link rel="stylesheet" href="css/tool.css" />
+</head>
+<body>
+    <div class="main">
+        <!-- 索引 -->
+        <div class="tool-nav">
+            <header>索引</header>
+            <div class="tool-nav-link">
+                <ul>
+                	<li><a href="index.html">主页</a></li>
+                	<li><a href="#tool-unixtime">Unix 时间戳转换</a></li>
+                    <li><a href="#tool-downloadtime">计算下载用时</a></li>
+                	<li><a href="#tool-calculate">简易计算</a></li>
+                	<li><a href="#tool-genlink">生成批量下载链接</a></li>
+                	<li><a href="#tool-runjs">运行 JavaScript</a></li>
+                </ul>
+            </div>
+        </div>
+        <!-- Unix 时间戳转换 -->
+        <div id="tool-unixtime">
+            <header>Unix 时间戳转换</header>
+            <!-- 时间戳转换为时间 -->
+            <p><marquee behavior="alternate" direction="right">时间戳转换为北京时间</marquee></p>
+            <!-- 输入框 -->
+            <div id="tool-unixtime-input-a">
+                <span>Unix 时间戳：</span><input type="text" />
+            </div>
+            <!-- 输出框 -->
+            <div id="tool-unixtime-output-a">
+                <span>时间：</span><input type="text" readonly />
+            </div>
+            <!-- 模式 -->
+            <div class="tool-unixtime-setting-a">
+                <span>模式：</span>
+                <input type="radio" name="unixtime-setting-a" id="unixtime-setting-aa" />
+                <label for="unixtime-setting-aa">秒(s)</label>
+                <input type="radio" name="unixtime-setting-a" id="unixtime-setting-ab" checked />
+                <label for="unixtime-setting-ab">毫秒(ms)</label>
+            </div>
+            <hr />
+            <!-- 时间转换为时间戳 -->
+            <p><marquee behavior="alternate" direction="right">北京时间转换为时间戳</marquee></p>
+            <!-- 输入框 -->
+            <div id="tool-unixtime-input-b">
+                <span>时间：</span><input type="text" />
+            </div>
+            <!-- 输出框 -->
+            <div id="tool-unixtime-output-b">
+                <span>Unix 时间戳：</span><input type="text" readonly />
+            </div>
+            <!-- 模式 -->
+            <div class="tool-unixtime-setting-b">
+                <span>模式：</span>
+                <input type="radio" name="unixtime-setting-b" id="unixtime-setting-ba" checked />
+                <label for="unixtime-setting-ba">秒(s)</label>
+                <input type="radio" name="unixtime-setting-b" id="unixtime-setting-bb" />
+                <label for="unixtime-setting-bb">毫秒(ms)</label>
+            </div>
+            <hr />
+            <!-- 按钮 -->
+            <div class="tool-button" onclick="toolUnixTimeNow()">当前</div>
+            <div class="tool-button" onclick="toolUnixTimeSubmit()">转换</div>
+            <div class="tool-button" onclick="toolUnixTimeClear()">重置</div>
+        </div>
+        <!-- 计算下载用时 -->
+        <div id="tool-downloadtime">
+            <header>计算下载用时（未完成）</header>
+            <!-- 输入 -->
+            <div id="tool-downloadtime-input">
+                <b>文件大小：</b><input type="text" /><br />
+                <b>下载速度：</b><input type="text" />
+            </div>
+            <!-- 结果 -->
+            <div id="tool-downloadtime-output">
+                <b>大约用时：</b><span>待计算</span>
+            </div>
+            <!-- 按钮 -->
+            <div class="tool-button" onclick="toolDownloadTimeSubmit()">计算</div>
+            <div class="tool-button" onclick="toolDownloadTimeClear()">重置</div>
+            <!-- 帮助 -->
+            <div id="tool-downloadtime-help">
+                <p><b>文件大小</b></p>
+                <p>数值 + 单位（B / KB / MB / GB / TB）</p>
+                <p>例如：2 KB、5.5 GB</p>
+                <p><b>下载速度（每秒）</b></p>
+                <p>数值 + 单位（B / KB / MB / GB / TB）</p>
+                <p>例如：2 KB、5.5 GB</p>
+            </div>
+        </div>
+        <!-- 简易计算 -->
+        <div id="tool-calculate">
+            <header>简易计算</header>
+            <textarea id="tool-calculate-input" rows="6" placeholder="请输入算式（请使用“半角”符号）&#10;加：+ 减：- 乘：* 除：/&#10;多层括号：仅需使用 ()&#10;乘方运算：幂(底数, 指数)&#10;平方根：平方根(数值或算式)"></textarea>
+            <div>保留小数点后 <input id="tool-calculate-tofixed" type="text" title="0 ~ 16 之间（默认：4）" value="4" /> 位数</div>
+            <div id="tool-calculate-result">结果：<span></span></div>
+            <div class="tool-button" onclick="toolCalculateSubmit()">计算</div>
+            <div class="tool-button" onclick="toolCalculateClear()">清空</div>
+        </div>
+        <!-- 生成批量下载链接 -->
+        <div id="tool-genlink">
+            <header>生成批量下载链接</header>
+            <div id="tool-genlink-link">
+                <b>网址：</b><input type="text" placeholder="变量用 (*) 表示" />
+            </div>
+            <hr />
+            <div id="tool-genlink-settings">
+                <div id="tool-genlink-settings-a">
+                    <input type="radio" name="genlink-settings" id="genlink-settings-a" checked />
+                    <label for="genlink-settings-a">等差数列</label>
+                    首项：<input type="text" value="1" />
+                    项数：<input type="text" value="5" />
+                    公差：<input type="text" value="1" /><br />
+                    <input type="checkbox" name="genlink-settings-a-reverse" id="genlink-settings-a-zero" />
+                    <label for="genlink-settings-a-zero">补0（暂不支持负数）&nbsp;</label>
+                    <input type="checkbox" name="genlink-settings-a-reverse" id="genlink-settings-a-reverse" />
+                    <label for="genlink-settings-a-reverse">倒序</label>
+                </div>
+                <hr />
+                <div id="tool-genlink-settings-b">
+                    <input type="radio" name="genlink-settings" id="genlink-settings-b" />
+                    <label for="genlink-settings-b">等比数列</label>
+                    首项：<input type="text" value="1" />
+                    项数：<input type="text" value="5" />
+                    公比：<input type="text" value="2" /><br />
+                    <input type="checkbox" name="genlink-settings-b-reverse" id="genlink-settings-b-zero"  />
+                    <label for="genlink-settings-b-zero">补0（暂不支持负数）&nbsp;</label>
+                    <input type="checkbox" name="genlink-settings-b-reverse" id="genlink-settings-b-reverse" />
+                    <label for="genlink-settings-b-reverse">倒序</label>
+                </div>
+                <hr />
+                <div id="tool-genlink-settings-c">
+                    <input type="radio" name="genlink-settings" id="genlink-settings-c" />
+                    <label for="genlink-settings-c">字母变化</label>
+                    从：<input type="text" value="a" maxlength="1" />
+                    到：<input type="text" value="z" maxlength="1" /><br />
+                    <input type="checkbox" name="genlink-settings-c-reverse" id="genlink-settings-c-reverse" />
+                    <label for="genlink-settings-c-reverse">倒序</label>
+                </div>
+            </div>
+            <hr />
+            <div class="tool-button" onclick="toolGenLinkSubmit()">生成</div>
+            <div class="tool-button" onclick="toolGenLinkClear()">清空</div>
+            <textarea id="tool-genlink-result" rows="8" placeholder="结果"></textarea>
+        </div>
+        <!-- 运行 JavaScript -->
+        <div id="tool-runjs">
+            <header>运行 JavaScript</header>
+            <textarea id="tool-runjs-input" rows="6" placeholder="请输入 JavaScript 代码"></textarea>
+            <div class="tool-button" onclick="toolRunJSSubmit()">运行</div>
+            <div class="tool-button" onclick="toolRunJSClear()">清空</div>
+        </div>
+    </div>
+    <!-- 返回顶部 -->
+    <div class="to-top" onclick="document.body.scrollTop = 0; document.documentElement.scrollTop = 0;">▲</div>
+    <!-- 背景 -->
+    <div class="page-background"></div>
+    <!-- JavaScript -->
+    <script src="js/tool.js"></script>
+</body>
+</html>
--- a/docs/css/all.css
+++ b/docs/css/all.css
@@ -0,0 +1,103 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+/* 背景 */
+
+.page-background {
+    z-index: -100;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    background-attachment: fixed;
+    background-image: url(../img/Unsplash_V6TWE6h8gyg_Blur.jpg);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+/*
+.page-background:after {
+    content: "";
+    z-index: -90;
+    position: inherit;
+    top: inherit;
+    left: inherit;
+    width: inherit;
+    height: inherit;
+    background: inherit;
+    filter: blur(4px);
+}
+*/
+
+/* 滚动条 */
+
+::-webkit-scrollbar {
+    height: 8px;
+    width: 8px;
+}
+::-webkit-scrollbar-thumb {
+    background-color: #CCC;
+    border-radius: 0;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: #03A9F4;
+}
+::-webkit-scrollbar-track {
+    background-color: #FFF;
+    border-radius: 0;
+}
+
+/* 选中 */
+
+::selection {
+    background:#03A9F4;
+    color:#FFF;
+}
+::-moz-selection {
+    background:#03A9F4;
+    color:#FFF;
+}
+::-webkit-selection {
+    background:#03A9F4;
+    color:#FFF;
+}
+
+/* 动画 */
+
+@keyframes spinner {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+@keyframes FloatingBarSlide {
+    from {
+        bottom: -50px;
+    }
+}
+@keyframes ToTopAnimation {
+    0% {
+    }
+    50% {
+        right: 25px;
+        bottom: 25px;
+        height: 40px;
+        width: 40px;
+        line-height: 40px;
+        font-size: 20px;
+        color: #FFF;
+    }
+    100% {
+        color: #2196F3;
+        transform: rotate(360deg);
+    }
+}
--- a/docs/css/index.css
+++ b/docs/css/index.css
@@ -0,0 +1,499 @@
+@charset "UTF-8";
+
+/*
+ * 默认配色
+ * primary #4cd964
+ * accent #5ac8fa
+ * accent #ff2d55
+ * background #fff
+ * text #222
+ */
+
+* {
+    border-radius: 0;
+    box-sizing: border-box;
+    font-weight: normal;
+    outline: none;
+    user-select: none;
+}
+
+body {
+    background-color: #999;
+    color: #000;
+    cursor: default;
+    display: flex;
+    flex-direction: column;
+    font: normal 14px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    justify-content: center;
+    margin: 6em auto;
+    max-width: calc(100% - 2em);
+    min-height: calc(100vh - 8em);
+    /* text-transform: lowercase; */
+    width: 30em;
+    overflow-x: hidden;
+    scroll-behavior: smooth;
+}
+
+a {
+    color: #222;
+    text-decoration: none;
+    transition: 200ms;
+}
+
+a:hover {
+    color: #03A9F4;
+}
+
+a:active {
+    color: #00BCD4;
+}
+
+code {
+    font-family: 'Consolas', monospace;
+}
+
+h1, h2, h3 {
+    font-weight: 500;
+    text-align: center;
+}
+
+h2 {
+    color: #FFF;
+    font-size: 1.6em;
+    margin-bottom: 2em;
+    position: relative;
+    text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.2);
+}
+
+h2::before {
+    content: '';
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+h3 {
+    color: #03A9F4;
+    font-size: 1.25em;
+    margin: 2em 0;
+}
+
+img {
+    border: none;
+    max-width: 100%;
+    vertical-align: top;
+}
+
+p {
+    margin: 2em 0;
+    text-align: center;
+}
+
+pre {
+    background: #f6f7f8;
+    display: block;
+    line-height: 1.4;
+    padding: 1em;
+    user-select: text;
+    width: 100%;
+}
+
+table {
+    background: #f6f7f8;
+    border-collapse: collapse;
+    border-spacing: 0;
+    margin: 2em 0;
+    width: 100%;
+}
+
+thead tr {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.025);
+}
+
+thead th {
+    color: #ff2d55;
+    font-weight: 500;
+}
+
+tbody tr:not(:first-child) {
+    border-top: 1px solid rgba(0, 0, 0, 0.025);
+}
+
+tbody td {
+    line-height: 1.4;
+}
+
+th, td {
+    padding: 1em;
+    text-align: left;
+    vertical-align: top;
+}
+
+/* Layout */
+
+header, h1 {
+    align-items: center;
+    align-self: center;
+    color: #444;
+    display: flex;
+    flex-direction: column;
+}
+
+header h1::before {
+    content: '';
+    background: url('../favicon.ico') center no-repeat;
+    background-size: 2em;
+    height: 2em;
+    margin-bottom: 1em;
+    width: 2em;
+}
+
+header p {
+    color: #555;
+    margin-top: 1em;
+}
+
+main {
+    margin: 4em 0;
+    opacity: 0;
+    /* background: #FFF; */
+    transition: opacity 1s;
+}
+
+main section:not(:first-child) {
+    margin-top: 4em;
+}
+
+footer {
+    color: #FFF;
+    font-size: 0.9em;
+    line-height: 1.5em;
+    text-align: center;
+}
+
+footer a {
+    color: #FFF;
+}
+
+footer img {
+    height: 1.5em;
+}
+
+footer p {
+    margin: 0;
+}
+
+/* Components */
+
+.loading {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin: 2em;
+    text-align: center;
+}
+
+.loading::before {
+    animation: spinner 1s infinite linear;
+    content: '';
+    border: 2px solid transparent;
+    border-top-color: #5ac8fa;
+    border-right-color: #5ac8fa;
+    border-radius: 1em;
+    height: 1.5em;
+    margin-right: 1em;
+    width: 1.5em;
+}
+
+/* 工具面板 */
+
+.tool-panel {
+    /* visibility: hidden; */
+    z-index: 100;
+    position: fixed;
+    left: 0;
+    bottom: -110%;
+    opacity: 0;
+    transition: all 0.5s;
+}
+
+.tool-panel-bar {
+    height: 32px;
+}
+
+.tool-panel-newtab,
+.tool-panel-close {
+    position: absolute;
+    top: 0;
+    height: 32px;
+    width: 64px;
+    box-shadow: -2px 0 10px 0 rgba(0, 0, 0, 0.1);
+    line-height: 32px;
+    text-align: center;
+    font-size: 14px;
+    color: #FFF;
+}
+
+.tool-panel-blank {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 32px;
+    width: 100%;
+    background-color: #FFF;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.tool-panel-newtab {
+    right: 72px;
+    background-color: #2196F3;
+}
+
+.tool-panel-close {
+    right: 8px;
+    background-color: #F44336;
+}
+
+.tool-panel-iframe {
+}
+
+.tool-panel-iframe iframe {
+    height: calc(100vh - 32px);
+    width: 100vw;
+}
+
+/* 链接的图标 */
+
+/*
+main section li img {
+    height: 28px;
+    position: absolute;
+    transform: translate(10px, 10px);
+}
+
+main section li a:not(.back) {
+    padding-left: 45px !important;
+}
+*/
+
+/* 全屏文字 */
+
+.fullscreen-text {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    font-size: 5vw;
+    color: #FFF;
+    transform: translate(-50%, -50%);
+    transition: opacity 1s;
+}
+
+/* 查找面板 */
+
+.search-panel {
+    visibility: hidden;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    height: 300px;
+    width: 500px;
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    transform: translate(-50%, -50%);
+}
+.search-bar{
+    text-align: center;
+}
+.search-bar .search-input {
+    margin: 20px 5px 0 0;
+    padding: 0 15px;
+    width: 60%;
+    height: 50px;
+    border: solid 2px #03A9F4;
+    box-shadow: 0 0 5px rgba(3, 169, 244, 0.1);
+    font-size: 20px;
+    transition: border 0.2s;
+}
+.search-bar .search-input:hover {
+    border: solid 2px #00BCD4;
+}
+.search-bar .search-submit,
+.search-bar .search-cancel {
+    width: 75px;
+    height: 50px;
+    border: none;
+    background-color: #03A9F4;
+    box-shadow: 0 5px 10px -5px rgba(3, 169, 244, 0.4);
+    font-size: 20px;
+    color: #FFF;
+    transition: background 0.2s;
+}
+.search-bar .search-submit:hover,
+.search-bar .search-cancel:hover {
+    background-color: #00BCD4;
+}
+.search-bar .search-submit {
+    margin-right: 5px;
+}
+.search-result {
+    margin-top: 10px;
+    padding: 0 16px;
+    height: calc(100% - 100px);
+    overflow-y: scroll;
+}
+.search-result a {
+    display: block;
+    margin-bottom: 10px;
+    font-size: 20px;
+}
+#search-result-title {
+    border-bottom: 1px solid #DDD;
+}
+#search-result-link {
+    margin-top: 7px;
+}
+@media screen and (max-width: 500px) {
+    .search-panel {
+        height: 300px;
+        width: 95%;
+    }
+    .search-bar .search-input {
+        margin: 15px 5px 0 0;
+        padding: 0 10px;
+        width: 55%;
+        height: 40px;
+        font-size: 16px;
+    }
+    .search-bar .search-submit,
+    .search-bar .search-cancel {
+        width: 16%;
+        height: 40px;
+        font-size: 16px;
+    }
+    .search-result {
+        padding: 0 5%;
+        height: calc(100% - 80px);
+    }
+    .search-result a {
+        margin-bottom: 8px;
+        font-size: 16px;
+    }
+}
+
+/* 搜索引擎 */
+
+.search-engine {
+    width: 100%;
+}
+.search-engine-bar {
+   height: 45px;
+   width: 100%;
+   background-color: #FFF;
+   border-radius: 5px;
+   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
+   white-space: nowrap;
+}
+.search-engine-select {
+  color: #FFF;
+  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
+}
+#search-engine-input {
+   padding-left: 15px;
+   box-sizing: border-box;
+   height: 100%;
+   width: calc(100% - 45px);
+   background-color: transparent;
+   border: none;
+   font-size: 14px;
+}
+.search-engine-submit {
+    display: inline-block;
+    position: relative;
+    top: 7px;
+    left: 7px;
+    height: 24px;
+    width: 24px;
+    color: #03A9F4;
+    fill: currentcolor;
+    user-select: none;
+}
+.search-engine-select ul {
+    margin-top: 20px;
+    width: 100%;
+    text-align: center;
+}
+.search-engine-select ul li {
+    display: inline-block;
+    margin: 0 5px;
+    list-style: none;
+    font-size: 16px;
+}
+/* radio 样式 */
+.search-engine-select ul li input[type="radio"] {
+  position: absolute;
+  opacity: 0;
+}
+.search-engine-select ul li input[type="radio"] + label:before {
+  content: '';
+  border-radius: 0px;
+  background: #FFF;
+  border: 1px solid #999;
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  position: relative;
+  top: 0;
+  margin-right: 0.25em;
+  vertical-align: top;
+  text-align: center;
+  transition: all 0.25s ease;
+}
+.search-engine-select ul li input[type="radio"]:checked + label:before {
+  background-color: #03A9F4;
+  box-shadow: inset 0 0 0 2px #FFF;
+}
+.search-engine-select ul li input[type="radio"]:focus + label:before {
+  outline: none;
+  border-color: #00BCD4;
+}
+.search-engine-select ul li input[type="radio"]:disabled + label:before {
+  box-shadow: inset 0 0 0 2px #FFF;
+  border-color: #999;
+  background: #999;
+}
+.search-engine-select ul li input[type="radio"] + label:empty:before {
+  margin-right: 0;
+}
+
+/* 悬浮栏 */
+
+.floating-bar {
+    z-index: 50;
+    position: fixed;
+    left: 0;
+    bottom: 20px;
+    width: 100%;
+    /* opacity: 0.9; */
+    text-align: center;
+    animation: FloatingBarSlide 1s ease-out 1;
+}
+.floating-bar-search,
+.floating-bar-tool,
+.floating-bar-about,
+.floating-bar-totop {
+    display: inline-block;
+    width: 50px;
+    height: 32px;
+    background-color: #4CAF50;
+    box-shadow: 0 8px 10px -4px rgba(76, 175, 80, 0.5);
+    text-align: center;
+    line-height: 32px;
+    font-size: 14px;
+    color: #fff;
+}
+.floating-bar-tool,
+.floating-bar-about,
+.floating-bar-totop {
+    margin-left: 5px;
+}
--- a/docs/css/tool.css
+++ b/docs/css/tool.css
@@ -1,78 +1,11 @@
@charset "UTF-8";

-* {
-    margin: 0;
-    padding: 0;
-}
-html {
-    scroll-behavior: smooth;
-}
 body {
    padding: 20px 0 50px 0;
    background-color: #999;
    scroll-behavior: smooth;
 }

-/* 背景 */
-
-.page-background {
-    z-index: -100;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100vh;
-    background-attachment: fixed;
-    background-image: url(../img/Unsplash_V6TWE6h8gyg.jpg);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;
-}
-.page-background:after {
-    content: "";
-    z-index: -90;
-    position: inherit;
-    top: inherit;
-    left: inherit;
-    width: inherit;
-    height: inherit;
-    background: inherit;
-    filter: blur(4px);
-}
-
-/* 滚动条 */
-
-::-webkit-scrollbar {
-    height: 8px;
-    width: 8px;
-}
-::-webkit-scrollbar-thumb {
-    background-color: #CCC;
-    border-radius: 0;
-}
-::-webkit-scrollbar-thumb:hover {
-    background-color: #03A9F4;
-}
-::-webkit-scrollbar-track {
-    background-color: #FFF;
-    border-radius: 0;
-}
-
-/* 选中 */
-
-::selection {
-    background:#03A9F4;
-    color:#FFF;
-}
-::-moz-selection {
-    background:#03A9F4;
-    color:#FFF;
-}
-::-webkit-selection {
-    background:#03A9F4;
-    color:#FFF;
-}
-
 /* 主要 */

 .main {
@@ -280,23 +213,3 @@ body {
 .to-top:hover {
    animation: ToTopAnimation 0.5s ease-in-out;
 }
-
-/* 动画 */
-
-@keyframes ToTopAnimation {
-    0% {
-    }
-    50% {
-        right: 25px;
-        bottom: 25px;
-        height: 40px;
-        width: 40px;
-        line-height: 40px;
-        font-size: 20px;
-        color: #FFF;
-    }
-    100% {
-        color: #2196F3;
-        transform: rotate(360deg);
-    }
-}
--- a/docs/img/Unsplash_V6TWE6h8gyg_Blur.jpg
+++ b/docs/img/Unsplash_V6TWE6h8gyg_Blur.jpg
--- a/docs/img/Unsplash_V6TWE6h8gyg_Original.jpg
+++ b/docs/img/Unsplash_V6TWE6h8gyg_Original.jpg
--- a/docs/index.html
+++ b/docs/index.html
@@ -8,7 +8,8 @@
    <title>Frost 网址导航</title>
    <meta name="description" content="网址导航" />
    <meta name="keywords" content="link,navigation,导航,网站,网址" />
-    <link rel="stylesheet" href="css/style.css" />
+    <link rel="stylesheet" href="css/all.css" />
+    <link rel="stylesheet" href="css/index.css" />
    <link rel="stylesheet" href="css/slinky.css" />
 </head>
 <body>
@@ -28,19 +29,19 @@
        <!-- 搜索引擎选择 -->
        <div class="search-engine-select">
            <ul>
-                <li>
+                <li onclick="setSearchEngine('baidu');">
                    <input type="radio" name="search-engine-selection" id="search-engine-baidu" checked />
                    <label for="search-engine-baidu">百度</label>
                </li>
-                <li>
+                <li onclick="setSearchEngine('bing');">
                    <input type="radio" name="search-engine-selection" id="search-engine-bing" />
                    <label for="search-engine-bing">Bing</label>
                </li>
-                <li>
+                <li onclick="setSearchEngine('google');">
                    <input type="radio" name="search-engine-selection" id="search-engine-google" />
                    <label for="search-engine-google">Google</label>
                </li>
-                <li>
+                <li onclick="setSearchEngine('bilibili');">
                    <input type="radio" name="search-engine-selection" id="search-engine-bilibili" />
                    <label for="search-engine-bilibili">bilibili</label>
                </li>
@@ -1300,6 +1301,6 @@
    <!-- JavaScript -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/slinky.min.js"></script>
-    <script src="js/script.min.js"></script>
+    <script src="js/index.min.js"></script>
 </body>
 </html>
--- a/docs/js/index.min.js
+++ b/docs/js/index.min.js
@@ -0,0 +1,11 @@
+var SlinkyOption={title:true,speed:200};var ListID="#list_";var ListCount=0;var ListCountMax=17;var FullsSreenText=document.getElementsByClassName("fullscreen-text")[0];var LinkList=document.getElementsByTagName("main")[0].getElementsByTagName("a");var SearchMode=1;var SearchPanel=document.getElementsByClassName("search-panel")[0];var SearchInput=document.getElementsByClassName("search-input")[0];var SearchResultTitle=document.getElementById("search-result-title");var SearchResultLink=document.getElementById("search-result-link");var SearchResultItem="";var SearchEngineBaidu=document.getElementById("search-engine-baidu");var SearchEngineBing=document.getElementById("search-engine-bing");var SearchEngineGoogle=document.getElementById("search-engine-google");var SearchEnginebilibili=document.getElementById("search-engine-bilibili");var ToolPanel=document.getElementsByClassName("tool-panel")[0];function findChar(str,tChar,num){var charPos=str.indexOf(tChar);num=num-1;if(num>0){for(var i=0;i<num;i++){charPos=str.indexOf(tChar,charPos+1);}}
+return charPos;}
+function setTarget(){for(var i=0;i<LinkList.length;i++){if(LinkList[i].href.endsWith("#")==false){LinkList[i].target="_blank";}}}
+function displayList(){document.getElementsByTagName("main")[0].style.opacity="1";FullsSreenText.style.opacity="0";setTimeout("document.getElementsByClassName('fullscreen-text')[0].style.display = 'none';",1000);}
+function loadList(){ListCount=ListCount+1;ListID="#list_"+ListCount;$(ListID).slinky(SlinkyOption);FullsSreenText.innerText="已加载 "+ListCount+" 个分类";if(ListCount==ListCountMax){clearInterval(I_LoadList);FullsSreenText.innerText="加载完毕";setTarget();displayList();}}
+var I_LoadList=setInterval("loadList()",100);function searchLink(){var LinkListCount=LinkList.length;var SearchWord=SearchInput.value.toLowerCase();if(SearchMode==1&&SearchWord!=""){SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="";for(var i=0;i<LinkListCount;i++){if(LinkList[i].href.endsWith("#")==false){if(LinkList[i].innerText.toLowerCase().indexOf(SearchWord)!=-1){SearchResultItem=LinkList[i].cloneNode(true);SearchResultTitle.appendChild(SearchResultItem);}else if(LinkList[i].href.indexOf(SearchWord)!=-1){SearchResultItem=LinkList[i].cloneNode(true);SearchResultLink.appendChild(SearchResultItem);}}}}else if(SearchMode==1&&SearchWord==""){SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="未输入关键词";}else if(SearchMode==2){SearchInput.value="";SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="";SearchPanel.style.visibility="hidden";}else{SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="异常";}}
+function searchWeb(){var GetSearchWord=document.getElementById("search-engine-input");var SearchWord=GetSearchWord.value;if(SearchEngineBaidu.checked==true){window.open("https://www.baidu.com/s?ie=UTF-8&wd="+SearchWord);}else if(SearchEngineBing.checked==true){window.open("https://cn.bing.com/search?q="+SearchWord);}else if(SearchEngineGoogle.checked==true){window.open("https://www.google.com/search?q="+SearchWord);}else if(SearchEnginebilibili.checked==true){window.open("https://search.bilibili.com/all"+"?keyword="+SearchWord);}else{GetSearchWord.value="搜索引擎选择有误！"}}
+function setSearchEngine(Name){switch(Name)
+{case"baidu":localStorage.setItem("SearchEngine","baidu");break;case"bing":localStorage.setItem("SearchEngine","bing");break;case"google":localStorage.setItem("SearchEngine","google");break;case"bilibili":localStorage.setItem("SearchEngine","bilibili");break;}}
+function getSearchEngine(){var SearchEngine=localStorage.getItem("SearchEngine");if(SearchEngine=="baidu"){SearchEngineBaidu.checked=true;}else if(SearchEngine=="bing"){SearchEngineBing.checked=true;}else if(SearchEngine=="google"){SearchEngineGoogle.checked=true;}else if(SearchEngine=="bilibili"){SearchEnginebilibili.checked=true;}}
+getSearchEngine();
--- a/docs/js/script.min.js
+++ b/docs/js/script.min.js
@@ -1,6 +0,0 @@
-var SlinkyOption={title:true,speed:200};var ListID="#list_";var ListCount=0;var ListCountMax=17;var FullsSreenText=document.getElementsByClassName("fullscreen-text")[0];function loadList(){ListCount=ListCount+1;ListID="#list_"+ListCount;$(ListID).slinky(SlinkyOption);FullsSreenText.innerText="已加载 "+ListCount+" 个分类";if(ListCount==ListCountMax){clearInterval(I_LoadList);FullsSreenText.innerText="加载完毕";setTarget();displayList();}}
-var LinkList=document.getElementsByTagName("main")[0].getElementsByTagName("a");function setTarget(){for(var i=0;i<LinkList.length;i++){if(LinkList[i].href.endsWith("#")==false){LinkList[i].target="_blank";}}}
-function displayList(){document.getElementsByTagName("main")[0].style.opacity="1";FullsSreenText.style.opacity="0";setTimeout("document.getElementsByClassName('fullscreen-text')[0].style.display = 'none';",1000);}
-var I_LoadList=setInterval("loadList()",100);var SearchMode=1;var SearchPanel=document.getElementsByClassName("search-panel")[0];var SearchInput=document.getElementsByClassName("search-input")[0];var SearchResultTitle=document.getElementById("search-result-title");var SearchResultLink=document.getElementById("search-result-link");var SearchResultItem="";function searchLink(){var LinkListCount=LinkList.length;var SearchWord=SearchInput.value.toLowerCase();if(SearchMode==1&&SearchWord!=""){SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="";for(var i=0;i<LinkListCount;i++){if(LinkList[i].href.endsWith("#")==false){if(LinkList[i].innerText.toLowerCase().indexOf(SearchWord)!=-1){SearchResultItem=LinkList[i].cloneNode(true);SearchResultTitle.appendChild(SearchResultItem);}else if(LinkList[i].href.indexOf(SearchWord)!=-1){SearchResultItem=LinkList[i].cloneNode(true);SearchResultLink.appendChild(SearchResultItem);}}}}else if(SearchMode==1&&SearchWord==""){SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="未输入关键词";}else if(SearchMode==2){SearchInput.value="";SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="";SearchPanel.style.visibility="hidden";}else{SearchResultTitle.innerHTML="";SearchResultLink.innerHTML="异常";}}
-function searchWeb(){var GetSearchWord=document.getElementById("search-engine-input");var SearchWord=GetSearchWord.value;var GetSearchEngineBaidu=document.getElementById("search-engine-baidu").checked;var GetSearchEngineBing=document.getElementById("search-engine-bing").checked;var GetSearchEngineGoogle=document.getElementById("search-engine-google").checked;var GetSearchEnginebilibili=document.getElementById("search-engine-bilibili").checked;if(GetSearchEngineBaidu==true){window.open("https://www.baidu.com/s?ie=UTF-8&wd="+SearchWord);}else if(GetSearchEngineBing==true){window.open("https://cn.bing.com/search?q="+SearchWord);}else if(GetSearchEngineGoogle==true){window.open("https://www.google.com/search?q="+SearchWord);}else if(GetSearchEnginebilibili==true){window.open("https://search.bilibili.com/all"+"?keyword="+SearchWord);}else{GetSearchWord.value="搜索引擎选择有误！"}}
-var ToolPanel=document.getElementsByClassName("tool-panel")[0];
--- a/docs/tool.html
+++ b/docs/tool.html
@@ -1,12 +1,13 @@
 <!DOCTYPE html>
 <html lang="zh-cmn-Hans">
 <head>
-    <meta charset="utf-8"/>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
-    <link rel="shortcut icon" href="favicon.ico"/>
+    <meta charset="utf-8" />
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <link rel="shortcut icon" href="favicon.ico" />
    <title>Frost 网址导航 - 小工具</title>
-    <link rel="stylesheet" href="css/tool.css"/>
+    <link rel="stylesheet" href="css/all.css" />
+    <link rel="stylesheet" href="css/tool.css" />
 </head>
 <body>
    <div class="main">