LiuShen/Friend-Circle-Lite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
柳神
2024-09-27 13:46:41 +08:00
parent d261a5c395
commit 399df46809
4 changed files with 126 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.github/workflows/deal_subscribe_issue.yml vendored
View File

@@ -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

18
main/fclite.css
View File

@@ -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 {

6
server.py
View File

@@ -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:

115
static/index.html
View File

@@ -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;
padding: 20px;
width: 100%;
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>