feat: 開會後修改調整

app/components/CuringSubPage.tsx

@@ -9,8 +9,31 @@ import cp6 from "~/images/cp6.png";
 import cp7 from "~/images/cp7.png";
 import cp8 from "~/images/cp8.png";
 import cp9 from "~/images/cp9.png";
+
+import titleCuring1 from "~/images/curing-1.png";
+import titleCuring2 from "~/images/curing-2.png";
+import titleCuring3 from "~/images/curing-3.png";
+import titleCuring4 from "~/images/curing-4.png";
+import titleCuring5 from "~/images/curing-5.png";
+import titleCuring6 from "~/images/curing-6.png";
+import titleCuring7 from "~/images/curing-7.png";
+import titleCuring8 from "~/images/curing-8.png";
+import titleCuring9 from "~/images/curing-9.png";
+
 import { useTranslation } from "react-i18next";
 
+const titleImage = [
+  titleCuring1,
+  titleCuring2,
+  titleCuring3,
+  titleCuring4,
+  titleCuring5,
+  titleCuring6,
+  titleCuring7,
+  titleCuring8,
+  titleCuring9,
+];
+
 const image = {
   cp1,
   cp2,
@@ -21,6 +44,7 @@ const image = {
   cp8,
   cp9,
 };
+
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: stylesheet },
 ];
@@ -40,26 +64,27 @@ export type CuringDataType = {
   // price: string;
   // convenience: string;
   sideEffect: Array<string>;
-  image: keyof typeof image;
 };
 
 type CuringSubPageProps = {
+  index: number;
   data: CuringDataType;
 };
 
 const CuringSubPage = (props: CuringSubPageProps) => {
-  const { data } = props;
+  const { data, index } = props;
   let { t } = useTranslation("curing");
 
   return (
     <div className="cp-container">
       <div className="cp-left-block">
-        <div
-          className="cp-title"
-          style={{
-            backgroundImage: `url(${image[data.image]})`,
-          }}
-        >
+        <div className="cp-title">
+          <div
+            className="mx-auto h-[100px] w-[180px] bg-contain bg-center bg-no-repeat lg:h-full"
+            style={{
+              backgroundImage: `url(${titleImage[index]})`,
+            }}
+          />
           <div className="cp-title-text">
             <div className="cp-main-title">{data.title}</div>
             <div className="cp-main-titleS">{data.titleS}</div>

app/components/footer.tsx

@@ -1,4 +1,4 @@
-// import logo from "~/images/logo.png";
+import { useTranslation } from "react-i18next";
 import Links from "./links";
 
 type FooterProps = {
@@ -7,21 +7,17 @@ type FooterProps = {
 };
 
 export default function Footer({ lang, openLang }: FooterProps) {
+  let { t } = useTranslation("common");
   return (
     <div className="mt-10 bg-slate-100">
       <footer className="container mx-auto py-5 text-center text-[#9b8e8e]">
-        {/* <img
-          src={logo}
-          className="mx-auto block h-[auto] w-[120px] lg:mr-5 lg:inline-block"
-          alt="Home"
-        /> */}
         <ul className="my-5 inline-block [&>*]:mx-2 [&>*]:my-2 sm:[&>*]:block md:[&>*]:inline-block">
           <Links {...{ lang }} openLang={openLang} />
         </ul>
         <div className="flex-1 px-4">
-          本網站是由台大醫院雲林分院所贊助，網站作者群無財務衝突關係
+          {t("footer.declaration")}
           <br />
-          2023/08/01 © 版權所有、翻印必究。
+          {t("footer.copyright")}
         </div>
       </footer>
     </div>

app/components/modal.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Link } from "@remix-run/react";
 import { useEffect } from "react";
 import { setToday } from "~/utils";
@@ -9,6 +10,7 @@ type ModalProps = {
 };
 
 export default function Modal({ onClose, personLink, proLink }: ModalProps) {
+  const { t } = useTranslation("common");
   useEffect(() => {
     document.body.classList.add("overflow-hidden");
     setToday();
@@ -55,12 +57,10 @@ export default function Modal({ onClose, personLink, proLink }: ModalProps) {
                     className="text-base font-semibold leading-6 text-gray-900"
                     id="modal-title"
                   >
-                    只要幾秒，表達您對醫療環境的看法！
+                    {t("shareYourComments")}
                   </h3>
                   <div className="mt-2">
-                    <p className="text-sm text-gray-500">
-                      完成這個簡單的調查並與我們分享您對整個醫療環境的評論！
-                    </p>
+                    <p className="text-sm text-gray-500">{t("thankText")}</p>
                   </div>
                 </div>
               </div>
@@ -70,13 +70,13 @@ export default function Modal({ onClose, personLink, proLink }: ModalProps) {
                 to={personLink}
                 className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#7a6f6f]"
               >
-                個人表單
+                {t("personalForm")}
               </Link>
               <Link
                 to={proLink}
                 className="rounded-full bg-[#9b8e8e] px-4 py-2 font-bold text-white hover:bg-[#7a6f6f]"
               >
-                醫療人員表單
+                {t("proForm")}
               </Link>
             </div>
           </div>

app/root.tsx

@@ -194,20 +194,18 @@ export default function App() {
         <Outlet />
         <div className="mt-10 text-center text-[#9b8e8e]">
           <img src={icon5} className="mx-auto w-20" alt="icon" />
-          <h2 className="text-2xl lg:text-4xl">我們需要您寶貴的意見</h2>
+          <h2 className="text-2xl lg:text-4xl">{t("yourOpinion")}</h2>
           <div className="my-4 px-4">
-            只要幾秒，表達您對醫療環境的看法！
+            {t("shareYourComments")}
             <br />
-            完成這個簡單的調查並與我們分享
-            <span className="block md:inline" />
-            您對整個醫療環境的評論！
+            {t("thankText")}
           </div>
           <div className="flex justify-center gap-4">
             <Link to={t("formLink.personal")} className="link-btn">
-              個人表單
+              {t("personalForm")}
             </Link>
             <Link to={t("formLink.pro")} className="link-btn">
-              醫療人員表單
+              {t("proForm")}
             </Link>
           </div>
         </div>

app/routes/($lang).assessment.tsx

@@ -4,6 +4,8 @@ import stylesheet from "~/styles/assessment.css";
 
 import logo from "~/images/logo.png";
 import usCDC from "~/images/us-cdc.png";
+import sr from "~/images/sr.png";
+import iota from "~/images/iota.png";
 import { getTitle } from "~/utils";
 
 export const links: LinksFunction = () => [
@@ -55,13 +57,17 @@ export default function () {
         >
           {t("click2Eng")}
         </a>
-
         <div className="title">{t("recommended")}</div>
         <ul className="text-left [&>*+*]:mt-4">
           <li>{t("WCBPs")}</li>
           <li>{t("Premenopause")}</li>
           <li>{t("Postmenopause")}</li>
         </ul>
+        <div className="mt-10 text-left">
+          <img src={iota} alt="IOTA" className="mx-auto mb-4" />
+          {t("IOTA")}
+        </div>
+        <img src={sr} alt="SR" />
       </div>
     </div>
   );

app/routes/($lang).curing.tsx

@@ -42,15 +42,15 @@ export default function () {
       <div className="hero">
         <div>{t("mainTitle")}</div>
       </div>
-      <div className="mx-auto mt-16">
+      <div className="mx-auto mt-16 px-6 lg:px-0">
         {(curingData as CuringDataType[]).map((data, index: number) => {
           const dataI18n: CuringDataType = t(`data.${index}`, {
             returnObjects: true,
           });
           if (!ready) return null;
           return (
             <div key={index}>
-              <CuringSubPage data={dataI18n} />
+              <CuringSubPage index={index} data={dataI18n} />
               {index !== curingData.length - 1 && <ArrowAltCircleDown />}
             </div>
           );

app/routes/($lang).plan.tsx

@@ -377,8 +377,8 @@ export default function () {
                   <td>-</td>
                   <td>{t("table.leuprolide")}</td>
                   <td>{t("table.gestrinone")}</td>
-                  <td>{t("table.adenomyomectomyNerveBlockEtc")}</td>
-                  <td>{t("table.hysterectomy")}</td>
+                  <td>{t("table.cystectomy")}</td>
+                  <td>{t("table.cophorectomyAndSalpingectomy")}</td>
                 </tr>
                 <tr>
                   <td>-</td>
@@ -459,19 +459,13 @@ export default function () {
         <div className="desc my-6 text-xl">{t("pregnant.text")}</div>
         <ul className="text-xl [&>*+*]:mt-4 [&>*]:list-disc">
           <li>
-            <span className="border-b-2 border-solid border-green-400">
-              {t("pregnant.items.0")}
-            </span>
+            <span>{t("pregnant.items.0")}</span>
           </li>
           <li>
-            <span className="border-b-2 border-solid border-yellow-400">
-              {t("pregnant.items.1")}
-            </span>
+            <span>{t("pregnant.items.1")}</span>
           </li>
           <li>
-            <span className="border-b-2 border-solid border-red-400">
-              {t("pregnant.items.2")}
-            </span>
+            <span>{t("pregnant.items.2")}</span>
           </li>
         </ul>
         <div className="title">{t("pregnant.b2w")}</div>

app/styles/curing.css

@@ -25,38 +25,26 @@
 }
 
 .cp-title {
-  height: 200px;
   max-width: 100%;
   color: #857162;
   position: relative;
   margin-bottom: 40px;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
+  @apply rounded-3xl bg-[#c3ff73] text-center lg:flex lg:text-left;
 }
 
 .cp-title-text {
-  right: 30px;
-  width: 420px;
-  text-align: center;
-  position: absolute;
-  margin: auto;
+  @apply flex flex-1 flex-col justify-center;
 }
 
 .cp-title-content {
-  right: 0;
-  width: 400px;
   font-size: 20px;
-  position: absolute;
-  text-align: center;
 }
 
 .cp-title-content-m {
-  right: 0;
-  width: 400px;
   font-size: 36px;
-  position: absolute;
-  text-align: center;
 }
 
 .cp-short {
@@ -107,7 +95,6 @@
 
 table {
   width: 300px;
-  /* text-align: center; */
 }
 
 th {
@@ -174,11 +161,6 @@ td {
 
 @media (max-width: 640px) {
   .cp-container {
-    margin-left: 20px;
-    margin-right: 20px;
-  }
-  .cp-title {
-    height: 120px;
   }
   .cp-title-text {
     right: 0;
@@ -231,12 +213,5 @@ td {
   }
   .cp-title-text {
     left: 0;
-    width: 300px;
-  }
-  .cp-title-content {
-    width: 300px;
-  }
-  .cp-title-content-m {
-    width: 300px;
   }
 }

app/styles/plan.css

@@ -13,7 +13,7 @@
 
 .section .title-block {
   background-image: url(~/images/bg-flower.png);
-  @apply mx-auto mb-10 mt-20 max-w-[max-content] bg-cover bg-center p-10 text-center text-2xl font-bold;
+  @apply mx-auto mb-10 mt-20 bg-cover bg-center p-10 text-center text-2xl font-bold;
 }
 
 .section .title-block:before,

public/locales/en/assessment.json

@@ -6,5 +6,6 @@
   "recommended": "Recommended Monitoring Items during Interventions",
   "WCBPs": "For WCBPs: Pregnancy Plans, Ultrasound exams, CA-125, liver function tests (if clinically indicated)",
   "Premenopause": "For Females at Premenopause: Ultrasound exams, CA-125, FSH, Estradiol, AMH (if clinically indicated/out-of-pocket expense), TSH, Free T4",
-  "Postmenopause": "For Females at Postmenopause: Ultrasound exams, breast cancer screening every 2 years (females aged 40 and above and with second-degree relatives of breast cancer history, or females aged 45 and above), bone density scan (Out-of-Pocket Expense)."
+  "Postmenopause": "For Females at Postmenopause: Ultrasound exams, breast cancer screening every 2 years (females aged 40 and above and with second-degree relatives of breast cancer history, or females aged 45 and above), bone density scan (Out-of-Pocket Expense).",
+  "IOTA": "The international ovarian tumour analysis (IOTA) calculator is currently undergoing the European Medical Device Regulation certification process. Before they can be legally made available to healthcare professionals, please refer to the following figure for 10 features from the Simple Rules. For Sonography Evaluation of Ovarian Tumors, please refer to “International Ovarian Tumor Analysis – Simple Rules Risk Calculator, Sonography Images”"
 }

public/locales/en/common.json

@@ -17,5 +17,14 @@
   "formLink": {
     "personal": "https://forms.gle/EFgMG7yUFgsAb56Q9",
     "pro": "https://forms.gle/5iPZBqCbedE9wQFf7"
-  }
+  },
+  "footer": {
+    "declaration": "This website is sponsored by National Taiwan University Hospital Yunlin Branch. The authors of the website have no financial conflicts of interest.",
+    "copyright": "2023/08/01 © All rights reserved; unauthorized reproduction will be prosecuted."
+  },
+  "yourOpinion": "Your opinion is valuable. ",
+  "shareYourComments": "Share your comments on medical settings, which only takes a few seconds! ",
+  "thankText": "Thank you for visiting our website and offering valuable feedback, which definitely can help improve our clients’ doctor-visiting experience and overall comfort level. ",
+  "personalForm": "Patient",
+  "proForm": "Medical Professional"
 }

public/locales/en/plan.json

@@ -85,7 +85,9 @@
     "6-9MonthsAndLonger": "6-9 months and longer",
     "transamine": "Transamine",
     "adenomyomectomy": "Adenomyomectomy",
-    "coveredByHealthInsuranceIfHbLess10": "Covered by Health Insurance if Hb<10"
+    "coveredByHealthInsuranceIfHbLess10": "Covered by Health Insurance if Hb<10",
+    "cystectomy": "Cystectomy",
+    "cophorectomyAndSalpingectomy": "Oophorectomy and Salpingectomy"
   },
   "pregnant": {
     "title": "For Those Who Plan to Become Pregnant in the Next 3–6 Months",

public/locales/id-ID/assessment.json

@@ -6,5 +6,6 @@
   "recommended": "Item yang direkomendasikan untuk dipantau selama pengobatan",
   "WCBPs": "Wanita usia subur: rencana hamil, ultrasonik, CA-125, fungsi hati (sesuai pertimbangan klinis)",
   "Premenopause": "pra-menopause: ultrasonik, CA-125, FSH, Estradiol, AMH (sesuai pertimbangan klinis/biaya ditanggung sendiri) TSH, Free T4",
-  "Postmenopause": "menopause: ultrasonik, skrining kanker payudara setiap 2 tahun (berusia genap 40 tahun dengan riwayat kanker payudara hingga kerabat tingkat kedua, atau berusia genap 45 tahun), pemeriksaan kepadatan tulang (biaya ditanggung sendiri)"
+  "Postmenopause": "menopause: ultrasonik, skrining kanker payudara setiap 2 tahun (berusia genap 40 tahun dengan riwayat kanker payudara hingga kerabat tingkat kedua, atau berusia genap 45 tahun), pemeriksaan kepadatan tulang (biaya ditanggung sendiri)",
+  "IOTA": "Kalkulator analisis tumor ovarium internasional (IOTA) saat ini sedang menjalani proses sertifikasi Regulasi Alat Medis Eropa. Sebelum mereka dapat secara sah disediakan untuk profesional kesehatan, silakan merujuk pada gambar berikut untuk 10 fitur dari Aturan Sederhana. Untuk penilaian tumor ovarium melalui ultrasonik, silakan merujuk: Analisa Kista Ovarium Internasional (Kalkulator Risiko Aturan Simpel, gambar ultrasonik)"
 }