更新了主页面UI

2025-10-06 14:34:54 +08:00
parent bd6b1c3add
commit 135508954d
12 changed files with 132 additions and 28 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,9 @@
    "": {
      "name": "learn-languages",
      "version": "0.1.0",
+      "license": "GPL-3.0-only",
      "dependencies": {
+        "clsx": "^2.1.1",
        "edge-tts-universal": "^1.3.2",
        "next": "15.5.3",
        "react": "19.1.0",
@@ -6394,6 +6396,15 @@
        "node": ">=0.8"
      }
    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://mirrors.cloud.tencent.com/npm/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/color": {
      "version": "4.2.3",
      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "clsx": "^2.1.1",
    "edge-tts-universal": "^1.3.2",
    "next": "15.5.3",
    "react": "19.1.0",
--- a/public/changelog.txt
+++ b/public/changelog.txt
@@ -1,3 +1,4 @@
+2025.10.06 更新了主页面UI
 2025.10.05 新增IPA生成与文本朗读功能
 2025.09.25 优化了主界面UI
 2025.09.19 更新了单词板，单词不再会重叠。
--- a/public/fonts/SourceHanSansSC-Bold.otf
+++ b/public/fonts/SourceHanSansSC-Bold.otf
--- a/public/fonts/SourceHanSansSC-ExtraLight.otf
+++ b/public/fonts/SourceHanSansSC-ExtraLight.otf
--- a/public/fonts/SourceHanSansSC-Heavy.otf
+++ b/public/fonts/SourceHanSansSC-Heavy.otf
--- a/public/fonts/SourceHanSansSC-Light.otf
+++ b/public/fonts/SourceHanSansSC-Light.otf
--- a/public/fonts/SourceHanSansSC-Medium.otf
+++ b/public/fonts/SourceHanSansSC-Medium.otf
--- a/public/fonts/SourceHanSansSC-Normal.otf
+++ b/public/fonts/SourceHanSansSC-Normal.otf
--- a/public/fonts/SourceHanSansSC-Regular.otf
+++ b/public/fonts/SourceHanSansSC-Regular.otf
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import localFont from "next/font/local";

 const geistSans = Geist({
  variable: "--font-geist-sans",
@@ -12,9 +13,45 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });

+const sourceHanSansSC = localFont({
+  src: [
+    {
+      path: '../../public/fonts/SourceHanSansSC-ExtraLight.otf',
+      weight: '200',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Light.otf',
+      weight: '300',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Regular.otf',
+      weight: '400',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Medium.otf',
+      weight: '500',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Bold.otf',
+      weight: '700',
+      style: 'normal'
+    },
+    {
+      path: '../../public/fonts/SourceHanSansSC-Heavy.otf',
+      weight: '900',
+      style: 'normal'
+    }
+  ]
+});
+
 export const metadata: Metadata = {
  title: "Learn Languages",
  description: "A Website to Learn Languages",
+  viewport: 'width=device-width, initial-scale=1.0',
 };

 export default function RootLayout({
@@ -25,7 +62,7 @@ export default function RootLayout({
  return (
    <html lang="en">
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${sourceHanSansSC.className} antialiased`}
      >
        {children}
      </body>
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,41 +9,95 @@ function MyLink(
  )
 }

-function Navbar() {
+function TopArea() {
  return (
-    <div className="flex justify-between items-center w-screen h-[96px] bg-white px-8">
-      <Link href={'/'} className="text-xl flex">
-        <Image
-          src={'/favicon.ico'}
-          alt="logo"
-          width="32"
-          height="32"
-          className="rounded-4xl">
-        </Image>
-        <span>学语言</span>
-      </Link>
-      <div className="flex gap-8 text-xl">
-        <MyLink href="/about" label="关于"></MyLink>
-        <MyLink href="https://github.com/GoddoNebianU/learn-languages" label="源码"></MyLink>
+    <div className="bg-[#35786f] text-white">
+      <div className="flex justify-between items-center w-screen h-16 px-8">
+        <Link href={'/'} className="text-xl flex">
+          <Image
+            src={'/favicon.ico'}
+            alt="logo"
+            width="32"
+            height="32"
+            className="rounded-4xl">
+          </Image>
+          <span className="font-bold">学语言</span>
+        </Link>
+        <div className="flex gap-4 text-xl">
+          <MyLink href="/changelog.txt" label="关于"></MyLink>
+          <MyLink href="https://github.com/GoddoNebianU/learn-languages" label="源码"></MyLink>
+        </div>
      </div>
-      <div></div>
+      <div className="flex justify-center items-center h-[75vh]">
+        <div className="mb-16 mx-64">
+          <h1 className="text-6xl md:text-9xl mb-8">Learn Languages</h1>
+          <p className="text-2xl md:text-5xl">Here is a very useful website to help you learn almost every language in the world, including artificial languages.</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface LinkAreaProps {
+  href: string,
+  name: string,
+  description: string,
+  color: string
+}
+function LinkArea(
+  { href, name, description, color }: LinkAreaProps
+) {
+  return (
+    <Link href={href}
+      style={{ backgroundColor: color }}
+      className={`h-32 md:h-[20vw] flex justify-center items-center`}>
+      <div className="text-white m-8">
+        <h1 className="text-4xl">{name}</h1>
+        <p className="text-xl">{description}</p>
+      </div>
+    </Link>
+  );
+}
+
+function LinkGrid() {
+  return (
+    <div className="grid grid-cols-1 grid-rows-6 md:grid-cols-3">
+
+      <LinkArea
+        href="/ipa-reader"
+        name="IPA朗读器"
+        description="生成任何已知语言的国际音标（IPA），大声朗读"
+        color="#a56068"></LinkArea>
+      <LinkArea
+        href="/word-board"
+        name="词墙"
+        description="将单词固定到一片区域，高效便捷地记忆单词"
+        color="#e9b353"></LinkArea>
+      <LinkArea
+        href="/srt-player"
+        name="逐句视频播放器"
+        description="基于SRT字幕文件，逐句播放视频以模仿母语者的发音"
+        color="#3c988d"></LinkArea>
+      <LinkArea
+        href="#"
+        name="更多功能"
+        description="开发中，敬请期待"
+        color="#578aad"></LinkArea>
    </div>
  )
 }

 export default function Home() {
  return (<>
-    <Navbar></Navbar>
-    <div className="bg-gray-50 flex h-screen w-full items-center justify-center">
-      <div className="bg-white m-4 p-4 rounded-2xl shadow-2xl border-gray-400 border-2 flex-col flex items-center">
-        <span className="text-4xl font-bold">Learn Languages</span>
-        <div className="LinkList flex flex-wrap sm:flex-row">
-          <MyLink href="/srt-player" label="srt-player"></MyLink>
-          <MyLink href="/word-board" label="word-board"></MyLink>
-          <MyLink href="/ipa-reader" label="ipa-reader"></MyLink>
-          <MyLink href={'/changelog.txt'} label="changelog"></MyLink>
-        </div>
-      </div>
+    <TopArea></TopArea>
+    <div className="w-screen h-64 flex justify-center font-serif items-center flex-col">
+      <p className="text-3xl">Stay hungry, stay foolish.</p>
+      <cite className="text-[#e9b353] text-xl">—— Steve Jobs</cite>
    </div>
+    <div className="bg-[#bbbbbb] w-screen h-64 flex justify-center items-center flex-col">
+      <span className="text-[100px] text-white">探索网站</span>
+      <div className="w-0 h-0 border-l-[40px] border-r-[40px] border-t-[30px] border-l-transparent border-r-transparent border-t-white"></div>
+    </div>
+    <LinkGrid></LinkGrid>
  </>);
 }