<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Symdeslow Compare Tool Blog</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

<style>
/* 基本樣式 */
body {
  font-family: 'Inter', 'Roboto', sans-serif;
  background-color: #f4f6f9;
  color: #111;
  margin: 0;
  padding: 0;
  line-height: 1.6;
  scroll-behavior: smooth;
}
a { text-decoration: none; color: inherit; }
h1, h2, h3 { margin: 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* Header */
header {
  text-align: center;
  padding: 4rem 1rem 2rem;
  background: linear-gradient(90deg, #0070f3 0%, #00d4ff 100%);
  color: white;
}
header h1 { font-size: 2.5rem; font-weight: 700; margin-bottom: 0.5rem; }
header p { font-size: 1.15rem; max-width: 700px; margin: 0 auto 1.5rem; }
.hero-button {
  background: white;
  color: #0070f3;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: 8px;
  display: inline-block;
  margin-top: 1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hero-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Navigation */
nav ul {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
nav a {
  color: white;
  font-weight: 600;
  transition: color 0.3s;
}
nav a:hover { color: #ffe600; }

/* Sections */
section { padding: 4rem 0; }
section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #222;
  text-align: center;
}
section p {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 2rem;
}

/* Features 卡片 */
.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.feature-card {
  background: #ffffffcc; /* 半透明白色 */
  border-radius: 12px;
  padding: 2rem;
  flex: 1 1 250px;
  max-width: 300px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* Video */
.video-wrapper {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 2rem auto;
  aspect-ratio: 16 / 9; /* 自適應比例 */
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* Steps 卡片 */
.steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.step-card {
  background: #ffffffcc;
  border-radius: 12px;
  padding: 1.8rem;
  flex: 1 1 200px;
  max-width: 250px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  text-align: center;
}
.step-card h3 { font-size: 1.2rem; margin-bottom: 1rem; color: #0070f3; }

/* Share 區塊 */
.share-section {
  text-align: center;
  margin: 2rem 0 4rem;
  font-size: 1rem;
  color: #333;
}
.share-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: #222;
}
.share-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.share-buttons a {
  display: inline-block;
  padding: 0.6rem 1.6rem;
  border-radius: 8px;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  color: white;
  text-decoration: none;
}
.share-buttons a.facebook { background-color: #0070f3; }
.share-buttons a.facebook:hover {
  background-color: #005ecb;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}
.share-buttons a.twitter { background-color: #0070f3; }
.share-buttons a.twitter:hover {
  background-color: #005ecb;
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.2);
}

/* Blog 文章內容 */
.blog-content {
  max-width: 800px;
  margin: 0 auto 4rem;
  background: #ffffffcc; /* 半透明白色 */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  text-align: center; /* 全文置中 */
}
.blog-content h3 { color: #0070f3; margin-bottom: 1rem; text-align: center; }
.blog-content p { margin-bottom: 1rem; line-height: 1.8; text-align: center; }
.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin-bottom: 1rem; text-align: center; display: inline-block; }
.blog-content pre,
.blog-content code {
  background: #f0f4f8;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  display: block;
  margin: 0 auto 1.5rem; /* 這樣 <pre> 本體會置中 */
  max-width: 90%;       /* 不要滿版，視覺更舒適 */
  text-align: left;     /* 程式碼保持靠左，閱讀最佳 */
}


/* TOC */
.toc {
  background: #e7f3ff;
  border-left: 4px solid #0070f3;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
}
.toc h3 { margin-bottom: 1rem; color: #0070f3; font-size: 1.2rem; text-align: center; }
.toc ul { list-style: disc inside; padding-left: 0; }
.toc li { margin-bottom: 0.6rem; }
.toc a { color: #0070f3; transition: color 0.2s; }
.toc a:hover { text-decoration: underline; }

/* FAQ */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 900px;
  margin: 2rem auto 0;
}
.faq-card {
  background: #f0f4f8;
  border-left: 4px solid #0070f3;
  padding: 1.2rem 1.5rem;
  border-radius: 8px;
  text-align: center;
}
.faq-card strong { display: block; margin-bottom: 0.5rem; }

/* 新增：Blog 列表頁 CSS */
.blog-list {
  max-width: 800px;
  margin: 0 auto 4rem;
  padding: 2rem;
}
.blog-list li {
  background: #ffffffcc;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: transform 0.2s;
}
.blog-list li:hover { transform: translateY(-2px); }
.blog-list a { color: #0070f3; font-weight: 600; }



/* CTA Section */
.cta-section {
  text-align: center;
  background: #0070f3;
  color: white;
  padding: 4rem 1rem;
  border-radius: 12px;
  margin: 4rem 0;
}
.cta-section a.button {
  background: white;
  color: #0070f3;
  font-weight: 700;
  padding: 0.9rem 2rem;
  border-radius: 8px;
  display: inline-block;
  margin-top: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-section a.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem 0;
  font-size: 0.9rem;
  color: gray;
}

/* Responsive */
@media (max-width: 768px) {
  .features, .steps { flex-direction: column; align-items: center; }
  section p, pre, code, ul, ol, .blog-content { max-width: 100%; padding: 0.8rem; }
  .share-buttons {
    flex-direction: column;
    gap: 0.8rem;
  }
  .share-buttons a { width: 100%; max-width: 220px; margin: 0 auto; }
}
</style>
</head>
<body>

<header>
<h1>Symdeslow Compare Tool</h1>
<p>Automatically compare product lists or SKUs in Google Sheets.</p>
<a href="#features" class="hero-button">Get Started</a>
</header>

<nav>
<ul>
<li><a href="#features">Features</a></li>
<li><a href="#video">Demo</a></li>
<li><a href="#steps">Steps</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>

<section id="features">
<h2>Features</h2>
<div class="features">
<div class="feature-card">Direct column comparison</div>
<div class="feature-card">Key-based comparison</div>
<div class="feature-card">Multi-color highlighting</div>
</div>
</section>

<section id="video">
<h2>Demo Video</h2>
<div class="video-wrapper">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>
</div>
</section>

<section id="steps">
<h2>How It Works</h2>
<div class="steps">
<div class="step-card">
<h3>Step 1</h3>
Upload your Google Sheets data
</div>
<div class="step-card">
<h3>Step 2</h3>
Configure comparison rules
</div>
<div class="step-card">
<h3>Step 3</h3>
Generate highlighted report
</div>
</div>
</section>

<section class="share-section">
<h2>Share this page</h2>
<div class="share-buttons">
<a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=https://symdeslow-compare-tool.pages.dev" target="_blank">Share on Facebook</a>
<a class="twitter" href="https://twitter.com/intent/tweet?text=Symdeslow%20Compare%20Tool&url=https://symdeslow-compare-tool.pages.dev" target="_blank">Share on Twitter</a>
</div>
</section>

<section class="blog-content">
<h3>Table of Contents</h3>
<div class="toc" id="toc"></div>

<h3>10. Compare Product Lists or SKUs Automatically in Google Sheets</h3>
<p>For e-commerce, procurement, or inventory management, comparing large product lists can be tedious. Our Symdeslow Compare Tool automates this process within Google Sheets, highlighting differences and matches efficiently.</p>

<h3>Benefits</h3>
<ul>
<li>Save hours of manual work</li>
<li>Supports direct and key-based comparison</li>
<li>Highlights changes with multi-color coding</li>
</ul>

<h3>Example Usage</h3>
<p>Upload your 2024 and 2025 SKU sheets and let the tool highlight returned customers, new products, or missing items automatically:</p>
<pre><code>=IFNA(IF(VLOOKUP(A2, '2024'!A:A, 1, FALSE)=A2, "Returned customer"),"NEW in 2025")</code></pre>

<h3>Tips</h3>
<ol>
<li>Keep your SKU or product ID columns consistent.</li>
<li>Use proper headers for better comparison results.</li>
<li>Leverage the multi-color highlighting to track changes visually.</li>
</ol>
</section>

<section id="faq">
<h2>FAQ</h2>
<div class="faq-list">
<div class="faq-card"><strong>Q1:</strong> How do I start? <br> Upload your sheets and click compare.</div>
<div class="faq-card"><strong>Q2:</strong> Can I use multiple sheets? <br> Yes, both direct and key-based comparisons are supported.</div>
</div>
</section>

<section class="cta-section">
<h2>Get Your Copy</h2>
<a href="#" class="button">Purchase Now</a>
</section>

<footer>
&copy; 2025 Symdeslow Tools. All rights reserved.
</footer>

<script>
// 自動生成 TOC
const tocContainer = document.getElementById('toc');
const blogContent = document.querySelector('.blog-content');
const headings = blogContent.querySelectorAll('h3');

if (headings.length > 1) {
  const ul = document.createElement('ul');
  headings.forEach((h, i) => {
    if (i === 0) return; // skip TOC heading itself
    const id = `heading-${i}`;
    h.id = id;
    const li = document.createElement('li');
    const a = document.createElement('a');
    a.href = `#${id}`;
    a.textContent = h.textContent;
    li.appendChild(a);
    ul.appendChild(li);
  });
  tocContainer.appendChild(ul);
}
</script>

</body>
</html>
