💁🏻重构页面，采用更完善动画和更精细的主页(@JLinMr)

.github/workflows/deal_subscribe_issue.yml

@@ -25,9 +25,8 @@ jobs:
         token: ${{ secrets.GTIHUB_TOKEN }}
         issue-number: ${{ github.event.issue.number }}
         body: |
-          🤩你好呀！ ${{ github.event.issue.user.login }}！你已经成功通过邮件订阅了清羽飞扬的小站啦！若有新文章将通过邮箱推送给你！谢谢你的订阅！
+          🤩你好呀！ ${{ github.event.issue.user.login }}！你已经成功通过邮件订阅了本站啦！若有新文章将通过邮箱推送给你！谢谢你的订阅！
           😥如果您实在想要关闭订阅，在右下角直接删除这个issue就好！咕咕咕咕咕咕咕！
-          🤤个人主页是：https://www.liushen.fun ，欢迎来看看呀！
 
     - name: Close issue
       uses: actions-cool/issues-helper@v3

main/fclite.css

@@ -41,10 +41,6 @@
     --load-more-btn-bg-color: var(--container-bg-color);
 }
 
-body {
-    background-color: var(--background-color);
-}
-
 #friend-circle-lite-root {
     width: 100%;
 }
@@ -119,7 +115,7 @@ body {
     z-index: 999;
     opacity: 0;
     visibility: hidden;
-    transition: opacity 0.3s;
+    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
 }
 
 .modal-open {
@@ -128,10 +124,11 @@ body {
 }
 
 .modal-content {
+    opacity: 0;
     position: relative;
     top: 50%;
     left: 50%;
-    transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%) translateY(-50px);
     width: 350px;
     background-color: var(--modal-content-bg-color);
     padding: 20px;
@@ -140,7 +137,12 @@ body {
     max-height: 90%;
     overflow: hidden;
     border-radius: 20px;
-    transition: opacity 0.3s;
+    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+}
+
+.modal.modal-open .modal-content {
+    transform: translate(-50%, -50%) translateY(0);
+    opacity: 1;
 }
 
 .modal-content:hover #modal-bg  {
@@ -293,7 +295,7 @@ body {
     font-size: 12px;
     color: var(--author-color);
     padding: 5px;
-    height: 25px;
+    line-height: 15px;
 }
 
 .card-author:hover {

server.py

@@ -21,13 +21,13 @@ app.add_middleware(
 @app.get("/", response_class=HTMLResponse)
 async def root():
     try:
-        with open('./server/deploy-home.html', 'r', encoding='utf-8') as f:
+        with open('./static/index.html', 'r', encoding='utf-8') as f:
             html_content = f.read()
         return HTMLResponse(content=html_content)
     except FileNotFoundError:
         return HTMLResponse(content="<h1>File not found</h1>", status_code=404)
 
-@app.get('/all')
+@app.get('/all.json')
 async def get_all_articles():
     try:
         with open('./all.json', 'r', encoding='utf-8') as f:
@@ -38,7 +38,7 @@ async def get_all_articles():
     except json.JSONDecodeError:
         return JSONResponse(content={"error": "Failed to decode JSON"}, status_code=500)
 
-@app.get('/errors')
+@app.get('/errors.json')
 async def get_error_friends():
     try:
         with open('./errors.json', 'r', encoding='utf-8') as f:

static/index.html

@@ -7,16 +7,125 @@
     <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
     <meta name="description" content="🐱一个精简版，无后端，且仅利用github action运行的精简版友链朋友圈程序，兼容fc的json格式信息，同时支持推送友圈更新，支持他人订阅个人站点并在更新时发送邮箱推送。">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Frient-Circle-Lite</title>
+    <title>Friend-Circle-Lite</title>
 </head>
 <style>
+    body {
+        font-family: Arial, sans-serif;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        height: fit-content;
+    }
+    .container {
+        background: linear-gradient(135deg, #ffdaaa, #abc2e7);
+        display: flex;
+        text-align: center;
+        align-items: center;
+        height: 100vh;
+        width: 100%;
+        flex-direction: column;
+        justify-content: center;
+    }
+
     .root-container {
-        margin: 0 auto;
+        width: 100%;
-        padding: 20px;
+        margin-top: 40px;
+    }
+
+    .avatar {
+        width: 150px;
+        height: 150px;
+        border-radius: 50%;
+    }
+    p {
+        color: #666;
+        margin-bottom: 30px;
+    }
+    .button-container {
+        margin-top: 20px;
+        display: flex;
+        justify-content: center;
+        gap: 10px;
+    }
+    .button {
+        background-color: rgb(255, 255, 255);
+        border: 2px solid #007BFF;
+        color: #007BFF;
+        padding: 10px 20px;
+        border-radius: 25px;
+        text-decoration: none;
+        font-size: 16px;
+        font-weight: bold;
+        display: inline-block;
+        transition: background-color 0.3s, color 0.3s;
+    }
+    .button:hover {
+        background-color: #007BFF;
+        color: white;
+    }
+
+    .card-author,
+    .card-date {
+        height: fit-content !important;
+    }
+
+    #friend-circle-lite-root {
+        padding: 10px 0;
+        margin: 10px auto;
+        max-width: 1200px;
+    }
+    .scroll-down-icon {
+        position: absolute;
+        bottom: 20px;
+        height: 24px;
+        color: #007BFF;
+        animation: bounce 1.5s infinite;
+    }
+    .scroll-down-icon::before,
+    .scroll-down-icon::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 12px;
+        height: 12px;
+        opacity: .8;
+        border-left: 3px solid #007BFF;
+        border-bottom: 3px solid #007BFF;
+        transform: translate(-50%, -50%) rotate(-45deg);
+    }
+    .scroll-down-icon::after {
+        top: 80%;
+        opacity: .6;
+    }
+    @keyframes bounce {
+        0%, 100% {
+            transform: translateY(0);
+            opacity: .6;
+        }
+        50% {
+            transform: translateY(-10px);
+            opacity: 1;
+        }
     }
 </style>
 
 <body>
+    <div class="container">
+        <img src="./favicon.ico" alt="Avatar" class="avatar">
+        <p>Friend-Circle-Lite<br>服务已运行</p>
+        <div class="button-container">
+            <a href="https://blog.liushen.fun/posts/4dc716ec/" class="button">查看文档</a>
+            <a href="/all.json" class="button">测试接口</a>
+        </div>
+        <a href="#" class="scroll-down-icon" id="scroll-down-button"></a>
+    </div>
     <div class="root-container" style="max-width: 1000px;">
         <div id="friend-circle-lite-root"></div>
     </div>