Merge pull request #158 from ut-code/design

Design
ut-code · Dec 11, 2023 · c25c4dc · c25c4dc
2 parents 6285f25 + da1cd9f
commit c25c4dc
Show file tree

Hide file tree

Showing 14 changed files with 202 additions and 62 deletions.
diff --git a/learn/public/logo_kanji.svg b/learn/public/logo_kanji.svg
diff --git a/learn/public/logo_keyboard.svg b/learn/public/logo_keyboard.svg
diff --git a/learn/public/logo_read.svg b/learn/public/logo_read.svg
diff --git a/learn/public/logo_touch.svg b/learn/public/logo_touch.svg
diff --git a/learn/src/components/TutorialDialog.tsx b/learn/src/components/TutorialDialog.tsx
@@ -41,7 +41,12 @@ export default function TutorialDialog({
       }}
     >
       <DialogTitle m={0} p={2}>
-        <Typography variant="h4" component="div" color="inherit">
+        <Typography
+          variant="h4"
+          component="div"
+          color="inherit"
+          sx={{ fontWeight: "bold" }}
+        >
           {tutorialDialogSteps[selectedStep].title}
         </Typography>
         <IconButton

diff --git a/learn/src/pages/_app.tsx b/learn/src/pages/_app.tsx
@@ -15,7 +15,14 @@ import NextLink from "next/link";
 
 function H1(props: any): JSX.Element {
   return (
-    <Typography variant="h3" component="h1" color="inherit" my={2} {...props} />
+    <Typography
+      variant="h3"
+      component="h1"
+      color="inherit"
+      my={2}
+      sx={{ fontWeight: "bold" }}
+      {...props}
+    />
   );
 }
 
@@ -26,20 +33,35 @@ function H2(props: any): JSX.Element {
       component="h2"
       color="inherit"
       my={1.5}
+      sx={{ fontWeight: "bold" }}
       {...props}
     />
   );
 }
 
 function H3(props: any): JSX.Element {
   return (
-    <Typography variant="h5" component="h3" color="inherit" my={1} {...props} />
+    <Typography
+      variant="h5"
+      component="h3"
+      color="inherit"
+      my={1}
+      sx={{ fontWeight: "bold" }}
+      {...props}
+    />
   );
 }
 
 function H4(props: any): JSX.Element {
   return (
-    <Typography variant="h6" component="h4" color="inherit" my={1} {...props} />
+    <Typography
+      variant="h6"
+      component="h4"
+      color="inherit"
+      my={1}
+      sx={{ fontWeight: "bold" }}
+      {...props}
+    />
   );
 }
 
@@ -50,6 +72,7 @@ function H5(props: any): JSX.Element {
       component="h5"
       color="inherit"
       my={1}
+      sx={{ fontWeight: "bold" }}
       {...props}
     />
   );
@@ -62,6 +85,7 @@ function H6(props: any): JSX.Element {
       component="h6"
       color="inherit"
       my={1}
+      sx={{ fontWeight: "bold" }}
       {...props}
     />
   );

diff --git a/learn/src/pages/index.tsx b/learn/src/pages/index.tsx
@@ -9,6 +9,7 @@ import {
   Box,
   Typography,
   Grid,
+  Container,
 } from "@mui/material";
 
 function NavigationCard({
@@ -24,17 +25,30 @@ function NavigationCard({
 }): JSX.Element {
   const router = useRouter();
   return (
-    <Card sx={{ maxWidth: 400 }}>
+    <Card sx={{ height: "100%" }}>
       <CardActionArea
         onClick={async () => {
           await router.push(linkUrl);
         }}
+        sx={{ height: "100%" }}
       >
-        <CardMedia component="img" image={imgPath} />
-        <CardContent>
-          <Typography variant="h5" component="div">
-            {title}
-          </Typography>
+        <CardContent sx={{ padding: "50px" }}>
+          <Box
+            sx={{ display: "flex", marginBottom: "40px", alignItems: "center" }}
+          >
+            <Typography
+              variant="h5"
+              component="div"
+              sx={{ fontWeight: "bold" }}
+            >
+              {title}
+            </Typography>
+            <CardMedia
+              component="img"
+              image={imgPath}
+              sx={{ width: 100, marginLeft: "auto" }}
+            />
+          </Box>
           <Typography variant="body1" component="div" p={1}>
             {description}
           </Typography>
@@ -47,48 +61,50 @@ function NavigationCard({
 export default function Home(): JSX.Element {
   return (
     <Layout>
-      <Box m={2}>
-        <Typography variant="h5" component="h1">
-          ようこそ
-        </Typography>
-        <Typography variant="body1" component="p">
-          ここでは、チュートリアル形式で点字について学ぶことができます。
-        </Typography>
-      </Box>
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={6}>
-          <NavigationCard
-            title="点字キーボード"
-            linkUrl="/keyboard"
-            imgPath={url("/logo.svg")}
-            description="パソコンのキーボードを用いて ⠿ のような 6 点式点字を入力する練習ツールです。"
-          />
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <NavigationCard
-            title="Web 点字器"
-            linkUrl="/touch"
-            imgPath={url("/logo.svg")}
-            description="点字から墨字（ひらがな表記）への翻訳をクイズを通して学びます。"
-          />
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <NavigationCard
-            title="漢点字学習コーナー"
-            linkUrl="/kanji"
-            imgPath={url("/logo.svg")}
-            description="点字の漢字バージョンを「Web点字器」の形式で学びます。"
-          />
-        </Grid>
-        <Grid item xs={12} sm={6}>
-          <NavigationCard
-            title="点字読みコーナー"
-            linkUrl="/read"
-            imgPath={url("/logo.svg")}
-            description="点字の読み方をクイズで学びます。"
-          />
+      <Container sx={{ width: "75%", maxWidth: "1000px" }}>
+        <Box m={2}>
+          <Typography variant="h5" component="h1">
+            ようこそ
+          </Typography>
+          <Typography variant="body1" component="p">
+            ここでは、チュートリアル形式で点字について学ぶことができます。
+          </Typography>
+        </Box>
+        <Grid container spacing={10}>
+          <Grid item xs={12} lg={6}>
+            <NavigationCard
+              title="Web点字器"
+              linkUrl="/touch"
+              imgPath={url("/logo_touch.svg")}
+              description="平仮名から点字への翻訳を、画面上で点を打つ練習を通して学べます。"
+            />
+          </Grid>
+          <Grid item xs={12} lg={6}>
+            <NavigationCard
+              title="点字を読む"
+              linkUrl="/read"
+              imgPath={url("/logo_read.svg")}
+              description="点字から平仮名への翻訳を練習しながら学べます。"
+            />
+          </Grid>
+          <Grid item xs={12} lg={6}>
+            <NavigationCard
+              title="点字キーボード"
+              linkUrl="/keyboard"
+              imgPath={url("/logo_keyboard.svg")}
+              description="点字の訳や文法を学びながら、パソコンのキーボードで6点式点字を入力する練習ができます。"
+            />
+          </Grid>
+          <Grid item xs={12} lg={6}>
+            <NavigationCard
+              title="漢点字を書く"
+              linkUrl="/kanji"
+              imgPath={url("/logo_kanji.svg")}
+              description="漢字から漢点字への翻訳を実際に画面上で点を打つ練習を通して学べます。"
+            />
+          </Grid>
         </Grid>
-      </Grid>
+      </Container>
     </Layout>
   );
 }
diff --git a/learn/src/pages/keyboard/tutorial/tutorial1/dialog/1_braille_6dots.mdx b/learn/src/pages/keyboard/tutorial/tutorial1/dialog/1_braille_6dots.mdx
@@ -1,23 +1,23 @@
 import PracticeField from "../../../../../components/PracticeField";
 import url from "@/utils/config";
 
-## 参考文献
+### 参考文献
 
 このチュートリアルは自立活動指導書 別冊１ 点字研修資料 (広島県立広島中央特別支援学校) (https://www.hiroshima-sb.hiroshima-c.ed.jp/kenkyu_kensyu/jiritukatudou_sidousyo/additional%20volume1/2-1.pdf 2023 年 3 月 27 日閲覧)を元に作成されました。
 
-## 6点字入力について
+### 6点字入力について
 
 パソコンのキーボードを用いて ⠿ のような 6 点式点字を入力する方法を説明します。
 6 点式点字の左列の点は上から F,D,S のキーに対応します。例えば ⠁ は F キーの押下で、⠆ は D キーと S キーの押下で入力できます。
 6 点式点字の右列の点は上から J,K,L のキーに対応します。例えば ⠘ は J キーと K キーの押下で、⠪ は D キー、J キーと L キーの押下で入力できます。
 
-## <img src={url("/braille_key.svg")} />
+<img src={url("/braille_key.svg")} />
 
 <div>
   <img src={url("/braille_example_1.svg")} />
   <img src={url("/braille_example_2.svg")} />
 </div>
-## 練習
+### 練習
 
 <PracticeField question="Q1 ⠁を入力してください。" answer="⠁" />
 <PracticeField question="Q2 ⠃を入力してください。" answer="⠃" />

diff --git a/learn/src/pages/keyboard/tutorial/tutorial1/dialog/2_write_hiragana.mdx b/learn/src/pages/keyboard/tutorial/tutorial1/dialog/2_write_hiragana.mdx
@@ -1,6 +1,6 @@
 import PracticeField from "../../../../../components/PracticeField";
 
-## ひらがなの入力について
+### ひらがなの入力について
 
 基本的に次の表に従ってひらがなを入力していくことができます。
 

diff --git a/learn/src/pages/keyboard/tutorial/tutorial1/dialog/3_kanadukai.mdx b/learn/src/pages/keyboard/tutorial/tutorial1/dialog/3_kanadukai.mdx
@@ -1,6 +1,6 @@
 import PracticeField from "../../../../../components/PracticeField";
 
-## ひらがなの入力の注意点
+### ひらがなの入力の注意点
 
 - 助詞
   - 助詞の「は」「へ」は、発音するとおりに「ワ」「エ」と書く。 (例)兄はやさしい。 → アニワ ヤサシイ。

diff --git a/learn/src/pages/keyboard/tutorial/tutorial1/dialog/3_number.mdx b/learn/src/pages/keyboard/tutorial/tutorial1/dialog/3_number.mdx
@@ -1,6 +1,6 @@
 import PracticeField from "../../../../../components/PracticeField";
 
-## 数字について
+### 数字について
 
 数字は以下の表に従って表記する。
 |1|2|3|4|5|6|7|8|9|0|

diff --git a/learn/src/pages/keyboard/tutorial/tutorial1/dialog/3_youon.mdx b/learn/src/pages/keyboard/tutorial/tutorial1/dialog/3_youon.mdx
@@ -1,4 +1,4 @@
-## 拗音(「ゃ」「ゅ」「ょ」)の入力について
+### 拗音(「ゃ」「ゅ」「ょ」)の入力について
 
 拗音は次の表に従って入力していくことができます。
 
@@ -15,7 +15,7 @@
 | 「みゃ」⠈⠵ |     | 「みゅ」⠈⠽ |     | 「みょ」⠈⠾ |
 | 「りゃ」⠈⠑ |     | 「りゅ」⠈⠙ |     | 「りょ」⠈⠚ |
 
-## 拗濁音と拗半濁音(「ぎゃ」「ぎゅ」「ぎょ」など)の入力について
+### 拗濁音と拗半濁音(「ぎゃ」「ぎゅ」「ぎょ」など)の入力について
 
 拗濁音と拗半濁音は次の表に従って入力していくことができます。
 

diff --git a/learn/src/pages/keyboard/tutorial/tutorial1/dialog/4_alphabet.mdx b/learn/src/pages/keyboard/tutorial/tutorial1/dialog/4_alphabet.mdx
@@ -1,6 +1,6 @@
 import PracticeField from "../../../../../components/PracticeField";
 
-## アルファベットや外国語の入力について
+### アルファベットや外国語の入力について
 
 アルファベットは、外字符 ⠰ (KL の点) を前置したあと、以下の表に従って表記する。