-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbreadLab.html
More file actions
195 lines (181 loc) · 9.39 KB
/
Copy pathbreadLab.html
File metadata and controls
195 lines (181 loc) · 9.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.14/lottie.min.js"></script>
<link rel="stylesheet" href="css/breadLab.css">
<title>面包酶实验室</title>
</head>
<body>
<header>
<a href="index.html" class="nav-logo">酶工厂</a>
<h1>面包酶实验室</h1>
</header>
<section class="hero">
<h2>探索酶的神奇世界</h2>
<p>亲手调配不同的酶，观察它们如何影响面包的质地、体积和口感</p>
<button class="start-button" id="start-experiment">开始实验</button>
</section>
<section class="lab-container" id="lab">
<div class="enzyme-controls">
<div class="enzyme-card">
<div class="enzyme-icon">
<img src="images/enzyme/淀粉酶.png" alt="淀粉酶图标">
</div>
<div class="enzyme-info">
<h3>淀粉酶</h3>
<p>分解淀粉产生糖分，影响面包发酵和体积</p>
<div class="slider-container">
<label>用量 <span id="amylase-value">50%</span></label>
<input type="range" min="0" max="100" value="50" class="slider" id="amylase-slider">
</div>
</div>
</div>
<div class="enzyme-card">
<div class="enzyme-icon">
<img src="images/enzyme/脂肪酶.png" alt="脂肪酶图标">
</div>
<div class="enzyme-info">
<h3>脂肪酶</h3>
<p>改良面包组织结构，增加柔软度</p>
<div class="slider-container">
<label>用量 <span id="lipase-value">50%</span></label>
<input type="range" min="0" max="100" value="50" class="slider" id="lipase-slider">
</div>
</div>
</div>
<div class="enzyme-card">
<div class="enzyme-icon">
<img src="images/enzyme/葡萄糖氧化酶.png" alt="葡萄糖氧化酶图标">
</div>
<div class="enzyme-info">
<h3>葡萄糖氧化酶</h3>
<p>强化面团，改善面团抗拉性</p>
<div class="slider-container">
<label>用量 <span id="glucose-oxidase-value">50%</span></label>
<input type="range" min="0" max="100" value="50" class="slider" id="glucose-oxidase-slider">
</div>
</div>
</div>
<!-- 添加在现有酶卡片之后 -->
<div class="enzyme-card">
<div class="enzyme-icon" style="background: linear-gradient(120deg, #34c759, #30d158);">
<!-- <img src="/api/placeholder/80/80" alt="温度控制图标"> -->
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-thermometer-half" viewBox="0 0 16 16">
<path d="M9.5 12.5a1.5 1.5 0 1 1-2-1.415V6.5a.5.5 0 0 1 1 0v4.585a1.5 1.5 0 0 1 1 1.415z"/>
<path d="M5.5 2.5a2.5 2.5 0 0 1 5 0v7.55a3.5 3.5 0 1 1-5 0V2.5zM8 1a1.5 1.5 0 0 0-1.5 1.5v7.987l-.167.15a2.5 2.5 0 1 0 3.333 0l-.166-.15V2.5A1.5 1.5 0 0 0 8 1z"/>
</svg>
</div>
<div class="enzyme-info">
<h3>烘焙温度</h3>
<p>影响酶活性和面包烤色，决定面包表皮形成</p>
<div class="slider-container">
<label>温度 <span id="temperature-value">180°C</span></label>
<input type="range" min="150" max="220" value="180" class="slider" id="temperature-slider">
</div>
</div>
</div>
<div class="enzyme-card">
<div class="enzyme-icon" style="background: linear-gradient(120deg, #5e5ce6, #0a84ff);">
<!-- <img src="/api/placeholder/80/80" alt="时间控制图标"> -->
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg>
</div>
<div class="enzyme-info">
<h3>发酵时间</h3>
<p>影响酶反应完成度和面包组织结构</p>
<div class="slider-container">
<label>时间 <span id="fermentation-value">60分钟</span></label>
<input type="range" min="30" max="120" value="60" class="slider" id="fermentation-slider">
</div>
</div>
</div>
</div>
<div class="bread-preview">
<div class="bread-container">
<div class="bread-cross-section" id="bread-visualization">
<!-- 面包可视化区域 -->
</div>
<div id="lottie-loading">
<!-- 面包烘焙动画区域 -->
</div>
</div>
<div class="bread-status">
<div class="status-title">你的面包配方</div>
<div class="status-message">调整酶的用量，然后点击烘焙按钮查看结果</div>
<div class="status-effects">
<div class="status-effect">
<div class="effect-value" id="volume-value">--</div>
<div class="effect-label">体积</div>
</div>
<div class="status-effect">
<div class="effect-value" id="texture-value">--</div>
<div class="effect-label">质地</div>
</div>
<div class="status-effect">
<div class="effect-value" id="freshness-value">--</div>
<div class="effect-label">保鲜度</div>
</div>
</div>
<button class="bake-button" id="bake-button">开始烘焙</button>
</div>
</div>
<div class="knowledge-card">
<h3>酶的科学原理</h3>
<p>酶是生物催化剂，能加速特定的化学反应，但自身不改变。在面包制作中，不同种类的酶负责不同功能：淀粉酶分解淀粉产生糖分供酵母发酵；脂肪酶改良面包组织结构和柔软度；葡萄糖氧化酶增强面团筋力。</p>
<p>通过微调酶的用量，专业面包师能够精确控制面包的口感、体积和保质期。但用量不当会导致面包质量下降，比如面包发黏、质地粗糙或表皮烧焦等问题。</p>
<p>点击"分子视角"按钮，你可以看到酶在分子层面是如何工作的！</p>
<button class="bake-button" id="microscope-button">分子视角</button>
</div>
</section>
<div class="microscope-view" id="microscope-view">
<div class="microscope-container">
<button class="close-microscope" id="close-microscope">×</button>
<div class="microscope-header">
<h3>酶的分子作用</h3>
</div>
<div class="microscope-content">
<div class="microscope-canvas" id="microscope-canvas">
<!-- 分子动画区域 -->
</div>
<div class="microscope-info">
<p id="microscope-description">
在这个微观世界中，你可以看到酶分子（彩色小球）如何与底物（灰色大分子）结合并催化反应。淀粉酶正在切断淀粉长链，脂肪酶在分解脂肪，葡萄糖氧化酶则在促进蛋白质交联。</p>
</div>
</div>
</div>
</div>
<div class="experiment-results" id="experiment-results">
<div class="results-container">
<div class="results-header">
<h3>面包烘焙结果</h3>
</div>
<div class="results-content">
<div class="results-summary">
<h4 id="result-title">实验结果</h4>
<p id="result-description">根据你选择的酶配方，这里是你的面包烘焙结果。</p>
</div>
<div class="results-details">
<div class="details-card">
<h5>科学解释</h5>
<p id="science-explanation">这里将显示酶配方如何影响面包的科学解释。</p>
</div>
<div class="details-card">
<h5>专家提示</h5>
<p id="expert-tip">这里将显示如何改进配方的提示。</p>
</div>
</div>
<div class="results-actions">
<button class="results-button retry-button" id="try-again">再试一次</button>
<button class="results-button share-button" id="share-result">分享结果</button>
</div>
</div>
</div>
</div>
<script src="js/breadLab.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script> -->
</body>
</html>