<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
    <title>30 秒选豆 - ZHE'S COFFEE</title>
    <meta name="description" content="30 秒选豆测试 — 折石咖啡帮你根据口味偏好挑选最适合的精品咖啡豆。">
    <link rel="canonical" href="https://zhescoffee.com/quiz.html" />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="折石咖啡 ZHE'S COFFEE" />
    <meta property="og:title" content="30 秒选豆 — ZHE'S COFFEE" />
    <meta property="og:description" content="折石咖啡帮你根据口味偏好挑选最适合的精品咖啡豆。" />
    <meta property="og:url" content="https://zhescoffee.com/quiz.html" />
    <meta property="og:image" content="https://zhescoffee.com/img/zhes-logo.png" />
    <meta property="og:locale" content="zh_CN" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="30 秒选豆 — ZHE'S COFFEE" />
    <meta name="twitter:description" content="折石咖啡帮你根据口味偏好挑选最适合的精品咖啡豆。" />
    <meta name="twitter:image" content="https://zhescoffee.com/img/zhes-logo.png" />
    <link rel="icon" type="image/png" href="img/zhes-logo.png">
    <link rel="stylesheet" href="css/tailwind.css">
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "@id": "https://zhescoffee.com/#website",
      "url": "https://zhescoffee.com/",
      "name": "折石咖啡 ZHE'S COFFEE",
      "description": "上海欧焙客贸易旗下精品咖啡品牌。创始人江承哲，世界烘焙亚军。",
      "inLanguage": "zh-CN",
      "publisher": { "@id": "https://zhescoffee.com/#organization" }
    }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "@id": "https://zhescoffee.com/#organization",
      "name": "折石咖啡 ZHE'S COFFEE",
      "alternateName": ["ZHE'S COFFEE", "折石咖啡"],
      "url": "https://zhescoffee.com",
      "logo": "https://zhescoffee.com/img/zhes-logo.png",
      "legalName": "上海欧焙客贸易有限公司",
      "description": "折石咖啡 ZHE'S COFFEE — 上海欧焙客贸易有限公司旗下精品咖啡品牌。创始人江承哲为世界烘焙亚军、台湾烘焙冠军、SCA Diploma 持证人。提供精品咖啡零售、烘焙与订阅服务。",
      "slogan": "在坚硬现实中寻找精确诗意",
      "founder": { "@type": "Person", "name": "江承哲", "@id": "https://jiangchengzhe.com/#person" },
      "brand": { "@type": "Brand", "name": "ZHE'S COFFEE", "alternateName": "折石咖啡" },
      "subOrganization": {
        "@type": "Organization",
        "@id": "https://tastermatrix.com/#organization",
        "name": "解味视界 TasterMatrix",
        "alternateName": ["TasterMatrix", "解味视界"],
        "url": "https://tastermatrix.com"
      },
      "contactPoint": {
        "@type": "ContactPoint",
        "contactType": "customer support",
        "url": "https://zhescoffee.com/contact.html",
        "availableLanguage": ["zh-CN", "en"]
      },
      "areaServed": { "@type": "City", "name": "Shanghai" },
      "sameAs": ["https://zhescoffee.taobao.com"]
    }
    </script>
    <style>
        :root {
            --oatmeal: #E2DED0;
            --quartz: #F2F0E6;
            --ash: #4A4A4A;
            --slate: #7B8C96;
            --denim: #5A6B75;
            --line: rgba(74, 74, 74, 0.14);
            --quartz-vein: #FEFBF0;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            color: var(--ash);
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            background-color: var(--oatmeal);
            background-image:
                linear-gradient(170deg, rgba(255, 255, 255, 0.36) 0%, transparent 58%),
                linear-gradient(350deg, rgba(123, 140, 150, 0.14) 0%, transparent 62%),
                repeating-linear-gradient(90deg, rgba(74, 74, 74, 0.025) 0, rgba(74, 74, 74, 0.025) 1px, transparent 1px, transparent 96px);
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        button,
        select {
            font: inherit;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 20;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(74, 74, 74, 0.08);
            background: rgba(226, 222, 208, 0.84);
            backdrop-filter: blur(16px);
        }

        .brand-link {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 0.16em;
        }

        .brand-link img {
            width: 52px;
            height: 52px;
            object-fit: contain;
        }

        .nav-links {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
            color: rgba(74, 74, 74, 0.68);
            font-size: 13px;
        }

        .nav-links a {
            padding: 9px 11px;
            border: 1px solid rgba(90, 107, 117, 0.18);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.22);
        }

        .nav-links a[aria-current="page"] {
            color: #343434;
            border-color: rgba(90, 107, 117, 0.34);
            background: rgba(255, 255, 255, 0.38);
            box-shadow: inset 0 -2px 0 var(--quartz-vein);
            position: relative;
        }
        .nav-links a[aria-current="page"]::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 16px;
            height: 2px;
            background: var(--quartz-vein);
            border-radius: 1px;
        }

        .shell {
            width: min(1080px, calc(100% - 36px));
            margin: 0 auto;
            padding: 46px 0 80px;
        }

        .hero,
        .quiz-panel,
        .result-card,
        .assist-panel {
            border: 1px solid rgba(250, 246, 236, 0.62);
            border-radius: 8px;
            background: rgba(250, 246, 236, 0.82);
            box-shadow: 0 22px 56px rgba(74, 74, 74, 0.08);
            backdrop-filter: blur(12px);
        }

        .hero {
            padding: 34px;
        }

        .eyebrow {
            margin: 0 0 14px;
            color: var(--denim);
            font-size: 11px;
            font-weight: 800;
            letter-spacing: 0.24em;
            text-transform: uppercase;
        }
        .eyebrow::before {
            content: "";
            display: inline-block;
            width: 2px;
            height: 12px;
            background: var(--quartz-vein);
            margin-right: 10px;
            vertical-align: middle;
        }
        .eyebrow::after {
            content: "";
            display: block;
            width: 32px;
            height: 1px;
            background: var(--quartz-vein);
            margin-top: 8px;
        }

        h1 {
            margin: 0;
            color: #343434;
            font-size: clamp(34px, 7vw, 58px);
            line-height: 1.12;
        }

        .hero-copy {
            max-width: 760px;
            margin: 18px 0 0;
            color: rgba(74, 74, 74, 0.72);
            font-size: 16px;
            line-height: 1.85;
        }

        .quiz-panel {
            margin-top: 20px;
            padding: 24px;
        }

        .question-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        label {
            display: grid;
            gap: 8px;
            color: rgba(74, 74, 74, 0.76);
            font-size: 14px;
            font-weight: 700;
        }

        select {
            width: 100%;
            min-height: 48px;
            padding: 0 12px;
            border: 1px solid rgba(90, 107, 117, 0.24);
            border-radius: 8px;
            color: var(--ash);
            background: rgba(255, 255, 255, 0.38);
        }

        .action-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 20px;
        }

        .action {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 46px;
            padding: 12px 16px;
            border: 1px solid rgba(90, 107, 117, 0.26);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.3);
            color: var(--denim);
            font-size: 13px;
            font-weight: 800;
            letter-spacing: 0.08em;
            cursor: pointer;
        }

        .action.primary {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, var(--slate), var(--denim));
        }

        .results {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 16px;
            margin-top: 20px;
        }

        .result-card,
        .assist-panel {
            padding: 20px;
        }

        .result-card h2,
        .assist-panel h2 {
            margin: 0 0 8px;
            color: #373737;
            font-size: 21px;
        }

        .result-card p,
        .assist-panel p {
            margin: 0 0 12px;
            color: rgba(74, 74, 74, 0.7);
            font-size: 14px;
            line-height: 1.72;
        }

        .price {
            color: var(--denim);
            font-size: 24px;
            font-weight: 900;
        }

        .result-label {
            display: inline-flex;
            margin-bottom: 10px;
            padding: 5px 8px;
            border-radius: 999px;
            background: rgba(90, 107, 117, 0.12);
            color: var(--denim);
            font-size: 12px;
            font-weight: 800;
        }

        .reason-list {
            margin: 12px 0;
            padding-left: 18px;
            color: rgba(74, 74, 74, 0.72);
            font-size: 13px;
            line-height: 1.65;
        }

        .caution {
            min-height: 34px;
            margin: 12px 0;
            padding: 8px 10px;
            border: 1px solid rgba(102, 114, 96, 0.2);
            border-radius: 8px;
            color: rgba(74, 74, 74, 0.72);
            background: rgba(255, 255, 255, 0.28);
            font-size: 13px;
            line-height: 1.45;
        }

        .empty {
            display: none;
            margin-top: 20px;
            padding: 20px;
            border: 1px solid var(--line);
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.28);
            color: rgba(74, 74, 74, 0.66);
        }

        .assist-panel {
            margin-top: 16px;
        }

        .footer {
            margin-top: 32px;
            color: rgba(74, 74, 74, 0.5);
            font-size: 12px;
            text-align: center;
        }

        @media (max-width: 900px) {
            .results,
            .question-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 720px) {
            .site-header {
                align-items: flex-start;
                flex-direction: column;
            }

            .nav-links {
                justify-content: flex-start;
            }

            .hero {
                padding: 24px;
            }
        }
        .hero, .quiz-panel, .result-card, .assist-panel {
            border-left: 2px solid var(--quartz-vein);
        }
    </style>
</head>
<body>
    <header class="site-header">
        <a href="/?src=site_nav" class="brand-link" aria-label="返回 ZHE'S COFFEE 首页">
            <img src="img/zhes-logo.png" alt="ZHE'S COFFEE Logo">
            <span>ZHE'S COFFEE</span>
        </a>
        <nav class="nav-links" aria-label="主导航">
            <a href="products.html?src=site_nav">豆单</a>
            <a href="quiz.html?src=site_nav" aria-current="page">帮我选豆</a>
<a href="monthly-beans.html?src=site_nav">月度补给</a>
<a href="articles.html?src=site_nav">专栏</a>
<a href="account.html?src=site_nav">登录/补给</a>
            <a href="contact.html?src=site_nav">联系</a>
        </nav>
    </header>

    <main class="shell">
        <section class="hero">
            <p class="eyebrow">Coffee Selector</p>
            <h1>30 秒选豆</h1>
            <p class="hero-copy">不用看完所有豆单。告诉我们使用场景、器具、风味偏好、预算和磨粉需求，先得到 3 款适合的折石咖啡。确认后可复制完整需求，添加客服微信 Lexi806，或到淘宝付款。</p>
        </section>

        <section class="quiz-panel" aria-label="选豆问题">
            <div class="question-grid">
                <label>
                    使用场景
                    <select id="scene-select" data-scenario-select>
                        <option value="daily_easy">每天喝，少纠结</option>
                        <option value="filter_fruity">手冲果香，想喝明亮</option>
                        <option value="low_acid_comfort">低酸顺口，怕太刺激</option>
                        <option value="milk_espresso">奶咖/意式家用</option>
                        <option value="office_auto">办公室/全自动咖啡机</option>
                        <option value="iced_americano">冰美式/冷萃/清爽喝法</option>
                        <option value="gift">送礼，需要稳和体面</option>
                        <option value="wow_special">想喝特别，有记忆点</option>
                        <option value="cafe_commercial">咖啡店/商用测试</option>
                    </select>
                </label>
                <label>
                    器具
                    <select id="equipment-select">
                        <option value="hand_pour">手冲/滤杯</option>
                        <option value="filter">滴滤/法压/聪明杯</option>
                        <option value="home_espresso">家用意式机</option>
                        <option value="moka">摩卡壶</option>
                        <option value="auto_machine">全自动咖啡机</option>
                        <option value="commercial">商用意式机</option>
                        <option value="cold">冷萃/冰美式</option>
                        <option value="not_sure">还不确定</option>
                    </select>
                </label>
                <label>
                    风味偏好
                    <select id="taste-select">
                        <option value="low_acid_sweet">低酸、甜、顺口</option>
                        <option value="chocolate_caramel">巧克力、焦糖、坚果</option>
                        <option value="fruit_tea">果香、红茶、清爽</option>
                        <option value="floral_geisha">花香、瑰夏、精致</option>
                        <option value="fermented_floral">发酵感、酒香、记忆点</option>
                        <option value="balanced_elegant">平衡、高质感、送礼稳</option>
                    </select>
                </label>
                <label>
                    预算
                    <select id="budget-select">
                        <option value="daily">100 元以内或口粮优先</option>
                        <option value="mid">100-180 元</option>
                        <option value="special">180-300 元</option>
                        <option value="premium">300-600 元</option>
                        <option value="rare">600 元以上也可以</option>
                    </select>
                </label>
                <label>
                    磨粉
                    <select id="grind-select">
                        <option value="beans">整豆</option>
                        <option value="ground">需要磨粉</option>
                        <option value="ask">请客服确认是否磨粉</option>
                    </select>
                </label>
            </div>
            <div class="action-row">
                <button class="action primary" type="button" id="recommend-button">生成推荐</button>
                <a class="action" href="products.html?src=quiz_catalog">查看完整豆单</a>
                <a class="action" href="contact.html?src=quiz_contact">问客服</a>
            </div>
        </section>

        <section class="results" id="results" aria-live="polite"></section>
        <div class="empty" id="empty-state">暂时没有匹配结果，请直接联系官方客服微信 Lexi806。</div>

        <section class="assist-panel">
            <h2>下一步</h2>
            <p>复制推荐款的下单备注，发给客服微信 Lexi806 确认是否磨粉；也可以直接去淘宝付款，备注里写推荐款名称。</p>
            <div class="action-row">
                <button class="action primary" type="button" data-copy="Lexi806">复制客服微信 Lexi806</button>
                <a class="action primary" href="https://zhescoffee.taobao.com" target="_blank" rel="noopener">淘宝付款</a>
                <a class="action" href="monthly-beans.html?src=quiz_monthly">看看月度补给</a>
            </div>
        </section>

        <p class="footer">© 2026 ZHE'S COFFEE · 上海欧焙客贸易有限公司</p>
    </main>

    <script src="js/bean-selector.js"></script>
    <script src="js/quiz-page.js"></script>
</body>
</html>
