yangxiangyuan
154b79c8f1
1. 新增完整短链接工具服务，包括前端页面、后端API与数据库支持 2. 新增移动端日历提醒工具与鉴权配置 3. 优化日历事件编辑与展示： - 添加事件循环重复设置 - 新增全天事件支持 - 时间选择器自动对齐15分钟间隔 - 保存状态加载动画 - 事件卡片显示重复规则 4. 更新API基础地址与路由配置 5. 新增SSL证书文件与相关工具静态资源
177 lines
7.3 KiB
HTML
177 lines
7.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, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
|
||
<meta name="theme-color" content="#0a0a14">
|
||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||
<title>日历提醒</title>
|
||
<link rel="stylesheet" href="css/styles.css">
|
||
</head>
|
||
<body>
|
||
<div class="app-container">
|
||
<!-- ======== 今日视图 ======== -->
|
||
<div id="view-today" class="view active">
|
||
<div class="today-header">
|
||
<div>
|
||
<div id="greeting" class="greeting">早上好 👋</div>
|
||
<div id="today-date" class="today-date"></div>
|
||
</div>
|
||
</div>
|
||
<div class="stats-row">
|
||
<div class="stat-card">
|
||
<div id="stat-pending" class="stat-number">0</div>
|
||
<div class="stat-label">待完成</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div id="stat-completed" class="stat-number">0</div>
|
||
<div class="stat-label">已完成</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div id="stat-total" class="stat-number">0</div>
|
||
<div class="stat-label">共计</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-title">待完成</div>
|
||
<div id="today-loading" class="loading-indicator hidden">加载中</div>
|
||
<div id="today-list"></div>
|
||
<div id="today-empty" class="empty-state hidden">今天没有待办事项 🎉</div>
|
||
</div>
|
||
|
||
<!-- ======== 日历视图 ======== -->
|
||
<div id="view-calendar" class="view">
|
||
<div class="calendar-header">
|
||
<button id="cal-prev" class="calendar-nav-btn">‹</button>
|
||
<div id="cal-month-title" class="calendar-month-title"></div>
|
||
<button id="cal-next" class="calendar-nav-btn">›</button>
|
||
</div>
|
||
<div class="weekday-row">
|
||
<div class="weekday-cell">日</div>
|
||
<div class="weekday-cell">一</div>
|
||
<div class="weekday-cell">二</div>
|
||
<div class="weekday-cell">三</div>
|
||
<div class="weekday-cell">四</div>
|
||
<div class="weekday-cell">五</div>
|
||
<div class="weekday-cell">六</div>
|
||
</div>
|
||
<div id="calendar-grid" class="calendar-grid"></div>
|
||
<div id="cal-no-date" class="no-date-hint">点击日期查看事项</div>
|
||
<div id="cal-events-section" class="hidden">
|
||
<div class="selected-date-header">
|
||
<div id="cal-selected-title" class="selected-date-title"></div>
|
||
<button id="cal-add-btn" class="selected-date-add">+</button>
|
||
</div>
|
||
<div id="cal-events-list"></div>
|
||
<div id="cal-events-empty" class="empty-state hidden">这一天没有事件</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======== FAB 浮动新增按钮 ======== -->
|
||
<button id="fab-add" class="fab">+</button>
|
||
|
||
<!-- ======== 底部 Tab 导航 ======== -->
|
||
<nav class="tab-bar">
|
||
<button class="tab-item active" data-tab="today">
|
||
<span class="tab-icon">☀️</span>
|
||
<span class="tab-label">今日</span>
|
||
</button>
|
||
<button class="tab-item" data-tab="calendar">
|
||
<span class="tab-icon">📅</span>
|
||
<span class="tab-label">日历</span>
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
|
||
<!-- ======== 事件编辑弹窗 ======== -->
|
||
<div id="modal-overlay" class="modal-overlay">
|
||
<div class="modal-sheet">
|
||
<div class="modal-header">
|
||
<button id="modal-close" class="modal-close">✕</button>
|
||
<div id="modal-title" class="modal-title">新建事件</div>
|
||
<button id="modal-save" class="modal-save-btn">保存</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<div class="form-field">
|
||
<label class="form-label">标题</label>
|
||
<input id="f-title" class="form-input" type="text" placeholder="输入事件标题">
|
||
</div>
|
||
<div class="form-field">
|
||
<label class="form-label">内容</label>
|
||
<textarea id="f-content" class="form-input" placeholder="输入事件内容（可选）"></textarea>
|
||
</div>
|
||
<div class="switch-row">
|
||
<span class="switch-label">全天事件</span>
|
||
<label class="toggle-switch">
|
||
<input id="f-allday" type="checkbox">
|
||
<span class="toggle-track"></span>
|
||
</label>
|
||
</div>
|
||
<div id="field-start" class="form-field">
|
||
<label class="form-label">开始时间</label>
|
||
<input id="f-start" class="form-input" type="datetime-local" step="900">
|
||
</div>
|
||
<div id="field-end" class="form-field">
|
||
<label class="form-label">结束时间（可选，默认+1小时）</label>
|
||
<input id="f-end" class="form-input" type="datetime-local" step="900">
|
||
<span id="f-end-clear" class="clear-time-btn hidden">清除</span>
|
||
</div>
|
||
<div class="switch-row">
|
||
<span class="switch-label">启用提醒</span>
|
||
<label class="toggle-switch">
|
||
<input id="f-remind-enable" type="checkbox" checked>
|
||
<span class="toggle-track"></span>
|
||
</label>
|
||
</div>
|
||
<div id="field-remind" class="form-field">
|
||
<label class="form-label">提醒时间</label>
|
||
<input id="f-remind" class="form-input" type="datetime-local" step="900">
|
||
</div>
|
||
<div class="form-field">
|
||
<label class="form-label">重复</label>
|
||
<div class="recurrence-options">
|
||
<button class="recurrence-btn active" data-type="NONE">不重复</button>
|
||
<button class="recurrence-btn" data-type="DAILY">每天</button>
|
||
<button class="recurrence-btn" data-type="WEEKLY">每周</button>
|
||
</div>
|
||
</div>
|
||
<div id="field-interval" class="form-field hidden">
|
||
<label id="interval-label" class="form-label">每 1 天</label>
|
||
<div class="interval-row">
|
||
<button id="interval-minus" class="interval-btn">−</button>
|
||
<span id="interval-value" class="interval-value">1</span>
|
||
<button id="interval-plus" class="interval-btn">+</button>
|
||
</div>
|
||
</div>
|
||
<div id="field-weekdays" class="form-field hidden">
|
||
<label class="form-label">重复星期</label>
|
||
<div class="weekday-options">
|
||
<button class="weekday-btn" data-day="1">一</button>
|
||
<button class="weekday-btn" data-day="2">二</button>
|
||
<button class="weekday-btn" data-day="3">三</button>
|
||
<button class="weekday-btn" data-day="4">四</button>
|
||
<button class="weekday-btn" data-day="5">五</button>
|
||
<button class="weekday-btn" data-day="6">六</button>
|
||
<button class="weekday-btn" data-day="7">日</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======== 删除确认 ActionSheet ======== -->
|
||
<div id="delete-sheet-overlay" class="action-sheet-overlay">
|
||
<div class="action-sheet">
|
||
<div class="action-sheet-title">确定要删除这个事件吗？</div>
|
||
<button id="delete-confirm" class="action-sheet-btn danger">确认删除</button>
|
||
<button id="delete-cancel" class="action-sheet-btn cancel">取消</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ======== Toast ======== -->
|
||
<div id="toast" class="toast"></div>
|
||
|
||
<script src="js/app.js"></script>
|
||
</body>
|
||
</html>
|