技术专业网站建设如何自己做一个网站
现代简约单词卡片应用
- 现代简约单词卡片应用 - 基础版
- 现代简约单词卡片应用 - 增强版
文章目录
- 现代简约单词卡片应用 - 增强版
- 新增功能详解
- 1. 复习卡片功能
- 2. 搜索卡片功能
- 3. 学习统计功能
- 其他增强功能
现代简约单词卡片应用 - 增强版
在 现代简约单词卡片应用 - 基础版 的基础上，为单词卡片应用添加复习模式、搜索功能和学习统计功能，同时保持现代简约的设计风格。
下面是完整的实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>LexiCards Pro - 单词学习应用</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><script src="https://cdn.jsdelivr.net/npm/chart.js"></script><style>* {margin: 0;padding: 0;box-sizing: border-box;font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;}:root {--primary: #4361ee;--secondary: #3f37c9;--accent: #4895ef;--light: #f8f9fa;--dark: #212529;--success: #4cc9f0;--danger: #f72585;--gray: #adb5bd;--card-bg: #ffffff;--shadow: rgba(99, 99, 99, 0.1) 0px 2px 8px 0px;--review-bg: #f0f7ff;}body {background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);color: var(--dark);min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;}header {text-align: center;padding: 30px 0;margin-bottom: 20px;}h1 {font-size: 2.8rem;font-weight: 800;color: var(--primary);margin-bottom: 10px;letter-spacing: -1px;background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.subtitle {font-size: 1.1rem;color: var(--gray);max-width: 600px;margin: 0 auto;line-height: 1.6;}/* 统计信息 */.stats-container {display: flex;justify-content: space-between;gap: 20px;margin-bottom: 30px;flex-wrap: wrap;}.stat-card {background: var(--card-bg);border-radius: 16px;padding: 20px;box-shadow: var(--shadow);flex: 1;min-width: 200px;text-align: center;transition: transform 0.3s ease;}.stat-card:hover {transform: translateY(-5px);}.stat-value {font-size: 2.5rem;font-weight: 700;color: var(--primary);margin: 10px 0;}.stat-label {color: var(--gray);font-size: 0.95rem;}.progress-container {margin-top: 10px;}.progress-bar {height: 8px;background: #e9ecef;border-radius: 4px;overflow: hidden;}.progress-fill {height: 100%;background: var(--primary);border-radius: 4px;}/* 搜索区域 */.search-section {background: var(--card-bg);border-radius: 16px;padding: 25px;box-shadow: var(--shadow);margin-bottom: 30px;}.search-container {display: flex;gap: 15px;align-items: center;}.search-box {flex: 1;position: relative;}.search-box input {width: 100%;padding: 14px 14px 14px 45px;border: 2px solid #e9ecef;border-radius: 12px;font-size: 1rem;transition: all 0.3s ease;}.search-box i {position: absolute;left: 15px;top: 50%;transform: translateY(-50%);color: var(--gray);}.search-box input:focus {border-color: var(--accent);outline: none;box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);}.app-container {display: flex;flex-direction: column;gap: 30px;}/* 控制面板 */.controls {background: var(--card-bg);border-radius: 16px;padding: 25px;box-shadow: var(--shadow);}.section-title {color: var(--primary);margin-bottom: 20px;display: flex;align-items: center;gap: 10px;}.section-title i {font-size: 1.4rem;}.form-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 20px;margin-bottom: 20px;}.form-group {margin-bottom: 0;}label {display: block;margin-bottom: 8px;font-weight: 500;color: var(--dark);}input, textarea, select {width: 100%;padding: 14px;border: 2px solid #e9ecef;border-radius: 12px;font-size: 1rem;transition: all 0.3s ease;}input:focus, textarea:focus, select:focus {border-color: var(--accent);outline: none;box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.2);}.btn {padding: 14px 24px;border-radius: 12px;font-size: 1rem;font-weight: 600;cursor: pointer;transition: all 0.3s ease;border: none;display: inline-flex;align-items: center;justify-content: center;gap: 8px;}.btn-primary {background: var(--primary);color: white;}.btn-primary:hover {background: var(--secondary);transform: translateY(-2px);box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);}.btn-outline {background: transparent;border: 2px solid var(--primary);color: var(--primary);}.btn-outline:hover {background: var(--primary);color: white;}.btn-success {background: var(--success);color: white;}.btn-success:hover {background: #2db4d8;transform: translateY(-2px);}.btn-danger {background: var(--danger);color: white;}.btn-danger:hover {background: #d20f68;transform: translateY(-2px);}.btn-review {background: #8a4af3;color: white;}.btn-review:hover {background: #7634e0;transform: translateY(-2px);}.actions {display: flex;gap: 15px;margin-top: 10px;flex-wrap: wrap;}/* 卡片容器 */.cards-container {display: grid;grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));gap: 25px;margin-bottom: 40px;}.card {background: var(--card-bg);border-radius: 16px;overflow: hidden;box-shadow: var(--shadow);transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);height: 300px;perspective: 1000px;cursor: pointer;position: relative;}.card:hover {transform: translateY(-8px);box-shadow: rgba(67, 97, 238, 0.15) 0px 10px 25px;}.card.review-mode {background: var(--review-bg);border: 2px solid var(--accent);}.card.review-mode .card-front {background: