templates/index.html

{% extends "base.html" %}
{% block title %}DRM | 提醒主页{% endblock %}
{% block head %}
  <link rel="stylesheet" href="{{ url_for('static', filename='v020.css') }}">
{% endblock %}
{% block body %}
  <main class="layout story-layout" data-next-path="{{ next_path }}">
    <section class="story-shell">
      <header class="story-toolbar card-surface">
        <div class="brand-mark">
          <span class="brand-dot"></span>
          <span>Daily Reminder Master</span>
        </div>

        <nav class="story-nav" aria-label="页面导航">
          <button class="story-tab is-active" type="button" data-go-page="0">首页提醒</button>
          <button class="story-tab" type="button" data-go-page="1">周课表</button>
        </nav>

        <div class="action-group story-actions">
          <a class="ghost-link" href="{{ url_for('admin') }}">管理后台</a>
          {% if authenticated %}
            <button class="pill-button accent-soft" id="logoutButton" type="button">退出登录</button>
          {% else %}
            <button class="pill-button accent" id="openLoginButton" type="button">登录后编辑</button>
          {% endif %}
        </div>
      </header>

      <div class="page-viewport">
        <div class="page-track" id="pageTrack">
          <section class="page-slide page-home">
            <section class="hero-card hero-clock-card">
              <div class="hero-orbit hero-orbit-a"></div>
              <div class="hero-orbit hero-orbit-b"></div>
              <div class="clock-wrap">
                <div class="clock-caption">北京时间</div>
                <h1 class="clock-display" id="clockDisplay">00:00:00</h1>
                <div class="clock-meta">
                  <span id="dateDisplay">0000 年 00 月 00 日</span>
                  <span id="weekdayDisplay">星期一</span>
                  <span id="lunarDisplay">农历加载中</span>
                </div>
              </div>
            </section>

            <section class="board-section">
              <div class="board-grid" id="boardGrid">
                {% for category in categories %}
                  <article class="todo-column card-surface" data-category-id="{{ category.id }}">
                    <header class="column-header">
                      <div class="column-header-copy">
                        <p class="column-label">Todolist</p>
                        <h3 class="column-title">{{ category.name }}</h3>
                      </div>
                      <div class="column-actions">
                        <button class="icon-button" type="button" data-open-add="{{ category.id }}" aria-label="添加任务">+</button>
                        <div class="menu-wrap">
                          <button class="icon-button muted" type="button" data-menu-trigger="{{ category.id }}" aria-label="分类设置">⋯</button>
                          <div class="menu-panel" data-menu-panel="{{ category.id }}">
                            <button type="button" data-rename-category="{{ category.id }}">重命名清单</button>
                          </div>
                        </div>
                      </div>
                    </header>

                    <div class="task-list">
                      {% if category.tasks %}
                        {% for task in category.tasks %}
                          <article class="task-card {% if task.completed %}task-complete{% endif %}" data-task-id="{{ task.id }}" data-created-at="{{ task.created_at }}" data-due-at="{{ task.due_at }}" data-completed="{{ 'true' if task.completed else 'false' }}">
                            <div class="task-main">
                              <label class="check-wrap">
                                <input class="task-check" type="checkbox" {% if task.completed %}checked{% endif %} data-toggle-task="{{ task.id }}">
                                <span class="custom-check"></span>
                              </label>
                              <div class="task-copy">
                                <h4>{{ task.title }}</h4>
                                <p class="meta-line">
                                  <span class="meta-badge due-time" data-due-label></span>
                                  <span class="meta-badge progress-text" data-progress-text></span>
                                </p>
                              </div>
                            </div>
                            <div class="progress-shell">
                              <div class="progress-bar" data-progress-bar></div>
                            </div>
                            {% if authenticated %}
                              <button class="task-delete" type="button" data-delete-task="{{ task.id }}">删除</button>
                            {% endif %}
                          </article>
                        {% endfor %}
                      {% else %}
                        <div class="empty-state">
                          <p>这里还没有任务</p>
                          <span>点击右上角的加号，给这个分类加上第一条提醒。</span>
                        </div>
                      {% endif %}
                    </div>
                  </article>
                {% endfor %}
              </div>
            </section>
          </section>

          <section class="page-slide page-planner">
            <section class="planner-shell card-surface">
              <div class="planner-head">
                <div class="planner-head-copy">
                  <p class="section-kicker">Weekly Planner</p>
                  <h2>本周课程与待办总览</h2>
                  <p class="section-note" id="plannerHeadlineNote">课程自动按学期周次出现，待办可拖入本周任意一天，并支持上下边缘拉伸。</p>
                </div>
                <div class="planner-controls">
                  <button class="icon-button planner-shift-button" id="plannerPrevDay" type="button" aria-label="上一周">←</button>
                  <label class="planner-date-picker">
                    <span>选择本周任意日期</span>
                    <input id="plannerDateInput" type="date">
                  </label>
                  <button class="icon-button planner-shift-button" id="plannerNextDay" type="button" aria-label="下一周">→</button>
                </div>
              </div>

              <div class="planner-meta">
                <span id="plannerDateLabel">{{ planner_payload.week_start }} - {{ planner_payload.week_end }}</span>
                <span id="plannerWeekday">{{ planner_payload.week_range_label }}</span>
                <span id="plannerAcademicWeek">{{ planner_payload.academic_label }}</span>
                <span id="plannerWindow">{{ planner_payload.settings.day_start }} - {{ planner_payload.settings.day_end }}</span>
              </div>

              <div class="planner-layout">
                <section class="timeline-surface">
                  <div class="timeline-scroll" id="timelineScroll">
                    <div class="timeline-grid" id="plannerTimeline">
                      <div class="timeline-drop-preview" id="timelineDropPreview"></div>
                      <div class="timeline-now-line" id="timelineNowLine"></div>
                    </div>
                  </div>
                </section>

                <aside class="planner-sidebar card-surface-soft">
                  <div class="planner-sidebar-head">
                    <div>
                      <p class="column-label">Task Queue</p>
                      <h3>待办拖入本周课表</h3>
                    </div>
                    <span class="planner-count" id="plannerTaskCount">0 项</span>
                  </div>
                  <div class="planner-sidebar-note">
                    <span>课程是固定块，只能在后台修改。</span>
                    <span>任务卡支持拖动、拉伸和移出排程。</span>
                  </div>
                  <div class="planner-task-pool" id="plannerTaskPool"></div>
                </aside>
              </div>
            </section>
          </section>
        </div>
      </div>
    </section>
  </main>

  <div class="toast-stack" id="toastStack"></div>

  <div class="modal-backdrop {% if login_required %}is-open{% endif %}" id="loginModal">
    <div class="modal-card">
      <div class="modal-head">
        <p class="modal-kicker">安全登录</p>
        <h3>输入密码后即可编辑待办与课表</h3>
      </div>
      <form class="modal-form" id="loginForm">
        <label>
          <span>访问密码</span>
          <input id="loginPassword" name="password" type="password" autocomplete="current-password" placeholder="请输入 PASSWORD">
        </label>
        <button class="primary-button" type="submit">立即登录</button>
      </form>
    </div>
  </div>

  <div class="modal-backdrop" id="taskModal">
    <div class="modal-card">
      <div class="modal-head">
        <p class="modal-kicker">新增任务</p>
        <h3 id="taskModalTitle">添加提醒</h3>
      </div>
      <form class="modal-form" id="taskForm">
        <input type="hidden" id="taskCategoryId" name="category_id">
        <label>
          <span>任务名称</span>
          <input id="taskName" name="title" type="text" maxlength="40" placeholder="例如：准备明天的会议资料">
        </label>
        <label>
          <span>截止日期（北京时间）</span>
          <input id="taskDueAt" name="due_at" type="datetime-local" step="3600">
        </label>
        <div class="form-actions">
          <button class="secondary-button" type="button" data-close-modal="taskModal">取消</button>
          <button class="primary-button" type="submit">保存任务</button>
        </div>
      </form>
    </div>
  </div>

  <div class="modal-backdrop" id="renameModal">
    <div class="modal-card">
      <div class="modal-head">
        <p class="modal-kicker">清单设置</p>
        <h3>重命名当前清单</h3>
      </div>
      <form class="modal-form" id="renameForm">
        <input type="hidden" id="renameCategoryId" name="category_id">
        <label>
          <span>新的分类名称</span>
          <input id="renameCategoryName" name="name" type="text" maxlength="20" placeholder="例如：项目推进">
        </label>
        <div class="form-actions">
          <button class="secondary-button" type="button" data-close-modal="renameModal">取消</button>
          <button class="primary-button" type="submit">确认修改</button>
        </div>
      </form>
    </div>
  </div>
{% endblock %}
{% block scripts %}
  <script>
    window.__DRM_BOOTSTRAP__ = {
      currentDateIso: {{ clock_meta.iso|tojson }},
      loginRequired: {{ login_required|tojson }},
      authenticated: {{ authenticated|tojson }},
      nextPath: {{ next_path|tojson }},
      planner: {{ planner_payload|tojson }},
    };
  </script>
  <script src="{{ url_for('static', filename='app.js') }}"></script>
  <script src="{{ url_for('static', filename='planner.js') }}"></script>
{% endblock %}