Toolbox/public/tools/calendar_reminder/index.html

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>日历提醒系统 · Web</title>
    <link rel="manifest" href="manifest.json">    
    <link rel="icon" href="calendar.svg" type="image/svg+xml" />
    <link rel="stylesheet" href="css/bootstrap.local.css">
    <link rel="stylesheet" href="css/styles.css?v=1.1">
    <script src="js/background.js?v=1.1" defer></script>
  </head>
  <body>
    <header class="navbar navbar-dark bg-dark">
      <div class="container-fluid">
        <span class="navbar-brand mb-0 h1">日历提醒系统（Web）</span>
        <div class="d-flex align-items-center gap-2">
          <button id="btnReload" class="btn btn-light btn-sm">刷新日历</button>
          <button id="btnPrev" class="btn btn-light btn-sm">上一月</button>
          <div id="currentMonth" class="text-white"></div>
          <button id="btnNext" class="btn btn-light btn-sm">下一月</button>
        </div>
      </div>
    </header>

    <main class="container py-3">
      <div class="row g-3">
        <div class="col-12 col-lg-8">
          <div class="calendar-grid" id="calendar-grid" aria-live="polite"></div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="card">
            <div class="card-header">当天事件与编辑</div>
            <div class="card-body">
              <div class="mb-3">
                <h6 class="mb-2">当天事件</h6>
                <ul id="dayEvents" class="list-group list-group-flush"></ul>
              </div>
              <hr>
              <!-- 新增/编辑事件 表单结构（统一为 WinForms 布局） -->
              <form id="eventForm" class="vstack gap-2">
                <input type="hidden" id="eventId">
              
                <div>
                  <label for="title" class="form-label">标题</label>
                  <input type="text" id="title" class="form-control" required maxlength="100" placeholder="如：团队会议">
                </div>
              
                <div>
                  <label for="content" class="form-label">内容</label>
                  <textarea id="content" class="form-control" rows="4" placeholder="备注说明"></textarea>
                </div>
              
                <div class="row g-2">
                  <div class="col-6">
                    <label for="start" class="form-label">开始时间</label>
                    <input type="datetime-local" id="start" class="form-control" required step="900">
                  </div>
                  <div class="col-6">
                    <label for="end" class="form-label">结束时间</label>
                    <input type="datetime-local" id="end" class="form-control" step="900">
                  </div>
                </div>
              
                <div class="form-check my-1">
                  <input class="form-check-input" type="checkbox" id="enableReminder" checked>
                  <label class="form-check-label" for="enableReminder">启用提醒</label>
                </div>
                
                <div class="form-check my-1">
                  <input class="form-check-input" type="checkbox" id="completedFlag">
                  <label class="form-check-label" for="completedFlag">已完成，不再提醒</label>
                </div>
              
                <div id="reminderRow">
                  <label class="form-label">提醒时间</label>
                  <!-- 不循环：日期+时分 -->
                  <input type="datetime-local" id="remindDateTime" class="form-control" step="900">
                  <!-- 每天/每周：仅时分 -->
                  <input type="time" id="remindTime" class="form-control d-none" step="900">
                </div>
              
                <div>
                  <label for="recurrenceType" class="form-label">循环类型</label>
                  <select id="recurrenceType" class="form-select">
                    <option value="NONE">不循环</option>
                    <option value="DAILY">每天</option>
                    <option value="WEEKLY">每周</option>
                  </select>
                </div>
              
                <div id="recurrenceOptions" class="d-none">
                  <div class="row g-2">
                    <div class="col-4">
                      <label for="recurrenceInterval" class="form-label">循环间隔</label>
                      <input type="number" id="recurrenceInterval" class="form-control" value="1" min="1">
                    </div>
                  </div>
                  <div id="weekdayGroup" class="mt-2 d-none">
                    <label class="form-label">每周星期几</label>
                    <div class="weekday-list">
                      <label><input type="checkbox" data-weekday="1"> 周一</label>
                      <label><input type="checkbox" data-weekday="2"> 周二</label>
                      <label><input type="checkbox" data-weekday="3"> 周三</label>
                      <label><input type="checkbox" data-weekday="4"> 周四</label>
                      <label><input type="checkbox" data-weekday="5"> 周五</label>
                      <label><input type="checkbox" data-weekday="6"> 周六</label>
                      <label><input type="checkbox" data-weekday="7"> 周日</label>
                    </div>
                  </div>
                </div>
              
                <div class="hstack gap-2 mt-2">
                  <button type="submit" class="btn btn-primary">保存</button>
                  <button type="button" id="btnReset" class="btn btn-secondary">重置</button>
                  <button type="button" id="btnDelete" class="btn btn-danger d-none">删除</button>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer class="container py-3 text-muted small">
      <div>模式：<span id="modeLabel"></span> · 提醒依赖浏览器通知（需授权）</div>
    </footer>

    <script src="js/config.js"></script>
    <script src="/assets/auth.js"></script>
    <script src="js/db.js"></script>
    <script src="js/models.js?v=1.1"></script>
    <script src="js/sync.js?v=1.1"></script>
    <script src="js/ui.js?v=1.3"></script>
    <script src="js/main.js?v=1.3"></script>
    <script src="/lib/bootstrap.bundle.min.js"></script>
  </body>
</html>