重构前端：极简极速交互设计
- 全屏点击即可记录，响应更快 - 长按直接进入输入模式 - 快速标签：工作/学习/运动/休息/创意/其他 - 底部常驻统计，无需切换页面 - 右侧面板显示最近记录 - 成就解锁动画提示 - 优化移动端触摸体验
This commit is contained in:
parent
b2a17d2aa0
commit
3eaecd18da
523
static/app.js
523
static/app.js
@ -1,256 +1,129 @@
|
||||
// API 基础地址
|
||||
const API_BASE = '';
|
||||
|
||||
// 离线队列（用于后台同步）
|
||||
const DB_NAME = 'din-offline';
|
||||
const DB_VERSION = 1;
|
||||
let db = null;
|
||||
|
||||
// 初始化 IndexedDB
|
||||
function initDB() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(DB_NAME, DB_VERSION);
|
||||
request.onerror = () => reject(request.error);
|
||||
request.onsuccess = () => {
|
||||
db = request.result;
|
||||
resolve(db);
|
||||
};
|
||||
request.onupgradeneeded = (e) => {
|
||||
const db = e.target.result;
|
||||
if (!db.objectStoreNames.contains('pending')) {
|
||||
db.createObjectStore('pending', { keyPath: 'id', autoIncrement: true });
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// 添加到离线队列
|
||||
async function addToQueue(data) {
|
||||
if (!db) await initDB();
|
||||
return new Promise((resolve, reject) => {
|
||||
const tx = db.transaction('pending', 'readwrite');
|
||||
const store = tx.objectStore('pending');
|
||||
const request = store.add({ data, timestamp: Date.now() });
|
||||
request.onsuccess = () => resolve(request.result);
|
||||
request.onerror = () => reject(request.error);
|
||||
});
|
||||
}
|
||||
|
||||
// 注册后台同步
|
||||
async function registerSync() {
|
||||
if ('serviceWorker' in navigator && 'sync' in ServiceWorkerRegistration.prototype) {
|
||||
const reg = await navigator.serviceWorker.ready;
|
||||
await reg.sync.register('sync-din');
|
||||
}
|
||||
}
|
||||
|
||||
// DOM 元素
|
||||
const dinBtn = document.getElementById('din-btn');
|
||||
const inputSection = document.getElementById('input-section');
|
||||
const dinContent = document.getElementById('din-content');
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
const skipBtn = document.getElementById('skip-btn');
|
||||
const toast = document.getElementById('toast');
|
||||
|
||||
// 状态
|
||||
let currentRecordId = null;
|
||||
let lastRecordTime = 0;
|
||||
let longPressTimer = null;
|
||||
let isLongPress = false;
|
||||
const LONG_PRESS_DURATION = 500; // 长按触发时间
|
||||
|
||||
// 初始化
|
||||
async function init() {
|
||||
await initDB();
|
||||
await loadStats();
|
||||
await loadRecent();
|
||||
await loadAchievements();
|
||||
// DOM 元素
|
||||
const triggerArea = document.getElementById('trigger-area');
|
||||
const dinBtn = document.getElementById('din-btn');
|
||||
const inputOverlay = document.getElementById('input-overlay');
|
||||
const quickInput = document.getElementById('quick-input');
|
||||
const toast = document.getElementById('toast');
|
||||
const achievementToast = document.getElementById('achievement-toast');
|
||||
|
||||
// 检查网络状态
|
||||
window.addEventListener('online', () => {
|
||||
showToast('已连接到网络', true);
|
||||
syncPendingData();
|
||||
});
|
||||
window.addEventListener('offline', () => {
|
||||
showToast('进入离线模式', false);
|
||||
});
|
||||
}
|
||||
// ========== 核心交互：超快记录 ==========
|
||||
|
||||
// 同步离线数据
|
||||
async function syncPendingData() {
|
||||
if (!db || !navigator.onLine) return;
|
||||
// 点击/触摸开始
|
||||
dinBtn.addEventListener('touchstart', handleStart, { passive: false });
|
||||
dinBtn.addEventListener('mousedown', handleStart);
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const tx = db.transaction('pending', 'readonly');
|
||||
const store = tx.objectStore('pending');
|
||||
const request = store.getAll();
|
||||
// 点击/触摸结束
|
||||
dinBtn.addEventListener('touchend', handleEnd, { passive: false });
|
||||
dinBtn.addEventListener('mouseup', handleEnd);
|
||||
dinBtn.addEventListener('mouseleave', cancelLongPress);
|
||||
|
||||
request.onsuccess = async () => {
|
||||
const pending = request.result;
|
||||
if (pending.length === 0) {
|
||||
resolve();
|
||||
return;
|
||||
}
|
||||
// 防止双击缩放
|
||||
dinBtn.addEventListener('touchmove', (e) => e.preventDefault(), { passive: false });
|
||||
|
||||
for (const item of pending) {
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/din`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(item.data)
|
||||
});
|
||||
function handleStart(e) {
|
||||
e.preventDefault();
|
||||
isLongPress = false;
|
||||
|
||||
// 删除已同步的
|
||||
const delTx = db.transaction('pending', 'readwrite');
|
||||
const delStore = delTx.objectStore('pending');
|
||||
await delStore.delete(item.id);
|
||||
} catch (err) {
|
||||
console.error('Sync failed for item:', item.id);
|
||||
}
|
||||
}
|
||||
|
||||
await loadStats();
|
||||
await loadRecent();
|
||||
resolve();
|
||||
};
|
||||
|
||||
request.onerror = () => reject(request.error);
|
||||
});
|
||||
}
|
||||
|
||||
// 加载统计数据
|
||||
async function loadStats() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/stats`);
|
||||
const stats = await res.json();
|
||||
|
||||
document.getElementById('stat-today').textContent = stats.today;
|
||||
document.getElementById('stat-week').textContent = stats.week;
|
||||
document.getElementById('stat-month').textContent = stats.month;
|
||||
document.getElementById('stat-total').textContent = stats.total;
|
||||
|
||||
// 增长率
|
||||
updateGrowth('growth-today', stats.day_growth);
|
||||
updateGrowth('growth-week', stats.week_growth);
|
||||
updateGrowth('growth-month', stats.month_growth);
|
||||
} catch (err) {
|
||||
console.error('加载统计失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
function updateGrowth(id, value) {
|
||||
const el = document.getElementById(id);
|
||||
if (value > 0) {
|
||||
el.textContent = `+${value}%`;
|
||||
el.classList.remove('negative');
|
||||
} else if (value < 0) {
|
||||
el.textContent = `${value}%`;
|
||||
el.classList.add('negative');
|
||||
} else {
|
||||
el.textContent = '-';
|
||||
}
|
||||
}
|
||||
|
||||
// 加载最近记录
|
||||
async function loadRecent() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/din?limit=10`);
|
||||
const records = await res.json();
|
||||
|
||||
const list = document.getElementById('recent-list');
|
||||
|
||||
if (records.length === 0) {
|
||||
list.innerHTML = '<div class="empty">还没有记录，点击上方按钮开始！</div>';
|
||||
return;
|
||||
}
|
||||
|
||||
list.innerHTML = records.map(r => `
|
||||
<div class="recent-item" data-id="${r.id}">
|
||||
<div class="recent-time">${formatTime(r.created_at)}</div>
|
||||
<div class="recent-content ${!r.content ? 'empty' : ''}">${r.content || '(无描述)'}</div>
|
||||
<div class="recent-actions">
|
||||
<button onclick="editRecord(${r.id}, '${escapeHtml(r.content || '')}')" title="编辑">✏️</button>
|
||||
<button onclick="deleteRecord(${r.id})" title="删除">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (err) {
|
||||
console.error('加载记录失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 加载成就
|
||||
async function loadAchievements() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/achievements`);
|
||||
const data = await res.json();
|
||||
|
||||
document.getElementById('achievement-progress').textContent =
|
||||
`(${data.unlocked_count}/${data.total_count})`;
|
||||
|
||||
const list = document.getElementById('achievement-list');
|
||||
list.innerHTML = data.achievements.map(a => `
|
||||
<div class="achievement-item ${a.unlocked ? 'unlocked' : ''}" title="${a.desc}">
|
||||
<div class="achievement-icon">${a.icon}</div>
|
||||
<div class="achievement-name">${a.name}</div>
|
||||
<div class="achievement-desc">${a.desc}</div>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (err) {
|
||||
console.error('加载成就失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 点击大按钮
|
||||
dinBtn.addEventListener('click', async () => {
|
||||
// 视觉反馈
|
||||
dinBtn.classList.add('recording');
|
||||
dinBtn.disabled = true;
|
||||
|
||||
const content = ''; // 先创建空记录
|
||||
|
||||
try {
|
||||
// 检查网络状态
|
||||
if (!navigator.onLine) {
|
||||
// 离线模式：存入队列
|
||||
await addToQueue({ content });
|
||||
await registerSync();
|
||||
showToast('已保存，将在联网时同步');
|
||||
|
||||
// 显示输入区域（离线编辑）
|
||||
currentRecordId = 'offline_' + Date.now();
|
||||
inputSection.classList.remove('hidden');
|
||||
dinContent.value = '';
|
||||
dinContent.focus();
|
||||
return;
|
||||
// 启动长按计时器
|
||||
longPressTimer = setTimeout(() => {
|
||||
isLongPress = true;
|
||||
dinBtn.classList.remove('recording');
|
||||
// 长按直接进入输入模式
|
||||
createRecord(true);
|
||||
}, LONG_PRESS_DURATION);
|
||||
}
|
||||
|
||||
function handleEnd(e) {
|
||||
e.preventDefault();
|
||||
clearTimeout(longPressTimer);
|
||||
dinBtn.classList.remove('recording');
|
||||
|
||||
// 如果不是长按，直接记录
|
||||
if (!isLongPress) {
|
||||
createRecord(false);
|
||||
}
|
||||
}
|
||||
|
||||
function cancelLongPress() {
|
||||
clearTimeout(longPressTimer);
|
||||
dinBtn.classList.remove('recording');
|
||||
}
|
||||
|
||||
// ========== 记录逻辑 ==========
|
||||
|
||||
async function createRecord(showInput = false) {
|
||||
// 防抖：1秒内不能重复点击
|
||||
const now = Date.now();
|
||||
if (now - lastRecordTime < 1000) return;
|
||||
lastRecordTime = now;
|
||||
|
||||
try {
|
||||
// 立即显示反馈（不等待网络）
|
||||
showToast('已记录！');
|
||||
|
||||
// 后台发送请求
|
||||
const res = await fetch(`${API_BASE}/api/din`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content })
|
||||
body: JSON.stringify({ content: '' })
|
||||
});
|
||||
|
||||
const data = await res.json();
|
||||
currentRecordId = data.id;
|
||||
|
||||
// 显示输入区域
|
||||
inputSection.classList.remove('hidden');
|
||||
dinContent.value = '';
|
||||
dinContent.focus();
|
||||
// 更新统计和列表
|
||||
updateStats();
|
||||
prependToList(data);
|
||||
|
||||
// 更新统计
|
||||
await loadStats();
|
||||
// 检查成就
|
||||
checkNewAchievements();
|
||||
|
||||
// 如果需要输入，显示输入面板
|
||||
if (showInput) {
|
||||
showInputPanel(data.created_at);
|
||||
}
|
||||
|
||||
} catch (err) {
|
||||
console.error('创建记录失败:', err);
|
||||
showToast('记录失败，请重试', false);
|
||||
} finally {
|
||||
dinBtn.classList.remove('recording');
|
||||
dinBtn.disabled = false;
|
||||
console.error('记录失败:', err);
|
||||
showToast('记录失败', false);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 保存内容
|
||||
saveBtn.addEventListener('click', async () => {
|
||||
// ========== 输入面板 ==========
|
||||
|
||||
function showInputPanel(timestamp) {
|
||||
document.getElementById('input-timestamp').textContent = formatTimeOnly(timestamp);
|
||||
inputOverlay.classList.add('active');
|
||||
quickInput.value = '';
|
||||
setTimeout(() => quickInput.focus(), 100);
|
||||
}
|
||||
|
||||
function hideInputPanel() {
|
||||
inputOverlay.classList.remove('active');
|
||||
quickInput.blur();
|
||||
}
|
||||
|
||||
// 保存按钮
|
||||
document.getElementById('btn-save').addEventListener('click', async () => {
|
||||
if (!currentRecordId) return;
|
||||
|
||||
const content = dinContent.value.trim();
|
||||
const content = quickInput.value.trim();
|
||||
if (!content) {
|
||||
hideInputPanel();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/din/${currentRecordId}`, {
|
||||
@ -259,129 +132,177 @@ saveBtn.addEventListener('click', async () => {
|
||||
body: JSON.stringify({ content })
|
||||
});
|
||||
|
||||
inputSection.classList.add('hidden');
|
||||
currentRecordId = null;
|
||||
|
||||
await loadRecent();
|
||||
await loadAchievements();
|
||||
showToast('记录成功！');
|
||||
// 更新列表中的内容
|
||||
updateListItem(currentRecordId, content);
|
||||
hideInputPanel();
|
||||
showToast('已保存');
|
||||
|
||||
} catch (err) {
|
||||
console.error('保存失败:', err);
|
||||
showToast('保存失败', false);
|
||||
}
|
||||
});
|
||||
|
||||
// 跳过
|
||||
skipBtn.addEventListener('click', async () => {
|
||||
inputSection.classList.add('hidden');
|
||||
currentRecordId = null;
|
||||
await loadRecent();
|
||||
await loadAchievements();
|
||||
showToast('记录成功！');
|
||||
// 跳过按钮
|
||||
document.getElementById('btn-skip').addEventListener('click', () => {
|
||||
hideInputPanel();
|
||||
});
|
||||
|
||||
// 点击遮罩关闭
|
||||
inputOverlay.addEventListener('click', (e) => {
|
||||
if (e.target === inputOverlay) {
|
||||
hideInputPanel();
|
||||
}
|
||||
});
|
||||
|
||||
// 回车保存
|
||||
dinContent.addEventListener('keypress', (e) => {
|
||||
quickInput.addEventListener('keypress', (e) => {
|
||||
if (e.key === 'Enter') {
|
||||
saveBtn.click();
|
||||
document.getElementById('btn-save').click();
|
||||
}
|
||||
});
|
||||
|
||||
// 点击外部自动跳过（不丢失记录）
|
||||
document.addEventListener('click', (e) => {
|
||||
// 输入框隐藏时不处理
|
||||
if (inputSection.classList.contains('hidden')) return;
|
||||
|
||||
// 点击输入框内部不处理
|
||||
if (inputSection.contains(e.target)) return;
|
||||
|
||||
// 点击大按钮时不处理（刚点击过）
|
||||
if (dinBtn.contains(e.target)) return;
|
||||
|
||||
// 点击其他地方：自动跳过
|
||||
skipBtn.click();
|
||||
// 快速标签
|
||||
document.querySelectorAll('.tag').forEach(tag => {
|
||||
tag.addEventListener('click', () => {
|
||||
const text = tag.dataset.text;
|
||||
quickInput.value = text;
|
||||
document.getElementById('btn-save').click();
|
||||
});
|
||||
});
|
||||
|
||||
// 编辑记录
|
||||
async function editRecord(id, currentContent) {
|
||||
const newContent = prompt('修改内容:', currentContent);
|
||||
if (newContent === null) return; // 取消
|
||||
// ========== 数据更新 ==========
|
||||
|
||||
async function updateStats() {
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/din/${id}`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ content: newContent.trim() })
|
||||
});
|
||||
const res = await fetch(`${API_BASE}/api/stats`);
|
||||
const stats = await res.json();
|
||||
|
||||
await loadRecent();
|
||||
showToast('修改成功！');
|
||||
document.getElementById('stat-today').textContent = stats.today;
|
||||
document.getElementById('stat-week').textContent = stats.week;
|
||||
document.getElementById('stat-total').textContent = stats.total;
|
||||
document.getElementById('recent-count').textContent = stats.total;
|
||||
} catch (err) {
|
||||
console.error('修改失败:', err);
|
||||
showToast('修改失败', false);
|
||||
console.error('更新统计失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除记录
|
||||
async function deleteRecord(id) {
|
||||
if (!confirm('确定删除这条记录？')) return;
|
||||
function prependToList(record) {
|
||||
const list = document.getElementById('recent-list');
|
||||
const emptyMsg = list.querySelector('.recent-item .empty');
|
||||
if (emptyMsg) {
|
||||
list.innerHTML = '';
|
||||
}
|
||||
|
||||
const item = document.createElement('div');
|
||||
item.className = 'recent-item';
|
||||
item.dataset.id = record.id;
|
||||
item.innerHTML = `
|
||||
<span class="recent-time">${formatTimeOnly(record.created_at)}</span>
|
||||
<span class="recent-content empty">(未备注)</span>
|
||||
`;
|
||||
|
||||
list.insertBefore(item, list.firstChild);
|
||||
|
||||
// 保持最多10条
|
||||
while (list.children.length > 10) {
|
||||
list.removeChild(list.lastChild);
|
||||
}
|
||||
}
|
||||
|
||||
function updateListItem(id, content) {
|
||||
const item = document.querySelector(`.recent-item[data-id="${id}"]`);
|
||||
if (item) {
|
||||
const contentEl = item.querySelector('.recent-content');
|
||||
contentEl.textContent = content;
|
||||
contentEl.classList.remove('empty');
|
||||
}
|
||||
}
|
||||
|
||||
// ========== 成就检查 ==========
|
||||
|
||||
let lastAchievementCount = 0;
|
||||
|
||||
async function checkNewAchievements() {
|
||||
try {
|
||||
await fetch(`${API_BASE}/api/din/${id}`, { method: 'DELETE' });
|
||||
const res = await fetch(`${API_BASE}/api/achievements`);
|
||||
const data = await res.json();
|
||||
|
||||
await loadRecent();
|
||||
await loadStats();
|
||||
await loadAchievements();
|
||||
showToast('删除成功');
|
||||
if (data.unlocked_count > lastAchievementCount) {
|
||||
// 有新成就解锁
|
||||
const newAchievements = data.achievements.filter(a => a.unlocked).slice(-1);
|
||||
if (newAchievements.length > 0) {
|
||||
showAchievementToast(newAchievements[0]);
|
||||
}
|
||||
}
|
||||
lastAchievementCount = data.unlocked_count;
|
||||
} catch (err) {
|
||||
console.error('删除失败:', err);
|
||||
showToast('删除失败', false);
|
||||
console.error('检查成就失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示提示
|
||||
function showToast(text, success = true) {
|
||||
toast.querySelector('.toast-text').textContent = text;
|
||||
toast.querySelector('.toast-icon').textContent = success ? '✓' : '✗';
|
||||
toast.style.background = success ? 'rgba(74,222,128,0.9)' : 'rgba(248,113,113,0.9)';
|
||||
function showAchievementToast(achievement) {
|
||||
const icon = achievementToast.querySelector('.achievement-icon');
|
||||
const text = document.getElementById('achievement-text');
|
||||
|
||||
toast.classList.remove('hidden');
|
||||
icon.textContent = achievement.icon;
|
||||
text.textContent = `解锁：${achievement.name}`;
|
||||
|
||||
achievementToast.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.add('hidden');
|
||||
}, 2000);
|
||||
achievementToast.classList.remove('show');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
// 格式化时间
|
||||
function formatTime(isoString) {
|
||||
const date = new Date(isoString);
|
||||
const now = new Date();
|
||||
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
|
||||
const recordDate = new Date(date.getFullYear(), date.getMonth(), date.getDate());
|
||||
// ========== 辅助函数 ==========
|
||||
|
||||
function showToast(message, success = true) {
|
||||
toast.textContent = message;
|
||||
toast.style.background = success ? '#ff4757' : '#ff6b6b';
|
||||
toast.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('show');
|
||||
}, 1500);
|
||||
}
|
||||
|
||||
function formatTimeOnly(isoString) {
|
||||
const date = new Date(isoString);
|
||||
const hours = date.getHours().toString().padStart(2, '0');
|
||||
const minutes = date.getMinutes().toString().padStart(2, '0');
|
||||
|
||||
if (recordDate.getTime() === today.getTime()) {
|
||||
return `${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
const yesterday = new Date(today);
|
||||
yesterday.setDate(yesterday.getDate() - 1);
|
||||
// ========== 初始化 ==========
|
||||
|
||||
if (recordDate.getTime() === yesterday.getTime()) {
|
||||
return `昨天 ${hours}:${minutes}`;
|
||||
async function init() {
|
||||
await updateStats();
|
||||
await loadRecent();
|
||||
await checkNewAchievements();
|
||||
}
|
||||
|
||||
return `${date.getMonth() + 1}/${date.getDate()}`;
|
||||
async function loadRecent() {
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/api/din?limit=10`);
|
||||
const records = await res.json();
|
||||
|
||||
const list = document.getElementById('recent-list');
|
||||
document.getElementById('recent-count').textContent = records.length;
|
||||
|
||||
if (records.length === 0) {
|
||||
list.innerHTML = '<div class="recent-item"><span class="recent-content empty">点击大按钮开始记录</span></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
// HTML 转义
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
list.innerHTML = records.map(r => `
|
||||
<div class="recent-item" data-id="${r.id}">
|
||||
<span class="recent-time">${formatTimeOnly(r.created_at)}</span>
|
||||
<span class="recent-content ${!r.content ? 'empty' : ''}">${r.content || '(未备注)'}</span>
|
||||
</div>
|
||||
`).join('');
|
||||
} catch (err) {
|
||||
console.error('加载记录失败:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// 启动
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<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">
|
||||
<meta name="theme-color" content="#1a1a2e">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||||
<meta name="theme-color" content="#0d0d0f">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<meta name="apple-mobile-web-app-title" content="din">
|
||||
@ -12,83 +12,83 @@
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="apple-touch-icon" href="icon-192.png">
|
||||
<script>
|
||||
// 注册 Service Worker
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js')
|
||||
.then(reg => console.log('SW registered'))
|
||||
.catch(err => console.log('SW error:', err));
|
||||
navigator.serviceWorker.register('/sw.js');
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- 头部 -->
|
||||
<header>
|
||||
<h1>🦐 din</h1>
|
||||
<p class="subtitle">Do It Now - 想到就做</p>
|
||||
</header>
|
||||
<!-- 主触发区 - 全屏点击即可记录 -->
|
||||
<div class="din-trigger" id="trigger-area">
|
||||
<button class="big-btn" id="din-btn" aria-label="记录 din">
|
||||
<span class="btn-icon">⚡</span>
|
||||
<span class="btn-text">din</span>
|
||||
</button>
|
||||
<p class="hint">点击任意处记录 · 长按快捷输入</p>
|
||||
</div>
|
||||
|
||||
<!-- 统计面板 -->
|
||||
<section class="stats">
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="stat-today">0</div>
|
||||
<!-- 底部统计 -->
|
||||
<div class="stats-bar">
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" id="stat-today">0</div>
|
||||
<div class="stat-label">今日</div>
|
||||
<div class="stat-growth" id="growth-today">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="stat-week">0</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num" id="stat-week">0</div>
|
||||
<div class="stat-label">本周</div>
|
||||
<div class="stat-growth" id="growth-week">-</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-value" id="stat-month">0</div>
|
||||
<div class="stat-label">本月</div>
|
||||
<div class="stat-growth" id="growth-month">-</div>
|
||||
</div>
|
||||
<div class="stat-card total">
|
||||
<div class="stat-value" id="stat-total">0</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-num total" id="stat-total">0</div>
|
||||
<div class="stat-label">总计</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 大按钮 -->
|
||||
<section class="main-action">
|
||||
<button id="din-btn" class="din-button">
|
||||
<span class="btn-text">🔴</span>
|
||||
<span class="btn-label">Do It Now</span>
|
||||
</button>
|
||||
</section>
|
||||
<!-- 成就按钮 -->
|
||||
<button class="achievements-btn" id="achievements-btn" title="成就">🏆</button>
|
||||
|
||||
<!-- 快速输入（点击后显示） -->
|
||||
<section id="input-section" class="input-section hidden">
|
||||
<input type="text" id="din-content" placeholder="做了什么？（可选，直接回车跳过）" maxlength="100">
|
||||
<!-- 最近记录面板 -->
|
||||
<div class="recent-panel" id="recent-panel">
|
||||
<div class="recent-title">
|
||||
<span>最近记录</span>
|
||||
<span class="recent-count" id="recent-count">0</span>
|
||||
</div>
|
||||
<div class="recent-list" id="recent-list">
|
||||
<div class="recent-item">
|
||||
<span class="recent-content empty">点击大按钮开始记录</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 快速输入面板 -->
|
||||
<div class="input-overlay" id="input-overlay">
|
||||
<div class="input-panel">
|
||||
<div class="input-header">
|
||||
<span class="input-title">添加备注</span>
|
||||
<span class="timestamp" id="input-timestamp">--:--</span>
|
||||
</div>
|
||||
<input type="text" class="quick-input" id="quick-input" placeholder="做了什么？（可选）" autocomplete="off">
|
||||
<div class="quick-tags" id="quick-tags">
|
||||
<span class="tag" data-text="工作">💼 工作</span>
|
||||
<span class="tag" data-text="学习">📚 学习</span>
|
||||
<span class="tag" data-text="运动">💪 运动</span>
|
||||
<span class="tag" data-text="休息">😴 休息</span>
|
||||
<span class="tag" data-text="创意">💡 创意</span>
|
||||
<span class="tag" data-text="其他">📝 其他</span>
|
||||
</div>
|
||||
<div class="input-actions">
|
||||
<button id="save-btn" class="btn-primary">保存</button>
|
||||
<button id="skip-btn" class="btn-secondary">跳过</button>
|
||||
<button class="btn btn-skip" id="btn-skip">跳过</button>
|
||||
<button class="btn btn-save" id="btn-save">保存</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 最近记录 -->
|
||||
<section class="recent">
|
||||
<h2>📝 最近记录</h2>
|
||||
<div id="recent-list" class="recent-list">
|
||||
<div class="empty">还没有记录，点击上方按钮开始！</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 成就 -->
|
||||
<section class="achievements">
|
||||
<h2>🏆 成就 <span id="achievement-progress">(0/8)</span></h2>
|
||||
<div id="achievement-list" class="achievement-list">
|
||||
<!-- 动态生成 -->
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 成功提示 -->
|
||||
<div id="toast" class="toast hidden">
|
||||
<span class="toast-icon">✓</span>
|
||||
<span class="toast-text">记录成功！</span>
|
||||
<!-- Toast -->
|
||||
<div class="toast" id="toast">已记录！</div>
|
||||
|
||||
<!-- 成就解锁提示 -->
|
||||
<div class="achievement-toast" id="achievement-toast">
|
||||
<span class="achievement-icon">🏆</span>
|
||||
<span id="achievement-text">解锁成就</span>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
|
||||
574
static/style.css
574
static/style.css
@ -2,370 +2,446 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
|
||||
background: #0d0d0f;
|
||||
color: #fff;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 头部 */
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #888;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* 统计面板 */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 12px;
|
||||
padding: 15px 10px;
|
||||
text-align: center;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.stat-card.total {
|
||||
background: rgba(255,107,107,0.15);
|
||||
border-color: rgba(255,107,107,0.3);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-card.total .stat-value {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.75rem;
|
||||
color: #888;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.stat-growth {
|
||||
font-size: 0.7rem;
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.stat-growth.negative {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* 大按钮 */
|
||||
.main-action {
|
||||
/* 主按钮 - 占据屏幕中心 */
|
||||
.din-trigger {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20px;
|
||||
z-index: 10;
|
||||
background: radial-gradient(ellipse at center, #1a1a2e 0%, #0d0d0f 70%);
|
||||
}
|
||||
|
||||
.din-button {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
.big-btn {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background: linear-gradient(145deg, #ff6b6b, #ee5a5a);
|
||||
box-shadow: 0 10px 40px rgba(255,107,107,0.4),
|
||||
inset 0 -5px 20px rgba(0,0,0,0.2),
|
||||
inset 0 5px 20px rgba(255,255,255,0.2);
|
||||
background: linear-gradient(145deg, #ff4757, #ff3838);
|
||||
box-shadow:
|
||||
0 20px 60px rgba(255, 71, 87, 0.4),
|
||||
0 0 0 20px rgba(255, 71, 87, 0.1),
|
||||
inset 0 -4px 20px rgba(0,0,0,0.2),
|
||||
inset 0 4px 20px rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
transition: all 0.2s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.din-button:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 15px 50px rgba(255,107,107,0.5),
|
||||
inset 0 -5px 20px rgba(0,0,0,0.2),
|
||||
inset 0 5px 20px rgba(255,255,255,0.2);
|
||||
.big-btn:active {
|
||||
transform: scale(0.92);
|
||||
box-shadow:
|
||||
0 10px 30px rgba(255, 71, 87, 0.3),
|
||||
0 0 0 10px rgba(255, 71, 87, 0.05),
|
||||
inset 0 -2px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.din-button:active {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 5px 20px rgba(255,107,107,0.3),
|
||||
inset 0 -3px 10px rgba(0,0,0,0.2),
|
||||
inset 0 3px 10px rgba(255,255,255,0.2);
|
||||
.big-btn.recording {
|
||||
animation: pulse-record 0.6s ease-out;
|
||||
}
|
||||
|
||||
.din-button.recording {
|
||||
animation: pulse 1s infinite;
|
||||
@keyframes pulse-record {
|
||||
0% { transform: scale(1); box-shadow: 0 20px 60px rgba(255, 71, 87, 0.4), 0 0 0 20px rgba(255, 71, 87, 0.1); }
|
||||
50% { transform: scale(1.05); box-shadow: 0 30px 80px rgba(255, 71, 87, 0.6), 0 0 0 40px rgba(255, 71, 87, 0); }
|
||||
100% { transform: scale(1); box-shadow: 0 20px 60px rgba(255, 71, 87, 0.4), 0 0 0 20px rgba(255, 71, 87, 0.1); }
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { box-shadow: 0 10px 40px rgba(255,107,107,0.4); }
|
||||
50% { box-shadow: 0 10px 60px rgba(255,107,107,0.7); }
|
||||
.btn-icon {
|
||||
font-size: 4rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 3rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 2px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.hint {
|
||||
margin-top: 30px;
|
||||
color: #666;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
/* 底部统计 - 常驻显示 */
|
||||
.stats-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 20px;
|
||||
background: linear-gradient(transparent, rgba(13,13,15,0.95) 40%);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-label {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
.stat-num.total {
|
||||
color: #ff4757;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* 输入区域 */
|
||||
.input-section {
|
||||
background: rgba(255,255,255,0.05);
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
margin-bottom: 30px;
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
/* 快速输入层 - 从底部滑出 */
|
||||
.input-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-section.hidden {
|
||||
display: none;
|
||||
.input-overlay.active {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
#din-content {
|
||||
.input-panel {
|
||||
background: #1a1a1f;
|
||||
border-radius: 24px 24px 0 0;
|
||||
padding: 24px;
|
||||
transform: translateY(100%);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.input-overlay.active .input-panel {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.input-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.input-title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.8rem;
|
||||
color: #666;
|
||||
font-family: 'SF Mono', monospace;
|
||||
}
|
||||
|
||||
.quick-input {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
font-size: 1rem;
|
||||
border: 2px solid rgba(255,255,255,0.1);
|
||||
border-radius: 8px;
|
||||
background: rgba(0,0,0,0.2);
|
||||
background: #0d0d0f;
|
||||
border: 2px solid #333;
|
||||
border-radius: 16px;
|
||||
padding: 18px 20px;
|
||||
font-size: 1.1rem;
|
||||
color: #fff;
|
||||
margin-bottom: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
#din-content:focus {
|
||||
border-color: #ff6b6b;
|
||||
.quick-input:focus {
|
||||
border-color: #ff4757;
|
||||
}
|
||||
|
||||
#din-content::placeholder {
|
||||
color: #666;
|
||||
.quick-input::placeholder {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.input-actions {
|
||||
/* 快速标签 */
|
||||
.quick-tags {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn-primary, .btn-secondary {
|
||||
flex: 1;
|
||||
padding: 12px 20px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
.tag {
|
||||
padding: 8px 16px;
|
||||
background: #25252a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 20px;
|
||||
font-size: 0.9rem;
|
||||
color: #aaa;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #ff6b6b;
|
||||
.tag:hover, .tag:active {
|
||||
background: #ff4757;
|
||||
border-color: #ff4757;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #ff5252;
|
||||
/* 操作按钮 */
|
||||
.input-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: rgba(255,255,255,0.1);
|
||||
color: #aaa;
|
||||
.btn {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
border-radius: 14px;
|
||||
border: none;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
.btn-save {
|
||||
background: #ff4757;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 最近记录 */
|
||||
.recent {
|
||||
margin-bottom: 30px;
|
||||
.btn-save:active {
|
||||
background: #ff3838;
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.recent h2, .achievements h2 {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 15px;
|
||||
color: #aaa;
|
||||
.btn-skip {
|
||||
background: #25252a;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.btn-skip:active {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
/* 最近记录 - 右侧面板 (桌面) / 底部 (手机) */
|
||||
.recent-panel {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 280px;
|
||||
max-height: calc(100vh - 140px);
|
||||
background: rgba(26,26,31,0.8);
|
||||
backdrop-filter: blur(20px);
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
z-index: 15;
|
||||
}
|
||||
|
||||
.recent-title {
|
||||
font-size: 0.9rem;
|
||||
color: #888;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.recent-count {
|
||||
color: #ff4757;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.recent-list {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.recent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 15px;
|
||||
border-bottom: 1px solid rgba(255,255,255,0.05);
|
||||
gap: 15px;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 12px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.recent-item:last-child {
|
||||
border-bottom: none;
|
||||
.recent-item:hover {
|
||||
background: rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
.recent-time {
|
||||
font-size: 0.75rem;
|
||||
color: #666;
|
||||
color: #555;
|
||||
white-space: nowrap;
|
||||
min-width: 60px;
|
||||
font-family: 'SF Mono', monospace;
|
||||
}
|
||||
|
||||
.recent-content {
|
||||
flex: 1;
|
||||
font-size: 0.9rem;
|
||||
color: #ddd;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.recent-content.empty {
|
||||
color: #666;
|
||||
color: #555;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.recent-actions {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
}
|
||||
|
||||
.recent-actions button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
font-size: 1rem;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.recent-actions button:hover {
|
||||
color: #ff6b6b;
|
||||
}
|
||||
|
||||
.empty {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 成就 */
|
||||
.achievement-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.achievement-item {
|
||||
background: rgba(255,255,255,0.03);
|
||||
border-radius: 12px;
|
||||
padding: 15px 10px;
|
||||
text-align: center;
|
||||
border: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.achievement-item.unlocked {
|
||||
background: rgba(255,215,0,0.1);
|
||||
border-color: rgba(255,215,0,0.3);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.achievement-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.achievement-name {
|
||||
font-size: 0.75rem;
|
||||
color: #aaa;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.achievement-desc {
|
||||
font-size: 0.6rem;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Toast */
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(74,222,128,0.9);
|
||||
color: #000;
|
||||
padding: 15px 30px;
|
||||
transform: translate(-50%, -50%) scale(0.8);
|
||||
background: #ff4757;
|
||||
color: #fff;
|
||||
padding: 16px 32px;
|
||||
border-radius: 30px;
|
||||
font-weight: 600;
|
||||
z-index: 200;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.toast.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
|
||||
/* 成就徽章 */
|
||||
.achievement-toast {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-100px);
|
||||
background: linear-gradient(135deg, #ffd700, #ffaa00);
|
||||
color: #000;
|
||||
padding: 16px 24px;
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
gap: 12px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
transition: all 0.3s ease;
|
||||
z-index: 1000;
|
||||
z-index: 200;
|
||||
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.toast.hidden {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(20px);
|
||||
pointer-events: none;
|
||||
.achievement-toast.show {
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 500px) {
|
||||
.stats {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
.achievement-icon {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
.achievement-list {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
/* 移动端适配 */
|
||||
@media (max-width: 768px) {
|
||||
.big-btn {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.achievement-name {
|
||||
font-size: 0.65rem;
|
||||
.btn-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.din-button {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
.recent-panel {
|
||||
position: fixed;
|
||||
top: auto;
|
||||
bottom: 100px;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
width: auto;
|
||||
max-height: 200px;
|
||||
background: rgba(13,13,15,0.95);
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
font-size: 2.5rem;
|
||||
.stats-bar {
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 隐藏的成就面板 - 可展开 */
|
||||
.achievements-btn {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
z-index: 30;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.achievements-btn:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
/* 滑动指示器 */
|
||||
.swipe-indicator {
|
||||
position: fixed;
|
||||
bottom: 100px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 25;
|
||||
}
|
||||
|
||||
.swipe-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.2);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.swipe-dot.active {
|
||||
background: #ff4757;
|
||||
width: 24px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user