159 lines
5.3 KiB
HTML
159 lines
5.3 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-scale=1.0, user-scalable=no"
|
|
/>
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<title>梅子的成语填字</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<a
|
|
href="https://m1ngdaxie.com"
|
|
class="icon-btn back-btn"
|
|
style="text-decoration: none"
|
|
>←</a
|
|
>
|
|
<div class="header-title">梅子的成语填字</div>
|
|
<div class="header-right">
|
|
<button class="icon-btn" id="btnSound">🔊</button>
|
|
<button class="icon-btn" id="btnBigFont">字</button>
|
|
<button class="icon-btn" id="btnCheckin">📅</button>
|
|
</div>
|
|
</div>
|
|
<div class="info-bar">
|
|
<div class="info-item">今日 <span id="statScore">0</span>分</div>
|
|
<div class="info-divider"></div>
|
|
<div class="info-item">
|
|
🔥 <span id="statCombo">0</span> 连击
|
|
</div>
|
|
<div class="info-divider"></div>
|
|
<div class="info-item info-wb" id="btnWrongBook">
|
|
📖 错题本 <span class="wb-badge" id="wbBadge">0</span>
|
|
</div>
|
|
</div>
|
|
<div style="display: none">
|
|
<span id="statTotal">0</span><span id="statStreak">0</span>
|
|
</div>
|
|
<div class="diff-control">
|
|
<button class="diff-btn active" data-diff="1">简单</button>
|
|
<button class="diff-btn" data-diff="2">中等</button>
|
|
<button class="diff-btn" data-diff="3">困难</button>
|
|
</div>
|
|
<div class="game-area">
|
|
<div class="progress-bar" id="progressBar"></div>
|
|
<div id="comboDisplay" style="display: none"></div>
|
|
<div class="idiom-display" id="idiomDisplay"></div>
|
|
<div id="optLabel" style="display: none"></div>
|
|
<div class="options-grid" id="optionsGrid"></div>
|
|
<div class="action-bar">
|
|
<button class="action-btn secondary" id="btnHint">💡 提示</button>
|
|
<button class="action-btn secondary" id="btnSkip">⏭ 跳过</button>
|
|
<button class="action-btn primary" id="btnNext" style="display: none">
|
|
下一题 →
|
|
</button>
|
|
</div>
|
|
<div id="resultArea"></div>
|
|
</div>
|
|
<div class="combo-toast" id="comboToast"></div>
|
|
|
|
<div class="modal-overlay" id="wrongBookModal">
|
|
<div class="modal">
|
|
<div
|
|
class="modal-header"
|
|
style="background: linear-gradient(135deg, #6b4f2a, #c8941a)"
|
|
>
|
|
<div class="streak-display" id="wbCount">0</div>
|
|
<div class="streak-label">道错题待复习 📖</div>
|
|
</div>
|
|
<div class="modal-body wb-body" id="wbList"></div>
|
|
<div class="wb-actions">
|
|
<button class="action-btn secondary" id="closeWrongBook">
|
|
继续答题
|
|
</button>
|
|
<button class="action-btn primary" id="btnStartReview">
|
|
练习错题 →
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="whatsNewModal">
|
|
<div class="modal">
|
|
<div
|
|
class="modal-header"
|
|
style="background: linear-gradient(135deg, #2a7a52, #4caf50)"
|
|
>
|
|
<div style="font-size: 2.2rem">🎉</div>
|
|
<div
|
|
class="streak-label"
|
|
style="font-size: 1.1rem; font-weight: 900; margin-top: 6px"
|
|
>
|
|
新功能上线啦！
|
|
</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="wn-item">
|
|
<span class="wn-icon">📖</span>
|
|
<div>
|
|
<b>错题本</b>
|
|
<div class="wn-desc">
|
|
答错的成语自动收录，随时可以回来专项练习，越练越强！
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="wn-item">
|
|
<span class="wn-icon">🎨</span>
|
|
<div>
|
|
<b>全新界面</b>
|
|
<div class="wn-desc">
|
|
更清爽的布局，手机上看更舒服，为妈妈优化 💕
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="close-modal" id="closeWhatsNew">
|
|
知道了，开始答题！
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-overlay" id="checkinModal">
|
|
<div class="modal">
|
|
<div class="modal-header">
|
|
<div class="streak-display" id="modalStreak">0</div>
|
|
<div class="streak-label">天连续打卡 🌸</div>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="daily-goal">
|
|
<div class="daily-goal-label">
|
|
今日目标：<span id="modalTodayCount">0</span> / 5 题完成
|
|
</div>
|
|
<div class="daily-goal-bar">
|
|
<div
|
|
class="daily-goal-fill"
|
|
id="modalGoalFill"
|
|
style="width: 0%"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
<div class="calendar" id="modalCalendar"></div>
|
|
<p
|
|
style="font-size: 0.75rem; color: var(--text2); text-align: center"
|
|
>
|
|
每日完成5题即可打卡 ✓
|
|
</p>
|
|
</div>
|
|
<button class="close-modal" id="closeModal">关闭</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="data.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|