<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <title>软包装工具箱</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
            background: #f5f6fa;
            color: #1a2634;
            padding: 16px 20px 30px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .app {
            max-width: 1000px;
            width: 100%;
        }
        .topbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0 18px 0;
            border-bottom: 1px solid #e8ecf2;
            margin-bottom: 18px;
        }
        .topbar .brand {
            font-size: 26px;
            font-weight: 700;
            color: #0b1a2b;
        }
        .topbar .wechat-btn {
            background: #07c160;
            color: #fff;
            border: none;
            border-radius: 40px;
            padding: 8px 20px 8px 16px;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: 0.2s;
            box-shadow: 0 2px 8px rgba(7, 193, 96, 0.2);
        }
        .topbar .wechat-btn:active {
            transform: scale(0.95);
        }
        .topbar .wechat-btn .icon {
            font-size: 20px;
            line-height: 1;
        }
        .tool-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-bottom: 20px;
        }
        .tool-grid .tool-card {
            background: #ffffff;
            border-radius: 18px;
            padding: 20px 8px 16px;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            border: 2px solid #eef1f6;
            cursor: pointer;
            transition: 0.15s;
            user-select: none;
        }
        .tool-grid .tool-card:active {
            transform: scale(0.96);
        }
        .tool-grid .tool-card.active {
            border-color: #2a7de1;
            background: #f6faff;
            box-shadow: 0 4px 16px rgba(42, 125, 225, 0.12);
        }
        .tool-grid .tool-card .emoji {
            font-size: 32px;
            display: block;
            margin-bottom: 4px;
        }
        .tool-grid .tool-card .label {
            font-size: 15px;
            font-weight: 600;
            color: #1a2a3f;
        }
        @media (max-width: 600px) {
            .tool-grid {
                grid-template-columns: repeat(3, 1fr);
                gap: 8px;
            }
            .tool-grid .tool-card {
                padding: 14px 4px 12px;
                border-radius: 14px;
            }
            .tool-grid .tool-card .emoji {
                font-size: 24px;
            }
            .tool-grid .tool-card .label {
                font-size: 12px;
            }
        }
        @media (max-width: 400px) {
            .tool-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        .panel {
            background: #ffffff;
            border-radius: 22px;
            padding: 24px 24px 20px;
            margin-bottom: 18px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
            border: 1px solid #eaedf3;
            display: none;
            animation: panelIn 0.2s ease;
        }
        .panel.open {
            display: block;
        }
        @keyframes panelIn {
            0% {
                opacity: 0;
                transform: translateY(6px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        .panel .panel-title {
            font-size: 20px;
            font-weight: 700;
            color: #0b1a2b;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .panel .panel-title .badge {
            font-size: 13px;
            font-weight: 400;
            color: #5d6f83;
            background: #eef2f7;
            padding: 0 14px;
            border-radius: 30px;
            line-height: 26px;
        }
        .row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 8px 14px;
            margin-bottom: 12px;
        }
        .row label {
            font-size: 15px;
            font-weight: 500;
            color: #2d4058;
            min-width: 56px;
        }
        .row input,
        .row select {
            padding: 10px 16px;
            border: 1px solid #dce1e9;
            border-radius: 12px;
            font-size: 16px;
            background: #ffffff;
            flex: 1 1 120px;
            min-width: 80px;
            transition: 0.15s;
            -webkit-appearance: none;
            appearance: none;
        }
        .row input:focus,
        .row select:focus {
            border-color: #2a7de1;
            outline: none;
            box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.08);
        }
        .row .unit {
            font-size: 14px;
            color: #7a8aa0;
        }
        .row .density-show {
            font-size: 14px;
            color: #2a7de1;
            font-weight: 500;
            background: #eef4ff;
            padding: 2px 14px;
            border-radius: 30px;
        }
        .btn {
            background: #2a7de1;
            color: #fff;
            border: none;
            padding: 14px 36px;
            border-radius: 40px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: 0.2s;
            margin-top: 6px;
            width: 100%;
        }
        .btn:active {
            transform: scale(0.97);
        }
        .result-box {
            background: #f4f7fd;
            border-radius: 14px;
            padding: 16px 20px;
            margin-top: 16px;
            border-left: 4px solid #2a7de1;
            font-size: 16px;
            color: #1a2a3f;
        }
        .result-box .num {
            font-weight: 700;
            color: #1a5bb5;
            font-size: 24px;
        }
        .result-box .sub {
            font-size: 14px;
            color: #5d6f83;
            margin-top: 4px;
        }
        .inline-hint {
            font-size: 14px;
            color: #7a8aa0;
            background: #f4f6fb;
            border-radius: 12px;
            padding: 12px 16px;
            margin-top: 14px;
            line-height: 1.7;
        }
        .inline-hint strong {
            color: #2d4058;
        }
        .layer-row {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 10px;
            margin-bottom: 8px;
        }
        .layer-row label {
            font-size: 14px;
            font-weight: 500;
            color: #2d4058;
            min-width: 36px;
        }
        .layer-row select {
            padding: 6px 12px;
            border: 1px solid #dce1e9;
            border-radius: 10px;
            font-size: 14px;
            background: #ffffff;
            flex: 1 1 80px;
            min-width: 60px;
        }
        .layer-row input {
            padding: 6px 12px;
            border: 1px solid #dce1e9;
            border-radius: 10px;
            font-size: 14px;
            background: #ffffff;
            width: 70px;
            flex: none;
        }
        .layer-row .unit {
            font-size: 13px;
            color: #7a8aa0;
        }
        .footer-toggle {
            display: flex;
            justify-content: center;
            margin: 8px 0 12px;
        }
        .footer-toggle button {
            background: transparent;
            border: 1px solid #dce1e9;
            border-radius: 40px;
            padding: 8px 24px;
            font-size: 14px;
            color: #5d6f83;
            cursor: pointer;
            transition: 0.2s;
            background: #fff;
        }
        .footer-toggle button:active {
            transform: scale(0.96);
        }
        .footer-toggle .arrow {
            display: inline-block;
            transition: transform 0.25s;
        }
        .footer-toggle .arrow.open {
            transform: rotate(180deg);
        }
        .footer-content {
            background: #ffffff;
            border-radius: 18px;
            padding: 0 20px;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease, padding 0.3s ease;
            border: 1px solid transparent;
        }
        .footer-content.open {
            max-height: 3000px;
            padding: 20px 20px 16px;
            border-color: #eaedf3;
        }
        .footer-content .section {
            margin-bottom: 16px;
        }
        .footer-content .section h4 {
            font-size: 15px;
            font-weight: 600;
            color: #0b1a2b;
            margin-bottom: 4px;
        }
        .footer-content .section p,
        .footer-content .section li {
            font-size: 14px;
            color: #3d5166;
            line-height: 1.7;
        }
        .footer-content .section ul {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            gap: 4px 18px;
            padding: 0;
        }
        .footer-content .section ul li::before {
            content: "· ";
            color: #2a7de1;
            font-weight: 700;
        }
        .footer-content .bag-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 4px 20px;
            font-size: 14px;
            color: #2d4058;
        }
        .footer-content .bag-grid .item {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }
        .footer-content .bag-grid .item .tag {
            font-weight: 600;
            color: #0b1a2b;
        }
        @media (max-width: 600px) {
            .footer-content .bag-grid {
                grid-template-columns: 1fr 1fr;
            }
        }
        .msg-box {
            background: #f8faff;
            border-radius: 16px;
            padding: 18px 20px;
            margin-top: 12px;
            border: 1px solid #eef2f9;
        }
        .msg-box textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #dce1e9;
            border-radius: 12px;
            font-size: 15px;
            font-family: inherit;
            resize: vertical;
            min-height: 80px;
            transition: 0.2s;
            background: #ffffff;
        }
        .msg-box textarea:focus {
            border-color: #2a7de1;
            outline: none;
            box-shadow: 0 0 0 3px rgba(42, 125, 225, 0.08);
        }
        .msg-box .row input {
            flex: 1 1 160px;
        }
        .msg-box .btn {
            width: auto;
            padding: 12px 40px;
            margin-top: 8px;
        }
        .wechat-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            align-items: center;
            justify-content: center;
            z-index: 999;
        }
        .wechat-modal.show {
            display: flex;
        }
        .wechat-modal .box {
            background: #fff;
            border-radius: 28px;
            padding: 30px 28px 24px;
            max-width: 340px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
            animation: modalIn 0.2s ease;
        }
        @keyframes modalIn {
            0% {
                opacity: 0;
                transform: scale(0.92);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }
        .wechat-modal .box .wx-id {
            font-size: 24px;
            font-weight: 700;
            color: #0b1a2b;
            background: #eef4ff;
            padding: 8px 0;
            border-radius: 12px;
            margin: 12px 0;
            letter-spacing: 1px;
        }
        .wechat-modal .box .hint {
            font-size: 14px;
            color: #5d6f83;
        }
        .wechat-modal .box .close-btn {
            margin-top: 16px;
            background: #eef2f8;
            border: none;
            padding: 8px 32px;
            border-radius: 40px;
            font-size: 15px;
            cursor: pointer;
            color: #1a2a3f;
        }
        .wechat-modal .box .close-btn:active {
            transform: scale(0.96);
        }
        .footer-note {
            text-align: center;
            font-size: 13px;
            color: #9aabbd;
            padding-top: 16px;
        }
        @media (max-width: 480px) {
            body {
                padding: 10px 12px 20px;
            }
            .topbar .brand {
                font-size: 18px;
            }
            .topbar .wechat-btn {
                font-size: 13px;
                padding: 4px 12px 4px 8px;
            }
            .panel {
                padding: 16px 14px;
                border-radius: 18px;
            }
            .panel .panel-title {
                font-size: 17px;
            }
            .row label {
                min-width: 40px;
                font-size: 13px;
            }
            .row input,
            .row select {
                font-size: 15px;
                padding: 8px 10px;
            }
            .btn {
                font-size: 16px;
                padding: 10px 20px;
            }
            .result-box .num {
                font-size: 20px;
            }
            .msg-box .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="app">

        <!-- ===== 顶栏 ===== -->
        <div class="topbar">
            <span class="brand">软包装工具箱</span>
            <button class="wechat-btn" onclick="showWechat()">
                <span class="icon">💬</span> 联系我
            </button>
        </div>

        <!-- ===== 工具卡片 ===== -->
        <div class="tool-grid">
            <div class="tool-card active" data-tool="1" onclick="switchTool(1)">
                <span class="emoji">📐</span>
                <span class="label">材料计算</span>
            </div>
            <div class="tool-card" data-tool="2" onclick="switchTool(2)">
                <span class="emoji">🎞️</span>
                <span class="label">卷膜计算</span>
            </div>
            <div class="tool-card" data-tool="3" onclick="switchTool(3)">
                <span class="emoji">🧪</span>
                <span class="label">胶水配比</span>
            </div>
            <div class="tool-card" data-tool="4" onclick="switchTool(4)">
                <span class="emoji">📏</span>
                <span class="label">版辊周长</span>
            </div>
            <div class="tool-card" data-tool="5" onclick="switchTool(5)">
                <span class="emoji">⚖️</span>
                <span class="label">袋子克重</span>
            </div>
        </div>

        <!-- ============================================================ -->
        <!-- 面板1: 材料计算 -->
        <!-- ============================================================ -->
        <div class="panel open" id="panel1">
            <div class="panel-title">📐 材料计算 <span class="badge">重量↔米数</span></div>

            <div style="background:#f6faff; border-radius:14px; padding:14px; margin-bottom:14px;">
                <div style="font-weight:600; font-size:15px; margin-bottom:8px;">⬇ 重量 → 米数</div>
                <div class="row">
                    <label>名称</label>
                    <select id="m1_mat" onchange="updateDensity('m1')">
                        <option value="1.39">PET</option>
                        <option value="1.41">VMPET</option>
                        <option value="2.70">铝箔</option>
                        <option value="1.14">尼龙</option>
                        <option value="0.925">PE</option>
                        <option value="0.91">BOPP</option>
                        <option value="0.91">CPP</option>
                        <option value="0.91">消光BOPP</option>
                    </select>
                </div>
                <div class="row">
                    <label></label>
                    <span class="density-show" id="m1_density">密度：1.39 g/cm³</span>
                </div>
                <div class="row"><label>宽度</label><input id="m1_w" value="500" /><span class="unit">mm</span></div>
                <div class="row"><label>厚度</label><input id="m1_t" value="0.012" /><span class="unit">mm</span></div>
                <div class="row"><label>重量</label><input id="m1_kg" value="50" /><span class="unit">kg</span></div>
                <button class="btn" onclick="calcMat1()">计算米数</button>
                <div class="result-box" id="res1">米数：<span class="num">—</span> m</div>
            </div>

            <div style="background:#f6faff; border-radius:14px; padding:14px;">
                <div style="font-weight:600; font-size:15px; margin-bottom:8px;">⬆ 米数 → 重量</div>
                <div class="row">
                    <label>名称</label>
                    <select id="m2_mat" onchange="updateDensity('m2')">
                        <option value="1.39">PET</option>
                        <option value="1.41">VMPET</option>
                        <option value="2.70">铝箔</option>
                        <option value="1.14">尼龙</option>
                        <option value="0.925">PE</option>
                        <option value="0.91">BOPP</option>
                        <option value="0.91">CPP</option>
                        <option value="0.91">消光BOPP</option>
                    </select>
                </div>
                <div class="row">
                    <label></label>
                    <span class="density-show" id="m2_density">密度：1.39 g/cm³</span>
                </div>
                <div class="row"><label>宽度</label><input id="m2_w" value="500" /><span class="unit">mm</span></div>
                <div class="row"><label>厚度</label><input id="m2_t" value="0.012" /><span class="unit">mm</span></div>
                <div class="row"><label>米数</label><input id="m2_m" value="12000" /><span class="unit">m</span></div>
                <button class="btn" onclick="calcMat2()">计算重量</button>
                <div class="result-box" id="res2">重量：<span class="num">—</span> kg</div>
            </div>

            <div class="inline-hint">
                <strong>公式</strong> 重量→米数：kg ÷ (宽度m × 厚度mm × 密度) ； 米数→重量：m × 宽度m × 厚度mm × 密度
            </div>
        </div>

        <!-- ============================================================ -->
        <!-- 面板2: 卷膜计算（最终修正版） -->
        <!-- ============================================================ -->
        <div class="panel" id="panel2">
            <div class="panel-title">🎞️ 卷膜计算 <span class="badge">直径↔长度</span></div>

            <div class="row"><label>纸芯内径</label><input id="r_core" value="76" style="max-width:160px;" /><span class="unit">mm</span></div>

            <div style="margin:8px 0 10px; display:flex; flex-wrap:wrap; gap:8px 20px;">
                <label style="font-weight:400; font-size:15px;"><input type="radio" name="rmode" value="d2l" checked onchange="toggleRMode()" /> 直径→长度</label>
                <label style="font-weight:400; font-size:15px;"><input type="radio" name="rmode" value="l2d" onchange="toggleRMode()" /> 长度→直径</label>
            </div>

            <div class="row" id="r_input_row"><label id="r_label">外径</label><input id="r_val" value="320" style="max-width:160px;" /><span class="unit" id="r_unit">mm</span></div>

            <div style="background:#f4f6fb; border-radius:12px; padding:12px 16px; margin:6px 0 12px;">
                <div class="layer-row"><label>层1</label>
                    <select id="rl1">
                        <option value="0">—</option>
                        <option value="PET">PET</option>
                        <option value="VMPET">VMPET</option>
                        <option value="铝箔">铝箔</option>
                        <option value="尼龙">尼龙</option>
                        <option value="PE" selected>PE</option>
                        <option value="BOPP">BOPP</option>
                        <option value="CPP">CPP</option>
                        <option value="哑光BOPP">哑光BOPP</option>
                        <option value="VMCPP">VMCPP</option>
                        <option value="40g牛皮纸">40g牛皮纸</option>
                    </select>
                    <input id="rt1" value="12" /><span class="unit">μm</span>
                </div>
                <div class="layer-row"><label>层2</label>
                    <select id="rl2">
                        <option value="0">—</option>
                        <option value="PET">PET</option>
                        <option value="VMPET">VMPET</option>
                        <option value="铝箔">铝箔</option>
                        <option value="尼龙">尼龙</option>
                        <option value="PE">PE</option>
                        <option value="BOPP" selected>BOPP</option>
                        <option value="CPP">CPP</option>
                        <option value="哑光BOPP">哑光BOPP</option>
                        <option value="VMCPP">VMCPP</option>
                        <option value="40g牛皮纸">40g牛皮纸</option>
                    </select>
                    <input id="rt2" value="12" /><span class="unit">μm</span>
                </div>
                <div class="layer-row"><label>层3</label>
                    <select id="rl3">
                        <option value="0" selected>—</option>
                        <option value="PET">PET</option>
                        <option value="VMPET">VMPET</option>
                        <option value="铝箔">铝箔</option>
                        <option value="尼龙">尼龙</option>
                        <option value="PE">PE</option>
                        <option value="BOPP">BOPP</option>
                        <option value="CPP">CPP</option>
                        <option value="哑光BOPP">哑光BOPP</option>
                        <option value="VMCPP">VMCPP</option>
                        <option value="40g牛皮纸">40g牛皮纸</option>
                    </select>
                    <input id="rt3" value="0" /><span class="unit">μm</span>
                </div>
                <div class="layer-row"><label>层4</label>
                    <select id="rl4">
                        <option value="0" selected>—</option>
                        <option value="PET">PET</option>
                        <option value="VMPET">VMPET</option>
                        <option value="铝箔">铝箔</option>
                        <option value="尼龙">尼龙</option>
                        <option value="PE">PE</option>
                        <option value="BOPP">BOPP</option>
                        <option value="CPP">CPP</option>
                        <option value="哑光BOPP">哑光BOPP</option>
                        <option value="VMCPP">VMCPP</option>
                        <option value="40g牛皮纸">40g牛皮纸</option>
                    </select>
                    <input id="rt4" value="0" /><span class="unit">μm</span>
                </div>
                <div class="layer-row"><label>胶水</label>
                    <select id="rglue">
                        <option value="5">干式复合 5μm</option>
                        <option value="2" selected>无溶剂 2μm</option>
                    </select>
                </div>
            </div>

            <button class="btn" onclick="calcRoll()">计算</button>
            <div class="result-box" id="r_res">
                <div>材料总厚度：<strong id="r_tt">—</strong> μm</div>
                <div style="font-size:20px; font-weight:700; color:#1a5bb5; margin-top:4px;" id="r_main">—</div>
                <div class="sub" id="r_sub">填写参数后点击计算</div>
            </div>
            <div class="inline-hint"><strong>正确公式</strong> L = π × (D外² − D芯²) ÷ (4 × T总) &nbsp;（单位：mm, μm）</div>
        </div>

        <!-- ============================================================ -->
        <!-- 面板3: 胶水配比 -->
        <!-- ============================================================ -->
        <div class="panel" id="panel3">
            <div class="panel-title">🧪 胶水配比 <span class="badge">乙酯添加量</span></div>

            <div class="row"><label>主剂重量</label><input id="g_mw" value="20" style="max-width:160px;" /><span class="unit">kg</span></div>
            <div class="row"><label>主剂固含量</label><input id="g_ms" value="75" style="max-width:160px;" /><span class="unit">%</span></div>
            <div class="row"><label>固化剂重量</label><input id="g_hw" value="4" style="max-width:160px;" /><span class="unit">kg</span></div>
            <div class="row"><label>固化剂固含量</label><input id="g_hs" value="75" style="max-width:160px;" /><span class="unit">%</span></div>
            <div class="row"><label>目标浓度</label><input id="g_target" value="30" style="max-width:160px;" /><span class="unit">%</span></div>

            <button class="btn" onclick="calcGlue()">计算乙酯量</button>
            <div class="result-box" id="g_res">
                <div>总固含量：<strong id="g_solid">—</strong> kg</div>
                <div>工作液总重：<strong id="g_total">—</strong> kg</div>
                <div style="font-size:22px; font-weight:700; color:#1a5bb5; margin-top:4px;">需添加乙酯：<span id="g_ester">—</span> kg</div>
            </div>
            <div class="inline-hint"><strong>公式</strong> 总固含量 = 主剂×固含量% + 固化剂×固含量% ； 乙酯 = 总固含量÷目标浓度% − 主剂 − 固化剂</div>
        </div>

        <!-- ============================================================ -->
        <!-- 面板4: 版辊周长 -->
        <!-- ============================================================ -->
        <div class="panel" id="panel4">
            <div class="panel-title">📏 版辊周长 <span class="badge">直径↔周长</span></div>

            <div style="display:grid; grid-template-columns:1fr 1fr; gap:14px;">
                <div style="background:#f6faff; border-radius:14px; padding:16px;">
                    <div style="font-weight:600; font-size:15px; margin-bottom:8px;">直径 → 周长</div>
                    <div class="row"><label>直径</label><input id="c_dia" value="200" style="max-width:140px;" /><span class="unit">mm</span></div>
                    <button class="btn" onclick="calcCirc()">计算周长</button>
                    <div class="result-box" id="res_c1">周长：<span class="num">—</span> mm</div>
                </div>
                <div style="background:#f6faff; border-radius:14px; padding:16px;">
                    <div style="font-weight:600; font-size:15px; margin-bottom:8px;">周长 → 直径</div>
                    <div class="row"><label>周长</label><input id="c_circ" value="628" style="max-width:140px;" /><span class="unit">mm</span></div>
                    <button class="btn" onclick="calcDia()">计算直径</button>
                    <div class="result-box" id="res_c2">直径：<span class="num">—</span> mm</div>
                </div>
            </div>
            <div class="inline-hint"><strong>公式</strong> 周长 = π × 直径 ； 直径 = 周长 ÷ π</div>
        </div>

        <!-- ============================================================ -->
        <!-- 面板5: 袋子克重 -->
        <!-- ============================================================ -->
        <div class="panel" id="panel5">
            <div class="panel-title">⚖️ 袋子克重 <span class="badge">估算</span></div>

            <div class="row"><label>袋长</label><input id="b_len" value="200" style="max-width:160px;" /><span class="unit">mm</span></div>
            <div class="row"><label>袋宽</label><input id="b_wid" value="150" style="max-width:160px;" /><span class="unit">mm</span></div>

            <div style="background:#f4f6fb; border-radius:12px; padding:12px 16px; margin:6px 0 12px;">
                <div style="font-weight:600; font-size:14px; margin-bottom:6px;">📋 材质结构</div>
                <div class="layer-row"><label>层1</label>
                    <select id="b_mat1">
                        <option value="0">—</option>
                        <option value="1.39">PET</option>
                        <option value="1.41">VMPET</option>
                        <option value="2.70">铝箔</option>
                        <option value="1.14">尼龙</option>
                        <option value="0.925" selected>PE</option>
                        <option value="0.91">BOPP</option>
                        <option value="0.91">CPP</option>
                    </select>
                    <input id="b_thick1" value="40" /><span class="unit">μm</span>
                </div>
                <div class="layer-row"><label>层2</label>
                    <select id="b_mat2">
                        <option value="0">—</option>
                        <option value="1.39">PET</option>
                        <option value="1.41">VMPET</option>
                        <option value="2.70">铝箔</option>
                        <option value="1.14">尼龙</option>
                        <option value="0.925">PE</option>
                        <option value="0.91" selected>BOPP</option>
                        <option value="0.91">CPP</option>
                    </select>
                    <input id="b_thick2" value="20" /><span class="unit">μm</span>
                </div>
                <div class="layer-row"><label>层3</label>
                    <select id="b_mat3">
                        <option value="0" selected>—</option>
                        <option value="1.39">PET</option>
                        <option value="1.41">VMPET</option>
                        <option value="2.70">铝箔</option>
                        <option value="1.14">尼龙</option>
                        <option value="0.925">PE</option>
                        <option value="0.91">BOPP</option>
                        <option value="0.91">CPP</option>
                    </select>
                    <input id="b_thick3" value="0" /><span class="unit">μm</span>
                </div>
            </div>

            <button class="btn" onclick="calcBagWeight()">估算克重</button>
            <div class="result-box" id="b_res">
                单袋克重：<span class="num" id="b_result">—</span> g
                <div class="sub" id="b_sub">选好材质和厚度后点击计算</div>
            </div>
            <div class="inline-hint"><strong>公式</strong> 单袋重量 = 长×宽×(各层厚度×密度) 累加 （单位：m, μm, g/cm³）</div>
        </div>

        <!-- ============================================================ -->
        <!-- 底部折叠 -->
        <!-- ============================================================ -->
        <div class="footer-toggle">
            <button onclick="toggleFooter()">
                <span>📋 加工能力 &amp; 袋型参考</span>
                <span class="arrow" id="footerArrow">▾</span>
            </button>
        </div>

        <div class="footer-content" id="footerContent">
            <div class="section">
                <h4>🏭 加工能力</h4>
                <ul>
                    <li>10色印刷机（BOPP/PET/NY/PE，宽1100）</li>
                    <li>8色印刷机（BOPP/PET/NY/PE，宽1100）</li>
                    <li>干式复合机（宽1020）</li>
                    <li>无溶剂复合机（宽1020）</li>
                    <li>三边封 / 中封 / 拉链制袋</li>
                </ul>
            </div>
            <div class="section">
                <h4>📦 常见袋型</h4>
                <div class="bag-grid">
                    <div class="item"><span class="tag">拉链袋</span> 哑光BOPP/VMPET/PE</div>
                    <div class="item"><span class="tag">三边封</span> BOPP/CPP 或 PET/PE</div>
                    <div class="item"><span class="tag">卷膜</span> PET/AL/PE</div>
                    <div class="item"><span class="tag">自立袋</span> PET/AL/PE 或 BOPP/VMPET/PE</div>
                    <div class="item"><span class="tag">背封袋</span> BOPP/CPP 或 PET/PE</div>
                    <div class="item"><span class="tag">四边封</span> 铝箔/PE 或 PET/CPP</div>
                    <div class="item"><span class="tag">风琴袋</span> PET/NY/PE 或 BOPP/VMPET/PE</div>
                    <div class="item"><span class="tag">高温蒸煮袋</span> PET/AL/NY/RCPP</div>
                </div>
                <div style="font-size:13px; color:#7a8aa0; margin-top:4px;">更多袋型及材质搭配，欢迎微信详询</div>
            </div>
            <div class="section" style="margin-bottom:0;">
                <h4>📞 联系</h4>
                <p>微信：<strong>zhengchongcai123</strong> ｜ 邮箱：18601700192@163.com</p>
            </div>
        </div>

        <!-- ============================================================ -->
        <!-- 留言板 -->
        <!-- ============================================================ -->
        <div class="panel" style="margin-top:10px; display:block;">
            <div class="panel-title" style="font-size:18px;">✍️ 需求收集</div>
            <p style="font-size:14px; color:#2d4058; margin-bottom:10px;">
                作为包装行业的从业者，您在日常生产或采购中，最头疼的计算或选型问题是什么？
            </p>
            <ul style="font-size:13px; color:#3d5166; padding-left:18px; margin-bottom:12px; line-height:1.8;">
                <li><strong>工具需求：</strong>除了现有工具，您还希望我开发哪种实用小工具？</li>
                <li><strong>业务需求：</strong>您目前主要在做哪类产品的包装？（食品、日化、电子、工业品……）</li>
                <li><strong>合作需求：</strong>您是想找代工厂加工卷膜，还是需要寻找特定材质的现成袋子？</li>
            </ul>
            <div class="msg-box">
                <form action="sendmail.php" method="POST">
                    <div class="row"><label>称呼</label><input type="text" name="name" placeholder="如：张工" required /></div>
                    <div class="row"><label>电话/微信</label><input type="text" name="phone" placeholder="方便我联系您" /></div>
                    <div class="row" style="align-items:stretch;">
                        <label style="align-self:flex-start; padding-top:6px;">留言</label>
                        <textarea name="message" placeholder="请告诉我您的需求或建议……" required></textarea>
                    </div>
                    <button type="submit" class="btn" style="width:auto; padding:10px 36px;">📤 提交留言</button>
                    <div style="font-size:12px; color:#9aabbd; margin-top:8px;">（添加微信请备注"工具箱"快速通过）</div>
                </form>
            </div>
        </div>

        <!-- ===== 微信弹窗 ===== -->
        <div class="wechat-modal" id="wechatModal" onclick="if(event.target===this) hideWechat()">
            <div class="box">
                <div style="font-size:48px;">💬</div>
                <div style="font-size:18px; font-weight:600; margin:6px 0 2px;">郑崇财</div>
                <div class="wx-id">zhengchongcai123</div>
                <div class="hint">👆 复制微信号，添加好友</div>
                <div class="hint" style="margin-top:6px; background:#f0f7ff; padding:6px; border-radius:8px; font-size:13px;">备注 <strong>"工具箱"</strong> 快速通过</div>
                <button class="close-btn" onclick="hideWechat()">知道了</button>
            </div>
        </div>

        <div class="footer-note">免费工具 · 随时自用 · 微信联系</div>
    </div>

    <script>
        // ============================
        // 工具切换
        // ============================
        function switchTool(n) {
            document.querySelectorAll('.tool-card').forEach(el => el.classList.remove('active'));
            document.querySelector('.tool-card[data-tool="' + n + '"]').classList.add('active');
            document.querySelectorAll('.panel').forEach(el => el.classList.remove('open'));
            document.getElementById('panel' + n).classList.add('open');
            if (n === 1) { setTimeout(calcMat1, 50);
                setTimeout(calcMat2, 60); }
            if (n === 2) setTimeout(calcRoll, 50);
            if (n === 3) setTimeout(calcGlue, 50);
            if (n === 4) { setTimeout(calcCirc, 50);
                setTimeout(calcDia, 60); }
            if (n === 5) setTimeout(calcBagWeight, 50);
        }

        // ============================
        // 材料下拉 → 密度
        // ============================
        function updateDensity(prefix) {
            const sel = document.getElementById(prefix + '_mat');
            const display = document.getElementById(prefix + '_density');
            if (sel && display) {
                display.textContent = '密度：' + sel.value + ' g/cm³';
            }
        }

        // ============================
        // 材料计算
        // ============================
        function calcMat1() {
            const rho = parseFloat(document.getElementById('m1_mat').value);
            const w = parseFloat(document.getElementById('m1_w').value) / 1000;
            const t = parseFloat(document.getElementById('m1_t').value);
            const kg = parseFloat(document.getElementById('m1_kg').value);
            if (!rho || !w || !t || !kg) { document.getElementById('res1').innerHTML = '米数：<span class="num">请填全</span>'; return; }
            const m = kg / (w * t * rho);
            document.getElementById('res1').innerHTML = '米数：<span class="num">' + m.toFixed(2) + '</span> m';
        }

        function calcMat2() {
            const rho = parseFloat(document.getElementById('m2_mat').value);
            const w = parseFloat(document.getElementById('m2_w').value) / 1000;
            const t = parseFloat(document.getElementById('m2_t').value);
            const m = parseFloat(document.getElementById('m2_m').value);
            if (!rho || !w || !t || !m) { document.getElementById('res2').innerHTML = '重量：<span class="num">请填全</span>'; return; }
            const kg = m * w * t * rho;
            document.getElementById('res2').innerHTML = '重量：<span class="num">' + kg.toFixed(3) + '</span> kg';
        }

        // ============================
        // 卷膜计算（最终修正版）
        // ============================
        function toggleRMode() {
            const mode = document.querySelector('input[name="rmode"]:checked').value;
            const label = document.getElementById('r_label');
            const unit = document.getElementById('r_unit');
            const input = document.getElementById('r_val');
            if (mode === 'd2l') {
                label.textContent = '外径';
                unit.textContent = 'mm';
                input.placeholder = '如 320';
                input.value = '320';
            } else {
                label.textContent = '长度';
                unit.textContent = 'm';
                input.placeholder = '如 1000';
                input.value = '1000';
            }
            setTimeout(calcRoll, 50);
        }

        function calcRoll() {
            const t1 = parseFloat(document.getElementById('rt1').value) || 0;
            const t2 = parseFloat(document.getElementById('rt2').value) || 0;
            const t3 = parseFloat(document.getElementById('rt3').value) || 0;
            const t4 = parseFloat(document.getElementById('rt4').value) || 0;
            const glue = parseFloat(document.getElementById('rglue').value) || 0;
            const Ttotal = t1 + t2 + t3 + t4 + glue;
            document.getElementById('r_tt').textContent = Ttotal.toFixed(1);

            const core = parseFloat(document.getElementById('r_core').value);
            const mode = document.querySelector('input[name="rmode"]:checked').value;
            const val = parseFloat(document.getElementById('r_val').value);

            if (!core || !val || Ttotal <= 0) {
                document.getElementById('r_main').textContent = '⚠️ 请完整填写参数';
                document.getElementById('r_sub').textContent = '确保厚度、芯径、输入值均有效';
                return;
            }

            const pi = 3.14159265;
            let mainText, subText;

            if (mode === 'd2l') {
                const D外 = val;
                if (D外 <= core) {
                    document.getElementById('r_main').textContent = '⚠️ 外径需大于纸芯内径';
                    document.getElementById('r_sub').textContent = '';
                    return;
                }
                // 正确公式：无额外系数
                const L = pi * (D外 * D外 - core * core) / (4 * Ttotal);
                mainText = '分切长度：' + L.toFixed(1) + ' m';
                subText = '外径 ' + D外 + ' mm  →  长度 ' + L.toFixed(1) + ' m';
            } else {
                const L = val;
                // 正确反推公式：无额外系数
                const D外 = Math.sqrt(core * core + 4 * L * Ttotal / pi);
                mainText = '卷膜外径：' + D外.toFixed(1) + ' mm';
                subText = '长度 ' + L + ' m  →  外径 ' + D外.toFixed(1) + ' mm';
            }

            document.getElementById('r_main').textContent = mainText;
            document.getElementById('r_sub').textContent = subText;
        }

        // ============================
        // 胶水配比
        // ============================
        function calcGlue() {
            const mw = parseFloat(document.getElementById('g_mw').value);
            const ms = parseFloat(document.getElementById('g_ms').value) / 100;
            const hw = parseFloat(document.getElementById('g_hw').value);
            const hs = parseFloat(document.getElementById('g_hs').value) / 100;
            const target = parseFloat(document.getElementById('g_target').value) / 100;

            if (!mw || !ms || !hw || !hs || !target) {
                document.getElementById('g_solid').textContent = '请填全';
                document.getElementById('g_total').textContent = '请填全';
                document.getElementById('g_ester').textContent = '请填全';
                return;
            }

            const solid = mw * ms + hw * hs;
            const total = solid / target;
            const ester = total - mw - hw;

            document.getElementById('g_solid').textContent = solid.toFixed(3);
            document.getElementById('g_total').textContent = total.toFixed(3);
            document.getElementById('g_ester').textContent = ester.toFixed(3);
        }

        // ============================
        // 版辊周长
        // ============================
        function calcCirc() {
            const d = parseFloat(document.getElementById('c_dia').value);
            if (!d) { document.getElementById('res_c1').innerHTML = '周长：<span class="num">请输入直径</span>'; return; }
            const c = Math.PI * d;
            document.getElementById('res_c1').innerHTML = '周长：<span class="num">' + c.toFixed(2) + '</span> mm';
        }

        function calcDia() {
            const c = parseFloat(document.getElementById('c_circ').value);
            if (!c) { document.getElementById('res_c2').innerHTML = '直径：<span class="num">请输入周长</span>'; return; }
            const d = c / Math.PI;
            document.getElementById('res_c2').innerHTML = '直径：<span class="num">' + d.toFixed(2) + '</span> mm';
        }

        // ============================
        // 袋子克重
        // ============================
        function calcBagWeight() {
            const len = parseFloat(document.getElementById('b_len').value) / 1000;
            const wid = parseFloat(document.getElementById('b_wid').value) / 1000;
            if (!len || !wid) {
                document.getElementById('b_result').textContent = '请填长宽';
                document.getElementById('b_sub').textContent = '';
                return;
            }

            const mats = [
                { sel: document.getElementById('b_mat1'), thick: document.getElementById('b_thick1') },
                { sel: document.getElementById('b_mat2'), thick: document.getElementById('b_thick2') },
                { sel: document.getElementById('b_mat3'), thick: document.getElementById('b_thick3') }
            ];

            let totalWeight = 0;
            let detail = [];

            mats.forEach((item) => {
                const rho = parseFloat(item.sel.value);
                const t = parseFloat(item.thick.value) || 0;
                if (rho > 0 && t > 0) {
                    const w = len * wid * t * rho;
                    totalWeight += w;
                    detail.push(item.sel.options[item.sel.selectedIndex].text + t + 'μm');
                }
            });

            if (detail.length === 0) {
                document.getElementById('b_result').textContent = '请选材质';
                document.getElementById('b_sub').textContent = '';
                return;
            }

            document.getElementById('b_result').textContent = totalWeight.toFixed(3);
            document.getElementById('b_sub').textContent = '结构：' + detail.join(' / ') + '  →  ' + totalWeight.toFixed(3) + ' g/个';
        }

        // ============================
        // 底部折叠
        // ============================
        function toggleFooter() {
            const content = document.getElementById('footerContent');
            const arrow = document.getElementById('footerArrow');
            content.classList.toggle('open');
            arrow.classList.toggle('open');
        }

        // ============================
        // 微信弹窗
        // ============================
        function showWechat() {
            document.getElementById('wechatModal').classList.add('show');
        }

        function hideWechat() {
            document.getElementById('wechatModal').classList.remove('show');
        }

        // ============================
        // 初始化
        // ============================
        window.addEventListener('DOMContentLoaded', function() {
            updateDensity('m1');
            updateDensity('m2');
            setTimeout(calcMat1, 100);
            setTimeout(calcMat2, 120);
            setTimeout(calcRoll, 150);
            setTimeout(calcGlue, 180);
            setTimeout(calcCirc, 200);
            setTimeout(calcDia, 220);
            setTimeout(calcBagWeight, 250);
        });
    </script>

</body>
</html>