Tappo
/
TappoCloud


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tappo - Intelligent Workflow Automation</title>
  <meta name="description" content="Tappo is an intelligent workflow automation software for SMBs. Build automation visually with drag-and-drop and AI assistance. Data stays local, secure and private.">
  <meta name="keywords" content="workflow automation,RPA,browser automation,data collection,Feishu,DingTalk,WeCom">
  <link rel="alternate" hreflang="zh" href="zh/">
  <link rel="alternate" hreflang="en" href="./">
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="apple-touch-icon" href="icon.png">
</head>
<body>
  <!-- Navigation -->
  <nav class="nav">
    <div class="nav-container">
      <a href="#" class="logo">
        <img src="favicon.svg" alt="Tappo" class="logo-icon">
        <span class="logo-text">Tappo</span>
      </a>
      <div class="nav-links">
        <a href="#features">Features</a>
        <a href="#scenarios">Use Cases</a>
        <a href="#comparison">Why Tappo</a>
        <a href="#pricing">Pricing</a>
      </div>
      <div class="nav-actions">
        <a href="zh/" class="lang-switch" title="切换到中文">中文</a>
        <a href="#get-started" class="btn btn-primary btn-sm">Free Download</a>
      </div>
    </div>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <div class="hero-bg"></div>
    <div class="container">
      <div class="hero-content">
        <div class="badge">Zero Barrier • Data Security • China Localized</div>
        <h1>With the right tools,<br><span class="gradient-text">simplicity tames complexity</span></h1>
        <p class="hero-desc">Tappo is an intelligent workflow automation software for SMBs. Build automation visually with drag-and-drop and AI assistance — no coding required.</p>
        <div class="hero-actions">
          <a href="#get-started" class="btn btn-primary btn-lg">Get Started</a>
          <a href="#demo" class="btn btn-secondary btn-lg">
            <span class="play-icon">▶</span>
            Watch Demo
          </a>
        </div>
        <div class="hero-stats">
          <div class="stat">
            <span class="stat-value">100%</span>
            <span class="stat-label">Local Execution</span>
          </div>
          <div class="stat">
            <span class="stat-value">0</span>
            <span class="stat-label">Data to Cloud</span>
          </div>
          <div class="stat">
            <span class="stat-value">∞</span>
            <span class="stat-label">Workflows</span>
          </div>
        </div>
      </div>
      <div class="hero-visual">
        <div class="workflow-preview">
          <div class="workflow-node node-trigger">
            <span class="node-icon">⏰</span>
            <span>Schedule Trigger</span>
          </div>
          <div class="workflow-line"></div>
          <div class="workflow-node node-action">
            <span class="node-icon">🌐</span>
            <span>Open Browser</span>
          </div>
          <div class="workflow-line"></div>
          <div class="workflow-node node-action">
            <span class="node-icon">📊</span>
            <span>Extract Data</span>
          </div>
          <div class="workflow-line"></div>
          <div class="workflow-node node-action">
            <span class="node-icon">📝</span>
            <span>Sync to Feishu</span>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Core Highlights -->
  <section id="highlights" class="features">
    <div class="container">
      <div class="section-header">
        <h2>Why Choose<br><span class="gradient-text">Tappo</span></h2>
        <p>Three core advantages that make automation accessible</p>
      </div>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">🚀</div>
          <h3>Zero Barrier</h3>
          <p>No coding required. Describe your needs in natural language, AI generates workflows. Rich templates, one-click install — no Docker needed.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🔒</div>
          <h3>Data Security</h3>
          <p>All data stored locally. Your credentials never leave your machine. Offline capable, fully secure and under your control.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🌏</div>
          <h3>China Localized</h3>
          <p>Deep integration with Feishu, DingTalk, WeCom, and WeChat. Local support team with faster response times.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Use Cases / Scenarios -->
  <section id="scenarios" class="how-it-works">
    <div class="container">
      <div class="section-header">
        <h2>Say Goodbye to<br><span class="gradient-text">Repetitive Work</span></h2>
        <p>Tappo solves these pain points</p>
      </div>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">📥</div>
          <h3>Data Collection</h3>
          <p><strong>Pain:</strong> Manual data scraping from multiple platforms is time-consuming and error-prone.</p>
          <p><strong>Solution:</strong> Automated browser operations, scheduled scraping and data organization.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🔄</div>
          <h3>Cross-System Sync</h3>
          <p><strong>Pain:</strong> Data scattered across systems, manual copy-paste required.</p>
          <p><strong>Solution:</strong> Workflows connect multiple systems, automatic data synchronization.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📊</div>
          <h3>Report Generation</h3>
          <p><strong>Pain:</strong> Daily/weekly/monthly reports created repeatedly, wasting time.</p>
          <p><strong>Solution:</strong> Auto-collect data, generate beautiful charts, scheduled delivery.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Features -->
  <section id="features" class="features">
    <div class="container">
      <div class="section-header">
        <h2>Powerful Features<br><span class="gradient-text">At Your Fingertips</span></h2>
      </div>
      <div class="features-grid">
        <div class="feature-card">
          <div class="feature-icon">🎨</div>
          <h3>Visual Workflow Editor</h3>
          <p>WYSIWYG drag-and-drop interface to build complex business logic without writing code.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🤖</div>
          <h3>AI-Powered Generation</h3>
          <p>Tell AI what you want, it builds complete workflow scripts. True natural language programming.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🌐</div>
          <h3>Browser Automation</h3>
          <p>Operate browsers like a human — auto click, input, extract web data. Supports complex interactions.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">⏰</div>
          <h3>Scheduled Tasks</h3>
          <p>Flexible scheduling for daily reports, weekly summaries, and periodic data sync tasks.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📦</div>
          <h3>Template Marketplace</h3>
          <p>Rich pre-built templates covering common scenarios. One-click import, instant productivity.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📈</div>
          <h3>Charts & Reports</h3>
          <p>Built-in chart generation module. Transform collected data into visual reports with multiple chart types.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Comparison -->
  <section id="comparison" class="architecture">
    <div class="container">
      <div class="section-header">
        <h2>Compared to Traditional Solutions<br><span class="gradient-text">Clear Advantages</span></h2>
      </div>
      <div class="comparison-table" style="overflow-x: auto;">
        <table style="width: 100%; border-collapse: collapse; background: var(--bg-primary); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);">
          <thead>
            <tr style="background: var(--gradient-btn); color: #fff;">
              <th style="padding: 20px; text-align: left; font-weight: 600;">Dimension</th>
              <th style="padding: 20px; text-align: left; opacity: 0.9;">Traditional</th>
              <th style="padding: 20px; text-align: left; font-size: 1.1rem;">Tappo</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); font-weight: 500;">Installation</td>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary);">Docker deployment, technical skills required</td>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--accent-blue);">One-click installer</td>
            </tr>
            <tr>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); font-weight: 500;">Learning Curve</td>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary);">Programming/scripting knowledge needed</td>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--accent-blue);">Natural language workflow generation</td>
            </tr>
            <tr>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); font-weight: 500;">Localization</td>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary);">International products, poor local fit</td>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--accent-blue);">Deep China ecosystem integration</td>
            </tr>
            <tr>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); font-weight: 500;">Data Security</td>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary);">Depends on cloud or complex deployment</td>
              <td style="padding: 18px 20px; border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--accent-blue);">100% local data storage</td>
            </tr>
            <tr>
              <td style="padding: 18px 20px; font-weight: 500;">Support</td>
              <td style="padding: 18px 20px; color: var(--text-secondary);">English community-based</td>
              <td style="padding: 18px 20px; font-weight: 600; color: var(--accent-blue);">Local support team</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>

  <!-- Architecture -->
  <section class="how-it-works">
    <div class="container">
      <div class="arch-content">
        <div class="arch-text">
          <h2>Cloud Design.<br><span class="gradient-text">Local Power.</span></h2>
          <p>Tappo combines the convenience of cloud-based workflow design with the security of local execution.</p>
          <ul class="arch-list">
            <li><span class="check">✓</span> Design workflows anywhere, anytime</li>
            <li><span class="check">✓</span> Local execution with full system access</li>
            <li><span class="check">✓</span> Credentials never leave your machine</li>
            <li><span class="check">✓</span> Offline capable</li>
            <li><span class="check">✓</span> Optional: Cloud remote management</li>
          </ul>
        </div>
        <div class="arch-diagram">
          <div class="arch-box arch-cloud">
            <span class="arch-label">Cloud (Optional)</span>
            <div class="arch-item">Workflow Designer</div>
            <div class="arch-item">Remote Dashboard</div>
          </div>
          <div class="arch-arrow">↕</div>
          <div class="arch-box arch-local">
            <span class="arch-label">Local</span>
            <div class="arch-item">Workflow Engine</div>
            <div class="arch-item">Browser / System</div>
            <div class="arch-item">Your Data (100% Local)</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Pricing -->
  <section id="pricing" class="pricing">
    <div class="container">
      <div class="section-header">
        <h2>Flexible<br><span class="gradient-text">Pricing</span></h2>
        <p>Subscription + usage-based plans for different needs</p>
      </div>
      <div class="pricing-cards">
        <div class="pricing-card">
          <div class="pricing-header">
            <h3>Free</h3>
            <div class="price">$0<span>/month</span></div>
          </div>
          <ul class="pricing-features">
            <li><span class="check">✓</span> Core workflow features</li>
            <li><span class="check">✓</span> Local data storage</li>
            <li><span class="check">✓</span> AI workflow generation (limited)</li>
            <li><span class="check">✓</span> Community support</li>
          </ul>
          <a href="#get-started" class="btn btn-secondary btn-block">Free Download</a>
        </div>
        <div class="pricing-card featured">
          <div class="pricing-badge">Recommended</div>
          <div class="pricing-header">
            <h3>Enterprise</h3>
            <div class="price">Contact Us</div>
          </div>
          <ul class="pricing-features">
            <li><span class="check">✓</span> All Free features included</li>
            <li><span class="check">✓</span> AI workflow generation (higher quota)</li>
            <li><span class="check">✓</span> Dedicated support</li>
            <li><span class="check">✓</span> Script development assistance</li>
          </ul>
          <a href="mailto:support@tappo.dev" class="btn btn-primary btn-block">Contact Sales</a>
        </div>
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section id="get-started" class="cta">
    <div class="container">
      <div class="cta-content">
        <h2>Start Your Automation Journey</h2>
        <p>Join the Tappo community. Automate tedious work, unleash your creativity.</p>
        <a href="#" class="btn btn-primary btn-lg">Download Tappo Free</a>
        <p style="margin-top: 16px; font-size: 0.9rem; color: var(--text-muted);">Windows 10/11 • macOS</p>
      </div>
    </div>
  </section>

  <!-- Footer -->
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-brand">
          <a href="#" class="logo">
            <img src="favicon.svg" alt="Tappo" class="logo-icon">
            <span class="logo-text">Tappo</span>
          </a>
          <p>With the right tools, simplicity tames complexity.<br>Intelligent workflow automation for SMBs.</p>
        </div>
        <div class="footer-links">
          <div class="footer-col">
            <h4>Product</h4>
            <a href="#features">Features</a>
            <a href="#pricing">Pricing</a>
            <a href="#">Documentation</a>
            <a href="#">Changelog</a>
          </div>
          <div class="footer-col">
            <h4>Resources</h4>
            <a href="#">Quick Start</a>
            <a href="#">Templates</a>
            <a href="#">API Docs</a>
            <a href="#">Community</a>
          </div>
          <div class="footer-col">
            <h4>Contact</h4>
            <a href="https://tappo.dev" target="_blank">tappo.dev</a>
            <a href="mailto:support@tappo.dev">support@tappo.dev</a>
          </div>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2025 Tappo. All rights reserved.</p>
      </div>
    </div>
  </footer>

  <script src="script.js"></script>
</body>
</html>