-
Notifications
You must be signed in to change notification settings - Fork 12
/
search.html
128 lines (107 loc) · 5.31 KB
/
search.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
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add custom search engine</title>
<link rel="stylesheet" href="bootstrap.4.1.3.min.css" />
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="icons/search.svg" type="image/svg+xml" />
</head>
<body class="bg-light">
<div id="instructions">
<div id="arrow"></div>
<div id="info" class="text-center">
<h3>Almost done just two more steps</h3>
<div>
<img src="icons/urlbar.png">
<p><strong><em>Right</em> click the address bar</strong></p>
<img src="icons/menu.png">
<p><strong>Click <em>Add "Example"</em></strong></p>
Go to <mark>about:preferences#search</mark> to see your installed search engines.</p>
<button id="close" class="btn btn-primary">Go back</button>
</div>
</div>
</div>
<div id="main">
<div class="py-5 text-center">
<img src="icons/search.svg" width="35" height="35">
<h1>Add custom search engine</h1>
</div>
<form>
<div class="form-group">
<label for="input-name">Name</label>
<input type="text" class="form-control" id="input-name" name="name" placeholder="Example Search" required>
</div>
<div class="form-group">
<label for="input-url">Search URL</label>
<input type="text" class="form-control" id="input-url" name="url" placeholder="https://example.org/search?q=%s" required>
<p class="form-text text-muted"><b>%s</b> is substituted with the entered search query</p>
</div>
<div class="form-group advanced adv-hidden">
<div class="custom-control custom-checkbox" id="post-checkbox">
<input type="checkbox" class="custom-control-input" id="use-post" name="use-post">
<label class="custom-control-label" for="use-post">Use <code>POST</code> query parameters <span class="text-muted">(Optional)</span></label>
</div>
<input type="text" class="form-control" id="input-post" name="post" placeholder="q={searchTerms}&foo=bar" disabled>
</div>
<div class="form-group">
<label for="input-icon">Icon <span class="text-muted">(Optional)</span></label>
<div class="row">
<div class="col-sm-9">
<input type="text" class="form-control" id="input-icon" name="icon" placeholder="https://example.org/favicon.ico">
</div>
<div class="col-sm-2">
<label for="input-file-icon" class="btn btn-secondary">Browse</label>
<input type="file" id="input-file-icon" class="btn btn-secondary">
</div>
<div class="col-sm-1">
<img src="icons/search.svg" id="icon-preview">
</div>
</div>
<p class="form-text text-muted">Icon should be at least 16×16 pixels -
<a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs">Data URLs</a> are also accepted here
</p>
</div>
<div class="form-group">
<label>Keyword</label>
<p class="text-muted"><strong>Tip:</strong> A keyword can be added by going to <mark>about:preferences#search</mark> after adding the search engine and editing the <em>Keyword</em> column</p>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="show-advanced">
<label class="custom-control-label" for="show-advanced">Show advanced options</label>
</div>
</div>
<div class="alert alert-info advanced adv-hidden">
See the <a target="_blank" href="https://developer.mozilla.org/en-US/docs/Web/OpenSearch">OpenSearch</a> documentation on MDN for more information.
</div>
<div class="form-group advanced adv-hidden">
<label for="input-suggest-url">Suggest URL <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="input-suggest-url" name="suggest-url" placeholder="https://example.org/suggestions?q={searchTerms}">
<p class="form-text text-muted"><b>{searchTerms}</b> is substituted with the entered search query (<code>application/x-suggestions+json</code>)</p>
</div>
<div class="form-group advanced adv-hidden">
<label for="input-encoding">Input Encoding <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="input-encoding" name="encoding" placeholder="UTF-8">
</div>
<div class="form-group advanced adv-hidden">
<label for="input-description">Description <span class="text-muted">(Optional)</span></label>
<input type="text" class="form-control" id="input-description" name="description">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Add custom search engine</button>
<button type="submit" class="btn btn-secondary advanced adv-hidden" id="show-preview">OpenSearch XML preview</button>
<p>
Due to a <a target="_blank" href="https://github.com/evilpie/add-custom-search-engine/wiki/Technical-Limitation">technical limitation with Firefox WebExtensions</a>, all data entered when creating your custom search engine is <b>uploaded to paste.mozilla.org</b>.
After adding the search engine the data should be automatically removed.
</div>
</form>
<pre id="preview" class="advanced adv-hidden">
</pre>
</div>
<script type="text/javascript" src="search.js"></script>
</body>
</html>