From c684d136dca0b34621135de9db3efcd3f3279521 Mon Sep 17 00:00:00 2001
From: wood <wood@czl.net>
Date: Wed, 17 Apr 2024 01:59:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E4=B8=8BAPI=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 67 ++++++++++++++++++++++++++++--------------------------
 1 file changed, 35 insertions(+), 32 deletions(-)
diff --git a/index.html b/index.html
index 0c4e366..515f495 100644
--- a/index.html
+++ b/index.html
@@ -1,38 +1,46 @@
 <!DOCTYPE html>
-<html lang="zh-cmn-Hans">
+<html lang="zh-cmn-Hans" class="mdui-theme-dark">
 
 <head>
     <title>随机文件api-wood</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="shortcut icon" size="32x32" href="https://cdn-img-r2.czl.net/woodchenink/2024/1/14/blackwood.jpg">
+    <link rel="shortcut icon" size="32x32" href="https://cdn-r2.czl.net/woodchenink/2024/1/14/blackwood.jpg">
     <style>
         html,
         body {
             margin: 0;
-            color: #424242;
             font-weight: 300;
             font-family: "-apple-system", "BlinkMacSystemFont", "Helvetica Neue", "PingFang SC", "Microsoft YaHei",
                 "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "sans-serif";
+            background-image: url(https://random-api.czl.net/pic/all);
+            background-size: cover;
+            height: 100%;
+            /* 确保 body 高度充满整个视窗 */
+            position: relative;
+            /* 为蒙版定位提供参照 */
         }
 
+        .overlay {
+            position: absolute;
+            /* 绝对定位，相对于最近的相对定位元素（这里是 body） */
+            top: 0;
+            left: 0;
+            width: 100%;
+            /* 蒙版宽度覆盖整个视窗宽度 */
+            height: 100%;
+            /* 蒙版高度覆盖整个视窗高度 */
+            background-color: rgba(0, 0, 0, 0.801);
+            /* 半透明黑色蒙版，透明度可以根据需求调整 */
+            z-index: 1;
+            /* 确保蒙版层位于最上方 */
+        }
+
+
         * {
             box-sizing: border-box;
         }
 
-        header {
-            padding: 40vh 0 8vh 0;
-            text-align: center;
-            font-weight: 100;
-            display: positive;
-            /* flex-direction: column; */
-            /* align-items: center; */
-            justify-content: space-between;
-            height: 100vh;
-            overflow: hidden;
-            background: #6495ED;
-        }
-
         #scroll-down {
             background-color: transparent;
             margin-top: 2rem;
@@ -77,25 +85,20 @@
             object-fit: cover;
         }
     </style>
-    <link rel="stylesheet" href="https://unpkg.com/mdui@2.0.3/mdui.css">
-    <script src="https://unpkg.com/mdui@2.0.3/mdui.global.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mdui/2.1.1/mdui.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mdui/2.1.1/mdui.global.js"></script>
     <script src="https://cdnjs.czl.net/ajax/libs/markdown-it/13.0.2/markdown-it.min.js"></script>
 </head>
 
 <body class="mdui-prose">
-    <mdui-layout>
-        <header>
-            <section>
-                <h1>Random-Api / 随机文件API </h1>
-                <h3>wood</h3>
-            </section>
-            <button id="scroll-down"></button>
-        </header>
-        <main style="margin:20px auto;">
-            <div id="markdown-content">
-            </div>
-        </main>
-    </mdui-layout>
+    <div class="overlay">
+        <mdui-layout>
+            <main style="margin:20px auto;">
+                <div id="markdown-content">
+                </div>
+            </main>
+        </mdui-layout>
+    </div>
     <!-- 渲染markdown -->
     <script>
         // 创建带有配置的 markdown-it 实例
@@ -114,4 +117,4 @@
     </script>
 </body>
 
-</html>
+</html>
\ No newline at end of file
