1420 lines
62 KiB
HTML
1420 lines
62 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>我是大作家（上）- AICODE课程</title>
|
||
|
||
<!-- 活泼童趣字体 -->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ===========================================
|
||
CSS CUSTOM PROPERTIES (童趣主题)
|
||
=========================================== */
|
||
:root {
|
||
/* 温暖活泼的配色 */
|
||
--bg-primary: #FFF8E7;
|
||
--bg-secondary: #FFE4B5;
|
||
--bg-accent-1: #FFD6E8;
|
||
--bg-accent-2: #C8E6C9;
|
||
--bg-accent-3: #B3E5FC;
|
||
--text-primary: #4A4A4A;
|
||
--text-secondary: #6B6B6B;
|
||
--accent-orange: #FF8A65;
|
||
--accent-pink: #F48FB1;
|
||
--accent-blue: #4FC3F7;
|
||
--accent-green: #81C784;
|
||
--accent-purple: #BA68C8;
|
||
--shadow-soft: rgba(0, 0, 0, 0.08);
|
||
|
||
/* 字体 */
|
||
--font-display: 'ZCOOL KuaiLe', cursive;
|
||
--font-body: 'Noto Sans SC', sans-serif;
|
||
|
||
/* 字体大小 */
|
||
--title-size: clamp(2rem, 6vw, 4.5rem);
|
||
--h2-size: clamp(1.5rem, 4vw, 3rem);
|
||
--h3-size: clamp(1.25rem, 3vw, 2rem);
|
||
--body-size: clamp(0.9rem, 1.5vw, 1.125rem);
|
||
--small-size: clamp(0.75rem, 1.2vw, 0.95rem);
|
||
|
||
/* 间距 */
|
||
--slide-padding: clamp(1.5rem, 5vw, 4rem);
|
||
--content-gap: clamp(1rem, 2.5vw, 2rem);
|
||
--element-gap: clamp(0.5rem, 1.5vw, 1rem);
|
||
|
||
/* 动画 */
|
||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
|
||
--duration-normal: 0.6s;
|
||
}
|
||
|
||
/* ===========================================
|
||
VIEWPORT FITTING: MANDATORY BASE STYLES
|
||
=========================================== */
|
||
html, body {
|
||
height: 100%;
|
||
overflow-x: hidden;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
scroll-snap-type: y mandatory;
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-body);
|
||
background: var(--bg-primary);
|
||
color: var(--text-primary);
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.slide {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
height: 100dvh;
|
||
overflow: hidden;
|
||
scroll-snap-align: start;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
background: var(--bg-primary);
|
||
}
|
||
|
||
.slide-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
max-height: 100%;
|
||
overflow: hidden;
|
||
padding: var(--slide-padding);
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* ===========================================
|
||
装饰性背景元素
|
||
=========================================== */
|
||
.bg-shapes::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -10%;
|
||
right: -5%;
|
||
width: 300px;
|
||
height: 300px;
|
||
background: radial-gradient(circle, var(--bg-accent-1) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
opacity: 0.6;
|
||
z-index: 1;
|
||
}
|
||
|
||
.bg-shapes::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -10%;
|
||
left: -5%;
|
||
width: 250px;
|
||
height: 250px;
|
||
background: radial-gradient(circle, var(--bg-accent-3) 0%, transparent 70%);
|
||
border-radius: 50%;
|
||
opacity: 0.5;
|
||
z-index: 1;
|
||
}
|
||
|
||
.floating-shape {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
opacity: 0.15;
|
||
animation: float 6s ease-in-out infinite;
|
||
z-index: 1;
|
||
}
|
||
|
||
.shape-1 { width: 80px; height: 80px; background: var(--accent-pink); top: 20%; left: 10%; animation-delay: 0s; }
|
||
.shape-2 { width: 60px; height: 60px; background: var(--accent-blue); top: 60%; right: 15%; animation-delay: 1.5s; }
|
||
.shape-3 { width: 100px; height: 100px; background: var(--accent-green); bottom: 20%; left: 20%; animation-delay: 3s; }
|
||
.shape-4 { width: 50px; height: 50px; background: var(--accent-orange); top: 30%; right: 25%; animation-delay: 2s; }
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||
50% { transform: translateY(-20px) rotate(10deg); }
|
||
}
|
||
|
||
/* ===========================================
|
||
进度条
|
||
=========================================== */
|
||
.progress-bar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
height: 6px;
|
||
background: linear-gradient(90deg, var(--accent-orange), var(--accent-pink), var(--accent-blue));
|
||
z-index: 1000;
|
||
transition: width 0.3s ease;
|
||
border-radius: 0 3px 3px 0;
|
||
}
|
||
|
||
/* ===========================================
|
||
导航点
|
||
=========================================== */
|
||
.nav-dots {
|
||
position: fixed;
|
||
right: clamp(1rem, 3vw, 2rem);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.75rem;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.nav-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
background: rgba(0, 0, 0, 0.15);
|
||
cursor: pointer;
|
||
transition: all 0.3s var(--ease-bounce);
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.nav-dot:hover {
|
||
transform: scale(1.3);
|
||
background: var(--accent-orange);
|
||
}
|
||
|
||
.nav-dot.active {
|
||
background: var(--accent-orange);
|
||
border-color: #fff;
|
||
box-shadow: 0 0 0 3px rgba(255, 138, 101, 0.3);
|
||
transform: scale(1.2);
|
||
}
|
||
|
||
/* ===========================================
|
||
标题样式
|
||
=========================================== */
|
||
h1, h2, h3 {
|
||
font-family: var(--font-display);
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
h1 {
|
||
font-size: var(--title-size);
|
||
color: var(--text-primary);
|
||
text-shadow: 3px 3px 0 rgba(255, 138, 101, 0.2);
|
||
}
|
||
|
||
h2 {
|
||
font-size: var(--h2-size);
|
||
color: var(--text-primary);
|
||
margin-bottom: var(--content-gap);
|
||
}
|
||
|
||
h3 {
|
||
font-size: var(--h3-size);
|
||
color: var(--text-secondary);
|
||
margin-bottom: var(--element-gap);
|
||
}
|
||
|
||
/* ===========================================
|
||
内容卡片
|
||
=========================================== */
|
||
.card {
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
padding: clamp(1rem, 2.5vw, 1.75rem);
|
||
box-shadow:
|
||
0 4px 20px var(--shadow-soft),
|
||
0 0 0 1px rgba(255, 255, 255, 0.5) inset;
|
||
max-width: min(90vw, 900px);
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.card-accent {
|
||
border-left: 5px solid var(--accent-orange);
|
||
}
|
||
|
||
.card-pink { border-left-color: var(--accent-pink); }
|
||
.card-blue { border-left-color: var(--accent-blue); }
|
||
.card-green { border-left-color: var(--accent-green); }
|
||
.card-purple { border-left-color: var(--accent-purple); }
|
||
|
||
/* ===========================================
|
||
列表样式
|
||
=========================================== */
|
||
.feature-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: var(--element-gap);
|
||
}
|
||
|
||
.feature-list li {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 0.75rem;
|
||
font-size: var(--body-size);
|
||
}
|
||
|
||
.feature-list li::before {
|
||
content: '🌟';
|
||
flex-shrink: 0;
|
||
font-size: 1.2em;
|
||
}
|
||
|
||
.bullet-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: calc(var(--element-gap) * 0.75);
|
||
}
|
||
|
||
.bullet-list li {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
font-size: var(--body-size);
|
||
}
|
||
|
||
.bullet-list li::before {
|
||
content: '•';
|
||
color: var(--accent-orange);
|
||
font-weight: bold;
|
||
font-size: 1.5em;
|
||
line-height: 0;
|
||
}
|
||
|
||
/* ===========================================
|
||
故事类型卡片网格
|
||
=========================================== */
|
||
.story-types {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
|
||
gap: clamp(0.75rem, 2vw, 1.25rem);
|
||
width: 100%;
|
||
}
|
||
|
||
.story-type-card {
|
||
background: #fff;
|
||
border-radius: 16px;
|
||
padding: clamp(0.75rem, 2vw, 1.25rem);
|
||
text-align: center;
|
||
box-shadow: 0 4px 15px var(--shadow-soft);
|
||
transition: transform 0.3s var(--ease-bounce), box-shadow 0.3s ease;
|
||
cursor: pointer;
|
||
border: 3px solid transparent;
|
||
}
|
||
|
||
.story-type-card:hover {
|
||
transform: translateY(-8px) scale(1.02);
|
||
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
|
||
}
|
||
|
||
.story-type-card.type-a { border-color: var(--accent-pink); }
|
||
.story-type-card.type-b { border-color: var(--accent-purple); }
|
||
.story-type-card.type-c { border-color: var(--accent-blue); }
|
||
.story-type-card.type-d { border-color: var(--accent-green); }
|
||
.story-type-card.type-e { border-color: var(--accent-orange); }
|
||
|
||
.type-icon {
|
||
font-size: clamp(2rem, 4vw, 3rem);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.type-name {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(0.9rem, 2vw, 1.25rem);
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.type-desc {
|
||
font-size: var(--small-size);
|
||
color: var(--text-secondary);
|
||
line-height: 1.4;
|
||
}
|
||
|
||
/* ===========================================
|
||
角色卡样式
|
||
=========================================== */
|
||
.character-card {
|
||
background: linear-gradient(135deg, #fff 0%, #FFF8E7 100%);
|
||
border-radius: 20px;
|
||
padding: clamp(1rem, 3vw, 2rem);
|
||
border: 3px dashed var(--accent-orange);
|
||
max-width: min(90vw, 700px);
|
||
margin: 0 auto;
|
||
width: 100%;
|
||
}
|
||
|
||
.character-field {
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.75rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.field-label {
|
||
font-family: var(--font-display);
|
||
color: var(--accent-orange);
|
||
font-size: clamp(1rem, 2.5vw, 1.5rem);
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.field-value {
|
||
flex: 1;
|
||
border-bottom: 2px dotted var(--accent-orange);
|
||
min-height: 1.5em;
|
||
font-size: var(--body-size);
|
||
padding: 0.25rem 0.5rem;
|
||
}
|
||
|
||
.field-options {
|
||
font-size: var(--small-size);
|
||
color: var(--text-secondary);
|
||
margin-left: 1.5rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
/* ===========================================
|
||
Markdown符号展示
|
||
=========================================== */
|
||
.markdown-symbols {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: clamp(1rem, 3vw, 2rem);
|
||
margin-top: var(--content-gap);
|
||
}
|
||
|
||
.symbol-card {
|
||
background: #fff;
|
||
border-radius: 20px;
|
||
padding: clamp(1rem, 3vw, 2rem);
|
||
text-align: center;
|
||
min-width: min(200px, 80vw);
|
||
box-shadow: 0 6px 25px var(--shadow-soft);
|
||
transition: transform 0.3s var(--ease-bounce);
|
||
}
|
||
|
||
.symbol-card:hover {
|
||
transform: scale(1.05) rotate(-2deg);
|
||
}
|
||
|
||
.symbol-icon {
|
||
font-family: 'Courier New', monospace;
|
||
font-size: clamp(2rem, 5vw, 3.5rem);
|
||
font-weight: bold;
|
||
color: var(--accent-orange);
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.symbol-name {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
|
||
color: var(--text-primary);
|
||
}
|
||
|
||
.symbol-effect {
|
||
font-size: var(--small-size);
|
||
color: var(--text-secondary);
|
||
margin-top: 0.5rem;
|
||
}
|
||
|
||
/* ===========================================
|
||
地点选项
|
||
=========================================== */
|
||
.location-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
|
||
gap: clamp(0.75rem, 2vw, 1rem);
|
||
width: 100%;
|
||
}
|
||
|
||
.location-item {
|
||
background: #fff;
|
||
border-radius: 12px;
|
||
padding: clamp(0.75rem, 2vw, 1rem);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
box-shadow: 0 3px 12px var(--shadow-soft);
|
||
border-left: 4px solid var(--accent-blue);
|
||
}
|
||
|
||
.location-num {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 50%;
|
||
background: var(--accent-blue);
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
flex-shrink: 0;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.location-text {
|
||
font-size: var(--body-size);
|
||
}
|
||
|
||
/* ===========================================
|
||
动画效果
|
||
=========================================== */
|
||
.reveal {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.6s var(--ease-out-expo),
|
||
transform 0.6s var(--ease-out-expo);
|
||
}
|
||
|
||
.slide.visible .reveal {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
.reveal-scale {
|
||
opacity: 0;
|
||
transform: scale(0.8);
|
||
transition: opacity 0.6s var(--ease-out-expo),
|
||
transform 0.6s var(--ease-bounce);
|
||
}
|
||
|
||
.slide.visible .reveal-scale {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
.reveal-rotate {
|
||
opacity: 0;
|
||
transform: rotate(-10deg) scale(0.9);
|
||
transition: opacity 0.6s var(--ease-out-expo),
|
||
transform 0.6s var(--ease-bounce);
|
||
}
|
||
|
||
.slide.visible .reveal-rotate {
|
||
opacity: 1;
|
||
transform: rotate(0) scale(1);
|
||
}
|
||
|
||
/* 子元素依次显示 */
|
||
.stagger-children > *:nth-child(1) { transition-delay: 0.1s; }
|
||
.stagger-children > *:nth-child(2) { transition-delay: 0.2s; }
|
||
.stagger-children > *:nth-child(3) { transition-delay: 0.3s; }
|
||
.stagger-children > *:nth-child(4) { transition-delay: 0.4s; }
|
||
.stagger-children > *:nth-child(5) { transition-delay: 0.5s; }
|
||
.stagger-children > *:nth-child(6) { transition-delay: 0.6s; }
|
||
|
||
/* ===========================================
|
||
编辑功能
|
||
=========================================== */
|
||
.edit-hotzone {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 80px;
|
||
height: 80px;
|
||
z-index: 10000;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.edit-toggle {
|
||
position: fixed;
|
||
top: 1rem;
|
||
left: 1rem;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, var(--accent-orange), var(--accent-pink));
|
||
border: none;
|
||
color: #fff;
|
||
font-size: 1.25rem;
|
||
cursor: pointer;
|
||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||
opacity: 0;
|
||
pointer-events: none;
|
||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||
z-index: 10001;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.edit-toggle.show,
|
||
.edit-toggle.active {
|
||
opacity: 1;
|
||
pointer-events: auto;
|
||
}
|
||
|
||
.edit-toggle:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.edit-mode [contenteditable="true"] {
|
||
outline: 2px dashed var(--accent-orange);
|
||
outline-offset: 4px;
|
||
background: rgba(255, 138, 101, 0.05);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.edit-hint {
|
||
position: fixed;
|
||
bottom: 1rem;
|
||
right: 1rem;
|
||
background: rgba(0, 0, 0, 0.7);
|
||
color: #fff;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 8px;
|
||
font-size: 0.75rem;
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
z-index: 10000;
|
||
}
|
||
|
||
.edit-mode .edit-hint {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ===========================================
|
||
响应式断点
|
||
=========================================== */
|
||
@media (max-height: 700px) {
|
||
:root {
|
||
--slide-padding: clamp(1rem, 3vw, 2.5rem);
|
||
--content-gap: clamp(0.75rem, 2vw, 1.5rem);
|
||
--title-size: clamp(1.75rem, 5vw, 3rem);
|
||
--h2-size: clamp(1.25rem, 3.5vw, 2rem);
|
||
}
|
||
}
|
||
|
||
@media (max-height: 600px) {
|
||
:root {
|
||
--slide-padding: clamp(0.75rem, 2.5vw, 1.5rem);
|
||
--content-gap: clamp(0.5rem, 1.5vw, 1rem);
|
||
--title-size: clamp(1.5rem, 4vw, 2.25rem);
|
||
--body-size: clamp(0.8rem, 1.2vw, 0.95rem);
|
||
}
|
||
.nav-dots { display: none; }
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.story-types {
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
.markdown-symbols {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
/* ===========================================
|
||
减少动画偏好
|
||
=========================================== */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
*, *::before, *::after {
|
||
animation-duration: 0.01ms !important;
|
||
transition-duration: 0.2s !important;
|
||
}
|
||
html { scroll-behavior: auto; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<!-- 进度条 -->
|
||
<div class="progress-bar" id="progressBar"></div>
|
||
|
||
<!-- 编辑按钮 -->
|
||
<div class="edit-hotzone" id="editHotzone"></div>
|
||
<button class="edit-toggle" id="editToggle" title="编辑模式 (E)">✏️</button>
|
||
<div class="edit-hint">点击文字即可编辑，按 Ctrl+S 保存</div>
|
||
|
||
<!-- 导航点 -->
|
||
<nav class="nav-dots" id="navDots"></nav>
|
||
|
||
<!-- ===== 第1页：封面 ===== -->
|
||
<section class="slide bg-shapes" data-slide="0">
|
||
<div class="floating-shape shape-1"></div>
|
||
<div class="floating-shape shape-2"></div>
|
||
<div class="floating-shape shape-3"></div>
|
||
<div class="slide-content" style="text-align: center;">
|
||
<div class="reveal" style="margin-bottom: 1rem;">
|
||
<span style="font-size: clamp(3rem, 8vw, 6rem);">✨</span>
|
||
</div>
|
||
<h1 class="reveal" style="margin-bottom: 0.5rem;">我是大作家（上）</h1>
|
||
<p class="reveal" style="font-size: var(--h3-size); color: var(--text-secondary); margin-bottom: 1.5rem;">
|
||
AICODE 课时4 · 用AI创作你的故事
|
||
</p>
|
||
<div class="reveal card" style="display: inline-block; max-width: 500px;">
|
||
<div class="bullet-list" style="text-align: left;">
|
||
<li>🎯 认识 Trae IDE Builder 模式</li>
|
||
<li>📝 掌握 Markdown 魔法符号</li>
|
||
<li>🎨 三步设计你的故事世界</li>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第2页：课程概览 ===== -->
|
||
<section class="slide" data-slide="1">
|
||
<div class="slide-content">
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 1.5rem;">📚 课程概览</h2>
|
||
<div class="reveal card stagger-children" style="max-width: 800px;">
|
||
<div class="feature-list">
|
||
<li><strong>课时：</strong>4课时 · 90分钟</li>
|
||
<li><strong>核心能力：</strong>表达力 + 提问力</li>
|
||
<li><strong>核心工具：</strong>Trae IDE (Builder模式) + Markdown</li>
|
||
<li><strong>课程目标：</strong>每个人写一本属于自己的短篇小说</li>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align: center; margin-top: 1.5rem;">
|
||
<div style="display: inline-flex; gap: 1rem; flex-wrap: wrap; justify-content: center;">
|
||
<span style="background: var(--accent-pink); color: #fff; padding: 0.5rem 1rem; border-radius: 20px; font-size: var(--small-size);">🧠 知识目标</span>
|
||
<span style="background: var(--accent-blue); color: #fff; padding: 0.5rem 1rem; border-radius: 20px; font-size: var(--small-size);">💪 能力目标</span>
|
||
<span style="background: var(--accent-green); color: #fff; padding: 0.5rem 1rem; border-radius: 20px; font-size: var(--small-size);">❤️ 情感目标</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第3页：核心概念 ===== -->
|
||
<section class="slide" data-slide="2">
|
||
<div class="slide-content">
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 1rem;">💡 核心概念</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1rem; font-size: var(--body-size);">避开这些常见误区，让你的创作更顺利！</p>
|
||
<div class="reveal stagger-children" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 0.75rem; max-width: 900px; margin: 0 auto;">
|
||
<div class="card card-accent card-pink" style="padding: 1rem;">
|
||
<div style="font-family: var(--font-display); color: var(--accent-pink); margin-bottom: 0.5rem;">❌ 误区1</div>
|
||
<p style="font-size: var(--small-size); margin-bottom: 0.5rem;">"Trae 就是另一个聊天工具"</p>
|
||
<div style="font-family: var(--font-display); color: var(--accent-green); margin-bottom: 0.25rem;">✅ 正确认识</div>
|
||
<p style="font-size: var(--small-size);">Trae 是专业创作工具，能写故事、做网站、做游戏！</p>
|
||
</div>
|
||
<div class="card card-accent card-blue" style="padding: 1rem;">
|
||
<div style="font-family: var(--font-display); color: var(--accent-blue); margin-bottom: 0.5rem;">❌ 误区2</div>
|
||
<p style="font-size: var(--small-size); margin-bottom: 0.5rem;">"右边的预览窗口不用管"</p>
|
||
<div style="font-family: var(--font-display); color: var(--accent-green); margin-bottom: 0.25rem;">✅ 正确认识</div>
|
||
<p style="font-size: var(--small-size);">预览窗是"魔法镜子"，所有内容会实时排版显示！</p>
|
||
</div>
|
||
<div class="card card-accent card-purple" style="padding: 1rem;">
|
||
<div style="font-family: var(--font-display); color: var(--accent-purple); margin-bottom: 0.5rem;">❌ 误区3</div>
|
||
<p style="font-size: var(--small-size); margin-bottom: 0.5rem;">"写故事直接让 AI 写就行了"</p>
|
||
<div style="font-family: var(--font-display); color: var(--accent-green); margin-bottom: 0.25rem;">✅ 正确认识</div>
|
||
<p style="font-size: var(--small-size);">好故事要先有设计（谁、在哪、发生什么）！</p>
|
||
</div>
|
||
<div class="card card-accent card-green" style="padding: 1rem;">
|
||
<div style="font-family: var(--font-display); color: var(--accent-green); margin-bottom: 0.5rem;">❌ 误区4</div>
|
||
<p style="font-size: var(--small-size); margin-bottom: 0.5rem;">"角色设定写得越多越好"</p>
|
||
<div style="font-family: var(--font-display); color: var(--accent-green); margin-bottom: 0.25rem;">✅ 正确认识</div>
|
||
<p style="font-size: var(--small-size);">简单清晰的设定比又长又乱的好！</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第4页：第一幕：联系 ===== -->
|
||
<section class="slide bg-shapes" data-slide="3">
|
||
<div class="floating-shape shape-1"></div>
|
||
<div class="floating-shape shape-4"></div>
|
||
<div class="slide-content">
|
||
<div class="reveal" style="text-align: center; margin-bottom: 0.5rem;">
|
||
<span style="font-size: clamp(2.5rem, 5vw, 4rem);">🔗</span>
|
||
</div>
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 1rem;">第一幕：联系 Connect</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1.5rem;">10分钟 · 开启你的创作之旅</p>
|
||
<div class="reveal card stagger-children" style="max-width: 750px;">
|
||
<div class="feature-list">
|
||
<li>想象那些炫酷的AI作品——动画、游戏、网站</li>
|
||
<li>它们全是一个人用AI做出来的，不需要大团队</li>
|
||
<li><strong>所有这些的起点都是：一个故事</strong></li>
|
||
<li>从今天开始，用三节课时间，写一本属于你的短篇小说</li>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align: center; margin-top: 1.5rem;">
|
||
<div style="display: inline-block; background: linear-gradient(135deg, var(--accent-pink), var(--accent-orange)); color: #fff; padding: 1rem 2rem; border-radius: 16px; font-family: var(--font-display); font-size: var(--h3-size); box-shadow: 0 6px 20px rgba(255, 138, 101, 0.3);">
|
||
🎬 每个人都可以当自己的导演！
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第5页：工具介绍 ===== -->
|
||
<section class="slide" data-slide="4">
|
||
<div class="slide-content">
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 0.5rem;">🛠️ 认识你的创作工具</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1.5rem;">Trae IDE · Builder 模式</p>
|
||
<div class="reveal card" style="max-width: 800px; margin-bottom: 1rem;">
|
||
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.5rem;">
|
||
<div style="text-align: center; padding: 1rem; background: var(--bg-accent-1); border-radius: 12px;">
|
||
<div style="font-size: 2.5rem; margin-bottom: 0.5rem;">💬</div>
|
||
<div style="font-family: var(--font-display); color: var(--accent-pink); margin-bottom: 0.5rem;">左边：聊天框</div>
|
||
<p style="font-size: var(--small-size);">你跟AI说话的地方</p>
|
||
</div>
|
||
<div style="text-align: center; padding: 1rem; background: var(--bg-accent-3); border-radius: 12px;">
|
||
<div style="font-size: 2.5rem; margin-bottom: 0.5rem;">✨</div>
|
||
<div style="font-family: var(--font-display); color: var(--accent-blue); margin-bottom: 0.5rem;">右边：预览窗口</div>
|
||
<p style="font-size: var(--small-size);">"魔法镜子"，实时显示排版效果</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal card card-accent" style="max-width: 800px;">
|
||
<p style="font-size: var(--body-size); text-align: center; margin: 0;">
|
||
<strong>左边说一句话，右边马上出现！</strong><br>
|
||
<span style="color: var(--text-secondary); font-size: var(--small-size);">自动排版——标题是大字，列表整整齐齐</span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第6页：Markdown魔法符号 ===== -->
|
||
<section class="slide bg-shapes" data-slide="5">
|
||
<div class="floating-shape shape-2"></div>
|
||
<div class="floating-shape shape-3"></div>
|
||
<div class="slide-content">
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 0.5rem;">🔮 Markdown 魔法符号</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1.5rem;">三个符号，让文字变魔法！</p>
|
||
<div class="reveal markdown-symbols stagger-children">
|
||
<div class="symbol-card">
|
||
<div class="symbol-icon">#</div>
|
||
<div class="symbol-name">井号变标题</div>
|
||
<div class="symbol-effect"># 我的故事 → <span style="font-size: 1.2em; font-weight: bold;">大标题</span></div>
|
||
</div>
|
||
<div class="symbol-card">
|
||
<div class="symbol-icon">-</div>
|
||
<div class="symbol-name">短横变列表</div>
|
||
<div class="symbol-effect">- 苹果 → • 苹果（列表项）</div>
|
||
</div>
|
||
<div class="symbol-card">
|
||
<div class="symbol-icon">**</div>
|
||
<div class="symbol-name">星号变加粗</div>
|
||
<div class="symbol-effect">**重要** → <strong>重要</strong></div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align: center; margin-top: 1.5rem;">
|
||
<span style="background: var(--accent-green); color: #fff; padding: 0.5rem 1.5rem; border-radius: 20px; font-size: var(--small-size);">
|
||
✨ 就这三个，今天够用了！
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第7页：第二幕：建构 ===== -->
|
||
<section class="slide" data-slide="6">
|
||
<div class="slide-content" style="text-align: center;">
|
||
<div class="reveal" style="margin-bottom: 0.5rem;">
|
||
<span style="font-size: clamp(3rem, 6vw, 5rem);">🏗️</span>
|
||
</div>
|
||
<h2 class="reveal" style="margin-bottom: 1rem;">第二幕：建构 Construct</h2>
|
||
<p class="reveal" style="color: var(--text-secondary); margin-bottom: 1.5rem;">65分钟 · 三步设计你的故事</p>
|
||
<div class="reveal card" style="max-width: 600px; margin: 0 auto 1.5rem;">
|
||
<div style="display: flex; flex-direction: column; gap: 1rem;">
|
||
<div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--bg-accent-1); border-radius: 12px;">
|
||
<span style="font-size: 2rem;">1️⃣</span>
|
||
<div style="text-align: left;">
|
||
<div style="font-family: var(--font-display);">选故事类型</div>
|
||
<div style="font-size: var(--small-size); color: var(--text-secondary);">你想写什么类型的故事？</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--bg-accent-3); border-radius: 12px;">
|
||
<span style="font-size: 2rem;">2️⃣</span>
|
||
<div style="text-align: left;">
|
||
<div style="font-family: var(--font-display);">造你的主角</div>
|
||
<div style="font-size: var(--small-size); color: var(--text-secondary);">你的主角是谁？</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: flex; align-items: center; gap: 1rem; padding: 1rem; background: var(--bg-accent-2); border-radius: 12px;">
|
||
<span style="font-size: 2rem;">3️⃣</span>
|
||
<div style="text-align: left;">
|
||
<div style="font-family: var(--font-display);">选故事发生地</div>
|
||
<div style="font-size: var(--small-size); color: var(--text-secondary);">故事发生在哪里？</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="reveal" style="font-size: var(--small-size); color: var(--text-secondary);">
|
||
做完这三步，你的故事就有了骨架。下节课让 AI 帮你把骨架变成完整故事！
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第8页：第一步：选故事类型 ===== -->
|
||
<section class="slide" data-slide="7">
|
||
<div class="slide-content">
|
||
<div class="reveal" style="text-align: center; margin-bottom: 0.5rem;">
|
||
<span style="font-size: clamp(2rem, 4vw, 3rem);">1️⃣</span>
|
||
</div>
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 0.5rem;">第一步：选故事类型</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1rem; font-size: var(--body-size);">凭你的第一感觉，选一个最想写的！</p>
|
||
<div class="reveal story-types stagger-children">
|
||
<div class="story-type-card type-a">
|
||
<div class="type-icon">🏫</div>
|
||
<div class="type-name">A 校园奇遇</div>
|
||
<div class="type-desc">学校里发生了不可思议的事...</div>
|
||
</div>
|
||
<div class="story-type-card type-b">
|
||
<div class="type-icon">🔮</div>
|
||
<div class="type-name">B 魔法冒险</div>
|
||
<div class="type-desc">你拥有了神奇的能力...</div>
|
||
</div>
|
||
<div class="story-type-card type-c">
|
||
<div class="type-icon">⏰</div>
|
||
<div class="type-name">C 穿越时空</div>
|
||
<div class="type-desc">醒来在不同时代...</div>
|
||
</div>
|
||
<div class="story-type-card type-d">
|
||
<div class="type-icon">🐱</div>
|
||
<div class="type-name">D 动物奇缘</div>
|
||
<div class="type-desc">突然能听懂动物说话...</div>
|
||
</div>
|
||
<div class="story-type-card type-e">
|
||
<div class="type-icon">🚀</div>
|
||
<div class="type-name">E 科幻未来</div>
|
||
<div class="type-desc">生活在3000年的未来...</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align: center; margin-top: 1rem;">
|
||
<span style="background: var(--accent-orange); color: #fff; padding: 0.5rem 1rem; border-radius: 20px; font-size: var(--small-size);">
|
||
💡 不用纠结太久，凭第一感觉选！
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第9页：第二步：造你的主角 ===== -->
|
||
<section class="slide" data-slide="8">
|
||
<div class="slide-content">
|
||
<div class="reveal" style="text-align: center; margin-bottom: 0.5rem;">
|
||
<span style="font-size: clamp(2rem, 4vw, 3rem);">2️⃣</span>
|
||
</div>
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 0.5rem;">第二步：造你的主角</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1rem; font-size: var(--body-size);">每个好故事都有一个让人记住的主角</p>
|
||
<div class="reveal character-card">
|
||
<div style="text-align: center; margin-bottom: 1rem; font-family: var(--font-display); color: var(--accent-orange); font-size: var(--h3-size);">📝 角色设定卡</div>
|
||
<div class="character-field">
|
||
<span class="field-label">名字：</span>
|
||
<span class="field-value" contenteditable="true">________</span>
|
||
</div>
|
||
<div class="character-field">
|
||
<span class="field-label">身份：</span>
|
||
<span class="field-value" contenteditable="true">________</span>
|
||
</div>
|
||
<div class="field-options">可选：小学生 / 王子公主 / 探险家 / 科学家 / 魔法师 / 动物 / 机器人 / 其他</div>
|
||
<div class="character-field">
|
||
<span class="field-label">性格（选两个）：</span>
|
||
<span class="field-value" contenteditable="true">________ 和 ________</span>
|
||
</div>
|
||
<div class="field-options">可选：勇敢 / 胆小 / 聪明 / 搞笑 / 善良 / 倔强 / 好奇 / 安静</div>
|
||
<div class="character-field">
|
||
<span class="field-label">特殊能力：</span>
|
||
<span class="field-value" contenteditable="true">________（一句话描述）</span>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align: center; margin-top: 1rem;">
|
||
<span style="background: var(--accent-pink); color: #fff; padding: 0.5rem 1rem; border-radius: 20px; font-size: var(--small-size);">
|
||
⚠️ 每项只写一句话，越简洁 AI 越容易理解！
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第10页：第三步：选故事发生地 ===== -->
|
||
<section class="slide" data-slide="9">
|
||
<div class="slide-content">
|
||
<div class="reveal" style="text-align: center; margin-bottom: 0.5rem;">
|
||
<span style="font-size: clamp(2rem, 4vw, 3rem);">3️⃣</span>
|
||
</div>
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 0.5rem;">第三步：选故事发生地</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1rem; font-size: var(--body-size);">不同类型，发生的地方不一样</p>
|
||
<div class="reveal location-grid stagger-children">
|
||
<div class="location-item">
|
||
<span class="location-num">A</span>
|
||
<div>
|
||
<div style="font-family: var(--font-display); color: var(--accent-pink); margin-bottom: 0.25rem;">校园奇遇</div>
|
||
<div class="location-text">① 被施了魔法的学校 ② 学校地下的秘密房间 ③ 平行世界里的学校</div>
|
||
</div>
|
||
</div>
|
||
<div class="location-item">
|
||
<span class="location-num">B</span>
|
||
<div>
|
||
<div style="font-family: var(--font-display); color: var(--accent-purple); margin-bottom: 0.25rem;">魔法冒险</div>
|
||
<div class="location-text">① 魔法学院 ② 精灵森林 ③ 龙之岛</div>
|
||
</div>
|
||
</div>
|
||
<div class="location-item">
|
||
<span class="location-num">C</span>
|
||
<div>
|
||
<div style="font-family: var(--font-display); color: var(--accent-blue); margin-bottom: 0.25rem;">穿越时空</div>
|
||
<div class="location-text">① 古代皇宫 ② 恐龙时代的丛林 ③ 3000年的未来城市</div>
|
||
</div>
|
||
</div>
|
||
<div class="location-item">
|
||
<span class="location-num">D</span>
|
||
<div>
|
||
<div style="font-family: var(--font-display); color: var(--accent-green); margin-bottom: 0.25rem;">动物奇缘</div>
|
||
<div class="location-text">① 会说话的森林 ② 海底王国 ③ 非洲大草原</div>
|
||
</div>
|
||
</div>
|
||
<div class="location-item">
|
||
<span class="location-num">E</span>
|
||
<div>
|
||
<div style="font-family: var(--font-display); color: var(--accent-orange); margin-bottom: 0.25rem;">科幻未来</div>
|
||
<div class="location-text">① 火星基地 ② 机器人城市 ③ 太空飞船</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align: center; margin-top: 1rem;">
|
||
<span style="background: var(--accent-blue); color: #fff; padding: 0.5rem 1rem; border-radius: 20px; font-size: var(--small-size);">
|
||
💡 选好了在 Trae 里告诉 AI 你的地点和特点！
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第11页：小试牛刀 ===== -->
|
||
<section class="slide bg-shapes" data-slide="10">
|
||
<div class="floating-shape shape-1"></div>
|
||
<div class="floating-shape shape-2"></div>
|
||
<div class="slide-content">
|
||
<div class="reveal" style="text-align: center; margin-bottom: 0.5rem;">
|
||
<span style="font-size: clamp(2.5rem, 5vw, 4rem);">✍️</span>
|
||
</div>
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 0.5rem;">小试牛刀：生成故事开头</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1rem; font-size: var(--body-size);">让 AI 根据你的设定，写出故事的开头</p>
|
||
<div class="reveal card" style="max-width: 750px; margin-bottom: 1rem;">
|
||
<div style="background: var(--bg-secondary); padding: 1rem; border-radius: 12px; margin-bottom: 1rem; font-family: 'Courier New', monospace; font-size: var(--small-size);">
|
||
请根据我之前创建的设定（故事类型和角色设定），写一个故事的开头，200字以内。要求：<br><br>
|
||
1. 在开头就让读者想继续看下去<br>
|
||
2. 用 Markdown 格式排版
|
||
</div>
|
||
<div class="feature-list" style="font-size: var(--small-size);">
|
||
<li>这只是"试写"，就像画画前先画草稿，不满意可以改</li>
|
||
<li>看看 AI 会写出什么来</li>
|
||
</div>
|
||
</div>
|
||
<div class="reveal card card-accent card-green" style="max-width: 750px;">
|
||
<div style="font-family: var(--font-display); color: var(--accent-green); margin-bottom: 0.5rem;">🎮 一句话改稿游戏</div>
|
||
<p style="font-size: var(--small-size); margin: 0;">
|
||
看看 AI 写的开头，有什么不满意？用<strong>一句话</strong>告诉 AI 怎么改：<br>
|
||
"开头太平了，我想要更紧张刺激" / "主角名字写错了" / "我想让开头有对话"
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第12页：第三幕：反思 ===== -->
|
||
<section class="slide" data-slide="11">
|
||
<div class="slide-content" style="text-align: center;">
|
||
<div class="reveal" style="margin-bottom: 0.5rem;">
|
||
<span style="font-size: clamp(2.5rem, 5vw, 4rem);">🪞</span>
|
||
</div>
|
||
<h2 class="reveal" style="margin-bottom: 1rem;">第三幕：反思 Contemplate</h2>
|
||
<p class="reveal" style="color: var(--text-secondary); margin-bottom: 1.5rem;">10分钟 · 分享你的故事世界</p>
|
||
<div class="reveal card" style="max-width: 600px; margin: 0 auto 1.5rem; text-align: left;">
|
||
<div style="font-family: var(--font-display); text-align: center; margin-bottom: 1rem; color: var(--accent-purple);">🎤 用嘴巴说（不用念文章）</div>
|
||
<div class="bullet-list">
|
||
<li>你的故事是什么类型的？</li>
|
||
<li>主角叫什么名字，有什么特点？</li>
|
||
<li>故事发生在哪里？</li>
|
||
<li>AI 写的开头你满意吗？</li>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
||
<span style="background: var(--accent-pink); color: #fff; padding: 0.75rem 1.5rem; border-radius: 25px; font-size: var(--body-size);">💬 同学互动</span>
|
||
<span style="background: var(--accent-blue); color: #fff; padding: 0.75rem 1.5rem; border-radius: 25px; font-size: var(--body-size);">💡 互相提建议</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第13页：第四幕：延续 ===== -->
|
||
<section class="slide" data-slide="12">
|
||
<div class="slide-content">
|
||
<div class="reveal" style="text-align: center; margin-bottom: 0.5rem;">
|
||
<span style="font-size: clamp(2.5rem, 5vw, 4rem);">🚀</span>
|
||
</div>
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 1rem;">第四幕：延续 Continue</h2>
|
||
<p class="reveal" style="text-align: center; color: var(--text-secondary); margin-bottom: 1.5rem;">5分钟 · 课程总结与展望</p>
|
||
<div class="reveal card stagger-children" style="max-width: 800px; margin-bottom: 1rem;">
|
||
<div class="feature-list">
|
||
<li><strong>第一件事：</strong>认识了 Trae —— 它不只能写故事，以后做网站、做游戏、做 App 都用它</li>
|
||
<li><strong>第二件事：</strong>学了三个 Markdown 魔法符号 —— 井号变标题、短横变列表、星号加粗</li>
|
||
<li><strong>第三件事：</strong>每个人都设计了自己故事的骨架 —— 类型、主角、地点</li>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="text-align: center;">
|
||
<div style="display: inline-block; background: linear-gradient(135deg, var(--accent-orange), var(--accent-pink), var(--accent-purple)); color: #fff; padding: 1.25rem 2rem; border-radius: 20px; font-family: var(--font-display); font-size: var(--h3-size); box-shadow: 0 8px 30px rgba(255, 138, 101, 0.4);">
|
||
🎬 下节课：AI 帮你把骨架写成完整故事！
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第14页：附录速查 ===== -->
|
||
<section class="slide" data-slide="13">
|
||
<div class="slide-content">
|
||
<h2 class="reveal" style="text-align: center; margin-bottom: 1rem;">📋 附录：故事类型与地点速查</h2>
|
||
<div class="reveal" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0.75rem; max-width: 900px; margin: 0 auto;">
|
||
<div class="card" style="padding: 0.75rem; border-left: 4px solid var(--accent-pink);">
|
||
<div style="font-family: var(--font-display); color: var(--accent-pink); margin-bottom: 0.25rem;">A 校园奇遇</div>
|
||
<div style="font-size: var(--small-size);">① 被施了魔法的学校<br>② 学校地下的秘密房间<br>③ 平行世界里的学校</div>
|
||
</div>
|
||
<div class="card" style="padding: 0.75rem; border-left: 4px solid var(--accent-purple);">
|
||
<div style="font-family: var(--font-display); color: var(--accent-purple); margin-bottom: 0.25rem;">B 魔法冒险</div>
|
||
<div style="font-size: var(--small-size);">① 魔法学院<br>② 精灵森林<br>③ 龙之岛</div>
|
||
</div>
|
||
<div class="card" style="padding: 0.75rem; border-left: 4px solid var(--accent-blue);">
|
||
<div style="font-family: var(--font-display); color: var(--accent-blue); margin-bottom: 0.25rem;">C 穿越时空</div>
|
||
<div style="font-size: var(--small-size);">① 古代皇宫<br>② 恐龙时代的丛林<br>③ 3000年的未来城市</div>
|
||
</div>
|
||
<div class="card" style="padding: 0.75rem; border-left: 4px solid var(--accent-green);">
|
||
<div style="font-family: var(--font-display); color: var(--accent-green); margin-bottom: 0.25rem;">D 动物奇缘</div>
|
||
<div style="font-size: var(--small-size);">① 会说话的森林<br>② 海底王国<br>③ 非洲大草原</div>
|
||
</div>
|
||
<div class="card" style="padding: 0.75rem; border-left: 4px solid var(--accent-orange);">
|
||
<div style="font-family: var(--font-display); color: var(--accent-orange); margin-bottom: 0.25rem;">E 科幻未来</div>
|
||
<div style="font-size: var(--small-size);">① 火星基地<br>② 机器人城市<br>③ 太空飞船</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===== 第15页：结束页 ===== -->
|
||
<section class="slide bg-shapes" data-slide="14">
|
||
<div class="floating-shape shape-1"></div>
|
||
<div class="floating-shape shape-2"></div>
|
||
<div class="floating-shape shape-3"></div>
|
||
<div class="floating-shape shape-4"></div>
|
||
<div class="slide-content" style="text-align: center;">
|
||
<div class="reveal" style="margin-bottom: 1rem;">
|
||
<span style="font-size: clamp(4rem, 10vw, 8rem);">🎉</span>
|
||
</div>
|
||
<h1 class="reveal" style="margin-bottom: 0.5rem;">今天的任务完成啦！</h1>
|
||
<p class="reveal" style="font-size: var(--h3-size); color: var(--text-secondary); margin-bottom: 1.5rem;">
|
||
别忘了保存好你今天做的文件
|
||
</p>
|
||
<div class="reveal card" style="display: inline-block; max-width: 500px;">
|
||
<div class="bullet-list" style="text-align: left;">
|
||
<li>📁 故事类型</li>
|
||
<li>👤 角色设定</li>
|
||
<li>📍 故事发生地</li>
|
||
<li>✍️ 故事开头</li>
|
||
</div>
|
||
</div>
|
||
<div class="reveal" style="margin-top: 1.5rem;">
|
||
<div style="display: inline-block; background: linear-gradient(135deg, var(--accent-green), var(--accent-blue)); color: #fff; padding: 1rem 2rem; border-radius: 16px; font-family: var(--font-display); font-size: var(--h3-size);">
|
||
下节课见，小作家们！✨
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ===========================================
|
||
JavaScript 控制代码
|
||
=========================================== -->
|
||
<script>
|
||
// 幻灯片控制器
|
||
class SlidePresentation {
|
||
constructor() {
|
||
this.slides = document.querySelectorAll('.slide');
|
||
this.currentSlide = 0;
|
||
this.totalSlides = this.slides.length;
|
||
this.progressBar = document.getElementById('progressBar');
|
||
this.navDotsContainer = document.getElementById('navDots');
|
||
|
||
this.init();
|
||
}
|
||
|
||
init() {
|
||
this.createNavDots();
|
||
this.setupIntersectionObserver();
|
||
this.setupKeyboardNav();
|
||
this.setupTouchNav();
|
||
this.updateProgress();
|
||
}
|
||
|
||
// 创建导航点
|
||
createNavDots() {
|
||
this.slides.forEach((_, index) => {
|
||
const dot = document.createElement('div');
|
||
dot.className = 'nav-dot' + (index === 0 ? ' active' : '');
|
||
dot.addEventListener('click', () => this.goToSlide(index));
|
||
this.navDotsContainer.appendChild(dot);
|
||
});
|
||
this.navDots = document.querySelectorAll('.nav-dot');
|
||
}
|
||
|
||
// 设置 Intersection Observer
|
||
setupIntersectionObserver() {
|
||
const options = {
|
||
root: null,
|
||
rootMargin: '0px',
|
||
threshold: 0.5
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.classList.add('visible');
|
||
this.currentSlide = parseInt(entry.target.dataset.slide);
|
||
this.updateNavDots();
|
||
this.updateProgress();
|
||
}
|
||
});
|
||
}, options);
|
||
|
||
this.slides.forEach(slide => observer.observe(slide));
|
||
}
|
||
|
||
// 键盘导航
|
||
setupKeyboardNav() {
|
||
document.addEventListener('keydown', (e) => {
|
||
// 编辑模式下不处理导航
|
||
if (document.body.classList.contains('edit-mode')) return;
|
||
|
||
switch(e.key) {
|
||
case 'ArrowDown':
|
||
case 'ArrowRight':
|
||
case ' ':
|
||
case 'PageDown':
|
||
e.preventDefault();
|
||
this.nextSlide();
|
||
break;
|
||
case 'ArrowUp':
|
||
case 'ArrowLeft':
|
||
case 'PageUp':
|
||
e.preventDefault();
|
||
this.prevSlide();
|
||
break;
|
||
case 'Home':
|
||
e.preventDefault();
|
||
this.goToSlide(0);
|
||
break;
|
||
case 'End':
|
||
e.preventDefault();
|
||
this.goToSlide(this.totalSlides - 1);
|
||
break;
|
||
}
|
||
});
|
||
}
|
||
|
||
// 触摸导航
|
||
setupTouchNav() {
|
||
let touchStartY = 0;
|
||
let touchEndY = 0;
|
||
|
||
document.addEventListener('touchstart', (e) => {
|
||
touchStartY = e.changedTouches[0].screenY;
|
||
}, { passive: true });
|
||
|
||
document.addEventListener('touchend', (e) => {
|
||
touchEndY = e.changedTouches[0].screenY;
|
||
this.handleSwipe(touchStartY, touchEndY);
|
||
}, { passive: true });
|
||
}
|
||
|
||
handleSwipe(startY, endY) {
|
||
const threshold = 50;
|
||
const diff = startY - endY;
|
||
|
||
if (Math.abs(diff) > threshold) {
|
||
if (diff > 0) {
|
||
this.nextSlide();
|
||
} else {
|
||
this.prevSlide();
|
||
}
|
||
}
|
||
}
|
||
|
||
// 导航方法
|
||
goToSlide(index) {
|
||
if (index >= 0 && index < this.totalSlides) {
|
||
this.slides[index].scrollIntoView({ behavior: 'smooth' });
|
||
}
|
||
}
|
||
|
||
nextSlide() {
|
||
if (this.currentSlide < this.totalSlides - 1) {
|
||
this.goToSlide(this.currentSlide + 1);
|
||
}
|
||
}
|
||
|
||
prevSlide() {
|
||
if (this.currentSlide > 0) {
|
||
this.goToSlide(this.currentSlide - 1);
|
||
}
|
||
}
|
||
|
||
// 更新导航点
|
||
updateNavDots() {
|
||
this.navDots.forEach((dot, index) => {
|
||
dot.classList.toggle('active', index === this.currentSlide);
|
||
});
|
||
}
|
||
|
||
// 更新进度条
|
||
updateProgress() {
|
||
const progress = ((this.currentSlide + 1) / this.totalSlides) * 100;
|
||
this.progressBar.style.width = progress + '%';
|
||
}
|
||
}
|
||
|
||
// 在线编辑功能
|
||
class InlineEditor {
|
||
constructor() {
|
||
this.isActive = false;
|
||
this.editToggle = document.getElementById('editToggle');
|
||
this.editHotzone = document.getElementById('editHotzone');
|
||
this.hideTimeout = null;
|
||
|
||
this.init();
|
||
}
|
||
|
||
init() {
|
||
// 编辑按钮点击
|
||
this.editToggle.addEventListener('click', () => this.toggleEditMode());
|
||
|
||
// 热区悬停显示按钮
|
||
this.editHotzone.addEventListener('mouseenter', () => {
|
||
clearTimeout(this.hideTimeout);
|
||
this.editToggle.classList.add('show');
|
||
});
|
||
|
||
this.editHotzone.addEventListener('mouseleave', () => {
|
||
this.hideTimeout = setTimeout(() => {
|
||
if (!this.isActive) this.editToggle.classList.remove('show');
|
||
}, 400);
|
||
});
|
||
|
||
this.editToggle.addEventListener('mouseenter', () => {
|
||
clearTimeout(this.hideTimeout);
|
||
});
|
||
|
||
this.editToggle.addEventListener('mouseleave', () => {
|
||
this.hideTimeout = setTimeout(() => {
|
||
if (!this.isActive) this.editToggle.classList.remove('show');
|
||
}, 400);
|
||
});
|
||
|
||
// 热区直接点击
|
||
this.editHotzone.addEventListener('click', () => this.toggleEditMode());
|
||
|
||
// 键盘快捷键
|
||
document.addEventListener('keydown', (e) => {
|
||
if ((e.key === 'e' || e.key === 'E') && !e.target.getAttribute('contenteditable')) {
|
||
e.preventDefault();
|
||
this.toggleEditMode();
|
||
}
|
||
|
||
// Ctrl+S 保存
|
||
if ((e.ctrlKey || e.metaKey) && e.key === 's') {
|
||
e.preventDefault();
|
||
if (this.isActive) {
|
||
this.saveContent();
|
||
}
|
||
}
|
||
});
|
||
|
||
// 自动保存到 localStorage
|
||
this.loadContent();
|
||
document.addEventListener('input', (e) => {
|
||
if (e.target.getAttribute('contenteditable') === 'true') {
|
||
this.debounceSave();
|
||
}
|
||
});
|
||
}
|
||
|
||
toggleEditMode() {
|
||
this.isActive = !this.isActive;
|
||
document.body.classList.toggle('edit-mode', this.isActive);
|
||
this.editToggle.classList.toggle('active', this.isActive);
|
||
this.editToggle.textContent = this.isActive ? '✓' : '✏️';
|
||
this.editToggle.title = this.isActive ? '完成编辑 (E)' : '编辑模式 (E)';
|
||
|
||
// 切换所有可编辑元素
|
||
const editableElements = document.querySelectorAll('.slide-content h1, .slide-content h2, .slide-content p, .slide-content li, .field-value');
|
||
editableElements.forEach(el => {
|
||
el.setAttribute('contenteditable', this.isActive);
|
||
});
|
||
}
|
||
|
||
debounceSave() {
|
||
clearTimeout(this.saveTimeout);
|
||
this.saveTimeout = setTimeout(() => this.saveContent(), 1000);
|
||
}
|
||
|
||
saveContent() {
|
||
const content = {};
|
||
document.querySelectorAll('[contenteditable="true"]').forEach((el, index) => {
|
||
content[`edit-${index}`] = el.innerHTML;
|
||
});
|
||
localStorage.setItem('presentation-edits', JSON.stringify(content));
|
||
|
||
// 显示保存提示
|
||
this.showSaveNotification();
|
||
}
|
||
|
||
loadContent() {
|
||
const saved = localStorage.getItem('presentation-edits');
|
||
if (saved) {
|
||
const content = JSON.parse(saved);
|
||
document.querySelectorAll('.slide-content h1, .slide-content h2, .slide-content p, .slide-content li, .field-value').forEach((el, index) => {
|
||
if (content[`edit-${index}`]) {
|
||
el.innerHTML = content[`edit-${index}`];
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
showSaveNotification() {
|
||
const notification = document.createElement('div');
|
||
notification.textContent = '已保存 ✓';
|
||
notification.style.cssText = `
|
||
position: fixed;
|
||
bottom: 1rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: var(--accent-green);
|
||
color: #fff;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 20px;
|
||
font-size: 0.875rem;
|
||
z-index: 10002;
|
||
animation: fadeInOut 2s ease;
|
||
`;
|
||
document.body.appendChild(notification);
|
||
setTimeout(() => notification.remove(), 2000);
|
||
}
|
||
}
|
||
|
||
// 添加淡入淡出动画
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
@keyframes fadeInOut {
|
||
0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
|
||
20% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
80% { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
|
||
}
|
||
`;
|
||
document.head.appendChild(style);
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
new SlidePresentation();
|
||
new InlineEditor();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |