<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8" />
  <script src="./theme.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>毛孩新手村 — 100種寵物品種百科 | 台灣最完整飼養知識平台</title>
  <meta name="description" content="台灣最完整的寵物知識平台：100種寵物品種百科（犬貓爬蟲鳥類水族）、25篇深度飼養知識、品種配對測驗、急救指南、禁忌食物、訓練教學。從新手到老手一站搞懂。" />
  <meta name="keywords" content="寵物品種,養狗,養貓,寵物飼養,寵物知識,寵物百科,柴犬,法鬥,布偶貓,英短,倉鼠,爬蟲,水族,台灣寵物" />
  <link rel="canonical" href="https://tailpedia.com/" />
  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:title" content="毛孩新手村 — 100種品種百科 | 台灣最完整寵物知識平台" />
  <meta property="og:description" content="100種寵物品種百科、25篇飼養知識、品種配對測驗、急救指南。犬貓爬蟲鳥類水族一站式飼養知識。" />
  <meta property="og:url" content="https://tailpedia.com/" />
  <meta property="og:site_name" content="毛孩新手村" />
  <meta property="og:locale" content="zh_TW" />
  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="毛孩新手村 — 100種品種百科 | 寵物飼養知識平台" />
  <meta name="twitter:description" content="台灣最完整：100種品種百科、25篇飼養知識、配對測驗。犬貓特殊寵物一站式知識。" />
  <!-- PWA -->
  <meta name="theme-color" content="#0f0e13" />
  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"WebSite","name":"毛孩新手村","alternateName":"Pet Planet TW","url":"https://tailpedia.com/","description":"台灣最完整的寵物知識平台","inLanguage":"zh-TW","potentialAction":{"@type":"SearchAction","target":"https://tailpedia.com/?q={search_term_string}","query-input":"required name=search_term_string"}}
  </script>
  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"Organization","name":"毛孩新手村","url":"https://tailpedia.com/","logo":"https://tailpedia.com/images/logo.png","sameAs":[]}
  </script>
  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"毛孩新手村","item":"https://tailpedia.com/"}]}
  </script>
  <!-- FAQ Structured Data for AEO -->
  <script type="application/ld+json">
  {"@context":"https://schema.org","@type":"FAQPage","mainEntity":[
    {"@type":"Question","name":"新手養狗推薦哪些品種？","acceptedAnswer":{"@type":"Answer","text":"推薦黃金獵犬、拉布拉多、米格魯、柯基等個性溫順且飼養難度較低的品種。可使用本站配對測驗找到最適合您的狗狗。"}},
    {"@type":"Question","name":"養貓和養狗哪個比較適合上班族？","acceptedAnswer":{"@type":"Answer","text":"貓咪通常較適合上班族，因為牠們獨立性強、不需要每天遛。推薦英國短毛貓、美國短毛貓等飼養難度低的品種。"}},
    {"@type":"Question","name":"台灣養寵物需要注意哪些法規？","acceptedAnswer":{"@type":"Answer","text":"台灣《動物保護法》規定寵物需登記晶片、施打狂犬病疫苗、禁止棄養。特定犬隻需繫繩及配戴口罩。詳見本站法規指南。"}},
    {"@type":"Question","name":"寵物飼養難度怎麼看？","acceptedAnswer":{"@type":"Answer","text":"本站使用1-5星評分：1星最容易（如米克斯貓）、5星需專業經驗（如變色龍、非洲灰鸚鵡）。評分考量運動需求、飲食複雜度、醫療費用、環境設備。"}},
    {"@type":"Question","name":"養一隻狗一個月要花多少錢？","acceptedAnswer":{"@type":"Answer","text":"依體型不同，小型犬約NT$2,100-4,400/月，中型犬NT$3,400-6,700/月，大型犬NT$5,200-10,700/月。費用含飼料、醫療、美容、用品、保險。可使用本站花費計算機取得詳細估算。"}},
    {"@type":"Question","name":"貓咪每天要吃多少飼料？","acceptedAnswer":{"@type":"Answer","text":"依體重而異。一般成貓（4kg）每日約50-80g乾糧，熱量需求約200-350kcal。可使用本站互動餵食指南輸入品種與體重取得精確建議。"}},
    {"@type":"Question","name":"哪裡可以領養寵物？","acceptedAnswer":{"@type":"Answer","text":"台灣主要管道：全國動物收容管理系統（官方）、台灣認養地圖（最大民間平台）、各縣市動物之家。本站領養資源頁面提供完整連結。"}},
    {"@type":"Question","name":"第一次養寵物需要準備什麼？","acceptedAnswer":{"@type":"Answer","text":"基本配備：飼料碗、飲水器、睡床/籠子、外出用品（牽繩或外出包）、清潔用品。建議預約獸醫做初次健檢和疫苗諮詢。詳見本站新手懶人包。"}}
  ]}
  </script>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="stylesheet" href="css/nav.css" />
  <link rel="stylesheet" href="./style.css" />
</head>
<body>
  <!-- ========== LOADING SCREEN ========== -->
  <div class="page-loader" id="pageLoader">
    <div class="loader-ring">
      <div class="loader-paw p1">🐾</div>
      <div class="loader-paw p2">🐾</div>
      <div class="loader-paw p3">🐾</div>
      <div class="loader-paw p4">🐾</div>
    </div>
    <div class="loader-text">毛孩新手村</div>
    <div class="loader-sub">正在準備你的寵物知識宇宙 ✨</div>
  </div>
  <!-- ========== NAV ========== -->
  <div id="nav-mount"></div>
  <script src="js/nav-component.js"></script>
<!-- ========== HERO ========== -->
  <header class="hero" id="hero">
    <div class="hero-bg">
      <div class="hero-particles" id="heroParticles"></div>
    </div>
    <div class="hero-content">
      <p class="hero-badge" data-i18n="site.badge">🌟 台灣最完整寵物知識平台</p>
      <h1 class="hero-title">
        <span class="hero-title-line" data-i18n="hero.title.1">探索你的</span>
        <span class="hero-title-line hero-title-accent" data-i18n="hero.title.2">毛孩世界</span>
      </h1>
      <p class="hero-subtitle" data-i18n="hero.subtitle">滑過即知曉、點擊即深入 — 不用跳頁就能探索所有寵物知識</p>
      <div class="hero-search" id="heroSearch">
        <div class="search-icon">🔍</div>
        <input type="text" class="search-input" id="searchInput" placeholder="搜尋品種、飼養方法、疾病..." autocomplete="off" />
        <div class="search-results" id="searchResults"></div>
      </div>
      <div class="hero-stats">
        <div class="stat-item">
          <span class="stat-number" data-count="100">0</span>
          <span class="stat-label" data-i18n="hero.stat.breeds">寵物品種</span>
        </div>
        <div class="stat-item">
          <span class="stat-number" data-count="60">0</span>
          <span class="stat-label" data-i18n="hero.stat.articles">知識文章</span>
        </div>
        <div class="stat-item">
          <span class="stat-number" data-count="103">0</span>
          <span class="stat-label" data-i18n="hero.stat.stories">飼主趣事</span>
        </div>
      </div>
    </div>
    <div class="hero-scroll-hint" id="scrollHint">
      <span data-i18n="hero.scroll_hint">向下探索</span>
      <div class="scroll-arrow"></div>
    </div>
  </header>

  <!-- ========== CATEGORY TABS ========== -->
  <section class="category-section" id="breeds" aria-label="寵物品種百科">
    <div class="section-header">
      <h2 class="section-title" data-i18n="breeds.title">品種百科</h2>
      <p class="section-desc" data-i18n="breeds.desc">100 種寵物完整飼養指南，點擊深入探索</p>
    </div>

    <div class="category-tabs" id="categoryTabs">
      <button class="cat-tab active" data-category="dogs">
        <span class="tab-icon">🐕</span>
        <span class="tab-label" data-i18n="tab.dogs">狗狗</span>
        <span class="tab-count" id="countDogs"></span>
      </button>
      <button class="cat-tab" data-category="cats">
        <span class="tab-icon">🐈</span>
        <span class="tab-label" data-i18n="tab.cats">貓咪</span>
        <span class="tab-count" id="countCats"></span>
      </button>
      <button class="cat-tab" data-category="exotic">
        <span class="tab-icon">🐹</span>
        <span class="tab-label" data-i18n="tab.exotic">特殊寵物</span>
        <span class="tab-count" id="countExotic"></span>
      </button>
    </div>

    <!-- Filter / Sort Bar -->
    <div class="breed-filter-bar" id="breedFilterBar">
      <div class="filter-group">
        <label class="filter-label">🔍 篩選</label>
        <select class="filter-select" id="filterSize">
          <option value="">全部體型</option>
          <option value="迷你">迷你</option>
          <option value="小型">小型</option>
          <option value="中小型">中小型</option>
          <option value="中型">中型</option>
          <option value="中大型">中大型</option>
          <option value="大型">大型</option>
          <option value="超大型">超大型</option>
        </select>
        <select class="filter-select" id="filterDifficulty">
          <option value="">全部難度</option>
          <option value="1">★ 極簡單</option>
          <option value="2">★★ 簡單</option>
          <option value="3">★★★ 適中</option>
          <option value="4">★★★★ 困難</option>
          <option value="5">★★★★★ 專家</option>
        </select>
      </div>
      <div class="filter-group">
        <label class="filter-label">↕️ 排序</label>
        <select class="filter-select" id="sortBy">
          <option value="popularity" selected>🔥 熱門程度</option>
          <option value="name">名稱 A→Z</option>
          <option value="difficulty-asc">難度 低→高</option>
          <option value="difficulty-desc">難度 高→低</option>
          <option value="lifespan-desc">壽命 長→短</option>
          <option value="lifespan-asc">壽命 短→長</option>
        </select>
      </div>
      <span class="filter-result-count" id="filterResultCount"></span>
    </div>

    <!-- ========== BREED CARDS GRID ========== -->
    <div class="breed-grid" id="breedGrid">
      <!-- Cards injected by JS -->
    </div>
    <div class="show-more-wrap" id="showMoreWrap">
      <button class="show-more-btn" id="showMoreBtn">
        <span class="show-more-text">查看全部</span>
        <span class="show-more-icon">↓</span>
      </button>
    </div>
  </section>

  <!-- ========== BREED QUIZ (moved before compare for better decision flow) ========== -->
  <section class="quiz-section" id="quiz">
    <div class="quiz-intro">
      <div class="quiz-intro-icon">🎯</div>
      <h2 class="section-title" data-i18n="quiz.title">哪種寵物最適合你？</h2>
      <p class="section-desc" data-i18n="quiz.desc">回答 10 個問題，AI 幫你找到命中注定的寵物夥伴</p>
      <button class="quiz-start-btn" id="quizStartBtn" data-i18n="quiz.start">開始配對測驗 →</button>
    </div>
  </section>

  <!-- Quiz Modal -->
  <div class="quiz-modal" id="quizModal">
    <button class="quiz-modal-close" id="quizCloseBtn">✕</button>
    <div class="quiz-progress">
      <div class="quiz-progress-bar" id="quizProgressBar"></div>
      <span class="quiz-progress-text" id="quizProgressText">1 / 10</span>
    </div>
    <div class="quiz-body" id="quizBody"></div>
    <div class="quiz-result" id="quizResult"></div>
  </div>

  <!-- ========== BREED COMPARISON ========== -->
  <section class="compare-section" id="compare" aria-label="品種比較工具">
    <div class="section-header">
      <h2 class="section-title" data-i18n="compare.title">品種比較工具</h2>
      <p class="section-desc" data-i18n="compare.desc">選擇兩個品種，視覺化對比找出最適合你的寵物</p>
    </div>
    <div class="compare-selectors">
      <div class="compare-select-wrap">
        <label class="compare-label">品種 A</label>
        <div class="compare-dropdown" id="compareDropA">
          <button class="compare-dropdown-btn" id="compareSelA"><span class="compare-placeholder">選擇品種...</span></button>
          <div class="compare-dropdown-list" id="compareListA"></div>
        </div>
      </div>
      <div class="compare-vs">VS</div>
      <div class="compare-select-wrap">
        <label class="compare-label">品種 B</label>
        <div class="compare-dropdown" id="compareDropB">
          <button class="compare-dropdown-btn" id="compareSelB"><span class="compare-placeholder">選擇品種...</span></button>
          <div class="compare-dropdown-list" id="compareListB"></div>
        </div>
      </div>
    </div>
    <div class="compare-result" id="compareResult">
      <div class="compare-empty">
        <span class="compare-empty-icon">🔍</span>
        <p>選擇兩個品種開始比較</p>
        <div class="compare-shortcuts">
          <p class="compare-shortcuts-label">🔥 熱門比較</p>
          <div class="compare-shortcuts-btns">
            <button class="compare-shortcut-btn" data-a="shiba" data-b="corgi">柴犬 vs 柯基</button>
            <button class="compare-shortcut-btn" data-a="ragdoll" data-b="british-shorthair">布偶 vs 英短</button>
            <button class="compare-shortcut-btn" data-a="goldfish" data-b="betta">金魚 vs 鬥魚</button>
          </div>
        </div>
      </div>
    </div>
  </section>


  <!-- ========== ADOPTION RESOURCES ========== -->
  <section class="adoption-section" id="adoption" aria-label="領養資源">
    <div class="section-header">
      <h2 class="section-title">🏠 領養代替購買</h2>
      <p class="section-desc">台灣各地收容所與認養平台，給牠們一個溫暖的家</p>
    </div>
    <div class="adoption-grid" id="adoptionGrid"></div>
  </section>

  <!-- ========== PET STORIES ========== -->
  <section class="stories-section" id="stories" aria-label="飼主趣事分享">
    <div class="section-header">
      <h2 class="section-title" data-i18n="stories.title">飼主趣事分享</h2>
      <p class="section-desc" data-i18n="stories.desc">毛孩爸媽的真實日常 — 歡笑、感動，還有翻白眼的瞬間</p>
      <p class="section-disclaimer" data-i18n="stories.disclaimer">📌 趣事內容收集自網路社群，經小編簡單編排後刊出</p>
    </div>
    <div class="stories-filter" id="storiesFilter">
      <button class="story-filter-btn active" data-story-filter="all">🐾 全部</button>
      <button class="story-filter-btn" data-story-filter="dogs">🐕 狗狗</button>
      <button class="story-filter-btn" data-story-filter="cats">🐈 貓咪</button>
      <button class="story-filter-btn" data-story-filter="exotic">🐹 特殊寵物</button>
    </div>
    <div class="stories-grid" id="storiesGrid">
      <!-- Story cards injected by JS -->
    </div>
    <div class="show-more-wrap" id="storiesShowMoreWrap">
      <button class="show-more-btn" id="storiesShowMoreBtn">
        <span class="show-more-text">查看全部趣事</span>
        <span class="show-more-icon">↓</span>
      </button>
    </div>
  </section>

  <!-- ========== OVERLAY PANEL ========== -->
  <div class="overlay-backdrop" id="overlayBackdrop"></div>
  <div class="overlay-panel" id="overlayPanel">
    <button class="overlay-close" id="overlayClose" aria-label="關閉">✕</button>
    <div class="overlay-hero" id="overlayHero">
      <div class="overlay-hero-img" id="overlayHeroImg"></div>
      <div class="overlay-hero-info">
        <h2 class="overlay-breed-name" id="overlayBreedName"></h2>
        <div class="overlay-breed-tags" id="overlayBreedTags"></div>
        <div class="overlay-breed-stats" id="overlayBreedStats"></div>
      </div>
    </div>
    <div class="overlay-tabs" id="overlayTabs">
      <button class="ov-tab active" data-ov-tab="care">🏠 飼養方法</button>
      <button class="ov-tab" data-ov-tab="diet">🍖 飲食營養</button>
      <button class="ov-tab" data-ov-tab="health">🩺 健康照護</button>
      <button class="ov-tab" data-ov-tab="timeline">📅 成長階段</button>
      <button class="ov-tab" data-ov-tab="stories">💬 飼主趣事</button>
      <button class="ov-tab" data-ov-tab="products">🛒 推薦商品</button>
    </div>
    <div class="overlay-body" id="overlayBody">
      <!-- Tab content injected by JS -->
    </div>
  </div>

  <!-- ========== TOOLTIP ========== -->
  <div class="tooltip" id="globalTooltip"></div>

  <!-- ========== FOOTER ========== -->
  <footer class="main-footer">
    <div class="footer-inner">
      <div class="footer-brand">
        <span class="logo-icon">🐾</span>
        <span class="logo-text" data-i18n="site.name">毛孩新手村</span>
        <p class="footer-tagline" data-i18n="footer.tagline">探索你的寵物知識宇宙</p>
      </div>
      <div class="footer-links">
        <div class="footer-col">
          <h4>探索</h4>
          <a href="#breeds">品種百科</a>
          <a href="#quiz">配對測驗</a>
          <a href="#compare">品種比較</a>
          <a href="#adoption">領養資源</a>
        </div>
        <div class="footer-col">
          <h4>工具</h4>
          <a href="/tools/cost.html">養寵物花費</a>
          <a href="/tools/feeding.html">每日餵食量</a>
          <a href="/tools/timeline.html">成長階段指南</a>
          <a href="/tools/age.html">寵物年齡換算</a>
        </div>
        <div class="footer-col">
          <h4>資源</h4>
          <a href="/resources/knowledge.html">新手必讀</a>
          <a href="/resources/regulations.html">寵物法規</a>
          <a href="/resources/products.html">寵物用品推薦</a>
        </div>
      </div>
    </div>
    <div class="footer-bottom">
      <p data-i18n="footer.copyright">© 2026 毛孩新手村 — 從入門到進階，陪你把毛孩養好</p>
    </div>
  </footer>

  <!-- Floating TOC -->
  <nav class="floating-toc" id="floatingNav" aria-label="頁面導航">
    <a href="#breeds" class="toc-item active" data-section="breeds">品種百科</a>
    <a href="#quiz" class="toc-item" data-section="quiz">配對測驗</a>
    <a href="#compare" class="toc-item" data-section="compare">品種比較</a>
    <a href="#adoption" class="toc-item" data-section="adoption">領養資源</a>
    <a href="#stories" class="toc-item" data-section="stories">飼主趣事</a>
  </nav>

  <!-- Back to Top -->
  <button class="back-to-top" id="backToTop" aria-label="回到頂部" title="回到頂部">↑</button>

  <!-- Data & Foundation -->
  <script src="./_generated/breeds-data.js"></script>
  <script src="./i18n.js"></script>
  <script src="./js/data-defaults.js"></script>
  <script src="./js/shared.js"></script>
  <!-- Feature Modules (each independently error-isolated) -->
  <script src="./js/loader.js"></script>
<script src="./js/hero.js"></script>
  <script src="./js/breeds.js"></script>
  <script src="./js/overlay.js"></script>
  <script src="./js/quiz.js"></script>
  <script src="./js/compare.js"></script>
  <script src="./js/stories.js"></script>
  <script src="./js/search.js"></script>
  <script src="./js/tools.js"></script>
<!-- Cloudflare Pages Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "18ba5ba25fb84ee2ad28efb4e4aece65"}'></script><!-- Cloudflare Pages Analytics --></body>
</html>
