feat: add i18n support with English and Chinese language toggle

static/js/i18n.js

@@ -0,0 +1,56 @@
+(function () {
+  var STORAGE_KEY = "taskify-lang";
+  var translations = {};
+
+  function getLang() {
+    return localStorage.getItem(STORAGE_KEY) || "en";
+  }
+
+  function setLang(lang) {
+    localStorage.setItem(STORAGE_KEY, lang);
+  }
+
+  function apply() {
+    document.querySelectorAll("[data-i18n]").forEach(function (el) {
+      var key = el.getAttribute("data-i18n");
+      if (translations[key] !== undefined) el.textContent = translations[key];
+    });
+    document.querySelectorAll("[data-i18n-ph]").forEach(function (el) {
+      var key = el.getAttribute("data-i18n-ph");
+      if (translations[key] !== undefined) el.placeholder = translations[key];
+    });
+    document.querySelectorAll("[data-i18n-val]").forEach(function (el) {
+      var key = el.getAttribute("data-i18n-val");
+      if (translations[key] !== undefined) el.value = translations[key];
+    });
+    var lang = getLang();
+    document.querySelectorAll(".lang-toggle").forEach(function (btn) {
+      btn.textContent = lang === "en" ? "EN" : "中文";
+    });
+  }
+
+  function load(lang, cb) {
+    var xhr = new XMLHttpRequest();
+    xhr.open("GET", "/static/locales/" + lang + ".json", true);
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState === 4 && xhr.status === 200) {
+        translations = JSON.parse(xhr.responseText);
+        cb();
+      }
+    };
+    xhr.send();
+  }
+
+  function toggle() {
+    var next = getLang() === "en" ? "zh" : "en";
+    setLang(next);
+    load(next, apply);
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    load(getLang(), apply);
+    document.querySelectorAll(".lang-toggle").forEach(function (btn) {
+      btn.addEventListener("click", toggle);
+    });
+  });
+})();

static/locales/en.json

@@ -0,0 +1,93 @@
+{
+  "nav.features": "Features",
+  "nav.templates": "Templates",
+  "nav.forTeams": "For Teams",
+  "nav.resources": "Resources",
+  "nav.pricing": "Pricing",
+  "nav.signup": "Sign Up",
+  "nav.login": "Log In",
+
+  "hero.heading": "One app to replace them all",
+  "hero.placeholder": "Enter your email address",
+  "hero.btn": "Get Started",
+
+  "feature.heading": "Delightfully simple and deceptively powerful task management",
+  "feature.desc": "30 million+ people organize billions of tasks in Todoist for their work, education, and personal life.",
+  "feature.1.title": "With you everywhere",
+  "feature.1.text": "Use Todoist's apps, extensions and widgets on any device or platform.",
+  "feature.1.btn": "Download apps",
+  "feature.2.title": "Make Todoist your",
+  "feature.2.text": "Customize your to-do list with filters, labels, priorities, and more.",
+  "feature.2.btn": "See all features",
+  "feature.3.title": "Productivity Method",
+  "feature.3.text": "Personal productivity recommendations based on your unique traits and strengths.",
+  "feature.3.btn": "Take the quiz",
+  "feature.4.title": "There's a template for tha",
+  "feature.4.text": "Hundreds of templates are available to get you started with whatever's on your plate.",
+  "feature.4.btn": "Start with templates",
+  "feature.5.title": "Connect with your other tool",
+  "feature.5.text": "Link Todoist with your calendar, voice assistant, and 30+ other tools.",
+  "feature.5.btn": "Install integrations",
+
+  "achievements.heading": "A task manager you can trust for life",
+  "achievements.desc": "We've been building Todoist for 15 years and 169 days.",
+  "achievements.link": "We're in it for the long haul.",
+  "achievements.1.label": "App downloads",
+  "achievements.2.label": "Tasks completed",
+  "achievements.3.label": "Colleges",
+  "achievements.4.label": "Pro users",
+
+  "footer.desc": "Join millions of people who organize work and life with Taskify.",
+  "footer.features": "FEATURES",
+  "footer.howItWorks": "How It Works",
+  "footer.forTeams": "For Teams",
+  "footer.pricing": "Pricing",
+  "footer.templates": "Templates",
+  "footer.resources": "RESOURCES",
+  "footer.downloadApps": "Download Apps",
+  "footer.helpCenter": "Help Center",
+  "footer.productivityMethods": "Productivity Methods",
+  "footer.referFriend": "Refer a friend",
+  "footer.integrations": "Integrations",
+  "footer.channelPartners": "Channel Partners",
+  "footer.developerAPI": "Developer API",
+  "footer.status": "Status",
+  "footer.company": "COMPANY",
+  "footer.aboutUs": "About Us",
+  "footer.hiring": "We are hiring!",
+  "footer.blog": "Blog",
+  "footer.press": "Press",
+  "footer.twist": "Twist",
+  "footer.security": "Security",
+  "footer.privacy": "Privacy",
+  "footer.terms": "Terms",
+  "footer.copyright": "© Taskify Inc.",
+
+  "signup.signup": "Sign up",
+  "signup.username": "User name",
+  "signup.email": "Email",
+  "signup.password": "Password",
+  "signup.submit": "Sign up",
+  "signup.login": "Login",
+  "signup.loginEmail": "Enter your email",
+  "signup.loginPassword": "Enter password",
+  "signup.loginSubmit": "Login",
+
+  "dashboard.overview": "Overview",
+  "dashboard.stats": "Stats",
+  "dashboard.projects": "Projects",
+  "dashboard.chat": "Chat",
+  "dashboard.calendar": "Calendar",
+  "dashboard.settings": "Settings",
+  "dashboard.logout": "Log out",
+  "dashboard.search": "Search",
+  "dashboard.profile": "Profile",
+  "dashboard.projectsTitle": "Projects",
+  "dashboard.thisDay": "This Day",
+  "dashboard.thisWeek": "This Week",
+  "dashboard.thisMonth": "This Month",
+  "dashboard.thisYear": "This Year",
+  "dashboard.todo": "To do",
+  "dashboard.inProgress": "In progress",
+  "dashboard.completed": "Completed"
+}

static/locales/zh.json

@@ -0,0 +1,93 @@
+{
+  "nav.features": "功能",
+  "nav.templates": "模板",
+  "nav.forTeams": "团队版",
+  "nav.resources": "资源",
+  "nav.pricing": "价格",
+  "nav.signup": "注册",
+  "nav.login": "登录",
+
+  "hero.heading": "一个应用，替代所有",
+  "hero.placeholder": "请输入您的邮箱地址",
+  "hero.btn": "立即开始",
+
+  "feature.heading": "令人愉悦的简洁，出乎意料的强大",
+  "feature.desc": "超过 3000 万人使用 Todoist 管理工作、学习和生活中的数十亿任务。",
+  "feature.1.title": "随时随地",
+  "feature.1.text": "在任何设备或平台上使用 Todoist 的应用、扩展和小组件。",
+  "feature.1.btn": "下载应用",
+  "feature.2.title": "打造你的 Todoist",
+  "feature.2.text": "使用筛选器、标签、优先级等自定义你的待办清单。",
+  "feature.2.btn": "查看所有功能",
+  "feature.3.title": "高效方法论",
+  "feature.3.text": "基于你的独特特质和优势提供个性化的效率建议。",
+  "feature.3.btn": "参加测试",
+  "feature.4.title": "总有一个模板适合你",
+  "feature.4.text": "数百个模板帮助你快速开始手头的任何事务。",
+  "feature.4.btn": "从模板开始",
+  "feature.5.title": "连接你的其他工具",
+  "feature.5.text": "将 Todoist 与日历、语音助手和 30 多种其他工具关联。",
+  "feature.5.btn": "安装集成",
+
+  "achievements.heading": "一个值得终身信赖的任务管理器",
+  "achievements.desc": "我们已经构建 Todoist 超过 15 年零 169 天。",
+  "achievements.link": "我们会一直走下去。",
+  "achievements.1.label": "应用下载量",
+  "achievements.2.label": "已完成任务",
+  "achievements.3.label": "合作院校",
+  "achievements.4.label": "专业用户",
+
+  "footer.desc": "加入数百万使用 Taskify 组织工作和生活的人。",
+  "footer.features": "功能",
+  "footer.howItWorks": "工作原理",
+  "footer.forTeams": "团队版",
+  "footer.pricing": "价格",
+  "footer.templates": "模板",
+  "footer.resources": "资源",
+  "footer.downloadApps": "下载应用",
+  "footer.helpCenter": "帮助中心",
+  "footer.productivityMethods": "效率方法",
+  "footer.referFriend": "推荐好友",
+  "footer.integrations": "集成",
+  "footer.channelPartners": "渠道合作伙伴",
+  "footer.developerAPI": "开发者 API",
+  "footer.status": "状态",
+  "footer.company": "公司",
+  "footer.aboutUs": "关于我们",
+  "footer.hiring": "我们在招聘！",
+  "footer.blog": "博客",
+  "footer.press": "媒体",
+  "footer.twist": "Twist",
+  "footer.security": "安全",
+  "footer.privacy": "隐私",
+  "footer.terms": "条款",
+  "footer.copyright": "© Taskify 公司",
+
+  "signup.signup": "注册",
+  "signup.username": "用户名",
+  "signup.email": "邮箱",
+  "signup.password": "密码",
+  "signup.submit": "注册",
+  "signup.login": "登录",
+  "signup.loginEmail": "请输入邮箱",
+  "signup.loginPassword": "请输入密码",
+  "signup.loginSubmit": "登录",
+
+  "dashboard.overview": "概览",
+  "dashboard.stats": "统计",
+  "dashboard.projects": "项目",
+  "dashboard.chat": "聊天",
+  "dashboard.calendar": "日历",
+  "dashboard.settings": "设置",
+  "dashboard.logout": "退出登录",
+  "dashboard.search": "搜索",
+  "dashboard.profile": "个人资料",
+  "dashboard.projectsTitle": "项目",
+  "dashboard.thisDay": "今天",
+  "dashboard.thisWeek": "本周",
+  "dashboard.thisMonth": "本月",
+  "dashboard.thisYear": "今年",
+  "dashboard.todo": "待办",
+  "dashboard.inProgress": "进行中",
+  "dashboard.completed": "已完成"
+}

views/index.ejs

@@ -31,6 +31,7 @@
           <%-include("../views/partials/footer.ejs") %>
 
 
+  <script src="/static/js/i18n.js"></script>
 </body>
 
 </html>

views/partials/achievements.ejs

@@ -13,29 +13,29 @@
     <section class="section achievements-section">
         <div class="container achievements-container">
             <div class="achievements-left">
-                <h2 class="achievements-secondary-heading">A task manager you can trust for life</h2>
-                <p>We’ve been building Todoist for 15 years and 169 days. <a href="#">We're in it for the long haul.</a></p>
+                <h2 class="achievements-secondary-heading" data-i18n="achievements.heading">A task manager you can trust for life</h2>
+                <p><span data-i18n="achievements.desc">We’ve been building Todoist for 15 years and 169 days.</span> <a href="#" data-i18n="achievements.link">We’re in it for the long haul.</a></p>
             </div>
             <div class="achievements-right">
                 <div class="achievements-achievement-card">
                     <img class="achievements-achievement-img" src="../../static/assets/achievement-1.webp" alt="achievement-1">
                     <h3 class="achievements-achievement-heading">300+</h3>
-                    <p>App downloads</p>
+                    <p data-i18n="achievements.1.label">App downloads</p>
                 </div>
                 <div class="achievements-achievement-card">
                     <img class="achievements-achievement-img" src="../../static/assets/achievement-2.webp" alt="achievement-2">
                     <h3 class="achievements-achievement-heading">100+</h3>
-                    <p>Tasks completed</p>
+                    <p data-i18n="achievements.2.label">Tasks completed</p>
                 </div>
                 <div class="achievements-achievement-card">
                     <img class="achievements-achievement-img" src="../../static/assets/achievement-3.webp" alt="achievement-3">
                     <h3 class="achievements-achievement-heading">160+</h3>
-                    <p>Colleges</p>
+                    <p data-i18n="achievements.3.label">Colleges</p>
                 </div>
                 <div class="achievements-achievement-card">
                     <img class="achievements-achievement-img" src="../../static/assets/achievement-4.webp" alt="achievement-4">
                     <h3 class="achievements-achievement-heading">100+</h3>
-                    <p>Pro users</p>
+                    <p data-i18n="achievements.4.label">Pro users</p>
                 </div>
             </div>
         </div>

views/partials/feature.ejs

@@ -12,43 +12,43 @@
     <section class="section feature-section">
       <div class="container feature-container">
           <div class="feature-main-heading">
-              <h2 class="feature-secondary-heading">Delightfully simple and deceptively powerful task
+              <h2 class="feature-secondary-heading" data-i18n="feature.heading">Delightfully simple and deceptively powerful task
                    management</h2>
-              <p>30 million+ people organize billions of tasks in Todoist for their work, education, and personal life.</p>
+              <p data-i18n="feature.desc">30 million+ people organize billions of tasks in Todoist for their work, education, and personal life.</p>
           </div>
           <div class="feature-even-column">
               <div class="feature-even-column-left">
                   <div class="feature-features">
                       <img class="feature-img" src="../../static/assets/feature1.webp" alt="feature1">
-                      <h3 class="feature-heading">With you everywhere</h3>
-                      <p class="feature-text">Use Todoist’s apps, extensions and widgets on any device or platform.</p>
-                      <a href="#" class="feature-btn feature-btn">Download apps</a>
+                      <h3 class="feature-heading" data-i18n="feature.1.title">With you everywhere</h3>
+                      <p class="feature-text" data-i18n="feature.1.text">Use Todoist’s apps, extensions and widgets on any device or platform.</p>
+                      <a href="#" class="feature-btn feature-btn" data-i18n="feature.1.btn">Download apps</a>
                   </div>
                   <div class="feature-features">
                       <img class="feature-img" src="../../static/assets/feature2.webp" alt="feature2">
-                      <h3 class="feature-heading">Make Todoist your</h3>
-                      <p class="feature-text">Customize your to-do list with filters, labels, priorities, and more.</p>
-                      <a href="#" class="feature-btn feature-btn">See all features</a>
+                      <h3 class="feature-heading" data-i18n="feature.2.title">Make Todoist your</h3>
+                      <p class="feature-text" data-i18n="feature.2.text">Customize your to-do list with filters, labels, priorities, and more.</p>
+                      <a href="#" class="feature-btn feature-btn" data-i18n="feature.2.btn">See all features</a>
                   </div>
                   <div class="feature-features">
                       <img class="feature-img" src="../../static/assets/feature3.webp" alt="feature3">
-                      <h3 class="feature-heading">Productivity Method</h3>
-                      <p class="feature-text">Personal productivity recommendations based on your unique traits and strengths.</p>
-                      <a href="#" class="feature-btn feature-btn">Take the quiz</a>
+                      <h3 class="feature-heading" data-i18n="feature.3.title">Productivity Method</h3>
+                      <p class="feature-text" data-i18n="feature.3.text">Personal productivity recommendations based on your unique traits and strengths.</p>
+                      <a href="#" class="feature-btn feature-btn" data-i18n="feature.3.btn">Take the quiz</a>
                   </div>
               </div>
               <div class="feature-even-column-right">
                   <div class="feature-features">
                       <img class="feature-img" src="../../static/assets/feature4.webp" alt="feature4">
-                      <h3 class="feature-heading">There’s a template for tha</h3>
-                      <p class="feature-text">Hundreds of templates are available to get you started with whatever’s on your plate.</p>
-                      <a href="#" class="feature-btn feature-btn">Start with templates</a>
+                      <h3 class="feature-heading" data-i18n="feature.4.title">There’s a template for tha</h3>
+                      <p class="feature-text" data-i18n="feature.4.text">Hundreds of templates are available to get you started with whatever’s on your plate.</p>
+                      <a href="#" class="feature-btn feature-btn" data-i18n="feature.4.btn">Start with templates</a>
                   </div>
                   <div class="feature-features">
                       <img class="feature-img" src="../../static/assets/feature5.webp" alt="feature5">
-                      <h3 class="feature-heading">Connect with your other tool</h3>
-                      <p class="feature-text">Link Todoist with your calendar, voice assistant, and 30+ other tools.</p>
-                      <a href="#" class="feature-btn feature-btn">Install integrations</a>
+                      <h3 class="feature-heading" data-i18n="feature.5.title">Connect with your other tool</h3>
+                      <p class="feature-text" data-i18n="feature.5.text">Link Todoist with your calendar, voice assistant, and 30+ other tools.</p>
+                      <a href="#" class="feature-btn feature-btn" data-i18n="feature.5.btn">Install integrations</a>
                   </div>
               </div>
           </div>