diff --git a/admin.php b/admin.php index 6bf2e57..e57b9ef 100644 --- a/admin.php +++ b/admin.php @@ -39,69 +39,100 @@ $site_logo = $settings['site_logo'] ?? 'assets/pasted-20260207-134833-7329dc42.j + 后台管理 - <?php echo htmlspecialchars($settings['site_title'] ?? '财神组聊天框架'); ?> -
-
-
-
- - Logo - -
财神组管理
-
- 系统设置 - 话术管理 -
- 查看前台 - 退出登录 -
-
-

系统设置

- -
- +
+
+ + Logo + +
财神组管理
+
+ 系统设置 + 话术管理 +
+ 查看前台 + 退出登录 +
-
-
-
-
- +
+
+

系统设置

+ +
+ + +
+
+ +
+
+
-
- +
+ -
当前路径:
-
- - -
-
- - -
-
- - -
- - -
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
- \ No newline at end of file + diff --git a/admin_steps.php b/admin_steps.php index e2f1b73..1140c13 100644 --- a/admin_steps.php +++ b/admin_steps.php @@ -55,125 +55,157 @@ if ($edit_day > 0) { + 话术管理 - <?php echo htmlspecialchars($settings['site_title'] ?? '财神组聊天框架'); ?> -
-
-
-
- - Logo - -
财神组管理
-
- 系统设置 - 话术管理 -
- 查看前台 - 退出登录 +
+
+ + Logo + +
财神组管理
+
+ 系统设置 + 话术管理 +
+ 查看前台 + 退出登录 +
+ +
+
+
+

话术管理 (1-7天步骤)

-
-
-

话术管理 (1-7天步骤)

-
- -
- + +
+ - -
-
- 正在编辑：第 天 - -
-
-
- -
-
- - -
-
- - -
+ +
+
+ 正在编辑：第 天 + +
+
+ + +
+
+ +
-
- - +
+ +
-
- - -
-
- - -
-
-
- - - +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ + +
-
- - - +
+
+
+ + +
-
- - 取消 -
- -
+
+
+ + 取消 +
+
- - -
- - - - - - - - - - - - - - - - - - - -
天数标题最后更新操作
Day - - 编辑 - -
+ + +
+ + + + + + + + + + + + + + + + + + + +
天数标题最后更新操作
Day + + 编辑 + +
- \ No newline at end of file + diff --git a/assets/css/custom.css b/assets/css/custom.css index 75b72dd..1af9f91 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -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); + } } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index bb71034..ac15388 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -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'); } }); -}); +}); \ No newline at end of file diff --git a/index.php b/index.php index e976b3c..e08a0ec 100644 --- a/index.php +++ b/index.php @@ -63,6 +63,17 @@ if (!$step) {
+ + +
@@ -104,53 +115,58 @@ if (!$step) {
-
+

Day

-
-
+
-
+
聊什么 (Content)
-

+
-
+
为什么要这样聊 (Reasoning)
-

+
-
+
-
+
正确做法
示例：
- +
+
+
+ 解释：
+

- 解释：
-
-
+
错误做法
示例：
- +
+
+
+ 解释：
+

- 解释：
-
@@ -158,18 +174,18 @@ if (!$step) {
-
+
怎么去聊 (Technique)
-

+
-
+
聊天示例图
-
+
- Example + Example

@@ -188,7 +204,10 @@ if (!$step) {
+ +
+ - + \ No newline at end of file