-
Notifications
You must be signed in to change notification settings - Fork 634
Expand file tree
/
Copy pathindex.html
More file actions
256 lines (243 loc) · 14.6 KB
/
Copy pathindex.html
File metadata and controls
256 lines (243 loc) · 14.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
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
<!-- Author: Qim -->
<!-- Blog: https://ichochy.com -->
<!-- Email: Qim.it@icloud.com -->
<!-- FileName: iReader:index.html -->
<!-- Update: 2026/8/13 -->
<!-- Copyright (c) 2025. -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="description" content="新概念英语点读系统，在线课文朗读、单句点读、中英对照，支持课本选择、课程列表、逐句播放与中英对照。" />
<meta name="robots" content="index,follow,max-image-preview:large" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-title" content="新概念英语" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#f7f3ee" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#0f1317" media="(prefers-color-scheme: dark)" />
<meta property="og:locale" content="zh_CN" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="新概念英语点读系统" />
<meta property="og:title" content="新概念英语点读系统 | 在线英语学习" />
<meta property="og:description" content="新概念英语点读系统，在线课文朗读、单句点读、中英对照，支持课本选择、课程列表、逐句播放与中英对照。" />
<meta property="og:url" content="https://nce.ichochy.com/" />
<meta property="og:image" content="https://nce.ichochy.com/screenshot/pc.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="新概念英语点读系统 | 在线英语学习" />
<meta name="twitter:description" content="新概念英语点读系统，在线课文朗读、单句点读、中英对照，支持课本选择、课程列表、逐句播放与中英对照。" />
<meta name="twitter:image" content="https://nce.ichochy.com/screenshot/pc.png" />
<title>新概念英语点读系统 | 在线英语学习</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="canonical" href="https://nce.ichochy.com/" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png" sizes="180x180">
<link rel="manifest" href="manifest.webmanifest">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "新概念英语点读系统",
"url": "https://nce.ichochy.com/",
"description": "新概念英语点读系统，在线课文朗读、单句点读、中英对照，支持课本选择、课程列表、逐句播放与中英对照。",
"inLanguage": "zh-CN"
}
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "新概念英语点读系统",
"url": "https://nce.ichochy.com/",
"applicationCategory": "EducationApplication",
"operatingSystem": "All",
"isAccessibleForFree": true,
"description": "新概念英语点读系统，在线课文朗读、单句点读、中英对照，支持课本选择、课程列表、逐句播放与中英对照。",
"inLanguage": "zh-CN",
"image": "https://nce.ichochy.com/screenshot/pc.png"
}
</script>
</head>
<body>
<div id="app">
<header class="app-header">
<div class="header-content">
<img src="apple-touch-icon.png" alt="Logo" class="header-logo" />
<div class="header-title-group">
<h1>新概念英语</h1>
<p class="subtitle">New Concept English</p>
</div>
</div>
<div class="header-actions">
<a class="status-pill" href="https://ichochy.com" target="_blank" rel="noopener noreferrer">Blog</a>
<button id="themeToggle" class="theme-toggle" type="button" aria-label="切换主题">
<svg class="sun-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<circle cx="10" cy="10" r="4" stroke="currentColor" stroke-width="1.5" />
<path
d="M10 2V4M10 16V18M18 10H16M4 10H2M15.66 15.66L14.24 14.24M5.76 5.76L4.34 4.34M15.66 4.34L14.24 5.76M5.76 14.24L4.34 15.66"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<svg class="moon-icon" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path
d="M17.5 11.18C16.82 11.39 16.11 11.5 15.37 11.5C11.47 11.5 8.31 8.34 8.31 4.44C8.31 3.7 8.42 2.99 8.63 2.31C5.46 3.07 3 5.92 3 9.37C3 13.27 6.16 16.43 10.06 16.43C13.51 16.43 16.36 13.97 17.12 10.8"
stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</header>
<div class="container">
<aside class="unit-list desktop-only" aria-label="课程列表">
<h2>课程列表</h2>
<div id="unitListContainer"></div>
</aside>
<div class="player-column">
<main class="player-section">
<div class="book-info">
<div class="book-cover-wrap">
<img id="bookCover" alt="课本封面" class="book-cover" />
</div>
<div class="book-meta">
<p id="bookTitle" class="book-name">选择课本</p>
<p id="bookHint" class="book-hint"></p>
</div>
<label class="book-select-wrap">
<span class="select-label">课本</span>
<select class="book-select" id="bookSelect" aria-label="选择课本">
<option value="">选择课本</option>
</select>
</label>
</div>
<section class="control-panel" aria-label="课程与播放控制区">
<div class="navigation-buttons">
<button id="prevUnitBtn" class="nav-btn prev-btn" type="button" title="上一课" aria-label="上一课">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M12 16L7 11L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
<label class="unit-select-wrap">
<select id="unitSelect" class="unit-select" aria-label="选择课程">
<option value="">选择 Unit</option>
</select>
</label>
<button id="nextUnitBtn" class="nav-btn next-btn" type="button" title="下一课" aria-label="下一课">
<svg width="16" height="16" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M8 4L13 9L8 14" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" />
</svg>
</button>
<button id="toggleTranslationBtn" class="toggle-translation-btn" type="button" aria-pressed="false">
中
</button>
<button id="loopToggleBtn" class="loop-toggle-btn" type="button" title="循环播放" aria-label="循环播放" aria-pressed="false">
<!-- 1. 关闭循环：循环箭头 + 斜线禁用符号 -->
<svg class="loop-icon-off" width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M4.5 8A5.5 5.5 0 0 1 13 4.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
<path d="M11 2.5l2.5 2.5-2.5 2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5 12A5.5 5.5 0 0 1 7 15.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
<path d="M9 17.5L6.5 15l2.5-2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 斜线禁用 -->
<line x1="4" y1="4" x2="16" y2="16" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>
</svg>
<!-- 2. 单句点读：手指指针 + 播放三角 -->
<svg class="loop-icon-click" width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<!-- 手指轮廓 -->
<path d="M8 10V5.5a1.5 1.5 0 0 1 3 0V10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11 8.5a1.5 1.5 0 0 1 3 0v1.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
<path d="M14 9.5a1.5 1.5 0 0 1 3 0V13a5 5 0 0 1-5 5H9a4 4 0 0 1-4-4v-2a1 1 0 0 1 2 0v1.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 12.5V10" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
</svg>
<!-- 3. 单句循环：循环箭头 + 中心「1」-->
<svg class="loop-icon-one" width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M4.5 8A5.5 5.5 0 0 1 13 4.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
<path d="M11 2.5l2.5 2.5-2.5 2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.5 12A5.5 5.5 0 0 1 7 15.5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
<path d="M9 17.5L6.5 15l2.5-2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 中心「1」标牌 -->
<rect x="7.5" y="7" width="5" height="6" rx="1.2" fill="currentColor"/>
<text x="10" y="12" text-anchor="middle" font-size="5.5" font-weight="900" fill="var(--bg, #fff)" stroke="none" font-family="system-ui,sans-serif">1</text>
</svg>
<!-- 4. 本课循环：横线列表 + 右侧循环箭头 -->
<svg class="loop-icon-list" width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<!-- 三条列表线 -->
<path d="M2.5 5.5h9M2.5 10h7M2.5 14.5h5" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
<!-- 右侧小循环箭头 -->
<path d="M13.5 8.5a3 3 0 0 1 0 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M11 11.5l2.5-3 2.5 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16.5 11.5l-2.5 3-2.5-3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<!-- 5. 本书循环：书页 + 围绕书的大循环箭头 -->
<svg class="loop-icon-book" width="18" height="18" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<!-- 书本主体 -->
<rect x="5" y="4" width="10" height="12" rx="1.2" stroke="currentColor" stroke-width="1.5"/>
<!-- 书脊线 -->
<line x1="8" y1="4" x2="8" y2="16" stroke="currentColor" stroke-width="1.3"/>
<!-- 上方弧形箭头 -->
<path d="M5.5 3A7 7 0 0 1 14.5 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M13 1.5l1.5 1.5-1.5 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<!-- 下方弧形箭头 -->
<path d="M14.5 17A7 7 0 0 1 5.5 17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 18.5L5.5 17 7 15.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
<div class="audio-player">
<audio id="audioPlayer" preload="metadata" playsinline></audio>
<button id="playPauseBtn" class="play-btn" type="button" aria-label="播放或暂停" disabled>
<svg class="play-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M8 5v14l11-7z" />
</svg>
<svg class="pause-icon" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z" />
</svg>
</button>
<div class="progress-container">
<span id="currentTime" class="time-display">0:00</span>
<div class="progress-bar" id="progressBar">
<div class="progress-fill" id="progressFill"></div>
<div class="progress-handle" id="progressHandle"></div>
</div>
<span id="duration" class="time-display">0:00</span>
</div>
<button id="speedBtn" class="speed-btn" type="button" title="播放速度">
<span id="speedText">1.0x</span>
</button>
</div>
</section>
<section class="lyrics-container" aria-label="双语歌词区">
<div id="lyricsDisplay" class="lyrics-display">
<p class="placeholder">加载中…</p>
</div>
<div class="like-and-support">
<p>---nce.ichochy.com---</p>
<p>❤️❤️❤️</p>
<button id="supportBtn" class="support-btn" type="button">打赏支持</button>
</div>
</section>
</main>
</div>
</div>
<footer class="footer">
<a target="_blank" rel="noopener noreferrer" href="https://ichochy.com"><span>©2026 iChochy.</span></a>
<a href="mailto:me@ichochy.com"><span>邮箱反馈</span></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/iChochy/NCE"><span>GitHub</span></a>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/iChochy/NCE/issues"><span>issues</span></a>
</footer>
</div>
<div id="supportModal" class="support-modal" aria-hidden="true" role="dialog" aria-labelledby="supportModalTitle">
<div class="support-modal-card">
<button id="supportCloseBtn" class="support-close-btn" type="button" aria-label="关闭弹窗">×</button>
<h3 id="supportModalTitle">感谢支持</h3>
<div class="support-text">
<h3 class="support-lead">点赞、收藏、分享</h3>
<h4>如果内容有帮助过您，欢迎给予一点支持：</h4>
<h5>请我喝杯咖啡，或打赏一点生命值（可选）</h5>
<img class="support-qr" src="sponsor.jpg" alt="赞助二维码" loading="lazy"/>
<h6>我是一个 80 后程序员，目前正在与白血病（CMML）抗争。</h6>
<h5>感谢您的认可与善意，祝您一切顺利！</h5>
</div>
</div>
</div>
<script type="module" src="js/main.js"></script>
</body>
</html>