From 23f4e86aa3599723622eb43866064af329fb21a9 Mon Sep 17 00:00:00 2001
From: Zylan <zihan.jian@outlook.com>
Date: Sat, 26 Apr 2025 13:13:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E9=A1=B5=E9=9D=A2=E6=A0=87?=
 =?UTF-8?q?=E9=A2=98=E4=B8=BA=E2=80=9C=E4=B8=83=E5=8D=A1=E7=93=A6=E6=8B=BC?=
 =?UTF-8?q?=E8=B1=86=E5=BA=95=E7=A8=BF=E7=94=9F=E6=88=90=E5=99=A8=E2=80=9D?=
 =?UTF-8?q?=EF=BC=8C=E6=B7=BB=E5=8A=A0=E8=87=AA=E5=AE=9A=E4=B9=89=E6=B5=AE?=
 =?UTF-8?q?=E5=8A=A8=E5=8A=A8=E7=94=BB=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E9=A1=B5=E9=9D=A2=E8=A3=85=E9=A5=B0=E5=85=83=E7=B4=A0?=
 =?UTF-8?q?=EF=BC=8C=E6=8F=90=E5=8D=87=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E5=92=8C=E7=94=A8=E6=88=B7=E4=BD=93=E9=AA=8C=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/layout.tsx |  2 +-
 src/app/page.tsx   | 76 +++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 70 insertions(+), 8 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 112aebd..0c3078d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -13,7 +13,7 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "拼豆底稿生成器 | Perler Beads Generator",
+  title: "七卡瓦拼豆底稿生成器 | Perler Beads Generator",
   description: "上传图片，调整精细度，一键生成像素画图纸，简单实用的像素画生成工具",
 };
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8125d76..076cb0c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -18,6 +18,18 @@ import {
 
 import beadPaletteData from './beadPaletteData.json';
 
+// 添加自定义动画样式
+const floatAnimation = `
+  @keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-5px); }
+    100% { transform: translateY(0px); }
+  }
+  .animate-float {
+    animation: float 3s ease-in-out infinite;
+  }
+`;
+
 // Helper function to get contrasting text color (simple version) - 保留原有实现，因为未在utils中导出
 function getContrastColor(hex: string): string {
     const rgb = hexToRgb(hex);
@@ -1062,6 +1074,9 @@ export default function Home() {
 
   return (
     <>
+    {/* 添加自定义动画样式 */}
+    <style dangerouslySetInnerHTML={{ __html: floatAnimation }} />
+    
     {/* ++ 修改：添加 onLoad 回调函数 ++ */}
     <Script
       async
@@ -1107,9 +1122,49 @@ export default function Home() {
     />
 
     <div className="min-h-screen p-4 sm:p-6 flex flex-col items-center bg-gradient-to-b from-gray-50 to-white font-[family-name:var(--font-geist-sans)]">
-      <header className="w-full max-w-4xl text-center mt-6 mb-5 sm:mt-8 sm:mb-6">
-        <h1 className="text-2xl sm:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-gray-700 via-gray-900 to-black">拼豆底稿生成器</h1>
-        <p className="mt-2 text-sm sm:text-base text-gray-600">上传图片，选择色板，生成带色号的图纸和统计</p>
+      <header className="w-full max-w-4xl text-center mt-6 mb-8 sm:mt-8 sm:mb-10 relative">
+        {/* 装饰背景圆形 */}
+        <div className="absolute -top-10 -left-24 w-48 h-48 bg-blue-100 rounded-full opacity-30 blur-3xl"></div>
+        <div className="absolute -bottom-10 -right-24 w-48 h-48 bg-pink-100 rounded-full opacity-30 blur-3xl"></div>
+        
+        {/* 装饰点阵图案 - 表示拼豆效果 */}
+        <div className="absolute top-0 right-0 grid grid-cols-5 gap-1 opacity-20">
+          {[...Array(25)].map((_, i) => (
+            <div key={i} className="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
+          ))}
+        </div>
+        <div className="absolute bottom-0 left-0 grid grid-cols-5 gap-1 opacity-20">
+          {[...Array(25)].map((_, i) => (
+            <div key={i} className="w-1.5 h-1.5 rounded-full bg-gray-400"></div>
+          ))}
+        </div>
+        
+        {/* 标题内容 */}
+        <div className="relative z-10 py-6">
+          {/* 拼豆图标 */}
+          <div className="flex justify-center mb-4 animate-float">
+            <div className="grid grid-cols-4 gap-1 p-2 bg-white rounded-xl shadow-lg border border-gray-100">
+              {['bg-red-400', 'bg-blue-400', 'bg-yellow-400', 'bg-green-400', 
+                'bg-purple-400', 'bg-pink-400', 'bg-orange-400', 'bg-teal-400',
+                'bg-indigo-400', 'bg-cyan-400', 'bg-lime-400', 'bg-amber-400',
+                'bg-rose-400', 'bg-sky-400', 'bg-emerald-400', 'bg-violet-400'].map((color, i) => (
+                <div 
+                  key={i} 
+                  className={`w-3 h-3 rounded-full ${color} transition-all duration-500 hover:scale-110 shadow-sm`}
+                  style={{animation: `float ${2 + (i % 3)}s ease-in-out infinite ${i * 0.1}s`}}
+                ></div>
+              ))}
+            </div>
+          </div>
+          
+          <h1 className="text-2xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-500 to-pink-500 tracking-tight drop-shadow-sm">
+          七卡瓦 拼豆底稿生成器
+          </h1>
+          <div className="h-1 w-24 mx-auto my-3 bg-gradient-to-r from-blue-500 to-pink-500 rounded-full"></div>
+          <p className="mt-3 text-sm sm:text-base text-gray-600 max-w-lg mx-auto leading-relaxed">
+            上传图片，选择色板，生成带色号的图纸和统计
+          </p>
+        </div>
       </header>
 
       <main ref={mainRef} className="w-full max-w-4xl flex flex-col items-center space-y-5 sm:space-y-6 relative"> {/* 添加 relative 定位 */}
@@ -1395,17 +1450,24 @@ export default function Home() {
         </button>
         
         <p className="font-medium text-gray-600">
-          拼豆底稿生成器 &copy; {new Date().getFullYear()}
+          七卡瓦 拼豆底稿生成器 &copy; {new Date().getFullYear()}
         </p>
         
-        <p className="mt-2">
+        <div className="mt-2 flex items-center justify-center gap-4">
           <a href="https://github.com/Zippland/perler-beads.git" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-700 transition-colors duration-200 hover:underline flex items-center justify-center">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-1">
               <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
             </svg>
-            有用可以给github项目一个Star
+            Github
           </a>
-        </p>
+
+          <a href="https://www.xiaohongshu.com/user/profile/623e8b080000000010007721" target="_blank" rel="noopener noreferrer" className="text-rose-500 hover:text-rose-700 transition-colors duration-200 hover:underline flex items-center justify-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 1024 1024" fill="currentColor" className="mr-1">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m238.8 360.2l-57.7 93.3c-10.1 16.3-31.5 21.3-47.8 11.2l-112.4-69.5c-16.3-10.1-21.3-31.5-11.2-47.8l57.7-93.3c10.1-16.3 31.5-21.3 47.8-11.2l112.4 69.5c16.3 10.1 21.3 31.5 11.2 47.8zM448 496l-57.7 93.3c-10.1 16.3-31.5 21.3-47.8 11.2l-112.4-69.5c-16.3-10.1-21.3-31.5-11.2-47.8l57.7-93.3c10.1-16.3 31.5-21.3 47.8-11.2l112.4 69.5c16.3 10.1 21.3 31.5 11.2 47.8z m248.9 43.2l-57.7 93.3c-10.1 16.3-31.5 21.3-47.8 11.2l-112.4-69.5c-16.3-10.1-21.3-31.5-11.2-47.8l57.7-93.3c10.1-16.3 31.5-21.3 47.8-11.2l112.4 69.5c16.3 10.1 21.3 31.5 11.2 47.8z"/>
+            </svg>
+            小红书
+          </a>
+        </div>
       </footer>
 
       {/* 打赏弹窗 - 优化设计 */}