520 lines
19 KiB
HTML
520 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Drama Ling - 鑽石商店 (v3.0原型)</title>
|
||
<link rel="stylesheet" href="../assets/style.css">
|
||
<style>
|
||
.shop-container {
|
||
max-width: 1000px;
|
||
margin: 0 auto;
|
||
padding: 20px;
|
||
}
|
||
|
||
.shop-header {
|
||
background: linear-gradient(135deg, #60A5FA, #3B82F6);
|
||
color: white;
|
||
padding: 25px;
|
||
border-radius: 12px;
|
||
text-align: center;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.diamond-balance {
|
||
position: fixed;
|
||
top: 20px;
|
||
right: 20px;
|
||
background: white;
|
||
border: 2px solid #60A5FA;
|
||
border-radius: 12px;
|
||
padding: 12px 16px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
text-align: center;
|
||
}
|
||
|
||
.diamond-icon {
|
||
color: #60A5FA;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.shop-tabs {
|
||
display: flex;
|
||
gap: 10px;
|
||
margin-bottom: 30px;
|
||
background: white;
|
||
padding: 10px;
|
||
border-radius: 12px;
|
||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.tab-btn {
|
||
flex: 1;
|
||
padding: 12px 20px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
background: #f8fafc;
|
||
color: #666;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tab-btn.active {
|
||
background: #60A5FA;
|
||
color: white;
|
||
}
|
||
|
||
.diamond-packages {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 40px;
|
||
}
|
||
|
||
.package-card {
|
||
background: white;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 12px;
|
||
padding: 25px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
}
|
||
|
||
.package-card:hover {
|
||
border-color: #60A5FA;
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px rgba(96, 165, 250, 0.2);
|
||
}
|
||
|
||
.package-card.popular {
|
||
border-color: #F59E0B;
|
||
background: #fffbeb;
|
||
}
|
||
|
||
.popular-badge {
|
||
position: absolute;
|
||
top: -10px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background: #F59E0B;
|
||
color: white;
|
||
padding: 5px 15px;
|
||
border-radius: 15px;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.package-amount {
|
||
font-size: 48px;
|
||
color: #60A5FA;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.package-price {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
color: #1f2937;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.package-bonus {
|
||
background: #10B981;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 15px;
|
||
font-size: 12px;
|
||
margin-bottom: 15px;
|
||
display: inline-block;
|
||
}
|
||
|
||
.item-shop-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
}
|
||
|
||
.item-card {
|
||
background: white;
|
||
border: 2px solid #e0e0e0;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.item-card:hover {
|
||
border-color: #8E44AD;
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.item-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.item-cost {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
font-weight: bold;
|
||
color: #60A5FA;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 24px;
|
||
border: none;
|
||
border-radius: 8px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
width: 100%;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: #60A5FA;
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: #3B82F6;
|
||
}
|
||
|
||
.btn-premium {
|
||
background: #8E44AD;
|
||
color: white;
|
||
}
|
||
|
||
.btn-premium:hover {
|
||
background: #7d3c98;
|
||
}
|
||
|
||
.btn-success {
|
||
background: #10B981;
|
||
color: white;
|
||
}
|
||
|
||
.back-nav {
|
||
position: fixed;
|
||
top: 20px;
|
||
left: 20px;
|
||
background: #60A5FA;
|
||
color: white;
|
||
padding: 10px 15px;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.v3-prototype-notice {
|
||
background: #f0f9ff;
|
||
border: 1px solid #0ea5e9;
|
||
border-radius: 8px;
|
||
padding: 15px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.conversion-tips {
|
||
background: #fffbeb;
|
||
border: 2px solid #F59E0B;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.tip-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<a href="../index.html" class="back-nav">← 返回導航</a>
|
||
|
||
<div class="diamond-balance">
|
||
<div class="diamond-icon">💎</div>
|
||
<div style="font-weight: bold; margin: 5px 0;">23</div>
|
||
<div style="font-size: 12px; color: #666;">鑽石餘額</div>
|
||
</div>
|
||
|
||
<div class="shop-container">
|
||
<div class="v3-prototype-notice">
|
||
<h3>🔄 v3.0原型通知</h3>
|
||
<p>本頁面展示<strong>鑽石商店系統</strong>，基於共用模組規格的完整付費轉換和道具商店原型。</p>
|
||
<p>📋 <strong>對應規格</strong>: <a href="../../function-specs/common/business-rules.md#br-pay-01-鑽石購買規則" target="_blank">鑽石購買規則</a> | <a href="../../function-specs/common/business-rules.md#br-pay-03-道具商店系統" target="_blank">道具商店系統</a></p>
|
||
</div>
|
||
|
||
<div class="shop-header">
|
||
<h1>💎 Drama Ling 鑽石商店</h1>
|
||
<p>購買鑽石解鎖高級功能，提升學習體驗</p>
|
||
</div>
|
||
|
||
<div class="conversion-tips">
|
||
<h3>💡 智能購買建議</h3>
|
||
<div class="tip-item">
|
||
<span>🎯</span>
|
||
<span>您還需要 <strong>17顆鑽石</strong> 完成本週學習計劃</span>
|
||
</div>
|
||
<div class="tip-item">
|
||
<span>⭐</span>
|
||
<span>購買50顆套餐可獲得 <strong>20%額外鑽石</strong> 獎勵</span>
|
||
</div>
|
||
<div class="tip-item">
|
||
<span>🔥</span>
|
||
<span>限時優惠：首次購買享 <strong>30%折扣</strong></span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="shop-tabs">
|
||
<button class="tab-btn active" onclick="showTab('diamonds')">💎 購買鑽石</button>
|
||
<button class="tab-btn" onclick="showTab('items')">🛒 道具商店</button>
|
||
<button class="tab-btn" onclick="showTab('bundles')">📦 超值套餐</button>
|
||
</div>
|
||
|
||
<div id="diamondsTab" class="tab-content">
|
||
<h2>💎 鑽石套餐 (基於5套餐規格)</h2>
|
||
<div class="diamond-packages">
|
||
<div class="package-card">
|
||
<div class="package-amount">💎 10</div>
|
||
<div class="package-price">NT$ 30</div>
|
||
<p style="color: #666; margin-bottom: 15px;">入門體驗，試試高級功能</p>
|
||
<button class="btn btn-primary" onclick="purchaseDiamonds(10, 30)">立即購買</button>
|
||
</div>
|
||
|
||
<div class="package-card">
|
||
<div class="package-amount">💎 30</div>
|
||
<div class="package-price">NT$ 90</div>
|
||
<div class="package-bonus">+5 額外鑽石</div>
|
||
<p style="color: #666; margin-bottom: 15px;">熱門選擇，完整週計劃</p>
|
||
<button class="btn btn-primary" onclick="purchaseDiamonds(35, 90)">立即購買</button>
|
||
</div>
|
||
|
||
<div class="package-card popular">
|
||
<div class="popular-badge">🔥 最超值</div>
|
||
<div class="package-amount">💎 50</div>
|
||
<div class="package-price">NT$ 150</div>
|
||
<div class="package-bonus">+10 額外鑽石</div>
|
||
<p style="color: #666; margin-bottom: 15px;">長期學習，經濟實惠</p>
|
||
<button class="btn btn-success" onclick="purchaseDiamonds(60, 150)">立即購買</button>
|
||
</div>
|
||
|
||
<div class="package-card">
|
||
<div class="package-amount">💎 100</div>
|
||
<div class="package-price">NT$ 300</div>
|
||
<div class="package-bonus">+25 額外鑽石</div>
|
||
<p style="color: #666; margin-bottom: 15px;">重度用戶首選</p>
|
||
<button class="btn btn-primary" onclick="purchaseDiamonds(125, 300)">立即購買</button>
|
||
</div>
|
||
|
||
<div class="package-card">
|
||
<div class="package-amount">💎 200</div>
|
||
<div class="package-price">NT$ 600</div>
|
||
<div class="package-bonus">+60 額外鑽石</div>
|
||
<p style="color: #666; margin-bottom: 15px;">終極套餐，無限可能</p>
|
||
<button class="btn btn-primary" onclick="purchaseDiamonds(260, 600)">立即購買</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="itemsTab" class="tab-content" style="display: none;">
|
||
<h2>🛒 學習道具商店</h2>
|
||
<div class="item-shop-grid">
|
||
<div class="item-card">
|
||
<div class="item-icon">❤️</div>
|
||
<h3>命條恢復藥水</h3>
|
||
<p style="color: #666;">立即恢復1點命條，無需等待</p>
|
||
<div class="item-cost">
|
||
<span>💎 3</span>
|
||
</div>
|
||
<button class="btn btn-premium" onclick="buyItem('life_potion', 3)">購買</button>
|
||
</div>
|
||
|
||
<div class="item-card">
|
||
<div class="item-icon">⚡</div>
|
||
<h3>經驗值倍增器</h3>
|
||
<p style="color: #666;">下一關經驗值獲得 x2 倍</p>
|
||
<div class="item-cost">
|
||
<span>💎 5</span>
|
||
</div>
|
||
<button class="btn btn-premium" onclick="buyItem('exp_booster', 5)">購買</button>
|
||
</div>
|
||
|
||
<div class="item-card">
|
||
<div class="item-icon">🔓</div>
|
||
<h3>關卡解鎖鑰匙</h3>
|
||
<p style="color: #666;">跳過前置條件，直接解鎖關卡</p>
|
||
<div class="item-cost">
|
||
<span>💎 8</span>
|
||
</div>
|
||
<button class="btn btn-premium" onclick="buyItem('unlock_key', 8)">購買</button>
|
||
</div>
|
||
|
||
<div class="item-card">
|
||
<div class="item-icon">🎯</div>
|
||
<h3>完美答案提示</h3>
|
||
<p style="color: #666;">獲得3次完美答案提示機會</p>
|
||
<div class="item-cost">
|
||
<span>💎 4</span>
|
||
</div>
|
||
<button class="btn btn-premium" onclick="buyItem('hint_pack', 4)">購買</button>
|
||
</div>
|
||
|
||
<div class="item-card">
|
||
<div class="item-icon">⭐</div>
|
||
<h3>星級保護盾</h3>
|
||
<p style="color: #666;">失敗時保持當前星級評分</p>
|
||
<div class="item-cost">
|
||
<span>💎 6</span>
|
||
</div>
|
||
<button class="btn btn-premium" onclick="buyItem('star_shield', 6)">購買</button>
|
||
</div>
|
||
|
||
<div class="item-card">
|
||
<div class="item-icon">🚀</div>
|
||
<h3>學習加速器</h3>
|
||
<p style="color: #666;">關卡完成時間減半，效率翻倍</p>
|
||
<div class="item-cost">
|
||
<span>💎 10</span>
|
||
</div>
|
||
<button class="btn btn-premium" onclick="buyItem('speed_booster', 10)">購買</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="bundlesTab" class="tab-content" style="display: none;">
|
||
<h2>📦 超值組合套餐</h2>
|
||
<div class="item-shop-grid">
|
||
<div class="package-card">
|
||
<h3>🎓 新手成長包</h3>
|
||
<div style="margin: 15px 0;">
|
||
<div>💎 20顆鑽石</div>
|
||
<div>❤️ 5個命條恢復藥水</div>
|
||
<div>🎯 3個答案提示</div>
|
||
</div>
|
||
<div class="package-price">NT$ 99</div>
|
||
<div style="color: #10B981; font-size: 12px; margin-bottom: 15px;">省20元</div>
|
||
<button class="btn btn-success" onclick="buyBundle('starter_pack')">購買套餐</button>
|
||
</div>
|
||
|
||
<div class="package-card popular">
|
||
<div class="popular-badge">🔥 熱賣</div>
|
||
<h3>🚀 學霸進階包</h3>
|
||
<div style="margin: 15px 0;">
|
||
<div>💎 60顆鑽石</div>
|
||
<div>⚡ 5個經驗值倍增器</div>
|
||
<div>🔓 3個解鎖鑰匙</div>
|
||
<div>⭐ 2個星級保護盾</div>
|
||
</div>
|
||
<div class="package-price">NT$ 299</div>
|
||
<div style="color: #10B981; font-size: 12px; margin-bottom: 15px;">省80元</div>
|
||
<button class="btn btn-success" onclick="buyBundle('advanced_pack')">購買套餐</button>
|
||
</div>
|
||
|
||
<div class="package-card">
|
||
<h3>👑 至尊學習包</h3>
|
||
<div style="margin: 15px 0;">
|
||
<div>💎 150顆鑽石</div>
|
||
<div>🚀 10個學習加速器</div>
|
||
<div>❤️ 無限命條 (30天)</div>
|
||
<div>🎯 無限提示 (30天)</div>
|
||
</div>
|
||
<div class="package-price">NT$ 599</div>
|
||
<div style="color: #10B981; font-size: 12px; margin-bottom: 15px;">省200元</div>
|
||
<button class="btn btn-success" onclick="buyBundle('premium_pack')">購買套餐</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="background: #f0fdf4; border: 2px solid #10B981; border-radius: 12px; padding: 20px; text-align: center; margin-top: 40px;">
|
||
<h3>💳 支付說明</h3>
|
||
<p>支援信用卡、Apple Pay、Google Pay</p>
|
||
<p>24小時內支援退款，安全可靠</p>
|
||
<p style="margin-top: 15px; color: #059669;">
|
||
<strong>首次購買享30%折扣優惠！</strong>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function showTab(tabName) {
|
||
// 隱藏所有tab內容
|
||
document.querySelectorAll('.tab-content').forEach(tab => {
|
||
tab.style.display = 'none';
|
||
});
|
||
|
||
// 移除所有active狀態
|
||
document.querySelectorAll('.tab-btn').forEach(btn => {
|
||
btn.classList.remove('active');
|
||
});
|
||
|
||
// 顯示選中的tab
|
||
document.getElementById(tabName + 'Tab').style.display = 'block';
|
||
|
||
// 設置按鈕active狀態
|
||
event.target.classList.add('active');
|
||
}
|
||
|
||
function purchaseDiamonds(amount, price) {
|
||
if (confirm(`確定要購買 ${amount} 顆鑽石嗎？\\n價格：NT$ ${price}\\n\\n支付方式將在下一步選擇。`)) {
|
||
alert(`🎉 購買成功！\\n\\n獲得：💎 ${amount} 顆鑽石\\n花費：NT$ ${price}\\n\\n鑽石已加入您的帳戶！`);
|
||
|
||
// 模擬更新餘額
|
||
const currentBalance = 23;
|
||
const newBalance = currentBalance + amount;
|
||
document.querySelector('.diamond-balance .diamond-icon + div').textContent = newBalance;
|
||
}
|
||
}
|
||
|
||
function buyItem(itemType, cost) {
|
||
const currentBalance = parseInt(document.querySelector('.diamond-balance .diamond-icon + div').textContent);
|
||
|
||
if (currentBalance < cost) {
|
||
alert(`💎 鑽石不足！\\n\\n需要：${cost} 顆鑽石\\n您的餘額：${currentBalance} 顆\\n\\n請先購買鑽石。`);
|
||
showTab('diamonds');
|
||
return;
|
||
}
|
||
|
||
const itemNames = {
|
||
'life_potion': '命條恢復藥水',
|
||
'exp_booster': '經驗值倍增器',
|
||
'unlock_key': '關卡解鎖鑰匙',
|
||
'hint_pack': '完美答案提示',
|
||
'star_shield': '星級保護盾',
|
||
'speed_booster': '學習加速器'
|
||
};
|
||
|
||
if (confirm(`確定要購買 ${itemNames[itemType]} 嗎？\\n消耗：💎 ${cost} 顆鑽石`)) {
|
||
alert(`✅ 購買成功！\\n\\n獲得：${itemNames[itemType]}\\n消耗：💎 ${cost} 顆鑽石\\n\\n道具已加入您的背包！`);
|
||
|
||
// 更新餘額
|
||
document.querySelector('.diamond-balance .diamond-icon + div').textContent = currentBalance - cost;
|
||
}
|
||
}
|
||
|
||
function buyBundle(bundleType) {
|
||
const bundles = {
|
||
'starter_pack': { name: '新手成長包', price: 99 },
|
||
'advanced_pack': { name: '學霸進階包', price: 299 },
|
||
'premium_pack': { name: '至尊學習包', price: 599 }
|
||
};
|
||
|
||
const bundle = bundles[bundleType];
|
||
if (confirm(`確定要購買 ${bundle.name} 嗎？\\n價格：NT$ ${bundle.price}\\n\\n包含多種學習道具和鑽石！`)) {
|
||
alert(`🎉 套餐購買成功！\\n\\n${bundle.name}\\n價格：NT$ ${bundle.price}\\n\\n所有道具和鑽石已發放到您的帳戶！`);
|
||
}
|
||
}
|
||
|
||
console.log('💎 Drama Ling 鑽石商店原型載入');
|
||
console.log('🛒 v3.0特色:');
|
||
console.log(' - 5套餐鑽石購買系統');
|
||
console.log(' - 完整道具商店機制');
|
||
console.log(' - 付費轉換優化設計');
|
||
console.log(' - 符合共用模組業務規則');
|
||
</script>
|
||
</body>
|
||
</html> |