<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>藤原 | 个人主页</title>
<meta name="description" content="一个热衷于分享资源/教程/生活的站长的站点">
<meta name="keywords" content="tengyuanyy,tengyuanyy主页,个人导航页,藤原导航,藤原主页,藤原杂谈">
<link rel="icon" href="./static/img/favicon.ico">
<!-- 字体引入 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- 使用Font Awesome图标 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
:root {
--primary-color: #000000;
--secondary-color: #333333;
--dark-color: #000000;
--light-color: #ffffff;
--gray-color: #666666;
--light-gray: #f0f0f0;
--transition: all 0.3s ease;
--border-radius: 8px;
--box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
--box-shadow-hover: 0 8px 20px rgba(0, 0, 0, 0.15);
--comic-border: 3px solid #000;
--comic-bg: #fff;
--comic-accent: #ff4d4d;
--sidebar-width: 280px;
}
/* 黑夜模式变量 */
body.dark-mode {
--primary-color: #ffffff;
--secondary-color: #cccccc;
--dark-color: #121212;
--light-color: #1e1e1e;
--gray-color: #999999;
--light-gray: #2a2a2a;
--comic-bg: #1e1e1e;
--comic-border: 3px solid #444;
--comic-accent: #ff6b6b;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: var(--light-color);
color: var(--primary-color);
line-height: 1.6;
overflow-x: hidden;
min-height: 100vh;
position: relative;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 漫画风格的页面边框 */
body::before {
content: "";
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: var(--comic-border);
pointer-events: none;
z-index: 1000;
}
/* 漫画风格的装饰性斜线 */
body::after {
content: "";
position: fixed;
top: 0;
right: 0;
width: 100px;
height: 100px;
background: linear-gradient(45deg, transparent 45%, var(--comic-accent) 45%, var(--comic-accent) 55%, transparent 55%);
z-index: 999;
}
a {
text-decoration: none;
color: inherit;
transition: var(--transition);
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* 简约漫画卡片效果 */
.comic-card {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
box-shadow: var(--box-shadow);
position: relative;
overflow: hidden;
transition: var(--transition);
}
.comic-card:hover {
transform: translateY(-5px);
box-shadow: var(--box-shadow-hover);
}
/* 漫画对话框效果 */
.speech-bubble {
position: relative;
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
padding: 1.5rem;
margin: 1rem 0;
}
.speech-bubble::after {
content: '';
position: absolute;
bottom: -10px;
left: 20px;
width: 20px;
height: 20px;
background: var(--comic-bg);
border-right: var(--comic-border);
border-bottom: var(--comic-border);
transform: rotate(45deg);
z-index: -1;
}
/* 头部样式 */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: var(--comic-bg);
border-bottom: var(--comic-border);
z-index: 100;
padding: 1rem 2rem;
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: 1px;
position: relative;
}
.logo::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 3px;
background: var(--comic-accent);
}
.nav {
display: flex;
gap: 2rem;
}
.nav-item {
position: relative;
padding: 0.5rem 0;
font-weight: 500;
color: var(--gray-color);
text-transform: uppercase;
letter-spacing: 1px;
}
.nav-item:hover, .nav-item.active {
color: var(--primary-color);
}
.nav-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--comic-accent);
transition: var(--transition);
}
.nav-item:hover::after, .nav-item.active::after {
width: 100%;
}
/* 英雄区域 */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 8rem 2rem 4rem;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('https://api.yilx.net/img/pc') center/cover no-repeat;
opacity: 0.1;
z-index: -1;
}
.avatar {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--comic-bg);
box-shadow: var(--box-shadow);
margin-bottom: 2rem;
border: var(--comic-border);
}
.site-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--dark-color);
position: relative;
display: inline-block;
}
.site-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 4px;
background: var(--comic-accent);
}
.motto {
font-size: 1.2rem;
color: var(--gray-color);
margin-bottom: 2rem;
font-weight: 500;
max-width: 600px;
line-height: 1.8;
}
/* 主要内容区域 - 三栏布局 */
.main-container {
display: flex;
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
gap: 2rem;
}
.left-sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
}
.main-content {
flex: 1;
min-width: 0;
}
.right-sidebar {
width: var(--sidebar-width);
flex-shrink: 0;
}
/* 卡片通用样式 */
.card {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
padding: 1.5rem;
transition: var(--transition);
margin-bottom: 1.5rem;
position: relative;
}
.card-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.card-title i {
color: var(--comic-accent);
}
/* 竖向轮播图样式 */
.vertical-carousel {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 400px;
border: var(--comic-border);
}
.vertical-slides {
height: 100%;
display: flex;
flex-direction: column;
transition: transform 0.5s ease;
}
.vertical-slide {
height: 100%;
width: 100%;
flex-shrink: 0;
}
.vertical-blog-card {
display: block;
height: 100%;
position: relative;
}
.vertical-blog-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vertical-text-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
color: white;
padding: 1.5rem;
}
.vertical-text-slide {
display: none;
}
.vertical-text-slide.active {
display: block;
}
.date {
font-size: 0.9rem;
opacity: 0.8;
margin-bottom: 0.5rem;
}
.excerpt {
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.button {
display: inline-block;
padding: 0.5rem 1.5rem;
background-color: var(--comic-accent);
color: white;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
border: var(--comic-border);
}
.button:hover {
background-color: var(--dark-color);
transform: translateY(-2px);
}
.vertical-dots {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.5rem;
z-index: 10;
}
.vertical-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
border: 2px solid #000;
cursor: pointer;
transition: var(--transition);
}
.vertical-dot.active {
background-color: var(--comic-accent);
transform: scale(1.2);
}
/* 音乐播放器 */
.music-player-container {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
padding: 1rem;
transition: var(--transition);
width: 100%;
}
.music-player {
display: flex;
align-items: center;
gap: 1rem;
}
.cover {
width: 80px;
height: 80px;
border-radius: var(--border-radius);
overflow: hidden;
flex-shrink: 0;
border: var(--comic-border);
}
.cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.music-info {
flex-grow: 1;
text-align: left;
}
.music-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.25rem;
}
.music-artist {
font-size: 0.9rem;
color: var(--gray-color);
margin-bottom: 0.75rem;
}
.progress-container {
width: 100%;
height: 4px;
background-color: var(--light-gray);
border-radius: 2px;
margin-bottom: 0.75rem;
cursor: pointer;
}
.progress {
height: 100%;
background: var(--comic-accent);
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
}
.time-info {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
color: var(--gray-color);
}
.controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.play-pause-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--comic-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.play-pause-btn:hover {
transform: scale(1.1);
}
.control-btn {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: var(--light-gray);
color: var(--dark-color);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
}
.control-btn:hover {
background-color: var(--comic-accent);
color: white;
}
.pause-icon {
display: none;
}
.playing .play-icon {
display: none;
}
.playing .pause-icon {
display: block;
}
/* 个人空间卡片 */
.space-card {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
transition: var(--transition);
display: flex;
align-items: stretch;
height: 100%;
position: relative;
overflow: hidden;
width: 100%;
}
.space-card:hover {
transform: translateY(-5px);
}
.space-content {
flex: 1;
padding: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.space-title {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.space-desc {
font-size: 0.9rem;
color: var(--gray-color);
margin-bottom: 1rem;
}
.space-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: var(--comic-accent);
color: white;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
width: fit-content;
border: var(--comic-border);
}
.space-button:hover {
background: var(--dark-color);
transform: translateY(-2px);
}
.space-image {
width: 40%;
position: relative;
overflow: hidden;
}
.space-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.space-card:hover .space-image img {
transform: scale(1.05);
}
/* API列表 */
.api-list {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem 4rem;
}
.api-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
gap: 1.5rem;
}
.api-card {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
height: 180px;
transition: var(--transition);
border: var(--comic-border);
width: 100%;
}
.api-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition);
}
.api-card:hover {
transform: translateY(-5px);
}
.api-card:hover img {
transform: scale(1.05);
}
.overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
color: white;
padding: 1.5rem;
}
.overlay h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.overlay p {
font-size: 0.9rem;
opacity: 0.9;
margin-bottom: 0.5rem;
}
/* 页脚 */
.footer {
background-color: var(--dark-color);
color: white;
padding: 3rem 2rem;
text-align: center;
border-top: var(--comic-border);
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
}
.footer-text {
font-size: 1rem;
margin-bottom: 1rem;
opacity: 0.8;
}
.icp {
font-size: 0.9rem;
opacity: 0.6;
}
.icp a {
color: white;
margin-left: 0.5rem;
transition: var(--transition);
}
.icp a:hover {
opacity: 1;
text-decoration: underline;
}
/* 浮动按钮 */
.float-button {
position: fixed;
right: 2rem;
bottom: 2rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
z-index: 999;
}
.upward {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: var(--comic-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
border: var(--comic-border);
}
.upward:hover {
background-color: var(--dark-color);
transform: translateY(-3px);
}
/* 右侧边栏 */
.right .card {
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
transition: var(--transition);
overflow: hidden;
position: relative;
}
.right .card:hover {
transform: translateY(-5px);
}
.right .card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--comic-accent);
}
.right .card-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 1.25rem;
}
.right .content {
font-size: 0.95rem;
color: var(--dark-color);
line-height: 1.7;
}
.right .content div {
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}
.right .content div:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.right .content strong {
color: var(--comic-accent);
}
.right .content a {
color: var(--comic-accent);
text-decoration: none;
transition: var(--transition);
font-weight: 500;
}
.right .content a:hover {
color: var(--dark-color);
text-decoration: underline;
}
/* 个人资料卡片 */
.profile-card {
text-align: center;
padding: 2.5rem 1.5rem 1.5rem;
position: relative;
background: var(--comic-bg);
border-radius: var(--border-radius);
border: var(--comic-border);
transition: var(--transition);
overflow: hidden;
margin-bottom: 1.5rem;
}
.profile-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--comic-accent);
}
.profile-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid white;
object-fit: cover;
margin: -30px auto 1rem;
position: relative;
background-color: #f5f5f5;
z-index: 2;
border: var(--comic-border);
}
.profile-name {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.profile-bio {
font-size: 0.9rem;
color: var(--gray-color);
margin-bottom: 1.5rem;
}
.profile-stats {
display: flex;
justify-content: space-around;
margin-bottom: 1.5rem;
padding: 0.75rem 0;
background: rgba(0, 0, 0, 0.05);
border-radius: var(--border-radius);
}
.stat-item {
text-align: center;
padding: 0 0.5rem;
}
.stat-number {
font-size: 1.1rem;
font-weight: 600;
color: var(--comic-accent);
}
.stat-label {
font-size: 0.75rem;
color: var(--gray-color);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.goto {
display: block;
width: 100%;
padding: 0.75rem;
background: var(--comic-accent);
color: white;
text-align: center;
border-radius: 50px;
font-weight: 500;
margin-bottom: 1.5rem;
transition: var(--transition);
font-size: 0.9rem;
border: var(--comic-border);
}
.goto:hover {
background: var(--dark-color);
transform: translateY(-2px);
}
.contact-me {
display: flex;
justify-content: center;
gap: 1rem;
}
.image-box {
width: 36px;
height: 36px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
border: var(--comic-border);
}
.image-box:hover {
background-color: var(--comic-accent);
color: white;
transform: translateY(-2px);
}
/* 赞赏码样式 */
.donate-box {
text-align: center;
padding: 1rem 0;
}
.donate-title {
font-size: 1rem;
color: var(--dark-color);
margin-bottom: 1rem;
font-weight: 500;
}
.donate-image {
width: 180px;
height: 180px;
margin: 0 auto;
border-radius: var(--border-radius);
overflow: hidden;
border: var(--comic-border);
}
.donate-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.donate-desc {
font-size: 0.8rem;
color: var(--gray-color);
margin-top: 0.5rem;
}
/* 响应式调整 */
@media (max-width: 1200px) {
.main-container {
flex-direction: column;
}
.left-sidebar, .right-sidebar {
width: 100%;
}
.left-sidebar {
order: 2;
}
.main-content {
order: 1;
}
.right-sidebar {
order: 3;
}
}
@media (max-width: 768px) {
.header {
padding: 1rem;
}
.nav {
display: none;
}
.hero {
padding: 5rem 1rem 3rem;
}
.site-title {
font-size: 2rem;
}
.api-cards {
grid-template-columns: 1fr;
}
.space-card {
flex-direction: column;
height: auto;
}
.space-image {
width: 100%;
height: 150px;
}
.music-player {
flex-direction: column;
text-align: center;
}
.music-info {
text-align: center;
}
.controls {
justify-content: center;
}
.float-button {
right: 1rem;
bottom: 1rem;
}
.profile-avatar {
width: 80px;
height: 80px;
margin: -30px auto 1rem;
}
.donate-image {
width: 150px;
height: 150px;
}
}
/* 媒体行布局 */
.media-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
.media-row {
grid-template-columns: 1fr;
}
}
/* 漫画风格的装饰元素 */
.comic-dot {
position: absolute;
width: 10px;
height: 10px;
background: var(--comic-accent);
border-radius: 50%;
border: 2px solid #000;
}
/* 加载动画 */
@keyframes comicPulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.loading {
animation: comicPulse 1.5s infinite;
text-align: center;
padding: 2rem;
}
/* 主题切换按钮 */
.theme-toggle {
position: fixed;
right: 2rem;
top: 1.5rem;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--comic-accent);
color: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 1001;
border: var(--comic-border);
transition: var(--transition);
}
.theme-toggle:hover {
transform: scale(1.1);
}
.theme-toggle i {
font-size: 1.2rem;
}
/* 基础重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
/* 修改加载动画样式 */
.tengyuan-loading {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.98);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
opacity: 1;
transition: opacity 0.5s ease-out;
pointer-events: none;
}
.tengyuan-loading.hidden {
opacity: 0;
}
/* 确保主内容在加载时不可见 */
body.loading {
overflow: hidden;
height: 100vh;
}
body.loading .header,
body.loading .hero,
body.loading .main-container,
body.loading .footer {
visibility: hidden;
}
body.loaded {
overflow: auto;
}
body.loaded .header,
body.loaded .hero,
body.loaded .main-container,
body.loaded .footer {
visibility: visible;
}
@keyframes fadeIn {
to { opacity: 1; }
}
/* 头像容器 */
.tengyuan-avatar-container {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 30px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* 头像 */
.tengyuan-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
/* 进度环 */
.tengyuan-progress-ring {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
.tengyuan-progress-circle {
fill: transparent;
stroke: #6B7280;
stroke-width: 3;
stroke-dasharray: 326.725;
stroke-dashoffset: 326.725;
stroke-linecap: round;
transform-origin: 50% 50%;
transform: rotate(-90deg);
animation: progress-rotate 2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes progress-rotate {
0% {
stroke-dashoffset: 326.725;
transform: rotate(-90deg);
}
50% {
stroke-dashoffset: 0;
transform: rotate(270deg);
}
100% {
stroke-dashoffset: -326.725;
transform: rotate(630deg);
}
}
/* 季节文字 */
.tengyuan-quote {
font-family: 'Inter', 'Noto Sans SC', sans-serif;
font-size: 1.1rem;
color: #475569;
text-align: center;
margin-top: 24px;
line-height: 1.6;
opacity: 0;
animation: textAppear 1.2s ease-out 0.5s forwards;
position: relative;
max-width: 80%;
}
/* 季节飘落元素 */
.season-element {
position: absolute;
z-index: 1;
opacity: 0;
animation: falling linear infinite;
pointer-events: none;
will-change: transform;
}
@keyframes falling {
0% {
transform: translate(var(--start-x), -10vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: var(--element-opacity);
}
90% {
opacity: var(--element-opacity);
}
100% {
transform: translate(calc(var(--start-x) + var(--random-x)), 110vh) rotate(360deg);
opacity: 0;
}
}
/* 季节指示器 - 修改为左下方位置 */
.season-indicator {
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
background: #F8FAFC;
padding: 4px 12px;
border-radius: 16px;
font-size: 0.85rem;
color: #64748B;
font-weight: 500;
z-index: 4;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
white-space: nowrap;
min-width: 36px;
text-align: center;
}
/* 响应式设计 */
@media (max-width: 768px) {
.tengyuan-avatar-container {
width: 100px;
height: 100px;
}
.tengyuan-avatar {
width: 80px;
height: 80px;
}
.tengyuan-quote {
font-size: 1rem;
}
.season-indicator {
font-size: 0.75rem;
padding: 3px 10px;
bottom: -10px;
}
}
/* FPS监控漫画风格 */
.comic-fps {
position: fixed;
left: 10px;
bottom: 10px;
display: flex;
align-items: center;
z-index: 999;
user-select: none;
font-family: 'Noto Sans SC', sans-serif;
}
.fps-bubble {
position: relative;
background: var(--comic-bg);
border: var(--comic-border);
border-radius: var(--border-radius);
padding: 8px 15px;
box-shadow: var(--box-shadow);
display: flex;
align-items: center;
gap: 8px;
}
.fps-character {
font-size: 1.2rem;
transform: translateY(2px);
opacity: 0.9;
margin-left: 5px;
}
.fps-value {
font-weight: bold;
font-size: 1.1rem;
margin-right: 5px;
color: var(--comic-accent);
}
.fps-status {
font-size: 0.9rem;
}
.fps-character {
font-size: 1.5rem;
transform: translateY(2px);
opacity: 0.9;
}
/* FPS状态颜色 */
.comic-fps.excellent {
--comic-accent: #2ecc71;
}
.comic-fps.good {
--comic-accent: #f1c40f;
}
.comic-fps.normal {
--comic-accent: #e67e22;
}
.comic-fps.low {
--comic-accent: #e74c3c;
}
.comic-fps.critical {
--comic-accent: #c0392b;
animation: shake 0.5s infinite;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-3px); }
75% { transform: translateX(3px); }
}
/* 新增的日历小部件样式 */
.calendar-widget {
padding: 1rem;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.calendar-title {
font-weight: 600;
font-size: 1.1rem;
}
.calendar-nav {
display: flex;
gap: 0.5rem;
}
.calendar-nav-btn {
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: var(--light-gray);
transition: var(--transition);
}
.calendar-nav-btn:hover {
background: var(--comic-accent);
color: white;
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
text-align: center;
margin-bottom: 0.5rem;
font-size: 0.8rem;
color: var(--gray-color);
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.3rem;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: var(--transition);
font-size: 0.85rem;
}
.calendar-day:hover {
background: var(--comic-accent);
color: white;
}
.calendar-day.today {
background: var(--comic-accent);
color: white;
font-weight: bold;
}
.calendar-day.other-month {
opacity: 0.4;
}
/* 天气小部件 */
.weather-widget {
padding: 1rem;
}
.weather-current {
display: flex;
align-items: center;
margin-bottom: 1rem;
}
.weather-icon {
font-size: 2.5rem;
margin-right: 1rem;
}
.weather-temp {
font-size: 2rem;
font-weight: 600;
}
.weather-desc {
font-size: 0.9rem;
color: var(--gray-color);
}
.weather-forecast {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.weather-day {
text-align: center;
padding: 0.5rem;
border-radius: var(--border-radius);
background: rgba(0, 0, 0, 0.05);
}
.weather-day-icon {
font-size: 1.5rem;
margin: 0.3rem 0;
}
.weather-day-temp {
font-weight: 500;
}
/* 新增的搜索框样式 */
.search-box {
position: relative;
margin-bottom: 1.5rem;
}
.search-input {
width: 100%;
padding: 0.8rem 1rem 0.8rem 3rem;
border-radius: 50px;
border: var(--comic-border);
background: var(--comic-bg);
font-family: inherit;
font-size: 0.95rem;
transition: var(--transition);
}
.search-input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.3);
}
.search-icon {
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--gray-color);
}
/* 新增的标签云样式 */
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag {
display: inline-block;
padding: 0.3rem 0.8rem;
background: var(--light-gray);
border-radius: 50px;
font-size: 0.8rem;
transition: var(--transition);
}
.tag:hover {
background: var(--comic-accent);
color: white;
}
/* 新增的访客统计图表容器 */
.stats-chart {
height: 200px;
margin-top: 1rem;
position: relative;
}
/* 新增的待办事项样式 */
.todo-list {
list-style: none;
}
.todo-item {
display: flex;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
.todo-checkbox {
margin-right: 0.8rem;
accent-color: var(--comic-accent);
}
.todo-text {
flex: 1;
}
.todo-text.completed {
text-decoration: line-through;
opacity: 0.7;
}
.todo-delete {
color: var(--gray-color);
cursor: pointer;
transition: var(--transition);
}
.todo-delete:hover {
color: var(--comic-accent);
}
.todo-add {
display: flex;
margin-top: 0.5rem;
}
.todo-input {
flex: 1;
padding: 0.5rem;
border: var(--comic-border);
border-radius: var(--border-radius) 0 0 var(--border-radius);
background: var(--comic-bg);
}
.todo-submit {
padding: 0.5rem 1rem;
background: var(--comic-accent);
color: white;
border: none;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
cursor: pointer;
transition: var(--transition);
}
.todo-submit:hover {
background: var(--dark-color);
}
</style>
</head>
<body class="loading">
<!-- 加载动画 -->
<div class="tengyuan-loading">
<div id="season-elements-container"></div>
<div class="tengyuan-avatar-container">
<img class="tengyuan-avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="头像">
<div class="season-indicator" id="seasonIndicator"></div>
<svg class="tengyuan-progress-ring" viewBox="0 0 120 120">
<circle class="tengyuan-progress-circle" cx="60" cy="60" r="52.5"></circle>
</svg>
</div>
<div class="tengyuan-quote">
风穿过四季的门，
<br>每一片飘落都是时间的信。
</div>
</div>
<!-- 头部导航 -->
<header class="header comic-card">
<div class="header-container">
<div class="logo">藤原の小站</div>
<nav class="nav">
<a href="#" class="nav-item active">首页</a>
<a href="#" class="nav-item">博客</a>
<a href="#" class="nav-item">项目</a>
<a href="#" class="nav-item">关于</a>
</nav>
</div>
</header>
<!-- 主题切换按钮 -->
<div class="theme-toggle" id="themeToggle">
<i class="fas fa-moon"></i>
</div>
<!-- 英雄区域 -->
<section class="hero">
<img class="avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的头像">
<h1 class="site-title">藤原の小站</h1>
<p class="motto">风带来故事的种子，时间使之发芽。</p>
<div class="speech-bubble">
欢迎来到我的个人空间，这里记录着我的学习、生活和创作的点滴。
</div>
</section>
<!-- 主要内容 - 三栏布局 -->
<div class="main-container">
<!-- 左侧边栏 -->
<aside class="left-sidebar">
<!-- 搜索框 -->
<div class="card comic-card">
<div class="search-box">
<i class="fas fa-search search-icon"></i>
<input type="text" class="search-input" placeholder="搜索内容...">
</div>
</div>
<!-- 个人资料卡片 -->
<div class="profile-card comic-card">
<img class="profile-avatar" src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的头像">
<h2 class="profile-name">藤原</h2>
<p class="profile-bio">风带来故事的种子，时间使之发芽。</p>
<div class="profile-stats">
<div class="stat-item">
<div class="stat-number">4</div>
<div class="stat-label">网站</div>
</div>
<div class="stat-item">
<div class="stat-number">2</div>
<div class="stat-label">项目</div>
</div>
<div class="stat-item">
<div class="stat-number">2</div>
<div class="stat-label">分类</div>
</div>
</div>
<a href="https://blog.tengyuan.icu/" class="goto">前往博客</a>
<div class="contact-me">
<a class="image-box" href="https://github.com/tengyuan1101" target="_blank">
<i class="fab fa-github"></i>
</a>
<a class="image-box" href="https://www.zhihu.com/people/c829052124f7ba5840ed206f13691a6b" target="_blank">
<i class="fab fa-zhihu"></i>
</a>
<a class="image-box" href="mailto:2083737075@qq.com" target="_blank">
<i class="fas fa-envelope"></i>
</a>
</div>
</div>
<!-- 日历小部件 -->
<div class="card comic-card">
<div class="card-title">
<i class="far fa-calendar-alt"></i> 日历
</div>
<div class="calendar-widget">
<div class="calendar-header">
<div class="calendar-title" id="calendarMonth">2025年5月</div>
<div class="calendar-nav">
<div class="calendar-nav-btn" id="calendarPrev">
<i class="fas fa-chevron-left"></i>
</div>
<div class="calendar-nav-btn" id="calendarNext">
<i class="fas fa-chevron-right"></i>
</div>
</div>
</div>
<div class="calendar-weekdays">
<div>日</div>
<div>一</div>
<div>二</div>
<div>三</div>
<div>四</div>
<div>五</div>
<div>六</div>
</div>
<div class="calendar-days" id="calendarDays">
<!-- 日历日期将通过JS动态生成 -->
</div>
</div>
</div>
<!-- 标签云 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-tags"></i> 热门标签
</div>
<div class="tag-cloud">
<a href="#" class="tag">前端</a>
<a href="#" class="tag">JavaScript</a>
<a href="#" class="tag">CSS</a>
<a href="#" class="tag">HTML</a>
<a href="#" class="tag">设计</a>
<a href="#" class="tag">动漫</a>
<a href="#" class="tag">游戏</a>
<a href="#" class="tag">音乐</a>
<a href="#" class="tag">摄影</a>
<a href="#" class="tag">旅行</a>
</div>
</div>
</aside>
<!-- 主内容区 -->
<main class="main-content">
<!-- 竖向轮播图卡片 -->
<div class="card comic-card">
<div class="vertical-carousel">
<div class="vertical-slides">
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="MC开服教程" src="https://api.yilx.net/image/lunbotu/6.jpg">
<div class="vertical-text-content">
<div class="vertical-text-slide active">
<p class="date">2025-04-21</p>
<h2 class="title">标题1</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="使用/give获取特殊nbt物品" src="https://yilx.net/static/img/lxbg.jpeg">
<div class="vertical-text-content">
<div class="vertical-text-slide">
<p class="date">2025-4-18</p>
<h2 class="title">标题2</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
<div class="vertical-slide">
<a href="https://blog.tengyuan.icu" class="vertical-blog-card" target="_blank">
<img class="lazy" data-original="https://yilx.net/static/img/lxbg.jpeg" alt="标题3" src="http://localhost/static/img/tx.jpg">
<div class="vertical-text-content">
<div class="vertical-text-slide">
<p class="date">2025-5-1</p>
<h2 class="title">标题3</h2>
<p class="excerpt">描述</p>
</div>
</div>
</a>
</div>
</div>
<div class="vertical-dots">
<button class="vertical-dot active"></button>
<button class="vertical-dot"></button>
<button class="vertical-dot"></button>
</div>
</div>
</div>
<!-- 音乐播放器和个人空间并排 -->
<div class="media-row">
<!-- 音乐播放器 -->
<div class="music-player-container comic-card">
<audio id="myAudio" src="https://api.yilx.net/music/Hyper-energetic-ACG"></audio>
<div class="music-player">
<div class="cover">
<img class="lazy" data-original="https://api.yilx.net/img/pm" alt="专辑封面" src="https://api.yilx.net/img/pm">
</div>
<div class="music-info">
<h3 class="music-title">随机音乐</h3>
<p class="music-artist">藤原的音乐推荐</p>
<div class="progress-container">
<div class="progress" id="progress"></div>
</div>
<div class="time-info">
<span id="current-time">0:00</span>
<span id="duration">0:00</span>
</div>
<div class="controls">
<button class="control-btn" id="prev-btn">
<i class="fas fa-step-backward"></i>
</button>
<button class="play-pause-btn" id="play-btn">
<span class="play-icon">
<i class="fas fa-play"></i>
</span>
<span class="pause-icon">
<i class="fas fa-pause"></i>
</span>
</button>
<button class="control-btn" id="next-btn">
<i class="fas fa-step-forward"></i>
</button>
</div>
</div>
</div>
</div>
<!-- 个人空间卡片 -->
<a href="https://b23.tv/pDBTVlx" class="space-card comic-card" target="_blank">
<div class="space-content">
<h3 class="space-title">个人空间</h3>
<p class="space-desc">藤原的个人空间</p>
<span class="space-button">
前往空间
<i class="fas fa-arrow-right"></i>
</span>
</div>
<div class="space-image">
<img src="https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg" alt="藤原的个人空间">
</div>
</a>
</div>
<!-- 待办事项 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-tasks"></i> 待办事项
</div>
<ul class="todo-list" id="todoList">
<li class="todo-item">
<input type="checkbox" class="todo-checkbox" checked>
<span class="todo-text completed">完成首页设计</span>
<i class="fas fa-trash todo-delete"></i>
</li>
<li class="todo-item">
<input type="checkbox" class="todo-checkbox">
<span class="todo-text">添加音乐播放器</span>
<i class="fas fa-trash todo-delete"></i>
</li>
<li class="todo-item">
<input type="checkbox" class="todo-checkbox">
<span class="todo-text">优化移动端体验</span>
<i class="fas fa-trash todo-delete"></i>
</li>
</ul>
<div class="todo-add">
<input type="text" class="todo-input" placeholder="添加新任务...">
<button class="todo-submit">添加</button>
</div>
</div>
<!-- API列表 -->
<div class="api-list">
<h2 class="card-title"><i class="fas fa-link"></i> 我的项目</h2>
<div class="api-cards">
<a class="api-card comic-card" target="_blank" href="http://blog.tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="http://api.yilx.net/upload/1742118988976.jpg">
<div class="overlay">
<h3>博客</h3>
<p>记录摆烂日常</p>
<p>site</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="https://api.yilx.net">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="https://api.yilx.net/img/pc">
<div class="overlay">
<h3>API站</h3>
<p>api站点/图床/统计</p>
<p>site</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="http://wp.tengyuan.icu">
<img class="lazy" data-original="https://camo.githubusercontent.com/01f699b5dd28e3fd101d0381f0c7471ed5a08210713d7663f0ad493d966be453/68747470733a2f2f666173746c792e6a7364656c6976722e6e65742f67682f7661737473612f46696c65436f6465426f784056312e362f7374617469632f62616e6e6572732f696d675f312e706e67" alt="" src="http://api.yilx.net/upload/1742130278110.jpg">
<div class="overlay">
<h3>网盘</h3>
<p>开箱即用的文件快传系统</p>
<p>site</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="http://game.tengyuan.icu">
<img class="lazy" data-original="http://static.1heron.com/douyou8/ad/174409477289445.jpg" alt="" src="http://api.yilx.net/upload/1743067883203.jpg">
<div class="overlay">
<h3>TENGYUANの游戏小站</h3>
<p>游戏盛宴，一键解锁</p>
<p>project</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="http://tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="https://api.yilx.net/upload/1741001197606.jpg">
<div class="overlay">
<h3>TENGYUAN</h3>
<p>TENGYUAN</p>
<p>project</p>
</div>
</a>
<a class="api-card comic-card" target="_blank" href="https://tengyuan.icu">
<img class="lazy" data-original="https://api.yilx.net/img/pc" alt="" src="http://api.yilx.net/upload/1741769788550.jpg">
<div class="overlay">
<h3>TENGYUAN1</h3>
<p>TENGYUAN1</p>
<p>project</p>
</div>
</a>
</div>
</div>
</main>
<!-- 右侧边栏 -->
<aside class="right-sidebar">
<!-- 天气小部件 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-cloud-sun"></i> 天气
</div>
<div class="weather-widget">
<div class="weather-current">
<div class="weather-icon">
<i class="fas fa-sun"></i>
</div>
<div>
<div class="weather-temp">25°C</div>
<div class="weather-desc">晴朗</div>
</div>
</div>
<div class="weather-forecast">
<div class="weather-day">
<div>明天</div>
<div class="weather-day-icon">
<i class="fas fa-cloud-sun"></i>
</div>
<div class="weather-day-temp">23°C</div>
</div>
<div class="weather-day">
<div>后天</div>
<div class="weather-day-icon">
<i class="fas fa-cloud-rain"></i>
</div>
<div class="weather-day-temp">20°C</div>
</div>
<div class="weather-day">
<div>周日</div>
<div class="weather-day-icon">
<i class="fas fa-sun"></i>
</div>
<div class="weather-day-temp">26°C</div>
</div>
</div>
</div>
</div>
<!-- 公告栏 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-bullhorn"></i> 公告栏
</div>
<div class="content">
<center>
<b>--- 主域名 ---
<br>
<a target="_blank" rel="noopener" href="https://tengyuan.icu" title="此线路部署于腾讯云服务器" class="anno_content">
<font color="#000000">tengyuan.icu</font>
</a> | <a target="_blank" rel="noopener" href="https://tengyuan.tech" title="此线路部署于雨云服务器" class="anno_content">
<font color="#000000">tengyuan.tech</font>
</a>
<br>--- 备用域名 ---
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无" class="anno_content">
<font color="#000000">暂无</font>
</a>
<br>
<a target="_blank" rel="noopener" href="暂无" title="暂无" class="anno_content">
<font color="#000000">暂无</font>
</a>
<br>--- 网站安卓APP ---
<br>🍧<a target="_blank" rel="noopener" href="暂无下载链接" title="点这里可以下载网站的安卓APP" class="anno_content">
<font color="#000000">点此下载</font>
</a>🍧
</b>
</center>
</div>
</div>
<!-- 赞赏码板块 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-heart"></i> 支持我们
</div>
<div class="donate-box">
<div class="donate-title">感谢您的支持</div>
<div class="donate-image">
<img src="https://bicool-user-assets--small-file.oss-rg-china-mainland.aliyuncs.com/b3ae0df4a91e6b70286a23e34cf7f61b.jpg" alt="赞赏码">
</div>
<div class="donate-desc">扫描二维码支持我们</div>
</div>
</div>
<!-- 访客统计 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-chart-line"></i> 访客统计
</div>
<div class="content">
<div>本站总访客量：<strong>3253</strong>次</div>
<div>今日访客量：<strong>221</strong>次</div>
<div>项目/网站总数：<strong>6</strong></div>
<div>已经有<strong>22</strong>位小伙伴入驻本站啦！</div>
</div>
<div class="stats-chart">
<!-- 这里可以放置图表，实际项目中可以使用Chart.js等库 -->
<canvas id="visitorChart"></canvas>
</div>
</div>
<!-- 最新评论 -->
<div class="card comic-card">
<div class="card-title">
<i class="fas fa-comments"></i> 最新评论
</div>
<div class="content">
<div>
<strong>张三</strong>: 网站设计很棒！
<br><small>2025-05-07</small>
</div>
<div>
<strong>李四</strong>: 音乐播放器很好用
<br><small>2025-05-06</small>
</div>
<div>
<strong>王五</strong>: 期待更多内容
<br><small>2025-05-05</small>
</div>
</div>
</div>
</aside>
</div>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-container">
<p class="footer-text">© 2025 藤原の小站 - 保留所有权利</p>
<p class="icp">
ICP备案号:
<a href="https://beian.miit.gov.cn/" target="_blank">待备案</a>
</p>
</div>
</footer>
<!-- 浮动按钮 -->
<div class="float-button">
<div class="upward" style="display: none;">
<i class="fas fa-arrow-up"></i>
</div>
</div>
<!-- FPS显示 -->
<div id="fpsDisplay" class="comic-fps">
<div class="fps-bubble">
<span class="fps-value">60</span>
<span class="fps-status">超流畅!</span>
<span class="fps-character">ヽ(•̀ω•́ )ゝ✧</span>
</div>
</div>
<script>
// 音乐播放器控制
const audio = document.getElementById('myAudio');
const playPauseBtn = document.getElementById('play-btn');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
const progress = document.getElementById('progress');
const currentTimeEl = document.getElementById('current-time');
const durationEl = document.getElementById('duration');
// 更新进度条
audio.addEventListener('timeupdate', () => {
const { currentTime, duration } = audio;
const progressPercent = (currentTime / duration) * 100;
progress.style.width = `${progressPercent}%`;
// 格式化时间显示
const formatTime = (time) => {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
};
currentTimeEl.textContent = formatTime(currentTime);
if (duration) {
durationEl.textContent = formatTime(duration);
}
});
// 点击进度条跳转
const progressContainer = document.querySelector('.progress-container');
progressContainer.addEventListener('click', (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audio.duration;
audio.currentTime = (clickX / width) * duration;
});
playPauseBtn.addEventListener('click', () => {
if (audio.paused) {
audio.play();
playPauseBtn.classList.add('playing');
} else {
audio.pause();
playPauseBtn.classList.remove('playing');
}
});
// 上一首/下一首按钮
prevBtn.addEventListener('click', () => {
// 这里可以添加切换歌曲的逻辑
alert('切换到上一首歌曲');
});
nextBtn.addEventListener('click', () => {
// 这里可以添加切换歌曲的逻辑
alert('切换到下一首歌曲');
});
// 歌曲结束时自动播放下一首
audio.addEventListener('ended', () => {
// 这里可以添加自动播放下一首的逻辑
alert('歌曲播放结束，可以在这里添加自动播放下一首的逻辑');
});
// 返回顶部按钮
const upwardBtn = document.querySelector('.upward');
upwardBtn.addEventListener('click', () => {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
upwardBtn.style.display = 'flex';
} else {
upwardBtn.style.display = 'none';
}
});
// 图片懒加载
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.original;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// 不支持IntersectionObserver的备用方案
lazyImages.forEach(function(lazyImage) {
lazyImage.src = lazyImage.dataset.original;
lazyImage.classList.remove('lazy');
});
}
});
// 竖向轮播图控制
let currentVerticalSlide = 0;
const verticalSlides = document.querySelectorAll('.vertical-slide');
const verticalTextSlides = document.querySelectorAll('.vertical-text-slide');
const verticalDots = document.querySelectorAll('.vertical-dot');
const verticalSlidesContainer = document.querySelector('.vertical-slides');
function showVerticalSlide(n) {
currentVerticalSlide = (n + verticalSlides.length) % verticalSlides.length;
// 更新轮播图位置
verticalSlidesContainer.style.transform = `translateY(-${currentVerticalSlide * 100}%)`;
// 更新文本和指示点状态
verticalTextSlides.forEach((slide, index) => {
if(index === currentVerticalSlide) {
slide.classList.add('active');
} else {
slide.classList.remove('active');
}
});
verticalDots.forEach((dot, index) => {
if(index === currentVerticalSlide) {
dot.classList.add('active');
} else {
dot.classList.remove('active');
}
});
}
verticalDots.forEach((dot, index) => {
dot.addEventListener('click', () => {
showVerticalSlide(index);
});
});
// 自动轮播
let slideInterval = setInterval(() => {
showVerticalSlide(currentVerticalSlide + 1);
}, 5000);
// 鼠标悬停时暂停轮播
const verticalCarousel = document.querySelector('.vertical-carousel');
verticalCarousel.addEventListener('mouseenter', () => {
clearInterval(slideInterval);
});
verticalCarousel.addEventListener('mouseleave', () => {
slideInterval = setInterval(() => {
showVerticalSlide(currentVerticalSlide + 1);
}, 5000);
});
showVerticalSlide(0);
// 添加一些随机的漫画风格装饰点
function addComicDots() {
const colors = ['#ff4d4d', '#4dff4d', '#4d4dff', '#ffff4d'];
for (let i = 0; i < 10; i++) {
const dot = document.createElement('div');
dot.className = 'comic-dot';
dot.style.background = colors[Math.floor(Math.random() * colors.length)];
dot.style.left = `${Math.random() * 100}%`;
dot.style.top = `${Math.random() * 100}%`;
dot.style.width = `${5 + Math.random() * 10}px`;
dot.style.height = dot.style.width;
document.body.appendChild(dot);
}
}
// 页面加载完成后添加装饰点
window.addEventListener('load', addComicDots);
// 主题切换功能
const themeToggle = document.getElementById('themeToggle');
const body = document.body;
// 检查本地存储中的主题设置
const currentTheme = localStorage.getItem('theme') || 'light';
if (currentTheme === 'dark') {
body.classList.add('dark-mode');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
}
// 切换主题
themeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
if (body.classList.contains('dark-mode')) {
localStorage.setItem('theme', 'dark');
themeToggle.innerHTML = '<i class="fas fa-sun"></i>';
} else {
localStorage.setItem('theme', 'light');
themeToggle.innerHTML = '<i class="fas fa-moon"></i>';
}
});
// 修改加载逻辑
document.addEventListener('DOMContentLoaded', function() {
// 创建季节元素
createSeasonElements();
// 预加载重要图片
const preloadImages = [
'https://a.520gexing.com/uploads/allimg/2019032616/3mltnpfys55.jpg',
'https://api.yilx.net/image/lunbotu/6.jpg',
'https://api.yilx.net/img/pm'
];
let loadedImages = 0;
function imageLoaded() {
loadedImages++;
if (loadedImages === preloadImages.length) {
completeLoading();
}
}
preloadImages.forEach(src => {
const img = new Image();
img.src = src;
img.onload = imageLoaded;
img.onerror = imageLoaded; // 即使出错也继续
});
// 设置超时保证无论如何都会完成加载
setTimeout(completeLoading, 3000);
});
function completeLoading() {
// 移除loading类，显示内容
document.body.classList.remove('loading');
document.body.classList.add('loaded');
// 淡出加载动画
const loadingElement = document.querySelector('.tengyuan-loading');
loadingElement.classList.add('hidden');
// 动画结束后移除元素
loadingElement.addEventListener('transitionend', function() {
loadingElement.remove();
});
}
// 季节SVG元素定义
const seasonSVGs = {
spring: [
// 粉色樱花
`<svg viewBox="0 0 100 100" width="30" height="30">
<path d="M50 20 Q60 0 70 20 T90 30 Q100 40 80 50 T70 70 Q60 90 50 70 T30 50 Q10 40 20 30 T30 20 Q40 0 50 20"
fill="#FF9FF3"/>
</svg>`,
// 黄色小花
`<svg viewBox="0 0 100 100" width="30" height="30">
<circle cx="50" cy="50" r="20" fill="#FECA57"/>
<circle cx="50" cy="30" r="8" fill="#FF9F43"/>
<circle cx="65" cy="40" r="8" fill="#FF9F43"/>
<circle cx="70" cy="60" r="8" fill="#FF9F43"/>
<circle cx="60" cy="75" r="8" fill="#FF9F43"/>
<circle cx="40" cy="75" r="8" fill="#FF9F43"/>
<circle cx="30" cy="60" r="8" fill="#FF9F43"/>
<circle cx="35" cy="40" r="8" fill="#FF9F43"/>
</svg>`
],
summer: [
// 绿色树叶1
`<svg viewBox="0 0 100 100" width="35" height="35">
<path d="M50 10 Q80 30 50 70 Q20 30 50 10"
fill="#1DD1A1" stroke="#10AC84" stroke-width="2"/>
</svg>`,
// 绿色树叶2
`<svg viewBox="0 0 100 100" width="35" height="35">
<path d="M50 10 L70 40 L50 70 L30 40 Z"
fill="#1DD1A1" stroke="#10AC84" stroke-width="2"/>
</svg>`
],
autumn: [
// 红色枫叶1
`<svg viewBox="0 0 100 100" width="32" height="32">
<path d="M50 10 Q70 20 60 40 Q80 30 70 50 Q60 70 50 60 Q40 70 30 50 Q20 30 40 40 Q30 20 50 10"
fill="#FF6B6B" stroke="#EE5253" stroke-width="2"/>
</svg>`,
// 红色枫叶2
`<svg viewBox="0 0 100 100" width="32" height="32">
<path d="M50 10 L60 30 L80 10 L70 40 L90 50 L70 60 L80 90 L60 70 L50 90 L40 70 L20 90 L30 60 L10 50 L30 40 L20 10 L40 30 Z"
fill="#FF6B6B" stroke="#EE5253" stroke-width="2"/>
</svg>`
],
winter: [
// 白色雪花1
`<svg viewBox="0 0 100 100" width="28" height="28">
<path d="M50 10 L60 30 L80 30 L65 45 L75 65 L50 55 L25 65 L35 45 L20 30 L40 30 Z"
fill="#C8D6E5" stroke="#FFFFFF" stroke-width="2"/>
</svg>`,
// 白色雪花2
`<svg viewBox="0 0 100 100" width="28" height="28">
<path d="M50 10 L60 25 L75 15 L65 35 L90 35 L70 50 L90 65 L65 65 L75 85 L60 75 L50 90 L40 75 L25 85 L35 65 L10 65 L30 50 L10 35 L35 35 L25 15 L40 25 Z"
fill="#FFFFFF" stroke="#C8D6E5" stroke-width="1"/>
</svg>`
]
};
function createSeasonElements() {
const container = document.getElementById('season-elements-container');
const now = new Date();
const month = now.getMonth() + 1;
let season, elementCount, elementOpacity;
// 季节判定
if (month >= 3 && month <= 5) { // 春 (3-5月)
season = "spring";
elementCount = 12;
elementOpacity = 0.6;
} else if (month >= 6 && month <= 8) { // 夏 (6-8月)
season = "summer";
elementCount = 10;
elementOpacity = 0.7;
} else if (month >= 9 && month <= 11) { // 秋 (9-11月)
season = "autumn";
elementCount = 15;
elementOpacity = 0.65;
} else { // 冬 (12-2月)
season = "winter";
elementCount = 18;
elementOpacity = 0.75;
}
// 设置季节标识
const seasonNames = {spring: "春", summer: "夏", autumn: "秋", winter: "冬"};
document.getElementById('seasonIndicator').textContent = seasonNames[season];
// 创建飘落元素
for (let i = 0; i < elementCount; i++) {
const element = document.createElement('div');
element.className = 'season-element';
// 随机选择当前季节的SVG
const svgIndex = Math.floor(Math.random() * seasonSVGs[season].length);
element.innerHTML = seasonSVGs[season][svgIndex];
// 设置随机位置和动画参数
const startX = Math.random() * 100;
const randomX = (Math.random() * 30) - 15; // -15px 到 15px 之间的随机偏移
element.style.left = `${startX}vw`;
element.style.setProperty('--start-x', `${(Math.random() * 15) - 7.5}px`);
element.style.setProperty('--random-x', `${randomX}px`);
element.style.setProperty('--element-opacity', elementOpacity);
element.style.animationDuration = `${(Math.random() * 6) + 6}s`; // 6-12秒
element.style.animationDelay = `${Math.random() * 3}s`; // 0-3秒延迟
container.appendChild(element);
}
}
// 页面加载完成后执行
window.addEventListener('load', function() {
createSeasonElements();
// 2秒后移除加载动画
setTimeout(() => {
const loadingElement = document.querySelector('.tengyuan-loading');
loadingElement.style.animation = 'fadeIn 0.4s ease-out reverse forwards';
setTimeout(() => {
loadingElement.remove();
}, 400);
}, 2000);
});
// 更新FPS监控代码
(function() {
const fpsDisplay = document.getElementById('fpsDisplay');
const fpsValue = fpsDisplay.querySelector('.fps-value');
const fpsStatus = fpsDisplay.querySelector('.fps-status');
const fpsCharacter = fpsDisplay.querySelector('.fps-character');
let lastTime = performance.now();
let frameCount = 0;
let animationFrameId;
let lastFps = 60;
// 角色表情集合
const characters = {
excellent: ["ヽ(•̀ω•́ )ゝ✧", "(๑•̀ㅂ•́)و✧", "٩(◕‿◕｡)۶"],
good: ["(￣ω￣)", "(｀・ω・´)", "（￣︶￣）↗"],
normal: ["(´･_･`)", "( ˘･_･˘ )", "(；一_一)"],
low: ["(╥﹏╥)", "(´；ω；`)", "(>_<)"],
critical: ["(ﾟДﾟ≡ﾟДﾟ)", "(╯°□°）╯︵ ┻━┻", "Σ(°△°|||)︴"]
};
function updateFPS() {
const now = performance.now();
frameCount++;
if (now - lastTime >= 1000) {
const fps = Math.round(frameCount * 1000 / (now - lastTime));
lastFps = fps;
// 状态分类
let status = '', statusClass = '', character = '';
if (fps >= 55) {
status = '超流畅!';
statusClass = 'excellent';
character = characters.excellent[Math.floor(Math.random() * characters.excellent.length)];
} else if (fps >= 45) {
status = '流畅~';
statusClass = 'good';
character = characters.good[Math.floor(Math.random() * characters.good.length)];
} else if (fps >= 30) {
status = '一般般';
statusClass = 'normal';
character = characters.normal[Math.floor(Math.random() * characters.normal.length)];
} else if (fps >= 15) {
status = '卡卡哒';
statusClass = 'low';
character = characters.low[Math.floor(Math.random() * characters.low.length)];
} else {
status = '要崩溃!';
statusClass = 'critical';
character = characters.critical[Math.floor(Math.random() * characters.critical.length)];
}
// 更新显示
fpsValue.textContent = fps;
fpsStatus.textContent = status;
fpsCharacter.textContent = character;
// 更新状态类
fpsDisplay.className = 'comic-fps ' + statusClass;
frameCount = 0;
lastTime = now;
}
animationFrameId = requestAnimationFrame(updateFPS);
}
// 心跳动画
setInterval(() => {
if (lastFps >= 30) {
fpsCharacter.style.transform = 'translateY(0px)';
setTimeout(() => {
fpsCharacter.style.transform = 'translateY(2px)';
}, 100);
}
}, 3000);
updateFPS();
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
cancelAnimationFrame(animationFrameId);
} else {
lastTime = performance.now();
frameCount = 0;
updateFPS();
}
});
})();
// 日历功能
function renderCalendar(year, month) {
const calendarDays = document.getElementById('calendarDays');
const calendarMonth = document.getElementById('calendarMonth');
// 设置月份标题
const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
calendarMonth.textContent = `${year}年 ${monthNames[month]}`;
// 获取当月第一天和最后一天
const firstDay = new Date(year, month, 1);
const lastDay = new Date(year, month + 1, 0);
// 获取当月天数
const daysInMonth = lastDay.getDate();
// 获取当月第一天是星期几 (0-6, 0是星期日)
const firstDayOfWeek = firstDay.getDay();
// 获取上个月最后几天
const prevMonthLastDay = new Date(year, month, 0).getDate();
// 清空日历
calendarDays.innerHTML = '';
// 添加上个月的几天
for (let i = firstDayOfWeek - 1; i >= 0; i--) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day other-month';
dayElement.textContent = prevMonthLastDay - i;
calendarDays.appendChild(dayElement);
}
// 添加当月天数
const today = new Date();
for (let i = 1; i <= daysInMonth; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day';
dayElement.textContent = i;
// 标记今天
if (year === today.getFullYear() && month === today.getMonth() && i === today.getDate()) {
dayElement.classList.add('today');
}
calendarDays.appendChild(dayElement);
}
// 添加下个月的前几天
const nextMonthDays = 42 - (firstDayOfWeek + daysInMonth); // 6行x7天=42格
for (let i = 1; i <= nextMonthDays; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'calendar-day other-month';
dayElement.textContent = i;
calendarDays.appendChild(dayElement);
}
}
// 初始化日历
let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();
renderCalendar(currentYear, currentMonth);
// 日历导航按钮
document.getElementById('calendarPrev').addEventListener('click', () => {
currentMonth--;
if (currentMonth < 0) {
currentMonth = 11;
currentYear--;
}
renderCalendar(currentYear, currentMonth);
});
document.getElementById('calendarNext').addEventListener('click', () => {
currentMonth++;
if (currentMonth > 11) {
currentMonth = 0;
currentYear++;
}
renderCalendar(currentYear, currentMonth);
});
// 待办事项功能
const todoList = document.getElementById('todoList');
const todoInput = document.querySelector('.todo-input');
const todoSubmit = document.querySelector('.todo-submit');
// 添加新任务
function addTodoItem(text, completed = false) {
const li = document.createElement('li');
li.className = 'todo-item';
li.innerHTML = `
<input type="checkbox" class="todo-checkbox" ${completed ? 'checked' : ''}>
<span class="todo-text ${completed ? 'completed' : ''}">${text}</span>
<i class="fas fa-trash todo-delete"></i>
`;
// 添加事件监听器
const checkbox = li.querySelector('.todo-checkbox');
const deleteBtn = li.querySelector('.todo-delete');
checkbox.addEventListener('change', function() {
const textElement = this.nextElementSibling;
textElement.classList.toggle('completed', this.checked);
saveTodos();
});
deleteBtn.addEventListener('click', function() {
li.remove();
saveTodos();
});
todoList.appendChild(li);
}
// 保存待办事项到本地存储
function saveTodos() {
const todos = [];
document.querySelectorAll('.todo-item').forEach(item => {
todos.push({
text: item.querySelector('.todo-text').textContent,
completed: item.querySelector('.todo-checkbox').checked
});
});
localStorage.setItem('todos', JSON.stringify(todos));
}
// 从本地存储加载待办事项
function loadTodos() {
const todos = JSON.parse(localStorage.getItem('todos')) || [];
todos.forEach(todo => {
addTodoItem(todo.text, todo.completed);
});
}
// 添加新任务
todoSubmit.addEventListener('click', function() {
const text = todoInput.value.trim();
if (text) {
addTodoItem(text);
todoInput.value = '';
saveTodos();
}
});
// 按Enter键添加任务
todoInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
todoSubmit.click();
}
});
// 初始化加载待办事项
loadTodos();
// 模拟访客统计图表
function initVisitorChart() {
const canvas = document.getElementById('visitorChart');
if (!canvas) return;
const ctx = canvas.getContext('2d');
canvas.width = canvas.parentElement.offsetWidth;
canvas.height = canvas.parentElement.offsetHeight;
// 模拟数据
const labels = ['1日', '5日', '10日', '15日', '20日', '25日', '30日'];
const data = [50, 120, 80, 150, 200, 180, 220];
// 绘制图表
ctx.fillStyle = 'rgba(255, 77, 77, 0.2)';
ctx.strokeStyle = 'rgba(255, 77, 77, 1)';
ctx.lineWidth = 2;
const maxValue = Math.max(...data);
const scaleY = canvas.height / maxValue;
const stepX = canvas.width / (labels.length - 1);
ctx.beginPath();
ctx.moveTo(0, canvas.height - data[0] * scaleY);
for (let i = 1; i < data.length; i++) {
const x = i * stepX;
const y = canvas.height - data[i] * scaleY;
ctx.lineTo(x, y);
}
ctx.stroke();
// 填充区域
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(0, canvas.height);
ctx.closePath();
ctx.fill();
// 绘制数据点
ctx.fillStyle = 'rgba(255, 77, 77, 1)';
for (let i = 0; i < data.length; i++) {
const x = i * stepX;
const y = canvas.height - data[i] * scaleY;
ctx.beginPath();
ctx.arc(x, y, 4, 0, Math.PI * 2);
ctx.fill();
}
}
// 初始化图表
window.addEventListener('load', initVisitorChart);
window.addEventListener('resize', initVisitorChart);
</script>
</body>
</html>
index.html
style.css
index.js