<!DOCTYPE html>
<html data-theme="light">
<head>
<title>𝐀 𝕄𝕀𝔻𝕊𝕌𝕄𝕄𝔼ℝ 𝐍𝐈𝐆𝐇𝐓'𝐒 𝐃𝐑𝐄𝐀𝐌</title>
<script src="https://kit.fontawesome.com/861f1891b3.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-1.7.2.js"></script>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
</head>
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet">
<body class="act-idx code-00 group-4" style="--accent: #794f4e; --accentRGB: 121, 79, 78; --support: #8f6356; --supportRGB: 143, 99, 86;">
<script>
// 检查并应用保存的主题
const currentTheme = localStorage.getItem("theme");
if (currentTheme) {
document.documentElement.setAttribute("data-theme", currentTheme);
}
</script>
<!-- 背景层和覆盖层 -->
<div class="underlay" id="bodyBackground"></div>
<div class="overlay" id="overlayLight"></div>
<div class="overlay" id="overlayDark"></div>
<div id="boardWrapper">
<!-- 侧边栏 -->
<div id="boardSidebar">
<div class="stickyBar">
<div class="icons">
<!-- 返回顶部按钮 -->
<div onclick="scrollSmoothToTop()">
<i class="fa-light fa-arrow-up"></i>
</div>
<!-- 主题切换开关 -->
<label class="theme-switch" for="checkbox" id="theme_switch_click">
<input type="checkbox" id="checkbox">
<dark><i class="fa-light fa-lightbulb-on"></i></dark>
<light><i class="fa-light fa-lightbulb"></i></light>
</label>
<!-- 滚动到底部按钮 -->
<div onclick="scrollSmoothToBottom()">
<i class="fa-light fa-arrow-down"></i>
</div>
</div>
</div>
</div>
<div id="innerWrapper">
<!-- 顶部栏背景 -->
<div id="topbarBacking"></div>
<!-- 顶部栏 -->
<div id="boardTopbar">
<div id="desktopTopbar">
<!-- 会员链接 -->
<div class="memberLinks">
<button onclick="usertoggle()" class="memberAvatar">
<img src='https://files.jcink.net/uploads2/titania//av-1.png?1707437753' border='0' width='300' height='450' alt='' />
</button>
<section class="memberInfo">
<span><a href="/index.php?showuser=1" target="_blank">Root Admin</a></span>
<nav class="userLinks">
<a href="/index.php?act=Msg&CODE=01" class="noNewMessage"><i class="fa-duotone fa-envelope"></i></a>
<a href="/index.php?act=UserCP&CODE=alerts" class="noNewNotification"><i class="fa-duotone fa-bell"></i></a>
<a href="/index.php?act=Login&CODE=03&key=e196e32b667fd49fc8f2854ae63f28f3"><i class="fa-duotone fa-power-off"></i></a>
</nav>
</section>
</div>
</div>
</div>
<!-- 用户切换菜单 -->
<div id="linkmenu-container">
<div id="linkmenu">
</div>
</div>
<!-- 导航栏 -->
<nav id="boardNavigation">
<div id='navstrip' align='left'><i class="fa-duotone fa-heart-circle-plus"></i> <a href='/index.php?act=idx'>𝐀 𝕄𝕀𝔻𝕊𝕌𝕄𝕄𝔼ℝ 𝐍𝐈𝐆𝐇𝐓'𝐒 𝐃𝐑𝐄𝐀𝐌</a></div>
<br />
<br />
</nav>
</div>
</div>
<script type="text/javascript">
// 初始化主题切换状态
if (localStorage.getItem("theme") === "light") {
$('#checkbox').prop('checked', true)
}
var themeToggle = document.querySelector(
'.theme-switch input[type="checkbox"]'
);
// 切换主题函数
function switchTheme(e) {
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);
</script>
<script>
// 用户菜单切换
function usertoggle() {
var x = document.getElementById("linkmenu");
if (x.classList.contains("show")) {
x.classList.remove("show");
} else {
x.classList.add("show");
}
}
scrollingElement = document.scrollingElement || document.body;
// 平滑滚动到底部（需要jQuery）
function scrollSmoothToBottom(id) {
$(scrollingElement).animate({
scrollTop: document.body.scrollHeight
},
500
);
}
// 平滑滚动到顶部（需要jQuery）
function scrollSmoothToTop(id) {
$(scrollingElement).animate({
scrollTop: 0
},
500
);
}
</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;
}
:root {
--accent: #a5735e;
--accentRGB: 165, 115, 94;
--support: #96a89a;
--supportRGB: 150, 168, 154;
--feature: #e2dcc7;
--featureRGB: 226, 220, 199;
--neutral: #9d8a80;
--neutralRGB: 157, 138, 128;
--dark: #1c1a1a;
--darkRGB: 28, 26, 26;
--darkest: #1c1a1a;
--darkestRGB: 28, 26, 26;
--lighter: #dbdbdb;
--lighterRGB: 219, 219, 219;
--light: #c3c3c3;
--lightRGB: 195, 195, 195;
--lightest: #dbdbdb;
--lightestRGB: 219, 219, 219;
--fontBody: Source Serif Pro;
--fontTitle: Huova;
--fontTitleAlt: HuovaOutline;
--border: RGBA(var(--darkRGB), 0.15);
--borderAlt: RGBA(var(--darkRGB), 0.1);
}
[data-theme="dark"] {
--dark: #dcdcdc;
--darkRGB: 220, 220, 220;
--lighter: #1c1a1a;
--lighterRGB: 28, 26, 26;
--light: #2a2828;
--lightRGB: 42, 40, 40;
}
#theme_switch_click #checkbox,
#theme_switch_click > light,
#theme_switch_click > dark {
display: none;
}
[data-theme="light"] #theme_switch_click > light,
[data-theme="dark"] #theme_switch_click > dark {
display: flex !important;
}
.overlay#overlayLight {
--lightest: #ededed;
z-index: 9998;
mix-blend-mode: darken;
}
.overlay#overlayLight {
--overlay: #1c1a1a;
z-index: 9999;
mix-blend-mode: lighten;
}
@font-face {
font-family: "Huova";
src: url("https://assets.codepen.io/3254510/Huova.otf") format("opentype");
}
@font-face {
font-family: "HuovaOutline";
src: url("https://assets.codepen.io/3254510/HuovaOutline.otf")
format("opentype");
}
#boardWrapper {
position: relative;
display: grid;
grid-template-columns: auto 1fr;
width: clamp(450px, 100%, 1300px);
margin: auto;
}
#boardSidebar {
position: relative;
z-index: 999;
display: flex;
flex-direction: column;
padding: 15px;
color: var(--neutral);
font: 600 18px/120% var(--fontBody);
background: var(--light);
}
#boardSidebar label {
display: flex;
flex-direction: column;
align-items: center;
width: 20px;
}
#boardSidebar dark i,
#boardSidebar light i {
color: var(--dark);
}
.stickyBar {
position: sticky;
top: 20px;
}
.stickyBar .icons {
height: calc(100vh - 40px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: 25px;
}
#topbarBacking {
position: sticky;
z-index: 9990;
top: 0px;
width: 100%;
height: 50px;
background: var(--light);
margin-bottom: -50px;
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.35);
}
#boardTopbar {
position: sticky;
top: 0px;
z-index: 9990;
width: intrinsic;
width: -moz-max-content;
width: -webkit-max-content;
padding: 15px 30px 15px 0px;
background-color: var(--light);
box-shadow: 0px 0px 50px -10px RGBA(000, 000, 000, 0.35);
border-radius: 0px 0px 20px 0px;
}
#boardTopbar:after {
content: "";
position: absolute;
z-index: 9990;
right: -34px;
top: 0px;
width: 50px;
height: 50px;
background: var(--light);
pointer-events: none;
}
#boardTopbar:before {
content: "";
position: absolute;
z-index: 0;
bottom: 10px;
right: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(172deg);
}
#desktopTopbar {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
#desktopTopbar:before {
content: "";
position: absolute;
z-index: 9990;
top: 85px;
left: -1px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--light);
transform: rotate(172deg);
}
#desktopTopbar .memberAvatar {
width: 70px;
height: 70px;
background-color: var(--accent);
background-size: cover;
border-radius: 10px;
}
#desktopTopbar .memberAvatar:hover {
cursor: crosshair;
}
#desktopTopbar .memberAvatar img {
width: 70px;
height: 70px;
object-fit: cover;
border-radius: 10px;
}
#desktopTopbar .memberAvatar:active {
transform: translateY(10px) scale(0.99);
}
#desktopTopbar .memberInfo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-transform: uppercase;
gap: 10px;
}
#desktopTopbar .memberInfo a {
color: var(--dark);
}
#desktopTopbar .memberInfo span {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font: 800 25px/120% var(--fontTitle);
color: var(--dark);
}
#desktopTopbar .memberInfo {
font: 600 25px/80% var(--fontBody);
}
#desktopTopbar .memberLinks {
display: flex;
gap: 25px;
}
#desktopTopbar .userLinks {
display: flex;
flex-direction: row;
gap: 20px;
}
#desktopTopbar .memberLinks a {
text-transform: uppercase;
}
#desktopTopbar .memberLinks a:hover i {
transform: scale(1.1);
}
#desktopTopbar .memberLinks a i {
color: var(--neutral);
}
#boardNavigation {
position: sticky;
z-index: 9990;
top: 50px;
right: 0px;
}
#boardNavigation br {
display: none;
}
#navstrip {
position: absolute;
top: -50px;
right: 0px;
display: flex;
gap: 5px;
justify-content: center;
align-items: center;
background: var(--accent);
color: var(--lightest);
padding: 13px;
border-radius: 0px 0px 0px 15px;
}
#navstrip:before {
content: "";
position: absolute;
z-index: 0;
top: 0px;
left: -40px;
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 20px 20px 0 var(--accent);
transform: rotate(274deg);
}
#navstrip a {
color: var(--lightest);
}
#linkmenu-container {
position: sticky;
z-index: 9989;
top: 0px;
margin-top: -50px;
}
#linkmenu {
position: absolute;
z-index: 9989;
top: 100px;
height: 0px;
width: calc(100% - 0px);
border-radius: 0px;
visibility: hidden;
overflow: hidden;
transition: all 0.15s linear;
margin-top: -100px;
}
#linkmenu.show {
height: calc(100vh - 0px);
padding: 25px 0px;
background: RGBA(var(--lightRGB), 0.75);
backdrop-filter: blur(10px);
visibility: visible;
transition: all 0.15s linear;
}
</style>
</body>
</html>
index.html