chore: 首页样式优化

index.html

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

+.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

@@ -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