Bookmark-Sync-Offline/popup.html at main · Sumon-Kayal/Bookmark-Sync-Offline · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bookmark Sync</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>📚 Bookmark Sync</h1>

    <!-- Status message area -->
    <div id="status" class="status" role="status" aria-live="polite" aria-atomic="true"></div>

    <!-- Bookmark count display -->
    <div class="count" id="count" aria-label="Number of staged bookmarks">0</div>
    <div class="label">Staged bookmarks</div>

    <!-- Action buttons -->
    <div class="actions">
      <button
        id="pullBtn"
        class="blue"
        type="button"
        aria-label="Pull bookmarks from browser to staging area"
        title="Download all browser bookmarks to staging area">
        ⬇️ Pull from Browser
      </button>

      <button
        id="pushBtn"
        class="purple"
        type="button"
        aria-label="Push staged bookmarks to browser"
        title="Upload staged bookmarks to browser (skips duplicates)">
        ⬆️ Push to Browser
      </button>

      <button
        id="importBtn"
        class="green"
        type="button"
        aria-label="Import bookmarks from file"
        title="Open import page to load bookmarks from JSON or HTML file">
        📥 Import File
      </button>

      <button
        id="exportJsonBtn"
        class="orange"
        type="button"
        aria-label="Export staged bookmarks as JSON file"
        title="Download staged bookmarks as JSON file">
        📤 Export JSON
      </button>

      <button
        id="exportHtmlBtn"
        class="orange"
        type="button"
        aria-label="Export staged bookmarks as HTML file"
        title="Download staged bookmarks as HTML file (Netscape format)">
        📄 Export HTML
      </button>

      <button
        id="clearBtn"
        class="red"
        type="button"
        aria-label="Clear the staging area (does not affect browser bookmarks)"
        title="Wipe all staged bookmarks from extension storage only — browser bookmarks are not affected">
        🗑️ Clear Staging Area
      </button>
    </div>

    <!-- Confirm wipe dialog (hidden by default) -->
    <div id="clearConfirm" class="clear-confirm" role="alertdialog" aria-modal="true" aria-labelledby="clearConfirmTitle" hidden>
      <p id="clearConfirmTitle"><strong>⚠️ Clear staging area?</strong></p>
      <p id="clearConfirmCount" class="clear-confirm-count"></p>
      <p class="clear-confirm-safe">Your actual browser bookmarks will <strong>not</strong> be affected.</p>
      <div class="clear-confirm-actions">
        <button id="clearCancelBtn" class="grey" type="button">Cancel</button>
        <button id="clearConfirmBtn" class="red" type="button">Yes, clear it</button>
      </div>
    </div>
  </div>

  <script src="popup.js"></script>
</body>
</html>