-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
158 lines (147 loc) · 13.6 KB
/
Copy pathindex.html
File metadata and controls
158 lines (147 loc) · 13.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meow! 日本語達陣 - 自學門戶</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Noto Sans TC', sans-serif; }
.jlpt-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.jlpt-card:not(.disabled):hover { transform: translateY(-10px); }
.disabled { cursor: not-allowed; opacity: 0.7; filter: grayscale(0.5); }
.bg-pattern {
background-color: #f8fafc;
background-image: radial-gradient(#e2e8f0 0.5px, transparent 0.5px);
background-size: 20px 20px;
}
</style>
</head>
<body class="bg-pattern min-h-screen flex flex-col">
<!-- Hero Section -->
<header class="bg-indigo-700 text-white py-16 px-4 shadow-lg text-center">
<div class="container mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-black mb-4 tracking-tight">Meow! 日本語達陣</h1>
<p class="text-indigo-100 text-lg md:text-xl font-medium max-w-2xl mx-auto">
從日檢文法展開全方位學習，系統化掌握 N1 至 N5 核心能力。
</p>
<button id="sync-progress" disabled class="mt-8 mx-auto bg-white/20 hover:bg-white/30 text-white px-6 py-3 rounded-full text-sm font-bold transition flex items-center gap-2 backdrop-blur-sm border border-white/30">
<span>☁️</span> <span id="sync-label">同步雲端進度</span>
</button>
</div>
</header>
<!-- Main Content -->
<main class="container mx-auto px-4 py-16 flex-grow">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto">
<!-- N1 Card (已啟用 - 寶石紅) -->
<a href="jp_n1.html" class="jlpt-card bg-white rounded-[2.5rem] shadow-xl border-2 border-rose-100 p-8 flex flex-col items-center text-center hover:shadow-rose-200 hover:border-rose-500 ring-4 ring-rose-50 group">
<div class="w-20 h-20 bg-rose-600 text-white rounded-full flex items-center justify-center text-3xl font-black mb-6 shadow-lg shadow-rose-200 group-hover:scale-110 transition-transform">N1</div>
<h2 class="text-2xl font-bold text-slate-800 mb-2">日本語能力試驗 N1</h2>
<span class="px-4 py-1 bg-rose-100 text-rose-700 rounded-full text-xs font-black uppercase tracking-widest">立即學習</span>
<p class="mt-4 text-slate-500 text-sm leading-relaxed italic">「日語之巔。收錄 N1 核心文法、高級詞彙與 600+ 單字雙向練習。」</p>
<div class="mt-6 flex items-center text-rose-600 font-bold text-sm">
開始挑戰
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</a>
<!-- N2 Card (已啟用 - 紫色) -->
<a href="jp_n2.html" class="jlpt-card bg-white rounded-[2.5rem] shadow-xl border-2 border-violet-100 p-8 flex flex-col items-center text-center hover:shadow-violet-200 hover:border-violet-500 ring-4 ring-violet-50 group">
<div class="w-20 h-20 bg-violet-600 text-white rounded-full flex items-center justify-center text-3xl font-black mb-6 shadow-lg shadow-violet-200 group-hover:scale-110 transition-transform">N2</div>
<h2 class="text-2xl font-bold text-slate-800 mb-2">日本語能力試驗 N2</h2>
<span class="px-4 py-1 bg-purple-100 text-purple-700 rounded-full text-xs font-black uppercase tracking-widest">立即學習</span>
<p class="mt-4 text-slate-500 text-sm leading-relaxed italic">「中高級專業。收錄 80+ 項核心文法、敬語體系與 600+ 單字。」</p>
<div class="mt-6 flex items-center text-violet-600 font-bold text-sm">
開始挑戰
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</a>
<!-- N3 Card (已啟用 - 翡翠綠) -->
<a href="jp_n3.html" class="jlpt-card bg-white rounded-[2.5rem] shadow-xl border-2 border-emerald-100 p-8 flex flex-col items-center text-center hover:shadow-emerald-200 hover:border-emerald-500 ring-4 ring-emerald-50 group">
<div class="w-20 h-20 bg-emerald-600 text-white rounded-full flex items-center justify-center text-3xl font-black mb-6 shadow-lg shadow-emerald-200 group-hover:scale-110 transition-transform text-center">N3</div>
<h2 class="text-2xl font-bold text-slate-800 mb-2 text-center">日本語能力試驗 N3</h2>
<span class="px-4 py-1 bg-green-100 text-green-700 rounded-full text-xs font-black uppercase tracking-widest text-center">立即學習</span>
<p class="mt-4 text-slate-500 text-sm leading-relaxed italic text-center">「中級銜接橋樑。收錄 N3 完整文法、敬語大全與單字雙向練習。」</p>
<div class="mt-6 flex items-center text-emerald-600 font-bold text-sm text-center">
開始挑戰
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</a>
<!-- N4 Card (已啟用 - 靛藍色) -->
<a href="jp_n4.html" class="jlpt-card bg-white rounded-[2.5rem] shadow-xl border-2 border-indigo-100 p-8 flex flex-col items-center text-center hover:shadow-indigo-200 hover:border-indigo-500 ring-4 ring-indigo-50 group">
<div class="w-20 h-20 bg-indigo-800 text-white rounded-full flex items-center justify-center text-3xl font-black mb-6 shadow-lg shadow-indigo-300 group-hover:scale-110 transition-transform text-center">N4</div>
<h2 class="text-2xl font-bold text-slate-800 mb-2 text-center">日本語能力試驗 N4</h2>
<span class="px-4 py-1 bg-green-100 text-green-700 rounded-full text-xs font-black uppercase tracking-widest text-center">立即學習</span>
<p class="mt-4 text-slate-500 text-sm leading-relaxed italic text-center">「中級前期基礎。收錄 60 項核心文法與 600+ 單字雙向練習卡。」</p>
<div class="mt-6 flex items-center text-indigo-600 font-bold text-sm text-center">
開始挑戰
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</a>
<!-- N5 Card (已啟用 - 靛藍色) -->
<a href="jp_n5.html" class="jlpt-card bg-white rounded-[2.5rem] shadow-xl border-2 border-indigo-100 p-8 flex flex-col items-center text-center hover:shadow-indigo-200 hover:border-indigo-500 ring-4 ring-indigo-50 group">
<div class="w-20 h-20 bg-indigo-600 text-white rounded-full flex items-center justify-center text-3xl font-black mb-6 shadow-lg shadow-indigo-200 group-hover:scale-110 transition-transform text-center">N5</div>
<h2 class="text-2xl font-bold text-slate-800 mb-2 text-center">日本語能力試驗 N5</h2>
<span class="px-4 py-1 bg-green-100 text-green-700 rounded-full text-xs font-black uppercase tracking-widest text-center">立即學習</span>
<p class="mt-4 text-slate-500 text-sm leading-relaxed italic text-center">「入門基礎。系統化收錄 N5 核心文法、單字庫與智能練習卡。」</p>
<div class="mt-6 flex items-center text-indigo-600 font-bold text-sm text-center">
開始挑戰
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</a>
<!-- Verbs Card (琥珀色) -->
<a href="jp_verbs.html" class="jlpt-card bg-white rounded-[2.5rem] shadow-xl border-2 border-amber-100 p-8 flex flex-col items-center text-center hover:shadow-amber-200 hover:border-amber-500 ring-4 ring-amber-50 group">
<div class="w-20 h-20 bg-amber-500 text-white rounded-full flex items-center justify-center text-3xl font-black mb-6 shadow-lg shadow-amber-200 group-hover:scale-110 transition-transform text-center">V</div>
<h2 class="text-2xl font-bold text-slate-800 mb-2 text-center">動詞變化全攻略</h2>
<span class="px-4 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-black uppercase tracking-widest text-center">專項突破</span>
<p class="mt-4 text-slate-500 text-sm leading-relaxed italic text-center">「掌握日語靈魂。收錄 N1-N5 動詞三類變化、12 種接續與自動變化引擎。」</p>
<div class="mt-6 flex items-center text-amber-600 font-bold text-sm text-center">
立即掌握
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</a>
<!-- Kanji Card (翡翠綠) -->
<a href="jp_kanji.html" class="jlpt-card bg-white rounded-[2.5rem] shadow-xl border-2 border-emerald-100 p-8 flex flex-col items-center text-center hover:shadow-emerald-200 hover:border-emerald-500 ring-4 ring-emerald-50 group">
<div class="w-20 h-20 bg-emerald-600 text-white rounded-full flex items-center justify-center text-3xl font-black mb-6 shadow-lg shadow-emerald-200 group-hover:scale-110 transition-transform text-center">字</div>
<h2 class="text-2xl font-bold text-slate-800 mb-2 text-center">漢字挑戰全攻略</h2>
<span class="px-4 py-1 bg-emerald-100 text-emerald-700 rounded-full text-xs font-black uppercase tracking-widest text-center">字彙巔峰</span>
<p class="mt-4 text-slate-500 text-sm leading-relaxed italic text-center">「突破讀寫障礙。收錄 N1-N5 常用漢字、讀音、含義與實戰例句。」</p>
<div class="mt-6 flex items-center text-emerald-600 font-bold text-sm text-center">
立即挑戰
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</div>
</a>
</div>
</main>
<footer class="bg-slate-100 border-t border-slate-200 py-12 mt-20">
<div class="container mx-auto px-4 max-w-4xl text-center">
<div class="mb-6">
<a href="https://github.com/BlueCatMe/learning_jp" target="_blank" class="inline-flex items-center gap-2 text-slate-500 hover:text-indigo-600 transition font-medium">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<span>GitHub: BlueCatMe/learning_jp</span>
</a>
</div>
<div class="space-y-4 text-slate-400 text-xs leading-relaxed">
<p class="font-bold text-slate-500 uppercase tracking-widest text-[10px]">⚖️ 免責聲明與著作權說明</p>
<p>本網站所使用的教材內容（包含單字及文法）均蒐羅自網路公開資源，主要作為個人日文學習進度檢核與線上單字卡練習之用。<b>本項目完全不具備任何商業營利意圖</b>。本項目旨在推廣日語學習，若有任何內容涉及版權侵權疑慮，請不吝告知，我們將會立即進行處理或移除相關內容。</p>
<p class="pt-4">© 2026 Meow! 日本語達陣學習計畫</p>
</div>
</div>
</footer>
<script src="assets/js/sync-service.js"></script>
</body>
</html>