create: files.

KageRyo · Mar 10, 2024 · eaf1415 · eaf1415
1 parent cc95fd0
commit eaf1415
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 0 deletions.
diff --git a/assets/script.js b/assets/script.js
diff --git a/assets/style.css b/assets/style.css
diff --git a/index.html b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="zh-Hant-TW">
+
+<head>
+    <!-- 網頁標題和語系 -->
+    <meta charset="UTF-8">
+    <!--手機版縮放-->
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>WaterMirror</title>
+    <link rel="icon" type="img/icon" href="assets/img/favicon.ico">
+    <!-- 引入 CSS -->
+    <link rel="stylesheet" href="./assets/css/style.css">
+    <!-- 引入字型 -->
+    <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" />
+    <!-- 套用 TocasUI -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.2.5/tocas.min.css" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocas/4.2.5/tocas.min.js"></script>
+</head>
+
+<body>
+    <div class="ts-box">
+        <div class="ts-app-layout is-vertical">
+            <div class="cell">
+                <!-- 頂部列 -->
+
+                <div class="ts-app-topbar">
+                    <div class="start">
+                        <a class="item" data-toggle="menu:has-hidden">
+                            <span class="ts-icon is-bars-icon"></span>
+                        </a>
+                        <div class="item is-text">WaterMirror</div>
+                    </div>
+                    <div class="content has-hidden" data-name="menu">
+                        <div class="ts-menu is-separated is-start-icon has-dark">
+                            <a class="item">
+                                <span class="ts-icon is-inbox-icon"></span>
+                                A
+                            </a>
+                            <a class="item">
+                                <span class="ts-icon is-bookmark-icon"></span>
+                                B
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="cell">
+                <!-- 主要內容 -->
+                <div class="ts-box">
+                    <div class="ts-app-layout is-full is-horizontal">
+                        <div class="cell">
+                            <div class="ts-content">
+                                Hello, World!
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="cell">
+                <!-- 底部列 -->
+                <div class="ts-segment">
+                    <div class="ts-app-navbar is-fluid">
+                        <a class="item">
+                            <div class="ts-icon is-user-icon"></div>
+                            <div class="label">使用者</div>
+                        </a>
+                        <a class="item">
+                            <div class="ts-icon is-house-icon"></div>
+                            <div class="label">首頁</div>
+                        </a>
+                        <a class="item is-active">
+                            <div class="ts-icon is-newspaper-icon"></div>
+                            <div class="label">設定</div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+</body>