Hugging Face's logo

Spaces:
automindy
/
Toolhub
Paused

App Files Community
Toolhub / Views /Shared /_Layout.cshtml
unifare
Initial commit: ToolHub ASP.NET Core app
5fc700d
Raw History Blame Contribute Delete
10.9 kB
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - ToolHub</title>
<meta name="description" content="ToolHub - 一站式在线工具平台，集成图片处理、文档转换、数据计算等多种实用工具" />
<meta name="keywords" content="在线工具,PDF转换,图片处理,文档转换,数据计算" />
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="~/favicon.ico" />
<!-- 外部字体和图标 -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet" />
<!-- 样式文件 -->
<link rel="stylesheet" href="~/css/toolhub.css" asp-append-version="true" />
@await RenderSectionAsync("Styles", required: false)
</head>
<body>
<!-- 导航栏 -->
<header class="navbar">
<div class="container">
<div style="display: flex; justify-content: space-between; align-items: center; width: 100%;">
<!-- Logo -->
<a href="@Url.Action("Index", "Home")" class="navbar-brand">
<div class="brand-icon">
<i class="fas fa-wrench"></i>
</div>
<span class="text-gradient">ToolHub</span>
</a>
<!-- 搜索框 - 桌面端 -->
<div class="search-container" style="display: none;">
<form class="search-form" action="@Url.Action("Tools", "Home")" method="get">
<input type="text" name="search" class="search-input" placeholder="搜索工具、文档或教程..." value="@ViewBag.Search" />
<i class="fas fa-search search-icon"></i>
</form>
</div>
<!-- 导航链接和按钮 -->
<div style="display: flex; align-items: center; gap: 1rem;">
<!-- 桌面端链接 -->
<nav style="display: none;">
<a href="@Url.Action("Tools", "Home")" class="btn btn-outline btn-sm">
<i class="fas fa-th-large"></i>
<span>所有工具</span>
</a>
<a href="@Url.Action("Privacy", "Home")" class="btn btn-outline btn-sm">
<i class="fas fa-shield-alt"></i>
<span>隐私政策</span>
</a>
</nav>
<!-- 移动端菜单按钮 -->
<button class="mobile-menu-toggle btn btn-outline btn-sm">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<!-- 移动端搜索容器 -->
<div class="mobile-search-container" style="margin-top: 1rem; display: none;">
<form class="search-form" action="@Url.Action("Tools", "Home")" method="get">
<input type="text" name="search" class="search-input" placeholder="搜索工具..." value="@ViewBag.Search" />
<i class="fas fa-search search-icon"></i>
</form>
</div>
</div>
<!-- 移动端菜单 -->
<div class="mobile-menu" style="display: none;">
<div class="container">
<div style="padding: 1rem 0; border-top: 1px solid var(--light-2);">
<a href="@Url.Action("Tools", "Home")" style="display: flex; align-items: center; padding: 0.75rem; text-decoration: none; color: var(--dark);">
<i class="fas fa-th-large" style="width: 1.5rem; margin-right: 0.75rem;"></i>
<span>所有工具</span>
</a>
<a href="@Url.Action("Privacy", "Home")" style="display: flex; align-items: center; padding: 0.75rem; text-decoration: none; color: var(--dark);">
<i class="fas fa-shield-alt" style="width: 1.5rem; margin-right: 0.75rem;"></i>
<span>隐私政策</span>
</a>
</div>
</div>
</div>
</header>
<!-- 主内容区 -->
<main style="min-height: calc(100vh - 200px); padding-top: 5rem;">
@RenderBody()
</main>
<!-- 页脚 -->
<footer class="footer">
<div class="container">
<div class="footer-grid">
<!-- 品牌信息 -->
<div class="footer-section">
<div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;">
<div class="brand-icon">
<i class="fas fa-wrench"></i>
</div>
<span style="font-size: 1.25rem; font-weight: 700; color: white;">ToolHub</span>
</div>
<p style="margin-bottom: 1.5rem; max-width: 300px;">
一站式在线工具平台，集成图片处理、文档转换、数据计算等多种实用工具，满足您的日常工作和学习需求。
</p>
<div class="social-links">
<a href="#" class="social-link">
<i class="fab fa-weixin"></i>
</a>
<a href="#" class="social-link">
<i class="fab fa-weibo"></i>
</a>
<a href="#" class="social-link">
<i class="fab fa-qq"></i>
</a>
<a href="#" class="social-link">
<i class="fab fa-github"></i>
</a>
</div>
</div>
<!-- 快速链接 -->
<div class="footer-section">
<h4>快速链接</h4>
<ul>
<li><a href="@Url.Action("Index", "Home")">首页</a></li>
<li><a href="@Url.Action("Tools", "Home")">全部工具</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</div>
<!-- 支持 -->
<div class="footer-section">
<h4>支持</h4>
<ul>
<li><a href="#">帮助中心</a></li>
<li><a href="#">使用教程</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">反馈建议</a></li>
</ul>
</div>
<!-- 法律 -->
<div class="footer-section">
<h4>法律</h4>
<ul>
<li><a href="@Url.Action("Privacy", "Home")">隐私政策</a></li>
<li><a href="#">服务条款</a></li>
<li><a href="#">版权声明</a></li>
<li><a href="#">免责声明</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p style="color: var(--light-3); font-size: 0.875rem;">
© 2025 ToolHub. 保留所有权利。
</p>
<div style="display: flex; gap: 1.5rem;">
<a href="@Url.Action("Privacy", "Home")" style="color: var(--light-3); font-size: 0.875rem; text-decoration: none;">隐私政策</a>
<a href="#" style="color: var(--light-3); font-size: 0.875rem; text-decoration: none;">服务条款</a>
<a href="#" style="color: var(--light-3); font-size: 0.875rem; text-decoration: none;">Cookies</a>
</div>
</div>
</div>
</footer>
<!-- 返回顶部按钮 -->
<button class="back-to-top">
<i class="fas fa-chevron-up"></i>
</button>
<!-- 提示消息容器 -->
<div id="toast-container" style="position: fixed; top: 2rem; right: 2rem; z-index: 10000;"></div>
<!-- JavaScript -->
<script src="~/js/toolhub.js" asp-append-version="true"></script>
@await RenderSectionAsync("Scripts", required: false)
<style>
/* 移动端响应式 */
@@media (min-width: 768px) {
.search-container {
display: block !important;
}
nav {
display: flex !important;
gap: 0.5rem;
}
.mobile-menu-toggle {
display: none !important;
}
}
/* 提示消息样式 */
.toast {
position: relative;
background: white;
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
padding: 1rem;
margin-bottom: 0.5rem;
transform: translateX(100%);
transition: transform 0.3s ease;
border-left: 4px solid var(--primary);
}
.toast.show {
transform: translateX(0);
}
.toast.toast-success {
border-left-color: var(--success);
}
.toast.toast-error {
border-left-color: var(--danger);
}
.toast.toast-warning {
border-left-color: var(--warning);
}
.toast-content {
display: flex;
align-items: center;
gap: 0.75rem;
}
.toast-content i {
font-size: 1.25rem;
}
.toast-success .toast-content i {
color: var(--success);
}
.toast-error .toast-content i {
color: var(--danger);
}
.toast-warning .toast-content i {
color: var(--warning);
}
.toast-info .toast-content i {
color: var(--primary);
}
/* 移动端菜单动画 */
.mobile-menu {
background: white;
border-top: 1px solid var(--light-2);
box-shadow: var(--shadow);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.mobile-menu.show {
max-height: 300px;
}
.mobile-search-container {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.mobile-search-container.show {
max-height: 100px;
}
</style>
</body>
</html>