⏱️ 2025年05月12日-20时02分 GitHub Actions定时更新
This commit is contained in:
github-actions[bot]
220
index.html
Normal file
220
index.html
Normal file
@ -0,0 +1,220 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN" data-theme="light">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<link rel="icon" href="./favicon.ico" type="image/x-icon">
|
||||
<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>Friend-Circle-Lite</title>
|
||||
</head>
|
||||
<style>
|
||||
body {
|
||||
background-image: url('./bg-light.webp');
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
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;
|
||||
}
|
||||
#theme-toggle {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
width: 90px;
|
||||
height: 30px;
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 20px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.container {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
display: flex;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.root-container {
|
||||
width: 100%;
|
||||
margin-top: 40px;
|
||||
max-width: 1100px;
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.root-container {
|
||||
max-width: 95%;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
/* 暗色模式样式 */
|
||||
[data-theme="dark"] body {
|
||||
background-image: url('./bg-dark.webp');
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .container {
|
||||
background: rgba(30, 30, 30, 0.8);
|
||||
}
|
||||
|
||||
[data-theme="dark"] p {
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .button {
|
||||
background-color: #333333;
|
||||
border: 2px solid #007BFF;
|
||||
color: #007BFF;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .button:hover {
|
||||
background-color: #007BFF;
|
||||
color: white;
|
||||
}
|
||||
|
||||
[data-theme="dark"] .scroll-down-icon {
|
||||
color: #007BFF;
|
||||
}
|
||||
</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" target="_blank">查看文档</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">
|
||||
<div id="friend-circle-lite-root"></div>
|
||||
</div>
|
||||
<button id="theme-toggle">暗色模式</button>
|
||||
<script>
|
||||
if (typeof UserConfig === 'undefined') {
|
||||
var UserConfig = {
|
||||
// 填写你的fc Lite地址
|
||||
private_api_url: './',
|
||||
// 点击加载更多时，一次最多加载几篇文章，默认20
|
||||
page_turning_number: 24,
|
||||
// 头像加载失败时，默认头像地址
|
||||
error_img: './favicon.ico' // 'https://i.p-i.vip/30/20240815-66bced9226a36.webp'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
const scrollButton = document.getElementById('scroll-down-button');
|
||||
const targetElement = document.getElementById('friend-circle-lite-root');
|
||||
scrollButton.addEventListener('click', function(event) {
|
||||
event.preventDefault();
|
||||
targetElement.scrollIntoView({ behavior: 'smooth' });
|
||||
});
|
||||
|
||||
const button = document.getElementById('theme-toggle');
|
||||
button.addEventListener('click', () => {
|
||||
const currentTheme = document.documentElement.getAttribute('data-theme');
|
||||
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
|
||||
document.documentElement.setAttribute('data-theme', newTheme);
|
||||
button.textContent = newTheme === 'light' ? '暗色模式' : '亮色模式';
|
||||
});
|
||||
</script>
|
||||
<link rel="stylesheet" href="./main/fclite.css">
|
||||
<script src="./main/fclite.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user