<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
<title>Canva「人生AB面」翻转挑战</title>
<style>
:root {
--canva-purple: #5D3FD3;
--ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}
body {
margin: 0;
min-height: 100vh;
font-family: 'Inter', sans-serif;
overflow-x: hidden;
}
/* 开场金币页 */
#splashScreen {
height: 100vh;
background: linear-gradient(180deg, #F8F5FF 0%, #EDE7FF 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.6s var(--ease-out-expo);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
}
.coin-container {
width: 160px;
height: 160px;
perspective: 1000px;
cursor: pointer;
margin-bottom: 2rem;
position: relative;
}
.coin {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: flip 2s infinite;
transition: all 0.3s ease;
}
.coin.paused {
animation-play-state: paused;
transform: scale(1.05);
}
.coin-front,
.coin-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(93, 63, 211, 0.2);
background: radial-gradient(circle at 65% 35%, #fff 20%, var(--canva-purple) 100%);
}
.coin-back {
background: radial-gradient(circle at 35% 65%, #fff 20%, var(--canva-purple) 100%);
transform: rotateY(180deg);
}
.coin-icon {
font-size: 3.5rem;
color: white;
text-shadow: 0 2px 8px rgba(93, 63, 211, 0.3);
animation: iconShine 3s infinite;
}
@keyframes flip {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes iconShine {
0%,
100% {
opacity: 0.9;
}
50% {
opacity: 1;
text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}
}
.splash-title {
font-size: 2rem;
font-weight: 800;
color: var(--canva-purple);
margin-bottom: 0.5rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s var(--ease-out-expo);
}
.splash-subtitle {
color: #6b7280;
font-size: 1.125rem;
opacity: 0;
transform: translateY(20px);
transition: all 0.6s var(--ease-out-expo) 0.2s;
}
/* 身份选择页 */
#mainContent {
background: linear-gradient(180deg, #F8F5FF 0%, #EDE7FF 100%);
min-height: 100vh;
padding: 2rem 1rem;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s var(--ease-out-expo) 0.3s;
}
#mainContent.visible {
opacity: 1;
transform: translateY(0);
}
/* 双身份卡片样式 */
.card-grid {
max-width: 800px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
justify-items: center;
}
@media (min-width: 768px) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}
.flip-card-container {
width: 90%;
max-width: 360px;
height: 580px;
perspective: 1500px;
cursor: pointer;
transition: transform 0.4s var(--ease-out-expo);
}
.flip-card {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.8s var(--ease-out-expo);
}
.flip-card.is-flipped {
transform: rotateY(180deg);
}
.card-side {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
border-radius: 24px;
box-shadow: 0 12px 32px rgba(93, 63, 211, 0.15);
overflow: hidden;
background: white;
}
.card-cover {
width: 100%;
height: 280px;
object-fit: cover;
}
.card-content {
padding: 2rem;
}
.card-title {
font-size: 1.75rem;
font-weight: 800;
color: var(--canva-purple);
margin-bottom: 1rem;
}
.card-desc {
color: #6b7280;
line-height: 1.6;
font-size: 1.125rem;
margin-bottom: 2rem;
}
.card-back {
transform: rotateY(180deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
}
.back-icon {
width: 80px;
height: 80px;
background: #f6f2ff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.back-icon i {
color: var(--canva-purple);
font-size: 2.5rem;
}
.back-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--canva-purple);
margin-bottom: 1rem;
}
.back-desc {
color: #6b7280;
line-height: 1.6;
margin-bottom: 2rem;
}
.explore-btn {
background: var(--canva-purple);
color: white;
padding: 1rem 2rem;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: transform 0.3s ease;
}
.explore-btn:hover {
transform: scale(1.05);
}
/* 组队赛模块 */
#teamCompetition {
background-color: white;
border-radius: 24px;
box-shadow: 0 12px 32px rgba(93, 63, 211, 0.15);
padding: 2rem;
margin: 2rem auto;
max-width: 800px;
text-align: center;
}
.team-task {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}
.task {
background-color: #f6f2ff;
padding: 1rem;
border-radius: 12px;
width: 30%;
}
.task.completed {
background-color: #e0f7fa;
}
/* 硬币银行模块 */
#coinBank {
background-color: white;
border-radius: 24px;
box-shadow: 0 12px 32px rgba(93, 63, 211, 0.15);
padding: 2rem;
margin: 2rem auto;
max-width: 800px;
text-align: center;
}
.sign-in-btn {
background: var(--canva-purple);
color: white;
padding: 1rem 2rem;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: transform 0.3s ease;
display: inline-block;
margin-top: 1rem;
}
.sign-in-btn:hover {
transform: scale(1.05);
}
.exchange-btn {
background: #f6f2ff;
color: var(--canva-purple);
padding: 1rem 2rem;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
transition: transform 0.3s ease;
display: inline-block;
margin-top: 1rem;
}
.exchange-btn:hover {
transform: scale(1.05);
}
</style>
</head>
<body>
<!-- 开场金币页 -->
<div id="splashScreen">
<div class="coin-container">
<div class="coin" id="flippingCoin">
<div class="coin-front">
<i class="fas fa-exchange-alt coin-icon"></i>
</div>
<div class="coin-back">
<i class="fas fa-magic coin-icon"></i>
</div>
</div>
</div>
<h1 class="splash-title">人生AB面翻转挑战</h1>
<p class="splash-subtitle">翻转金币，解锁你的隐藏身份</p>
</div>
<!-- 身份选择主内容页 -->
<div id="mainContent">
<div class="card-grid">
<!-- 学生身份卡片 -->
<div class="flip-card-container">
<div class="flip-card" id="studentCard">
<div class="card-side">
<img src="./assets/69bd5188-89b3-4126-8735-4e3c2192e44a.png"
class="card-cover" alt="学生日常">
<div class="card-content">
<h2 class="card-title">图书馆卷王学生党</h2>
<p class="card-desc">每天占座刷题、做社团海报...<br>你的隐藏身份可能是？</p>
<div class="text-center">
<i class="fas fa-hand-pointer text-purple-700 text-2xl mb-1"></i>
<p class="text-sm text-gray-500">点击/滑动翻卡查看</p>
</div>
</div>
</div>
<div class="card-side card-back">
<div class="back-icon">
<i class="fas fa-paint-brush"></i>
</div>
<h3 class="back-title">用Canva AI设计海报</h3>
<p class="back-desc">输入社团活动主题，AI秒生成高颜值海报<br>支持一键调整配色/字体，5分钟搞定宣传物料</p>
<a href="https://www.canva.cn/templates/海报" target="_blank" class="explore-btn">
立即体验海报模板
</a>
</div>
</div>
</div>
<!-- 打工人身份卡片 -->
<div class="flip-card-container">
<div class="flip-card" id="workerCard">
<div class="card-side">
<img src="./assets/社群福利与明信片.png"
class="card-cover" alt="打工人日常">
<div class="card-content">
<h2 class="card-title">朝九晚五打工人</h2>
<p class="card-desc">每天改10版PPT、赶汇报...<br>你的隐藏技能是？</p>
<div class="text-center">
<i class="fas fa-hand-pointer text-purple-700 text-2xl mb-1"></i>
<p class="text-sm text-gray-500">点击/滑动翻卡查看</p>
</div>
</div>
</div>
<div class="card-side card-back">
<div class="back-icon">
<i class="fas fa-file-powerpoint"></i>
</div>
<h3 class="back-title">用Canva做专业PPT</h3>
<p class="back-desc">1000+行业汇报模板任选<br>智能对齐/数据可视化工具，30分钟完成高质量报告</p>
<a href="https://www.canva.cn/templates/演示文稿" target="_blank" class="explore-btn">
查看PPT模板库
</a>
</div>
</div>
</div>
</div>
<!-- 组队赛模块 -->
<div id="teamCompetition">
<h2 class="card-title">AB面战队组队赛</h2>
<p class="card-desc">3人组队，每人完成1个任务（A面+B面+邀请），即可解锁团队限时免费AI体验次数！</p>
<div class="team-task">
<div class="task" id="taskA">A面任务</div>
<div class="task" id="taskB">B面任务</div>
<div class="task" id="taskInvite">邀请任务</div>
</div>
</div>
<!-- 硬币银行模块 -->
<div id="coinBank">
<h2 class="card-title">硬币银行</h2>
<p class="card-desc">每日签到获得 "可画金币"，500金币可兑换“AI魔法笔”功能周卡。</p>
<p id="coinCount">当前金币：<span>0</span></p>
<button class="sign-in-btn" id="signInBtn">每日签到</button>
<button class="exchange-btn" id="exchangeBtn">兑换AI魔法笔周卡</button>
</div>
</div>
<script>
// 金币动画控制
const splashScreen = document.getElementById('splashScreen');
const flippingCoin = document.getElementById('flippingCoin');
const mainContent = document.getElementById('mainContent');
function transitionToMain() {
flippingCoin.classList.add('paused');
document.querySelector('.splash-title').style.opacity = '1';
document.querySelector('.splash-title').style.transform = 'translateY(0)';
document.querySelector('.splash-subtitle').style.opacity = '1';
document.querySelector('.splash-subtitle').style.transform = 'translateY(0)';
setTimeout(() => {
splashScreen.style.opacity = '0';
setTimeout(() => {
splashScreen.style.display = 'none';
mainContent.classList.add('visible');
}, 600);
}, 2000);
}
flippingCoin.addEventListener('click', transitionToMain);
setTimeout(() => {
if (splashScreen.style.display !== 'none') {
transitionToMain();
}
}, 5000);
// 卡片翻转动效
const studentCard = document.getElementById('studentCard');
const workerCard = document.getElementById('workerCard');
[studentCard, workerCard].forEach(card => {
card.addEventListener('click', () => card.classList.toggle('is-flipped'));
});
// 移动端滑动翻卡
function initSwipe(cardElement) {
let startX = 0;
cardElement.addEventListener('touchstart', (e) => {
startX = e.touches[0].clientX;
});
cardElement.addEventListener('touchend', (e) => {
const endX = e.changedTouches[0].clientX;
if (Math.abs(endX - startX) > 50) {
cardElement.classList.toggle('is-flipped');
}
});
}
[studentCard, workerCard].forEach(initSwipe);
// 组队赛任务完成模拟
const tasks = ['taskA', 'taskB', 'taskInvite'];
tasks.forEach(taskId => {
const task = document.getElementById(taskId);
task.addEventListener('click', () => {
task.classList.add('completed');
task.textContent = '已完成';
});
});
// 硬币银行功能
const coinCountSpan = document.querySelector('#coinCount span');
const signInBtn = document.getElementById('signInBtn');
const exchangeBtn = document.getElementById('exchangeBtn');
let coinCount = 0;
signInBtn.addEventListener('click', () => {
coinCount += 100;
coinCountSpan.textContent = coinCount;
signInBtn.disabled = true;
signInBtn.textContent = '今日已签到';
});
exchangeBtn.addEventListener('click', () => {
if (coinCount >= 500) {
coinCount -= 500;
coinCountSpan.textContent = coinCount;
alert('成功兑换“AI魔法笔”功能周卡！');
} else {
alert('金币不足，无法兑换。');
}
});
</script>
</body>
</html>
index.html
assets
index.html