cluntop
230 lines
7.0 KiB
HTML
Executable File
230 lines
7.0 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="zh-hans">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>dashboard jumppage</title>
|
|
<link rel="icon" type="image/jpeg" href="https://lsky.panell.top/i/2025/01/24/679347c837206.jpg">
|
|
<style>
|
|
:root {
|
|
/* 亮色模式变量 */
|
|
--bg-color: #f0f2f5;
|
|
--card-bg: rgba(255, 255, 255, 0.95);
|
|
--text-color: #2c3e50;
|
|
--shadow-color: rgba(0, 0, 0, 0.1);
|
|
--shenmi-start: #6C5CE7;
|
|
--shenmi-end: #A363D9;
|
|
--zashboard-start: #00B894;
|
|
--zashboard-end: #00CEC9;
|
|
--substore-start: #0A96DE;
|
|
--substore-end: #309FEA;
|
|
--theme-toggle-bg: #e4e6eb;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
/* 暗色模式默认变量 */
|
|
--bg-color: #1a1a1a;
|
|
--card-bg: rgba(40, 40, 40, 0.95);
|
|
--text-color: #e4e6eb;
|
|
--shadow-color: rgba(0, 0, 0, 0.3);
|
|
--shenmi-start: #7F53AC;
|
|
--shenmi-end: #647DEE;
|
|
--zashboard-start: #2E8B57;
|
|
--zashboard-end: #20B2AA;
|
|
--substore-start: #1A94BC;
|
|
--substore-end: #22A2C3;
|
|
--theme-toggle-bg: #333;
|
|
}
|
|
}
|
|
|
|
/* 手动暗色模式覆盖 */
|
|
.dark-mode {
|
|
--bg-color: #121212;
|
|
--card-bg: rgba(30, 30, 30, 0.95);
|
|
--text-color: #ffffff;
|
|
--shadow-color: rgba(0, 0, 0, 0.5);
|
|
--shenmi-start: #9D50BB;
|
|
--shenmi-end: #6E48AA;
|
|
--zashboard-start: #3CB371;
|
|
--zashboard-end: #2E8B57;
|
|
--theme-toggle-bg: #424242;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
margin: 0;
|
|
font-family: Arial, sans-serif;
|
|
background: var(--bg-color);
|
|
color: var(--text-color);
|
|
transition: background 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.panel-container {
|
|
text-align: center;
|
|
padding: 2.5rem;
|
|
background: var(--card-bg);
|
|
border-radius: 15px;
|
|
box-shadow: 0 8px 30px var(--shadow-color);
|
|
backdrop-filter: blur(10px);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.8em;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.panel-btn {
|
|
padding: 15px 30px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-size: 1.1em;
|
|
transition: all 0.3s ease;
|
|
color: white;
|
|
box-shadow: 0 4px 6px var(--shadow-color);
|
|
}
|
|
|
|
#shenmi-panel {
|
|
background: linear-gradient(45deg, var(--shenmi-start), var(--shenmi-end));
|
|
}
|
|
|
|
#zashboard-panel {
|
|
background: linear-gradient(45deg, var(--zashboard-start), var(--zashboard-end));
|
|
}
|
|
|
|
#substore-panel {
|
|
background: linear-gradient(45deg, var(--substore-start), var(--substore-end));
|
|
}
|
|
|
|
.panel-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 6px 15px var(--shadow-color);
|
|
}
|
|
|
|
.panel-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.theme-toggle {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: var(--theme-toggle-bg);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.theme-toggle:hover {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.theme-toggle svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: var(--text-color);
|
|
}
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 1000;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button class="theme-toggle" onclick="toggleTheme()">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12 18c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6zm0-2v-8c2.2 0 4 1.8 4 4s-1.8 4-4 4z"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="panel-container">
|
|
<h2>选择面板</h2>
|
|
<div class="btn-group">
|
|
<button
|
|
class="panel-btn"
|
|
id="shenmi-panel"
|
|
onclick="jumpTo('http://127.0.0.1:23333', event)">
|
|
🔮 神秘面板
|
|
</button>
|
|
<button
|
|
class="panel-btn"
|
|
id="zashboard-panel"
|
|
onclick="jumpTo('http://127.0.0.1:9909/ui', event)">
|
|
✨ zashboard
|
|
</button>
|
|
<button
|
|
class="panel-btn"
|
|
id="substore-panel"
|
|
onclick="jumpTo('https://substore.panell.top/', event)">
|
|
📦 SubStore
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let isAnimating = false;
|
|
|
|
function jumpTo(url, event) {
|
|
if (isAnimating) return;
|
|
isAnimating = true;
|
|
event.preventDefault();
|
|
|
|
const button = event.currentTarget;
|
|
const rect = button.getBoundingClientRect();
|
|
const centerX = rect.left + rect.width / 2;
|
|
const centerY = rect.top + rect.height / 2;
|
|
|
|
const overlay = document.createElement('div');
|
|
overlay.className = 'overlay';
|
|
overlay.style.background = getComputedStyle(button).background;
|
|
overlay.style.clipPath = `circle(0 at ${centerX}px ${centerY}px)`;
|
|
overlay.style.transition = 'clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1)';
|
|
|
|
document.body.appendChild(overlay);
|
|
|
|
requestAnimationFrame(() => {
|
|
overlay.style.clipPath = `circle(150% at ${centerX}px ${centerY}px)`;
|
|
});
|
|
|
|
overlay.addEventListener('transitionend', () => {
|
|
isAnimating = false;
|
|
window.location.href = url;
|
|
});
|
|
}
|
|
|
|
function toggleTheme() {
|
|
document.body.classList.toggle('dark-mode');
|
|
localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
|
|
}
|
|
|
|
function initTheme() {
|
|
if (localStorage.getItem('theme') === 'dark') {
|
|
document.body.classList.add('dark-mode');
|
|
}
|
|
}
|
|
|
|
initTheme();
|
|
</script>
|
|
</body>
|
|
</html>
|