bngr/manage-bangs.html at main · raphaelluethy/bngr · 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!doctype html>
<html lang="en" class="light dark:dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Manage Custom Bangs - bngr.ch</title>
    <link rel="stylesheet" href="src/styles.css" />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="/favicon/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="/favicon/favicon-16x16.png"
    />
    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="/favicon/apple-touch-icon-180x180.png"
    />
    <meta
      name="msapplication-TileImage"
      content="/favicon/mstile-150x150.png"
    />
  </head>

  <body
    class="bg-zinc-100 dark:bg-zinc-900 text-zinc-800 dark:text-gray-300 min-h-screen p-8 transition-colors duration-300"
  >
    <div class="max-w-4xl mx-auto">
      <h1 class="text-4xl font-bold mb-8 text-center">Manage Custom Bangs</h1>

      <!-- Add/Edit Form -->
      <form
        id="bangForm"
        class="mb-8 bg-zinc-200 dark:bg-zinc-800 p-6 rounded-lg shadow-lg border border-zinc-300 dark:border-zinc-700 transition-colors duration-300"
      >
        <input type="hidden" id="editId" />
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div>
            <label for="bang" class="block text-sm font-medium mb-2"
              >Bang (without !)</label
            >
            <input
              type="text"
              id="bang"
              required
              class="w-full bg-white dark:bg-zinc-700 border border-zinc-400 dark:border-zinc-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-zinc-500 text-zinc-800 dark:text-zinc-200 transition-colors duration-300"
            />
          </div>
          <div>
            <label for="url" class="block text-sm font-medium mb-2"
              >URL Template (use {query} for search term)</label
            >
            <input
              type="text"
              id="url"
              required
              class="w-full bg-white dark:bg-zinc-700 border border-zinc-400 dark:border-zinc-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-zinc-500 text-zinc-800 dark:text-zinc-200 transition-colors duration-300"
            />
          </div>
        </div>
        <div class="mb-4">
          <label for="description" class="block text-sm font-medium mb-2"
            >Description</label
          >
          <input
            type="text"
            id="description"
            required
            class="w-full bg-white dark:bg-zinc-700 border border-zinc-400 dark:border-zinc-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-zinc-500 text-zinc-800 dark:text-zinc-200 transition-colors duration-300"
          />
        </div>
        <div class="flex justify-end gap-4">
          <button
            type="button"
            id="cancelButton"
            class="hidden px-4 py-2 bg-zinc-300 dark:bg-zinc-700 text-zinc-800 dark:text-gray-300 rounded-lg hover:bg-zinc-400 dark:hover:bg-zinc-600 transition-colors duration-300"
          >
            Cancel
          </button>
          <button
            type="submit"
            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            Save Bang
          </button>
        </div>
      </form>

      <!-- Import/Export Buttons -->
      <div class="mb-8 flex justify-end gap-4">
        <button
          id="exportButton"
          class="px-4 py-2 bg-zinc-600 text-white rounded-lg hover:bg-zinc-700 transition-colors duration-300"
        >
          Export Bangs
        </button>
        <button
          id="importButton"
          class="px-4 py-2 bg-zinc-600 text-white rounded-lg hover:bg-zinc-700 transition-colors duration-300"
        >
          Import Bangs
        </button>
      </div>

      <!-- Bangs Table -->
      <div
        class="overflow-x-auto bg-zinc-200 dark:bg-zinc-800 rounded-lg shadow-lg border border-zinc-300 dark:border-zinc-700 transition-colors duration-300"
      >
        <table class="w-full">
          <thead>
            <tr
              class="border-b border-zinc-400 dark:border-zinc-700 transition-colors duration-300"
            >
              <th class="px-6 py-3 text-left">Bang</th>
              <th class="px-6 py-3 text-left">URL Template</th>
              <th class="px-6 py-3 text-left">Description</th>
              <th class="px-6 py-3 text-right">Actions</th>
            </tr>
          </thead>
          <tbody id="bangsTableBody">
            <!-- Rows will be added dynamically -->
          </tbody>
        </table>
      </div>
    </div>

    <!-- Import Modal -->
    <div
      id="importModal"
      class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50"
    >
      <div
        class="bg-zinc-100 dark:bg-zinc-800 rounded-lg shadow-xl max-w-2xl w-full mx-4 p-6 border border-zinc-300 dark:border-zinc-700"
      >
        <h2 class="text-2xl font-bold mb-4">Import Bangs</h2>
        <div
          class="bg-amber-100 dark:bg-amber-900/50 border border-amber-400 dark:border-amber-600 text-amber-800 dark:text-amber-200 px-4 py-3 rounded-lg mb-4"
        >
          <strong>Warning:</strong> Importing will overwrite all existing custom
          bangs. This action cannot be undone.
        </div>
        <label for="importData" class="block text-sm font-medium mb-2"
          >Paste your exported bangs JSON below:</label
        >
        <textarea
          id="importData"
          rows="10"
          class="w-full bg-white dark:bg-zinc-700 border border-zinc-400 dark:border-zinc-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-zinc-500 text-zinc-800 dark:text-zinc-200 font-mono text-sm transition-colors duration-300"
          placeholder='{"version": 1, "bangs": [...]}'
        ></textarea>
        <div class="flex justify-end gap-4 mt-4">
          <button
            id="cancelImportButton"
            class="px-4 py-2 bg-zinc-300 dark:bg-zinc-700 text-zinc-800 dark:text-gray-300 rounded-lg hover:bg-zinc-400 dark:hover:bg-zinc-600 transition-colors duration-300"
          >
            Cancel
          </button>
          <button
            id="confirmImportButton"
            class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-300"
          >
            Import & Overwrite
          </button>
        </div>
      </div>
    </div>

    <!-- Notification -->
    <div
      id="notification"
      class="fixed bottom-4 right-4 px-4 py-2 rounded-lg transform translate-y-16 opacity-0 transition-all duration-300 bg-green-500 dark:bg-green-600 text-white"
    ></div>

    <script type="module" src="src/custom.ts"></script>
    <!-- Footer -->
    <footer class="fixed bottom-4 left-0 w-full text-center">
      <div
        class="flex justify-center space-x-6 text-gray-700 dark:text-gray-200 transition-colors duration-300"
      >
        <a
          href="https://github.com/raphaelluethy/bngr"
          class="hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-300 text-blue-600 dark:text-blue-400"
          target="_blank"
          rel="noopener noreferrer"
        >
          Repository
        </a>
        <a
          href="https://raphaelluethy.ch"
          class="hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-300 text-blue-600 dark:text-blue-400"
          target="_blank"
          rel="noopener noreferrer"
        >
          Personal Website
        </a>
        <a
          href="https://github.com/raphaelluethy"
          class="hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-300 text-blue-600 dark:text-blue-400"
          target="_blank"
          rel="noopener noreferrer"
        >
          GitHub
        </a>
        <a
          href="/index.html"
          class="hover:text-gray-900 dark:hover:text-gray-200 transition-colors duration-300 text-blue-600 dark:text-blue-400"
        >
          Home
        </a>
      </div>
    </footer>
  </body>
</html>