-
Notifications
You must be signed in to change notification settings - Fork 0
/
options.html
40 lines (34 loc) · 1.79 KB
/
options.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
<!DOCTYPE html>
<html>
<head>
<title>Text replacement list</title>
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.16/dist/tailwind.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>
<body class="p-6 bg-gray-200">
<h1 class="text-2xl font-bold mb-4">Text replacement list</h1>
<p class="mb-2">Use this page to add items to the text replacement list.</p>
<p class="mb-2">Items are replaced in the order they appear in the list.</p>
<p class="mb-2">Example: input text: <span class="font-bold">/^(https?:\/\/(www\.)?[^/]+)/g</span> replaced with
<span class="font-bold">localhost:3000</span> will replace any matching url with localhost:3000
</p>
<div class="mt-8">
<label for="replace-text-from" class="block mb-2">New Item (regex is allowed):</label>
<form>
<div class="flex items-center gap-2 mb-4">
<input type="text" id="replace-text-from" class="flex-1 p-2 border rounded" />
<span>with</span>
<input type="text" id="replace-text-to" class="flex-1 p-2 border rounded" />
</div>
<button id="add-button" class="px-4 py-2 bg-blue-500 text-white rounded">Add Item</button>
</form>
</div>
<h3 class="text-xl font-bold mt-10">Rules</h3>
<p>The top rule is the most important. When matching on single rule, the first rule from the top that matches gets
executed, and on chained rules are processed from bottom to top.</p>
<div id="replacement-list-wrapper" class="space-y-4">
<table id="replacement-list" class="mt-4 text-left table-auto divide-y divide-gray-200"></table>
</div>
<script src="./scripts/options.js"></script>
</body>
</html>