
    <!DOCTYPE html>
    <html lang="zh">
    <head>
        <meta charset="UTF-8">
        <title>创意菜谱</title>
        <style>
            html, body { margin:0; padding:0; width:100%; height:100%; overflow-x:hidden; }
            body { font-family:"微软雅黑",sans-serif; background:#2c2c2c url('bg.jpeg') no-repeat center center fixed; background-size:cover; color:#333; }
            .container { max-width:1200px; margin:30px auto; background:rgba(255,248,220,0.95); border-radius:15px; padding:30px; box-shadow:0 0 20px rgba(0,0,0,0.2); }
            .banner { width:100%; height:220px; background:url('bg.jpeg') center/cover no-repeat; border-radius:15px 15px 0 0; display:flex; align-items:center; justify-content:center; }
            .banner h1 { color:#fff; font-size:28px; text-shadow:1px 1px 3px #666; }
            p { font-size:18px; margin:8px 0; }
            .step-card { background:#fff0b3; margin:10px 0; border-radius:12px; overflow:hidden; opacity:0; transform:translateY(20px) scale(0.98); animation:fadeInUp 0.6s forwards; }
            .step-title { font-weight:bold; padding:10px 15px; cursor:pointer; background:#ffb347; color:#fff; border-bottom:1px solid #ffd27f; }
            .step-content { padding:10px 15px; display:block; font-size:16px; opacity:0; max-height:0; overflow:hidden; transition: opacity 0.4s ease, max-height 0.4s ease; }
            .step-card.hover .step-content { opacity:1; max-height:800px; }
            iframe { width:100%; height:500px; border:none; margin-top:20px; }
            @keyframes fadeInUp { to { opacity:1; transform:translateY(0) scale(1); } }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="banner"><h1>🍽 羊肉炸香蕉</h1></div>
            <p>🍖 <strong>主菜：</strong>羊肉</p>
            <p>🥗 <strong>配菜：</strong>🍌 香蕉</p>
            <p>👩‍🍳 <strong>做法：</strong>🍟 炸</p>
            
        <div class="step-card" style="animation-delay:0.2s;">
            <div class="step-title">Step 1 📝 食材搭配的营养价值</div>
            <div class="step-content">根据食材搭配生成的营养价值饼图如下 ⬇️</div>
        </div>
        
        <div class="step-card" style="animation-delay:0.4s;">
            <div class="step-title">Step 2 📝 创意灵感</div>
            <div class="step-content">这道创意菜灵感来源于食材的碰撞实验，将传统咸香风味的羊肉与热带水果的清甜进行融合，通过高温油🍟 炸形成外酥里嫩的口感反差。🍌 香蕉经过🍟 炸制后会产生焦糖化反应，其绵密质地与羊肉的纤维感形成层次对比，搭配特制香料粉激发出东南亚风情的味觉体验，突破常规肉类与水果的搭配边界。</div>
        </div>
        
        <div class="step-card" style="animation-delay:0.6000000000000001s;">
            <div class="step-title">Step 3 📝 食材清单</div>
            <div class="step-content">主料：羊腿肉300克（🔪 切1.5cm立方块）<br>配菜：成熟🍌 香蕉2根（🔪 切1cm厚片）<br>裹粉：🌽 玉米淀粉50克、🍗 🥚 鸡蛋1个、🍞 面包糠80克<br>调味料：辣椒粉3克、孜然粉5克、蒜粉2克、盐4克、黑胡椒碎2克<br>辅料：食用油500毫升（实耗约80毫升）<br>装饰：新鲜薄荷叶5片、柠檬角2个</div>
        </div>
        
        <div class="step-card" style="animation-delay:0.8s;">
            <div class="step-title">Step 4 📝 制作步骤</div>
            <div class="step-content">1 预处理：羊肉块用2克盐、1克黑胡椒、蒜粉🫙 腌制15分钟；🍌 香蕉片裹薄层🌽 玉米淀粉备用<br>2 调制裹粉：🍗 🥚 鸡蛋打散与剩余🌽 玉米淀粉混合成蛋糊，🍞 面包糠与辣椒粉、孜然粉、2克盐、1克黑胡椒混合<br>3 双阶段🍟 炸制：<br>- 羊肉块先蘸蛋糊再裹香料🍞 面包糠，160℃油温初🍟 炸3分钟定型<br>- 🍌 香蕉片直接裹香料🍞 面包糠，180℃油温速🍟 炸1分钟至金黄<br>4 复🍟 炸提脆：羊肉块200℃高温复🍟 炸1分钟至外壳酥脆<br>5 装盘艺术：羊肉与🍌 香蕉片间隔堆叠，撒剩余香料粉，配薄荷叶与柠檬角</div>
        </div>
        
            <iframe src="nutrition_pie.html"></iframe>
        </div>
        <script>
            const steps = document.querySelectorAll('.step-card');
            steps.forEach(card => {
                card.addEventListener('mouseenter', () => { card.classList.add('hover'); });
                card.addEventListener('mouseleave', () => { card.classList.remove('hover'); });
            });
        </script>
    </body>
    </html>
    