From 14985f825b12a0c05299ab55fc3e569407435890 Mon Sep 17 00:00:00 2001
From: MixBadGun <1059129006@qq.com>
Date: Wed, 3 Dec 2025 22:01:46 +0800
Subject: [PATCH] =?UTF-8?q?UI=E6=90=AD=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/routes/+page.svelte        |  3 +-
 src/routes/notice/+page.svelte | 90 ++++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 src/routes/notice/+page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a1fa0d7..6c4815b 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,7 +2,8 @@
     const routes = [
         { name: '名人名言', path: '/makequote' },
         { name: 'Latex', path: '/latex' },
-        { name: 'MarkDown', path: '/markdown' }
+        { name: 'MarkDown', path: '/markdown' },
+        { name: '提示', path: '/notice' }
     ]
 </script>
 
diff --git a/src/routes/notice/+page.svelte b/src/routes/notice/+page.svelte
new file mode 100644
index 0000000..f6e639d
--- /dev/null
+++ b/src/routes/notice/+page.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+let isMaskMode = false;
+let title = "这是一个标题";
+let content = "这是一个提示！给你显示东西！";
+
+onMount(async () => {
+  window['setContent'] = (newTitle: string, newContent: string) => {
+    title = newTitle;
+    content = newContent;
+  };
+
+  window['setMaskMode'] = (maskMode: boolean) => {
+    isMaskMode = maskMode;
+  };
+});
+
+
+</script>
+
+<div class="container"> 
+  <div id="main" class:mask-mode="{isMaskMode}">
+    <div class="notice-container">
+      <div class="notice-title">{title}</div>
+      <div class="notice-content">{content}</div>
+    </div>
+  </div>
+</div>
+<button id="maskButton" on:click="{() => isMaskMode = !isMaskMode}">
+  切换遮罩模式
+</button>
+
+<style>
+  .container {
+    background-color: #000000;
+    padding: 10px;
+  }
+
+  #main {
+    background-color: #000000;
+    width: fit-content;
+    padding: 5px;
+  }
+
+  .notice-container {
+    width: fit-content;
+    border: 1px solid #ddd;
+    background-color: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .notice-title {
+    font-size: 24px;
+    font-weight: bold;
+    padding: 10px;
+    color: white;
+    background-color: #66ccff;
+  }
+
+  .notice-content {
+    font-size: 16px;
+    padding: 10px;
+    color: #333;
+  }
+
+  .mask-mode {
+    background-color: black!important;
+    .notice-container {
+      box-shadow: 0 2px 4px rgba(255, 255, 255, 0.5);
+    }
+    .notice-title {
+      background-color: #ffffff!important;
+    }
+    .notice-content {
+      color: white!important;
+    }
+  }
+
+  button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+    background-color: #333;
+    color: white;
+  }
+</style>
\ No newline at end of file