<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>网站标题</title>
<!-- 引入字体和图标库 -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.min.css" rel="stylesheet">
<!-- 引入jQuery库 -->
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<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(--lighterRGB), 1) 80%
),
linear-gradient(
225deg,
RGBA(var(--featureRGB), 0.35) 10%,
RGBA(var(--lighterRGB), 1) 80%
),
linear-gradient(
315deg,
RGBA(var(--supportRGB), 0.35) 100%,
RGBA(var(--lighterRGB), 1) 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: #ba8482;
--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;
}
/* 深色主题变量 */
[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;
}
/* 主题切换按钮样式 */
.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: sticky;
z-index: 9989;
top: 0px;
left: 0px;
margin-top: -50px;
margin-bottom: 50px;
}
#linkmenu {
position: absolute;
z-index: 9989;
top: -330px;
left: -330px;
height: 0px;
width: 50px;
background: var(--accent);
border-radius: 68% 32% 63% 37% / 52% 27% 73% 48%;
visibility: hidden;
overflow: hidden;
transition: all 0.8s linear;
}
#linkmenu.show {
top: 0px;
left: -30px;
width: 50px;
width: calc(100% + 60px);
height: calc(100vh + 60px);
padding: 25px 0px;
background: RGBA(var(--lightRGB), 0.75);
backdrop-filter: blur(10px);
border-radius: 15px;
visibility: visible;
transition: all 0.8s linear;
}
/****************************************
* 页眉样式
*****************************************/
#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;
}
}
</style>
</head>
<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>
</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>I know you wanna be like me, <b>bite me</b>.</h1>
<h2>网站类型标题</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> 2024年夏季</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">
在出版和平面设计中，<b>Lorem ipsum 是一种占位文本</b>，通常用于演示文档或字体的视觉形式，而不依赖于有意义的内容。在最终副本可用之前，可以使用 Lorem ipsum 作为占位符。在出版和平面设计中，<b>Lorem ipsum 是一种占位文本</b>，通常用于演示文档或字体的视觉形式，而不依赖于有意义的内容。在最终副本可用之前，可以使用 Lorem ipsum 作为占位符。
</section>
</section>
</div>
<div id="boardCrotchBottom"></div>
<!-- 内部内容容器 -->
<div id="innerWrapper">
<nav class="siteNav">
<i class="ri-hearts-line"></i>
<a href="/">B-b-b-bite me</a>
<a href="/">All eyes on me</a>
<a href="/">Bow down to the queen</a>
I Know you wanna be like me, bite me
</nav>
</div>
<!-- 页脚 -->
<footer id="boardFooter"></footer>
</div>
<!-- JavaScript代码 -->
<script>
// 主题切换功能
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() {
var x = document.getElementById("linkmenu");
if (x.classList.contains("show")) {
x.classList.remove("show");
} else {
x.classList.add("show");
}
}
// 其他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");
});
</script>
</body>
</html>
index.html
style.css
index.js