MenuBarTodo/taskmanager.html at main · mesmerli/MenuBarTodo · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title data-i18n="history-title">任務歷史紀錄</title>
  <link rel="stylesheet" href="taskmanager.css">
</head>
<body>
  <div class="container">
    <div class="header-row" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border); margin-bottom: 20px; padding-top: 4px;">
      <div class="filters">
        <button class="tab active" data-filter="all" data-i18n="filter-all">全部</button>
        <button class="tab" data-filter="day" data-i18n="tab-day">日</button>
        <button class="tab" data-filter="week" data-i18n="tab-week">週</button>
        <button class="tab" data-filter="month" data-i18n="tab-month">月</button>
      </div>
      <div class="actions" style="display: flex; gap: 8px; align-items: center; padding-bottom: 6px;">
        <label class="switch-container" style="display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text-secondary); margin-right: 8px;">
          <span data-i18n="setting-auto-launch">開機時自動啟動</span>
          <div class="switch">
            <input type="checkbox" id="auto-launch-checkbox">
            <span class="slider round"></span>
          </div>
        </label>
        <button id="widget-mode-btn" class="icon-action-btn" title="桌面小工具模式 / Widget Mode" style="padding: 4px 10px; display: flex; align-items: center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect width="13" height="13" x="2" y="9" rx="2"></rect>
            <path d="M9 5H21a2 2 0 0 1 2 2v12"></path>
          </svg>
        </button>
        <button id="lang-btn" class="icon-action-btn" title="切換語言 / Language" style="font-size: 14px; padding: 4px 10px;">🌐</button>
        <button id="archive-btn" class="icon-action-btn" title="開啟封存庫 / Open Archive" style="font-size: 14px; padding: 4px 10px; display: flex; align-items: center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect width="20" height="12" x="2" y="10" rx="2"></rect>
            <path d="M4 10V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v5"></path>
            <path d="M10 14h4"></path>
          </svg>
        </button>
        <button id="undo-btn" class="icon-action-btn" disabled data-i18n-title="btn-undo" style="padding: 4px 10px; display: flex; align-items: center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 7v6h6"></path>
            <path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"></path>
          </svg>
        </button>
        <button id="redo-btn" class="icon-action-btn" disabled data-i18n-title="btn-redo" style="padding: 4px 10px; display: flex; align-items: center;">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 7v6h-6"></path>
            <path d="M3 17a9 9 0 019-9 9 9 0 016 2.3L21 13"></path>
          </svg>
        </button>
        <button id="clear-all-btn" class="danger-btn" data-i18n="btn-clear" style="padding: 6px 12px;">清除所有已完成紀錄</button>
      </div>
    </div>

    <div class="input-row" style="display: flex; gap: 16px; align-items: center; margin-bottom: 20px;">
      <div class="add-todo-container" style="flex: 1;">
        <div class="input-wrapper" style="position: relative; display: flex; align-items: center;">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 12px; color: var(--text-secondary); pointer-events: none;">
            <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"></path>
          </svg>
          <input type="text" id="todo-input" data-i18n="input-placeholder" placeholder="Type a task and press Enter..." autocomplete="off" style="width: 100%; padding: 10px 40px 10px 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--item-bg); color: var(--text-primary); font-size: 14px; outline: none; border-color: transparent; transition: border-color 0.2s;">
          <button id="voice-btn" class="voice-btn" title="Voice Input">🎤</button>
        </div>
      </div>
      <div class="search-box" style="flex: 0 0 250px; position: relative; display: flex; align-items: center;">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="position: absolute; left: 12px; color: var(--text-secondary); pointer-events: none;">
          <circle cx="11" cy="11" r="8"></circle>
          <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
        </svg>
        <input type="text" id="search-input" data-i18n="search-placeholder" placeholder="搜尋任務內容..." autocomplete="off" style="width: 100%; padding: 10px 16px 10px 34px; border-radius: 16px; border: 1px solid var(--border); background: var(--item-bg); color: var(--text-primary); font-size: 13px; outline: none;">
      </div>
    </div>

    <div class="table-container">
      <table id="history-table">
        <thead>
          <tr>
            <th width="8%" data-sort="status" style="cursor: pointer;" data-i18n="col-status">狀態</th>
            <th width="40%" data-sort="text" style="cursor: pointer;" data-i18n="col-text">任務內容</th>
            <th width="80" data-sort="dimension" style="cursor: pointer; width: 80px;" data-i18n="col-dim">維度</th>
            <th width="150" data-sort="dueDate" style="cursor: pointer; width: 150px;" data-i18n="col-due">到期時間</th>
            <th width="60" style="width: 60px;"></th>
          </tr>
        </thead>
        <tbody id="history-tbody">
          <!-- Data injected here -->
        </tbody>
      </table>
    </div>
  </div>
  <script src="constants.js"></script>
  <script src="locales.js"></script>
  <script src="taskmanager.js"></script>
</body>
</html>