<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TENG YUAN - 个人主页</title>
<meta name="description" content="藤原的个人主页，分享技术、生活和创意">
<meta name="keywords" content="藤原,个人主页,前端开发,技术博客">
<!-- 网站图标 -->
<link rel="icon" href="https://img.alicdn.com/imgextra/i1/2214968904665/O1CN01FU7InI1kKcib7hRbf_!!2214968904665.jpg_.webp" type="image/webp">
<link rel="shortcut icon" href="https://img.alicdn.com/imgextra/i1/2214968904665/O1CN01FU7InI1kKcib7hRbf_!!2214968904665.jpg_.webp" type="image/webp">
<link rel="apple-touch-icon" href="https://img.alicdn.com/imgextra/i1/2214968904665/O1CN01FU7InI1kKcib7hRbf_!!2214968904665.jpg_.webp">
<!-- 预连接优化 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.jsdelivr.net">
<!-- 字体加载 -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<!-- 图标库 -->
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.min.css" rel="stylesheet">
<!-- JavaScript 库 -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<!-- 预加载关键资源 -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" as="style">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.min.css" as="style">
<!-- 主题颜色 -->
<meta name="theme-color" content="#799fb4">
<!-- 苹果全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- 微软磁贴颜色 -->
<meta name="msapplication-TileColor" content="#799fb4">
<!-- 其他图标配置 -->
<link rel="manifest" href="site.webmanifest">
<style>
/****************************************
* 重置样式
*****************************************/
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
font-size: 100%;
vertical-align: baseline;
box-sizing: border-box;
transition: all ease 0.25s;
-moz-transition: all ease 0.25s;
}
*:focus, button, textarea, .forminput {
outline: none !important;
border: unset;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
content: "";
}
/* 隐藏损坏的链接和图片 */
img[src="<i>No Information</i>"],
img[src=""],
a[href="<i>No Information</i>"],
a[href=""]:not([name]):not([onclick]) {
display: none !important;
}
/* 调整表情符号大小 */
a[href*="javascript:emoticon"] img,
div.postcolor img[alt*="https"],
td[class*="post"] img[alt*="https"],
a[href*="javascript:add_smilie"] img,
#ucpcontent img[alt*="https"],
div.box img[alt*="https"] {
height: 30px;
}
/****************************************
* 默认样式
*****************************************/
body, html {
margin: 0px;
padding: 0px;
scroll-behavior: smooth;
font: 500 16px/150% var(--fontBody);
color: var(--dark);
}
body {
background: linear-gradient(
360deg,
RGBA(var(--accentRGB), 0.35) 0%,
RGBA(var(--lighterRGB), 1) 70%
),
linear-gradient(
135deg,
RGBA(var(--supportRGB), 0.35) 10%,
RGBA(var(--supportRGB), 0) 80%
),
linear-gradient(
225deg,
RGBA(var(--featureRGB), 0.35) 10%,
RGBA(var(--featureRGB), 0) 80%
),
linear-gradient(
315deg,
RGBA(var(--supportRGB), 0.35) 100%,
RGBA(var(--supportRGB), 0) 70%
);
background-attachment: fixed;
background-size: cover;
}
a {
text-decoration: none;
cursor: crosshair;
}
/****************************************
* CSS变量定义
*****************************************/
:root {
.bannerImage {
border-radius: 0 20px 20px 0;
}
.bannerImage video {
border-radius: inherit;
}
--headerHeight: 605px;
--settingImage: url(https://img.alicdn.com/imgextra/i1/2214968904665/O1CN01x1Sp471kKciYVOjv5_!!2214968904665.jpg_.webp);
--fontBody: Quicksand;
--fontTitle: MontgroveItalic;
/* 默认主题色 */
--accent: #799fb4;
--accentRGB: 121, 159, 180;
--support: #99ccff;
--supportRGB: 186, 132, 130;
--feature: #a6b0b4;
--featureRGB: 166, 176, 180;
--dark: #1c1a1a;
--darkRGB: 28, 26, 26;
--darker: #101010;
--darkerRGB: 16, 16, 16;
--lighter: #e2e2e2;
--lighterRGB: 226, 226, 226;
--light: #d2d2d2;
--lightRGB: 210, 210, 210;
/* 这些颜色不会随主题切换变化 */
--lightest: #ffffff;
--lightestRGB: 225, 225, 225;
--darkest: #101010;
--darkestRGB: 16, 16, 16;
/* 终端相关变量 */
--editor-bg: RGBA(var(--accentRGB), 0.1);
--editor-secondary-bg: RGBA(var(--supportRGB), 0.1);
--line-color: var(--accent);
--text-color: var(--dark);
--keyword-color: var(--support);
--string-color: var(--feature);
--comment-color: RGBA(var(--accentRGB), 0.7);
--number-color: var(--accent);
--function-color: var(--support);
--font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
--header-bg: RGBA(var(--accentRGB), 0.2);
--window-btn-close: #ff5f56;
--window-btn-min: #ffbd2e;
--window-btn-max: #27c93f;
--ai-output-color: var(--dark);
--user-input-color: var(--support);
--video-bg: #000000;
--terminal-accent-color: var(--support);
--terminal-accent-hover: var(--feature);
--box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--border-radius: 15px;
--success-color: #4caf50;
--warning-color: #ff9800;
--error-color: #f44336;
--tool-header-height: 40px;
--tool-padding: 16px;
--terminal-border: 1px solid RGBA(var(--accentRGB), 0.3);
}
/* 深色主题变量 */
[data-theme="dark"] {
--dark: #e2e2e2;
--darkRGB: 226, 226, 226;
--darker: #d2d2d2;
--darkerRGB: 210, 210, 210;
--lighter: #2a2828;
--lighterRGB: 42, 40, 40;
--light: #101010;
--lightRGB: 16, 16, 16;
/* 终端深色主题调整 */
--editor-bg: RGBA(var(--accentRGB), 0.05);
--editor-secondary-bg: RGBA(var(--supportRGB), 0.05);
--line-color: var(--accent);
--text-color: var(--light);
--keyword-color: var(--support);
--string-color: var(--feature);
--comment-color: RGBA(var(--accentRGB), 0.5);
--header-bg: RGBA(var(--accentRGB), 0.1);
--terminal-accent-color: var(--support);
--terminal-accent-hover: var(--feature);
}
/* 主题切换按钮样式 */
.theme-switch {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
background-color: var(--lighter);
padding: 5px 10px;
font-weight: 800;
color: var(--dark);
border-radius: 20px;
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.25);
cursor: pointer;
}
.theme-switch input[type="checkbox"] {
display: none;
}
/* 默认显示浅色图标，隐藏深色图标 */
.light-icon {
display: flex;
font-size: 20px;
color: var(--dark);
}
.dark-icon {
display: none;
font-size: 20px;
color: var(--dark);
}
/* 深色主题下显示深色图标，隐藏浅色图标 */
[data-theme="dark"] .light-icon {
display: none;
}
[data-theme="dark"] .dark-icon {
display: flex;
}
.theme-switch:hover i {
color: var(--accent);
}
/****************************************
* 字体定义
*****************************************/
@font-face {
font-family: "MontgroveItalic";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Montgrove_Italic.woff")
format("woff");
font-display: swap;
}
/****************************************
* 主容器样式
*****************************************/
#headerWave {
position: fixed;
z-index: -1;
}
#boardWrapper {
position: relative;
display: flex;
flex-direction: column;
gap: 15px;
width: clamp(450px, 100%, 1200px);
background: var(--light);
padding: 45px 30px 30px;
min-height: 100vh;
margin: auto;
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.25);
overflow: clip;
}
/****************************************
* 顶部导航栏样式
*****************************************/
#topbar {
position: sticky;
top: 40px;
z-index: 9990;
width: calc(100% - 60px);
margin: 10px 30px -10px;
}
//#boardWrapper {// position: relative;// display: flex;// width: 100%;//}
.topbarlinks {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 30px;
}
.topbarlinks .quickLinks {
display: flex;
gap: 15px;
}
.topbarlinks .quickLinks a,
.topbarlinks .quickLinks label {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
background-color: var(--lighter);
padding: 5px 5px 5px 6px;
font-weight: 800;
color: var(--dark);
width: 35px;
height: 35px;
border-radius: 50%;
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.25);
overflow: hidden;
}
.topbarlinks .quickLinks a i,
.topbarlinks .quickLinks label i {
font-size: 20px;
padding-left: 2px;
}
.topbarlinks .quickLinks a:hover,
.topbarlinks .quickLinks label:hover {
width: unset !important;
border-radius: 20px;
padding-right: 10px;
justify-content: center;
}
.topbarlinks .quickLinks a:hover i,
.topbarlinks .quickLinks label:hover i {
color: var(--accent);
}
.topbarlinks button {
background: unset !important;
color: var(--dark);
font-size: 30px;
}
.topbarlinks button:active {
transform: scale(1.1);
}
/****************************************
* 用户导航菜单样式
*****************************************/
#linkmenu-container {
position: fixed;
z-index: 9989;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: none;
}
#linkmenu {
position: fixed;
z-index: 9989;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: RGBA(var(--lightRGB), 0.9);
backdrop-filter: blur(10px);
visibility: hidden;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
#linkmenu.show {
visibility: visible;
pointer-events: auto;
}
/* 终端样式 */
#terminal-container {
position: relative;
width: 90%;
max-width: 900px;
height: 80%;
max-height: 700px;
z-index: 9999;
background: var(--editor-bg);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
border: var(--terminal-border);
display: flex;
flex-direction: column;
overflow: hidden;
backdrop-filter: blur(5px);
}
/* 终端编辑器样式 */
.editor {
width: 100%;
height: 100%;
background: var(--editor-bg);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
overflow: hidden;
border: var(--terminal-border);
display: flex;
flex-direction: column;
backdrop-filter: blur(5px);
}
.editor-header {
background: var(--header-bg);
padding: 12px;
border-radius: var(--border-radius) var(--border-radius) 0 0;
display: flex;
align-items: center;
gap: 8px;
border-bottom: var(--terminal-border);
}
.window-btn {
width: 12px;
height: 12px;
border-radius: 50%;
position: relative;
cursor: pointer;
}
.close { background: var(--window-btn-close); }
.minimize { background: var(--window-btn-min); }
.maximize { background: var(--window-btn-max); }
.title-bar {
color: var(--line-color);
margin-left: 20px;
font-size: 0.9em;
font-family: var(--fontBody);
font-weight: 600;
}
.editor-content {
padding: 20px;
counter-reset: line;
font-size: 14px;
overflow-x: auto;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
flex: 1;
font-family: var(--font-family);
background: transparent;
}
.editor-content::-webkit-scrollbar {
display: none;
}
.line {
display: flex;
padding: 2px 0;
position: relative;
min-height: 1.6em;
}
.line::before {
counter-increment: line;
content: counter(line);
color: var(--line-color);
width: 2em;
text-align: right;
padding-right: 1em;
position: absolute;
opacity: 0.7;
font-family: var(--font-family);
}
.line-content {
padding-left: 3em;
width: 100%;
font-family: var(--font-family);
}
.indent { margin-left: 2em; }
.indent-2 { margin-left: 4em; }
.keyword { color: var(--keyword-color); font-weight: 600; }
.string { color: var(--string-color); }
.comment { color: var(--comment-color); font-style: italic; }
.number { color: var(--number-color); }
.function { color: var(--function-color); font-weight: 600; }
.ai-output { color: var(--ai-output-color); }
.user-input { color: var(--user-input-color); font-weight: 600; }
.input-line {
display: flex;
align-items: center;
background: var(--editor-secondary-bg);
padding: 8px 10px;
border-radius: 4px;
margin: 0 20px 20px;
position: sticky;
bottom: 0;
z-index: 10;
border-top: var(--terminal-border);
}
.input-line::before {
content: ">";
color: var(--terminal-accent-color);
width: 2em;
text-align: right;
padding-right: 1em;
font-weight: bold;
}
.input-line input {
flex: 1;
background: transparent;
border: none;
color: var(--text-color);
font-family: var(--font-family);
font-size: 14px;
outline: none;
padding: 2px 0;
}
/* 通用工具容器样式 */
.tool-container {
background: var(--editor-secondary-bg);
border-radius: var(--border-radius);
margin: 15px 0;
border: var(--terminal-border);
overflow: hidden;
backdrop-filter: blur(5px);
width: 100%;
max-width: 100%;
}
/* 通用工具头部样式 */
.tool-header {
background: var(--header-bg);
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--terminal-border);
}
.tool-title {
color: var(--text-color);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.tool-close {
background: none;
border: none;
color: var(--line-color);
cursor: pointer;
padding: 4px;
border-radius: 4px;
}
.tool-close:hover {
color: var(--text-color);
background: RGBA(var(--accentRGB), 0.1);
}
/* 通用工具内容样式 */
.tool-content {
padding: 20px;
width: 100%;
box-sizing: border-box;
}
/* 通用输入区域样式 */
.tool-input {
width: 100%;
padding: 12px 50px 12px 16px;
border: var(--terminal-border);
border-radius: 8px;
background: var(--editor-secondary-bg);
color: var(--text-color);
font-size: 14px;
outline: none;
box-sizing: border-box;
}
.tool-input:focus {
border-color: var(--terminal-accent-color);
box-shadow: 0 0 0 3px RGBA(var(--supportRGB), 0.2);
}
/* 通用按钮样式 */
.tool-btn {
background: var(--terminal-accent-color);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.tool-btn:hover {
background: var(--terminal-accent-hover);
transform: translateY(-1px);
}
/* 视频播放器样式*/
.video-container {
background: var(--video-bg);
border-radius: var(--border-radius);
margin: 15px 0;
overflow: hidden;
border: var(--terminal-border);
width: 100%;
}
.video-player {
position: relative;
width: 100%;
height: 300px;
background: #000;
}
.video-player video, .video-player iframe {
width: 100%;
height: 100%;
object-fit: contain;
border: none;
}
.video-controls {
background: var(--editor-secondary-bg);
padding: 10px;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.video-button {
background: var(--terminal-accent-color);
color: white;
border: none;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
}
.video-button:hover {
background: var(--terminal-accent-hover);
}
/* 搜索结果样式 */
.search-results {
background: var(--editor-bg);
border-radius: var(--border-radius);
margin: 15px 0;
border: var(--terminal-border);
overflow: hidden;
width: 100%;
}
.search-result-item {
padding: 12px;
margin-bottom: 10px;
background: RGBA(var(--accentRGB), 0.05);
border-radius: 8px;
border: var(--terminal-border);
cursor: pointer;
}
.search-result-item:hover {
background: RGBA(var(--accentRGB), 0.1);
transform: translateY(-1px);
}
/* 通用信息展示样式 */
.tool-info {
background: RGBA(var(--supportRGB), 0.1);
border: 1px solid RGBA(var(--supportRGB), 0.3);
border-radius: 6px;
padding: 12px;
margin: 10px 0;
color: var(--text-color);
font-size: 13px;
}
/* 图片预览区域样式 */
.tool-preview-container {
position: relative;
width: 100%;
min-height: 200px;
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
background: RGBA(var(--accentRGB), 0.05);
border: var(--terminal-border);
display: flex;
justify-content: center;
align-items: center;
}
.tool-preview {
max-width: 100%;
max-height: 400px;
display: none;
}
.tool-preview.active {
display: block;
}
.tool-placeholder {
text-align: center;
padding: 20px;
color: var(--line-color);
}
.tool-placeholder svg {
width: 48px;
height: 48px;
margin-bottom: 10px;
color: var(--terminal-accent-color);
}
.tool-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* 隐藏所有滚动条 */
::-webkit-scrollbar {
display: none;
}
* {
scrollbar-width: none;
-ms-overflow-style: none;
}
/****************************************
* 页眉样式
*****************************************/
#boardHeader {
position: relative;
display: grid;
grid-template-columns: 60% 40%;
height: var(--headerHeight);
margin-top: -80px;
}
#boardHeader .bannerInformation {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px;
background-color: var(--lighter);
border-radius: 15px 0px 15px 15px;
margin-right: -15px;
margin-bottom: -20px;
overflow: hidden;
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.25);
}
#boardHeader .bannerInformation.profile-active {
padding: 30px; /* Reduced padding for profile card */
}
#boardHeader .bannerInformation #headerWave1 {
position: absolute;
top: 0px;
width: 100%;
left: 0px;
pointer-events: none;
}
#boardHeader .bannerInformation #headerWave2 {
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
pointer-events: none;
}
/* 横幅标题样式 */
#boardHeader .bannerTitle {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 15px;
}
#boardHeader .bannerTitle h1 {
font: 500 60px/120% var(--fontBody);
letter-spacing: -2px;
}
#boardHeader .bannerTitle h1 b {
position: relative;
font-weight: 800;
}
#boardHeader .bannerTitle h2 {
font-weight: 800;
font-size: 18px;
color: RGBA(var(--darkerRGB), 0.75);
}
#boardHeader .bannerTitle h1 b:after {
content: "";
position: absolute;
z-index: -1;
bottom: 0px;
left: 0px;
display: block;
height: 30%;
width: 100%;
background: var(--light);
border-radius: 5px;
}
/* 横幅图片样式 */
#boardHeader .bannerImage {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
background-image: var(--headerImage);
width: 100%;
height: calc(100% - 45px);
max-height: var(--headerHeight);
background-size: cover;
border-radius: 0px 20px 20px 0px;
}
#boardHeader .bannerImage:before {
content: "";
position: absolute;
z-index: 0;
bottom: -40px;
left: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(84deg);
}
/* 管理员图片样式 */
#boardHeader .bannerStaff {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 0px 10px 10px;
height: auto;
background-color: var(--light);
border-radius: 15px 0px 0px 15px;
}
#boardHeader .bannerStaff:before {
content: "";
position: absolute;
z-index: -1;
top: -40px;
right: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(357deg);
}
#boardHeader .bannerStaff:after {
content: "";
position: absolute;
z-index: -1;
bottom: -40px;
right: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(263deg);
}
#boardHeader .bannerStaff a.adminImage {
display: block;
width: 60px;
height: 60px;
background-color: var(--support);
border-radius: 10px;
}
#boardHeader .bannerStaff img {
display: block;
width: 60px;
height: 60px;
object-fit: cover;
border-radius: 10px;
}
#boardHeader .bannerStaff a:hover img {
transform: scale(1.1);
}
/****************************************
* 中间内容区域样式
*****************************************/
#boardCrotch {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr;
gap: 15px;
padding: 65px 30px 30px;
width: calc(100% + 60px);
background: var(--lighter);
margin: -30px;
}
#boardCrotch:before {
content: "";
position: absolute;
z-index: 0;
top: -40px;
left: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(84deg);
}
#boardCrotch:after {
content: "";
position: absolute;
z-index: 0;
top: -40px;
right: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(350deg);
}
#boardCrotchBottom {
position: relative;
display: block;
width: 100%;
}
#boardCrotchBottom:before {
content: "";
position: absolute;
z-index: 0;
top: 15px;
left: -30px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(165deg);
}
#boardCrotchBottom:after {
content: "";
position: absolute;
z-index: 0;
top: 15px;
right: -30px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(261deg);
}
section.siteArticle {
display: flex;
flex-direction: column;
gap: 15px;
}
section.siteIntroduction {
background: RGBA(var(--lightRGB), 0.75);
padding: 30px;
border-radius: 20px;
}
nav.siteLinks {
display: grid;
grid-template-columns: 1fr auto;
gap: 15px;
}
nav.siteLinks .navLinksContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
}
nav.siteLinks .navTitle {
display: flex;
flex-direction: column;
gap: 5px;
font: 700 40px/100% var(--fontBody);
letter-spacing: -1px;
}
span.navTitle > span:nth-child(1) {
font-size: 45px;
}
span.navTitle span {
position: relative;
z-index: 1;
}
span.navTitle span.navTitleClass:after {
content: "";
position: absolute;
z-index: -1;
bottom: 0px;
left: 0px;
display: block;
height: 50%;
width: 100%;
background: var(--light);
border-radius: 5px;
}
nav.siteLinks .navTitle i {
color: var(--accent);
font-size: 35px;
}
nav.siteLinks a {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
color: var(--dark);
font-weight: 700;
background-color: var(--accent);
padding: 5px 10px 5px 35px;
border-radius: 5px;
overflow: hidden;
}
nav.siteLinks a:nth-child(2n + 1) {
background-color: RGBA(var(--supportRGB), 1);
}
nav.siteLinks a i {
position: absolute;
left: -10px;
font-size: 35px;
font-weight: 100;
color: var(--lighter);
}
nav.siteLinks a:hover i {
transform: scale(1.4);
}
section.siteTime {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 15px;
padding: 30px;
width: 100%;
height: 100%;
color: var(--lightest);
background-color: var(--accent);
background-size: cover;
background-position: center;
background-blend-mode: hard-light;
border-radius: 20px;
}
section.siteTime h1 {
font: 800 30px/120% var(--fontBody);
letter-spacing: -1px;
text-shadow: 1px 2px 0px RGBA(var(--darkestRGB), 0.5);
}
section.siteTime h2 {
position: absolute;
bottom: 0px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 5px;
background: var(--lighter);
padding: 10px 15px 0px;
border-radius: 20px 20px 0px 0px;
color: var(--dark);
}
section.siteTime h2 i {
position: relative;
z-index: 1;
color: var(--accent);
font-size: 20px;
}
section.siteTime h2:before {
content: "";
position: absolute;
z-index: 0;
bottom: 0px;
right: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(76deg);
}
section.siteTime h2:after {
content: "";
position: absolute;
z-index: 0;
bottom: 0px;
left: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(4deg);
}
section.siteTime .siteTimeIcon {
position: absolute;
top: 0px;
left: 0px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--lighter);
width: 50px;
height: 50px;
border-radius: 0px 0px 20px 0px;
}
section.siteTime .siteTimeIcon:before {
content: "";
position: absolute;
z-index: 0;
top: 0px;
right: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(185deg);
}
section.siteTime .siteTimeIcon:after {
content: "";
position: absolute;
z-index: 0;
bottom: -39px;
left: 0px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--lighter);
transform: rotate(168deg);
}
section.siteTime .siteTimeIcon i {
font-size: 25px;
color: var(--accent);
}
section.siteTime:hover .siteTimeIcon i {
transform: scale(1.3);
}
/****************************************
* 垂直轮播导航样式
*****************************************/
.vertical-carousel-container {
position: relative;
height: 200px;
overflow: hidden;
border-radius: 20px;
background: var(--lighter);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
/* 垂直轮播页面样式 */
.vertical-carousel-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 115%;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(100%);
}
/* 当前活动页面 */
.vertical-carousel-page.active {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
z-index: 2;
}
/* 上一个页面 - 向上移出 */
.vertical-carousel-page.prev {
transform: translateY(-100%);
z-index: 1;
}
/* 下一个页面 - 向下移出 */
.vertical-carousel-page.next {
transform: translateY(100%);
z-index: 1;
}
/* 导航链接样式 */
nav.siteLinks {
display: grid;
grid-template-columns: 1fr auto;
gap: 15px;
height: 100%;
}
nav.siteLinks .navLinksContainer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
height: calc(100% - 60px);
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
align-content: flex-start;
}
nav.siteLinks .navLinksContainer::-webkit-scrollbar {
display: none;
}
nav.siteLinks .navTitle {
display: flex;
flex-direction: column;
gap: 5px;
font: 700 40px/100% var(--fontBody);
letter-spacing: -1px;
}
span.navTitle > span:nth-child(1) {
font-size: 45px;
}
span.navTitle span {
position: relative;
z-index: 1;
}
span.navTitle span.navTitleClass:after {
content: "";
position: absolute;
z-index: -1;
bottom: 0px;
left: 0px;
display: block;
height: 50%;
width: 100%;
background: var(--light);
border-radius: 5px;
}
nav.siteLinks .navTitle i {
color: var(--accent);
font-size: 35px;
}
nav.siteLinks a {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 5px;
color: var(--dark);
font-weight: 700;
background-color: var(--accent);
padding: 5px 10px 5px 35px;
border-radius: 5px;
overflow: hidden;
white-space: nowrap;
transition: all 0.3s ease;
height: fit-content;
}
nav.siteLinks a:nth-child(2n + 1) {
background-color: RGBA(var(--supportRGB), 1);
}
nav.siteLinks a i {
position: absolute;
left: -10px;
font-size: 35px;
font-weight: 100;
color: var(--lighter);
transition: transform 0.3s ease;
}
nav.siteLinks a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
nav.siteLinks a:hover i {
transform: scale(1.4);
}
/* 垂直轮播控制按钮 */
.vertical-carousel-controls {
position: absolute;
bottom: 10px;
/* 这是控制垂直位置的属性 */
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 5px;
z-index: 3;
background: rgba(var(--accentRGB), 0.2);
padding: 5px;
border-radius: 20px;
backdrop-filter: blur(5px);
}
.vertical-carousel-btn {
width: 60px;
height: 25px;
border-radius: 12px;
border: none;
background: rgba(var(--accentRGB), 0.7);
color: white;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.vertical-carousel-btn:hover {
background: rgba(var(--supportRGB), 0.8);
transform: translateY(-2px);
}
.vertical-carousel-btn.active {
background: rgba(var(--supportRGB), 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/****************************************
* 内部内容容器样式
*****************************************/
#innerWrapper {
position: relative;
width: 100%;
padding: 30px 0px;
}
/****************************************
* 导航树样式
*****************************************/
.siteNav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
color: RGBA(var(--darkestRGB), 0.75);
font: 600 14px/120% var(--fontBody);
background: linear-gradient(
45deg,
RGBA(var(--accentRGB), 0.5) 0%,
RGBA(var(--accentRGB), 0) 70%
),
linear-gradient(
135deg,
RGBA(var(--supportRGB), 0.5) 10%,
RGBA(var(--supportRGB), 0) 80%
),
linear-gradient(
225deg,
RGBA(var(--featureRGB), 0.5) 10%,
RGBA(var(--featureRGB), 0) 80%
),
linear-gradient(
315deg,
RGBA(var(--supportRGB), 0.5) 100%,
RGBA(var(--supportRGB), 0) 70%
);
padding: 10px;
border-radius: 20px;
backdrop-filter: blur(5px);
}
.siteNav a,
.siteNav label {
color: var(--darkest);
}
.siteNav i {
font-size: 20px;
font-weight: 500;
color: var(--lightest);
}
/* 单篇文章展示区域 */
.single-article-container {
position: relative;
width: 100%;
height: 180px;
overflow: hidden;
border-radius: 8px;
background: white;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.article-slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease, transform 0.6s ease;
transform: translateX(100%);
display: flex;
flex-direction: column;
}
.article-slide.active {
opacity: 1;
transform: translateX(0);
z-index: 2;
}
.article-slide.prev {
transform: translateX(-100%);
z-index: 1;
}
.article-slide.next {
transform: translateX(100%);
z-index: 1;
}
.article-header {
position: relative;
height: 100px;
flex-shrink: 0;
}
.article-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.article-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.7));
color: white;
font-size: 14px;
font-weight: 600;
padding: 10px;
line-height: 1.3;
text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.article-content {
padding: 10px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.article-excerpt {
font-size: 12px;
color: #666;
margin-bottom: 8px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article-meta {
display: flex;
justify-content: space-between;
font-size: 11px;
color: #999;
margin-top: auto;
}
.article-controls {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 10px;
z-index: 3;
}
.article-control-btn {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(121, 159, 180, 0.3);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.article-control-btn.active {
background: rgba(121, 159, 180, 1);
transform: scale(1.2);
}
.article-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(255,255,255,0.8);
color: #799fb4;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 4;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
opacity: 0;
transition: opacity 0.3s ease;
}
.single-article-container:hover .article-nav-btn {
opacity: 1;
}
.article-prev-btn {
left: 10px;
}
.article-next-btn {
right: 10px;
}
/* 推荐文章页面特定样式 */
.recommend-page .navLinksContainer {
flex-direction: column;
flex-wrap: nowrap;
height: calc(100% - 50px);
padding: 0;
}
.recommend-page .navTitle {
font-size: 28px;
}
.recommend-page .navTitle > span:nth-child(1) {
font-size: 32px;
}
/****************************************
* 页脚样式
*****************************************/
#boardFooter {
position: relative;
width: 100%;
}
/****************************************
* 媒体查询 - 响应式设计
*****************************************/
@media screen and (max-width: 950px) {
}
@media screen and (max-width: 860px) {
#boardHeader {
display: flex !important;
flex-direction: column !important;
gap: 40px;
height: unset !important;
}
#boardHeader .bannerInformation {
border-radius: 15px !important;
}
#boardHeader .bannerInformation.profile-active {
padding: 30px; /* Ensure padding is adjusted on mobile too */
}
#boardHeader .bannerImage:before {
top: 92px;
left: -44px;
}
.bannerInformation {
margin: 0px !important;
padding: 200px 40px !important;
}
#boardHeader .bannerImage {
background-image: unset !important;
height: unset !important;
margin-bottom: 30px !important;
}
#boardHeader .bannerStaff {
display: flex;
flex-direction: row;
gap: 30px;
padding: unset !important;
background-color: unset !important;
border-radius: unset !important;
}
#boardHeader .bannerStaff:after,
#boardHeader .bannerStaff:before {
display: none !important;
}
#boardCrotch {
grid-template-columns: unset !important;
grid-template-rows: auto 1fr !important;
gap: 40px !important;
margin-top: 0px !important;
}
section.siteArticle {
z-index: 0;
flex-direction: column-reverse !important;
gap: 40px !important;
}
section.siteTime {
zindex: 1;
background-image: unset !important;
padding-bottom: 60px;
}
/* Mobile adjustments for terminal position */
#terminal-container {
width: 95%;
height: 85%;
max-height: none;
}
/* Mobile adjustments for terminal menu */
#linkmenu {
padding: 20px;
}
/* Mobile adjustments for video player */
.video-container {
margin-left: -15px;
margin-right: -15px;
border-radius: 0;
width: calc(100% + 30px);
}
/* Mobile adjustments for tool container */
.tool-container {
margin-left: -15px;
margin-right: -15px;
border-radius: 0;
width: calc(100% + 30px);
}
}
/* 每日一言 */
.siteIntroduction {
min-height: 120px;
display: flex;
flex-direction: column;
justify-content: center;
}
.quote-content {
font-size: 18px;
line-height: 1.6;
margin-bottom: 10px;
}
.quote-from {
font-size: 14px;
color: var(--line-color);
text-align: right;
font-style: italic;
}
/* 底部信息*/
.siteNav {
background: #799fb4;
color: #333;
padding: 10px;
border-radius: 20px;
backdrop-filter: none;
}
.status-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: 100%;
max-width: 800px;
}
.status-info {
display: flex;
align-items: center;
gap: 25px;
padding: 5px 0;
}
#fps-counter {
font-family: var(--font-family);
font-size: 13px;
color: var(--dark);
letter-spacing: 0.5px;
}
.weather-widget {
display: flex;
transition: all 0.3s ease;
}
.weather-content {
display: flex;
align-items: center;
gap: 15px;
}
.weather-main {
display: flex;
align-items: center;
gap: 5px;
}
.weather-location {
display: flex;
align-items: center;
gap: 5px;
font-size: 13px;
color: var(--dark);
}
.weather-location i {
color: var(--accent);
font-size: 12px;
}
.weather-temp {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
font-weight: 500;
color: var(--dark);
}
.weather-temp i {
color: var(--feature);
}
.weather-details {
display: flex;
align-items: center;
gap: 12px;
}
.weather-condition {
display: flex;
align-items: center;
gap: 5px;
color: var(--dark);
}
.weather-icon {
color: var(--support);
font-size: 12px;
}
.weather-stats {
display: flex;
gap: 12px;
}
.weather-stats span {
display: flex;
align-items: center;
gap: 3px;
color: var(--dark);
}
.weather-stats i {
font-size: 11px;
}
.weather-loading,
.weather-error {
font-size: 13px;
padding: 5px 0;
color: var(--dark);
}
//* 页脚链接样式 */
.siteNav {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-wrap: wrap; /* 允许换行 */
gap: 10px; /* 元素间距 */
padding: 10px 0; /* 上下内边距 */
width: 100%; /* 确保占据全部宽度 */
}
.footer-info {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px 20px; /* 行间距10px，列间距20px */
font-size: 14px;
color: var(--dark);
width: 100%; /* 确保占据全部宽度 */
text-align: center; /* 文本居中 */
}
.footer-info a {
color: var(--dark);
text-decoration: none;
transition: color 0.3s;
}
.footer-info a:hover {
color: var(--accent);
text-decoration: underline;
}
#performance-info {
display: inline-flex;
align-items: center;
gap: 5px;
}
/* 响应式调整 - 在小屏幕上堆叠显示 */
@media (max-width: 600px) {
.footer-info {
flex-direction: column;
gap: 5px;
}
}
/* 加载动画 */
.loader {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(var(--accentRGB), 0.3);
border-radius: 50%;
border-top-color: var(--accent);
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* 平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 图片懒加载 */
img[data-src] {
opacity: 0;
transition: opacity 0.3s;
}
img.lazyloaded {
opacity: 1;
}
/* 访问性改进 */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* 打印样式 */
@media print {
body * {
visibility: hidden;
}
#printable, #printable * {
visibility: visible;
}
#printable {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
}
/* 代码格式化容器样式 */
.code-formatter-container {
background: var(--editor-secondary-bg);
border-radius: var(--border-radius);
margin: 15px 0;
border: var(--terminal-border);
overflow: hidden;
backdrop-filter: blur(5px);
width: 100%;
max-width: 100%;
}
.code-formatter-header {
background: var(--header-bg);
padding: 12px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: var(--terminal-border);
}
.code-formatter-title {
color: var(--text-color);
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 8px;
}
.code-formatter-close {
background: none;
border: none;
color: var(--line-color);
cursor: pointer;
padding: 4px;
border-radius: 4px;
}
.code-formatter-content {
padding: 15px;
width: 100%;
box-sizing: border-box;
}
.code-formatter-textarea {
width: 100%;
min-height: 200px;
padding: 12px;
border: var(--terminal-border);
border-radius: 8px;
background: var(--editor-bg);
color: var(--text-color);
font-family: var(--font-family);
font-size: 14px;
line-height: 1.5;
resize: vertical;
outline: none;
white-space: pre;
overflow-x: auto;
}
.code-formatter-actions {
display: flex;
gap: 10px;
margin-top: 15px;
flex-wrap: wrap;
}
.code-formatter-btn {
background: var(--terminal-accent-color);
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
display: flex;
align-items: center;
gap: 6px;
font-weight: 500;
}
.code-formatter-btn:hover {
background: var(--terminal-accent-hover);
transform: translateY(-1px);
}
.code-type-selector {
flex: 1;
min-width: 120px;
padding: 8px 12px;
border: var(--terminal-border);
border-radius: 6px;
background: var(--editor-bg);
color: var(--text-color);
font-family: var(--fontBody);
font-size: 12px;
outline: none;
}
/* 躲猫猫*/
#maomao {
position: fixed;
bottom: 40px;
right: -5px;
width: 57px;
height: 70px;
background-image: url(https://siitake.cn/src/mao.svg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
transition: background .3s;
z-index: 99999; /* Added to ensure it stays on top */
}
#maomao:hover {
background-position: 60px 50%;
}
/* 手机设备 (小于768px) */
@media screen and (max-width: 860px) {
#boardHeader .bannerImage video {
display: none !important;
}
#boardHeader .bannerStaff {
position: relative;
background: var(--lighter);
padding: 15px;
border-radius: 15px;
margin-top: 20px;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
}
/* 个人信息卡片样式 */
.profile-card {
display: flex;
flex-direction: column;
align-items: center;
max-width: 500px; /* Added for better desktop layout */
margin: 0 auto; /* Added for better desktop layout */
padding: 20px; /* Added for internal spacing */
}
.profile-avatar-container {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.profile-avatar {
width: 140px;
height: 140px;
border-radius: 50%;
border: 5px solid var(--accent);
object-fit: cover;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
transition: all 0.4s ease;
position: relative;
z-index: 2;
}
.profile-avatar:hover {
transform: scale(1.05);
}
/* 头像装饰环 */
.profile-avatar-container::before {
content: "";
position: absolute;
width: 160px;
height: 160px;
border: 2px solid RGBA(var(--supportRGB), 0.3);
border-radius: 50%;
animation: rotate 20s linear infinite;
z-index: 1;
}
.profile-avatar-container::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
border: 1px solid RGBA(var(--featureRGB), 0.2);
border-radius: 50%;
animation: rotate 30s linear infinite reverse;
z-index: 1;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.profile-info {
text-align: center;
display: flex;
flex-direction: column;
gap: 15px;
}
.profile-name {
font: 800 36px/120% var(--fontBody);
color: var(--dark);
letter-spacing: -1px;
position: relative;
display: inline-block;
}
.profile-name::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--support));
border-radius: 2px;
}
.profile-title {
font: 600 20px/140% var(--fontBody);
color: var(--accent);
margin-bottom: 10px;
}
.profile-description {
font: 400 16px/160% var(--fontBody);
color: RGBA(var(--darkRGB), 0.8);
max-width: 400px;
margin: 0 auto;
}
/* 社交链接样式 */
.social-links {
display: flex;
gap: 20px;
margin-top: 30px;
flex-wrap: wrap;
justify-content: center;
}
.social-link {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--accent);
color: white;
font-size: 24px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
.social-link::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
transform: translateX(-100%);
transition: transform 0.6s ease;
}
.social-link:hover::before {
transform: translateX(100%);
}
.social-link:hover {
transform: translateY(-8px) scale(1.1);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}
.social-link:active {
transform: translateY(-5px) scale(1.05);
}
/* 社交平台特定颜色 */
.social-link.wechat {
background: linear-gradient(135deg, #07c160, #05a050);
}
.social-link.qq {
background: linear-gradient(135deg, #12b7f5, #0ea5e9);
}
.social-link.zhihu {
background: linear-gradient(135deg, #0084ff, #0066cc);
}
.social-link.bilibili {
background: linear-gradient(135deg, #fb7299, #f43f5e);
}
/* 社交链接标签 */
.social-link-label {
position: absolute;
bottom: -35px;
left: 50%;
transform: translateX(-50%);
background: var(--dark);
color: var(--lighter);
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
z-index: 10;
}
.social-link-label::before {
content: "";
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid var(--dark);
}
.social-link:hover .social-link-label {
opacity: 1;
transform: translateX(-50%) translateY(-5px);
}
/* ================================
* 交互提示模态框 (Optimized/Shrunk)
* ================================ */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 2000;
}
.modal-overlay.show {
opacity: 1;
visibility: visible;
}
.modal {
background: var(--lighter);
border-radius: 15px; /* Reduced border-radius */
padding: 30px; /* Reduced padding */
max-width: 350px; /* Reduced max-width */
width: 90%;
text-align: center;
transform: scale(0.9) translateY(20px);
transition: all 0.3s ease;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25); /* Adjusted shadow */
border: 1px solid RGBA(var(--accentRGB), 0.2);
}
.modal-overlay.show .modal {
transform: scale(1) translateY(0);
}
.modal-icon {
font-size: 40px; /* Reduced font size */
margin-bottom: 15px; /* Reduced margin */
color: var(--accent);
}
.modal-title {
font: 700 20px/130% var(--fontBody); /* Reduced font size */
color: var(--dark);
margin-bottom: 10px; /* Reduced margin */
}
.modal-content {
font: 400 14px/150% var(--fontBody); /* Reduced font size */
color: RGBA(var(--darkRGB), 0.8);
margin-bottom: 20px; /* Reduced margin */
}
.modal-buttons {
display: flex;
gap: 10px; /* Reduced gap */
justify-content: center;
}
.modal-btn {
padding: 10px 20px; /* Reduced padding */
border-radius: 20px; /* Adjusted border-radius */
font: 600 13px var(--fontBody); /* Reduced font size */
cursor: pointer;
transition: all 0.3s ease;
border: none;
min-width: 90px; /* Adjusted min-width */
}
.modal-btn.primary {
background: var(--accent);
color: white;
}
.modal-btn.primary:hover {
background: var(--support);
transform: translateY(-2px);
}
.modal-btn.secondary {
background: transparent;
color: var(--dark);
border: 2px solid var(--accent);
}
.modal-btn.secondary:hover {
background: var(--accent);
color: white;
}
</style>
</head>
<body class="act-idx code-00 group-4">
<div id="maomao" onMouseOut="duoMaomao()"></div>
<!-- 波浪背景SVG -->
<svg id="headerWave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 490" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="50%"></stop>
<stop stop-color="var(--feature)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,294L80,253.2C160,212,320,131,480,155.2C640,180,800,310,960,334.8C1120,359,1280,278,1440,261.3C1600,245,1760,294,1920,294C2080,294,2240,245,2400,220.5C2560,196,2720,196,2880,187.8C3040,180,3200,163,3360,179.7C3520,196,3680,245,3840,277.7C4000,310,4160,327,4320,294C4480,261,4640,180,4800,147C4960,114,5120,131,5280,179.7C5440,229,5600,310,5760,351.2C5920,392,6080,392,6240,326.7C6400,261,6560,131,6720,65.3C6880,0,7040,0,7200,65.3C7360,131,7520,261,7680,334.8C7840,408,8000,425,8160,432.8C8320,441,8480,441,8640,400.2C8800,359,8960,278,9120,220.5C9280,163,9440,131,9600,171.5C9760,212,9920,327,10080,359.3C10240,392,10400,343,10560,310.3C10720,278,10880,261,11040,228.7C11200,196,11360,147,11440,122.5L11520,98L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
<defs>
<linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="50%"></stop>
<stop stop-color="var(--feature)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,196L80,220.5C160,245,320,294,480,294C640,294,800,245,960,212.3C1120,180,1280,163,1440,163.3C1600,163,1760,180,1920,196C2080,212,2240,229,2400,245C2560,261,2720,278,2880,294C3040,310,3200,327,3360,318.5C3520,310,3680,278,3840,294C4000,310,4160,376,4320,343C4480,310,4640,180,4800,138.8C4960,98,5120,147,5280,204.2C5440,261,5600,327,5760,318.5C5920,310,6080,229,6240,236.8C6400,245,6560,343,6720,318.5C6880,294,7040,147,7200,138.8C7360,131,7520,261,7680,277.7C7840,294,8000,196,8160,179.7C8320,163,8480,229,8640,212.3C8800,196,8960,98,9120,49C9280,0,9440,0,9600,0C9760,0,9920,0,10080,8.2C10240,16,10400,33,10560,32.7C10720,33,10880,16,11040,49C11200,82,11360,163,11440,204.2L11520,245L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
<defs>
<linearGradient id="sw-gradient-2" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="50%"></stop>
<stop stop-color="var(--feature)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 100px); opacity:0.8" fill="url(#sw-gradient-2)" d="M0,294L80,285.8C160,278,320,261,480,212.3C640,163,800,82,960,114.3C1120,147,1280,294,1440,302.2C1600,310,1760,180,1920,147C2080,114,2240,180,2400,187.8C2560,196,2720,147,2880,106.2C3040,65,3200,33,3360,57.2C3520,82,3680,163,3840,196C4000,229,4160,212,4320,179.7C4480,147,4640,98,4800,122.5C4960,147,5120,245,5280,277.7C5440,310,5600,278,5760,269.5C5920,261,6080,278,6240,277.7C6400,278,6560,261,6720,220.5C6880,180,7040,114,7200,73.5C7360,33,7520,16,7680,24.5C7840,33,8000,65,8160,122.5C8320,180,8480,261,8640,277.7C8800,294,8960,245,9120,212.3C9280,180,9440,163,9600,155.2C9760,147,9920,147,10080,187.8C10240,229,10400,310,10560,334.8C10720,359,10880,327,11040,294C11200,261,11360,229,11440,212.3L11520,196L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
</svg>
<!-- 主容器 -->
<div id="boardWrapper">
<!-- 用户菜单容器 -->
<div id="linkmenu-container">
<div id="linkmenu">
<!-- 终端容器 -->
<div id="terminal-container">
<!-- 终端编辑器 -->
<div class="editor" id="mainEditor">
<div class="editor-header">
<span class="window-btn close"></span>
<span class="window-btn minimize"></span>
<span class="window-btn maximize"></span>
<span class="title-bar">terminal.js - 藤原的个人终端</span>
</div>
<div class="editor-content" id="editorContent">
<div class="line">
<div class="line-content">
<span class="comment">// 个人信息配置</span>
</div>
</div>
<div class="line">
<div class="line-content">
<span class="keyword">const</span>
<span class="function">profile</span> = {
</div>
</div>
<div class="line">
<div class="line-content indent">
<span class="keyword">name</span>: <span class="string">"藤原"</span>,
</div>
</div>
<div class="line">
<div class="line-content indent">
<span class="keyword">title</span>: <span class="string">"职场牛马！！！"</span>,
</div>
</div>
<div class="line">
<div class="line-content indent">
<span class="keyword">contact</span>: {
</div>
</div>
<div class="line">
<div class="line-content indent-2">
<span class="keyword">email</span>: <span class="string">
<a href="mailto:2083737075@qq.com">"2083737075@qq.com"</a>
</span>,
</div>
</div>
<div class="line">
<div class="line-content indent-2">
<span class="keyword">website</span>: <span class="string">
<a href="http://tengyuan.icu" target="_blank">"TengYuan.icu"</a>
</span>,
</div>
</div>
<div class="line">
<div class="line-content indent-2">
<span class="keyword">FileCodeBox</span>: <span class="string">
<a href="http://wp.tengyuan.icu/" target="_blank">"wp.tengyuan.icu"</a>
</span>,
</div>
</div>
<div class="line">
<div class="line-content indent">},</div>
</div>
<div class="line">
<div class="line-content indent">
<span class="keyword">links</span>: {
</div>
</div>
<div class="line">
<div class="line-content indent-2">
<span class="keyword">travel blog</span>: <span class="string">
<a href="http://blog.tengyuan.icu/" target="_blank">"blog.tengyuan.icu"</a>
</span>,
</div>
</div>
<div class="line">
<div class="line-content indent-2">
<span class="keyword">birthday</span>: <span class="string">
<a href="http://sr.0814.cn" target="_blank">"2001/11/01"</a>
</span>,
</div>
</div>
<div class="line">
<div class="line-content indent">},</div>
</div>
<div class="line">
<div class="line-content indent">
<span class="comment">// 座右铭</span>
</div>
</div>
<div class="line">
<div class="line-content indent">
<span class="keyword">motto</span>: <span class="string">"以清简代码，筑玖维数字宇宙。"</span>,
</div>
</div>
<div class="line">
<div class="line-content indent">
<span class="keyword">copyright</span>: <span class="string">"2017-<span id="year"></span> 藤原"</span>,
</div>
</div>
<div class="line">
<div class="line-content">};</div>
</div>
<div class="line">
<div class="line-content">
<span class="comment">// 终端交互</span>
</div>
</div>
<div class="line">
<div class="line-content">
<span class="function">console</span>.<span class="function">log</span>(<span class="string">"欢迎访问藤原的个人终端"</span>);
</div>
</div>
<div class="line">
<div class="line-content">
<span class="function">console</span>.<span class="function">log</span>(<span class="string">"输入 'help' 获取可用命令"</span>);
</div>
</div>
</div>
<!-- 输入行 -->
<div class="input-line">
<input type="text" id="userInput" placeholder="输入命令..." autocomplete="off">
</div>
</div>
</div>
</div>
</div>
<!-- 顶部导航栏 -->
<div id="topbar">
<nav class="topbarlinks guest" style="display: none;">
<section>
<button class="memberAvatar">
<i class="ri-align-justify"></i>
</button>
</section>
<section class="quickLinks">
<a href="/">
<i class="ri-settings-3-line"></i>
</a>
<a href="/">
<i class="ri-logout-circle-r-line"></i>
</a>
</section>
</nav>
<nav class="topbarlinks member">
<section>
<button class="memberAvatar">
<i class="ri-align-justify"></i>
</button>
</section>
<section class="quickLinks">
<label class="theme-switch" for="checkbox" id="theme_switch_click">
<input type="checkbox" id="checkbox">
<i class="ri-lightbulb-line light-icon"></i>
<i class="ri-lightbulb-flash-line dark-icon"></i>
<span>主题切换</span>
</label>
<a href="/">
<i class="ri-question-answer-line"></i>
<span>3 条消息</span>
</a>
<a href="/">
<i class="ri-feedback-line"></i>
<span>10 条提醒</span>
</a>
<a href="/">
<i class="ri-settings-3-line"></i>
<span>账户设置</span>
</a>
</section>
</nav>
</div>
<!-- 页眉部分 -->
<header id="boardHeader">
<div class="bannerInformation">
<svg id="headerWave1" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 490" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="50%"></stop>
<stop stop-color="var(--feature)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,343L80,359.3C160,376,320,408,480,367.5C640,327,800,212,960,212.3C1120,212,1280,327,1440,383.8C1600,441,1760,441,1920,383.8C2080,327,2240,212,2400,171.5C2560,131,2720,163,2880,147C3040,131,3200,65,3360,98C3520,131,3680,261,3840,318.5C4000,376,4160,359,4320,318.5C4480,278,4640,212,4800,163.3C4960,114,5120,82,5280,89.8C5440,98,5600,147,5760,163.3C5920,180,6080,163,6240,138.8C6400,114,6560,82,6720,106.2C6880,131,7040,212,7200,253.2C7360,294,7520,294,7680,261.3C7840,229,8000,163,8160,147C8320,131,8480,163,8640,171.5C8800,180,8960,163,9120,138.8C9280,114,9440,82,9600,89.8C9760,98,9920,147,10080,163.3C10240,180,10400,163,10560,147C10720,131,10880,114,11040,89.8C11200,65,11360,33,11440,16.3L11520,0L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
<defs>
<linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="50%"></stop>
<stop stop-color="var(--feature)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,147L80,179.7C160,212,320,278,480,269.5C640,261,800,180,960,155.2C1120,131,1280,163,1440,220.5C1600,278,1760,359,1920,351.2C2080,343,2240,245,2400,204.2C2560,163,2720,180,2880,228.7C3040,278,3200,359,3360,343C3520,327,3680,212,3840,179.7C4000,147,4160,196,4320,228.7C4480,261,4640,278,4800,236.8C4960,196,5120,98,5280,98C5440,98,5600,196,5760,269.5C5920,343,6080,392,6240,408.3C6400,425,6560,408,6720,343C6880,278,7040,163,7200,122.5C7360,82,7520,114,7680,122.5C7840,131,8000,114,8160,138.8C8320,163,8480,229,8640,253.2C8800,278,8960,261,9120,261.3C9280,261,9440,278,9600,294C9760,310,9920,327,10080,334.8C10240,343,10400,343,10560,334.8C10720,327,10880,310,11040,326.7C11200,343,11360,392,11440,416.5L11520,441L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
<defs>
<linearGradient id="sw-gradient-2" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="50%"></stop>
<stop stop-color="var(--feature)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 100px); opacity:0.8" fill="url(#sw-gradient-2)" d="M0,441L80,432.8C160,425,320,408,480,359.3C640,310,800,229,960,220.5C1120,212,1280,278,1440,318.5C1600,359,1760,376,1920,326.7C2080,278,2240,163,2400,147C2560,131,2720,212,2880,277.7C3040,343,3200,392,3360,383.8C3520,376,3680,310,3840,269.5C4000,229,4160,212,4320,204.2C4480,196,4640,196,4800,187.8C4960,180,5120,163,5280,163.3C5440,163,5600,180,5760,228.7C5920,278,6080,359,6240,351.2C6400,343,6560,245,6720,245C6880,245,7040,343,7200,318.5C7360,294,7520,147,7680,98C7840,49,8000,98,8160,171.5C8320,245,8480,343,8640,383.8C8800,425,8960,408,9120,343C9280,278,9440,163,9600,122.5C9760,82,9920,114,10080,179.7C10240,245,10400,343,10560,392C10720,441,10880,441,11040,416.5C11200,392,11360,343,11440,318.5L11520,294L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
</svg>
<div class="bannerTitle">
<h1 id="welcome-message">Life is a wilderness!<b> Mom</b>.</h1>
<h2 id="tengyuan-title">TENG YUAN</h2>
</div>
<!-- 新增个人信息卡片 -->
<div class="profile-card" id="profile-card" style="display: none;">
<div class="profile-avatar-container">
<img src="https://img.alicdn.com/imgextra/i2/2214968904665/O1CN01SEHUss1kKcibIYTOJ_!!2214968904665.jpg"
alt="藤原头像"
class="profile-avatar">
</div>
<div class="profile-info">
<div class="profile-name">藤原</div>
<div class="profile-title">全栈开发工程师</div>
<div class="profile-description">
热爱技术，专注于前端开发和用户体验设计。<br>
致力于用代码创造美好的数字世界，以清简代码筑玖维数字宇宙。
</div>
</div>
<div class="social-links">
<div class="social-link wechat" onclick="showWeChatModal()">
<i class="ri-wechat-line"></i>
<div class="social-link-label">微信</div>
</div>
<div class="social-link qq" onclick="showQQModal()">
<i class="ri-qq-line"></i>
<div class="social-link-label">QQ</div>
</div>
<a href="https://www.zhihu.com/" class="social-link zhihu" target="_blank">
<i class="ri-zhihu-line"></i>
<div class="social-link-label">知乎</div>
</a>
<a href="https://www.bilibili.com/" class="social-link bilibili" target="_blank">
<i class="ri-bilibili-line"></i>
<div class="social-link-label">哔哩哔哩</div>
</a>
</div>
</div>
<svg id="headerWave2" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 490" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 0px); opacity:1" fill="url(#sw-gradient-0)" d="M0,98L80,147C160,196,320,294,480,334.8C640,376,800,359,960,318.5C1120,278,1280,212,1440,187.8C1600,163,1760,180,1920,196C2080,212,2240,229,2400,204.2C2560,180,2720,114,2880,147C3040,180,3200,310,3360,326.7C3520,343,3680,245,3840,220.5C4000,196,4160,245,4320,220.5C4480,196,4640,98,4800,98C4960,98,5120,196,5280,204.2C5440,212,5600,131,5760,130.7C5920,131,6080,212,6240,212.3C6400,212,6560,131,6720,122.5C6880,114,7040,180,7200,187.8C7360,196,7520,147,7680,179.7C7840,212,8000,327,8160,383.8C8320,441,8480,441,8640,392C8800,343,8960,245,9120,171.5C9280,98,9440,49,9600,49C9760,49,9920,98,10080,130.7C10240,163,10400,180,10560,155.2C10720,131,10880,65,11040,65.3C11200,65,11360,131,11440,163.3L11520,196L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
<defs>
<linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="50%"></stop>
<stop stop-color="var(--feature)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 50px); opacity:0.9" fill="url(#sw-gradient-1)" d="M0,294L80,318.5C160,343,320,392,480,392C640,392,800,343,960,294C1120,245,1280,196,1440,179.7C1600,163,1760,180,1920,228.7C2080,278,2240,359,2400,392C2560,425,2720,408,2880,343C3040,278,3200,163,3360,98C3520,33,3680,16,3840,32.7C4000,49,4160,98,4320,122.5C4480,147,4640,147,4800,122.5C4960,98,5120,49,5280,49C5440,49,5600,98,5760,130.7C5920,163,6080,180,6240,163.3C6400,147,6560,98,6720,98C6880,98,7040,147,7200,196C7360,245,7520,294,7680,277.7C7840,261,8000,180,8160,155.2C8320,131,8480,163,8640,155.2C8800,147,8960,98,9120,138.8C9280,180,9440,310,9600,310.3C9760,310,9920,180,10080,171.5C10240,163,10400,278,10560,294C10720,310,10880,229,11040,179.7C11200,131,11360,114,11440,106.2L11520,98L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
<defs>
<linearGradient id="sw-gradient-2" x1="0" x2="0" y1="1" y2="0">
<stop stop-color="var(--accent)" offset="0%"></stop>
<stop stop-color="var(--support)" offset="50%"></stop>
<stop stop-color="var(--feature)" offset="100%"></stop>
</linearGradient>
</defs>
<path style="transform:translate(0, 100px); opacity:0.8" fill="url(#sw-gradient-2)" d="M0,196L80,179.7C160,163,320,131,480,155.2C640,180,800,261,960,310.3C1120,359,1280,376,1440,326.7C1600,278,1760,163,1920,106.2C2080,49,2240,49,2400,81.7C2560,114,2720,180,2880,212.3C3040,245,3200,245,3360,261.3C3520,278,3680,310,3840,310.3C4000,310,4160,278,4320,220.5C4480,163,4640,82,4800,40.8C4960,0,5120,0,5280,32.7C5440,65,5600,131,5760,130.7C5920,131,6080,65,6240,40.8C6400,16,6560,33,6720,49C6880,65,7040,82,7200,73.5C7360,65,7520,33,7680,65.3C7840,98,8000,196,8160,236.8C8320,278,8480,261,8640,245C8800,229,8960,212,9120,245C9280,278,9440,359,9600,359.3C9760,359,9920,278,10080,228.7C10240,180,10400,163,10560,204.2C10720,245,10880,343,11040,343C11200,392,11360,245,11440,196L11520,147L11520,490L11440,490C11360,490,11200,490,11040,490C10880,490,10720,490,10560,490C10400,490,10240,490,10080,490C9920,490,9760,490,9600,490C9440,490,9280,490,9120,490C8960,490,8800,490,8640,490C8480,490,8320,490,8160,490C8000,490,7840,490,7680,490C7520,490,7360,490,7200,490C7040,490,6880,490,6720,490C6560,490,6400,490,6240,490C6080,490,5920,490,5760,490C5600,490,5440,490,5280,490C5120,490,4960,490,4800,490C4640,490,4480,490,4320,490C4160,490,4000,490,3840,490C3680,490,3520,490,3360,490C3200,490,3040,490,2880,490C2720,490,2560,490,2400,490C2240,490,2080,490,1920,490C1760,490,1600,490,1440,490C1280,490,1120,490,960,490C800,490,640,490,480,490C320,490,160,490,80,490L0,490Z"></path>
</svg>
</div>
<aside class="bannerImage">
<!-- 视频背景（必须加 playsinline 兼容移动端） -->
<video autoplay muted loop playsinline style="position: absolute; width: 100%; height: 100%; object-fit: cover;">
<source src="http://cloud.video.taobao.com/play/u/2214968904665/p/2/e/6/t/1/525727450638.mp4" type="video/mp4">
你的浏览器不支持视频播放
</video>
<!-- 管理员头像（保持在视频上层） -->
<div class="bannerStaff">
<a href="#" class="adminImage">
<img src="https://img.alicdn.com/imgextra/i2/2214968904665/O1CN01SEHUss1kKcibIYTOJ_!!2214968904665.jpg">
</a>
<a href="#" class="adminImage">
<img src="https://img.alicdn.com/imgextra/i1/2214968904665/O1CN01aTWCuI1kKciYs3UMM_!!2214968904665.jpg">
</a>
<a href="#" class="adminImage">
<img src="https://img.alicdn.com/imgextra/i3/2214968904665/O1CN01BWuteG1kKcibhuu9d_!!2214968904665.jpg">
</a>
<a href="#" class="adminImage">
<img src="https://img.alicdn.com/imgextra/i1/2214968904665/O1CN01Ixz8Ms1kKciZNZyv4_!!2214968904665.jpg">
</a>
</div>
</aside>
</header>
<!-- 微信模态框 -->
<div class="modal-overlay" id="wechat-modal">
<div class="modal">
<div class="modal-icon">
<i class="ri-wechat-line"></i>
</div>
<div class="modal-title">微信联系</div>
<div class="modal-content">
微信号：请通过邮箱联系获取<br />
邮箱：2083737075@qq.com<br /><br />
<small>为了隐私安全，微信号不直接展示</small>
</div>
<div class="modal-buttons">
<button class="modal-btn primary" onclick="copyEmail()">复制邮箱</button>
<button class="modal-btn secondary" onclick="closeModal('wechat-modal')">关闭</button>
</div>
</div>
</div>
<!-- QQ模态框 -->
<div class="modal-overlay" id="qq-modal">
<div class="modal">
<div class="modal-icon">
<i class="ri-qq-line"></i>
</div>
<div class="modal-title">QQ联系</div>
<div class="modal-content">
QQ号：2083737075<br /><br />
点击下方按钮可以直接打开QQ聊天
</div>
<div class="modal-buttons">
<button class="modal-btn primary" onclick="openQQ()">打开QQ</button>
<button class="modal-btn secondary" onclick="closeModal('qq-modal')">关闭</button>
</div>
</div>
</div>
<!-- JavaScript代码 -->
<script>
// Set current year for copyright
document.getElementById('year').textContent = new Date().getFullYear();
// 2秒后隐藏欢迎消息和TENG YUAN标题，并显示个人信息卡片
setTimeout(function() {
document.getElementById('welcome-message').style.display = 'none';
document.getElementById('tengyuan-title').style.display = 'none';
const profileCard = document.getElementById('profile-card');
profileCard.style.display = 'flex'; // Make it visible
// Add a class to bannerInformation to adjust its padding
document.querySelector('.bannerInformation').classList.add('profile-active');
profileCard.style.opacity = '0';
profileCard.style.transform = 'translateY(20px)';
setTimeout(() => {
profileCard.style.opacity = '1';
profileCard.style.transform = 'translateY(0)';
profileCard.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
}, 50);
}, 2000);
/**
* ================================
* Social Link Interaction Functions
* ================================
*/
/**
* Placeholder for a toast notification function
*/
function showToast(message) {
console.log("Toast:", message);
// In a real application, you would implement a visual toast notification here.
// For example, by creating a div, adding it to the body, and styling it.
}
/**
* Show WeChat modal
*/
function showWeChatModal() {
showModal('wechat-modal');
}
/**
* Show QQ modal
*/
function showQQModal() {
showModal('qq-modal');
}
/**
* Show modal
* @param {string} modalId - Modal ID
*/
function showModal(modalId) {
const modal = document.getElementById(modalId);
if (modal) {
modal.classList.add('show');
document.body.style.overflow = 'hidden';
// Add click outside to close functionality
modal.addEventListener('click', function (e) {
if (e.target === modal) {
closeModal(modalId);
}
});
}
}
/**
* Close modal
* @param {string} modalId - Modal ID
*/
function closeModal(modalId) {
const modal = document.getElementById(modalId);
if (modal) {
modal.classList.remove('show');
document.body.style.overflow = 'auto';
}
}
/**
* Copy email address
*/
function copyEmail() {
const email = '2083737075@qq.com';
if (navigator.clipboard) {
navigator.clipboard
.writeText(email)
.then(() => {
showToast('邮箱地址已复制到剪贴板！');
closeModal('wechat-modal');
})
.catch(() => {
fallbackCopyEmail(email);
});
} else {
fallbackCopyEmail(email);
}
}
/**
* Fallback copy method
* @param {string} text - Text to copy
*/
function fallbackCopyEmail(text) {
const textArea = document.createElement('textarea');
textArea.value = text;
textArea.style.position = 'fixed';
textArea.style.opacity = '0';
document.body.appendChild(textArea);
textArea.select();
try {
document.execCommand('copy');
showToast('邮箱地址已复制到剪贴板！');
closeModal('wechat-modal');
} catch (err) {
showToast('复制失败，请手动复制：' + text);
}
document.body.removeChild(textArea);
}
/**
* Open QQ chat
*/
function openQQ() {
const qqUrl = 'tencent://message/?uin=2083737075&Site=&Menu=yes';
const webQQUrl = 'https://wpa.qq.com/msgrd?v=3&uin=2083737075&site=qq&menu=yes';
// Attempt to open QQ client
window.open(qqUrl, '_blank');
// Offer web version option after a delay
setTimeout(() => {
if (confirm('如果QQ客户端未打开，是否使用网页版QQ？')) {
window.open(webQQUrl, '_blank');
}
}, 2000);
closeModal('qq-modal');
}
</script>
</body>
</html>
index.html