TappoCloud/landing/script.js

// i18n translations
const i18n = {
  en: {
    'nav.features': 'Features',
    'nav.scenarios': 'Use Cases',
    'nav.comparison': 'Why Tappo',
    'nav.pricing': 'Pricing',
    'nav.download': 'Free Download',

    'hero.badge': 'Zero Barrier • Data Security • China Localized',
    'hero.title': 'With the right tools,',
    'hero.titleHighlight': 'simplicity tames complexity',
    'hero.desc': 'Tappo is an intelligent workflow automation software for SMBs. Build automation visually with drag-and-drop and AI assistance — no coding required.',
    'hero.cta': 'Get Started',
    'hero.demo': 'Watch Demo',
    'hero.stat1': 'Local Execution',
    'hero.stat2': 'Data to Cloud',
    'hero.stat3': 'Workflows',

    'workflow.trigger': 'Schedule Trigger',
    'workflow.browser': 'Open Browser',
    'workflow.extract': 'Extract Data',
    'workflow.sync': 'Sync to Feishu',

    'highlights.title': 'Why Choose',
    'highlights.subtitle': 'Three core advantages that make automation accessible',
    'highlights.feature1.title': 'Zero Barrier',
    'highlights.feature1.desc': 'No coding required. Describe your needs in natural language, AI generates workflows. Rich templates, one-click install — no Docker needed.',
    'highlights.feature2.title': 'Data Security',
    'highlights.feature2.desc': 'All data stored locally. Your credentials never leave your machine. Offline capable, fully secure and under your control.',
    'highlights.feature3.title': 'China Localized',
    'highlights.feature3.desc': 'Deep integration with Feishu, DingTalk, WeCom, and WeChat. Local support team with faster response times.',

    'scenarios.title': 'Say Goodbye to',
    'scenarios.subtitle': 'Tappo solves these pain points',
    'scenarios.pain': 'Pain:',
    'scenarios.solution': 'Solution:',
    'scenarios.case1.title': 'Data Collection',
    'scenarios.case1.pain': 'Manual data scraping from multiple platforms is time-consuming and error-prone.',
    'scenarios.case1.solution': 'Automated browser operations, scheduled scraping and data organization.',
    'scenarios.case2.title': 'Cross-System Sync',
    'scenarios.case2.pain': 'Data scattered across systems, manual copy-paste required.',
    'scenarios.case2.solution': 'Workflows connect multiple systems, automatic data synchronization.',
    'scenarios.case3.title': 'Report Generation',
    'scenarios.case3.pain': 'Daily/weekly/monthly reports created repeatedly, wasting time.',
    'scenarios.case3.solution': 'Auto-collect data, generate beautiful charts, scheduled delivery.',

    'features.title': 'Powerful Features',
    'features.f1.title': 'Visual Workflow Editor',
    'features.f1.desc': 'WYSIWYG drag-and-drop interface to build complex business logic without writing code.',
    'features.f2.title': 'AI-Powered Generation',
    'features.f2.desc': 'Tell AI what you want, it builds complete workflow scripts. True natural language programming.',
    'features.f3.title': 'Browser Automation',
    'features.f3.desc': 'Operate browsers like a human — auto click, input, extract web data. Supports complex interactions.',
    'features.f4.title': 'Scheduled Tasks',
    'features.f4.desc': 'Flexible scheduling for daily reports, weekly summaries, and periodic data sync tasks.',
    'features.f5.title': 'Template Marketplace',
    'features.f5.desc': 'Rich pre-built templates covering common scenarios. One-click import, instant productivity.',
    'features.f6.title': 'Charts & Reports',
    'features.f6.desc': 'Built-in chart generation module. Transform collected data into visual reports with multiple chart types.',

    'comparison.title': 'Compared to Traditional Solutions',
    'comparison.dimension': 'Dimension',
    'comparison.traditional': 'Traditional',
    'comparison.row1.dim': 'Installation',
    'comparison.row1.trad': 'Docker deployment, technical skills required',
    'comparison.row1.tappo': 'One-click installer',
    'comparison.row2.dim': 'Learning Curve',
    'comparison.row2.trad': 'Programming/scripting knowledge needed',
    'comparison.row2.tappo': 'Natural language workflow generation',
    'comparison.row3.dim': 'Localization',
    'comparison.row3.trad': 'International products, poor local fit',
    'comparison.row3.tappo': 'Deep China ecosystem integration',
    'comparison.row4.dim': 'Data Security',
    'comparison.row4.trad': 'Depends on cloud or complex deployment',
    'comparison.row4.tappo': '100% local data storage',
    'comparison.row5.dim': 'Support',
    'comparison.row5.trad': 'English community-based',
    'comparison.row5.tappo': 'Local support team',

    'arch.title': 'Cloud Design.',
    'arch.titleHighlight': 'Local Power.',
    'arch.desc': 'Tappo combines the convenience of cloud-based workflow design with the security of local execution.',
    'arch.point1': 'Design workflows anywhere, anytime',
    'arch.point2': 'Local execution with full system access',
    'arch.point3': 'Credentials never leave your machine',
    'arch.point4': 'Offline capable',
    'arch.point5': 'Optional: Cloud remote management',
    'arch.cloud': 'Cloud (Optional)',
    'arch.cloudItem1': 'Workflow Designer',
    'arch.cloudItem2': 'Remote Dashboard',
    'arch.local': 'Local',
    'arch.localItem1': 'Workflow Engine',
    'arch.localItem2': 'Browser / System',
    'arch.localItem3': 'Your Data (100% Local)',

    'pricing.title': 'Flexible',
    'pricing.titleHighlight': 'Pricing',
    'pricing.subtitle': 'Subscription + usage-based plans for different needs',
    'pricing.perMonth': '/month',
    'pricing.free.title': 'Free',
    'pricing.free.price': '$0',
    'pricing.free.f1': 'Core workflow features',
    'pricing.free.f2': 'Local data storage',
    'pricing.free.f3': 'AI workflow generation (limited)',
    'pricing.free.f4': 'Community support',
    'pricing.free.cta': 'Free Download',
    'pricing.enterprise.badge': 'Recommended',
    'pricing.enterprise.title': 'Enterprise',
    'pricing.enterprise.price': 'Contact Us',
    'pricing.enterprise.f1': 'All Free features included',
    'pricing.enterprise.f2': 'AI workflow generation (higher quota)',
    'pricing.enterprise.f3': 'Dedicated support',
    'pricing.enterprise.f4': 'Script development assistance',
    'pricing.enterprise.cta': 'Contact Sales',

    'cta.title': 'Start Your Automation Journey',
    'cta.desc': 'Join the Tappo community. Automate tedious work, unleash your creativity.',
    'cta.btn': 'Download Tappo Free',
    'cta.platforms': 'Windows 10/11 • macOS',

    'footer.slogan': 'With the right tools, simplicity tames complexity.<br>Intelligent workflow automation for SMBs.',
    'footer.product': 'Product',
    'footer.features': 'Features',
    'footer.pricing': 'Pricing',
    'footer.docs': 'Documentation',
    'footer.changelog': 'Changelog',
    'footer.resources': 'Resources',
    'footer.quickstart': 'Quick Start',
    'footer.templates': 'Templates',
    'footer.api': 'API Docs',
    'footer.community': 'Community',
    'footer.contact': 'Contact'
  },
  zh: {
    'nav.features': '核心功能',
    'nav.scenarios': '应用场景',
    'nav.comparison': '产品优势',
    'nav.pricing': '定价',
    'nav.download': '免费下载',

    'hero.badge': '零门槛 • 数据安全 • 中国本地化',
    'hero.title': '善假于物',
    'hero.titleHighlight': '以简驭繁',
    'hero.desc': 'Tappo 是一款面向中小企业的智能工作流自动化软件，通过可视化拖拽与 AI 辅助，让非技术人员也能轻松实现业务自动化。',
    'hero.cta': '立即开始使用',
    'hero.demo': '观看演示',
    'hero.stat1': '本地执行',
    'hero.stat2': '数据上传云端',
    'hero.stat3': '工作流数量',

    'workflow.trigger': '定时触发',
    'workflow.browser': '打开浏览器',
    'workflow.extract': '抓取数据',
    'workflow.sync': '同步到飞书',

    'highlights.title': '为什么选择',
    'highlights.subtitle': '三大核心优势，让自动化触手可及',
    'highlights.feature1.title': '零门槛上手',
    'highlights.feature1.desc': '无需编程基础，自然语言描述需求，AI 自动生成工作流。预置海量模板，一键复用。安装包一路下一步，无需 Docker。',
    'highlights.feature2.title': '数据安全',
    'highlights.feature2.desc': '所有数据存储在本地，企业核心数据不外泄。支持离线运行，安全可控。你的凭证永远不会离开你的电脑。',
    'highlights.feature3.title': '中国本地化',
    'highlights.feature3.desc': '深度适配飞书、钉钉、企业微信及微信公众号，无缝连接国内企业生态。中国本地支持团队，响应更及时。',

    'scenarios.title': '告别重复劳动',
    'scenarios.subtitle': 'Tappo 帮你解决这些痛点',
    'scenarios.pain': '痛点：',
    'scenarios.solution': '方案：',
    'scenarios.case1.title': '数据采集',
    'scenarios.case1.pain': '手动从多个平台抓取数据，耗时且容易出错。',
    'scenarios.case1.solution': '自动化浏览器操作，定时抓取并整理数据到飞书/钉钉。',
    'scenarios.case2.title': '跨系统同步',
    'scenarios.case2.pain': '数据分散在不同系统，需要人工搬运同步。',
    'scenarios.case2.solution': '工作流串联多系统，实现数据自动同步，告别复制粘贴。',
    'scenarios.case3.title': '报表生成',
    'scenarios.case3.pain': '每日/周/月报表重复制作，浪费大量精力。',
    'scenarios.case3.solution': '自动收集数据，一键生成精美图表报告，定时发送。',

    'features.title': '强大功能',
    'features.f1.title': '可视化工作流编辑器',
    'features.f1.desc': '所见即所得，通过简单的拖拽连接构建复杂的业务逻辑，无需编写代码。',
    'features.f2.title': 'AI 驱动生成',
    'features.f2.desc': '告诉 AI 你想做什么，自动为你构建完整的工作流脚本，真正的自然语言编程。',
    'features.f3.title': '浏览器自动化',
    'features.f3.desc': '像人一样操作浏览器，自动点击、输入、提取网页数据，支持复杂交互场景。',
    'features.f4.title': '定时任务调度',
    'features.f4.desc': '设置灵活的定时计划，自动执行日报、周报、数据同步等周期性任务。',
    'features.f5.title': '模板市场',
    'features.f5.desc': '丰富的预置模板，覆盖常见业务场景，一键导入即可使用，快速上手。',
    'features.f6.title': '图表与报表',
    'features.f6.desc': '内置图表生成模块，将采集的数据直接转化为可视化报表，支持多种图表类型。',

    'comparison.title': '对比传统方案',
    'comparison.dimension': '对比维度',
    'comparison.traditional': '传统方案',
    'comparison.row1.dim': '安装方式',
    'comparison.row1.trad': 'Docker 部署，需技术背景',
    'comparison.row1.tappo': '安装包一路下一步',
    'comparison.row2.dim': '上手难度',
    'comparison.row2.trad': '需要编程/脚本基础',
    'comparison.row2.tappo': '自然语言生成工作流',
    'comparison.row3.dim': '本地化',
    'comparison.row3.trad': '国际化产品，适配差',
    'comparison.row3.tappo': '深度适配中国企业生态',
    'comparison.row4.dim': '数据安全',
    'comparison.row4.trad': '取决于云端或复杂部署',
    'comparison.row4.tappo': '数据完全本地存储',
    'comparison.row5.dim': '支持服务',
    'comparison.row5.trad': '英文社区为主',
    'comparison.row5.tappo': '中国本地支持团队',

    'arch.title': '云端设计',
    'arch.titleHighlight': '本地执行',
    'arch.desc': 'Tappo 结合云端工作流设计器的便捷性与本地执行的安全性，两全其美。',
    'arch.point1': '随时随地设计工作流',
    'arch.point2': '本地执行，完全系统访问权限',
    'arch.point3': '凭证永不离开你的电脑',
    'arch.point4': '支持离线运行',
    'arch.point5': '可选：云端远程管理',
    'arch.cloud': '云端（可选）',
    'arch.cloudItem1': '工作流设计器',
    'arch.cloudItem2': '远程管理面板',
    'arch.local': '本地',
    'arch.localItem1': '工作流引擎',
    'arch.localItem2': '浏览器 / 系统操作',
    'arch.localItem3': '你的数据（完全本地）',

    'pricing.title': '灵活的',
    'pricing.titleHighlight': '定价方案',
    'pricing.subtitle': '订阅制 + 按量套餐，满足不同规模需求',
    'pricing.perMonth': '/月',
    'pricing.free.title': '免费版',
    'pricing.free.price': '¥0',
    'pricing.free.f1': '核心工作流功能',
    'pricing.free.f2': '本地数据存储',
    'pricing.free.f3': 'AI 生成工作流（有限次数）',
    'pricing.free.f4': '社区支持',
    'pricing.free.cta': '免费下载',
    'pricing.enterprise.badge': '推荐',
    'pricing.enterprise.title': '企业版',
    'pricing.enterprise.price': '联系我们',
    'pricing.enterprise.f1': '包含所有免费版功能',
    'pricing.enterprise.f2': 'AI 生成工作流（更高额度）',
    'pricing.enterprise.f3': '专属技术支持',
    'pricing.enterprise.f4': '脚本开发协助',
    'pricing.enterprise.cta': '咨询企业版',

    'cta.title': '立即开启自动化办公新体验',
    'cta.desc': '加入 Tappo 社区，让繁琐的工作自动化，释放你的创造力。',
    'cta.btn': '免费下载 Tappo',
    'cta.platforms': '支持 Windows 10/11 • macOS',

    'footer.slogan': '善假于物，以简驭繁。<br>中小企业智能工作流自动化专家。',
    'footer.product': '产品',
    'footer.features': '核心功能',
    'footer.pricing': '定价',
    'footer.docs': '使用文档',
    'footer.changelog': '更新日志',
    'footer.resources': '资源',
    'footer.quickstart': '快速入门',
    'footer.templates': '模板市场',
    'footer.api': 'API 文档',
    'footer.community': '社区论坛',
    'footer.contact': '联系我们'
  }
};

// Current language
let currentLang = localStorage.getItem('tappo-lang') || 'en';

// Apply translations
function applyTranslations(lang) {
  const translations = i18n[lang];
  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    if (translations[key]) {
      if (el.tagName === 'INPUT' || el.tagName === 'TEXTAREA') {
        el.placeholder = translations[key];
      } else {
        el.innerHTML = translations[key];
      }
    }
  });

  // Update html lang attribute
  document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';

  // Update lang switch button text
  const langText = document.querySelector('.lang-text');
  if (langText) {
    langText.textContent = lang === 'en' ? '中文' : 'EN';
  }

  // Update page title
  document.title = lang === 'zh'
    ? 'Tappo - 善假于物，以简驭繁 | 智能工作流自动化'
    : 'Tappo - Intelligent Workflow Automation';
}

// Toggle language
function toggleLang() {
  currentLang = currentLang === 'en' ? 'zh' : 'en';
  localStorage.setItem('tappo-lang', currentLang);
  applyTranslations(currentLang);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
  applyTranslations(currentLang);
});

// Smooth scroll for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', function (e) {
    e.preventDefault();
    const target = document.querySelector(this.getAttribute('href'));
    if (target) {
      target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
});

// Navbar background on scroll
const nav = document.querySelector('.nav');
window.addEventListener('scroll', () => {
  if (window.scrollY > 50) {
    nav.classList.add('scrolled');
  } else {
    nav.classList.remove('scrolled');
  }
});

// Animate elements on scroll
const observerOptions = {
  threshold: 0.1,
  rootMargin: '0px 0px -50px 0px'
};

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.style.opacity = '1';
      entry.target.style.transform = 'translateY(0)';
    }
  });
}, observerOptions);

// Apply animation to cards and steps
document.querySelectorAll('.feature-card, .step, .pricing-card').forEach(el => {
  el.style.opacity = '0';
  el.style.transform = 'translateY(20px)';
  el.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
  observer.observe(el);
});