Add Version Notice

新增版本更新通知功能，并增加二次元、设计类站点
Dreamer-Paul · Jun 6, 2020 · 251d4fd · 251d4fd
1 parent 463943b
commit 251d4fd
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -6,16 +6,19 @@
     <title>奇趣起始页</title>
     <link rel="icon" href="static/icon.png" sizes="192x192"/>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style/kico.css">
-    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1809713_5in42ff75e.css">
+    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1809713_rg58vy6eb7.css">
     <link href="https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
     <link rel="stylesheet" href="static/main.css">
 </head>
 <body>
 <header>
-    <div class="about-btn" ks-tag="bottom" ks-text="关于">
+    <div class="action-btn updated" ks-tag="bottom" ks-text="更新啦">
+        <i class="fa fa-bullhorn"></i>
+    </div>
+    <div class="action-btn about" ks-tag="bottom" ks-text="关于">
         <i class="fa fa-info-circle"></i>
     </div>
-    <div class="setting-btn" ks-tag="bottom" ks-text="设置">
+    <div class="action-btn setting" ks-tag="bottom" ks-text="设置">
         <i class="fa fa-cog"></i>
     </div>
 </header>
@@ -37,6 +40,30 @@
     <p>© 2020 <a href="https://paul.ren" target="_blank">奇趣保罗</a> | <a href="https://github.com/Dreamer-Paul/KStart" target="_blank">参与维护</a></p>
 </footer>
 <window>
+    <section class="the-window updated">
+        <div class="window-head">
+            <button>×</button>
+            <h3>导航更新啦</h3>
+        </div>
+        <div class="window-body">
+            <article>
+                <p>感谢你的使用和支持！在这个版本中，我首次增加了大版本更新机制，每次的更新内容都将会在这里告诉大家，哈哈！</p>
+                <blockquote>PS：只有首次打开最新版本才会出现这样的提示哦！</blockquote>
+                <h3>本次更新：</h3>
+                <ul>
+                    <li>增加站点及图标，图标变得更大了！</li>
+                    <li>完善必应壁纸适应后变更字体颜色的设定！</li>
+                    <li>所有链接均以新标签的方式打开！</li>
+                    <li>增加了如你所看到的更新提示！</li>
+                </ul>
+                <h3>更新预告：</h3>
+                <ul>
+                    <li>更舒适的自定义站点列表体验</li>
+                    <li>可供设定你的壁纸（本地或外链）</li>
+                </ul>
+            </article>
+        </div>
+    </section>
     <section class="the-window about">
         <div class="window-head">
             <button>×</button>

diff --git a/site.json b/site.json
@@ -230,11 +230,48 @@
     {
         "name": "萌娘百科",
         "url": "https://zh.moegirl.org",
-        "color": "018c03"
+        "color": "018c03",
+        "icon": "iconfont icon-moegirl"
     },
     {
         "name": "半次元",
         "url": "https://bcy.net",
-        "color": "fa4b8b"
+        "color": "fa4b8b",
+        "icon": "iconfont icon-bcy"
+    },
+    {
+        "name": "番组计划",
+        "url": "https://bangumi.tv",
+        "color": "f09199"
+    },
+    {
+        "name": "班图剪贴板",
+        "url": "https://pastebin.ubuntu.com",
+        "color": "dd4814",
+        "icon": "iconfont icon-ubuntu"
+    },
+    {
+        "name": "IconFont",
+        "url": "https://www.iconfont.cn",
+        "color": "ea4519",
+        "icon": "iconfont icon-iconfont"
+    },
+    {
+        "name": "站酷",
+        "url": "https://www.zcool.com.cn",
+        "color": "ffe300",
+        "icon": "iconfont icon-zcool"
+    },
+    {
+        "name": "UI 中国",
+        "url": "https://www.ui.cn",
+        "color": "3d7eff",
+        "icon": "iconfont icon-uizg"
+    },
+    {
+        "name": "Dribbble",
+        "url": "https://dribbble.com",
+        "color": "ea4c89",
+        "icon": "fa fa-dribbble"
     }
 ]
diff --git a/static/main.css b/static/main.css
@@ -2,7 +2,7 @@
 
 # KStart
 # By: Dreamer-Paul
-# Last Update: 2020.5.29
+# Last Update: 2020.6.6
 
 一个简洁不失细节的起始页
 
@@ -55,15 +55,28 @@ header{
     justify-content: flex-end;
 }
 
-header .about-btn, header .setting-btn{
+header .action-btn{
     padding: 1em;
     cursor: pointer;
     padding-bottom: 0;
 }
-header .about-btn:hover .fa, header .setting-btn:hover .fa{
+header .action-btn:hover .fa{
     transform: scale(1.2);
 }
 
+header .action-btn.updated:not(.active){
+    display: none;
+}
+
+header .action-btn.updated.active .fa{
+    animation: shiny .5s alternate infinite;
+}
+
+@keyframes shiny {
+    from { opacity: 0 }
+    to { opacity: 1 }
+}
+
 header .fa{
     font-size: 1.5em;
     transition: transform .3s;
@@ -168,7 +181,7 @@ main{
 
     width: 5rem;
     height: 5rem;
-    font-size: 1.5em;
+    font-size: 1.75em;
     line-height: 5rem;
 
     margin: auto;

diff --git a/static/main.js b/static/main.js
@@ -2,7 +2,7 @@
 
 # KStart
 # By: Dreamer-Paul
-# Last Update: 2020.5.24
+# Last Update: 2020.6.6
 
 一个简洁不失细节的起始页
 
@@ -12,8 +12,9 @@
 
 var obj = {
     header: {
-        about: ks.select(".about-btn"),
-        setting: ks.select(".setting-btn")
+        updated: ks.select(".action-btn.updated"),
+        about: ks.select(".action-btn.about"),
+        setting: ks.select(".action-btn.setting")
     },
     main: {
         select: ks.select(".search-select"),
@@ -40,6 +41,7 @@ var obj = {
 }
 
 var data = {
+    ver: "1.0.0",
     timer: "",
     window: 0,
     back_method: [
@@ -134,7 +136,7 @@ var methods = {
         var content = item.icon ? '<i class="' + item.icon + '"></i>' : item.name.substr(0, 1);
 
         return ks.create("a", {
-            html: `<a class="item" href="${item.url}">
+            html: `<a class="item" href="${item.url}" target="_blank">
             <figure class="navi-icon" style="background: #${item.color || Math.random().toString(16).substr(-6)}">
                 ${content}
             </figure>
@@ -247,12 +249,17 @@ obj.main.submit.onclick = (e) => {
 }
 
 // 打开按钮
-obj.header.about.onclick = function () {
+obj.header.updated.onclick = function () {
     methods.openWindow(0);
+    localStorage.setItem("paul-ver", data.ver);
+    obj.header.updated.classList.remove("active");
 }
-obj.header.setting.onclick = function () {
+obj.header.about.onclick = function () {
     methods.openWindow(1);
 }
+obj.header.setting.onclick = function () {
+    methods.openWindow(2);
+}
 
 // 关闭面板
 obj.window.wrap.onclick = function (e) {
@@ -279,6 +286,11 @@ data.search_method.forEach((item, key) => {
 obj.settingBtn.reset.onclick = methods.clear;
 obj.settingBtn.output.onclick = methods.output;
 
+// 版本更新提示
+if(localStorage.getItem("paul-ver") !== data.ver){
+    obj.header.updated.classList.add("active");
+}
+
 // 初始化
 fetch("site.json").then(res => res.json()).then((res) => {
     data.sites = res;
@@ -324,7 +336,7 @@ fetch("site.json").then(res => res.json()).then((res) => {
 
                 var imgData = context.getImageData(0, 0, 1, 1).data;
 
-                if(imgData[0] <= 160 || imgData[1] <= 160 | imgData[2] <= 160){
+                if(imgData[0] <= 180 || imgData[1] <= 180 | imgData[2] <= 180){
                     document.body.classList.add("dark");
                 }
             }