Skip to content

A
ai-box
Commit d44aafbd authored by fisherdaddy's avatar fisherdaddy
Browse files
Options

chore: 首页样式优化

parent 9215c7ae
Show whitespace changes
Inline Side-by-side
Showing with 470 additions and 54 deletions
index.html
View file @ d44aafbd
......@@ -10,7 +10,7 @@
<title>AI工具箱 | 智能助手集合</title>
<link rel="stylesheet" href="/src/styles/main.css" />
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GSZMX418JL"></script>
<script>
......
src/components/Header.jsx
View file @ d44aafbd
......@@ -69,15 +69,27 @@ function Header() {
className="avatar"
onClick={toggleMenu}
/>
{menuOpen && (
<div className="dropdown-menu">
<button onClick={handleLogout}>{t('logout')}</button>
<div className={`dropdown-menu ${menuOpen ? 'active' : ''}`}>
<button onClick={handleLogout}>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
<polyline points="16 17 21 12 16 7" />
<line x1="21" y1="12" x2="9" y2="12" />
</svg>
{t('logout')}
</button>
</div>
)}
</div>
</div>
) : (
<NavLink to="/login">{t('login')}</NavLink>
<NavLink to="/login" className="login-button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4" />
<polyline points="10 17 15 12 10 7" />
<line x1="15" y1="12" x2="3" y2="12" />
</svg>
{t('login')}
</NavLink>
)}
</div>
</div>
......
src/data/i18n.json
View file @ d44aafbd
......@@ -447,7 +447,10 @@
"Image": "图像",
"AudioVideo": "音视频",
"Productivity": "效率办公"
}
},
"login": "登录",
"loginSubtitle": "欢迎使用 AI 工具箱，请登录以获得完整体验",
"or": "或"
},
"ja": {
"title": "AIツールボックス",
......@@ -662,7 +665,7 @@
"mission": "私たちの使命",
"missionDescription": "強力なAIツールへの簡単なアクセスを提供し、ユーザーの生産性と創造性を高めること。",
"team": "私たちのチーム",
"teamDescription": "私たちは革新的なソリューションの構築に専念するAI愛好家と開発者の献身的なチームです。",
"teamDescription": "私たちは革新的なソリューションを축하는 데 전념하는 AI 애호가 및 개발자 팀입니다.",
"contact": "お問い合わせ"
},
"navigation": {
......
src/pages/Login.jsx
View file @ d44aafbd
......@@ -2,42 +2,57 @@
import React, { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { GoogleLogin } from '@react-oauth/google';
import { useTranslation } from '../js/i18n';
import '../styles/Login.css';
const Login = () => {
const navigate = useNavigate();
const { t } = useTranslation();
const handleLoginSuccess = (credentialResponse) => {
const { credential } = credentialResponse;
// 手动解码 JWT
const base64Url = credential.split('.')[1];
const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
const decodedPayload = JSON.parse(window.atob(base64));
// 将用户信息保存到 localStorage 或上下文
localStorage.setItem('user', JSON.stringify(decodedPayload));
navigate('/'); // 登录成功后重定向到首页
navigate('/');
};
const handleLoginError = () => {
console.log('登录失败');
console.log('Login failed');
};
useEffect(() => {
const user = localStorage.getItem('user');
if (user) {
navigate('/'); // 如果已登录，直接跳转到首页
navigate('/');
}
}, [navigate]);
return (
<div className="login-container">
<h1>登录</h1>
<div className="login-card">
<h1 className="login-title">{t('login')}</h1>
<p className="login-subtitle">
{t('loginSubtitle', '欢迎使用 AI 工具箱，请登录以获得完整体验')}
</p>
<div className="login-options">
<div className="google-login-wrapper">
<GoogleLogin
onSuccess={handleLoginSuccess}
onError={handleLoginError}
theme="outline"
size="large"
width="100%"
text="signin_with"
shape="rectangular"
locale="zh_CN"
useOneTap
/>
</div>
</div>
</div>
</div>
);
};
......
src/styles/Header.css
View file @ d44aafbd
......@@ -16,8 +16,8 @@
.title {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-size: 1.5rem;
font-weight: 500;
font-size: 1.8rem;
font-weight: 600;
letter-spacing: 0.02em;
color: #6366F1; /* 使用与图片中紫色渐变相近的颜色 */
transition: color 0.2s ease;
......@@ -64,12 +64,13 @@ header nav {
}
.menu-items a {
color: hsl(205deg, 25%, 23%);
color: #4B5563;
text-decoration: none;
padding: 0 15px;
font-size: 16px; /* 增大字体大小 */
font-weight: 500; /* 调整字体粗细 */
transition: color 0.2s ease;
font-size: 1.2rem;
font-weight: 500;
padding: 0.5rem 0;
position: relative;
transition: color 0.3s ease;
}
.menu-items a:hover {
......@@ -177,3 +178,257 @@ header nav {
display: flex;
align-items: center;
}
/* 导航栏基础样式 */
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
header nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0.8rem 1.5rem;
}
/* Logo和标题容器 */
.logo-title-container {
display: flex;
align-items: center;
gap: 0.8rem;
}
.logo {
width: 35px;
height: 35px;
transition: transform 0.3s ease;
}
.logo:hover {
transform: scale(1.05);
}
.title {
font-size: 1.8rem;
font-weight: 600;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.02em;
}
/* 导航菜单 */
.menu-items {
display: flex;
align-items: center;
margin-left: 3rem;
gap: 2rem;
}
.menu-items a {
color: #4B5563;
text-decoration: none;
font-size: 1.2rem;
font-weight: 500;
padding: 0.5rem 0;
position: relative;
transition: color 0.3s ease;
}
.menu-items a:hover {
color: #6366F1;
}
.menu-items a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
transition: width 0.3s ease;
}
.menu-items a:hover::after {
width: 100%;
}
.menu-items a.active {
color: #6366F1;
}
.menu-items a.active::after {
width: 100%;
}
/* 右侧容器 */
.right-container {
margin-left: auto;
display: flex;
align-items: center;
gap: 1.5rem;
}
/* 用户头像和下拉菜单 */
.avatar-container {
position: relative;
}
.avatar {
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.avatar:hover {
border-color: #6366F1;
transform: scale(1.05);
}
.dropdown-menu {
position: absolute;
top: 120%;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 0.5rem;
min-width: 120px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0;
transform: translateY(-10px);
transition: all 0.3s ease;
pointer-events: none;
}
.dropdown-menu.active {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.dropdown-menu button {
width: 100%;
padding: 0.6rem 1rem;
background: none;
border: none;
color: #4B5563;
font-size: 0.9rem;
text-align: left;
cursor: pointer;
border-radius: 4px;
transition: all 0.2s ease;
}
.dropdown-menu button:hover {
background: rgba(99, 102, 241, 0.1);
color: #6366F1;
}
/* 响应式设计 */
@media (max-width: 768px) {
.menu-items {
display: none;
}
.right-container {
gap: 1rem;
}
}
/* 登录按钮样式 */
.auth-container .login-button {
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
color: white;
padding: 8px 20px;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
border: none;
display: inline-flex;
align-items: center;
gap: 8px;
}
.auth-container .login-button:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
}
/* 头像和下拉菜单样式优化 */
.avatar-container {
position: relative;
cursor: pointer;
}
.avatar {
width: 35px;
height: 35px;
border-radius: 50%;
border: 2px solid transparent;
transition: all 0.3s ease;
}
.avatar:hover {
border-color: #6366F1;
transform: scale(1.05);
}
.dropdown-menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 8px 0;
min-width: 150px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.dropdown-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu button {
width: 100%;
padding: 8px 16px;
background: none;
border: none;
color: #4B5563;
font-size: 0.95rem;
text-align: left;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 8px;
}
.dropdown-menu button:hover {
background: rgba(99, 102, 241, 0.1);
color: #6366F1;
}
src/styles/Login.css 0 → 100644
View file @ d44aafbd
.login-container {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f8faff 0%, #f3f6ff 100%);
padding: 1rem;
margin-top: -44px;
}
.login-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 2rem 3rem;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 400px;
width: 100%;
text-align: center;
animation: fadeIn 0.5s ease-out;
}
.login-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: 0.02em;
}
.login-subtitle {
color: #6B7280;
margin-bottom: 1.5rem;
font-size: 0.95rem;
line-height: 1.5;
}
.login-options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.google-login-wrapper {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.google-login-button {
width: 100% !important;
height: auto !important;
padding: 0.75rem !important;
border-radius: 10px !important;
background: white !important;
border: 1px solid rgba(99, 102, 241, 0.2) !important;
transition: all 0.3s ease !important;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}
.google-login-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(99, 102, 241, 0.15) !important;
border-color: rgba(99, 102, 241, 0.4) !important;
}
.login-divider {
margin: 2rem 0;
display: flex;
align-items: center;
text-align: center;
color: #9CA3AF;
font-size: 0.9rem;
}
.login-divider::before,
.login-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #E5E7EB;
}
.login-divider span {
margin: 0 1rem;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 480px) {
.login-card {
padding: 1.5rem;
}
.login-title {
font-size: 1.5rem;
}
}
\ No newline at end of file
src/styles/main.css
View file @ d44aafbd
......@@ -26,7 +26,7 @@ body {
.content-wrapper {
flex: 1;
padding-top: 10px;
padding-top: 44px;
padding-bottom: 20px;
}
......@@ -56,41 +56,48 @@ main {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 2rem 1rem 1rem;
padding: 1rem 1rem 1rem;
}
.tools-section h2 {
text-align: center;
font-size: 3rem;
margin-top: 0; /* 重置margin-top */
margin-bottom: 4rem;
color: var(--primary-color);
font-size: 2.5rem;
margin-bottom: 2rem;
background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: 700;
letter-spacing: -0.02em;
}
.tools-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 3rem;
gap: 2rem;
padding: 0 2rem;
max-width: 1400px;
margin: 0 auto;
}
.tool-card {
background-color: var(--card-background);
border-radius: 20px;
padding: 1rem; /* 减少内边距以增加内容紧凑度 */
box-shadow: var(--card-shadow);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 8px 32px rgba(99, 102, 241, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
display: flex;
align-items: center; /* 垂直居中对齐 */
align-items: center;
text-decoration: none;
height: 100%;
}
.tool-card:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
text-decoration: none;
box-shadow: 0 12px 24px rgba(99, 102, 241, 0.15);
border-color: rgba(99, 102, 241, 0.3);
}
.tool-icon {
......@@ -106,20 +113,22 @@ main {
}
.tool-title {
font-size: 1.6rem;
font-size: 1.4rem;
font-weight: 600;
margin: 0;
margin-bottom: 0.25rem; /* 减少标题与描述之间的间距 */
color: var(--primary-color);
text-decoration: none;
margin-bottom: 0.5rem;
background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
letter-spacing: -0.01em;
}
.tool-description {
font-size: 1.1rem;
color: #86868b;
line-height: 1.4; /* 适当调整行高 */
margin: 0; /* 移除描述的默认 margin */
text-decoration: none;
font-size: 1rem;
color: #4B5563;
line-height: 1.5;
margin: 0;
font-weight: 400;
}
footer {
......@@ -229,10 +238,21 @@ footer {
}
.category-group {
margin-bottom: 1rem; /* 添加margin-bottom以增加分组间距 */
margin-top: 6rem;
margin-bottom: 1rem;
margin-top: 2rem;
}
.category-group:first-child {
margin-top: 0; /* 确保第一个分组没有额外的顶部间距 */
margin-top: 0;
}
/* 添加网格背景效果 */
.tools-section {
position: relative;
padding: 1rem 0;
background:
linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)),
linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px);
background-size: 100% 100%, 20px 20px, 20px 20px;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment