<!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>
/*---------------------------
主容器
---------------------------*/
#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>
<div id="mobnavigationToggle-container">
<div id="mobnavigationToggle">
<div id="mobnavLinks">
移动导航切换内容
</div>
</div>
</div>
<div id="navigationToggle-container">
<div id="navigationToggle">
<div id="navLinks">
导航切换内容
</div>
</div>
</div>
<div id="header">
<h1>Your Killing Floor</h1>
<h2>
<span>I'll be your slaughterhouse, your</span>
killing floor
</h2>
<h3>
一个半私人的恐怖RPG
</h3>
<div id="headerGlow"></div>
<div id="headerOverlay"></div>
</div>
<div id="innerWrapper">
<div id="underHeader">
<div class="authorPanel">
<h1 id="mg2" style="display: none;">欢迎, <b>访客</b></h1>
<h2 id="mg2" style="display: none;">请<a href="/">登录</a>或<a href="/">注册</a></h2>
<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