QWQLwToo
164 lines
5.5 KiB
HTML
164 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>神秘档案馆</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: transparent;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* 使用 Flexbox 垂直布局 */
|
|
#app-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
height: 100%;
|
|
}
|
|
|
|
.title-bar-shell {
|
|
height: 40px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 10px;
|
|
-webkit-app-region: drag;
|
|
color: var(--text-secondary);
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.title-bar-shell .title {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
}
|
|
|
|
#view-controls {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
#webview-container {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
webview {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.title-bar-shell .title {
|
|
font-size: 12px;
|
|
}
|
|
|
|
#view-controls {
|
|
padding: 6px 10px;
|
|
}
|
|
|
|
#view-controls button {
|
|
padding: 4px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.title-bar-shell {
|
|
height: 35px;
|
|
}
|
|
|
|
.title-bar-shell .title {
|
|
font-size: 11px;
|
|
}
|
|
|
|
#view-controls {
|
|
padding: 5px 8px;
|
|
}
|
|
|
|
#view-controls button {
|
|
padding: 3px;
|
|
font-size: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body id="app-body">
|
|
<div id="app-wrapper">
|
|
<div class="title-bar-shell">
|
|
<span class="title"><i class="fas fa-archive"></i> 神秘档案馆</span>
|
|
<div class="window-controls">
|
|
<button id="minimize-btn" class="window-control-btn" title="最小化">
|
|
<i class="fas fa-window-minimize"></i>
|
|
</button>
|
|
<button id="maximize-btn" class="window-control-btn" title="最大化/还原">
|
|
<i class="far fa-square"></i>
|
|
</button>
|
|
<button id="close-btn" class="window-control-btn" title="关闭">
|
|
<i class="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="view-controls">
|
|
<button id="back-btn" class="control-btn mini-btn ripple" title="后退" disabled><i class="fas fa-arrow-left"></i></button>
|
|
<button id="forward-btn" class="control-btn mini-btn ripple" title="前进" disabled><i class="fas fa-arrow-right"></i></button>
|
|
<button id="reload-btn" class="control-btn mini-btn ripple" title="刷新"><i class="fas fa-sync-alt"></i></button>
|
|
</div>
|
|
<div id="webview-container">
|
|
<webview id="secret-webview" src="https://archive.cdtsf.com"></webview>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const urlParams = new URLSearchParams(window.location.search);
|
|
const theme = urlParams.get('theme') || 'dark';
|
|
document.body.setAttribute('data-theme', theme);
|
|
|
|
// 窗口控制
|
|
document.getElementById('close-btn').addEventListener('click', () => window.electronAPI.closeCurrentWindow());
|
|
document.getElementById('minimize-btn').addEventListener('click', () => window.electronAPI.secretWindowMinimize());
|
|
document.getElementById('maximize-btn').addEventListener('click', () => window.electronAPI.secretWindowMaximize());
|
|
|
|
// Webview 控制
|
|
const webview = document.getElementById('secret-webview');
|
|
const backBtn = document.getElementById('back-btn');
|
|
const forwardBtn = document.getElementById('forward-btn');
|
|
const reloadBtn = document.getElementById('reload-btn');
|
|
|
|
const updateNavButtons = () => {
|
|
backBtn.disabled = !webview.canGoBack();
|
|
forwardBtn.disabled = !webview.canGoForward();
|
|
};
|
|
|
|
webview.addEventListener('dom-ready', updateNavButtons);
|
|
webview.addEventListener('did-navigate', updateNavButtons);
|
|
webview.addEventListener('did-navigate-in-page', updateNavButtons);
|
|
|
|
backBtn.addEventListener('click', () => webview.goBack());
|
|
forwardBtn.addEventListener('click', () => webview.goForward());
|
|
reloadBtn.addEventListener('click', () => webview.reload());
|
|
</script>
|
|
</body>
|
|
</html> |