chore: update style

src/components/Footer.jsx

@@ -3,7 +3,7 @@ import React from 'react';
 function Footer() {
   return (
     <footer>
-      <p>&copy; 2024 AI工具箱. 保留所有权利。</p>
+      <p>&copy; 2024 AI 工具箱. 保留所有权利。</p>
     </footer>
   );
 }

src/components/Header.jsx

@@ -13,8 +13,8 @@ function Header() {
     <header>
       <nav>
         <div className="logo-title-container">
-          <img src={logo} alt="Logo" className="logo" />
           <Link to="/" className="title no-underline">
+            <img src={logo} alt="Logo" className="logo" />
             {t('title')}
           </Link>
         </div>

src/components/TextToImage.jsx

 import React, { useState, useRef, useEffect } from 'react';
 import styled from 'styled-components';
 
+const Wrapper = styled.div`
+  width: 100%;
+  max-width: 1000px;
+  margin: 10px auto;
+`;
+
+const Title = styled.h1`
+  font-size: 20px;
+  color: #333;
+  margin-bottom: 10px;
+  text-align: center;
+`;
+
 const Container = styled.div`
   display: flex;
+  flex-direction: column;
   width: 100%;
-  max-width: 1200px;
-  height: 80vh;
   background-color: white;
-  border-radius: 15px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
   overflow: hidden;
-  margin: 20px auto;
+  margin: 10px auto;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+    height: 70vh;
+  }
 `;
 
 const InputText = styled.textarea`
-  width: 50%;
-  height: 100%;
-  font-size: 16px;
-  padding: 20px;
+  width: 100%;
+  height: 200px;
+  font-size: 14px;
+  padding: 10px;
   border: none;
-  border-right: 1px solid #e0e0e0;
+  border-bottom: 1px solid #e0e0e0;
   box-sizing: border-box;
   outline: none;
   resize: none;
-`;
 
-const PreviewContainer = styled.div`
+  @media (min-width: 768px) {
     width: 50%;
     height: 100%;
+    border-bottom: none;
+    border-right: 1px solid #e0e0e0;
+  }
+`;
+
+const PreviewContainer = styled.div`
+  width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 20px;
+  padding: 10px;
   box-sizing: border-box;
+
+  @media (min-width: 768px) {
+    width: 50%;
+    height: 100%;
+  }
 `;
 
 const Preview = styled.div`
@@ -43,6 +71,12 @@ const Preview = styled.div`
   overflow-y: auto;
   flex-grow: 1;
   padding-right: 10px;
+  font-size: 14px;
+  max-height: 200px;
+
+  @media (min-width: 768px) {
+    max-height: none;
+  }
 
   h1, h2, h3 {
     color: #2c3e50;
@@ -50,7 +84,7 @@ const Preview = styled.div`
   }
 
   &::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
   }
 
   &::-webkit-scrollbar-track {
@@ -59,7 +93,7 @@ const Preview = styled.div`
 
   &::-webkit-scrollbar-thumb {
     background: #888;
-    border-radius: 4px;
+    border-radius: 3px;
   }
 
   &::-webkit-scrollbar-thumb:hover {
@@ -68,15 +102,16 @@ const Preview = styled.div`
 `;
 
 const DownloadButton = styled.button`
-  padding: 12px 24px;
+  padding: 8px 16px;
   background-color: #3498db;
   color: white;
   border: none;
-  border-radius: 5px;
+  border-radius: 4px;
   cursor: pointer;
-  font-size: 16px;
+  font-size: 14px;
   transition: background-color 0.3s ease;
   align-self: flex-end;
+  margin-top: 10px;
 
   &:hover {
     background-color: #2980b9;
@@ -129,6 +164,8 @@ function TextToImage() {
   };
 
   return (
+    <Wrapper>
+      <Title>文字卡片生成器</Title>
       <Container>
         <InputText
           placeholder="输入文本（可包含标题，如# 标题1）"
@@ -143,6 +180,7 @@ function TextToImage() {
           <DownloadButton onClick={handleDownload}>导出为图片</DownloadButton>
         </PreviewContainer>
       </Container>
+    </Wrapper>
   );
 }
 

src/js/i18n.js

@@ -3,8 +3,7 @@ import { useState, useEffect } from 'react';
 const i18n = {
   zh: {
     title: 'AI 工具箱',
-    slogan: '您的智能助手集合，一站式解决各种AI需求。',
-    searchPlaceholder: '搜索工具...',
+    slogan: '您的智能助手集合，一站式解决各种 AI 需求。',
     tools: {
       text2image: {
         title: '文字卡片',
@@ -21,7 +20,6 @@ const i18n = {
   en: {
     title: 'AI Toolbox',
     slogan: 'Your collection of intelligent assistants, solving various AI needs in one place.',
-    searchPlaceholder: 'Search tools...',
     tools: {
       text2image: {
         title: 'Text to Image Card',

src/styles/Header.css

 .no-underline {
     text-decoration: none;
-  color: inherit; /* 这会保持链接颜色与周围文本相同 */
-}
+    color: inherit;
+  }
   
-.no-underline:hover {
-  text-decoration: none; /* 确保悬停时也不会出现下划线 */
-}
+  .no-underline:hover {
+    text-decoration: none;
+  }
   
-.logo {
-    width: 40px; /* 调整为适合你的 logo 大小 */
-    height: auto;
-    margin-right: 10px;
-}
+  .logo {
+    width: 40px;
+    height: 40px;
+    margin-right: 15px;
+    object-fit: contain;
+  }
   
-.title {
-  font-size: 1.5rem; /* 调整为适合你的设计 */
-  white-space: nowrap;
-}
+  .title {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    font-size: 1.5rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    color: #6366F1; /* 使用与图片中紫色渐变相近的颜色 */
+    transition: color 0.2s ease;
+  }
   
-header nav {
+  header nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
-}
+  }
+  
+  .logo-title-container {
+    display: flex;
+    align-items: center;
+    animation: fadeIn 0.5s ease-in-out;
+  }
   
-.logo-title-container {
+  .logo-title-container .title {
     display: flex;
     align-items: center;
-}
+  }
\ No newline at end of file
+  
+  .logo-title-container:hover .title {
+    color: #4F46E5; /* 悬停时稍微深一点的紫色 */
+  }
+  
+  /* 添加一个简单的动画效果 */
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+  
+  /* 为移动设备优化 */
+  @media (max-width: 768px) {
+    .title {
+      font-size: 1.3rem;
+    }
+  }
\ No newline at end of file