@aiyiran/myclaw 1.1.83 → 1.1.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/myclaw-artifacts.js +2 -2
- package/package.json +1 -1
- package/skills/yiran-course-template-pipeline/template-index.json +28 -1
- package/skills/yiran-course-template-pipeline/template-index.md +9 -0
- package//345/201/232/344/270/200/344/270/252/346/210/221/347/232/204/345/215/241/347/211/214/345/233/276/347/255/276/__demo__.html +407 -0
- package//345/201/232/344/270/200/344/270/252/346/210/221/347/232/204/345/215/241/347/211/214/345/233/276/347/255/276/__student-view__.html +77 -0
- package//345/201/232/344/270/200/344/270/252/346/210/221/347/232/204/345/215/241/347/211/214/345/233/276/347/255/276/__student__.json +60 -0
- package//345/201/232/344/270/200/344/270/252/346/210/221/347/232/204/345/215/241/347/211/214/345/233/276/347/255/276/__teacher-view__.html +52 -0
- package//345/201/232/344/270/200/344/270/252/346/210/221/347/232/204/345/215/241/347/211/214/345/233/276/347/255/276/__teacher__.json +45 -0
- package//345/201/232/344/270/200/344/270/252/346/210/221/347/232/204/345/215/241/347/211/214/345/233/276/347/255/276/index.html +150 -0
|
@@ -1924,8 +1924,8 @@
|
|
|
1924
1924
|
qrSection.style.cssText = 'display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px;';
|
|
1925
1925
|
|
|
1926
1926
|
var qrDiv = document.createElement('div');
|
|
1927
|
-
qrDiv.style.cssText = 'width:
|
|
1928
|
-
loadAndGenerateQR(qrDiv, data.permanent_url,
|
|
1927
|
+
qrDiv.style.cssText = 'width:148px;height:148px;border-radius:6px;background:#fff;display:flex;align-items:center;justify-content:center;';
|
|
1928
|
+
loadAndGenerateQR(qrDiv, data.permanent_url, 128);
|
|
1929
1929
|
qrSection.appendChild(qrDiv);
|
|
1930
1930
|
|
|
1931
1931
|
var qrHint = document.createElement('div');
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"index_updated_at": "2026-
|
|
2
|
+
"index_updated_at": "2026-05-06T08:33:14Z",
|
|
3
3
|
"templates": {
|
|
4
4
|
"696de592": {
|
|
5
5
|
"id": "696de592",
|
|
@@ -187,6 +187,33 @@
|
|
|
187
187
|
],
|
|
188
188
|
"updated_at": "2026-04-24T06:54:59Z"
|
|
189
189
|
},
|
|
190
|
+
"c5038b9f": {
|
|
191
|
+
"id": "c5038b9f",
|
|
192
|
+
"系列": "A",
|
|
193
|
+
"编号": "107",
|
|
194
|
+
"名称": "做一个我的卡牌图签",
|
|
195
|
+
"文件夹名": "a107_做一个我的卡牌图签",
|
|
196
|
+
"version": "v1",
|
|
197
|
+
"路径": "templates/a107_做一个我的卡牌图签/v1",
|
|
198
|
+
"入口文件": "templates/a107_做一个我的卡牌图签/v1/index.html",
|
|
199
|
+
"一句话说明": "先定主题，边用 AI 生成图片，边让 AI 搭网页框架，最后把图片换上去，一起完成一套图签。",
|
|
200
|
+
"主能力标签": "第二能力：表达构建",
|
|
201
|
+
"任务类型标签": "视听表达",
|
|
202
|
+
"关键词": [
|
|
203
|
+
"a107_做一个我的卡牌图签",
|
|
204
|
+
"先定主题，边用 AI 生成图片，边让 AI 搭网页框架，最后把图片换上去，一起完成一套图签。",
|
|
205
|
+
"有兴趣爱好的学生（游戏、动漫、宝可梦等）",
|
|
206
|
+
"需要有成就感才能启动的学生",
|
|
207
|
+
"对网页有好奇心的初学者",
|
|
208
|
+
"图片生成和网页搭建同步推进，不等一方完成再开始另一方",
|
|
209
|
+
"用 AI 协作完成两条并行任务（生图 + 建页）",
|
|
210
|
+
"把 AI 产出的图片素材接入自己的网页",
|
|
211
|
+
"做一个我的卡牌图签",
|
|
212
|
+
"第二能力：表达构建",
|
|
213
|
+
"视听表达"
|
|
214
|
+
],
|
|
215
|
+
"updated_at": "2026-05-06T08:33:09Z"
|
|
216
|
+
},
|
|
190
217
|
"c360e192": {
|
|
191
218
|
"id": "c360e192",
|
|
192
219
|
"系列": "B",
|
|
@@ -65,6 +65,15 @@
|
|
|
65
65
|
- 任务类型标签：游戏机制
|
|
66
66
|
- 关键词：a106_火箭拦截：发现规则_&_提出改进, 先玩10秒找到游戏规则，再提出一个改进点，最后验证改进有没有用。, 初次接触游戏设计的学生, 会玩游戏但没分析过游戏规则的学生, 通过10秒时间盒，训练学生快速聚焦核心规则, 用「前10秒」作为判断标准，培养学生自我感受的游戏评价能力, 三关结构：发现→提出→验证，形成完整的「判断-改进-验证」闭环, 火箭拦截：发现规则 & 提出改进, 第三能力：问题判断, 游戏机制
|
|
67
67
|
|
|
68
|
+
## A107 做一个我的卡牌图签
|
|
69
|
+
- ID：c5038b9f
|
|
70
|
+
- 版本：v1
|
|
71
|
+
- 路径：templates/a107_做一个我的卡牌图签/v1
|
|
72
|
+
- 入口文件：templates/a107_做一个我的卡牌图签/v1/index.html
|
|
73
|
+
- 主能力标签：第二能力：表达构建
|
|
74
|
+
- 任务类型标签：视听表达
|
|
75
|
+
- 关键词：a107_做一个我的卡牌图签, 先定主题，边用 AI 生成图片，边让 AI 搭网页框架，最后把图片换上去，一起完成一套图签。, 有兴趣爱好的学生（游戏、动漫、宝可梦等）, 需要有成就感才能启动的学生, 对网页有好奇心的初学者, 图片生成和网页搭建同步推进，不等一方完成再开始另一方, 用 AI 协作完成两条并行任务（生图 + 建页）, 把 AI 产出的图片素材接入自己的网页, 做一个我的卡牌图签, 第二能力：表达构建, 视听表达
|
|
76
|
+
|
|
68
77
|
## B100 做一个按钮页面
|
|
69
78
|
- ID：c360e192
|
|
70
79
|
- 版本：v2
|
|
@@ -0,0 +1,407 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>我的宝可梦图签</title>
|
|
7
|
+
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&family=Noto+Sans+SC:wght@400;700&display=swap" rel="stylesheet">
|
|
8
|
+
<style>
|
|
9
|
+
* {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 0;
|
|
12
|
+
box-sizing: border-box;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
body {
|
|
16
|
+
min-height: 100vh;
|
|
17
|
+
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
|
18
|
+
font-family: 'Noto Sans SC', sans-serif;
|
|
19
|
+
overflow-x: hidden;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/* 星空背景 */
|
|
23
|
+
body::before {
|
|
24
|
+
content: '';
|
|
25
|
+
position: fixed;
|
|
26
|
+
top: 0;
|
|
27
|
+
left: 0;
|
|
28
|
+
width: 100%;
|
|
29
|
+
height: 100%;
|
|
30
|
+
background-image:
|
|
31
|
+
radial-gradient(2px 2px at 20px 30px, #fff, transparent),
|
|
32
|
+
radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
|
|
33
|
+
radial-gradient(1px 1px at 90px 40px, #fff, transparent),
|
|
34
|
+
radial-gradient(2px 2px at 160px 120px, rgba(255,255,255,0.9), transparent),
|
|
35
|
+
radial-gradient(1px 1px at 230px 80px, #fff, transparent),
|
|
36
|
+
radial-gradient(2px 2px at 300px 150px, rgba(255,255,255,0.7), transparent),
|
|
37
|
+
radial-gradient(1px 1px at 350px 200px, #fff, transparent),
|
|
38
|
+
radial-gradient(2px 2px at 420px 50px, rgba(255,255,255,0.8), transparent),
|
|
39
|
+
radial-gradient(1px 1px at 500px 180px, #fff, transparent),
|
|
40
|
+
radial-gradient(2px 2px at 80px 250px, rgba(255,255,255,0.6), transparent),
|
|
41
|
+
radial-gradient(1px 1px at 180px 300px, #fff, transparent),
|
|
42
|
+
radial-gradient(2px 2px at 280px 280px, rgba(255,255,255,0.9), transparent),
|
|
43
|
+
radial-gradient(1px 1px at 380px 320px, #fff, transparent),
|
|
44
|
+
radial-gradient(2px 2px at 480px 300px, rgba(255,255,255,0.7), transparent);
|
|
45
|
+
background-repeat: repeat;
|
|
46
|
+
background-size: 500px 350px;
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
z-index: 0;
|
|
49
|
+
animation: twinkle 4s ease-in-out infinite alternate;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
@keyframes twinkle {
|
|
53
|
+
0% { opacity: 0.7; }
|
|
54
|
+
100% { opacity: 1; }
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.container {
|
|
58
|
+
position: relative;
|
|
59
|
+
z-index: 1;
|
|
60
|
+
max-width: 1200px;
|
|
61
|
+
margin: 0 auto;
|
|
62
|
+
padding: 40px 20px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* 标题区 */
|
|
66
|
+
header {
|
|
67
|
+
text-align: center;
|
|
68
|
+
margin-bottom: 50px;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
h1 {
|
|
72
|
+
font-family: 'Mountains of Christmas', cursive;
|
|
73
|
+
font-size: 3.5rem;
|
|
74
|
+
color: #ffd700;
|
|
75
|
+
text-shadow:
|
|
76
|
+
0 0 10px #ffd700,
|
|
77
|
+
0 0 20px #ff8c00,
|
|
78
|
+
0 0 30px #ff8c00,
|
|
79
|
+
3px 3px 0 #c44d00;
|
|
80
|
+
letter-spacing: 3px;
|
|
81
|
+
animation: glow 2s ease-in-out infinite alternate;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
@keyframes glow {
|
|
85
|
+
from { text-shadow: 0 0 10px #ffd700, 0 0 20px #ff8c00, 0 0 30px #ff8c00, 3px 3px 0 #c44d00; }
|
|
86
|
+
to { text-shadow: 0 0 20px #ffd700, 0 0 40px #ff8c00, 0 0 60px #ff8c00, 3px 3px 0 #c44d00; }
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.subtitle {
|
|
90
|
+
color: #a0c4ff;
|
|
91
|
+
font-size: 1.2rem;
|
|
92
|
+
margin-top: 10px;
|
|
93
|
+
letter-spacing: 2px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* 卡片网格 */
|
|
97
|
+
.cards-grid {
|
|
98
|
+
display: grid;
|
|
99
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
100
|
+
gap: 30px;
|
|
101
|
+
padding: 20px 0;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* 卡片样式 */
|
|
105
|
+
.pokemon-card {
|
|
106
|
+
background: linear-gradient(145deg, #ffffff 0%, #f0f4ff 100%);
|
|
107
|
+
border-radius: 20px;
|
|
108
|
+
padding: 25px;
|
|
109
|
+
position: relative;
|
|
110
|
+
cursor: pointer;
|
|
111
|
+
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
112
|
+
box-shadow:
|
|
113
|
+
0 10px 30px rgba(0,0,0,0.3),
|
|
114
|
+
inset 0 1px 0 rgba(255,255,255,0.8);
|
|
115
|
+
overflow: hidden;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.pokemon-card::before {
|
|
119
|
+
content: '';
|
|
120
|
+
position: absolute;
|
|
121
|
+
top: 0;
|
|
122
|
+
left: 0;
|
|
123
|
+
right: 0;
|
|
124
|
+
height: 120px;
|
|
125
|
+
border-radius: 20px 20px 0 0;
|
|
126
|
+
z-index: 0;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.pokemon-card:nth-child(1)::before { background: linear-gradient(135deg, #ff6b6b, #ffa500); }
|
|
130
|
+
.pokemon-card:nth-child(2)::before { background: linear-gradient(135deg, #4ecdc4, #44a08d); }
|
|
131
|
+
.pokemon-card:nth-child(3)::before { background: linear-gradient(135deg, #667eea, #764ba2); }
|
|
132
|
+
.pokemon-card:nth-child(4)::before { background: linear-gradient(135deg, #f093fb, #f5576c); }
|
|
133
|
+
.pokemon-card:nth-child(5)::before { background: linear-gradient(135deg, #ff9a9e, #fecfef); }
|
|
134
|
+
.pokemon-card:nth-child(6)::before { background: linear-gradient(135deg, #a18cd1, #fbc2eb); }
|
|
135
|
+
|
|
136
|
+
.pokemon-card:hover {
|
|
137
|
+
transform: translateY(-15px) scale(1.02);
|
|
138
|
+
box-shadow:
|
|
139
|
+
0 25px 50px rgba(0,0,0,0.4),
|
|
140
|
+
0 0 30px rgba(255, 215, 0, 0.3);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.pokemon-card:hover .pokemon-img {
|
|
144
|
+
transform: scale(1.1) rotate(5deg);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* 宝可梦图片 */
|
|
148
|
+
.img-container {
|
|
149
|
+
position: relative;
|
|
150
|
+
z-index: 1;
|
|
151
|
+
text-align: center;
|
|
152
|
+
margin-bottom: 15px;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.pokemon-img {
|
|
156
|
+
width: 160px;
|
|
157
|
+
height: 160px;
|
|
158
|
+
object-fit: contain;
|
|
159
|
+
filter: drop-shadow(0 8px 15px rgba(0,0,0,0.3));
|
|
160
|
+
transition: transform 0.4s ease;
|
|
161
|
+
animation: float 3s ease-in-out infinite;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
@keyframes float {
|
|
165
|
+
0%, 100% { transform: translateY(0); }
|
|
166
|
+
50% { transform: translateY(-10px); }
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* 卡片内容 */
|
|
170
|
+
.card-content {
|
|
171
|
+
position: relative;
|
|
172
|
+
z-index: 1;
|
|
173
|
+
text-align: center;
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.pokemon-name {
|
|
177
|
+
font-size: 1.6rem;
|
|
178
|
+
font-weight: 700;
|
|
179
|
+
color: #2d3436;
|
|
180
|
+
margin-bottom: 5px;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.pokemon-name-en {
|
|
184
|
+
font-size: 0.85rem;
|
|
185
|
+
color: #636e72;
|
|
186
|
+
text-transform: uppercase;
|
|
187
|
+
letter-spacing: 1px;
|
|
188
|
+
margin-bottom: 10px;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* 属性标签 */
|
|
192
|
+
.tags {
|
|
193
|
+
display: flex;
|
|
194
|
+
justify-content: center;
|
|
195
|
+
gap: 8px;
|
|
196
|
+
flex-wrap: wrap;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.tag {
|
|
200
|
+
padding: 5px 14px;
|
|
201
|
+
border-radius: 20px;
|
|
202
|
+
font-size: 0.8rem;
|
|
203
|
+
font-weight: 700;
|
|
204
|
+
color: white;
|
|
205
|
+
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.tag-type { background: linear-gradient(135deg, #e74c3c, #c0392b); }
|
|
209
|
+
.tag-gen { background: linear-gradient(135deg, #3498db, #2980b9); }
|
|
210
|
+
.tag-level { background: linear-gradient(135deg, #f39c12, #e67e22); }
|
|
211
|
+
|
|
212
|
+
/* 宝可梦介绍 */
|
|
213
|
+
.pokemon-desc {
|
|
214
|
+
font-size: 0.85rem;
|
|
215
|
+
color: #555;
|
|
216
|
+
line-height: 1.6;
|
|
217
|
+
margin-top: 12px;
|
|
218
|
+
padding: 0 5px;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* 底部装饰 */
|
|
222
|
+
.card-decoration {
|
|
223
|
+
position: absolute;
|
|
224
|
+
bottom: 10px;
|
|
225
|
+
right: 15px;
|
|
226
|
+
font-size: 2rem;
|
|
227
|
+
opacity: 0.15;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
/* 底部签名 */
|
|
231
|
+
footer {
|
|
232
|
+
text-align: center;
|
|
233
|
+
margin-top: 60px;
|
|
234
|
+
padding: 30px;
|
|
235
|
+
color: #7f8c8d;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
footer p {
|
|
239
|
+
font-size: 1rem;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.heart {
|
|
243
|
+
color: #e74c3c;
|
|
244
|
+
animation: heartbeat 1s ease-in-out infinite;
|
|
245
|
+
display: inline-block;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
@keyframes heartbeat {
|
|
249
|
+
0%, 100% { transform: scale(1); }
|
|
250
|
+
50% { transform: scale(1.2); }
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
/* 响应式 */
|
|
254
|
+
@media (max-width: 768px) {
|
|
255
|
+
h1 { font-size: 2.5rem; }
|
|
256
|
+
.cards-grid { grid-template-columns: 1fr; gap: 25px; }
|
|
257
|
+
.pokemon-img { width: 140px; height: 140px; }
|
|
258
|
+
}
|
|
259
|
+
</style>
|
|
260
|
+
</head>
|
|
261
|
+
<body>
|
|
262
|
+
<div class="container">
|
|
263
|
+
<header>
|
|
264
|
+
<h1>✨ 我的宝可梦图签 ✨</h1>
|
|
265
|
+
<p class="subtitle">—— 小小训练师的珍藏 collection ——</p>
|
|
266
|
+
</header>
|
|
267
|
+
|
|
268
|
+
<div class="cards-grid">
|
|
269
|
+
<!-- 皮卡丘 -->
|
|
270
|
+
<div class="pokemon-card">
|
|
271
|
+
<div class="img-container">
|
|
272
|
+
<img src="https://img.pokemondb.net/sprites/home/normal/pikachu-f.png" alt="皮卡丘" class="pokemon-img">
|
|
273
|
+
</div>
|
|
274
|
+
<div class="card-content">
|
|
275
|
+
<h2 class="pokemon-name">皮卡丘</h2>
|
|
276
|
+
<p class="pokemon-name-en">Pikachu</p>
|
|
277
|
+
<div class="tags">
|
|
278
|
+
<span class="tag tag-type">电</span>
|
|
279
|
+
<span class="tag tag-gen">初代</span>
|
|
280
|
+
<span class="tag tag-level">Lv.25</span>
|
|
281
|
+
</div>
|
|
282
|
+
<p class="pokemon-desc">电气鼠宝可梦，脸颊能储存电能。遇到危险时会竖起尾巴警告敌人，"皮卡皮卡"的叫声超级可爱！</p>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="card-decoration">⚡</div>
|
|
285
|
+
</div>
|
|
286
|
+
|
|
287
|
+
<!-- 喷火龙 -->
|
|
288
|
+
<div class="pokemon-card">
|
|
289
|
+
<div class="img-container">
|
|
290
|
+
<img src="https://img.pokemondb.net/sprites/home/normal/charizard.png" alt="喷火龙" class="pokemon-img">
|
|
291
|
+
</div>
|
|
292
|
+
<div class="card-content">
|
|
293
|
+
<h2 class="pokemon-name">喷火龙</h2>
|
|
294
|
+
<p class="pokemon-name-en">Charizard</p>
|
|
295
|
+
<div class="tags">
|
|
296
|
+
<span class="tag tag-type">火/飞行</span>
|
|
297
|
+
<span class="tag tag-gen">初代</span>
|
|
298
|
+
<span class="tag tag-level">Lv.100</span>
|
|
299
|
+
</div>
|
|
300
|
+
<p class="pokemon-desc">火焰宝可梦，尾巴上的火焰越烧越旺说明它越兴奋。能用翅膀飞到4000米高空，喷出的火焰可达2000度！</p>
|
|
301
|
+
</div>
|
|
302
|
+
<div class="card-decoration">🔥</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<!-- 超梦 -->
|
|
306
|
+
<div class="pokemon-card">
|
|
307
|
+
<div class="img-container">
|
|
308
|
+
<img src="https://img.pokemondb.net/sprites/home/normal/mewtwo.png" alt="超梦" class="pokemon-img">
|
|
309
|
+
</div>
|
|
310
|
+
<div class="card-content">
|
|
311
|
+
<h2 class="pokemon-name">超梦</h2>
|
|
312
|
+
<p class="pokemon-name-en">Mewtwo</p>
|
|
313
|
+
<div class="tags">
|
|
314
|
+
<span class="tag tag-type">超能</span>
|
|
315
|
+
<span class="tag tag-gen">传说</span>
|
|
316
|
+
<span class="tag tag-level">Lv.???</span>
|
|
317
|
+
</div>
|
|
318
|
+
<p class="pokemon-desc">最强超能力宝可梦！由梦幻的基因创造而成，拥有压倒性的超能力，一击就能粉碎整座城市！</p>
|
|
319
|
+
</div>
|
|
320
|
+
<div class="card-decoration">💠</div>
|
|
321
|
+
</div>
|
|
322
|
+
|
|
323
|
+
<!-- 伊布 -->
|
|
324
|
+
<div class="pokemon-card">
|
|
325
|
+
<div class="img-container">
|
|
326
|
+
<img src="https://img.pokemondb.net/sprites/home/normal/eevee.png" alt="伊布" class="pokemon-img">
|
|
327
|
+
</div>
|
|
328
|
+
<div class="card-content">
|
|
329
|
+
<h2 class="pokemon-name">伊布</h2>
|
|
330
|
+
<p class="pokemon-name-en">Eevee</p>
|
|
331
|
+
<div class="tags">
|
|
332
|
+
<span class="tag tag-type">一般</span>
|
|
333
|
+
<span class="tag tag-gen">初代</span>
|
|
334
|
+
<span class="tag tag-level">Lv.37</span>
|
|
335
|
+
</div>
|
|
336
|
+
<p class="pokemon-desc">进化宝可梦，拥有不可思议的进化能力！可以进化成水伊布、雷伊布、火伊布等多种形态，超神奇！</p>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="card-decoration">✨</div>
|
|
339
|
+
</div>
|
|
340
|
+
|
|
341
|
+
<!-- 烈空坐 -->
|
|
342
|
+
<div class="pokemon-card">
|
|
343
|
+
<div class="img-container">
|
|
344
|
+
<img src="https://img.pokemondb.net/sprites/home/normal/rayquaza.png" alt="烈空坐" class="pokemon-img">
|
|
345
|
+
</div>
|
|
346
|
+
<div class="card-content">
|
|
347
|
+
<h2 class="pokemon-name">烈空坐</h2>
|
|
348
|
+
<p class="pokemon-name-en">Rayquaza</p>
|
|
349
|
+
<div class="tags">
|
|
350
|
+
<span class="tag tag-type">龙/飞行</span>
|
|
351
|
+
<span class="tag tag-gen">传说</span>
|
|
352
|
+
<span class="tag tag-level">Lv.???</span>
|
|
353
|
+
</div>
|
|
354
|
+
<p class="pokemon-desc">天空之龙，生活在臭氧层的神兽！身体细长如龙，据说是掌控天空的存在，mega进化后更加霸气！</p>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="card-decoration">🌌</div>
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
<!-- 梦幻 -->
|
|
360
|
+
<div class="pokemon-card">
|
|
361
|
+
<div class="img-container">
|
|
362
|
+
<img src="https://img.pokemondb.net/sprites/home/normal/mew.png" alt="梦幻" class="pokemon-img">
|
|
363
|
+
</div>
|
|
364
|
+
<div class="card-content">
|
|
365
|
+
<h2 class="pokemon-name">梦幻</h2>
|
|
366
|
+
<p class="pokemon-name-en">Mew</p>
|
|
367
|
+
<div class="tags">
|
|
368
|
+
<span class="tag tag-type">超能</span>
|
|
369
|
+
<span class="tag tag-gen">传说</span>
|
|
370
|
+
<span class="tag tag-level">Lv.???</span>
|
|
371
|
+
</div>
|
|
372
|
+
<p class="pokemon-desc">梦幻宝可梦，据说拥有所有宝可梦的基因！会使用所有招式，传说它诞生于海洋中的单细胞生物……</p>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="card-decoration">🌸</div>
|
|
375
|
+
</div>
|
|
376
|
+
</div>
|
|
377
|
+
|
|
378
|
+
<footer>
|
|
379
|
+
<p>Made with <span class="heart">❤</span> by 孙依然 · 宝可梦图签 v1.0</p>
|
|
380
|
+
</footer>
|
|
381
|
+
</div>
|
|
382
|
+
|
|
383
|
+
<script>
|
|
384
|
+
// 点击卡片特效
|
|
385
|
+
document.querySelectorAll('.pokemon-card').forEach(card => {
|
|
386
|
+
card.addEventListener('click', function() {
|
|
387
|
+
this.style.transform = 'scale(0.95)';
|
|
388
|
+
setTimeout(() => {
|
|
389
|
+
this.style.transform = '';
|
|
390
|
+
}, 150);
|
|
391
|
+
});
|
|
392
|
+
});
|
|
393
|
+
|
|
394
|
+
// 卡片依次出现动画
|
|
395
|
+
const cards = document.querySelectorAll('.pokemon-card');
|
|
396
|
+
cards.forEach((card, index) => {
|
|
397
|
+
card.style.opacity = '0';
|
|
398
|
+
card.style.transform = 'translateY(50px)';
|
|
399
|
+
setTimeout(() => {
|
|
400
|
+
card.style.transition = 'all 0.6s ease';
|
|
401
|
+
card.style.opacity = '1';
|
|
402
|
+
card.style.transform = 'translateY(0)';
|
|
403
|
+
}, 200 + index * 150);
|
|
404
|
+
});
|
|
405
|
+
</script>
|
|
406
|
+
</body>
|
|
407
|
+
</html>
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>做一个我的卡牌图签</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { box-sizing: border-box; }
|
|
9
|
+
body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
|
|
10
|
+
.page { max-width: 1440px; margin: 0 auto; padding: 20px 20px 48px; }
|
|
11
|
+
.header-bar { background: linear-gradient(135deg,#5f82ff 0%,#8c74ff 100%); border-radius: 24px; padding: 20px 24px; box-shadow: 0 16px 36px rgba(92,108,192,.24); }
|
|
12
|
+
.header-left h1 { margin: 0; font-size: 26px; line-height: 1.3; color: #fff; font-weight: 800; }
|
|
13
|
+
.header-left .subtitle { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.88); }
|
|
14
|
+
.main-section { margin-top: 18px; }
|
|
15
|
+
.block { background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 28px rgba(100,122,166,.12); }
|
|
16
|
+
.content-layout { display: grid; grid-template-columns: 220px minmax(0,1fr) 220px; gap: 14px; align-items: stretch; }
|
|
17
|
+
.task-panel, .goal-panel { background: #f8faff; border: 1px solid #e7eefc; border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
|
|
18
|
+
.panel-group h3 { margin: 0 0 10px; color: #334d98; font-size: 17px; }
|
|
19
|
+
.task-item { margin-bottom: 10px; }
|
|
20
|
+
.task-item:last-child { margin-bottom: 0; }
|
|
21
|
+
.item-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: #7a89ad; }
|
|
22
|
+
.item-body { background: #fff; border: 1px solid #e7eefc; border-radius: 12px; padding: 10px 12px; font-size: 13px; color: #60708b; line-height: 1.7; }
|
|
23
|
+
.task-item .num { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: #edf2ff; color: #7a89ad; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
24
|
+
.star-item .num { background: #fff7dc; color: #b89a4f; }
|
|
25
|
+
.sample-frame-wrap { background: #f8faff; border: 1px solid #e7eefc; border-radius: 20px; padding: 14px; min-width: 0; }
|
|
26
|
+
.sample-frame-head { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 12px; }
|
|
27
|
+
.sample-frame-head h3 { margin: 0; color: #334d98; font-size: 17px; }
|
|
28
|
+
.tips-block { margin-top: 16px; background: #fff; border-radius: 24px; padding: 22px; box-shadow: 0 10px 28px rgba(100,122,166,.12); }
|
|
29
|
+
.tips-block h3 { margin: 0 0 14px; color: #334d98; font-size: 18px; }
|
|
30
|
+
.tips-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
|
|
31
|
+
.tip-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 16px; padding: 14px; }
|
|
32
|
+
.tip-title { font-size: 14px; font-weight: 700; color: #334d98; margin-bottom: 8px; }
|
|
33
|
+
.tip-desc { font-size: 13px; color: #60708b; line-height: 1.7; margin-bottom: 8px; }
|
|
34
|
+
.tip-prompt { font-size: 12px; color: #4f5f7c; line-height: 1.8; background: #fff; border: 1px dashed #d6e2ff; border-radius: 12px; padding: 10px 12px; }
|
|
35
|
+
iframe { width: 100%; height: 560px; border: 1px solid #dfe7fb; border-radius: 16px; background: #fff; display: block; }
|
|
36
|
+
@media (max-width: 960px) { .page { padding: 14px 12px 32px; } .header-bar { padding: 16px 18px; } .header-left h1 { font-size: 22px; } .header-left .subtitle { font-size: 12px; } .content-layout { grid-template-columns: 1fr; } .task-panel, .goal-panel, .sample-frame-wrap, .tips-block { padding: 14px; } .tips-list { grid-template-columns: 1fr; } iframe { height: 360px; } }
|
|
37
|
+
</style>
|
|
38
|
+
</head>
|
|
39
|
+
<body>
|
|
40
|
+
<div class="page">
|
|
41
|
+
<header class="header-bar">
|
|
42
|
+
<div class="header-left">
|
|
43
|
+
<h1>做一个我的卡牌图签</h1>
|
|
44
|
+
<p class="subtitle">先定主题，边用 AI 生成图片，边让 AI 搭网页框架，最后把图片换上去，一起完成一套图签。</p>
|
|
45
|
+
</div>
|
|
46
|
+
</header>
|
|
47
|
+
<div class="main-section">
|
|
48
|
+
<section class="block">
|
|
49
|
+
<div class="content-layout">
|
|
50
|
+
<div class="task-panel">
|
|
51
|
+
<div class="panel-group">
|
|
52
|
+
<h3>步骤</h3>
|
|
53
|
+
<div class="task-item"><div class="item-top"><span class="num">1</span><span>定好主题</span></div><div class="item-body">想好你要做什么主题（宝可梦、动漫角色、游戏人物都行），列出你想放的角色名。</div></div><div class="task-item"><div class="item-top"><span class="num">2</span><span>用 AI 生成图片</span></div><div class="item-body">把角色名告诉 AI，让它帮你生成图片。可以同时生成多张，边生成边存好。</div></div><div class="task-item"><div class="item-top"><span class="num">3</span><span>让 AI 搭网页框架</span></div><div class="item-body">告诉 AI 你的主题和卡片数量，让它生成一个图签网页框架，先不用管图片对不对。</div></div><div class="task-item"><div class="item-top"><span class="num">4</span><span>把图片替换进去</span></div><div class="item-body">把你生成好的图片链接，一张张填进网页里，让每张卡片配上自己的图。</div></div>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="sample-frame-wrap">
|
|
57
|
+
<div class="sample-frame-head"><h3>示范样例</h3></div>
|
|
58
|
+
<iframe src="__demo__.html" title="示范样例"></iframe>
|
|
59
|
+
</div>
|
|
60
|
+
<div class="goal-panel">
|
|
61
|
+
<div class="panel-group">
|
|
62
|
+
<h3>评价目标</h3>
|
|
63
|
+
<div class="task-item star-item"><div class="item-top"><span class="num">一星</span><span>一星</span></div><div class="item-body">换了角色名字和图片，网页能正常显示。</div></div><div class="task-item star-item"><div class="item-top"><span class="num">二星</span><span>二星</span></div><div class="item-body">每张卡片都有自己写的简介，标签也改好了。</div></div><div class="task-item star-item"><div class="item-top"><span class="num">三星</span><span>三星</span></div><div class="item-body">配色或装饰有自己的想法，整套图签看起来有设计感。</div></div>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</section>
|
|
68
|
+
<section class="tips-block">
|
|
69
|
+
<h3>小提示</h3>
|
|
70
|
+
<div class="tips-list">
|
|
71
|
+
<div class="tip-item"><div class="tip-title">生图和建页可以同时开始</div><div class="tip-desc">不用等图片全部生成好再做网页。两件事同时让 AI 帮你做，谁先好谁先用。</div><div class="tip-prompt">参考提示词：帮我生成[角色名]的图片，要卡通风格，背景透明</div></div><div class="tip-item"><div class="tip-title">先搭框架，图片后换</div><div class="tip-desc">让 AI 生成网页框架时，图片链接先随便填一个占位的，等真正的图片准备好再换上去。</div><div class="tip-prompt">参考提示词：帮我做一个[主题]图签网页，放[N]张卡片，图片先用占位链接</div></div><div class="tip-item"><div class="tip-title">图片怎么放进网页</div><div class="tip-desc">把图片链接复制出来，找到对应卡片的 img 标签，把 src="" 里的内容换掉就行。</div><div class="tip-prompt">参考提示词：帮我把第[N]张卡片的图片换成这个链接：[粘贴链接]</div></div><div class="tip-item"><div class="tip-title">图片显示不出来</div><div class="tip-desc">检查链接是否以 https:// 开头，中间不能有空格或换行。</div><div class="tip-prompt">参考提示词：我的图片显示不出来，链接是[粘贴链接]，帮我检查哪里有问题</div></div>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
</div>
|
|
75
|
+
</div>
|
|
76
|
+
</body>
|
|
77
|
+
</html>
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
{
|
|
2
|
+
"任务标题": "做一个我的卡牌图签",
|
|
3
|
+
"一句话说明": "先定主题，边用 AI 生成图片，边让 AI 搭网页框架，最后把图片换上去，一起完成一套图签。",
|
|
4
|
+
"步骤": [
|
|
5
|
+
{
|
|
6
|
+
"标题": "定好主题",
|
|
7
|
+
"说明": "想好你要做什么主题（宝可梦、动漫角色、游戏人物都行），列出你想放的角色名。"
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
"标题": "用 AI 生成图片",
|
|
11
|
+
"说明": "把角色名告诉 AI，让它帮你生成图片。可以同时生成多张，边生成边存好。"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
"标题": "让 AI 搭网页框架",
|
|
15
|
+
"说明": "告诉 AI 你的主题和卡片数量，让它生成一个图签网页框架，先不用管图片对不对。"
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
"标题": "把图片替换进去",
|
|
19
|
+
"说明": "把你生成好的图片链接，一张张填进网页里，让每张卡片配上自己的图。"
|
|
20
|
+
}
|
|
21
|
+
],
|
|
22
|
+
"评价目标": [
|
|
23
|
+
{
|
|
24
|
+
"等级": "一星",
|
|
25
|
+
"说明": "换了角色名字和图片，网页能正常显示。"
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
"等级": "二星",
|
|
29
|
+
"说明": "每张卡片都有自己写的简介，标签也改好了。"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"等级": "三星",
|
|
33
|
+
"说明": "配色或装饰有自己的想法，整套图签看起来有设计感。"
|
|
34
|
+
}
|
|
35
|
+
],
|
|
36
|
+
"示例区标题": "示范样例",
|
|
37
|
+
"示例页面文件": "__demo__.html",
|
|
38
|
+
"小提示": [
|
|
39
|
+
{
|
|
40
|
+
"标题": "生图和建页可以同时开始",
|
|
41
|
+
"说明": "不用等图片全部生成好再做网页。两件事同时让 AI 帮你做，谁先好谁先用。",
|
|
42
|
+
"参考提示词": "帮我生成[角色名]的图片，要卡通风格，背景透明"
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"标题": "先搭框架，图片后换",
|
|
46
|
+
"说明": "让 AI 生成网页框架时，图片链接先随便填一个占位的，等真正的图片准备好再换上去。",
|
|
47
|
+
"参考提示词": "帮我做一个[主题]图签网页，放[N]张卡片，图片先用占位链接"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"标题": "图片怎么放进网页",
|
|
51
|
+
"说明": "把图片链接复制出来，找到对应卡片的 img 标签，把 src=\"\" 里的内容换掉就行。",
|
|
52
|
+
"参考提示词": "帮我把第[N]张卡片的图片换成这个链接：[粘贴链接]"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"标题": "图片显示不出来",
|
|
56
|
+
"说明": "检查链接是否以 https:// 开头，中间不能有空格或换行。",
|
|
57
|
+
"参考提示词": "我的图片显示不出来，链接是[粘贴链接]，帮我检查哪里有问题"
|
|
58
|
+
}
|
|
59
|
+
]
|
|
60
|
+
}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>A107 · 做一个我的卡牌图签</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { box-sizing: border-box; }
|
|
9
|
+
body { margin: 0; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f7fb; color: #24324a; }
|
|
10
|
+
.page { max-width: 1400px; margin: 0 auto; padding: 20px; }
|
|
11
|
+
.hero { background: linear-gradient(135deg,#5f82ff 0%,#8c74ff 100%); color: #fff; border-radius: 24px; padding: 22px 24px; box-shadow: 0 16px 36px rgba(92,108,192,.22); }
|
|
12
|
+
.hero h1 { margin: 0; font-size: 28px; }
|
|
13
|
+
.hero p { margin: 8px 0 0; opacity: .92; font-size: 14px; }
|
|
14
|
+
.layout { margin-top: 18px; display: grid; grid-template-columns: 360px minmax(0,1fr); gap: 16px; align-items: start; }
|
|
15
|
+
.sidebar { display: grid; gap: 16px; }
|
|
16
|
+
.card, .preview-card { background: #fff; border: 1px solid #e7eefc; border-radius: 20px; padding: 18px; box-shadow: 0 10px 24px rgba(100,122,166,.08); }
|
|
17
|
+
.card h2, .preview-head h2 { margin: 0 0 12px; font-size: 18px; color: #314a96; }
|
|
18
|
+
.meta-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
|
|
19
|
+
.meta-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; }
|
|
20
|
+
.meta-item .label { font-size: 12px; color: #7a89ad; margin-bottom: 6px; }
|
|
21
|
+
.meta-item .value { font-size: 14px; color: #24324a; font-weight: 700; }
|
|
22
|
+
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
23
|
+
.tag { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; background: #edf2ff; color: #4c65c3; font-size: 13px; font-weight: 700; }
|
|
24
|
+
.list { display: grid; gap: 10px; }
|
|
25
|
+
.list-item { background: #f8faff; border: 1px solid #e7eefc; border-radius: 14px; padding: 12px; line-height: 1.7; font-size: 14px; color: #60708b; }
|
|
26
|
+
.issue { border-left: 4px solid #8c74ff; background: #faf8ff; }
|
|
27
|
+
.issue strong { color: #314a96; display: block; margin: 6px 0; }
|
|
28
|
+
iframe { width: 100%; height: 900px; border: 1px solid #dfe7fb; border-radius: 16px; background: #fff; display: block; }
|
|
29
|
+
.empty-box { background: #f8faff; border: 1px dashed #cfdcff; border-radius: 14px; padding: 24px; color: #7a89ad; line-height: 1.8; }
|
|
30
|
+
@media (max-width: 960px) { .layout { grid-template-columns: 1fr; } iframe { height: 420px; } }
|
|
31
|
+
</style>
|
|
32
|
+
</head>
|
|
33
|
+
<body>
|
|
34
|
+
<div class="page">
|
|
35
|
+
<section class="hero">
|
|
36
|
+
<h1>A107 · 做一个我的卡牌图签</h1>
|
|
37
|
+
<p>这是根据教师 JSON 自动生成的可视化查看页，左边快速扫读，右边直接看作品预览。</p>
|
|
38
|
+
</section>
|
|
39
|
+
<section class="layout">
|
|
40
|
+
<div class="sidebar">
|
|
41
|
+
<div class="card"><h2>基础信息</h2><div class="meta-grid"><div class="meta-item"><div class="label">主能力标签</div><div class="value">第二能力：表达构建</div></div><div class="meta-item"><div class="label">任务类型标签</div><div class="value">视听表达</div></div></div></div>
|
|
42
|
+
<div class="card"><h2>适合学生类型</h2><div class="tags"><span class="tag">有兴趣爱好的学生（游戏、动漫、宝可梦等）</span><span class="tag">需要有成就感才能启动的学生</span><span class="tag">对网页有好奇心的初学者</span></div></div>
|
|
43
|
+
<div class="card"><h2>训练重点</h2><div class="list"><div class="list-item">图片生成和网页搭建同步推进，不等一方完成再开始另一方</div><div class="list-item">用 AI 协作完成两条并行任务（生图 + 建页）</div><div class="list-item">把 AI 产出的图片素材接入自己的网页</div></div></div>
|
|
44
|
+
<div class="card"><h2>卡点和解决方案</h2><div class="list"><div class="list-item issue"><strong>卡点</strong>不知道先做图片还是先做网页<strong>解决方案</strong>明确告诉学生两件事同时开始：一边让 AI 生成图片，一边让 AI 搭框架，不用等对方</div><div class="list-item issue"><strong>卡点</strong>AI 生成的图片没有可用链接<strong>解决方案</strong>引导学生把图片上传到图床或直接用 AI 给出的临时链接，先填进去看效果</div><div class="list-item issue"><strong>卡点</strong>网页框架生成好了但图片还没好<strong>解决方案</strong>让学生先用占位图撑住版面，图片好了再一张张换上去</div><div class="list-item issue"><strong>卡点</strong>图片换进去显示不出来<strong>解决方案</strong>检查链接格式是否完整（https:// 开头），确认没有多余空格或换行</div></div></div>
|
|
45
|
+
<div class="card"><h2>可拓展方向</h2><div class="list"><div class="list-item">换成完全不同的主题（比如全部传说宝可梦、最强反派、最爱的食物）</div><div class="list-item">加更多张卡片（超过6张）</div><div class="list-item">给卡片加点击音效或更炫的悬停特效</div></div></div>
|
|
46
|
+
<div class="card"><h2>课后作业</h2><div class="list"><div class="list-item">回家再加3张新卡片</div><div class="list-item">给家人介绍你最喜欢的那个角色，说说为什么选它</div></div></div>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="preview-card"><div class="preview-head"><h2>作品预览</h2></div><iframe src="__demo__.html" title="作品预览"></iframe></div>
|
|
49
|
+
</section>
|
|
50
|
+
</div>
|
|
51
|
+
</body>
|
|
52
|
+
</html>
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
{
|
|
2
|
+
"任务类别": "A",
|
|
3
|
+
"任务编号": "107",
|
|
4
|
+
"任务名称": "做一个我的卡牌图签",
|
|
5
|
+
"主能力标签": "第二能力：表达构建",
|
|
6
|
+
"任务类型标签": "视听表达",
|
|
7
|
+
"适合学生类型": [
|
|
8
|
+
"有兴趣爱好的学生（游戏、动漫、宝可梦等）",
|
|
9
|
+
"需要有成就感才能启动的学生",
|
|
10
|
+
"对网页有好奇心的初学者"
|
|
11
|
+
],
|
|
12
|
+
"训练重点": [
|
|
13
|
+
"图片生成和网页搭建同步推进，不等一方完成再开始另一方",
|
|
14
|
+
"用 AI 协作完成两条并行任务（生图 + 建页）",
|
|
15
|
+
"把 AI 产出的图片素材接入自己的网页"
|
|
16
|
+
],
|
|
17
|
+
"卡点和解决方案": [
|
|
18
|
+
{
|
|
19
|
+
"卡点": "不知道先做图片还是先做网页",
|
|
20
|
+
"解决方案": "明确告诉学生两件事同时开始：一边让 AI 生成图片，一边让 AI 搭框架，不用等对方"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"卡点": "AI 生成的图片没有可用链接",
|
|
24
|
+
"解决方案": "引导学生把图片上传到图床或直接用 AI 给出的临时链接，先填进去看效果"
|
|
25
|
+
},
|
|
26
|
+
{
|
|
27
|
+
"卡点": "网页框架生成好了但图片还没好",
|
|
28
|
+
"解决方案": "让学生先用占位图撑住版面，图片好了再一张张换上去"
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
"卡点": "图片换进去显示不出来",
|
|
32
|
+
"解决方案": "检查链接格式是否完整（https:// 开头），确认没有多余空格或换行"
|
|
33
|
+
}
|
|
34
|
+
],
|
|
35
|
+
"可拓展方向": [
|
|
36
|
+
"换成完全不同的主题（比如全部传说宝可梦、最强反派、最爱的食物）",
|
|
37
|
+
"加更多张卡片（超过6张）",
|
|
38
|
+
"给卡片加点击音效或更炫的悬停特效"
|
|
39
|
+
],
|
|
40
|
+
"课后作业": [
|
|
41
|
+
"回家再加3张新卡片",
|
|
42
|
+
"给家人介绍你最喜欢的那个角色，说说为什么选它"
|
|
43
|
+
],
|
|
44
|
+
"_id": "c5038b9f"
|
|
45
|
+
}
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="zh-CN">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>做一个我的卡牌图签</title>
|
|
7
|
+
<style>
|
|
8
|
+
* { box-sizing: border-box; }
|
|
9
|
+
body {
|
|
10
|
+
margin: 0;
|
|
11
|
+
padding: 24px;
|
|
12
|
+
font-family: monospace;
|
|
13
|
+
background: #f6f8fc;
|
|
14
|
+
color: #1f2937;
|
|
15
|
+
}
|
|
16
|
+
.grid {
|
|
17
|
+
display: grid;
|
|
18
|
+
grid-template-columns: 1fr 1fr;
|
|
19
|
+
gap: 20px;
|
|
20
|
+
align-items: start;
|
|
21
|
+
}
|
|
22
|
+
h2 {
|
|
23
|
+
margin: 0 0 10px;
|
|
24
|
+
font-size: 18px;
|
|
25
|
+
}
|
|
26
|
+
pre {
|
|
27
|
+
margin: 0;
|
|
28
|
+
white-space: pre-wrap;
|
|
29
|
+
word-break: break-word;
|
|
30
|
+
background: #ffffff;
|
|
31
|
+
border: 1px solid #dbe3f0;
|
|
32
|
+
border-radius: 12px;
|
|
33
|
+
padding: 16px;
|
|
34
|
+
line-height: 1.7;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
</head>
|
|
38
|
+
<body>
|
|
39
|
+
<!--
|
|
40
|
+
[AI 编辑说明]
|
|
41
|
+
这是学生作品的主文件。当你开始编辑时：
|
|
42
|
+
1. 先删除 <body> 内所有现有内容（包括本注释）
|
|
43
|
+
2. 根据参考材料（__demo__.html 等 __XXX__ 文件）重新制作学生作品
|
|
44
|
+
__XXX__ 文件只读，不要修改。
|
|
45
|
+
-->
|
|
46
|
+
<div class="grid">
|
|
47
|
+
<section>
|
|
48
|
+
<h2>评价目标</h2>
|
|
49
|
+
<pre>[
|
|
50
|
+
{
|
|
51
|
+
"等级": "一星",
|
|
52
|
+
"说明": "换了角色名字和图片，网页能正常显示。"
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"等级": "二星",
|
|
56
|
+
"说明": "每张卡片都有自己写的简介，标签也改好了。"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"等级": "三星",
|
|
60
|
+
"说明": "配色或装饰有自己的想法，整套图签看起来有设计感。"
|
|
61
|
+
}
|
|
62
|
+
]</pre>
|
|
63
|
+
</section>
|
|
64
|
+
<section>
|
|
65
|
+
<h2>步骤</h2>
|
|
66
|
+
<pre>[
|
|
67
|
+
{
|
|
68
|
+
"标题": "定好主题",
|
|
69
|
+
"说明": "想好你要做什么主题（宝可梦、动漫角色、游戏人物都行），列出你想放的角色名。"
|
|
70
|
+
},
|
|
71
|
+
{
|
|
72
|
+
"标题": "用 AI 生成图片",
|
|
73
|
+
"说明": "把角色名告诉 AI，让它帮你生成图片。可以同时生成多张，边生成边存好。"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"标题": "让 AI 搭网页框架",
|
|
77
|
+
"说明": "告诉 AI 你的主题和卡片数量，让它生成一个图签网页框架，先不用管图片对不对。"
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"标题": "把图片替换进去",
|
|
81
|
+
"说明": "把你生成好的图片链接，一张张填进网页里，让每张卡片配上自己的图。"
|
|
82
|
+
}
|
|
83
|
+
]</pre>
|
|
84
|
+
</section>
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<script type="application/json" id="task-data">
|
|
88
|
+
{
|
|
89
|
+
"任务标题": "做一个我的卡牌图签",
|
|
90
|
+
"一句话说明": "先定主题，边用 AI 生成图片，边让 AI 搭网页框架，最后把图片换上去，一起完成一套图签。",
|
|
91
|
+
"步骤": [
|
|
92
|
+
{
|
|
93
|
+
"标题": "定好主题",
|
|
94
|
+
"说明": "想好你要做什么主题（宝可梦、动漫角色、游戏人物都行），列出你想放的角色名。"
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
"标题": "用 AI 生成图片",
|
|
98
|
+
"说明": "把角色名告诉 AI，让它帮你生成图片。可以同时生成多张，边生成边存好。"
|
|
99
|
+
},
|
|
100
|
+
{
|
|
101
|
+
"标题": "让 AI 搭网页框架",
|
|
102
|
+
"说明": "告诉 AI 你的主题和卡片数量，让它生成一个图签网页框架，先不用管图片对不对。"
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
"标题": "把图片替换进去",
|
|
106
|
+
"说明": "把你生成好的图片链接，一张张填进网页里，让每张卡片配上自己的图。"
|
|
107
|
+
}
|
|
108
|
+
],
|
|
109
|
+
"评价目标": [
|
|
110
|
+
{
|
|
111
|
+
"等级": "一星",
|
|
112
|
+
"说明": "换了角色名字和图片，网页能正常显示。"
|
|
113
|
+
},
|
|
114
|
+
{
|
|
115
|
+
"等级": "二星",
|
|
116
|
+
"说明": "每张卡片都有自己写的简介，标签也改好了。"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"等级": "三星",
|
|
120
|
+
"说明": "配色或装饰有自己的想法，整套图签看起来有设计感。"
|
|
121
|
+
}
|
|
122
|
+
],
|
|
123
|
+
"示例区标题": "示范样例",
|
|
124
|
+
"示例页面文件": "__demo__.html",
|
|
125
|
+
"小提示": [
|
|
126
|
+
{
|
|
127
|
+
"标题": "生图和建页可以同时开始",
|
|
128
|
+
"说明": "不用等图片全部生成好再做网页。两件事同时让 AI 帮你做，谁先好谁先用。",
|
|
129
|
+
"参考提示词": "帮我生成[角色名]的图片，要卡通风格，背景透明"
|
|
130
|
+
},
|
|
131
|
+
{
|
|
132
|
+
"标题": "先搭框架，图片后换",
|
|
133
|
+
"说明": "让 AI 生成网页框架时，图片链接先随便填一个占位的，等真正的图片准备好再换上去。",
|
|
134
|
+
"参考提示词": "帮我做一个[主题]图签网页，放[N]张卡片，图片先用占位链接"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"标题": "图片怎么放进网页",
|
|
138
|
+
"说明": "把图片链接复制出来，找到对应卡片的 img 标签，把 src=\"\" 里的内容换掉就行。",
|
|
139
|
+
"参考提示词": "帮我把第[N]张卡片的图片换成这个链接：[粘贴链接]"
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
"标题": "图片显示不出来",
|
|
143
|
+
"说明": "检查链接是否以 https:// 开头，中间不能有空格或换行。",
|
|
144
|
+
"参考提示词": "我的图片显示不出来，链接是[粘贴链接]，帮我检查哪里有问题"
|
|
145
|
+
}
|
|
146
|
+
]
|
|
147
|
+
}
|
|
148
|
+
</script>
|
|
149
|
+
</body>
|
|
150
|
+
</html>
|