768 lines
29 KiB
HTML
768 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>单词默写系统 - 教师端</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
}
|
|
body {
|
|
background: linear-gradient(135deg, #0a2a1a, #0c3a4a, #0d4b66);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 20px;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1000px;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
.header {
|
|
margin-bottom: 40px;
|
|
animation: fadeInDown 1s ease-out;
|
|
position: relative;
|
|
}
|
|
.logo {
|
|
font-size: 4.5rem;
|
|
margin-bottom: 20px;
|
|
background: linear-gradient(45deg, #7cffcb, #00d2ff, #5de6ff);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent;
|
|
text-shadow: 0 0 20px rgba(100, 255, 200, 0.3);
|
|
animation: pulse 3s infinite;
|
|
}
|
|
.title {
|
|
font-size: 2.8rem;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
color: #fff;
|
|
text-shadow: 0 0 15px rgba(100, 255, 200, 0.5);
|
|
position: relative;
|
|
z-index: 20;
|
|
}
|
|
.subtitle {
|
|
font-size: 1.2rem;
|
|
color: #c0ffea;
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
line-height: 1.6;
|
|
position: relative;
|
|
z-index: 20;
|
|
}
|
|
.main-content {
|
|
background: rgba(10, 42, 26, 0.7);
|
|
border-radius: 30px;
|
|
padding: 40px;
|
|
margin: 30px 0;
|
|
backdrop-filter: blur(15px);
|
|
border: 1px solid rgba(100, 255, 200, 0.3);
|
|
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
|
|
animation: fadeInUp 1s ease-out 0.6s both;
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: auto;
|
|
}
|
|
.tabs {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.tab-btn {
|
|
padding: 12px 25px;
|
|
border-radius: 20px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(100, 255, 200, 0.3);
|
|
color: #c0ffea;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
font-weight: 500;
|
|
}
|
|
.tab-btn.active {
|
|
background: linear-gradient(45deg, #7cffcb, #00d2ff, #5de6ff);
|
|
color: #0a2a1a;
|
|
font-weight: 600;
|
|
}
|
|
.tab-btn:hover:not(.active) {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
.search-container {
|
|
display: flex;
|
|
gap: 15px;
|
|
margin: 25px 0;
|
|
max-width: 600px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.search-input {
|
|
flex: 1;
|
|
padding: 15px 20px;
|
|
border-radius: 15px;
|
|
border: 1px solid rgba(100, 255, 200, 0.3);
|
|
background: rgba(0, 0, 0, 0.2);
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
outline: none;
|
|
}
|
|
.search-input::placeholder {
|
|
color: #a0ffe0;
|
|
}
|
|
.search-input:focus {
|
|
border-color: #7cffcb;
|
|
box-shadow: 0 0 15px rgba(124, 255, 203, 0.3);
|
|
}
|
|
.button-group {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin: 25px 0;
|
|
}
|
|
.action-btn {
|
|
padding: 12px 25px;
|
|
border-radius: 15px;
|
|
border: none;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
.btn-primary {
|
|
background: linear-gradient(45deg, #7cffcb, #00d2ff, #5de6ff);
|
|
color: #0a2a1a;
|
|
}
|
|
.btn-secondary {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #c0ffea;
|
|
border: 1px solid rgba(100, 255, 200, 0.3);
|
|
}
|
|
.btn-success {
|
|
background: linear-gradient(45deg, #34C759, #7cffcb);
|
|
color: #0a2a1a;
|
|
}
|
|
.btn-warning {
|
|
background: linear-gradient(45deg, #FFCC00, #ffd93d);
|
|
color: #0a2a1a;
|
|
}
|
|
.btn-danger {
|
|
background: linear-gradient(45deg, #FF3B30, #ff6b6b);
|
|
color: white;
|
|
}
|
|
.action-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 20px rgba(100, 255, 200, 0.3);
|
|
}
|
|
.action-btn:active {
|
|
transform: translateY(-1px);
|
|
}
|
|
.action-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
|
|
transition: 0.5s;
|
|
}
|
|
.action-btn:hover::before {
|
|
left: 100%;
|
|
}
|
|
.stats-container {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin: 30px 0;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
.stat-card {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
min-width: 120px;
|
|
border: 1px solid rgba(100, 255, 200, 0.2);
|
|
}
|
|
.stat-number {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
color: #7cffcb;
|
|
margin-bottom: 5px;
|
|
}
|
|
.stat-label {
|
|
color: #c0ffea;
|
|
font-size: 0.9rem;
|
|
}
|
|
.word-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
|
gap: 15px;
|
|
margin: 30px 0;
|
|
max-height: 400px; /* 增加高度 */
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
background: rgba(0, 0, 0, 0.1);
|
|
border-radius: 10px;
|
|
}
|
|
.word-grid::-webkit-scrollbar {
|
|
width: 8px;
|
|
}
|
|
.word-grid::-webkit-scrollbar-track {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border-radius: 4px;
|
|
}
|
|
.word-grid::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(45deg, #7cffcb, #00d2ff);
|
|
border-radius: 4px;
|
|
}
|
|
.word-item {
|
|
padding: 15px 10px;
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: #c0ffea;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid transparent;
|
|
font-weight: 500;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.word-item:hover {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
transform: translateY(-2px);
|
|
}
|
|
.word-item.selected {
|
|
background: linear-gradient(45deg, #7cffcb, #00d2ff, #5de6ff);
|
|
color: #0a2a1a;
|
|
border: 1px solid rgba(255, 255, 255, 0.5);
|
|
font-weight: 600;
|
|
}
|
|
.word-text {
|
|
font-weight: bold;
|
|
margin-bottom: 5px;
|
|
}
|
|
.word-translation {
|
|
font-size: 0.8em;
|
|
opacity: 0.8;
|
|
}
|
|
.add-word-suggestion {
|
|
background: linear-gradient(135deg, rgba(255, 204, 0, 0.2), rgba(255, 107, 107, 0.2));
|
|
border-radius: 15px;
|
|
padding: 20px;
|
|
margin: 20px 0;
|
|
border: 1px solid rgba(255, 204, 0, 0.3);
|
|
display: none;
|
|
}
|
|
.add-word-suggestion p {
|
|
color: #ffd93d;
|
|
margin-bottom: 15px;
|
|
}
|
|
.add-word-inputs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.add-word-input {
|
|
padding: 10px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(100, 255, 200, 0.3);
|
|
background: rgba(0, 0, 0, 0.2);
|
|
color: #fff;
|
|
}
|
|
.particles {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
overflow: hidden;
|
|
}
|
|
.particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: rgba(100, 255, 200, 0.2);
|
|
animation: float 15s infinite linear;
|
|
}
|
|
@keyframes float {
|
|
0% {
|
|
transform: translateY(0) translateX(0) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 0.5;
|
|
}
|
|
100% {
|
|
transform: translateY(-100vh) translateX(100px) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.cube-container {
|
|
position: absolute;
|
|
top: 20%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 150px;
|
|
height: 150px;
|
|
perspective: 1000px;
|
|
z-index: 5;
|
|
opacity: 0.7;
|
|
}
|
|
.cube {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
animation: rotate 20s infinite linear;
|
|
}
|
|
.cube-face {
|
|
position: absolute;
|
|
width: 150px;
|
|
height: 150px;
|
|
background: rgba(100, 255, 200, 0.1);
|
|
border: 2px solid rgba(100, 255, 200, 0.3);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
color: rgba(100, 255, 200, 0.7);
|
|
backdrop-filter: blur(2px);
|
|
}
|
|
.cube-face-front { transform: rotateY(0deg) translateZ(75px); }
|
|
.cube-face-back { transform: rotateY(180deg) translateZ(75px); }
|
|
.cube-face-right { transform: rotateY(90deg) translateZ(75px); }
|
|
.cube-face-left { transform: rotateY(-90deg) translateZ(75px); }
|
|
.cube-face-top { transform: rotateX(90deg) translateZ(75px); }
|
|
.cube-face-bottom { transform: rotateX(-90deg) translateZ(75px); }
|
|
@keyframes rotate {
|
|
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
|
|
100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
|
|
}
|
|
@keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
@keyframes pulse {
|
|
0% { text-shadow: 0 0 10px rgba(100, 255, 200, 0.3); }
|
|
50% { text-shadow: 0 0 30px rgba(100, 255, 200, 0.6); }
|
|
100% { text-shadow: 0 0 10px rgba(100, 255, 200, 0.3); }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.title {
|
|
font-size: 2.2rem;
|
|
}
|
|
.logo {
|
|
font-size: 3.5rem;
|
|
}
|
|
.main-content {
|
|
padding: 25px 20px;
|
|
}
|
|
.word-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
.word-item {
|
|
padding: 12px 8px;
|
|
font-size: 0.9rem;
|
|
}
|
|
.cube-container {
|
|
width: 100px;
|
|
height: 100px;
|
|
top: 25%;
|
|
}
|
|
.cube-face {
|
|
width: 100px;
|
|
height: 100px;
|
|
font-size: 1.5rem;
|
|
}
|
|
.cube-face-front { transform: rotateY(0deg) translateZ(50px); }
|
|
.cube-face-back { transform: rotateY(180deg) translateZ(50px); }
|
|
.cube-face-right { transform: rotateY(90deg) translateZ(50px); }
|
|
.cube-face-left { transform: rotateY(-90deg) translateZ(50px); }
|
|
.cube-face-top { transform: rotateX(90deg) translateZ(50px); }
|
|
.cube-face-bottom { transform: rotateX(-90deg) translateZ(50px); }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.title {
|
|
font-size: 1.8rem;
|
|
}
|
|
.subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
.main-content {
|
|
padding: 20px 15px;
|
|
}
|
|
.word-grid {
|
|
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
|
|
}
|
|
.word-display {
|
|
font-size: 1.5rem;
|
|
}
|
|
.word-blank {
|
|
font-size: 1.5rem;
|
|
min-width: 150px;
|
|
letter-spacing: 3px;
|
|
}
|
|
.stats-container {
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.stat-card {
|
|
width: 100%;
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 背景粒子 -->
|
|
<div class="particles" id="particles"></div>
|
|
<!-- 旋转立方体 -->
|
|
<div class="cube-container">
|
|
<div class="cube">
|
|
<div class="cube-face cube-face-front">词</div>
|
|
<div class="cube-face cube-face-back">库</div>
|
|
<div class="cube-face cube-face-right">管</div>
|
|
<div class="cube-face cube-face-left">理</div>
|
|
<div class="cube-face cube-face-top">系</div>
|
|
<div class="cube-face cube-face-bottom">统</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="header">
|
|
<div class="logo">
|
|
<i class="fas fa-chalkboard-teacher"></i>
|
|
</div>
|
|
<h1 class="title">单词默写系统 - 教师端</h1>
|
|
<p class="subtitle">选择单词并导出配置文件</p>
|
|
</div>
|
|
<!-- 主要内容区域 -->
|
|
<div class="main-content">
|
|
<!-- 标签页 -->
|
|
<div class="tabs">
|
|
<button class="tab-btn active" onclick="switchTab('selection')">单词选择</button>
|
|
</div>
|
|
<!-- 单词选择标签页 -->
|
|
<div id="selectionTab">
|
|
<h3 style="color: #fff; margin: 20px 0;">选择单词</h3>
|
|
<div class="search-container">
|
|
<input type="text" class="search-input" id="searchInput" placeholder="搜索单词..." oninput="filterWords()">
|
|
<button class="action-btn btn-secondary" onclick="clearSearch()">
|
|
<i class="fas fa-times"></i> 清除
|
|
</button>
|
|
</div>
|
|
<!-- 添加单词提示 -->
|
|
<div id="addWordSuggestion" class="add-word-suggestion">
|
|
<p><i class="fas fa-lightbulb"></i> 没有找到您要的单词？可以添加到词库中！</p>
|
|
<div class="add-word-inputs">
|
|
<input type="text" class="add-word-input" id="newWordInput" placeholder="英文单词">
|
|
<input type="text" class="add-word-input" id="newTranslationInput" placeholder="中文翻译">
|
|
<button class="action-btn btn-warning" onclick="addNewWordWithTranslation()">
|
|
<i class="fas fa-plus"></i> 添加单词
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="button-group">
|
|
<button class="action-btn btn-primary" onclick="selectAllWords()">
|
|
<i class="fas fa-check-square"></i> 全选
|
|
</button>
|
|
<button class="action-btn btn-secondary" onclick="deselectAllWords()">
|
|
<i class="fas fa-square"></i> 取消全选
|
|
</button>
|
|
<button class="action-btn btn-warning" onclick="randomSelectWords()">
|
|
<i class="fas fa-dice"></i> 随机60个
|
|
</button>
|
|
<button class="action-btn btn-success" onclick="exportConfig()">
|
|
<i class="fas fa-download"></i> 导出 .js 配置 (Base64 English)
|
|
</button>
|
|
</div>
|
|
<div class="stats-container">
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="totalWords">0</div>
|
|
<div class="stat-label">总单词</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="selectedCount">0</div>
|
|
<div class="stat-label">已选择</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-number" id="percentage">0%</div>
|
|
<div class="stat-label">完成度</div>
|
|
</div>
|
|
</div>
|
|
<div class="word-grid" id="wordGrid">
|
|
<!-- 单词项将通过JavaScript动态生成 -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// 单词库 - 与原始代码相同的词库
|
|
let toeflWords = [
|
|
{ "word": "instrument", "translation": "n. 工具、手段" },
|
|
{ "word": "therefore", "translation": "adv. 因此" },
|
|
{ "word": "tradition", "translation": "n. 传统" },
|
|
{ "word": "represent", "translation": "v. 代表、描绘" },
|
|
{ "word": "iceberg", "translation": "n. 冰山" },
|
|
{ "word": "store", "translation": "v. 储存" },
|
|
{ "word": "depend", "translation": "v. 依赖" },
|
|
{ "word": "general", "translation": "adj. 整体的、普遍的、大体的" },
|
|
{ "word": "contrast", "translation": "n. 对比、差别" },
|
|
{ "word": "predator", "translation": "n. 捕食者" },
|
|
{ "word": "against", "translation": "prep. 与……相反、违背、对比、以…为背景" },
|
|
{ "word": "survive", "translation": "v. 存活、挺过、比……活的长" },
|
|
{ "word": "nature", "translation": "n. 自然、本质" },
|
|
{ "word": "solar", "translation": "adj. 太阳的" },
|
|
{ "word": "architecture", "translation": "n. 建筑" },
|
|
{ "word": "primarily", "translation": "adv. 主要地" },
|
|
{ "word": "observe", "translation": "v. 观察（到）、遵从（法律等）" },
|
|
{ "word": "canal", "translation": "n. 运河" },
|
|
{ "word": "craft", "translation": "n. 手艺" },
|
|
{ "word": "reflect", "translation": "v. 反映、反射、反思" },
|
|
{ "word": "argue", "translation": "v. 论证" },
|
|
{ "word": "draw", "translation": "v. 画、得出、提取、轻拉" },
|
|
{ "word": "theater", "translation": "n. 剧院、戏剧表演" },
|
|
{ "word": "especially", "translation": "adv. 特别是、尤其" },
|
|
{ "word": "aggressive", "translation": "adj. 攻击性的" },
|
|
{ "word": "extreme", "translation": "adj.&n. 极度、极端、极大（的）" },
|
|
{ "word": "sense", "translation": "n. 意识" },
|
|
{ "word": "single", "translation": "adj. 单一的、单身的 v. 选中" },
|
|
{ "word": "previous", "translation": "adj. 先前的" },
|
|
{ "word": "obtain", "translation": "v. 获得" }
|
|
];
|
|
// 全局变量
|
|
let selectedWords = []; // 存储选中的单词对象 { word, translation }
|
|
|
|
// 页面加载时初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
renderWordGrid();
|
|
updateStats();
|
|
createParticles();
|
|
});
|
|
|
|
// 创建背景粒子
|
|
function createParticles() {
|
|
const particlesContainer = document.getElementById('particles');
|
|
const particleCount = 30;
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
const size = Math.random() * 20 + 5;
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${Math.random() * 100}%`;
|
|
particle.style.top = `${Math.random() * 100}%`;
|
|
const delay = Math.random() * 15;
|
|
const duration = 15 + Math.random() * 10;
|
|
particle.style.animationDelay = `${delay}s`;
|
|
particle.style.animationDuration = `${duration}s`;
|
|
const colors = ['rgba(100, 255, 200, 0.2)', 'rgba(0, 210, 255, 0.2)', 'rgba(93, 230, 255, 0.2)'];
|
|
particle.style.background = colors[Math.floor(Math.random() * colors.length)];
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// 标签页切换
|
|
function switchTab(tabId) {
|
|
document.querySelectorAll('.tab-btn').forEach(tab => {
|
|
tab.classList.remove('active');
|
|
});
|
|
event.target.classList.add('active');
|
|
if (tabId === 'selection') {
|
|
document.getElementById('selectionTab').style.display = 'block';
|
|
}
|
|
}
|
|
|
|
// 渲染单词网格
|
|
function renderWordGrid(filteredWords = toeflWords) {
|
|
const wordGrid = document.getElementById('wordGrid');
|
|
wordGrid.innerHTML = '';
|
|
filteredWords.forEach(wordObj => {
|
|
const wordItem = document.createElement('div');
|
|
wordItem.className = `word-item ${selectedWords.some(w => w.word === wordObj.word) ? 'selected' : ''}`;
|
|
wordItem.innerHTML = `
|
|
<div class="word-text">${wordObj.word}</div>
|
|
<div class="word-translation">${wordObj.translation}</div>
|
|
`;
|
|
wordItem.onclick = () => toggleWordSelection(wordObj);
|
|
wordGrid.appendChild(wordItem);
|
|
});
|
|
}
|
|
|
|
// 切换单词选择状态
|
|
function toggleWordSelection(wordObj) {
|
|
const index = selectedWords.findIndex(w => w.word === wordObj.word);
|
|
if (index > -1) {
|
|
selectedWords.splice(index, 1);
|
|
} else {
|
|
selectedWords.push(wordObj);
|
|
}
|
|
renderWordGrid();
|
|
updateStats();
|
|
}
|
|
|
|
// 更新统计信息
|
|
function updateStats() {
|
|
const total = toeflWords.length;
|
|
const selected = selectedWords.length;
|
|
const percentage = total > 0 ? Math.round((selected / total) * 100) : 0;
|
|
document.getElementById('selectedCount').textContent = selected;
|
|
document.getElementById('totalWords').textContent = total;
|
|
document.getElementById('percentage').textContent = percentage + '%';
|
|
}
|
|
|
|
// 全选单词
|
|
function selectAllWords() {
|
|
selectedWords = [...toeflWords];
|
|
renderWordGrid();
|
|
updateStats();
|
|
}
|
|
|
|
// 取消全选
|
|
function deselectAllWords() {
|
|
selectedWords = [];
|
|
renderWordGrid();
|
|
updateStats();
|
|
}
|
|
|
|
// 随机选择60个单词
|
|
function randomSelectWords() {
|
|
selectedWords = [];
|
|
const shuffled = [...toeflWords].sort(() => 0.5 - Math.random());
|
|
selectedWords = shuffled.slice(0, Math.min(60, shuffled.length));
|
|
renderWordGrid();
|
|
updateStats();
|
|
}
|
|
|
|
// 搜索单词
|
|
function filterWords() {
|
|
const searchTerm = document.getElementById('searchInput').value.toLowerCase();
|
|
if (searchTerm === '') {
|
|
renderWordGrid();
|
|
document.getElementById('addWordSuggestion').style.display = 'none';
|
|
} else {
|
|
const filtered = toeflWords.filter(wordObj =>
|
|
wordObj.word.toLowerCase().includes(searchTerm) ||
|
|
wordObj.translation.toLowerCase().includes(searchTerm)
|
|
);
|
|
renderWordGrid(filtered);
|
|
if (filtered.length === 0) {
|
|
document.getElementById('addWordSuggestion').style.display = 'block';
|
|
document.getElementById('newWordInput').value = searchTerm;
|
|
document.getElementById('newTranslationInput').value = '';
|
|
} else {
|
|
document.getElementById('addWordSuggestion').style.display = 'none';
|
|
}
|
|
}
|
|
}
|
|
|
|
// 添加新单词 (带翻译)
|
|
function addNewWordWithTranslation() {
|
|
const newWord = document.getElementById('newWordInput').value.trim().toLowerCase();
|
|
const newTranslation = document.getElementById('newTranslationInput').value.trim();
|
|
if (newWord && newTranslation) {
|
|
if (!toeflWords.some(w => w.word === newWord)) {
|
|
const newWordObj = { word: newWord, translation: newTranslation };
|
|
toeflWords.push(newWordObj);
|
|
toeflWords.sort((a, b) => a.word.localeCompare(b.word));
|
|
renderWordGrid();
|
|
updateStats();
|
|
document.getElementById('addWordSuggestion').style.display = 'none';
|
|
document.getElementById('searchInput').value = '';
|
|
document.getElementById('newWordInput').value = '';
|
|
document.getElementById('newTranslationInput').value = '';
|
|
alert(`单词 "${newWord}" (${newTranslation}) 已成功添加到词库中！`);
|
|
} else {
|
|
alert(`单词 "${newWord}" 已存在于词库中！`);
|
|
}
|
|
} else {
|
|
alert('请输入英文单词和中文翻译！');
|
|
}
|
|
}
|
|
|
|
// 清除搜索
|
|
function clearSearch() {
|
|
document.getElementById('searchInput').value = '';
|
|
document.getElementById('addWordSuggestion').style.display = 'none';
|
|
renderWordGrid();
|
|
}
|
|
|
|
// 导出配置文件 - 修改为导出 .js 文件，内容为 Base64 编码的单词数组 (不包含翻译)
|
|
function exportConfig() {
|
|
if (selectedWords.length === 0) {
|
|
alert('请先选择单词！');
|
|
return;
|
|
}
|
|
// --- 只加密英文单词数组 ---
|
|
const wordsOnly = selectedWords.map(wordObj => wordObj.word);
|
|
const wordsJsonString = JSON.stringify(wordsOnly, null, 2);
|
|
// 使用 encodeURIComponent 和 unescape 确保中文字符正确编码（虽然这里只有英文，但保持安全）
|
|
const encodedWordsJson = unescape(encodeURIComponent(wordsJsonString));
|
|
const base64EncodedWords = btoa(encodedWordsJson);
|
|
|
|
// 将 Base64 编码的单词数组放入 .js 文件
|
|
const jsContent = `var configData = "${base64EncodedWords}";`;
|
|
|
|
// 创建Blob对象
|
|
const blob = new Blob([jsContent], {type: 'application/javascript'}); // MIME 类型为 js
|
|
// 创建下载链接
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = 'toefl_words_config_base64_english.js'; // 文件名改为 .js
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
// 清理
|
|
setTimeout(() => {
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
}, 100);
|
|
|
|
// 添加成功动画
|
|
const exportBtn = event.target.closest('.action-btn');
|
|
const originalText = exportBtn.innerHTML;
|
|
exportBtn.innerHTML = '<i class="fas fa-check"></i> 已导出 (.js)';
|
|
exportBtn.classList.add('btn-success');
|
|
setTimeout(() => {
|
|
exportBtn.innerHTML = originalText;
|
|
exportBtn.classList.remove('btn-success');
|
|
}, 2000);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |