<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TENG YUAN</title>
<!-- 预连接优化 -->
<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">
<!-- 图标库 - 只保留一个 Font Awesome 版本 -->
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" rel="stylesheet">
<!-- Remix Icon 图标库 -->
<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">
</head>
<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和链接的默认样式
*****************************************/
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变量定义
* 这部分定义了默认的CSS变量
*****************************************/
:root {
--headerImage: url(https://i.pinimg.com/564x/d6/58/69/d658698ffbead28c9b23f72d158f2621.jpg);
--headerHeight: 605px;
--settingImage: url(https://i.pinimg.com/564x/b5/86/27/b5862702803e0c90b4b4ec3bbec000e8.jpg);
--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");
}
/****************************************
* 主容器样式
* 包裹整个网站内容
*****************************************/
#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: 20px;
z-index: 9990;
width: calc(100% - 60px);
margin: 10px 30px -10px;
}
.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.85);
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);
}
/* 通用工具头部样式 */
.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;
}
/* 通用输入区域样式 */
.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;
}
.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);
}
.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;
}
.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;
}
/* 隐藏所有滚动条 */
::-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 #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);
}
/****************************************
* 内部内容容器样式
*****************************************/
#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);
}
/****************************************
* 页脚样式
*****************************************/
#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 .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;
}
/* 移动端调整终端位置 */
#terminal-container {
width: 95%;
height: 85%;
max-height: none;
}
/* 移动端调整终端菜单 */
#linkmenu {
padding: 20px;
}
}
/* 每日一言 */
.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 {
display: flex;
justify-content: center;
padding: 15px 0;
width: 100%;
font-family: var(--fontBody);
color: var(--dark);
}
.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); /* 黑色字体 */
}
/* 页脚链接样式 */
.footer-info {
display: flex;
gap: 20px;
font-size: 12px;
color: var(--dark); /* 黑色字体 */
}
.footer-info a {
color: var(--dark); /* 黑色字体 */
text-decoration: none;
transition: color 0.2s;
}
.footer-info a:hover {
color: var(--accent);
text-decoration: underline;
}
/* 响应式调整 */
@media screen and (max-width: 600px) {
.status-info {
flex-direction: column;
gap: 8px;
align-items: flex-start;
}
.weather-content {
flex-direction: column;
align-items: flex-start;
gap: 5px;
}
.footer-info {
flex-direction: column;
gap: 5px;
align-items: center;
}
}
#bgMusic {
position: fixed;
opacity: 0;
pointer-events: none;
z-index: -9999;
}
</style>
<body class="act-idx code-00 group-4">
<!-- 波浪背景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 onclick="usertoggle()" 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 onclick="usertoggle()" 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>
<a href="/"><i class="ri-logout-circle-r-line"></i> <span>退出登录</span></a>
</section>
</nav>
</div>
<!-- 页眉部分 -->
<header id="boardHeader">
<content 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>Life is a wilderness!<b> Mom</b>.</h1>
<h2>TENG YUAN</h2>
</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,343,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>
</content>
<aside class="bannerImage">
<div class="bannerStaff">
<!-- 管理员图片部分 -->
<a href="#" class="adminImage"><img src="https://s9.gifyu.com/images/SZ1sL.png"></a>
<a href="#" class="adminImage"><img src="https://s9.gifyu.com/images/SZ1sL.png"></a>
<a href="#" class="adminImage"><img src="https://s9.gifyu.com/images/SZ1sL.png"></a>
<a href="#" class="adminImage"><img src="https://s9.gifyu.com/images/SZ1sL.png"></a>
</div>
</aside>
</header>
<!-- 中间内容区域 -->
<div id="boardCrotch">
<section class="siteTime" style="background-image: var(--settingImage);">
<div class="siteTimeIcon"><i class="ri-map-pin-user-fill"></i></div>
<h1>虚构的城市</h1>
<h2><i class="ri-sun-foggy-line"></i> 2025年夏季</h2>
</section>
<section class="siteArticle">
<nav class="siteLinks">
<span class="navLinksContainer">
<a href="/"> <i class="ri-firebase-line"></i> guidebook </a>
<a href="/"> <i class="ri-book-marked-line"></i> premise </a>
<a href="/"> <i class="ri-building-line"></i> setting </a>
<a href="/"> <i class="ri-pie-chart-line"></i> member groups </a>
<a href="/"> <i class="ri-file-user-line"></i> directory </a>
<a href="/"> <i class="ri-team-line"></i> face claims </a>
<a href="/"> <i class="ri-user-search-line"></i> classifieds </a>
<a href="/"> <i class="ri-code-box-line"></i> codes </a>
<a href="/"> <i class="ri-discord-line"></i> discord </a>
</span>
<span class="navTitle">
<span>quick</span>
<span class="navTitleClass"><i class="ri-arrow-go-back-line"></i> nav</span>
</span>
</nav>
<section class="siteIntroduction" id="daily-quote">
<div class="quote-content">加载中...</div>
<div class="quote-from"></div>
</section>
</div>
<div id="boardCrotchBottom"></div>
<!-- 内部内容容器 -->
<div id="innerWrapper">
<!-- 导航树样式 -->
<nav class="siteNav">
<div class="status-container">
<!-- 状态信息行 -->
<div class="status-info">
<!-- FPS计数器 -->
<span id="fps-counter">FPS: --</span>
<!-- 天气信息Widget -->
<div id="weather-info" class="weather-widget">
<div class="weather-loading">天气加载中...</div>
<div class="weather-content">
<div class="weather-main">
<div class="weather-location">
<i class="fas fa-map-marker-alt"></i>
<span class="location-text">--</span>
</div>
<div class="weather-temp">
<i class="fas fa-thermometer-half"></i>
<span class="temp-value">--</span>°C
</div>
</div>
<div class="weather-details">
<div class="weather-condition">
<i class="weather-icon fas fa-question"></i>
<span class="condition-text">--</span>
</div>
<div class="weather-stats">
<span class="weather-humidity">
<i class="fas fa-tint"></i> 湿度: --%
</span>
<span class="weather-wind">
<i class="fas fa-wind"></i> 风速: --级
</span>
</div>
</div>
</div>
<div class="weather-error"></div>
</div>
</div>
<!-- 页脚信息行 -->
<div class="footer-info">
<span>© 2024 藤原 All Rights Reserved</span>
<a href="https://beian.miit.gov.cn/" target="_blank">ICP备案号: 京ICP备XXXXXX号</a>
</div>
</div>
</nav>
</div>
<!-- 隐藏的文件输入元素 -->
<input type="file" id="fileInput" accept="image/*" style="display: none;">
<audio id="bgMusic" loop>
<source src="music/1.mp3" type="audio/mpeg">
您的浏览器不支持音频元素。
</audio>
<!-- JavaScript代码 -->
<script>
// ================ 全局变量 ================
let commandHistoryArray = JSON.parse(localStorage.getItem('commandHistory') || '[]');
let historyIndex = -1;
let totalParseCount = parseInt(localStorage.getItem('totalParseCount') || '0');
let successParseCount = parseInt(localStorage.getItem('successParseCount') || '0');
// 设置当前年份
document.getElementById('year').textContent = new Date().getFullYear();
// 更新解析统计
function updateParseStats() {
localStorage.setItem('totalParseCount', totalParseCount.toString());
localStorage.setItem('successParseCount', successParseCount.toString());
}
// 初始化统计
updateParseStats();
// ================ 终端功能 ================
const editorContent = document.getElementById('editorContent');
const userInput = document.getElementById('userInput');
const fileInput = document.getElementById('fileInput');
// API配置
const apiConfig = {
id: '10003788',
key: 'ffa8afb46dce4916c5a74fd73c8de9f6',
endpoint: 'https://cn.apihz.cn/api/ai/wxtiny.php'
};
// 影视解析接口
const videoApis = [
{ name: "默认线路【推荐】", url: "https://jx.xmflv.com/?url=" },
{ name: "线路一【推荐】", url: "https://jx.we-vip.com/?url=" },
{ name: "线路二【推荐】", url: "https://z1.m1907.top/?jx=" },
{ name: "线路三", url: "https://www.ckplayer.vip/jiexi/?url=" },
{ name: "线路五", url: "https://jx.jsonplayer.com/player/?url=" },
{ name: "线路六", url: "https://jx.4kdv.com/?url=" },
{ name: "线路七", url: "https://api.jiexi.la/?url=" },
{ name: "线路八", url: "https://jx.qqwtt.com/?url=" },
{ name: "线路九", url: "https://www.playm3u8.cn/jiexi.php?url=" },
{ name: "线路十", url: "https://www.8090g.cn/jiexi/?url=" }
];
// 帮助信息
const helpText = `
可用命令:
基础命令:
- help: 显示帮助信息
- clear: 清空终端
- history: 显示命令历史记录
影视工具:
- video [url]: 解析并播放长视频（支持爱奇艺、腾讯、优酷等）
例如: video https://v.qq.com/x/cover/mzc00200mp8er9d.html
- shortvideo [url]: 解析短视频（支持抖音、快手、小红书）
例如: shortvideo https://v.douyin.com/xxxxxx
AI工具:
- ai [message]: 与AI助手对话
例如: ai 你好
图片工具:
- image [format]: 转换图片格式 (支持: jpg, png, webp, bmp)
例如: image png
其他工具:
- stats: 显示系统统计信息
`;
// 打字机效果函数
function typeWriterEffect(element, text, speed = 10) {
return new Promise((resolve) => {
let i = 0;
const typing = () => {
if (i < text.length) {
element.textContent += text.charAt(i);
i++;
setTimeout(typing, speed);
} else {
resolve();
}
};
typing();
});
}
async function addAILine(text) {
const line = document.createElement('div');
line.className = 'line';
const lineContent = document.createElement('div');
lineContent.className = 'line-content ai-output';
lineContent.textContent = '藤原: ';
line.appendChild(lineContent);
editorContent.appendChild(line);
editorContent.scrollTop = editorContent.scrollHeight;
await typeWriterEffect(lineContent, text);
return line;
}
function addUserLine(text) {
const line = document.createElement('div');
line.className = 'line';
const lineContent = document.createElement('div');
lineContent.className = 'line-content user-input';
lineContent.textContent = `> ${text}`;
line.appendChild(lineContent);
editorContent.appendChild(line);
editorContent.scrollTop = editorContent.scrollHeight;
return line;
}
function clearTerminal() {
const lines = document.querySelectorAll('.line');
lines.forEach(line => {
const content = line.querySelector('.line-content').textContent;
if (!content.includes('// 个人信息配置') &&
!content.includes('const profile') &&
!content.includes('name:') &&
!content.includes('title:') &&
!content.includes('contact:') &&
!content.includes('email:') &&
!content.includes('website:') &&
!content.includes('FileCodeBox:') &&
!content.includes('links:') &&
!content.includes('travel blog:') &&
!content.includes('birthday:') &&
!content.includes('motto:') &&
!content.includes('copyright:') &&
!content.includes('};') &&
!content.includes('// 终端交互') &&
!content.includes('console.log')) {
line.remove();
}
});
// 移除视频、图片等组件
const videoContainer = document.querySelector('.video-container');
const imageConverter = document.querySelector('.tool-container');
const shortVideoParser = document.querySelector('.tool-container');
const searchResults = document.querySelector('.search-results');
if (videoContainer) videoContainer.remove();
if (imageConverter) imageConverter.remove();
if (shortVideoParser) shortVideoParser.remove();
if (searchResults) searchResults.remove();
}
// ============== 影视解析功能 ==============
function parseVideo(url) {
// 移除现有的播放器
const existingPlayer = document.querySelector('.video-container');
if (existingPlayer) {
existingPlayer.remove();
}
// 增加解析次数统计
totalParseCount++;
updateParseStats();
// 显示加载状态
const loadingLine = document.createElement('div');
loadingLine.className = 'line';
const loadingContent = document.createElement('div');
loadingContent.className = 'line-content ai-output';
loadingContent.textContent = '藤原: 正在解析视频，请稍候...';
loadingLine.appendChild(loadingContent);
editorContent.appendChild(loadingLine);
editorContent.scrollTop = editorContent.scrollHeight;
// 检查URL是否有效
if (!url || !url.startsWith('http')) {
loadingContent.textContent = '藤原: 请输入有效的视频URL';
return;
}
// 创建视频播放器容器
const videoContainer = document.createElement('div');
videoContainer.className = 'video-container';
// 创建视频元素
const videoPlayer = document.createElement('div');
videoPlayer.className = 'video-player';
// 使用iframe来播放解析后的视频
const videoElement = document.createElement('iframe');
videoElement.id = 'terminal-video';
// 使用默认解析线路
const defaultApi = videoApis[0];
videoElement.src = defaultApi.url + encodeURIComponent(url);
videoElement.frameBorder = '0';
videoElement.allowFullscreen = true;
videoElement.style.width = '100%';
videoElement.style.height = '100%';
videoPlayer.appendChild(videoElement);
// 视频控制区域
const videoControls = document.createElement('div');
videoControls.className = 'video-controls';
// 当前线路显示
const currentLine = document.createElement('span');
currentLine.style.cssText = 'color: var(--line-color); font-size: 12px; margin-right: 10px;';
currentLine.textContent = `当前线路: ${defaultApi.name}`;
// 刷新按钮
const refreshButton = document.createElement('button');
refreshButton.className = 'video-button';
refreshButton.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="23 4 23 10 17 10"></polyline><polyline points="1 20 1 14 7 14"></polyline><path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg> 刷新';
refreshButton.addEventListener('click', () => {
videoElement.src = videoElement.src;
});
// 线路切换按钮
const switchButton = document.createElement('button');
switchButton.className = 'video-button';
switchButton.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg> 切换线路';
switchButton.addEventListener('click', () => {
showVideoApiSelector(url);
});
// 全屏按钮
const fullscreenButton = document.createElement('button');
fullscreenButton.className = 'video-button';
fullscreenButton.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h7"></path><line x1="16" y1="5" x2="22" y2="5"></line><line x1="19" y1="2" x2="19" y2="8"></line><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg> 全屏';
fullscreenButton.addEventListener('click', () => {
if (videoElement.requestFullscreen) {
videoElement.requestFullscreen();
}
});
// 关闭按钮
const closeButton = document.createElement('button');
closeButton.className = 'video-button';
closeButton.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> 关闭';
closeButton.addEventListener('click', () => videoContainer.remove());
videoControls.appendChild(currentLine);
videoControls.appendChild(refreshButton);
videoControls.appendChild(switchButton);
videoControls.appendChild(fullscreenButton);
videoControls.appendChild(closeButton);
// 组装整个播放器
videoContainer.appendChild(videoPlayer);
videoContainer.appendChild(videoControls);
// 添加到编辑器内容区
editorContent.appendChild(videoContainer);
editorContent.scrollTop = editorContent.scrollHeight;
// 更新加载状态
loadingContent.textContent = '藤原: 视频解析完成！';
// 增加成功统计
successParseCount++;
updateParseStats();
}
// 显示线路选择器
function showVideoApiSelector(originalUrl) {
addAILine('可用解析线路：');
videoApis.forEach((api, index) => {
const line = document.createElement('div');
line.className = 'line';
const lineContent = document.createElement('div');
lineContent.className = 'line-content';
lineContent.innerHTML = `<span class="ai-output">藤原: ${index + 1}. <span style="cursor: pointer; color: var(--terminal-accent-color); text-decoration: underline;" onclick="switchVideoApi('${originalUrl}', ${index})">${api.name}</span></span>`;
line.appendChild(lineContent);
editorContent.appendChild(line);
});
editorContent.scrollTop = editorContent.scrollHeight;
}
// 切换视频解析线路
function switchVideoApi(originalUrl, apiIndex) {
const api = videoApis[apiIndex];
const apiUrl = api.url + encodeURIComponent(originalUrl);
// 更新iframe的src
const videoElement = document.getElementById('terminal-video');
if (videoElement) {
videoElement.src = apiUrl;
// 更新当前线路显示
const currentLine = document.querySelector('.video-controls span');
if (currentLine) {
currentLine.textContent = `当前线路: ${api.name}`;
}
addAILine(`已切换到 ${api.name}`);
}
}
// ============== 短视频解析功能 ==============
function parseShortVideo(url) {
// 移除现有的解析结果
const existingResult = document.querySelector('.short-video-result');
if (existingResult) {
existingResult.remove();
}
// 增加解析次数统计
totalParseCount++;
updateParseStats();
// 显示加载状态
const loadingLine = document.createElement('div');
loadingLine.className = 'line';
const loadingContent = document.createElement('div');
loadingContent.className = 'line-content ai-output';
loadingContent.textContent = '藤原: 正在解析短视频，请稍候...';
loadingLine.appendChild(loadingContent);
editorContent.appendChild(loadingLine);
editorContent.scrollTop = editorContent.scrollHeight;
// 检查URL是否有效
if (!url || !url.startsWith('http')) {
loadingContent.textContent = '藤原: 请输入有效的短视频URL';
return;
}
// 模拟解析结果
setTimeout(() => {
// 随机决定是视频还是图集
const isVideo = Math.random() > 0.5;
// 创建结果容器
const resultContainer = document.createElement('div');
resultContainer.className = 'tool-container short-video-result';
// 头部
const header = document.createElement('div');
header.className = 'tool-header';
const title = document.createElement('div');
title.className = 'tool-title';
title.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
短视频解析结果
`;
const closeBtn = document.createElement('button');
closeBtn.className = 'tool-close';
closeBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
closeBtn.addEventListener('click', () => resultContainer.remove());
header.appendChild(title);
header.appendChild(closeBtn);
// 内容区域
const content = document.createElement('div');
content.className = 'tool-content';
// 作者信息区域
const authorInfo = `
<div style="display: flex; align-items: center; margin-bottom: 15px; padding: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
<img src="https://picsum.photos/100/100?random=${Math.floor(Math.random() * 100)}" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 12px;">
<div>
<div style="font-weight: 600; color: var(--text-color); margin-bottom: 2px;">示例作者</div>
<div style="font-size: 12px; color: var(--line-color);">来自 ${url.includes('douyin') ? '抖音' : url.includes('kuaishou') ? '快手' : '小红书'}</div>
</div>
</div>
`;
let mediaContent = '';
if (isVideo) {
// 视频内容
mediaContent = `
<div style="position: relative; padding-top: 56.25%; margin-bottom: 15px; border-radius: 8px; overflow: hidden;">
<video controls
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
crossorigin="anonymous">
<source src="https://example.com/video.mp4" type="video/mp4">
您的浏览器不支持视频播放
</video>
</div>
<div class="tool-actions">
<button class="tool-btn" onclick="downloadVideo('https://example.com/video.mp4', '示例短视频')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
下载视频
</button>
</div>
`;
} else {
// 图集内容
const images = [
'https://picsum.photos/800/1600?random=1',
'https://picsum.photos/800/1600?random=2',
'https://picsum.photos/800/1600?random=3'
];
const galleryHTML = images.map((img, index) => `
<div style="position: relative; margin-bottom: 10px;">
<img src="${img}"
alt="图片 ${index + 1}"
style="width: 100%; border-radius: 8px; cursor: pointer;"
onclick="showFullImage('${img}')">
<div style="position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,0.7); color: white; padding: 4px 8px; border-radius: 12px; font-size: 12px;">
${index + 1}/${images.length}
</div>
</div>
`).join('');
mediaContent = `
<div style="max-height: 400px; overflow-y: auto; margin-bottom: 15px;">
${galleryHTML}
</div>
<div class="tool-actions">
<button class="tool-btn" onclick="downloadAllImages(${JSON.stringify(images).replace(/"/g, '"')}, '示例图集')">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
打包下载 (${images.length}张)
</button>
</div>
`;
}
// 音乐信息
const musicInfo = `
<div style="margin-top: 15px; padding: 12px; background: rgba(255, 255, 255, 0.05); border-radius: 8px;">
<h4 style="color: var(--text-color); margin-bottom: 8px; display: flex; align-items: center; gap: 8px;">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width: 16px; height: 16px;">
<path d="M9 18V5l12-2v13"></path>
<circle cx="6" cy="18" r="3"></circle>
<circle cx="18" cy="16" r="3"></circle>
</svg>
背景音乐
</h4>
<div style="font-size: 14px; color: var(--line-color);">
示例音乐 - 示例作者
</div>
</div>
`;
content.innerHTML = authorInfo + mediaContent + musicInfo;
resultContainer.appendChild(header);
resultContainer.appendChild(content);
// 添加到编辑器内容区
editorContent.appendChild(resultContainer);
editorContent.scrollTop = editorContent.scrollHeight;
// 更新加载状态
loadingContent.textContent = '藤原: 短视频解析完成！';
// 增加成功统计
successParseCount++;
updateParseStats();
}, 1500);
}
// ============== 图片转换功能 ==============
function createImageConverter(targetFormat) {
const existingConverter = document.querySelector('.image-converter');
if (existingConverter) {
existingConverter.remove();
return;
}
const converter = document.createElement('div');
converter.className = 'tool-container image-converter';
// 头部
const header = document.createElement('div');
header.className = 'tool-header';
const title = document.createElement('div');
title.className = 'tool-title';
title.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
图片格式转换器
`;
const closeBtn = document.createElement('button');
closeBtn.className = 'tool-close';
closeBtn.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>';
closeBtn.addEventListener('click', () => converter.remove());
header.appendChild(title);
header.appendChild(closeBtn);
// 内容区域
const content = document.createElement('div');
content.className = 'tool-content';
// 预览区域
const previewContainer = document.createElement('div');
previewContainer.className = 'tool-preview-container';
const previewImage = document.createElement('img');
previewImage.className = 'tool-preview';
const placeholder = document.createElement('div');
placeholder.className = 'tool-placeholder';
placeholder.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
<circle cx="8.5" cy="8.5" r="1.5"></circle>
<polyline points="21 15 16 10 5 21"></polyline>
</svg>
<div>请选择要转换的图片</div>
<div style="font-size:0.8em;margin-top:8px;opacity:0.7;">支持 JPG, PNG, WEBP, BMP 格式</div>
`;
previewContainer.appendChild(previewImage);
previewContainer.appendChild(placeholder);
// 格式信息
const formatInfo = document.createElement('div');
formatInfo.innerHTML = `
<div class="tool-info">
<strong>目标格式：</strong>${targetFormat.toUpperCase()}<br>
<strong>支持格式：</strong>JPG, PNG, WEBP, BMP 等主流图片格式
</div>
`;
// 操作按钮
const actions = document.createElement('div');
actions.className = 'tool-actions';
const selectBtn = document.createElement('button');
selectBtn.className = 'tool-btn';
selectBtn.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7"></path>
<line x1="16" y1="5" x2="22" y2="5"></line>
<line x1="19" y1="2" x2="19" y2="8"></line>
<circle cx="9" cy="9" r="2"></circle>
<path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path>
</svg>
选择图片
`;
selectBtn.addEventListener('click', () => {
fileInput.click();
});
const convertBtn = document.createElement('button');
convertBtn.className = 'tool-btn';
convertBtn.innerHTML = `
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="16 18 22 12 16 6"></polyline>
<polyline points="8 6 2 12 8 18"></polyline>
</svg>
转换为 ${targetFormat.toUpperCase()}
`;
convertBtn.addEventListener('click', () => {
if (!previewImage.src) {
addAILine('请先选择要转换的图片');
return;
}
convertImage(previewImage, targetFormat);
});
actions.appendChild(selectBtn);
actions.appendChild(convertBtn);
content.appendChild(previewContainer);
content.appendChild(formatInfo);
content.appendChild(actions);
converter.appendChild(header);
converter.appendChild(content);
editorContent.appendChild(converter);
editorContent.scrollTop = editorContent.scrollHeight;
// 文件选择处理
const handleFileSelect = (e) => {
const file = e.target.files[0];
if (!file) return;
if (!file.type.match('image.*')) {
addAILine('请选择有效的图片文件');
return;
}
const reader = new FileReader();
reader.onload = (event) => {
previewImage.src = event.target.result;
previewImage.classList.add('active');
placeholder.style.display = 'none';
// 显示图片信息
const img = new Image();
img.onload = () => {
addAILine(`图片已加载: ${img.width}x${img.height}px, ${(file.size / 1024).toFixed(1)}KB`);
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
// 移除事件监听器避免重复绑定
fileInput.removeEventListener('change', handleFileSelect);
};
fileInput.addEventListener('change', handleFileSelect);
}
// ============== 通用工具函数 ==============
// URL提取函数
function extractURL(text) {
try {
const urlRegex = /(https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*))/g;
const matches = text.match(urlRegex);
return matches ? matches[0] : null;
} catch (e) {
console.error('URL提取错误:', e);
return null;
}
}
// 显示全屏图片
function showFullImage(url) {
const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
cursor: zoom-out;
`;
const img = document.createElement('img');
img.src = url;
img.style.maxWidth = '90%';
img.style.maxHeight = '90%';
img.style.borderRadius = '10px';
overlay.onclick = () => overlay.remove();
overlay.appendChild(img);
document.body.appendChild(overlay);
}
// 下载所有图片
async function downloadAllImages(images, title) {
if (!window.JSZip) {
showAlert('打包下载功能需要JSZip库支持');
return;
}
try {
const zip = new JSZip();
const imgFolder = zip.folder("images");
showAlert('正在打包下载，请稍候...');
const downloadPromises = images.map(async (imgUrl, index) => {
try {
const response = await fetch(imgUrl);
if (!response.ok) throw new Error(`图片${index+1}下载失败`);
const blob = await response.blob();
imgFolder.file(`image_${index + 1}.jpg`, blob);
} catch (error) {
console.warn(`图片${index+1}下载失败:`, error);
}
});
await Promise.all(downloadPromises);
const zipBlob = await zip.generateAsync({
type: "blob",
compression: "DEFLATE",
compressionOptions: { level: 6 }
});
const cleanTitle = title.replace(/[<>:"/\\|?*]/g, '');
saveAs(zipBlob, `${cleanTitle}.zip`);
showAlert('打包下载完成！');
} catch (error) {
console.error('打包下载失败:', error);
showAlert('打包下载失败，请重试');
}
}
// 下载视频
async function downloadVideo(url, title) {
try {
showAlert('正在下载视频，请稍候...');
const response = await fetch(url);
if (!response.ok) throw new Error(`下载失败: ${response.status}`);
const blob = await response.blob();
const cleanTitle = title.replace(/[<>:"/\\|?*]/g, '');
saveAs(blob, `${cleanTitle}.mp4`);
showAlert('视频下载完成！');
} catch (error) {
console.error('视频下载失败:', error);
showAlert('视频下载失败，请重试');
}
}
// 显示提示信息
function showAlert(message) {
const alert = document.createElement('div');
alert.style.cssText = `
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: rgba(30, 41, 59, 0.95);
color: white;
padding: 12px 24px;
border-radius: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 9999;
font-size: 14px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
`;
alert.textContent = message;
document.body.appendChild(alert);
setTimeout(() => alert.remove(), 3000);
}
// 转换图片
function convertImage(imgElement, format) {
try {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置画布尺寸
canvas.width = imgElement.naturalWidth;
canvas.height = imgElement.naturalHeight;
// 绘制图片
ctx.drawImage(imgElement, 0, 0);
// 确定MIME类型
let mimeType;
let quality = 0.9;
switch (format.toLowerCase()) {
case 'jpg':
case 'jpeg':
mimeType = 'image/jpeg';
break;
case 'png':
mimeType = 'image/png';
break;
case 'webp':
mimeType = 'image/webp';
break;
case 'bmp':
mimeType = 'image/png';
addAILine('注意：BMP格式将转换为PNG格式');
break;
default:
mimeType = 'image/jpeg';
}
// 转换并下载
canvas.toBlob((blob) => {
if (!blob) {
addAILine('图片转换失败，请重试');
return;
}
const url = URL.createObjectURL(blob);
const downloadLink = document.createElement('a');
downloadLink.href = url;
downloadLink.download = `converted-image-${Date.now()}.${format}`;
// 触发下载
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
// 清理URL对象
setTimeout(() => URL.revokeObjectURL(url), 1000);
addAILine(`图片已成功转换为 ${format.toUpperCase()} 格式并开始下载！`);
addAILine(`文件大小: ${(blob.size / 1024).toFixed(1)}KB`);
}, mimeType, quality);
} catch (error) {
addAILine(`图片转换失败: ${error.message}`);
}
}
// 保存命令历史
function saveToHistory(command) {
if (commandHistoryArray.length === 0 || commandHistoryArray[commandHistoryArray.length - 1] !== command) {
commandHistoryArray.push(command);
if (commandHistoryArray.length > 20) {
commandHistoryArray.shift();
}
localStorage.setItem('commandHistory', JSON.stringify(commandHistoryArray));
}
historyIndex = -1;
}
// 显示命令历史
function showCommandHistory() {
if (commandHistoryArray.length === 0) {
addAILine('暂无命令历史记录');
return;
}
addAILine('命令历史记录:');
commandHistoryArray.slice().reverse().forEach((cmd, index) => {
addAILine(`${commandHistoryArray.length - index}. ${cmd}`);
});
}
// AI对话功能
async function sendMessage(message) {
if (!message) return;
const thinkingLine = document.createElement('div');
thinkingLine.className = 'line';
const thinkingContent = document.createElement('div');
thinkingContent.className = 'line-content ai-output';
thinkingContent.textContent = '藤原: 正在思考中...';
thinkingLine.appendChild(thinkingContent);
editorContent.appendChild(thinkingLine);
editorContent.scrollTop = editorContent.scrollHeight;
try {
const endpoint = `${apiConfig.endpoint}?id=${apiConfig.id}&key=${apiConfig.key}&words=${encodeURIComponent(message)}`;
const response = await fetch(endpoint);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
thinkingLine.remove();
if (data.code === 200 && data.msg) {
const replyLine = document.createElement('div');
replyLine.className = 'line';
const replyContent = document.createElement('div');
replyContent.className = 'line-content ai-output';
replyContent.textContent = '藤原: ';
replyLine.appendChild(replyContent);
editorContent.appendChild(replyLine);
editorContent.scrollTop = editorContent.scrollHeight;
await typeWriterEffect(replyContent, data.msg);
} else {
addAILine(`AI回复失败: ${data.msg || '未知错误'}`);
}
} catch (error) {
thinkingLine.remove();
addAILine(`AI服务暂时不可用: ${error.message}`);
console.error('AI API错误:', error);
}
}
// 显示系统统计
function showStats() {
addAILine('系统统计信息:');
addAILine(`总解析次数: ${totalParseCount}`);
addAILine(`成功解析次数: ${successParseCount}`);
const rate = totalParseCount > 0 ? Math.round((successParseCount / totalParseCount) * 100) : 0;
addAILine(`成功率: ${rate}%`);
addAILine(`命令历史记录: ${commandHistoryArray.length} 条`);
addAILine(`当前时间: ${new Date().toLocaleString()}`);
addAILine(`浏览器: ${navigator.userAgent.split(' ')[0]}`);
}
// 处理命令输入
async function processCommand(input) {
const command = input.trim().toLowerCase();
const parts = input.trim().split(' ');
const cmd = parts[0].toLowerCase();
const args = parts.slice(1).join(' ');
// 保存到历史记录
saveToHistory(input.trim());
// 添加用户输入行
addUserLine(input);
// 处理不同命令
switch (cmd) {
case 'help':
addAILine(helpText);
break;
case 'clear':
clearTerminal();
addAILine('终端已清空');
break;
case 'history':
showCommandHistory();
break;
case 'video':
if (args) {
const url = extractURL(args) || args;
parseVideo(url);
} else {
addAILine('请提供视频URL，例如: video https://v.qq.com/x/cover/xxx.html');
addAILine('支持的平台: 爱奇艺、腾讯视频、优酷、芒果TV、哔哩哔哩等');
}
break;
case 'shortvideo':
if (args) {
const url = extractURL(args) || args;
parseShortVideo(url);
} else {
addAILine('请提供短视频URL，例如: shortvideo https://v.douyin.com/xxx');
addAILine('支持的平台: 抖音、快手、小红书等');
}
break;
case 'ai':
if (args) {
await sendMessage(args);
} else {
addAILine('请输入要对话的内容，例如: ai 你好');
}
break;
case 'image':
const format = args || 'jpg';
const supportedFormats = ['jpg', 'jpeg', 'png', 'webp', 'bmp'];
if (supportedFormats.includes(format.toLowerCase())) {
createImageConverter(format.toLowerCase());
addAILine(`图片转换器已启动，目标格式: ${format.toUpperCase()}`);
} else {
addAILine(`不支持的格式: ${format}`);
addAILine(`支持的格式: ${supportedFormats.join(', ')}`);
}
break;
case 'stats':
showStats();
break;
default:
// 检查是否包含URL，如果是则尝试解析
const detectedUrl = extractURL(input);
if (detectedUrl) {
if (detectedUrl.includes('douyin.com') || detectedUrl.includes('kuaishou.com') || detectedUrl.includes('xiaohongshu.com')) {
parseShortVideo(detectedUrl);
} else {
parseVideo(detectedUrl);
}
} else {
addAILine(`未知命令: ${cmd}`);
addAILine('输入 "help" 查看可用命令');
}
break;
}
}
// 设置命令输入
function setCommandInput(command) {
userInput.value = command;
userInput.focus();
}
// 输入框事件处理
userInput.addEventListener('keydown', async (e) => {
if (e.key === 'Enter') {
e.preventDefault();
const input = userInput.value.trim();
if (input) {
userInput.value = '';
await processCommand(input);
}
} else if (e.key === 'ArrowUp') {
e.preventDefault();
if (historyIndex < commandHistoryArray.length - 1) {
historyIndex++;
userInput.value = commandHistoryArray[commandHistoryArray.length - 1 - historyIndex];
}
} else if (e.key === 'ArrowDown') {
e.preventDefault();
if (historyIndex > 0) {
historyIndex--;
userInput.value = commandHistoryArray[commandHistoryArray.length - 1 - historyIndex];
} else if (historyIndex === 0) {
historyIndex = -1;
userInput.value = '';
}
}
});
// ================ 初始化 ================
document.addEventListener('DOMContentLoaded', function() {
// 聚焦到输入框
userInput.focus();
// 显示欢迎信息
setTimeout(() => {
addAILine('欢迎使用藤原的个人终端！');
addAILine('输入 "help" 查看可用命令，或直接粘贴视频链接进行解析。');
}, 500);
});
// 防止页面刷新时丢失焦点
window.addEventListener('beforeunload', () => {
localStorage.setItem('commandHistory', JSON.stringify(commandHistoryArray));
});
// 页面可见性变化时重新聚焦
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
setTimeout(() => userInput.focus(), 100);
}
});
// 点击终端区域时聚焦输入框
editorContent.addEventListener('click', () => {
userInput.focus();
});
// 键盘快捷键
document.addEventListener('keydown', (e) => {
// Ctrl/Cmd + K 清空终端
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
e.preventDefault();
clearTerminal();
addAILine('终端已清空 (快捷键)');
}
// Ctrl/Cmd + L 聚焦输入框
if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
e.preventDefault();
userInput.focus();
userInput.select();
}
// ESC 键清空当前输入
if (e.key === 'Escape') {
userInput.value = '';
userInput.focus();
}
});
// 粘贴处理
userInput.addEventListener('paste', (e) => {
setTimeout(() => {
const pastedText = userInput.value;
const url = extractURL(pastedText);
if (url && url === pastedText.trim()) {
// 如果粘贴的是纯URL，自动识别类型
setTimeout(() => {
userInput.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
}, 100);
}
}, 10);
});
// 主题切换功能
if (localStorage.getItem("theme") === "light") {
$('#checkbox').prop('checked', true)
}
var themeToggle = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
console.log(themeToggle)
if (e.target.checked) {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
} else {
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
}
}
themeToggle.addEventListener("change", switchTheme, false);
// 用户菜单切换功能 - 简化版本
function usertoggle() {
const linkmenu = document.getElementById('linkmenu');
const container = document.getElementById('linkmenu-container');
if (linkmenu.classList.contains("show")) {
linkmenu.classList.remove("show");
container.style.display = 'none';
} else {
linkmenu.classList.add("show");
container.style.display = 'block';
}
}
// 其他jQuery功能
$(document).ready(function() {
$('div.topic-description descript:empty').hide();
$('span.topic-desc:empty').hide();
$('.pagination').html($('.pagination').html().split(' ').join(''));
$('#ucpmenu p').each(function() {
$(this).html($(this).html().replace(/· <a href="(.+?)" style="display: none;">(.+?)<\/a><br>/ig, ''));
});
$(".pformleft:contains('Date of Birth')").parent().hide();
$(".pformstrip:contains('Your personal profile')").hide();
var newMsg = parseInt("<!-- |new_msg| -->") != NaN ? parseInt("<!-- |new_msg| -->") : 0;
if (newMsg > 0) {
$(".nonewmsg").addClass("newmsg");
} else {
$(".nonewmsg").removeClass("newmsg");
}
var newAlert = parseInt("<!-- |new_alerts| -->") != NaN ? parseInt("<!-- |new_alerts| -->") : 0;
if (newAlert > 0) {
$(".nonewnotif").addClass("newnotif");
} else {
$(".nonewnotif").removeClass("newnotif");
}
$("#recent-topics").appendTo("#recent-topics-clip");
});
// 全局暴露一些函数供调试使用
window.terminalDebug = {
clearTerminal,
processCommand,
showStats,
updateParseStats,
switchVideoApi,
downloadVideo,
downloadAllImages,
showFullImage
};
// 天气API配置
const weatherConfig = {
apiUrl: "https://cn.apihz.cn/api/tianqi/tqybmoji15ip.php",
id: "10003788", // 替换为你的用户ID
key: "ffa8afb46dce4916c5a74fd73c8de9f6", // 替换为你的API Key
cacheTime: 30 * 60 * 1000, // 30分钟缓存时间
defaultLocation: "北京" // 默认位置
};
// 天气状态
let weatherState = {
lastFetch: 0,
isLoading: false,
error: null,
data: null
};
// 页面加载时初始化天气功能
document.addEventListener('DOMContentLoaded', () => {
// 初始加载天气
fetchWeatherData();
// 每1小时更新一次天气数据
setInterval(fetchWeatherData, 60 * 60 * 1000);
// 点击天气widget时刷新数据
document.querySelector('.weather-widget').addEventListener('click', () => {
fetchWeatherData();
});
});
// 获取天气数据
async function fetchWeatherData() {
// 检查是否正在加载或缓存有效
if (weatherState.isLoading ||
(weatherState.data && Date.now() - weatherState.lastFetch < weatherConfig.cacheTime)) {
return;
}
weatherState.isLoading = true;
weatherState.error = null;
updateWeatherUI(); // 显示加载状态
try {
// 构建请求URL
const params = new URLSearchParams({
id: weatherConfig.id,
key: weatherConfig.key
});
const url = `${weatherConfig.apiUrl}?${params.toString()}`;
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
if (data.code === 200) {
weatherState.data = processWeatherData(data);
weatherState.lastFetch = Date.now();
} else {
throw new Error(data.msg || "未知API错误");
}
} catch (error) {
console.error("获取天气数据失败:", error);
weatherState.error = error.message;
// 使用默认数据但标记为错误状态
weatherState.data = getDefaultWeatherData();
} finally {
weatherState.isLoading = false;
updateWeatherUI();
}
}
// 处理API返回的天气数据
function processWeatherData(apiData) {
// 确保数据结构一致
if (!apiData.place) {
apiData.place = weatherConfig.defaultLocation;
}
// 确保有基本天气数据
if (!apiData.temperature) apiData.temperature = "25";
if (!apiData.weather1) apiData.weather1 = "晴";
if (!apiData.weather2) apiData.weather2 = apiData.weather1;
if (!apiData.humidity) apiData.humidity = "50";
if (!apiData.windDirection) apiData.windDirection = "北风";
if (!apiData.windScale) apiData.windScale = "微风";
return apiData;
}
// 获取默认天气数据
function getDefaultWeatherData() {
return {
place: weatherConfig.defaultLocation,
temperature: "25",
weather1: "晴",
weather2: "晴",
humidity: "50",
windDirection: "北风",
windScale: "微风"
};
}
// 更新天气UI
function updateWeatherUI() {
const widget = document.querySelector('.weather-widget');
const loadingEl = widget.querySelector('.weather-loading');
const contentEl = widget.querySelector('.weather-content');
const errorEl = widget.querySelector('.weather-error');
// 显示加载状态或错误信息
if (weatherState.isLoading) {
loadingEl.style.display = 'block';
loadingEl.textContent = '天气加载中...';
contentEl.style.display = 'none';
errorEl.style.display = 'none';
return;
} else {
loadingEl.style.display = 'none';
}
if (weatherState.error) {
errorEl.textContent = `天气获取失败: ${weatherState.error}`;
errorEl.style.display = 'block';
contentEl.style.display = 'none';
return;
} else {
errorEl.style.display = 'none';
contentEl.style.display = 'flex';
}
// 使用当前数据或默认数据
const weatherData = weatherState.data || getDefaultWeatherData();
// 更新天气信息
widget.querySelector('.location-text').textContent = weatherData.place;
widget.querySelector('.temp-value').textContent = weatherData.temperature;
const conditionText = `${weatherData.weather1}${weatherData.weather1 !== weatherData.weather2 ? '转' + weatherData.weather2 : ''}`;
widget.querySelector('.condition-text').textContent = conditionText;
widget.querySelector('.weather-humidity').innerHTML =
`<i class="fas fa-tint"></i> 湿度: ${weatherData.humidity}%`;
widget.querySelector('.weather-wind').innerHTML =
`<i class="fas fa-wind"></i> ${weatherData.windDirection} ${weatherData.windScale}`;
// 更新天气图标
const weatherIcon = widget.querySelector('.weather-icon');
weatherIcon.className = `weather-icon fas ${getWeatherIcon(weatherData.weather1)}`;
}
function getWeatherIcon(weatherText) {
const iconMap = {
"晴": "fa-sun",
"少云": "fa-cloud-sun",
"多云": "fa-cloud",
"阴": "fa-cloud",
"雾": "fa-smog",
"雷阵雨": "fa-bolt",
"雷雨": "fa-bolt",
"小雨": "fa-cloud-rain",
"中雨": "fa-cloud-rain",
"大雨": "fa-cloud-showers-heavy",
"暴雨": "fa-cloud-showers-heavy",
"阵雨": "fa-cloud-rain",
"雨夹雪": "fa-cloud-meatball",
"小雪": "fa-snowflake",
"中雪": "fa-snowflake",
"大雪": "fa-snowflake",
"暴雪": "fa-snowflake",
"浮尘": "fa-smog",
"扬沙": "fa-smog",
"沙尘暴": "fa-smog",
"霾": "fa-smog",
"冰雹": "fa-cloud-meatball",
"冻雨": "fa-cloud-rain",
"霜冻": "fa-temperature-low"
};
// 统一转换为简体中文并去除空格
const normalizedText = weatherText.replace(/\s+/g, '');
// 尝试匹配完整文本
if (iconMap[normalizedText]) {
return iconMap[normalizedText];
}
// 尝试匹配部分文本
for (const key in iconMap) {
if (normalizedText.includes(key)) {
return iconMap[key];
}
}
// 默认返回天气图标
return "fa-cloud";
}
// FPS计数器
let lastTime = performance.now();
let frameCount = 0;
function updateFPS() {
const now = performance.now();
frameCount++;
if (now - lastTime >= 1000) {
const fps = Math.round((frameCount * 1000) / (now - lastTime));
document.getElementById('fps-counter').textContent = `FPS: ${fps}`;
frameCount = 0;
lastTime = now;
}
requestAnimationFrame(updateFPS);
}
// 启动FPS计数器
updateFPS();
// 每日一言功能
async function fetchDailyQuote() {
try {
const response = await fetch('https://api.nnxv.cn/api/yiyan.php');
const data = await response.json();
const quoteContent = document.querySelector('.quote-content');
const quoteFrom = document.querySelector('.quote-from');
quoteContent.textContent = data.content;
quoteFrom.textContent = `—— ${data.from}《${data.typeName}》`;
} catch (error) {
console.error('获取每日一言失败:', error);
document.querySelector('.quote-content').textContent = '获取每日一言失败，请刷新重试';
}
}
// 页面加载时获取每日一言
document.addEventListener('DOMContentLoaded', fetchDailyQuote);
// 禁止右键菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
alert('右键功能已禁用');
});
// 禁止快捷键
document.addEventListener('keydown', function(e) {
// 禁止Ctrl+U查看源代码
if (e.ctrlKey && e.key === 'u') {
e.preventDefault();
alert('查看源代码功能已禁用');
}
// 禁止F12开发者工具
if (e.key === 'F12') {
e.preventDefault();
alert('开发者工具已禁用');
}
// 禁止Ctrl+Shift+I
if (e.ctrlKey && e.shiftKey && e.key === 'I') {
e.preventDefault();
alert('开发者工具已禁用');
}
});
// 更全面的保护（可选）
window.onload = function() {
// 防止iframe嵌套
if (window != top) {
top.location.href = window.location.href;
}
// 禁用文本选择（可选）
document.onselectstart = function() {
return false;
};
};
// 音乐播放控制
function initBackgroundMusic() {
const audio = document.getElementById('bgMusic');
// 解决浏览器自动播放限制
function handleFirstInteraction() {
// 尝试播放音乐
audio.play().catch(e => {
console.log('自动播放被阻止:', e);
});
// 移除事件监听器
document.removeEventListener('click', handleFirstInteraction);
document.removeEventListener('keydown', handleFirstInteraction);
document.removeEventListener('touchstart', handleFirstInteraction);
}
// 添加多种用户交互事件监听
document.addEventListener('click', handleFirstInteraction);
document.addEventListener('keydown', handleFirstInteraction);
document.addEventListener('touchstart', handleFirstInteraction);
// 也可以设置音量（0.0到1.0）
audio.volume = 0.5; // 50%音量
}
// 页面加载完成后初始化音乐
document.addEventListener('DOMContentLoaded', initBackgroundMusic);
</script>
</body>
</html>
index.html
style.css
index.js