feat: users are able to toggle between english and simplified chinese…

… using the button group on the header. this header is on all pages. update the title (what is seen in the browser tab) using | symbol instead of colon to align with rest of the site
henrylin03 · Sep 9, 2024 · 8859a43 · 8859a43
1 parent 42af5bf
commit 8859a43
Show file tree

Hide file tree

Showing 7 changed files with 429 additions and 55 deletions.
diff --git a/css/global.css b/css/global.css
@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@100..900&display=swap');
 
 /* GLOBAL */
 * {
@@ -21,6 +22,11 @@ body {
   background-color: var(--stone-50);
 }
 
+body [lang="zh"] {
+  display: none;
+  font-family: "Noto Sans SC", sans-serif;
+}
+
 h1,
 h2,
 h3 {
@@ -32,13 +38,53 @@ a {
   color: inherit;
 }
 
-/* HEADER */
+button {
+  /* normalising */
+  font-family: inherit;
+  outline: none;
+  border: none;
+  cursor: pointer;
+
+  padding: 16px 32px;
+  border-radius: 8px;
+  font-weight: bold;
+  font-size: 1.2rem;
+  display: block;
+  transition: background-color 0.1s;
+}
+
+button.primary {
+  background-color: var(--blue-900);
+  color: white;
+  --hover-colour: #364692;
+  --click-colour: #263268;
+}
+
+button.secondary {
+  background-color: white;
+  color: var(--blue-500);
+  border: 1px var(--blue-500) solid;
+  border-radius: 12px;
+  --hover-colour: #ebedf4;
+  --click-colour: #C1C6DD;
+}
+
+button:hover {
+  background-color: var(--hover-colour);
+}
+
+button:active {
+  background-color: var(--click-colour);
+}
+
+/* HEADER: BRANDING */
 header {
   padding: 12px 36px;
   border-bottom: var(--border-divider);
   background-color: white;
   display: flex;
   align-items: center;
+  justify-content: space-between;
 
   /* stick to top */
   position: sticky;
@@ -68,7 +114,39 @@ h2>.smaller {
 
 .logo>img {
   width: 60px;
-  height: auto;
+}
+
+/* HEADER: TRANSLATE PAGE */
+.switch-language {
+  display: flex;
+  align-items: center;
+}
+
+.switch-language-button {
+  font-weight: normal;
+  font-size: 1rem;
+  text-align: center;
+  padding: 12px;
+  width: 52px;
+}
+
+.switch-language> :first-child {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.switch-language> :last-child {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.switch-language-button.selected {
+  background-color: var(--blue-500);
+  color: white;
+}
+
+.switch-language-button:not(.selected):hover {
+  background-color: #d0d3d9;
 }
 
 /* MAIN */
@@ -115,7 +193,7 @@ footer a:hover {
 
 /* MEDIA QUERIES */
 /* mobile */
-@media only screen and (max-width: 768px) {
+@media (max-width: 768px) {
   h1 {
     font-size: 2.1rem;
   }
@@ -128,6 +206,11 @@ footer a:hover {
     font-size: 1.2rem;
   }
 
+  button {
+    font-size: .8rem !important;
+    padding: 12px 24px;
+  }
+
   /* header section */
   header {
     padding: 12px 16px;
@@ -149,6 +232,11 @@ footer a:hover {
     width: 35px;
   }
 
+  .switch-language-button {
+    padding: 8px;
+    width: 36px;
+  }
+
   /* main section */
   main {
     padding: 12px;

diff --git a/css/index.css b/css/index.css
@@ -68,45 +68,6 @@ p {
   min-width: fit-content;
 }
 
-button {
-  /* normalising */
-  font-family: inherit;
-  outline: none;
-  border: none;
-  cursor: pointer;
-
-  padding: 16px 32px;
-  border-radius: 8px;
-  font-weight: bold;
-  font-size: 1.2rem;
-  display: block;
-  transition: background-color 0.1s;
-}
-
-button.primary {
-  background-color: var(--blue-900);
-  color: white;
-  --hover-colour: #364692;
-  --click-colour: #263268;
-}
-
-button.secondary {
-  background-color: white;
-  color: var(--blue-500);
-  border: 1px var(--blue-500) solid;
-  border-radius: 12px;
-  --hover-colour: #ebedf4;
-  --click-colour: #C1C6DD;
-}
-
-button:hover {
-  background-color: var(--hover-colour);
-}
-
-button:active {
-  background-color: var(--click-colour);
-}
-
 /* MAIN - RIGHT SIDE */
 main figure {
   display: flex;
@@ -188,11 +149,6 @@ dialog {
     font-size: .85rem;
   }
 
-  button {
-    font-size: .85rem;
-    padding: 12px 24px;
-  }
-
   main img {
     width: 100%;
     height: auto;

diff --git a/css/policies.css b/css/policies.css
@@ -14,6 +14,12 @@ main h3 {
   color: var(--blue-500);
 }
 
+main[lang="zh"] h1,
+main[lang="zh"] h2,
+main[lang="zh"] h3 {
+  margin-top: 2.5rem;
+}
+
 main h1 {
   line-height: 2.5rem;
 }

diff --git a/index.html b/index.html
@@ -17,7 +17,7 @@
   <link rel="manifest" href="./assets/favicon/site.webmanifest">
 
   <!-- seo -->
-  <title>Intellex: Join our waitlist to get matched to a career mentor</title>
+  <title>Intellex | Join our waitlist to get matched to a career mentor</title>
   <meta name="description"
     content="Join the waitlist for Intellex Academy, a web app that matches you with career mentors to better understand an industry, develop new and improve existing skills, and get that next job in the team, company, and industry you've been interested in. While the main site is being built, this page captures users' expressions of interest.">
   <meta name="keywords"
@@ -44,20 +44,39 @@ <h2>
         </h2>
       </div>
     </a>
+
+    <article class="switch-language">
+      <button type="button" class="switch-language-button selected" data-language="english">EN</button>
+      <button type="button" class="switch-language-button" data-language="simplifiedChinese">简</button>
+    </article>
   </header>
 
   <main>
     <div class="grid">
       <div class="text-container">
         <hgroup>
-          <h3>Ready to level up your career?</h3>
-          <h1>Match with a mentor who gets you</h1>
+          <h3>
+            <span lang="en">Ready to level up your career?</span>
+            <span lang="zh">对职业发展的下一步充满期待？</span>
+          </h3>
+          <h1>
+            <span lang="en">Match with a mentor who gets you</span>
+            <span lang="zh">找到懂你的导师</span>
+          </h1>
         </hgroup>
-        <p>Join our waitlist and be the first to access one on one mentoring, interview preparation, and more from
+        <p lang="en">Join our waitlist and be the first to access one on one mentoring, interview preparation, and
+          more from
           industry experts!</p>
+        <p lang="zh">立即加入等候名单，优先获取导师配对机会，传授多年职场经验，帮你提升职业技能</p>
         <div class="button-group">
-          <button type="button" class="primary" id="join-waitlist">Join Waitlist</button>
-          <button type="button" class="secondary" id="email">Email Us</button>
+          <button type="button" class="primary" id="join-waitlist">
+            <span lang="en">Join Waitlist</span>
+            <span lang="zh">加入等候名单</span>
+          </button>
+          <button type="button" class="secondary" id="email">
+            <span lang="en">Email Us</span>
+            <span lang="zh">发送邮件</span>
+          </button>
         </div>
       </div>
       <figure>

diff --git a/js/script.js b/js/script.js
@@ -1,6 +1,9 @@
 const dialog = document.querySelector("dialog");
 const joinButton = document.querySelector("#join-waitlist");
 const emailButton = document.querySelector("#email");
+const switchLanguageButtons = document.querySelectorAll(
+  ".switch-language-button"
+);
 
 // event handlers
 const closeDialog = (e) => {
@@ -14,7 +17,34 @@ const sendEmail = () => {
   window.location.href = emailLink;
 };
 
+const switchLanguage = (e) => {
+  const selectedLanguage = e.target.dataset.language;
+  const variableLanguageElements = {
+    english: document.querySelectorAll("body [lang='en']"),
+    simplifiedChinese: document.querySelectorAll("body [lang='zh']"),
+  };
+
+  if (!(selectedLanguage in variableLanguageElements)) return;
+
+  // update ui styling for buttons
+  switchLanguageButtons.forEach((button) =>
+    button.classList.remove("selected")
+  );
+  e.target.classList.add("selected");
+
+  for (const [language, elements] of Object.entries(variableLanguageElements)) {
+    if (language === selectedLanguage) {
+      elements.forEach((element) => (element.style.display = "block"));
+    } else {
+      elements.forEach((element) => (element.style.display = "none"));
+    }
+  }
+};
+
 // event listeners
+switchLanguageButtons.forEach((button) =>
+  button.addEventListener("click", switchLanguage)
+);
 joinButton.addEventListener("click", () => dialog.showModal());
 dialog.addEventListener("click", closeDialog);
 emailButton.addEventListener("click", sendEmail);