|
|
@@ -1,33 +1,64 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html lang="en" class="is-dark">
|
|
|
+<html lang="en" class="is-white">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Admin Panel | BokoFS</title>
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
-
|
|
|
+ <!-- css -->
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.css">
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/5.0.2/tocas.min.js"></script>
|
|
|
-
|
|
|
+ <!-- Fonts -->
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap" rel="stylesheet">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
- <style>
|
|
|
-
|
|
|
- </style>
|
|
|
+ <!-- Locales -->
|
|
|
+ <script src="./js/dom-i18n.min.js"></script>
|
|
|
+ <script src="./js/theme.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <div class="ts-content is-fitted">
|
|
|
+ <div class="ts-content ">
|
|
|
<div class="ts-container">
|
|
|
- <div class="ts-tab">
|
|
|
- <div href="#!" class="item">BokoFS</div>
|
|
|
- <a href="#!" class="item is-active">Status</a>
|
|
|
- <a href="#!" class="item">Disks</a>
|
|
|
- <a href="#!" class="item">RAID</a>
|
|
|
- <a href="#!" class="item">Network</a>
|
|
|
- <a href="#!" class="item">Tools</a>
|
|
|
+ <div style="float: right;">
|
|
|
+ <button class="ts-button is-start-icon" data-dropdown="languages">
|
|
|
+ <span class="ts-icon is-language-icon"></span>
|
|
|
+ <span id="currentLanguage">System</span>
|
|
|
+ </button>
|
|
|
+ <div class="ts-dropdown" id="languages">
|
|
|
+ <button class="item" onclick="setCurrentLanguage('en');">English</button>
|
|
|
+ <button class="item" onclick="setCurrentLanguage('zh');">中文（正體）</button>
|
|
|
+ </div>
|
|
|
+ <button class="ts-button is-icon" id="darkModeToggle">
|
|
|
+ <span class="ts-icon is-moon-icon"></span>
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <div class="ts-tab is-pilled">
|
|
|
+ <div href="#!" class="item is-disabled">
|
|
|
+ <img></img>
|
|
|
+ </div>
|
|
|
+ <a href="#!" class="item is-active" i18n>
|
|
|
+ Status
|
|
|
+ // 系統狀態
|
|
|
+ </a>
|
|
|
+ <a href="#!" class="item" i18n>
|
|
|
+ Disks
|
|
|
+ // 磁碟
|
|
|
+ </a>
|
|
|
+ <a href="#!" class="item" i18n>
|
|
|
+ RAID
|
|
|
+ // 磁碟陣列
|
|
|
+ </a>
|
|
|
+ <a href="#!" class="item" i18n>
|
|
|
+ Network
|
|
|
+ // 網路
|
|
|
+ </a>
|
|
|
+ <a href="#!" class="item" i18n>
|
|
|
+ Tools
|
|
|
+ // 工具
|
|
|
+ </a>
|
|
|
</div>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ts-divider"></div>
|
|
|
@@ -35,14 +66,13 @@
|
|
|
<div class="ts-container">
|
|
|
<div class="ts-content is-rounded is-padded has-top-spaced-large" style="background: var(--ts-gray-800); color: var(--ts-gray-50)">
|
|
|
<div style="max-width: 300px">
|
|
|
- <div class="ts-header is-huge is-heavy">數十年前被魚群圍毆的天才小釣手</div>
|
|
|
- <p>你能夠想像一個試圖釣魚卻又被魚群圍毆的天才小釣手嗎？32 年前一個驚為天人的祕密，這史書尚未記載的故事將在此完全揭露。</p>
|
|
|
+ <div class="ts-header is-huge is-heavy">數十年前被魚群圍毆的 Teacat 開發者</div>
|
|
|
+ <p>你能夠想像一個試圖釣魚卻又被魚群圍毆的Teacat 開發者？32 年前一個驚為天人的祕密，這史書尚未記載的故事將在此完全揭露。</p>
|
|
|
<a href="#!" class="ts-button is-outlined" style="color: var(--ts-gray-50)">繼續閱讀</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
+ <script src="./js/locale.js"></script>
|
|
|
</body>
|
|
|
</html>
|
TC