136 lines
5.6 KiB
HTML
136 lines
5.6 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</title>
|
||
<style>
|
||
/* 完全自定義樣式 - 沒有框架干擾 */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
body {
|
||
font-family: 'Inter', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||
background: #F7F9FC;
|
||
color: #2C3E50;
|
||
}
|
||
|
||
.container { max-width: 1200px; margin: 0 auto; padding: 2rem; }
|
||
.card { background: white; border-radius: 1rem; padding: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
|
||
.btn { background: #00E5CC; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 0.5rem; cursor: pointer; }
|
||
.btn:hover { background: #00D4B8; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="card">
|
||
<h1>混合式開發方案</h1>
|
||
<p>靜態佈局 + 動態功能</p>
|
||
|
||
<!-- 靜態內容：純HTML -->
|
||
<div class="static-content">
|
||
<h2>學習統計 (靜態展示)</h2>
|
||
<div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1rem 0;">
|
||
<div class="card" style="text-align: center;">
|
||
<div style="font-size: 2rem; font-weight: bold;">1,247</div>
|
||
<div style="color: #64748B;">總詞彙</div>
|
||
</div>
|
||
<div class="card" style="text-align: center;">
|
||
<div style="font-size: 2rem; font-weight: bold;">856</div>
|
||
<div style="color: #64748B;">已掌握</div>
|
||
</div>
|
||
<div class="card" style="text-align: center;">
|
||
<div style="font-size: 2rem; font-weight: bold;">23</div>
|
||
<div style="color: #64748B;">待複習</div>
|
||
</div>
|
||
<div class="card" style="text-align: center;">
|
||
<div style="font-size: 2rem; font-weight: bold;">368</div>
|
||
<div style="color: #64748B;">學習中</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 動態內容：需要JavaScript邏輯的部分 -->
|
||
<div class="dynamic-content">
|
||
<h2>練習選擇 (動態交互)</h2>
|
||
<div id="practice-selector">
|
||
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1rem 0;">
|
||
<div class="card practice-card" @click="selectPractice('choice')" :class="{ active: selectedPractice === 'choice' }">
|
||
<h3>選擇題練習</h3>
|
||
<p>測試詞彙定義理解</p>
|
||
</div>
|
||
<div class="card practice-card" @click="selectPractice('translation')" :class="{ active: selectedPractice === 'translation' }">
|
||
<h3>翻譯練習</h3>
|
||
<p>英中翻譯能力測試</p>
|
||
</div>
|
||
<div class="card practice-card" @click="selectPractice('synonym')" :class="{ active: selectedPractice === 'synonym' }">
|
||
<h3>同義詞練習</h3>
|
||
<p>詞彙關聯性訓練</p>
|
||
</div>
|
||
</div>
|
||
<button class="btn" @click="startPractice" :disabled="!selectedPractice">
|
||
開始練習
|
||
</button>
|
||
<div v-if="selectedPractice" style="margin-top: 1rem; color: #64748B;">
|
||
已選擇：{{ practiceTypes[selectedPractice] }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 只在需要的地方引入Vue -->
|
||
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||
<script>
|
||
// 只針對需要狀態管理的組件使用Vue
|
||
const { createApp } = Vue
|
||
|
||
createApp({
|
||
data() {
|
||
return {
|
||
selectedPractice: null,
|
||
practiceTypes: {
|
||
choice: '選擇題練習',
|
||
translation: '翻譯練習',
|
||
synonym: '同義詞練習'
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
selectPractice(type) {
|
||
this.selectedPractice = type
|
||
},
|
||
startPractice() {
|
||
if (this.selectedPractice) {
|
||
alert(`開始${this.practiceTypes[this.selectedPractice]}！`)
|
||
// 這裡可以跳轉到實際的練習頁面
|
||
window.location.href = `/practice-${this.selectedPractice}.html`
|
||
}
|
||
}
|
||
}
|
||
}).mount('#practice-selector')
|
||
</script>
|
||
|
||
<style>
|
||
.practice-card {
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
border: 2px solid transparent;
|
||
}
|
||
|
||
.practice-card:hover {
|
||
transform: translateY(-2px);
|
||
border-color: #00E5CC;
|
||
}
|
||
|
||
.practice-card.active {
|
||
border-color: #00E5CC;
|
||
background: #F0FDFA;
|
||
}
|
||
|
||
.btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
</style>
|
||
</body>
|
||
</html> |