<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: center; /* 确保标题和按钮水平居中 */
}
.story-title {
color: #bf9e79; /* 设置文字颜色为黑色 */
font-size: 60px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
top: 20px; /* 调整距离页面顶部的偏移 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
}
.cute-button {
background-color: white;
color: #bf9e79;
font-family: 'Arial', sans-serif; /* 如果你有更具体的字体，可以替换 */
font-size: 20px;
padding: 10px 20px;
border: 2px solid #ccc;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cute-button:hover {
background-color: #f9f9f9;
box-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
}
.cute-button:active {
background-color: #ffe6e9;
box-shadow: 0 0 25px rgba(255, 105, 180, 1);
}
</style>
<!-- 居中的标题和按钮 -->
<div>
<div class="story-title">Little Fox and the Truth</div>
<span class="cute-button">[[Start->Chapter 1]]</span>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/g82wykc.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: flex-start; /* 水平居中 */
padding: 20px
align-items: flex-start; /* 垂直居中 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: left; /* 确保标题和按钮水平居中 */
margin: 0
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: flex; /* 设置位置属性以允许调整 */
margin: 0 0 20px 0
width: 100
top: 10px; /* 调整距离页面顶部的偏移 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
padding: 10px;
border: 3px solid rgba(191, 158, 121, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4)
}
.cute-button {
background-color: white;
color: brown;
font-family: 'Arial', sans-serif; /* 如果你有更具体的字体，可以替换 */
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e79;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cute-button:hover {
background-color: #f9f9f9;
box-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
}
.cute-button:active {
background-color: #ffe6e9;
box-shadow: 0 0 25px rgba(255, 105, 180, 1);
}
</style>
<!-- 居中的标题和按钮 -->
<div>
<div class="story-title">The forest was quiet when suddenly there was an urgent cry from the birds:
‘Drinking pine needle tea will cure the forest flu!’
The little fox was shocked to hear this news. She rushed off to tell her friends, ‘Everyone, go drink pine needle tea, it's the only way!’</div>
<span class="cute-button">[[Next->Chapter 2]]</span>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/vOZlUbf.jpeg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: flex-start; /* 水平居中 */
align-items: left; /* 将内容对齐到顶部 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: left; /* 确保标题水平居中 */
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
top: 20px; /* 调整距离页面顶部的偏移，设置为0让标题靠近顶部 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
padding: 10px;
border: 3px solid rgba(191, 158, 121, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4);
}
/* 设置按钮容器为横向排列 */
.button-container {
display: flex; /* 使用flexbox进行横向排列 */
justify-content: center; /* 水平居中按钮 */
gap: 10px; /* 设置按钮之间的间距为10px */
}
.cute-button {
background-color: white;
color: #bf9e79; /* 设置字体为浅褐色 */
font-family: 'Arial', sans-serif;
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e79; /* 外框为深褐色 */
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
box-sizing: border-box; /* 确保边框不会影响元素的大小 */
}
.cute-button:hover {
background-color: white; /* 鼠标悬停时背景颜色变亮 */
box-shadow: 0 0 15px rgba(255, 105, 180, 0.8); /* 添加粉红色的发亮效果 */
}
.cute-button:active {
background-color: #ffebcd; /* 按下时的背景颜色 */
box-shadow: 0 0 25px rgba(255, 182, 193, 1);
}
</style>
<!-- 居中偏上的标题和横向排列的按钮 -->
<div>
<div class="story-title">The news of the little fox spread like the wind through the forest. The hedgehog, the little squirrel, and the rabbit all hastened to start picking pine needles and making tea.
But the little rabbit stopped in her tracks, and she frowned and asked, ‘Is this news true? Who said it?’
The little fox replied, ‘The AI squirrel's radio said it, how could it be false?’</div>
<div class="button-container">
<!-- 第一个按钮 -->
<span class="cute-button">[[Go with the bunny to verify the information ->Chapter 3]]</span>
<!-- 第二个按钮 -->
<span class="cute-button">[[Trust AI broadcasts and continue to collect pine needles ->Chapter 5]]</span>
</div>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/AviIncJ.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: flex-start; /* 水平居中 */
align-items: left; /* 垂直居中 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: left; /* 确保标题和按钮水平居中 */
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
padding: 10px;
top: 20px; /* 调整距离页面顶部的偏移 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
border: 3px solid rgba(191, 158, 121, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4);
}
.cute-button {
background-color: white;
color: brown;
font-family: 'Arial', sans-serif; /* 如果你有更具体的字体，可以替换 */
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e79;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cute-button:hover {
background-color: #f9f9f9;
box-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
}
.cute-button:active {
background-color: #ffe6e9;
box-shadow: 0 0 25px rgba(255, 105, 180, 1);
}
</style>
<!-- 居中的标题和按钮 -->
<div>
<div class="story-title">The animals gathered in front of AI Squirrel's radio tree hole.
Its voice came over the radio:
‘According to the Birdie Network, drinking pine needle tea prevents forest flu!’
The hedgehog relaxes: ‘Now that the AI has said so, that's a relief.’
But the bunny remained sceptical: ‘Where did the AI get that conclusion? Did the scientist Grandpa Elephant say it?’</div>
<span class="cute-button">[[Next->Chapter 4]]</span>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/4PwJwVH.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: flex-start; /* 水平居中 */
align-items: left; /* 垂直居中 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: left; /* 确保标题和按钮水平居中 */
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
top: 20px; /* 调整距离页面顶部的偏移 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
padding: 10px;
border: 3px solid rgba(191, 158, 121, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4);
}
.cute-button {
background-color: white;
color: #bf9e79;
font-family: 'Arial', sans-serif; /* 如果你有更具体的字体，可以替换 */
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e79;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cute-button:hover {
background-color: #f9f9f9;
box-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
}
.cute-button:active {
background-color: #ffe6e9;
box-shadow: 0 0 25px rgba(255, 105, 180, 1);
}
</style>
<!-- 居中的标题和按钮 -->
<div>
<div class="story-title">The animals finally found Grandpa Elephant, who was busy in his laboratory.
The little fox hurriedly asked, ‘Can pine needle tea really cure forest flu?’
Grandfather Elephant shook his head, ‘Not at all! Pine Needle Tea is just an ordinary drink, it doesn't have any therapeutic effect at all.’</div>
<span class="cute-button">[[Next->Chapter 6]]</span>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/BhQGWa8.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: left; /* 水平居中 */
align-items: left; /* 将内容对齐到顶部 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: left; /* 确保标题水平居中 */
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
padding: 10px;
top: 20px; /* 调整距离页面顶部的偏移，设置为0让标题靠近顶部 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
border: 3px solid rgba(191, 158, 121, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4);
}
/* 设置按钮容器为横向排列 */
.button-container {
display: flex; /* 使用flexbox进行横向排列 */
justify-content: center; /* 水平居中按钮 */
gap: 10px; /* 设置按钮之间的间距为10px */
}
.cute-button {
background-color: white;
color: black; /* 设置字体为浅褐色 */
font-family: 'Arial', sans-serif;
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e79; /* 外框为深褐色 */
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
box-sizing: border-box; /* 确保边框不会影响元素的大小 */
}
.cute-button:hover {
background-color: white; /* 鼠标悬停时背景颜色变亮 */
box-shadow: 0 0 15px rgba(255, 105, 180, 0.8); /* 添加粉红色的发亮效果 */
}
.cute-button:active {
background-color: #ffebcd; /* 按下时的背景颜色 */
box-shadow: 0 0 25px rgba(255, 182, 193, 1);
}
</style>
<!-- 居中偏上的标题和横向排列的按钮 -->
<div>
<div class="story-title">The little rabbit proposed to go to Grandpa Elephant to verify the truth.
Along the way, the little fox said in disbelief, ‘AI squirrels rely on big data analysis, can these data be wrong?’
The bunny patiently explained, ‘The data itself may be right, but what matters is the source of the data. If the source is unreliable, the conclusions of the big data can be misleading.’</div>
<div class="button-container">
<!-- 第一个按钮 -->
<span class="cute-button">[[Agree with the bunny and follow the source together ->Chapter 5]]</span>
<!-- 第二个按钮 -->
<span class="cute-button">[[Insist on trusting the analyses of AI squirrels ->Chapter 5]]</span>
</div>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/9c6cOkn.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: flex-start; /* 水平居中 */
align-items: left; /* 垂直居中 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: left; /* 确保标题和按钮水平居中 */
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
top: 20px; /* 调整距离页面顶部的偏移 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
padding: 10px;
border: 3px solid rgba(191, 158, 121, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4);
}
.cute-button {
background-color: white;
color: brown;
font-family: 'Arial', sans-serif; /* 如果你有更具体的字体，可以替换 */
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e79;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cute-button:hover {
background-color: #f9f9f9;
box-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
}
.cute-button:active {
background-color: #ffe6e9;
box-shadow: 0 0 25px rgba(255, 105, 180, 1);
}
</style>
<!-- 居中的标题和按钮 -->
<div>
<div class="story-title">Grandpa Elephant elaborated, ‘AI Little Squirrel came to the conclusion based on the analysis of Birdie's chat logs, but Birdie's source was not accurate.’
AI Little Squirrel lowered his head, ‘I just summarised the hot topics on the internet, I didn't think it would cause such a big misunderstanding.’</div>
<span class="cute-button">[[Next->Chapter 7]]</span>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/N4wgIJc.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: flex-start; /* 水平居中 */
align-items: left; /* 垂直居中 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: left; /* 确保标题和按钮水平居中 */
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
top: 20px; /* 调整距离页面顶部的偏移 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
padding: 10px;
border: 3px solid rgba(191, 158, 171, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4);
}
.cute-button {
background-color: white;
color: brown;
font-family: 'Arial', sans-serif; /* 如果你有更具体的字体，可以替换 */
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e79;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cute-button:hover {
background-color: #f9f9f9;
box-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
}
.cute-button:active {
background-color: #ffe6e9;
box-shadow: 0 0 25px rgba(255, 105, 180, 1);
}
</style>
<!-- 居中的标题和按钮 -->
<div>
<div class="story-title">The hedgehog was frightened, ‘It's a good thing the bunny offered to go and verify it, otherwise we'd all be working for nothing and might even delay treatment.’
Grandpa Elephant added: ‘Rumours are like viruses, not only do they not help, they make everyone panic and ignore real precautions such as wearing masks and keeping their distance.’</div>
<span class="cute-button">[[Next->Chapter 8]]</span>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/74TqrBI.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: flex-start; /* 水平居中 */
align-items: left; /* 垂直居中 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: left; /* 确保标题和按钮水平居中 */
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
top: 20px; /* 调整距离页面顶部的偏移 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
padding: 10px;
border: 3px solid rgba(191, 158, 121, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4);
}
.cute-button {
background-color: white;
color: brown;
font-family: 'Arial', sans-serif; /* 如果你有更具体的字体，可以替换 */
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e79;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cute-button:hover {
background-color: #f9f9f9;
box-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
}
.cute-button:active {
background-color: #ffe6e9;
box-shadow: 0 0 25px rgba(255, 105, 180, 1);
}
</style>
<!-- 居中的标题和按钮 -->
<div>
<div class="story-title">The bunny suggested, ‘AI Squirrel should label the source and credibility of the information in the future, and also verify it before publishing it.’
AI Little Squirrel nodded, ‘I'll upgrade the system to make sure that such mistakes don't happen again.’</div>
<span class="cute-button">[[Next->Chapter 9]]</span>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/XMOxMcO.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>
<style>
/* 设置页面为全屏并居中标题和按钮 */
body {
display: flex;
justify-content: flex-start; /* 水平居中 */
align-items: left; /* 垂直居中 */
flex-direction: column; /* 垂直排列元素 */
height: 100vh; /* 使页面高度为视口高度 */
margin: 0;
background-color: #f0f0f0; /* 背景色，可根据需要修改 */
text-align: center; /* 确保标题和按钮水平居中 */
}
.story-title {
color: black; /* 设置文字颜色为黑色 */
font-size: 25px; /* 字体大小 */
position: relative; /* 设置位置属性以允许调整 */
top: 20px; /* 调整距离页面顶部的偏移 */
margin-bottom: 20px; /* 给标题和按钮之间留点空间 */
padding: 10px;
border: 3px solid rgba(191, 158, 121, 0.7);
border-radius: 8px;
background-color: rgba(255, 255, 255, 0.4);
}
.cute-button {
background-color: white;
color: brown;
font-family: 'Arial', sans-serif; /* 如果你有更具体的字体，可以替换 */
font-size: 20px;
padding: 10px 20px;
border: 2px solid #bf9e97;
border-radius: 12px;
cursor: pointer;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.cute-button:hover {
background-color: #f9f9f9;
box-shadow: 0 0 15px rgba(255, 182, 193, 0.8);
}
.cute-button:active {
background-color: #ffe6e9;
box-shadow: 0 0 25px rgba(255, 105, 180, 1);
}
</style>
<!-- 居中的标题和按钮 -->
<div>
<div class="story-title">‘The truth needs to be verified, and rumours need to be stopped. Believe in science to guard our home.’</div>
<span class="cute-button">[[Play Again->Little Fox and the Truth]]</span>
</div>
<style>
tw-story {
background-image: url('https://i.imgur.com/exgwrkx.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #fefefe;
}
</style>