diff --git a/src/Home-page.html b/src/Home-page.html
new file mode 100644
index 0000000..e61cf2d
--- /dev/null
+++ b/src/Home-page.html
@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>首页</title>
+    <style>
+        .notification {
+        display: flex;
+        flex-direction: column;
+        isolation: isolate;
+        position: relative;
+        width: 18rem;
+        height: 8rem;
+        background: #ffffff;
+        border-radius: 1rem;
+        overflow: hidden;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-size: 16px;
+        --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);
+        --color: #32a6ff
+        }
+
+        .notification:before {
+        position: absolute;
+        content: "";
+        inset: 0.0625rem;
+        border-radius: 0.9375rem;
+        background: #ffffff;
+        z-index: 2
+        }
+
+        .notification:after {
+        position: absolute;
+        content: "";
+        width: 0.25rem;
+        inset: 0.65rem auto 0.65rem 0.5rem;
+        border-radius: 0.125rem;
+        background: var(--gradient);
+        transition: transform 300ms ease;
+        z-index: 4;
+        }
+
+        .notification:hover:after {
+        transform: translateX(0.15rem)
+        }
+
+        .notititle {
+        color: var(--color);
+        padding: 0.65rem 0.25rem 0.4rem 1.25rem;
+        font-weight: 500;
+        font-size: 1.1rem;
+        transition: transform 300ms ease;
+        z-index: 5;
+        }
+
+        .notification:hover .notititle {
+        transform: translateX(0.15rem)
+        }
+
+        .notibody {
+        color: #121213;
+        padding: 0 1.25rem;
+        transition: transform 300ms ease;
+        z-index: 5;
+        }
+
+        .notification:hover .notibody {
+        transform: translateX(0.25rem)
+        }
+
+        .notiglow,
+        .notiborderglow {
+        position: absolute;
+        width: 20rem;
+        height: 20rem;
+        transform: translate(-50%, -50%);
+        background: radial-gradient(circle closest-side at center, white, transparent);
+        opacity: 0;
+        transition: opacity 300ms ease;
+        }
+
+        .notiglow {
+        z-index: 3;
+        }
+
+        .notiborderglow {
+        z-index: 1;
+        }
+
+        .notification:hover .notiglow {
+        opacity: 0.1
+        }
+
+        .notification:hover .notiborderglow {
+        opacity: 0.1
+        }
+
+        .note {
+        color: var(--color);
+        position: fixed;
+        top: 80%;
+        left: 50%;
+        transform: translateX(-50%);
+        text-align: center;
+        font-size: 0.9rem;
+        width: 75%;
+        }
+
+        .container {
+        margin: 0 auto;
+        }
+
+        .card {
+        position: relative;
+        width: 30%;
+        height: 400px;
+        /* margin: 0 auto; */
+        background: #ffffff;
+        border-radius: 15px;
+        box-shadow: 0 15px 60px rgba(0, 0, 0, 0.5);
+        }
+
+        .face {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        }
+
+        .face.back {
+        box-sizing: border-box;
+        padding: 20px;
+        }
+
+        .face.back b {
+        margin: 0;
+        padding: 0;
+        }
+
+        .face.back .desc {
+        background-color: #646464;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        }
+
+        .face.front {
+        transition: 0.5s;
+        }
+
+        .face.front b {
+        margin: 0;
+        padding: 0;
+        font-size: 5.1em;
+        color: #fff;
+        transition: 0.5s;
+        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+        z-index: 10;
+        }
+
+        .card:hover .face.front {
+        height: 60px;
+        }
+
+        .card:hover .face.front b {
+        font-size: 2em;
+        }
+
+        .face.front {
+        background-color: #0cbaba;
+        border-radius: 15px;
+        }
+
+
+
+
+    </style>
+</head>
+<body>
+    <div class="notification">
+        <div class="notiglow"></div>
+        <div class="notiborderglow"></div>
+        <div class="notititle">欢迎使用药品管理系统</div>
+        <div class="notibody">在本系统你可以完成基本的药品管理。</div>
+        <div class="notibody">下面将会介绍本药品管理系统的使用方法。</div>
+    </div>
+    <h1></h1>
+
+    <div style="display: flex; justify-content: center;  flex-direction: row; gap: 40px;">
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">药品基本操作</b>
+                <p class="desc">
+                你可以对药品基本信息进行基本的增加、修改、删除、查找操作。
+                </p>
+                <p class="desc">
+                对药品信息进行增加、删除、修改药品库存时会自动生成进/出库记录，可在进/出库药品统计中查看。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>药品基本操作</b>
+            </div>
+        </div>
+
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">药品分类信息</b>
+                <p class="desc">
+                在这里一共设置了 6 种药品分类：骨科用药，眼科用药，皮肤科用药，呼吸系统药，消化系统药，心血管系统药。
+                </p>
+                <p class="desc">
+                可以在这里查看药品的详细信息：药名，药品公司，药品公司联系电话，价格，库存，进价。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>药品分类信息</b>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">药品统计</b>
+                <p class="desc">
+                这里根据药品分类信息生成药品数量统计。显示各个分类中各个药品的数量并以饼图的方式展示，并对数量（库存）小于5的药品加入到“库存告急”、对数量（库存）大于15的药品加入到“库存积压预警”。同时显示出各个分类药品中库存最多/最少的药品。
+                </p>
+                <p class="desc">
+                这里根据进库药品统计和出库药品统计的记录生成药品支出统计和药品收入统计。初始显示进/出库记录中每一天的支出/收入。可以选择年/月查看对应年份月份的每天的支出/收入，也可以选择药品查看对应药品的每天的支出/收入统计。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>药品统计</b>
+            </div>
+        </div>
+
+    </div>
+
+    <h1></h1>
+
+    <div style="display: flex; justify-content: center;  flex-direction: row; gap: 40px;">
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">进库药品统计</b>
+                <p class="desc">
+                这里存放着由药品基本操作生成的进库药品记录。
+                </p>
+                <p class="desc">
+                进库药品记录包含着以下信息：
+                </p>
+                <p class="desc">
+                药名、药品公司、药品公司联系电话、数量（进库数量）、价格（出售价格）、进价、时间（进库时间）  
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>进库药品统计</b>
+            </div>
+        </div>
+
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">出库药品统计</b>
+                <p class="desc">
+                这里存放着由药品基本操作生成的出库药品记录。
+                </p>
+                <p class="desc">
+                出库药品记录包含着以下信息：
+                </p>
+                <p class="desc">
+                药名、药品公司、药品公司联系电话、数量（出库数量）、价格（出售价格）、进价、时间（出库时间）  
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>出库药品统计</b>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">导入药品信息</b>
+                <p class="desc">
+                这个可以帮助你将药品信息快速地存入到系统数据库中。
+                </p>
+                <p class="desc">
+                请注意导入数据的格式，具体的请见“导入药品信息”功能模块。可以直接使用导出的药品数据进行导入。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>导入药品信息</b>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="face back">
+            <div class="content">
+                <span class="stars"></span>
+                <b class="desc">导出药品信息</b>
+                <p class="desc">
+                这个可以帮助你将药品信息从系统数据库中导出。
+                </p>
+                <p class="desc">
+                导出的药品数据可以直接导入系统数据库。但要注意数据文件名称不能更改。
+                </p>
+            </div>
+            </div>
+            <div class="face front">
+            <b>导出药品信息</b>
+            </div>
+        </div>
+
+    </div>
+
+
+</body>
+</html>
\ No newline at end of file
