Comfort-Browser/index.html at main · MonseourM/Comfort-Browser · 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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Convenience Browser v4</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app">
  <header class="chrome-shell">
    <section class="tab-strip-wrap" id="topTabsWrap">
      <div id="tabs" class="tab-strip"></div>
      <button id="newTabBtn" class="round-btn near-tab" title="New tab">+</button>
      <div class="tab-spacer"></div>
    </section>

    <section class="toolbar">
      <div class="nav-buttons">
        <button id="backBtn" class="icon-btn" title="Back">‹</button>
        <button id="forwardBtn" class="icon-btn" title="Forward">›</button>
        <button id="reloadBtn" class="icon-btn" title="Reload">↻</button>
      </div>
      <div class="omnibox-wrap">
        <span class="search-icon">G</span>
        <input id="addressBar" spellcheck="false" autocomplete="off" placeholder="Search Google or type a URL" />
        <button id="goBtn" class="omnibox-action" title="Go">↵</button>
      </div>
      <div class="right-buttons">
        <button id="splitToggleBtn" class="pill-btn" title="Toggle Vivaldi-style tiling">Tile: Off</button>
        <button id="verticalTabsBtn" class="icon-btn" title="Toggle vertical tabs">▤</button>
<button id="openExternalBtn" class="icon-btn" title="Open selected tab in real browser tab">↗</button>
<button id="muteBtn" class="icon-btn" title="Soft mute / cover selected tile">🔇</button>
<button id="addBookmarkBtn" class="icon-btn" title="Bookmark current tab">☆</button>
<button id="bookmarkEditorBtn" class="icon-btn" title="Edit bookmarks">☷</button>
        <button id="screenBtn" class="icon-btn" title="Screenshot / screen capture">⇩</button>
        <button id="fullscreenBtn" class="icon-btn" title="Fullscreen">⛶</button>
        <button id="notesBtn" class="icon-btn" title="Notes panel">☰</button>
        <button id="settingsBtn" class="profile-btn" title="Settings">⚙</button>
      </div>
    </section>

    <section class="bookmarks-bar">
  <button class="bookmark-chip group-chip active" data-group="default">Main</button>
  <div id="groups" class="group-list"></div>
  <button id="addGroupBtn" class="bookmark-chip">+ Group</button>

  <span class="divider"></span>

  <div id="bookmarkList" class="bookmark-list"></div>
</section>
  </header>

  <main class="content-shell">
    <aside id="verticalTabs" class="vertical-tabs hidden">
      <button id="verticalNewTabBtn" class="vertical-new-tab" title="New tab">+</button>
      <div id="verticalTabList"></div>
    </aside>
<dialog id="bookmarkDialog">
  <form method="dialog" class="dialog-card">
    <h2>Edit bookmarks</h2>
    <p class="fine-print">One bookmark per line. Format: <b>Name | URL</b></p>

    <textarea id="bookmarkText" class="bookmark-editor" rows="10"></textarea>

    <menu>
      <button id="saveBookmarksBtn" value="default">Save bookmarks</button>
      <button value="cancel">Cancel</button>
    </menu>
  </form>
</dialog>
    <aside id="sidePanel" class="side-panel collapsed">
      <div class="side-header"><strong>Notes</strong><button id="hidePanelBtn" class="icon-btn">×</button></div>
      <textarea id="notes" placeholder="Scratchpad. Autosaves locally."></textarea>
      <div class="side-actions">
        <button id="saveSessionBtn">Save session</button>
        <button id="loadSessionBtn">Load session</button>
        <button id="exportSessionBtn">Export JSON</button>
        <label class="import-label">Import JSON<input id="importSessionInput" type="file" accept="application/json" /></label>
      </div>
      <div id="status" class="status"></div>
    </aside>

    <section id="workspace" class="workspace single"></section>
  </main>

  <dialog id="settingsDialog">
    <form method="dialog" class="dialog-card">
      <h2>Settings</h2>
      <label>Homepage<input id="homePageInput" placeholder="chrome://home or https://example.com" /></label>
      <label>Search engine
        <select id="searchEngineSelect">
          <option value="https://www.google.com/search?q=%s">Google</option>
          <option value="https://www.bing.com/search?q=%s">Bing</option>
          <option value="https://duckduckgo.com/?q=%s">DuckDuckGo</option>
          <option value="custom">Custom...</option>
        </select>
      </label>
      <label id="customSearchWrap" class="hidden">Custom search URL. Use %s for the query.<input id="customSearchInput" placeholder="https://search.example/?q=%s" /></label>
      <label>Focus blocked domains, comma-separated<input id="blockedDomainsInput" placeholder="youtube.com,tiktok.com,x.com" /></label>
      <label class="check"><input id="focusModeInput" type="checkbox" /> Focus mode enabled</label>
      <label class="check"><input id="openInNewPaneInput" type="checkbox" /> Open typed URLs in selected tile</label>
      <label class="check"><input id="vivaldiModeInput" type="checkbox" /> Vivaldi-ish accent styling</label>
      <menu><button id="saveSettingsBtn" value="default">Save</button><button value="cancel">Cancel</button></menu>
      <p class="fine-print">Frontend-only browser shell. Sites that block iframe embedding still will not load here. Use the ↗ tile button to open those in a real browser tab.</p>
    </form>
  </dialog>
</div>

<template id="paneTemplate">
  <div class="pane" draggable="true">
    <div class="frame-wrap">
      <iframe
        sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts"
        referrerpolicy="no-referrer">
      </iframe>
      <div class="blocked-overlay hidden"></div>
    </div>
  </div>
</template>
<script src="app.js"></script>
</body>
</html>