-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmanage-bangs.html
153 lines (148 loc) · 4.62 KB
/
manage-bangs.html
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
<!doctype html>
<html lang="en">
<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-900 text-gray-300 min-h-screen p-8">
<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-800 p-6 rounded-lg shadow-lg border border-zinc-700"
>
<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-zinc-700 border border-zinc-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-zinc-500"
/>
</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-zinc-700 border border-zinc-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-zinc-500"
/>
</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-zinc-700 border border-zinc-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-zinc-500"
/>
</div>
<div class="flex justify-end gap-4">
<button
type="button"
id="cancelButton"
class="hidden px-4 py-2 bg-zinc-700 text-gray-300 rounded-lg hover:bg-zinc-600"
>
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>
<!-- Bangs Table -->
<div
class="overflow-x-auto bg-zinc-800 rounded-lg shadow-lg border border-zinc-700"
>
<table class="w-full">
<thead>
<tr class="border-b border-zinc-700">
<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>
<!-- 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"
></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-200">
<a
href="https://github.com/raphaelluethy/bngr"
class="hover:text-gray-200 transition-colors"
target="_blank"
rel="noopener noreferrer"
>
Repository
</a>
<a
href="https://raphaelluethy.ch"
class="hover:text-gray-200 transition-colors"
target="_blank"
rel="noopener noreferrer"
>
Personal Website
</a>
<a
href="https://github.com/raphaelluethy"
class="hover:text-gray-200 transition-colors"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
<a href="/index.html" class="hover:text-gray-200 transition-colors">
Home
</a>
</div>
</footer>
</body>
</html>