优化了一些细节

messages/en-US.json

@@ -66,11 +66,11 @@
       "description": "Play videos sentence by sentence based on SRT subtitle files to mimic native speaker pronunciation"
     },
     "alphabet": {
-      "name": "Memorize Alphabet",
+      "name": "Alphabet",
       "description": "Start learning a new language from the alphabet"
     },
     "memorize": {
-      "name": "Memorize Words",
+      "name": "Memorize",
       "description": "Language A to Language B, Language B to Language A, supports dictation"
     },
     "moreFeatures": {

messages/zh-CN.json

@@ -62,15 +62,15 @@
       "description": "识别并朗读文本，支持循环朗读、朗读速度调节"
     },
     "srtPlayer": {
-      "name": "逐句视频播放器",
+      "name": "逐句放视频",
       "description": "基于SRT字幕文件，逐句播放视频以模仿母语者的发音"
     },
     "alphabet": {
-      "name": "背字母",
+      "name": "字母表",
       "description": "从字母表开始新语言的学习"
     },
     "memorize": {
-      "name": "背单词",
+      "name": "记忆",
       "description": "语言A到语言B，语言B到语言A，支持听写"
     },
     "moreFeatures": {

src/app/(features)/memorize/Memorize.tsx

@@ -45,13 +45,10 @@ const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
   };
 
   return (
-    <Center>
+    <>
-      <Container className="p-6 flex flex-col gap-8 h-96 justify-center items-center">
       {(getTextPairs().length > 0 && (
         <>
-            <div
+          <div className="text-center">
-              className={`h-36 flex flex-col gap-2 justify-start items-center ${myFont.className} text-3xl`}
-            >
             <div
               className="text-sm text-gray-500"
               onClick={() => {
@@ -69,41 +66,49 @@ const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
               {index + 1}
               {"/" + getTextPairs().length}
             </div>
-              {dictation ? (
+            <div className="h-[40dvh] px-16">
-                show === "question" ? (
+              {(() => {
-                  ""
+                const createText = (text: string) => {
-                ) : (
+                  return (
+                    <div className="text-gray-900 text-xl border-y border-y-gray-200 p-4 md:text-3xl h-[20dvh] overflow-y-auto">
+                      {text}
+                    </div>
+                  );
+                };
+
+                const [text1, text2] = reverse
+                  ? [getTextPairs()[index].text2, getTextPairs()[index].text1]
+                  : [getTextPairs()[index].text1, getTextPairs()[index].text2];
+
+                if (dictation) {
+                  // dictation
+                  if (show === "question") {
+                    return createText("");
+                  } else {
+                    return (
                       <>
-                    <div>
+                        {createText(text1)}
-                      {reverse
+                        {createText(text2)}
-                        ? getTextPairs()[index].text2
-                        : getTextPairs()[index].text1}
-                    </div>
-                    <div>
-                      {reverse
-                        ? getTextPairs()[index].text1
-                        : getTextPairs()[index].text2}
-                    </div>
                       </>
-                )
+                    );
-              ) : (
+                  }
+                } else {
+                  // non-dictation
+                  if (show === "question") {
+                    return createText(text1);
+                  } else {
+                    return (
                       <>
-                  <div>
+                        {createText(text1)}
-                    {reverse
+                        {createText(text2)}
-                      ? getTextPairs()[index].text2
-                      : getTextPairs()[index].text1}
-                  </div>
-                  <div>
-                    {show === "answer"
-                      ? reverse
-                        ? getTextPairs()[index].text1
-                        : getTextPairs()[index].text2
-                      : ""}
-                  </div>
                       </>
-              )}
+                    );
+                  }
+                }
+              })()}
             </div>
-            <div className="flex flex-row gap-2 items-center justify-center">
+          </div>
+          <div className="flex flex-row gap-2 items-center justify-center flex-wrap">
             <LightButton
               className="w-20"
               onClick={async () => {
@@ -167,8 +172,7 @@ const Memorize: React.FC<MemorizeProps> = ({ textPairs }) => {
           </div>
         </>
       )) || <p>{t("noTextPairs")}</p>}
-      </Container>
+    </>
-    </Center>
   );
 };
 

src/app/(features)/translator/page.tsx

@@ -325,8 +325,10 @@ export default function TranslatorPage() {
           <h1 className="text-2xl font-light">{t("history")}</h1>
           <div className="border border-gray-200 rounded-2xl m-4">
             {history.toReversed().map((item, index) => (
-              <div key={index}>
+              <div
-                <div className="border-b border-gray-200 p-2 group hover:bg-gray-50 flex gap-2 flex-row justify-between items-start">
+                key={index}
+                className="border-b border-gray-200 p-2 group hover:bg-gray-50 flex gap-2 flex-row justify-between items-start"
+              >
                 <div className="flex-1 flex flex-col">
                   <p className="text-sm font-light">{item.text1}</p>
                   <p className="text-sm font-light">{item.text2}</p>
@@ -355,7 +357,6 @@ export default function TranslatorPage() {
                   </button>
                 </div>
               </div>
-              </div>
             ))}
           </div>
           {showAddToFolder && (

src/app/folders/[folder_id]/TextPairCard.tsx

@@ -51,8 +51,16 @@ export default function TextPairCard({
           </div>
         </div>
         <div className="text-gray-900 grid grid-cols-2 gap-4 w-3/4">
-          <div>{textPair.text1}</div>
+          <div>
-          <div>{textPair.text2}</div>
+            {textPair.text1.length > 30
+              ? textPair.text1.substring(0, 30) + "..."
+              : textPair.text1}
+          </div>
+          <div>
+            {textPair.text2.length > 30
+              ? textPair.text2.substring(0, 30) + "..."
+              : textPair.text2}
+          </div>
         </div>
       </div>
       <UpdateTextPairModal

src/app/page.tsx

@@ -29,8 +29,8 @@ export default function HomePage() {
         className={`h-32 md:h-64 flex md:justify-center items-center`}
       >
         <div className="text-white m-8">
-          <h1 className="text-4xl">{name}</h1>
+          <h1 className="md:text-4xl text-3xl">{name}</h1>
-          <p className="text-xl">{description}</p>
+          <p className="md:text-xl">{description}</p>
         </div>
       </Link>
     );
@@ -87,8 +87,7 @@ export default function HomePage() {
   }
   function Explore() {
     return (
-      <div className="bg-[#bbbbbb] w-full flex justify-center items-center flex-col h-52">
+      <div className="bg-[#bbbbbb] w-full flex justify-center items-center flex-col h-32">
-        <span className="text-[100px] text-white">{t("explore")}</span>
         <div className="w-0 h-0 border-l-40 border-r-40 border-t-30 border-l-transparent border-r-transparent border-t-white"></div>
       </div>
     );