update: web

MikuSugar · Dec 29, 2023 · 9d765ae · 9d765ae
1 parent 605faac
commit 9d765ae
Show file tree

Hide file tree

Showing 313 changed files with 35,924 additions and 0 deletions.
diff --git a/docs/cn/index.html b/docs/cn/index.html
diff --git a/docs/docs/404.html b/docs/docs/404.html
@@ -0,0 +1,209 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="utf-8">
+    <title>webstack - 404</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
+    <link rel="shortcut icon" href="./assets/images/favicon.png">
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-77253689-1"></script>
+    <script>
+    window.dataLayer = window.dataLayer || [];
+
+    function gtag() {
+        dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
+
+    gtag('config', 'UA-77253689-1');
+    </script>
+    <style>
+    html,
+    body {
+        width: 100%;
+        height: 100%
+    }
+
+    a,
+    a img,
+    a:before,
+    a:after {
+        text-decoration: none;
+        transition-duration: .25s
+    }
+
+    section {
+        display: block
+    }
+
+    body {
+        line-height: 1
+    }
+
+    #about {
+        width: 40%;
+        position: absolute;
+        top: 40%;
+        left: 10%;
+        z-index: 20;
+        transform: translate(0, -50%);
+    }
+
+    #about h1 {
+        margin: 30px;
+    }
+
+    #about p {
+        margin: 30px;
+    }
+
+    #about img {
+        margin-left: 30px;
+    }
+
+    #about .social {
+        float: left;
+        margin: 30px;
+    }
+
+    #about .copyright {
+        width: 100%;
+        float: left;
+        margin-bottom: 0px;
+    }
+
+    @media (max-width: 768px) {
+        #about {
+            width: 100%;
+            left: 0px;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.85);
+        }
+        #about h1 {
+            margin: 30px;
+        }
+        #about p {
+            margin: 30px;
+        }
+        #about .social {
+            margin: 30px;
+        }
+        #about .copyright {
+            width: 100%;
+            float: left;
+            margin-bottom: 0px;
+        }
+    }
+
+    @media (max-width: 580px) {
+        #about {
+            width: 100%;
+            left: 0px;
+            height: 100%;
+            background-color: rgba(255, 255, 255, 0.85);
+        }
+        #about h1 {
+            margin: 30px;
+        }
+        #about p {
+            margin: 30px;
+            margin-bottom: 0px
+        }
+        #about .social {
+            margin: 30px;
+            margin-bottom: 0px
+        }
+        #about .copyright {
+            width: 100%;
+            float: left;
+            margin-bottom: 0px;
+        }
+    }
+
+    .animated {
+        animation-duration: 1s;
+        animation-fill-mode: both
+    }
+
+    .bounce-in {
+        animation-name: bounce-in
+    }
+
+    @keyframes bounce-in {
+        from,
+        60%,
+        75%,
+        90%,
+        to {
+            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1)
+        }
+        0% {
+            opacity: 0;
+            transform: translate3d(-3000px, -50%, 0)
+        }
+        60% {
+            opacity: 1;
+            transform: translate3d(25px, -50%, 0)
+        }
+        75% {
+            transform: translate3d(-10px, -50%, 0)
+        }
+        90% {
+            transform: translate3d(5px, -50%, 0)
+        }
+        to {
+            transform: translate3d(0, -50%)
+        }
+    }
+
+    body {
+        font-family: "Roboto", sans-serif;
+        font-size: 16px;
+        font-weight: 300;
+        line-height: 1.75;
+        color: rgba(0, 0, 0, 0.65)
+    }
+
+    h1 {
+        font-family: "Merriweather", sans-serif;
+        font-size: 50px;
+        font-weight: 700;
+        line-height: 1.25;
+        color: rgba(0, 0, 0, 0.85);
+        margin-bottom: 25px
+    }
+
+    a {
+        color: rgba(3, 3, 3, 0.85);
+        font-weight: 600;
+    }
+
+    @media (max-width: 580px) {
+        body {
+            font-size: 14px
+        }
+        h1 {
+            font-size: 42px;
+            line-height: 1.45
+        }
+    }
+
+    .bg-align {
+        margin-top: 50%;
+    }
+    </style>
+</head>
+
+<body>
+    <section id="about" class="animated bounce-in">
+        <div class="bg-align">
+            <h1>404</h1>
+            <p>Oops! It looks like you're lost...</p>
+            <p>The Page you're looking for doesn't exist or another error occurred.</p>
+            <p><a href="https://mikusuger.me">👉追赶风车</a></p>
+        </div>
+    </section>
+</body>
+
+</html>
diff --git a/docs/docs/README.md b/docs/docs/README.md
@@ -0,0 +1,29 @@
+# 简易静态导航网站生成
+
+灵感来自于 https://github.com/ChaosCoffee/site
+
+## 效果
+
+![uz9or2](https://cdn.jsdelivr.net/gh/mikusugar/PictureBed@master/uPic/2022/02/uz9or2.png)
+
+https://mikusugar.me/SugarHome/cn/index.html
+
+## 简述
+
+利用了java 模版引擎读取模版生成html，利用了GitHub ACTION 打包生成静态网页并存放在web分支。
+
+## 使用步骤
+
++ 依据需要修改 src/main/resources/in.json 配置文件。
+
++ 依据需要修改 src/main/resources/example.html 的模版文件，一般情况主要改title和页脚。
+
++ 在GitHub 仓库设置添加secrets  SSH_KEY 可以推送GitHub 的ssh私钥。![siRmdc](https://cdn.jsdelivr.net/gh/mikusugar/PictureBed@master/uPic/2022/02/siRmdc.png)
+
++ 依据需要修改 .github/workflows/build.yml ，一般情况主要是改git信息。
+
++ 推送到GitHub 后如果不出意外会触发Action，接着会有一个新分支出现，最后在GitHub setting的page指定page得路径即可。
+
+  ![agJPTt](https://cdn.jsdelivr.net/gh/mikusugar/PictureBed@master/uPic/2022/02/agJPTt.png)
+
+
diff --git a/docs/docs/assets/css/bootstrap.css b/docs/docs/assets/css/bootstrap.css
diff --git a/docs/docs/assets/css/fonts/elusive/css/animation.css b/docs/docs/assets/css/fonts/elusive/css/animation.css
@@ -0,0 +1,85 @@
+/*
+   Animation example, for spinners
+*/
+.animate-spin {
+  -moz-animation: spin 2s infinite linear;
+  -o-animation: spin 2s infinite linear;
+  -webkit-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
+  display: inline-block;
+}
+@-moz-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-webkit-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-o-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@-ms-keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes spin {
+  0% {
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -moz-transform: rotate(359deg);
+    -o-transform: rotate(359deg);
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}