Initral

2024-08-31 09:51:56 +08:00 · 2024-08-31 09:51:56 +08:00 · 84705ca02b
commit 84705ca02b
2 changed files with 89 additions and 0 deletions
--- a/index.css
+++ b/index.css
@ -0,0 +1,14 @@
+mdui-card {
+  margin: 3px;
+  width: calc(25% - 6px);
+  height: 8em;
+}
+
+mdui-card h1 {
+    margin: 0;
+  padding: 0.2em 0.2em;
+}
+
+mdui-layout-main {
+  display: flex;
+}
--- a/index.html
+++ b/index.html
@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no"
+    />
+    <meta name="renderer" content="webkit" />
+
+    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css" />
+    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
+
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+
+    <link href="index.css" rel="stylesheet" />
+
+    <title>Study Area CN Learn</title>
+  </head>
+  <body>
+    <mdui-layout>
+      <mdui-navigation-drawer>
+        <mdui-list-item
+          end-icon="arrow_right"
+          href="https://learn.study-area.org.cn"
+          >开始学习</mdui-list-item
+        >
+        <mdui-list-item
+          end-icon="arrow_right"
+          href="https://forum.study-area.org.cn"
+          >讨论区</mdui-list-item
+        >
+        <mdui-list-item
+          end-icon="arrow_right"
+          href="https://git.hmtsai.cn/study-area-cn/learn-homepage"
+          >查看本站源码</mdui-list-item
+        >
+      </mdui-navigation-drawer>
+
+      <mdui-top-app-bar style="position: relative">
+        <mdui-button-icon icon="menu"></mdui-button-icon>
+        <mdui-top-app-bar-title>Study Area CN Learn</mdui-top-app-bar-title>
+      </mdui-top-app-bar>
+
+      <mdui-layout-main class="example-layout-main" style="min-height: 300px">
+        <mdui-card
+          href="https://learn.study-area.org.cn/computer/"
+          clickable
+          class="card"
+        >
+          <h1>学习电脑</h1>
+        </mdui-card>
+        <mdui-card
+          href="https://learn.study-area.org.cn/linux-basic/"
+          clickable
+          class="card"
+        >
+          <h1>学习 Linux 基础</h1>
+        </mdui-card>
+      </mdui-layout-main>
+    </mdui-layout>
+
+    <script>
+      document
+        .querySelector("mdui-button-icon")
+        .addEventListener("click", () => {
+          document.querySelector("mdui-navigation-drawer").open =
+            !document.querySelector("mdui-navigation-drawer").open;
+        });
+    </script>
+  </body>
+</html>