threads-embedded-code/popup.html at main · Scorpio-meow/threads-embedded-code · 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
<!DOCTYPE html>
<html lang="zh-TW">

<head>
  <meta charset="UTF-8">
  <link rel="icon" type="image/png" href="favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>已儲存的 Threads 文章</title>
  <link rel="stylesheet" href="popup.css">
</head>

<body>
  <div class="header">
    <h1>已儲存的程式碼</h1>
    <div class="header-actions">
      <button class="btn btn-small btn-dashboard" id="openDashboardBtn" title="開啟全頁儀表板">
        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="3" width="7" height="9" rx="1" />
          <rect x="14" y="3" width="7" height="5" rx="1" />
          <rect x="14" y="12" width="7" height="9" rx="1" />
          <rect x="3" y="16" width="7" height="5" rx="1" />
        </svg>
        儀表板
      </button>
      <span class="count" id="articleCount">0 篇</span>
    </div>
  </div>
  <div class="search-box">
    <input type="text" id="searchInput" placeholder="搜尋程式碼、語言或作者...">
  </div>
  <div class="controls">
    <div class="selection-container">
      <label class="select-all-label">
        <input type="checkbox" id="selectAllCheckbox">
        <span>全選</span>
      </label>
      <span id="selectionInfo" class="selection-info is-hidden"></span>
      <button class="btn btn-small" id="clearSelectionBtn">清除選取</button>
    </div>
    <div class="sort-container">
      <label for="sortSelect">排序：</label>
      <select id="sortSelect" class="sort-select">
        <option value="savedAt-desc">儲存時間 (新到舊)</option>
        <option value="savedAt-asc">儲存時間 (舊到新)</option>
        <option value="timestamp-desc">發文時間 (新到舊)</option>
        <option value="timestamp-asc">發文時間 (舊到新)</option>
        <option value="author-asc">作者 (A-Z)</option>
        <option value="author-desc">作者 (Z-A)</option>
        <option value="codeCount-desc">程式碼數量 (多到少)</option>
        <option value="codeCount-asc">程式碼數量 (少到多)</option>
      </select>
    </div>
    <div class="filter-container">
      <label for="filterSelect">篩選：</label>
      <select id="filterSelect" class="filter-select">
        <option value="all">全部文章</option>
        <option value="author">按作者</option>
        <option value="tag">按標籤</option>
        <option value="noTimestamp">無發文時間</option>
        <option value="expired">失效貼文</option>
      </select>
      <div id="filterValueContainer" class="filter-value-container is-hidden">
        <select id="filterValueSelect" class="filter-select" title="篩選數值">
          <option value="">全部</option>
        </select>
      </div>
    </div>
    <button class="btn btn-export" id="exportBtn" title="匯出簡易版 (embed code only)">匯出</button>
    <button class="btn btn-export" id="exportFeaturedBtn" title="匯出精選貼文格式 (用於 Featured Posts)">精選匯出</button>
    <button class="btn btn-export" id="exportFullBtn" title="匯出完整版 (含時間/作者/內容)">完整匯出</button>
    <button class="btn btn-export" id="importBtn">匯入</button>
    <button class="btn btn-export" id="updateTimestampsBtn" title="從 Threads 頁面抓取精確發文時間和內文">更新資料</button>
    <button class="btn btn-clear" id="clearBtn">清除全部</button>
  </div>
  <div class="content" id="articlesContainer">
    <div class="empty-state">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
        <path d="M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" />
      </svg>
      <p>尚未儲存任何程式碼</p>
      <p class="empty-help">在 Threads 含程式碼的文章旁點擊儲存按鈕</p>
    </div>
  </div>
  <script src="popup.js"></script>
</body>

</html>