页面优化,功能修复
This commit is contained in:
@@ -36,6 +36,22 @@
|
||||
--page-section-gap: .9rem;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
--bg-page: #0f1528;
|
||||
--bg-surface: #141d35;
|
||||
--bg-soft: #1a2747;
|
||||
--text-main: #e7ecff;
|
||||
--text-muted: #a5b1d6;
|
||||
--brand: #6f88ff;
|
||||
--brand-strong: #8ea3ff;
|
||||
--brand-soft: #1c2a52;
|
||||
--line: #27365f;
|
||||
--line-strong: #334775;
|
||||
--shadow-sm: 0 8px 20px rgba(4, 8, 20, .45);
|
||||
--shadow-md: 0 14px 30px rgba(4, 8, 20, .58);
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
min-height: 100%;
|
||||
@@ -51,6 +67,13 @@
|
||||
var(--bg-page);
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] body {
|
||||
background:
|
||||
radial-gradient(circle at 12% -10%, rgba(67, 78, 136, .2) 0, rgba(67, 78, 136, 0) 45%),
|
||||
radial-gradient(circle at 86% -12%, rgba(75, 98, 164, .22) 0, rgba(75, 98, 164, 0) 38%),
|
||||
var(--bg-page);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--page-max-width);
|
||||
}
|
||||
@@ -778,6 +801,39 @@
|
||||
font-size: .92rem;
|
||||
}
|
||||
|
||||
:root[data-theme="dark"] .footer-shell {
|
||||
background: rgba(16, 24, 44, .78);
|
||||
}
|
||||
|
||||
.float-actions {
|
||||
position: fixed;
|
||||
right: 1rem;
|
||||
bottom: 1rem;
|
||||
z-index: 1200;
|
||||
display: grid;
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.float-btn {
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 999px;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-main);
|
||||
min-width: 42px;
|
||||
height: 42px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: var(--shadow-sm);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.feedback-modal .modal-content {
|
||||
border-color: var(--line);
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
:where(a, button, input, textarea, select, [role="button"]):focus-visible {
|
||||
outline: 2px solid color-mix(in srgb, var(--brand) 62%, transparent);
|
||||
outline-offset: 2px;
|
||||
@@ -950,7 +1006,7 @@
|
||||
|
||||
<footer class="footer-shell py-4 mt-3">
|
||||
<div class="container d-flex flex-column flex-lg-row justify-content-between gap-2">
|
||||
<div>漏 {{ date('Y') }} AIWeb 路 AI鑱氬悎瀵艰埅 路 妯″瀷鎺ㄨ崘 路 鏁欑▼瀛︿範</div>
|
||||
<div>© {{ date('Y') }} AIWeb · AI工具集 · 模型推荐 · 教程学习</div>
|
||||
<div>
|
||||
<a class="text-decoration-none me-3" href="{{ route('seo.sitemap') }}">Sitemap</a>
|
||||
<a class="text-decoration-none" href="{{ route('seo.robots') }}">Robots</a>
|
||||
@@ -958,7 +1014,79 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<div class="float-actions">
|
||||
<button type="button" class="float-btn" id="themeToggle" title="切换主题" aria-label="切换明暗模式">
|
||||
<i class="bi bi-moon-stars"></i>
|
||||
</button>
|
||||
<button type="button" class="float-btn" data-bs-toggle="modal" data-bs-target="#feedbackModal" title="提交反馈" aria-label="提交反馈">
|
||||
<i class="bi bi-chat-dots"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="modal fade feedback-modal" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<form method="post" action="{{ route('feedback.store') }}">
|
||||
@csrf
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="feedbackModalLabel">提交反馈</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
|
||||
</div>
|
||||
<div class="modal-body d-grid gap-2">
|
||||
<select class="form-select" name="feedback_type" required>
|
||||
<option value="">请选择类型</option>
|
||||
<option value="tool">推荐新工具</option>
|
||||
<option value="model">推荐新模型</option>
|
||||
<option value="news">资讯纠错/补充</option>
|
||||
<option value="guide">教程建议</option>
|
||||
<option value="other">其他建议</option>
|
||||
</select>
|
||||
<input class="form-control" type="text" name="title" maxlength="180" placeholder="标题(如:建议收录某某工具)" required>
|
||||
<textarea class="form-control" name="description" rows="5" maxlength="4000" placeholder="请详细描述你的建议、来源链接、补充说明等" required></textarea>
|
||||
<input class="form-control" type="text" name="contact" maxlength="160" placeholder="联系方式(可选:邮箱/微信)">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
|
||||
<button type="submit" class="btn btn-primary">提交反馈</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
(() => {
|
||||
const root = document.documentElement;
|
||||
const storageKey = 'aiweb-theme';
|
||||
const toggle = document.getElementById('themeToggle');
|
||||
const meta = document.getElementById('themeColorMeta');
|
||||
|
||||
const applyTheme = (theme) => {
|
||||
root.setAttribute('data-theme', theme);
|
||||
if (meta) {
|
||||
meta.setAttribute('content', theme === 'dark' ? '#0f1528' : '#eef3fb');
|
||||
}
|
||||
|
||||
if (toggle) {
|
||||
const icon = toggle.querySelector('i');
|
||||
if (icon) {
|
||||
icon.className = theme === 'dark' ? 'bi bi-sun' : 'bi bi-moon-stars';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const initial = localStorage.getItem(storageKey)
|
||||
|| (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
|
||||
applyTheme(initial);
|
||||
|
||||
toggle?.addEventListener('click', () => {
|
||||
const next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
|
||||
localStorage.setItem(storageKey, next);
|
||||
applyTheme(next);
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
@yield('scripts')
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user