feat: 官网更新 (#313)

* fix: html lang accessibility adaption * feat: add downloads button * fix: change download button display name * fix: footer not at foot * feat: add direct download buttons * feat: change .row margin to improve layout * Revert "feat: add downloads button" This reverts commit 251f82f * fix: add class of downloads div * feat: improve translation progress bar * feat: reorder index * fix: add blank line at html file end
CFPAOrg · Feb 3, 2023 · fa72a8d · fa72a8d
1 parent d708fca
commit fa72a8d
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 27 deletions.
diff --git a/css/index.css b/css/index.css
@@ -1,10 +1,16 @@
 body {
+    min-height: 100vh;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
     background: url(https://s2.loli.net/2022/03/18/QP4c7lYnfSTMgEo.png);
     background-size: cover/contain
 }
 
 .row {
-    margin-top: 1rem;
+    margin: 1rem 0;
     padding: 0.8rem 0 0.8rem 0;
 }
 
@@ -19,8 +25,6 @@ body {
 }
 
 .sub-info {
-    margin-top: 1rem;
-    margin-bottom: 4rem;
     padding: 1rem;
 }
 
@@ -92,4 +96,32 @@ a:hover {
     margin-bottom: 0px;
     font-size: large;
     font-weight: bold;
-}
+}
+
+#download-versions {
+    width: 60%;
+    margin: 1rem auto;
+
+    display: flex;
+}
+
+.download-version-tag {
+    margin: 0 auto;
+    font-size: 1rem;
+}
+
+.progress {
+    position: relative;
+}
+
+.progress-data {
+    white-space: nowrap;;
+
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    display: flex;
+    align-items: center;
+}
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh">
+<html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
@@ -68,27 +68,7 @@ <h1 class="display-5 text-center main-title">想参与模组翻译么？</h1>
                     <i class="fa fa-paper-plane"></i> 我想参与</button>
             </div>
         </div>
-        <div class="row text-center">
-            <div class="col-lg-12" id="weblate">
-                <hr>
-                <div class="progress" style="height:35px;">
-                    <div class="progress-bar" :style="{'width':precent}" id="progress">
-                    </div>
-                </div>
-                <h3 id="data" style="margin-top: 20px;">
-                    当前翻译了 {{result["translated"]}} 行词条，总计 {{result["total"]}} 行文本
-                    <span class="badge badge-success">{{precent}}</span>
-                </h3>
-                <h4 class="text-muted" style="margin-top: 10px;">
-                    官方支持 Minecraft 版本
-                    <span class="badge badge-danger">1.12</span>
-                    <span class="badge badge-danger">1.16</span>
-                    <span class="badge badge-danger">1.18</span>
-                    <span class="badge badge-danger">1.19</span>
-                    <br>还能通过自动汉化更新模组的转换兼容几乎所有Minecraft版本
-                </h4>
-            </div>
-        </div>
+        <hr>
         <div class="row text-center sub-info">
             <div class="col-md-4 col-sm-6">
                 <a href="/">
@@ -157,6 +137,76 @@ <h5 class="text-secondary">整合汉化补丁
                 </a>
             </div>
         </div>
+        <div class="row text-center">
+            <div class="col-lg-12" id="weblate">
+                <h4 class="text-center">
+                    <i class="fa fa-spinner"></i>
+                    翻译进度
+                    <span class="badge badge-success">{{precent}}</span>
+                </h4>
+                <hr>
+                <div class="progress" id="progress" style="height:40px;">
+                    <div class="progress-bar" :style="{'width':precent}" id="progress">
+                    </div>
+                    <h3 class="progress-data" id="data">
+                        当前翻译了 {{result["translated"]}} 行词条，总计 {{result["total"]}} 行文本
+                    </h3>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-lg-12" id="download">
+                <h4 class="text-center"><i class="fa fa-cloud-download"></i>直接下载</h4>
+                <hr>
+                <div class="text-secondary text-center">
+                    下载对应游戏版本的汉化资源包，并加载即可实现模组汉化。
+                </div>
+                <div id="download-versions">
+                    <a
+                            class="download-version-tag badge badge-info"
+                            href="http://downloader1.meitangdehulu.com:22943/Minecraft-Mod-Language-Modpack-1-10-2.zip"
+                    >
+                        1.10.2
+                    </a>
+                    <a
+                            class="download-version-tag badge badge-info"
+                            href="http://downloader1.meitangdehulu.com:22943/Minecraft-Mod-Language-Modpack.zip"
+                    >
+                        1.12.2
+                    </a>
+                    <a
+                            class="download-version-tag badge badge-info"
+                            href="http://downloader1.meitangdehulu.com:22943/Minecraft-Mod-Language-Modpack-1-16.zip"
+                    >
+                        1.16
+                    </a>
+                    <a
+                            class="download-version-tag badge badge-info"
+                            href="http://downloader1.meitangdehulu.com:22943/Minecraft-Mod-Language-Modpack-1-16-Fabric.zip"
+                    >
+                        1.16-Fabric
+                    </a>
+                    <a
+                            class="download-version-tag badge badge-info"
+                            href="http://downloader1.meitangdehulu.com:22943/Minecraft-Mod-Language-Modpack-1-18.zip"
+                    >
+                        1.18
+                    </a>
+                    <a
+                            class="download-version-tag badge badge-info"
+                            href="http://downloader1.meitangdehulu.com:22943/Minecraft-Mod-Language-Modpack-1-18-Fabric.zip"
+                    >
+                        1.18-Fabric
+                    </a>
+                    <a
+                            class="download-version-tag badge badge-info"
+                            href="http://downloader1.meitangdehulu.com:22943/Minecraft-Mod-Language-Modpack-1-19.zip"
+                    >
+                        1.19
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="row text-center">
             <div class="col-lg-12" id="contributor">
                 <h4 id="data"><i class="fa fa-user-circle"></i> 参与译者</h4>

diff --git a/joinus.html b/joinus.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="zh">
+<html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">