admin/17-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

caishen

Browse Source
This commit is contained in:
Flatlogic Bot 2026-02-07 15:20:03 +00:00
parent 7174e34e88
commit d80d0a04ab
5 changed files with 474 additions and 227 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
admin.php
View File

@ -39,69 +39,100 @@ $site_logo = $settings['site_logo'] ?? 'assets/pasted-20260207-134833-7329dc42.j
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>后台管理 - <?php echo htmlspecialchars($settings['site_title'] ?? '财神组聊天框架'); ?></title>
<link rel="icon" type="image/jpeg" href="<?php echo htmlspecialchars($site_logo); ?>">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
.sidebar { height: 100vh; background: #212529; color: #fff; padding-top: 20px; }
.sidebar a { color: #adb5bd; text-decoration: none; padding: 10px 20px; display: block; }
.sidebar a:hover, .sidebar a.active { background: #343a40; color: #fff; }
.main-content { padding: 30px; background: #f8f9fa; min-height: 100vh; }
:root { --admin-sidebar-width: 240px; }
body { background: #f8f9fa; }
.sidebar {
height: 100vh;
background: #212529;
color: #fff;
padding-top: 20px;
position: fixed;
width: var(--admin-sidebar-width);
z-index: 100;
}
.sidebar a { color: #adb5bd; text-decoration: none; padding: 12px 20px; display: block; transition: 0.2s; }
.sidebar a:hover, .sidebar a.active { background: #343a40; color: #fff; border-left: 4px solid #d4af37; }
.main-content {
margin-left: var(--admin-sidebar-width);
padding: 40px;
min-height: 100vh;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
}
.main-content {
margin-left: 0;
padding: 20px;
}
.sidebar a { display: inline-block; padding: 10px 15px; }
.sidebar hr { display: none; }
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar">
<div class="text-center mb-4 px-3">
<?php if($site_logo): ?>
<img src="<?php echo htmlspecialchars($site_logo); ?>" alt="Logo" class="img-fluid mb-2" style="max-height: 60px; border-radius: 8px;">
<?php endif; ?>
<h5 class="text-warning">财神组管理</h5>
</div>
<a href="admin.php" class="active"><i class="bi bi-gear-fill me-2"></i> 系统设置</a>
<a href="admin_steps.php"><i class="bi bi-chat-dots-fill me-2"></i> 话术管理</a>
<hr>
<a href="index.php" target="_blank"><i class="bi bi-eye me-2"></i> 查看前台</a>
<a href="logout.php"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a>
</div>
<div class="col-md-10 main-content">
<h3>系统设置</h3>
<?php if($message): ?>
<div class="alert alert-success"><?php echo $message; ?></div>
<?php endif; ?>
<div class="sidebar">
<div class="text-center mb-4 px-3 d-none d-md-block">
<?php if($site_logo): ?>
<img src="<?php echo htmlspecialchars($site_logo); ?>" alt="Logo" class="img-fluid mb-2" style="max-height: 60px; border-radius: 8px;">
<?php endif; ?>
<h5 class="text-warning">财神组管理</h5>
</div>
<a href="admin.php" class="active"><i class="bi bi-gear-fill me-2"></i> 系统设置</a>
<a href="admin_steps.php"><i class="bi bi-chat-dots-fill me-2"></i> 话术管理</a>
<hr>
<a href="index.php" target="_blank"><i class="bi bi-eye me-2"></i> 查看前台</a>
<a href="logout.php"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a>
</div>
<div class="card shadow-sm mt-4">
<div class="card-body">
<form method="POST">
<div class="mb-3">
<label class="form-label">网站名称</label>
<div class="main-content">
<div class="container-fluid">
<h3>系统设置</h3>
<?php if($message): ?>
<div class="alert alert-success mt-3"><?php echo $message; ?></div>
<?php endif; ?>
<div class="card shadow-sm mt-4">
<div class="card-body p-4">
<form method="POST">
<div class="row">
<div class="col-md-6 mb-3">
<label class="form-label fw-bold">网站名称</label>
<input type="text" name="site_title" class="form-control" value="<?php echo htmlspecialchars($settings['site_title'] ?? ''); ?>">
</div>
<div class="mb-3">
<label class="form-label">网站 Logo/Favicon 路径</label>
<div class="col-md-6 mb-3">
<label class="form-label fw-bold">网站 Logo/Favicon 路径</label>
<input type="text" name="site_logo" class="form-control" value="<?php echo htmlspecialchars($settings['site_logo'] ?? ''); ?>">
<div class="form-text">当前路径: <?php echo htmlspecialchars($site_logo); ?></div>
</div>
<div class="mb-3">
<label class="form-label">Telegram 客服链接</label>
<input type="text" name="tg_link" class="form-control" value="<?php echo htmlspecialchars($settings['tg_link'] ?? ''); ?>">
</div>
<div class="mb-3">
<label class="form-label">底部版权信息</label>
<textarea name="footer_copy" class="form-control" rows="2"><?php echo htmlspecialchars($settings['footer_copy'] ?? ''); ?></textarea>
</div>
<div class="mb-3">
<label class="form-label">全屏水印文字</label>
<input type="text" name="watermark_text" class="form-control" value="<?php echo htmlspecialchars($settings['watermark_text'] ?? ''); ?>">
</div>
<button type="submit" name="update_settings" class="btn btn-warning px-5">保存全局设置</button>
</form>
</div>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Telegram 客服链接</label>
<input type="text" name="tg_link" class="form-control" value="<?php echo htmlspecialchars($settings['tg_link'] ?? ''); ?>">
</div>
<div class="mb-3">
<label class="form-label fw-bold">底部版权信息</label>
<textarea name="footer_copy" class="form-control" rows="2"><?php echo htmlspecialchars($settings['footer_copy'] ?? ''); ?></textarea>
</div>
<div class="mb-3">
<label class="form-label fw-bold">全屏水印文字</label>
<input type="text" name="watermark_text" class="form-control" value="<?php echo htmlspecialchars($settings['watermark_text'] ?? ''); ?>">
</div>
<div class="mt-4">
<button type="submit" name="update_settings" class="btn btn-warning px-5 fw-bold">保存全局设置</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
</html>

228
admin_steps.php
View File

@ -55,125 +55,157 @@ if ($edit_day > 0) {
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>话术管理 - <?php echo htmlspecialchars($settings['site_title'] ?? '财神组聊天框架'); ?></title>
<link rel="icon" type="image/jpeg" href="<?php echo htmlspecialchars($site_logo); ?>">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
<style>
.sidebar { height: 100vh; background: #212529; color: #fff; padding-top: 20px; position: fixed; width: 16.666667%; }
.sidebar a { color: #adb5bd; text-decoration: none; padding: 10px 20px; display: block; }
.sidebar a:hover { background: #343a40; color: #fff; }
.sidebar a.active { background: #343a40; color: #fff; border-left: 4px solid #d4af37; }
.main-content { padding: 30px; background: #f8f9fa; min-height: 100vh; margin-left: 16.666667%; }
:root { --admin-sidebar-width: 240px; }
body { background: #f8f9fa; }
.sidebar {
height: 100vh;
background: #212529;
color: #fff;
padding-top: 20px;
position: fixed;
width: var(--admin-sidebar-width);
z-index: 100;
}
.sidebar a { color: #adb5bd; text-decoration: none; padding: 12px 20px; display: block; transition: 0.2s; }
.sidebar a:hover, .sidebar a.active { background: #343a40; color: #fff; border-left: 4px solid #d4af37; }
.main-content {
margin-left: var(--admin-sidebar-width);
padding: 40px;
min-height: 100vh;
}
@media (max-width: 768px) {
.sidebar {
width: 100%;
height: auto;
position: relative;
padding-bottom: 10px;
}
.main-content {
margin-left: 0;
padding: 20px;
}
.sidebar a { display: inline-block; padding: 10px 15px; }
.sidebar hr { display: none; }
}
.card-header { font-weight: bold; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar px-0">
<div class="text-center mb-4 px-3">
<?php if($site_logo): ?>
<img src="<?php echo htmlspecialchars($site_logo); ?>" alt="Logo" class="img-fluid mb-2" style="max-height: 60px; border-radius: 8px;">
<?php endif; ?>
<h5 class="text-warning">财神组管理</h5>
</div>
<a href="admin.php"><i class="bi bi-gear-fill me-2"></i> 系统设置</a>
<a href="admin_steps.php" class="active"><i class="bi bi-chat-dots-fill me-2"></i> 话术管理</a>
<hr>
<a href="index.php" target="_blank"><i class="bi bi-eye me-2"></i> 查看前台</a>
<a href="logout.php"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a>
<div class="sidebar">
<div class="text-center mb-4 px-3 d-none d-md-block">
<?php if($site_logo): ?>
<img src="<?php echo htmlspecialchars($site_logo); ?>" alt="Logo" class="img-fluid mb-2" style="max-height: 60px; border-radius: 8px;">
<?php endif; ?>
<h5 class="text-warning">财神组管理</h5>
</div>
<a href="admin.php"><i class="bi bi-gear-fill me-2"></i> 系统设置</a>
<a href="admin_steps.php" class="active"><i class="bi bi-chat-dots-fill me-2"></i> 话术管理</a>
<hr>
<a href="index.php" target="_blank"><i class="bi bi-eye me-2"></i> 查看前台</a>
<a href="logout.php"><i class="bi bi-box-arrow-right me-2"></i> 退出登录</a>
</div>
<div class="main-content">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3>话术管理 (1-7天步骤)</h3>
</div>
<div class="col-md-10 main-content">
<div class="d-flex justify-content-between align-items-center mb-4">
<h3>话术管理 (1-7天步骤)</h3>
</div>
<?php if($message): ?>
<div class="alert alert-success"><?php echo $message; ?></div>
<?php endif; ?>
<?php if($message): ?>
<div class="alert alert-success"><?php echo $message; ?></div>
<?php endif; ?>
<?php if ($current_step): ?>
<div class="card shadow-sm mb-5">
<div class="card-header bg-dark text-white d-flex justify-content-between">
<span>正在编辑：第 <?php echo $current_step['day_number']; ?> 天</span>
<a href="admin_steps.php" class="text-white text-decoration-none"><i class="bi bi-x-lg"></i></a>
</div>
<div class="card-body">
<form method="POST">
<input type="hidden" name="day_number" value="<?php echo $current_step['day_number']; ?>">
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">步骤标题</label>
<input type="text" name="title" class="form-control" value="<?php echo htmlspecialchars($current_step['title']); ?>" required>
</div>
<div class="col-md-6">
<label class="form-label">示例图片 URL</label>
<input type="text" name="image_url" class="form-control" value="<?php echo htmlspecialchars($current_step['image_url']); ?>" placeholder="https://...">
</div>
<?php if ($current_step): ?>
<div class="card shadow-sm mb-5">
<div class="card-header bg-dark text-white d-flex justify-content-between">
<span>正在编辑：第 <?php echo $current_step['day_number']; ?> 天</span>
<a href="admin_steps.php" class="text-white text-decoration-none"><i class="bi bi-x-lg"></i></a>
</div>
<div class="card-body p-4">
<form method="POST">
<input type="hidden" name="day_number" value="<?php echo $current_step['day_number']; ?>">
<div class="row g-3 mb-3">
<div class="col-md-6">
<label class="form-label fw-bold">步骤标题</label>
<input type="text" name="title" class="form-control" value="<?php echo htmlspecialchars($current_step['title']); ?>" required>
</div>
<div class="mb-3">
<label class="form-label">聊什么 (What)</label>
<textarea name="what_to_chat" class="form-control" rows="3"><?php echo htmlspecialchars($current_step['what_to_chat']); ?></textarea>
<div class="col-md-6">
<label class="form-label fw-bold">示例图片 URL</label>
<input type="text" name="image_url" class="form-control" value="<?php echo htmlspecialchars($current_step['image_url']); ?>" placeholder="https://...">
</div>
<div class="mb-3">
<label class="form-label">怎么去聊 (How)</label>
<textarea name="how_to_chat" class="form-control" rows="3"><?php echo htmlspecialchars($current_step['how_to_chat']); ?></textarea>
</div>
<div class="mb-3">
<label class="form-label">为什么要这样聊 (Why)</label>
<textarea name="why_to_chat" class="form-control" rows="3"><?php echo htmlspecialchars($current_step['why_to_chat']); ?></textarea>
</div>
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label text-success">正确做法示例</label>
<textarea name="correct_example" class="form-control" rows="4"><?php echo htmlspecialchars($current_step['correct_example']); ?></textarea>
<label class="form-label mt-2">正确做法解释</label>
</div>
<div class="mb-3">
<label class="form-label fw-bold">聊什么 (What)</label>
<textarea name="what_to_chat" class="form-control" rows="3"><?php echo htmlspecialchars($current_step['what_to_chat']); ?></textarea>
</div>
<div class="mb-3">
<label class="form-label fw-bold">怎么去聊 (How)</label>
<textarea name="how_to_chat" class="form-control" rows="3"><?php echo htmlspecialchars($current_step['how_to_chat']); ?></textarea>
</div>
<div class="mb-3">
<label class="form-label fw-bold">为什么要这样聊 (Why)</label>
<textarea name="why_to_chat" class="form-control" rows="3"><?php echo htmlspecialchars($current_step['why_to_chat']); ?></textarea>
</div>
<div class="row g-3 mb-4">
<div class="col-md-6">
<div class="p-3 border rounded bg-light">
<label class="form-label text-success fw-bold">正确做法示例</label>
<textarea name="correct_example" class="form-control mb-2" rows="4"><?php echo htmlspecialchars($current_step['correct_example']); ?></textarea>
<label class="form-label small fw-bold">正确做法解释</label>
<textarea name="correct_explanation" class="form-control" rows="2"><?php echo htmlspecialchars($current_step['correct_explanation']); ?></textarea>
</div>
<div class="col-md-6">
<label class="form-label text-danger">错误做法示例</label>
<textarea name="wrong_example" class="form-control" rows="4"><?php echo htmlspecialchars($current_step['wrong_example']); ?></textarea>
<label class="form-label mt-2">错误做法解释</label>
</div>
<div class="col-md-6">
<div class="p-3 border rounded bg-light">
<label class="form-label text-danger fw-bold">错误做法示例</label>
<textarea name="wrong_example" class="form-control mb-2" rows="4"><?php echo htmlspecialchars($current_step['wrong_example']); ?></textarea>
<label class="form-label small fw-bold">错误做法解释</label>
<textarea name="wrong_explanation" class="form-control" rows="2"><?php echo htmlspecialchars($current_step['wrong_explanation']); ?></textarea>
</div>
</div>
<div class="d-flex gap-2">
<button type="submit" name="update_step" class="btn btn-warning px-5">更新内容</button>
<a href="admin_steps.php" class="btn btn-light">取消</a>
</div>
</form>
</div>
</div>
<div class="d-flex gap-2">
<button type="submit" name="update_step" class="btn btn-warning px-5 fw-bold">更新内容</button>
<a href="admin_steps.php" class="btn btn-light px-4">取消</a>
</div>
</form>
</div>
<?php endif; ?>
<div class="table-responsive bg-white p-3 rounded shadow-sm">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th width="80">天数</th>
<th>标题</th>
<th>最后更新</th>
<th width="150">操作</th>
</tr>
</thead>
<tbody>
<?php foreach ($steps as $s): ?>
<tr>
<td>Day <?php echo $s['day_number']; ?></td>
<td><?php echo htmlspecialchars($s['title']); ?></td>
<td class="small text-muted"><?php echo $s['updated_at']; ?></td>
<td>
<a href="admin_steps.php?edit=<?php echo $s['day_number']; ?>" class="btn btn-sm btn-outline-warning">
<i class="bi bi-pencil-square"></i> 编辑
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<?php endif; ?>
<div class="table-responsive bg-white p-3 rounded shadow-sm">
<table class="table table-hover align-middle">
<thead class="table-light">
<tr>
<th width="80">天数</th>
<th>标题</th>
<th class="d-none d-md-table-cell">最后更新</th>
<th width="120">操作</th>
</tr>
</thead>
<tbody>
<?php foreach ($steps as $s): ?>
<tr>
<td class="fw-bold">Day <?php echo $s['day_number']; ?></td>
<td><?php echo htmlspecialchars($s['title']); ?></td>
<td class="small text-muted d-none d-md-table-cell"><?php echo $s['updated_at']; ?></td>
<td>
<a href="admin_steps.php?edit=<?php echo $s['day_number']; ?>" class="btn btn-sm btn-outline-warning">
<i class="bi bi-pencil-square"></i> 编辑
</a>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
</html>

206
assets/css/custom.css
View File

@ -22,7 +22,7 @@ body {
height: 100%;
pointer-events: none;
z-index: 9999;
opacity: 0.05;
opacity: 0.04;
overflow: hidden;
}
@ -37,13 +37,13 @@ body {
justify-content: center;
align-content: center;
transform: rotate(-30deg);
font-size: 24px;
font-size: 20px;
font-weight: bold;
color: #000;
}
.watermark-item {
padding: 60px;
padding: 80px;
white-space: nowrap;
}
@ -57,29 +57,41 @@ body {
width: var(--sidebar-width);
background: var(--secondary-color);
color: #fff;
transition: all 0.3s;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: fixed;
height: 100vh;
z-index: 1000;
z-index: 1050;
box-shadow: 4px 0 10px rgba(0,0,0,0.1);
}
#content {
width: calc(100% - var(--sidebar-width));
margin-left: var(--sidebar-width);
padding: 40px;
transition: all 0.3s;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Sidebar toggled state (desktop) */
#sidebar.collapsed {
margin-left: -var(--sidebar-width);
}
#content.expanded {
width: 100%;
margin-left: 0;
}
.sidebar-header {
padding: 25px;
padding: 30px 25px;
background: #000;
text-align: center;
}
.sidebar-header h3 {
font-size: 1.2rem;
font-size: 1.1rem;
color: var(--primary-color);
margin: 0;
font-weight: 700;
letter-spacing: 1px;
}
#sidebar ul.components {
@ -92,38 +104,77 @@ body {
color: #adb5bd;
text-decoration: none;
transition: 0.3s;
font-size: 0.95rem;
}
#sidebar ul li a:hover, #sidebar ul li.active > a {
color: #fff;
background: rgba(212, 175, 55, 0.1);
background: rgba(212, 175, 55, 0.15);
border-left: 4px solid var(--primary-color);
}
#sidebar ul li a i {
margin-right: 10px;
margin-right: 12px;
}
/* Mobile Nav Bar */
.mobile-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: var(--secondary-color);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
z-index: 1040;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.mobile-logo-text {
color: var(--primary-color);
font-weight: bold;
font-size: 1.1rem;
}
#sidebarCollapseMobile {
font-size: 1.5rem;
}
/* Overlay */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1045;
display: none;
backdrop-filter: blur(2px);
}
/* Floating TG Button */
.tg-float {
position: fixed;
right: 30px;
top: 50%;
transform: translateY(-50%);
right: 25px;
bottom: 100px;
z-index: 1001;
text-align: center;
}
.tg-btn {
width: 60px;
height: 60px;
width: 55px;
height: 55px;
background-color: #0088cc;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
font-size: 28px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
text-decoration: none;
animation: pulse-tg 2s infinite;
@ -131,11 +182,12 @@ body {
.tg-btn:hover {
color: #fff;
transform: scale(1.05);
}
.tg-text {
display: block;
font-size: 12px;
font-size: 11px;
margin-top: 5px;
background: rgba(0,0,0,0.7);
color: #fff;
@ -145,69 +197,139 @@ body {
@keyframes pulse-tg {
0% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0.7); }
70% { box-shadow: 0 0 0 20px rgba(0, 136, 204, 0); }
70% { box-shadow: 0 0 0 15px rgba(0, 136, 204, 0); }
100% { box-shadow: 0 0 0 0 rgba(0, 136, 204, 0); }
}
/* Back to Top */
#back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
bottom: 25px;
right: 25px;
display: none;
z-index: 1001;
width: 45px;
height: 45px;
}
/* Content Cards */
.card {
.content-card {
border: none;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
margin-bottom: 30px;
border-radius: 15px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
margin-bottom: 20px;
overflow: hidden;
}
.card-header {
background: #fff;
border-bottom: 1px solid #eee;
font-weight: bold;
padding: 15px 25px;
border-bottom: 1px solid #f0f0f0;
font-weight: 700;
padding: 15px 20px;
font-size: 1rem;
}
.card-body {
padding: 20px;
}
.text-content {
font-size: 1.05rem;
line-height: 1.7;
color: #444;
}
.step-badge {
background: var(--primary-color);
color: #fff;
padding: 5px 15px;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8rem;
font-size: 0.75rem;
vertical-align: middle;
margin-left: 10px;
}
/* Example Sections */
.example-box {
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
padding: 15px;
border-radius: 10px;
font-size: 0.95rem;
}
.correct-box {
background-color: #e8f5e9;
border-left: 5px solid #4caf50;
background-color: #f1f8f1;
border-left: 5px solid #28a745;
}
.wrong-box {
background-color: #ffebee;
border-left: 5px solid #f44336;
background-color: #fff5f5;
border-left: 5px solid #dc3545;
}
.explanation-box strong {
color: #666;
font-size: 0.85rem;
}
footer {
padding: 40px 0;
padding: 50px 0;
text-align: center;
border-top: 1px solid #eee;
margin-top: 50px;
margin-top: 40px;
}
/* Responsive Adjustments */
@media (max-width: 768px) {
#sidebar { margin-left: -var(--sidebar-width); }
#sidebar.active { margin-left: 0; }
#content { width: 100%; margin-left: 0; }
#content.active { margin-left: var(--sidebar-width); }
#sidebar {
margin-left: -var(--sidebar-width);
}
#sidebar.active {
margin-left: 0;
}
#content {
width: 100%;
margin-left: 0;
padding: 80px 15px 20px 15px;
}
.section-title-container h2 {
font-size: 1.4rem;
}
.card-header {
padding: 12px 15px;
font-size: 0.95rem;
}
.card-body {
padding: 15px;
}
.text-content {
font-size: 0.95rem;
}
.watermark-item {
padding: 50px;
}
.tg-float {
right: 15px;
bottom: 80px;
}
#back-to-top {
right: 15px;
bottom: 20px;
}
}
/* Desktop Hover Effects */
@media (min-width: 769px) {
.content-card {
transition: transform 0.2s;
}
.content-card:hover {
transform: translateY(-3px);
}
}

75
assets/js/main.js
View File

@ -2,13 +2,53 @@ document.addEventListener('DOMContentLoaded', function () {
const sidebar = document.getElementById('sidebar');
const content = document.getElementById('content');
const sidebarCollapse = document.getElementById('sidebarCollapse');
const sidebarCollapseMobile = document.getElementById('sidebarCollapseMobile');
const overlay = document.getElementById('overlay');
const backToTop = document.getElementById('back-to-top');
// Sidebar Toggle for Mobile
// Sidebar Toggle for Mobile (Header button)
if (sidebarCollapseMobile) {
sidebarCollapseMobile.addEventListener('click', function () {
toggleMobileSidebar();
});
}
// Sidebar Toggle for Desktop (Content button)
if (sidebarCollapse) {
sidebarCollapse.addEventListener('click', function () {
sidebar.classList.toggle('active');
content.classList.toggle('active');
if (window.innerWidth > 768) {
sidebar.classList.toggle('collapsed');
content.classList.toggle('expanded');
// Change icon
const icon = sidebarCollapse.querySelector('i');
if (sidebar.classList.contains('collapsed')) {
icon.className = 'bi bi-text-indent-right';
} else {
icon.className = 'bi bi-text-indent-left';
}
} else {
toggleMobileSidebar();
}
});
}
function toggleMobileSidebar() {
sidebar.classList.toggle('active');
if (sidebar.classList.contains('active')) {
overlay.style.display = 'block';
document.body.style.overflow = 'hidden'; // Prevent scroll
} else {
overlay.style.display = 'none';
document.body.style.overflow = 'auto';
}
}
// Close sidebar when clicking overlay
if (overlay) {
overlay.addEventListener('click', function () {
sidebar.classList.remove('active');
overlay.style.display = 'none';
document.body.style.overflow = 'auto';
});
}
@ -21,21 +61,24 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
backToTop.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
if (backToTop) {
backToTop.addEventListener('click', function () {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
});
}
// Close sidebar when clicking outside on mobile
document.addEventListener('click', function (event) {
const isClickInsideSidebar = sidebar.contains(event.target);
const isClickInsideCollapse = sidebarCollapse ? sidebarCollapse.contains(event.target) : false;
if (!isClickInsideSidebar && !isClickInsideCollapse && window.innerWidth <= 768) {
// Resize handler to clean up states
window.addEventListener('resize', function() {
if (window.innerWidth > 768) {
sidebar.classList.remove('active');
content.classList.remove('active');
if (overlay) overlay.style.display = 'none';
document.body.style.overflow = 'auto';
} else {
sidebar.classList.remove('collapsed');
content.classList.remove('expanded');
}
});
});
});

65
index.php
View File

@ -63,6 +63,17 @@ if (!$step) {
</div>
</div>
<!-- Mobile Top Nav -->
<nav class="mobile-nav d-md-none">
<button type="button" id="sidebarCollapseMobile" class="btn text-white">
<i class="bi bi-list"></i>
</button>
<div class="mobile-logo-text">
<?php echo htmlspecialchars($site_title); ?>
</div>
<div style="width: 40px;"></div> <!-- Spacer -->
</nav>
<!-- Floating TG -->
<div class="tg-float">
<a href="<?php echo htmlspecialchars($tg_link); ?>" target="_blank" class="tg-btn">
@ -104,53 +115,58 @@ if (!$step) {
<!-- Page Content -->
<div id="content">
<div class="container-fluid">
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex justify-content-between align-items-center mb-4 section-title-container">
<h2><?php echo htmlspecialchars($step['title']); ?> <span class="step-badge">Day <?php echo $current_day; ?></span></h2>
<button type="button" id="sidebarCollapse" class="btn btn-dark d-md-none">
<i class="bi bi-list"></i>
<!-- Desktop sidebar collapse (optional) -->
<button type="button" id="sidebarCollapse" class="btn btn-outline-dark d-none d-md-block">
<i class="bi bi-text-indent-left"></i>
</button>
</div>
<div class="row">
<div class="row g-4">
<div class="col-lg-8">
<div class="card">
<div class="card content-card">
<div class="card-header"><i class="bi bi-chat-quote-fill me-2 text-warning"></i> 聊什么 (Content)</div>
<div class="card-body">
<p><?php echo nl2br(htmlspecialchars($step['what_to_chat'] ?? '')); ?></p>
<div class="text-content"><?php echo nl2br(htmlspecialchars($step['what_to_chat'] ?? '')); ?></div>
</div>
</div>
<div class="card">
<div class="card content-card">
<div class="card-header"><i class="bi bi-info-circle-fill me-2 text-info"></i> 为什么要这样聊 (Reasoning)</div>
<div class="card-body">
<p><?php echo nl2br(htmlspecialchars($step['why_to_chat'] ?? '')); ?></p>
<div class="text-content"><?php echo nl2br(htmlspecialchars($step['why_to_chat'] ?? '')); ?></div>
</div>
</div>
<div class="row">
<div class="row g-3">
<div class="col-md-6">
<div class="card border-success">
<div class="card border-success content-card h-100">
<div class="card-header bg-success text-white"><i class="bi bi-check-circle-fill me-2"></i> 正确做法</div>
<div class="card-body">
<div class="example-box correct-box">
<strong>示例：</strong><br>
<?php echo nl2br(htmlspecialchars($step['correct_example'] ?? '')); ?>
<div class="mt-2"><?php echo nl2br(htmlspecialchars($step['correct_example'] ?? '')); ?></div>
</div>
<div class="explanation-box mt-3">
<strong>解释：</strong><br>
<p class="mt-1 text-muted small"><?php echo nl2br(htmlspecialchars($step['correct_explanation'] ?? '')); ?></p>
</div>
<strong>解释：</strong><br>
<?php echo nl2br(htmlspecialchars($step['correct_explanation'] ?? '')); ?>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-danger">
<div class="card border-danger content-card h-100">
<div class="card-header bg-danger text-white"><i class="bi bi-x-circle-fill me-2"></i> 错误做法</div>
<div class="card-body">
<div class="example-box wrong-box">
<strong>示例：</strong><br>
<?php echo nl2br(htmlspecialchars($step['wrong_example'] ?? '')); ?>
<div class="mt-2"><?php echo nl2br(htmlspecialchars($step['wrong_example'] ?? '')); ?></div>
</div>
<div class="explanation-box mt-3">
<strong>解释：</strong><br>
<p class="mt-1 text-muted small"><?php echo nl2br(htmlspecialchars($step['wrong_explanation'] ?? '')); ?></p>
</div>
<strong>解释：</strong><br>
<?php echo nl2br(htmlspecialchars($step['wrong_explanation'] ?? '')); ?>
</div>
</div>
</div>
@ -158,18 +174,18 @@ if (!$step) {
</div>
<div class="col-lg-4">
<div class="card">
<div class="card content-card">
<div class="card-header"><i class="bi bi-lightning-fill me-2 text-warning"></i> 怎么去聊 (Technique)</div>
<div class="card-body">
<p><?php echo nl2br(htmlspecialchars($step['how_to_chat'] ?? '')); ?></p>
<div class="text-content"><?php echo nl2br(htmlspecialchars($step['how_to_chat'] ?? '')); ?></div>
</div>
</div>
<div class="card">
<div class="card content-card">
<div class="card-header"><i class="bi bi-image me-2 text-primary"></i> 聊天示例图</div>
<div class="card-body text-center">
<div class="card-body text-center p-2">
<?php if(!empty($step['image_url'])): ?>
<img src="<?php echo htmlspecialchars($step['image_url']); ?>" class="img-fluid rounded border" alt="Example">
<img src="<?php echo htmlspecialchars($step['image_url']); ?>" class="img-fluid rounded shadow-sm" alt="Example" style="max-height: 500px;">
<?php else: ?>
<div class="py-5 bg-light text-muted rounded">
<i class="bi bi-image" style="font-size: 3rem;"></i><br>
@ -188,7 +204,10 @@ if (!$step) {
</div>
</div>
<!-- Sidebar Overlay for Mobile -->
<div id="overlay"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
</body>
</html>
</html>