GriddyBookMark/popup.html at main · jayminrabari/GriddyBookMark · 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
<!DOCTYPE html>
<html>
<head>
  <title>Grid Bookmarks</title>
  <link rel="stylesheet" href="popup.css">
  <style>
    body {
      width: 500px;
      height: 500px;
      margin: 0;
      padding: 30px; /* avoid double padding; spacing handled by layout */
      background: #1e1e1e;
      color: white;
      font-family: sans-serif;
    }
  </style>
</head>
<body>
  <div id="controls">
    <div class="left-controls">
      <button id="backBtn" aria-label="Back" title="Back">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M15 19l-7-7 7-7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <button id="forwardBtn" aria-label="Forward" title="Forward">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <input id="searchInput" type="text" placeholder="Search..." aria-label="Search bookmarks and folders" />
    </div>
    <div class="right-controls">
      <button id="pagePrevBtn" aria-label="Previous page" title="Previous page">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M15 19l-7-7 7-7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <button id="pageNextBtn" aria-label="Next page" title="Next page">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M9 5l7 7-7 7" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </button>
      <button id="homeBtn" aria-label="Home" title="Go to root">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M3 11l9-7 9 7v8a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4H9v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8Z" stroke="currentColor" stroke-width="1.6"/>
        </svg>
      </button>
      <button id="openAllBtn" aria-label="Open all" title="Open all visible">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M7 7h10v10H7z" stroke="currentColor" stroke-width="1.6" fill="none"/>
          <path d="M4 17V4h13" stroke="currentColor" stroke-width="1.6"/>
        </svg>
      </button>
      <button id="newFolderBtn" aria-label="New folder" title="New folder">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M3.5 6.5h5l2 2h10v9.5a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 2.5 18V8a1.5 1.5 0 0 1 1-1.5Z" stroke="currentColor" stroke-width="1.6"/>
          <path d="M12 10.5v6M9 13.5h6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
        </svg>
      </button>
      <button id="openOptions" aria-label="Options" title="Options">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z" stroke="currentColor" stroke-width="1.6"/>
          <path d="M19.4 13.5a7.75 7.75 0 0 0 .06-3l2.02-1.57a.6.6 0 0 0 .14-.78l-1.91-3.3a.6.6 0 0 0-.73-.27l-2.35.95a7.87 7.87 0 0 0-2.6-1.5l-.36-2.5a.6.6 0 0 0-.6-.51h-3.8a.6.6 0 0 0-.6.51l-.36 2.5a7.87 7.87 0 0 0-2.6 1.5l-2.35-.95a.6.6 0 0 0-.73.27L2.38 8.15a.6.6 0 0 0 .14.78L4.54 10.5a7.75 7.75 0 0 0 .06 3l-2.08 1.57a.6.6 0 0 0-.14.78l1.92 3.3c.15.26.47.37.74.26l2.34-.94c.78.63 1.67 1.12 2.6 1.45l.36 2.53c.05.29.3.5.6.5h3.8c.3 0 .55-.21.6-.5l.36-2.53c.93-.33 1.82-.82 2.6-1.45l2.34.94c.27.11.59 0 .74-.26l1.92-3.3a.6.6 0 0 0-.14-.78L19.4 13.5Z" stroke="currentColor" stroke-width="1.6"/>
        </svg>
      </button>
    </div>
  </div>
  <!-- Breadcrumb removed in favor of back/forward buttons -->
  <div id="grid"></div>

  <!-- Actions menu popup -->
  <div id="actionsMenu" class="actions-menu" style="display: none;">
    <div class="menu-item" data-action="rename">Rename</div>
    <div class="menu-item" data-action="delete">Delete</div>
    <div class="menu-item" data-action="copy" data-bookmark-only>Copy URL</div>
    <div class="menu-item" data-action="openTab" data-bookmark-only>Open in New Tab</div>
    <div class="menu-item" data-action="openWindow" data-bookmark-only>Open in New Window</div>
    <div class="menu-item" data-action="openIncognito" data-bookmark-only>Open in Incognito</div>
    <div class="menu-item" data-action="openAll" data-folder-only>Open All in Folder</div>
  </div>

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