Comradeium/index.html at main · OkayishDEV/Comradeium · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; img-src 'self' data:;"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Comradeium</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;600;700&family=Roboto+Condensed:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <header class="chrome" aria-label="Comradeium controls">
      <div class="brand">
        <span class="star" aria-hidden="true">☭</span>
        <div class="wordmark">
          <span class="name">COMRADEIUM</span>
          <span class="tagline">People’s Chromium</span>
        </div>
      </div>

      <nav class="nav-buttons" aria-label="Navigation">
        <button type="button" id="btn-back" title="Back">◀</button>
        <button type="button" id="btn-forward" title="Forward">▶</button>
        <button type="button" id="btn-reload" title="Reload">↻</button>
        <button type="button" id="btn-home" title="Home">⌂</button>
        <button type="button" id="btn-new-tab" title="New tab">＋</button>
        <button type="button" id="btn-settings" title="Settings">⚙</button>
      </nav>

      <form class="omnibox" id="url-form" autocomplete="off">
        <label class="sr-only" for="url-input">Address</label>
        <input
          type="text"
          id="url-input"
          spellcheck="false"
          placeholder="Enter objective or URL…"
          value="comradeium://newtab/"
        />
        <button type="submit" class="go">GO</button>
      </form>

      <div class="status" id="status" aria-live="polite"></div>
    </header>

    <div class="progress" id="progress" aria-hidden="true"></div>

    <div class="tab-strip-wrap">
      <div class="tab-strip" id="tab-strip" role="tablist" aria-label="Tabs"></div>
    </div>

    <div
      id="settings-backdrop"
      class="settings-backdrop hidden"
      role="dialog"
      aria-modal="true"
      aria-labelledby="settings-title"
    >
      <div class="settings-panel">
        <h2 id="settings-title" class="settings-title">Central Committee</h2>
        <p class="settings-sub">Browser directives</p>

        <label class="settings-label" for="set-homepage">Homepage URL</label>
        <p class="settings-hint">
          Built-in new tab: <code>comradeium://newtab/</code> (search page; engine from Search below).
        </p>
        <input type="text" id="set-homepage" class="settings-input" spellcheck="false" />

        <label class="settings-label" for="set-search-preset">Search</label>
        <select id="set-search-preset" class="settings-select">
          <option value="https://duckduckgo.com/?q={q}">DuckDuckGo</option>
          <option value="https://www.google.com/search?q={q}">Google</option>
          <option value="https://www.bing.com/search?q={q}">Bing</option>
          <option value="custom">Custom URL…</option>
        </select>

        <label class="settings-label hidden" for="set-search-custom" id="set-search-custom-label"
          >Custom search (use <code>{q}</code> for query)</label
        >
        <input
          type="text"
          id="set-search-custom"
          class="settings-input hidden"
          spellcheck="false"
          placeholder="https://example.com/search?q={q}"
        />

        <label class="settings-label" for="set-zoom">Page zoom</label>
        <div class="settings-zoom-row">
          <input type="range" id="set-zoom" min="50" max="200" step="5" value="100" />
          <span class="settings-zoom-value" id="set-zoom-value">100%</span>
        </div>

        <div class="settings-actions">
          <button type="button" class="settings-btn danger" id="set-clear-data">
            Clear browsing data
          </button>
          <div class="settings-actions-main">
            <button type="button" class="settings-btn secondary" id="set-cancel">Cancel</button>
            <button type="button" class="settings-btn primary" id="set-save">Save</button>
          </div>
        </div>
      </div>
    </div>

    <div id="webview-stack" class="webview-stack"></div>

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