<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Your Killing Floor</title>
<script src="https://kit.fontawesome.com/861f1891b3.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap" rel="stylesheet">
<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 {
--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);
}
/****************************************
* 字体定义
*****************************************/
@font-face {
font-family: "MontgroveItalic";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Montgrove_Italic.woff")
format("woff");
font-display: swap;
}
/****************************************
* 用户导航菜单样式
*****************************************/
#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 #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);
}
/****************************************
* 媒体查询 - 响应式设计
*****************************************/
@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;
}
/* 移动端调整视频播放器 */
.video-container {
margin-left: -15px;
margin-right: -15px;
border-radius: 0;
width: calc(100% + 30px);
}
/* 移动端调整工具容器 */
.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;
}
/* 加载动画 */
.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;
}
/*---------------------------
主容器
---------------------------*/
#boardWrapper {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
max-width: 1200px;
min-width: 500px;
margin: 0px auto;
border: solid 1px RGBA(var(--borderRGBA), 0.5);
box-shadow: 0px 0px 25px rgb(25 25 25 / 50%);
mix-blend-mode: lighten;
}
/*---------------------------
侧边栏
---------------------------*/
#sidebar {
position: relative;
z-index: 1;
width: 40px;
padding: 20px;
font: 500 10px/120% var(--fontBody);
color: var(--lightAccent);
text-transform: uppercase;
background-color: var(--darkAccent);
background-image: linear-gradient(
180deg,
RGBA(var(--darkAccentRGBA), 0.75) 0%,
RGBA(var(--borderRGBA), 0.25) 255%
);
background-attachment: fixed;
}
#sidebar nav {
position: fixed;
z-index: 9990;
bottom: 52px;
font: 600 8px/120% var(--fontBody);
letter-spacing: 1px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
writing-mode: vertical-lr;
transform: rotate(180deg);
}
#sidebar a,
#sidebar span {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 0px 10px 0px;
margin: 0px -20px;
width: 40px;
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#userBubble > a {
border-bottom: none !important;
}
/*---------------------------
用户头像气泡
---------------------------*/
#userBubble {
position: fixed;
z-index: 9990;
bottom: 1px;
width: 40px;
height: 40px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-end;
flex-shrink: 0;
border-top: solid 1px RGBA(var(--borderRGBA), 0.5);
margin: 0px -20px 0px -20px;
}
#userBubble img {
position: absolute;
z-index: 2;
left: 0px;
top: 0px;
flex-shrink: 0;
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#userBubble img#mg2 {
position: absolute;
z-index: 2;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
object-fit: cover;
object-position: center;
pointer-events: none;
display: none; /* 访客时显示 */
}
#bubbleOverlay {
position: absolute;
z-index: 5;
top: 0px;
left: 0px;
width: 40px;
height: 40px;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--lightAccent);
text-align: center;
font-size: 30px;
background-color: RGBA(var(--darkAccentRGBA), 0.75);
opacity: 0;
pointer-events: none;
transition: 0.5s ease;
}
#userBubble:hover #bubbleOverlay {
opacity: 1;
transition: 0.5s ease;
}
/*---------------------------
顶部导航栏
---------------------------*/
#topbar {
position: sticky;
z-index: 999;
top: 0px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 45px;
color: var(--lightAccent);
background-image: linear-gradient(
89deg,
RGBA(var(--darkAccentRGBA), 0.75) 0%,
RGBA(var(--borderRGBA), 0.25) 255%
);
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
backdrop-filter: blur(10px);
}
#topbar toggles {
display: flex;
}
#topbar toggles i {
display: inline-block;
color: var(--accent);
font-size: 15px;
height: 45px;
width: 41px;
line-height: 45px;
text-align: center;
border-left: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#topbar nav member {
margin-left: -40px;
}
#topbar nav guest {
margin-left: -20px;
}
#topbar nav a {
display: inline-block;
height: 45px;
width: 41px;
line-height: 45px;
text-align: center;
color: var(--accent);
font-size: 15px;
border-right: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#topbar > nav > member > a:nth-child(1) {
background-color: RGBA(var(--borderRGBA), 0.5);
color: var(--lightAccent);
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#topbar > nav > guest > a:nth-child(1) {
border-left: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#topbar .themeSwitchWrapper input {
display: none;
}
#topbar .themeSwitchWrapper input[type="radio"]:checked + .darkMode {
display: block !important;
}
/*---------------------------
导航切换
---------------------------*/
#topbar #topbarToggle {
display: block;
}
#topbar button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
outline: inherit;
}
#navigationToggle-container {
position: sticky;
z-index: 9999;
top: 45px;
}
#navigationToggle {
position: absolute;
z-index: 9999;
top: 0px;
width: 100%;
height: 0px;
background: RGBA(var(--darkAccentRGBA), 0.75);
border-left: solid 1px RGBA(var(--borderRGBA), 0.5);
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
backdrop-filter: blur(10px);
visibility: hidden;
overflow: hidden;
transition: all 0.15s linear;
}
#navigationToggle.show {
height: 200px;
visibility: visible;
transition: all 0.15s linear;
}
/*---------------------------
移动端导航切换
---------------------------*/
#topbar #mobtopbarToggle {
display: block;
}
#mobnavigationToggle-container {
position: sticky;
z-index: 9999;
top: 45px;
}
#mobnavigationToggle {
position: absolute;
z-index: 9999;
top: 0px;
width: 100%;
height: 0px;
background: RGBA(var(--darkAccentRGBA), 0.75);
border-left: solid 1px RGBA(var(--borderRGBA), 0.5);
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
backdrop-filter: blur(10px);
visibility: hidden;
overflow: hidden;
transition: all 0.15s linear;
}
#mobnavigationToggle.show {
height: 200px;
visibility: visible;
transition: all 0.15s linear;
}
/*---------------------------
内容区域
---------------------------*/
#content {
position: relative;
z-index: 1;
width: 100%;
}
/*---------------------------
页眉
---------------------------*/
#header {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
width: 100%;
height: 650px;
background: radial-gradient(
ellipse at top,
RGBA(var(--borderRGBA), 1) 20%,
RGBA(var(--darkAccentRGBA), 1) 100%
);
border-left: solid 1px RGBA(var(--borderRGBA), 0.5);
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
overflow: hidden;
}
#header:after {
content: "";
position: absolute;
z-index: 2;
width: 100%;
height: 650px;
background-image: url(https://cdn.discordapp.com/attachments/1045960033042694194/1046002942391627806/Untitled-5.png);
background-size: cover;
background-position: bottom right;
pointer-events: none;
}
#header:before {
content: "";
position: absolute;
z-index: 1;
width: 100%;
height: 650px;
background-image: url(https://cdn.discordapp.com/attachments/1045960033042694194/1046003306230718474/image.png);
background-size: cover;
background-position: bottom right;
mix-blend-mode: multiply;
transform: scale(1.5);
pointer-events: none;
}
#header #headerGlow {
position: absolute;
z-index: 5;
top: 126px;
right: -740px;
width: 100%;
height: 650px;
background-image: url(https://cdn.discordapp.com/attachments/1045960033042694194/1046003306230718474/image.png);
background-size: cover;
background-position: bottom right;
filter: blur(20px);
transform: rotate(324deg) scale(1.5);
mix-blend-mode: lighten;
pointer-events: none;
}
#header #headerOverlay {
position: absolute;
z-index: 2;
margin: 101px;
width: calc(100% - 90px);
height: calc(100% - 90px);
border: solid 1px RGBA(var(--borderRGBA), 0.75);
pointer-events: none;
}
#header h1 {
--accentRGBA: 104, 57, 222;
position: absolute;
z-index: 1;
top: 68px;
font: normal 500 172px/125% var(--fontTitle);
text-align: center;
color: RGBA(var(--lightestAccentRGBA), 0.15) !important;
text-shadow: 1px 1px 1px RGBA(var(--accentRGBA), 1),
0px 0px 15px RGBA(var(--accentRGBA), 1);
padding: 0px 50px;
}
#header h2 {
position: absolute;
z-index: 3;
right: 41px;
bottom: 214px;
font: normal 500 35px/130% var(--fontTitle);
text-align: right;
text-transform: uppercase;
color: var(--lightAccent);
text-shadow: 1px 1px 0px RGBA(var(--accentRGBA), 1),
0px 0px 1px RGBA(var(--accentRGBA), 1);
background: var(--darkAccent);
padding: 10px;
border-radius: 5px;
box-shadow: 0px 0px 25px rgb(16 16 16 / 25%);
}
#header h2 span {
display: block;
font: 500 16px/120% var(--fontBody);
letter-spacing: 1px;
text-shadow: none !important;
}
#header h3 {
position: absolute;
z-index: 3;
right: 41px;
bottom: 190px;
background-color: var(--feature);
text-transform: uppercase;
font: 600 12px/120% var(--fontBody);
letter-spacing: 1px;
color: var(--lightestAccent);
padding: 10px;
border-radius: 3px;
}
/*---------------------------
内容包装器
---------------------------*/
#innerWrapper {
position: relative;
z-index: 2;
display: block;
height: 800px;
background-color: var(--darkAccent);
background-image: url(https://cdn.discordapp.com/attachments/1045960033042694194/1046003306230718474/image.png);
background-blend-mode: color-dodge;
background-size: cover;
background-size: cover;
background-attachment: fixed;
border-left: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#forumWrapper {
position: relative;
z-index: 3;
width: calc(100% - 88px);
height: calc(100% - 284px);
padding: 20px;
background-color: RGBA(var(--darkAccentRGBA), 0.75);
border: solid 1px RGBA(var(--borderRGBA), 0.5);
margin: 44px;
}
/*---------------------------
页眉下方区域
---------------------------*/
#underHeader {
position: relative;
z-index: 1;
display: flex;
flex-direction: row;
width: 100%;
height: 188px;
color: var(--lightAccent);
background-image: linear-gradient(
-90deg,
RGBA(var(--darkAccentRGBA), 0.75) 0%,
RGBA(var(--borderRGBA), 0.25) 255%
);
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#underHeader .authorPanel {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
width: 30%;
padding: 30px 40px;
border-right: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#underHeader .authorPanel h1,
#underHeader .authorPanel h3 {
text-transform: uppercase;
font: normal 500 25px/130% var(--fontTitle);
}
#underHeader .authorPanel h1 b,
#underHeader .authorPanel h3 b {
display: block;
color: var(--support);
text-transform: lowercase;
font-weight: 800;
font-size: 25px;
}
#underHeader .authorPanel h2,
#underHeader .authorPanel h4 {
text-transform: uppercase;
font: 500 36px/120% var(--fontBody);
letter-spacing: 1px;
color: var(--lightAccent);
}
#underHeader .authorPanel h4 {
text-transform: uppercase;
font: 500 13px/120% var(--fontBody);
letter-spacing: 1px;
color: var(--lightAccent);
margin-top: 15px;
}
#underHeader .tabPanel {
width: 46px;
border-right: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#underHeader .tabsPanel {
position: relative;
width: 66%;
transition: all ease 1s;
-moz-transition: all ease 1s;
}
#underHeader .tabsPanel input[type="radio"] {
display: none;
}
#underHeader .tabsPanel label {
position: absolute;
left: -47px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 47px;
height: 47px;
border-bottom: solid 1px RGBA(var(--borderRGBA), 0.5);
color: var(--lightAccent);
}
#underHeader .tabsPanel #intro,
#underHeader .tabsPanel #nav,
#underHeader .tabsPanel #admin,
#underHeader .tabsPanel #cred {
position: absolute;
width: 100%;
height: 188px;
padding: 30px;
opacity: 0;
visibility: hidden;
transform: scale(0.9);
transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
}
.tabsPanel input[type="radio"]:checked + label {
background-color: RGBA(var(--borderRGBA), 0.25);
transition: all ease 0.5s;
-moz-transition: all ease 0.5s;
}
#underHeader .tabsPanel #intro {
display: block;
}
#underHeader > div.tabsPanel > label:nth-child(2) {
top: 0px;
}
#underHeader > div.tabsPanel > label:nth-child(4) {
top: 47px;
}
#underHeader > div.tabsPanel > label:nth-child(6) {
top: 94px;
}
#underHeader > div.tabsPanel > label:nth-child(8) {
top: 141px;
}
#intro:checked ~ #intro,
#nav:checked ~ #nav,
#admin:checked ~ #admin,
#cred:checked ~ #cred {
opacity: 1;
visibility: visible;
transform: scale(1);
}
/*---------------------------
页脚
---------------------------*/
#footer {
position: sticky;
z-index: 999;
top: 0px;
padding: 45px;
background-image: linear-gradient(
90deg,
RGBA(var(--darkAccentRGBA), 0.75) 0%,
RGBA(var(--borderRGBA), 0.25) 255%
);
border-top: solid 1px RGBA(var(--borderRGBA), 0.5);
border-left: solid 1px RGBA(var(--borderRGBA), 0.5);
}
#footer #credit {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#footer #credit div {
padding: 5px 7px;
width: -moz-fit-content;
width: fit-content;
block-size: fit-content;
font: normal 12px/120% var(--fontBody);
color: var(--lightestAccent);
text-transform: uppercase;
margin: 2px;
}
#footer .skin {
--feature: #4b42af !important;
background-color: var(--feature);
-webkit-box-decoration-break: clone;
}
#footer .lore {
--feature: #3b8796 !important;
background-color: var(--feature);
-webkit-box-decoration-break: clone;
}
#footer .art {
--feature: #94805c !important;
background-color: var(--feature);
-webkit-box-decoration-break: clone;
}
#footer #credit .concept {
--feature: #a15741 !important;
background-color: var(--feature);
-webkit-box-decoration-break: clone;
}
#footer #credit .copyright {
width: 100%;
text-align: left;
color: var(--lightAccent);
font: 500 10px/120% var(--fontBody);
padding: 5px 0px;
}
/*---------------------------
变量定义
---------------------------*/
:root {
--fontBody: montserrat;
--fontTitle: Montgrove_Italic;
--darkAccent: #191919;
--darkAccentRGBA: 25, 25, 25;
--lightAccent: #c8c8c8;
--lightAccentRGBA: 222, 222, 222;
--darkestAccent: #191919;
--darkestAccentRGBA: 25, 25, 25;
--lightestAccent: #c8c8c8;
--lightestAccentRGBA: 222, 222, 222;
--accent: #2cb1a4;
--accentRGBA: 38, 148, 145;
--support: #269491;
--supportRGBA: 75, 67, 232;
--feature: #7e884e;
--featureRGBA: 126, 136, 78;
--borderRGBA: 75, 67, 232;
--highlight: #c09366;
--highlightRGBA: 192, 147, 102;
--supportBGRGBA: 123, 118, 185;
--accentBGRGBA: 134, 154, 232;
--featureBGRGBA: 205, 215, 222;
}
/*---------------------------
自定义字体支持
---------------------------*/
@font-face {
font-family: "Montgrove_Italic";
src: url("https://files.jcink.net/uploads2/killingfloor/fonts/Montgrove_Italic.woff")
format("woff");
}
/*---------------------------
HTML和基础样式
---------------------------*/
body,
html {
margin: 0px;
padding: 0px;
scroll-behavior: smooth;
font: 500 15px/120% var(--fontBody);
}
html {
overflow-x: auto;
}
body {
position: relative;
z-index: -1;
background-color: var(--lightAccent);
color: RGBA(var(--darkAccentRGBA), 1);
}
a {
color: var(--feature);
text-decoration: none;
cursor: crosshair;
}
img {
max-width: 100%;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 15px;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background: RGBA(var(--darkAccentRGBA), 0.05);
border: 1px solid RGBA(var(--darkAccentRGBA), 0.1);
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: var(--lightestAccent);
border: 1px solid RGBA(var(--darkAccentRGBA), 0.1);
}
::-webkit-scrollbar-thumb:active {
background: var(--lightestAccent);
}
/*---------------------------
重置样式
---------------------------*/
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
transition: all ease 0.7s;
-moz-transition: all ease 0.7s;
}
*:focus {
outline: none;
}
/*---------------------------
覆盖层
---------------------------*/
#overlayLight {
--overlayLight: RGBA(198, 190, 182, 1);
position: fixed;
z-index: 9997;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: var(--overlayLight);
background-image: var(--overlaytexturelight);
mix-blend-mode: soft-light;
pointer-events: none;
}
#overlayDark {
--overlayDark: RGBA(16, 16, 16, 1);
position: fixed;
z-index: 9999;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background-color: var(--overlayDark);
background-image: var(--overlaytexturedark);
mix-blend-mode: lighten;
pointer-events: none;
}
#bodyBackground {
--supportBGRGBA: 41, 37, 59;
--featureBGRGBA: 25, 25, 25;
position: fixed;
z-index: -1;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: RGBA(var(--supportBGRGBA), 1);
background: radial-gradient(
ellipse at top,
RGBA(var(--supportBGRGBA), 1) 20%,
RGBA(var(--featureBGRGBA), 1) 100%
);
pointer-events: none;
}
/*---------------------------
用户组样式
---------------------------*/
.m2 #mg2 {
display: block !important;
}
.m2 guest,
.m4 admin {
display: inline-block !important;
}
.m2 .authorPanel h3,
.m2 .authorPanel h4,
.m2 #bubbleOverlay,
.m2 member {
display: none !important;
}
/*---------------------------
主题切换变量
---------------------------*/
[data-theme="dark"] {
filter: grayscale(0.25) brightness(0.75) contrast(1.2);
transition: all ease 1.5s;
-moz-transition: all ease 1.5s;
}
[data-theme="light"] {
filter: grayscale(0.35) brightness(0.9) contrast(0.85);
transition: all ease 1.5s;
-moz-transition: all ease 1.5s;
--accent: #7d87a0 !important;
--accentRGBA: 125, 135, 160 !important;
--darkAccent: #c8c8c8 !important;
--darkAccentRGBA: 222, 222, 222 !important;
--lightAccent: #191919 !important;
--lightAccentRGBA: 25, 25, 25 !important;
--borderRGBA: 255, 255, 255 !important;
--overlayDark: RGBA(16, 16, 16, 1) !important;
--overlayLight: RGBA(222, 222, 222, 1) !important;
}
[data-theme="light"] #bodyBackground {
--supportBGRGBA: 154, 153, 193 !important;
--featureBGRGBA: 203, 202, 200 !important;
}
[data-theme="light"] #overlayDark {
--overlaytexturedark: url() !important;
}
[data-theme="light"] #overlayLight {
--overlaytexturelight: url(https://www.transparenttextures.com/patterns/asfalt-light.png) !important;
}
[data-theme="light"] #boardWrapper {
mix-blend-mode: unset !important;
box-shadow: 0px 0px 25px rgb(25 25 25 / 20%);
opacity: 0.95 !important;
}
[data-theme="light"] #topbar {
background-image: linear-gradient(
90deg,
RGBA(var(--darkAccentRGBA), 0.95) 0%,
RGBA(var(--borderRGBA), 0.5) 100%
);
}
[data-theme="light"] #topbar i {
color: var(--lightAccent);
}
[data-theme="light"] #header {
background: var(--darkAccent) !important;
}
[data-theme="light"] #header:before {
mix-blend-mode: color !important;
filter: invert(1) hue-rotate(135deg);
}
[data-theme="light"] #header h1 {
--accentRGBA: 45, 174, 126 !important;
opacity: 0.5;
text-shadow: 1px 1px 1px RGBA(var(--accentRGBA), 1),
0px 0px 15px RGBA(var(--accentRGBA), 1);
}
[data-theme="light"] #header h3 {
--feature: #4990a1 !important;
}
[data-theme="light"] #bubble:before {
--feature: #aece78 !important;
content: "";
background-color: var(--feature);
box-shadow: 0px 0px 25px RGBA(var(--darkestAccentRGBA), 0.5);
}
[data-theme="light"] #innerWrapper {
background-blend-mode: color;
background-color: var(--darkAccent);
}
/*---------------------------
媒体查询
---------------------------*/
@media all and (max-width: 1200px) {
#boardWrapper {
}
}
@media all and (max-width: 1050px) {
#header h1 {
font-size: 130px !important;
}
}
@media all and (max-width: 1000px) {
#sidebar,
#sidebar nav,
#topbarToggle,
#topbar nav,
#userBubble,
#underHeader .authorPanel {
display: none !important;
}
#header,
#innerWrapper,
#footer {
border-left: 0px !important;
}
#underHeader {
margin-top: 0px !important;
}
#boardWrapper {
display: flex !important;
flex-direction: column !important;
}
#header h1 {
font-size: 130px !important;
}
#header h2 {
font-size: 25px !important;
}
#topbarmobToggle {
display: inline-block !important;
}
#topbar {
display: flex;
justify-content: space-between;
padding: 0px !important;
}
#topbar toggles i {
border-right: solid 1px RGBA(var(--borderRGBA), 0.5) !important;
border-left: unset !important;
}
#underHeader .tabsPanel {
width: 94% !important;
}
}
@media all and (max-width: 700px) {
#header h1 {
font-size: 110px !important;
}
}
</style>
</head>
<body class="darkMode" id="inputact">
<div class="m4">
<!-- 2 访客视图 -->
<!-- 4 管理员视图 -->
<!-- 6 会员视图 -->
<div id="bodyBackground"></div>
<div id="overlayLight"></div>
<div id="overlayDark"></div>
<script src="https://kit.fontawesome.com/fb105acc71.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<script>
// 从本地存储获取当前主题
const currentTheme = localStorage.getItem("theme");
// 如果找到当前本地存储项
if (currentTheme) {
// 将body的data-theme属性设置为与本地存储项匹配
document.documentElement.setAttribute("data-theme", currentTheme);
}
</script>
<div id="boardWrapper">
<div id="sidebar">
<nav>
<span>Your Killing Floor</span>
<a href="/">论坛首页</a>
<a href="/">分类一</a>
<a href="/">TENG YUAN</a>
</nav>
<div id="userBubble">
<a href="/"><img src="https://64.media.tumblr.com/6eeb925e2e9ca37cfd9ae95a4fe8f707/c6fdc1f69ee81fe2-3a/s540x810/6faa13f8c91bf66b1304ea33174d0ea124807ba7.gif"></a>
<img src="https://64.media.tumblr.com/4d471e577f4aef17cb31f49ae44ddfc2/897a810c7b409a5a-9a/s540x810/67d8c0db66c4e7c10368609c68b5b2ea3f0a7024.gif" id="mg2" style="display: none;">
<div id="bubbleOverlay">
<i class="fa-thin fa-image-portrait"></i>
</div>
</div>
</div>
<div id="content">
<div id="topbar">
<nav>
<guest style="display: none;">
<a href="/"><i class="fa-light fa-arrow-right-to-bracket"></i></a>
<a href="/"><i class="fa-light fa-user-plus"></i></a>
</guest>
<member>
<a href="/"><i class="fa-light fa-user-gear"></i></a>
<a href="/"><i class="fa-light fa-bell"></i></a>
<a href="/"><i class="fa-light fa-envelope"></i></a>
<a href="/"><i class="fa-light fa-arrow-right-from-bracket"></i></a>
</member>
<admin style="display:none;">
<a href="/"><i class="fa-light fa-gear"></i></a>
<a href="/"><i class="fa-light fa-wrench"></i></a>
</admin>
</nav>
<toggles>
<div class="themeSwitchWrapper">
<label class="theme-switch" for="checkbox" id="theme_switch_click">
<input type="checkbox" id="checkbox">
<i class="fa-light fa-lightbulb"></i>
</label>
</div>
<button onclick="navtog()">
<div id="topbarToggle">
<i class="fa-light fa-layer-group"></i>
</div>
</button>
<button onclick="mobnavtog()">
<div id="topbarmobToggle" style="display:none;">
<i class="fa-light fa-bars"></i>
</div>
</button>
</toggles>
</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,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>
</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="innerWrapper">
<div id="underHeader">
<div class="authorPanel">
<h3>欢迎回来, <b>adore</b></h3>
<h4>切换账号</h4>
</div>
<div class="tabPanel"></div>
<div class="tabsPanel">
<input type="radio" id="intro" name="tabsPanel" checked>
<label for="intro"><i class="fa-light fa-book-skull"></i></label>
<input type="radio" id="nav" name="tabsPanel">
<label for="nav"><i class="fa-light fa-compass"></i></label>
<input type="radio" id="admin" name="tabsPanel">
<label for="admin"><i class="fa-light fa-circle-user"></i></label>
<input type="radio" id="cred" name="tabsPanel">
<label for="cred"><i class="fa-light fa-clipboard-list"></i></label>
<div id="intro">
欢迎来到killing floor - 一个为恐怖题材设计的奇特网站。
</div>
<div id="nav">导航</div>
<div id="admin">管理团队</div>
<div id="cred">工作人员</div>
</div>
</div>
<div id="forumWrapper"></div>
</div>
<!-- 页脚信息行 -->
<div id="footer">
<div id="credit">
<div class="skin">皮肤设计 by Ciel </div>
<div class="lore">背景故事 by Catsy </div>
<div class="art">艺术作品 by [这里]</div>
<div class="concept">插件 by [这里], [这里], 和 [这里] </div>
<div class="concept">灵感来自Dead by Daylight和the Magnus Archives </div>
<div align="center" class="copyright">Powered by <a href="https://www.invisionboard.com" target="_blank">Invision Power Board</a> (<a href="http://jcink.com" target="_blank">Jcink.com </a> <a href="https://jcink.com" target="_blank">论坛托管</a>) © 2022 <a href="https://www.invisionpower.com" target="_blank">IPS, Inc.</a> <br>页面生成时间: 0.0570
<!-- http://killingfloor.b1.jcink.com --> · <a href="index.php?act=Mobile">移动版</a> · <a href="index.php?act=privacy">隐私政策</a>
</div>
</div>
</div>
</div>
</div> <!-- group -->
<script type="text/javascript">
// 检查本地存储中的主题设置
if (localStorage.getItem("theme") === "dark") {
$('#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", "dark");
localStorage.setItem("theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
}
}
// 为主题切换添加事件监听器
themeToggle.addEventListener("change", switchTheme, false);
// 导航切换函数
function navtog() {
var x = document.getElementById("navigationToggle");
if (x.classList.contains("show")) {
x.classList.remove("show");
} else {
x.classList.add("show");
}
}
// 移动端导航切换函数
function mobnavtog() {
var x = document.getElementById("mobnavigationToggle");
if (x.classList.contains("show")) {
x.classList.remove("show");
} else {
x.classList.add("show");
}
}
</script>
</div>
</body>
</html>
index.html