1 files changed, 93 insertions, 0 deletions
diff --git a/src/pattern-tester.html b/src/pattern-tester.html
new file mode 100644
index 0000000..0757f5d
--- /dev/null
+++ b/src/pattern-tester.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title data-i18n="patternTester">FoxyProxy </title>
+    <link rel="icon" type="image/png" href="/images/icon.svg">
+    <link rel="stylesheet" href="styles/fontawesome-4.6.3.css">
+    <link rel="stylesheet" href="styles/app.css">
+    <style>
+      h3 { margin-bottom: 0; }
+      .prime > h3:first-of-type { margin-top: 0; }
+      #result { margin: 1em 0 0; }
+      label { display: inline-block; }
+      label + span { color: #f30; font-style: italic; margin-left: 0.5em; font-size: 0.9em; }
+    </style>
+  </head>
+  <body>
+
+    <!-- header -->
+    <div class="prime header" data-i18n="patternTester"></div>
+
+    <!-- main -->
+    <div class="prime">
+
+      <div style="text-align: right;">
+        
+        <div class="tooltip">
+          <span data-i18n="patternCheatSheet" class="fp-orange"></span>
+          <i class="fa fa-info-circle"></i>
+          <div class="tooltiptext bottom table">
+            <div class="tooltiptable">
+              <div class="monospace">*</div>
+              <div>all domains</div>
+              <div class="monospace">*.bbc.co.uk</div>
+              <div>exact domain and all subdomains</div>
+              <div class="monospace">**.bbc.co.uk</div>
+              <div>subdomains only (not bbc.co.uk)</div>
+              <div class="monospace">bbc.co.uk</div>
+              <div>exact domain only</div>
+            </div>
+            <hr>
+            <div class="tooltiptablefooter">
+              <div>Black patterns take precedence over white patterns. For example, a black pattern of <span class="monospace">*</span> means nothing will match, regardless of any white patterns.</div>
+            </div>
+          </div>
+        </div>
+        |
+        <a href="/pattern-help.html" target="_blank"><span data-i18n="patternHelp"></span> <i class="fa fa-question-circle"></i></a>
+      </div>
+
+      <h3>Step 1</h3>
+      <label data-i18n="enterUrl"></label><span data-i18n="enterUrlNote"></span>
+      <input id="url" type="url" value="https://getfoxyproxy.org" placeholder="https://getfoxyproxy.org">
+
+
+      <h3>Step 2</h3>
+      <div class="flex">
+        <div style="flex: 3;">
+          <label data-i18n="patternDetail"></label><span data-i18n="patternNote"></span>
+          <input id="pattern" type="text" spellcheck="false">
+        </div>
+
+        <div style="margin-left: 1em;">
+          <label data-i18n="type"></label>
+          <select id="type">
+            <option value="1">Wildcard</option>
+            <option value="2">Reg Exp</option>
+          </select>
+        </div>
+
+        <div style="margin-left: 1em;">
+          <label data-i18n="protocol"></label>
+          <select id="protocols">
+            <option value="1">all</option>
+            <option value="2">http</option>
+            <option value="4">https</option>
+          </select>
+        </div>
+      </div>
+
+
+      <h3>Step 3</h3>
+      <p id="result" class="prime small success hide"></p><br>
+      
+      <label data-i18n="clickTest"></label>
+      <div style="text-align: right;"><button type="button" data-i18n="test"></button></div>
+    </div>
+
+  <script src="scripts/common.js"></script>
+  <script src="scripts/utils.js"></script>
+  <script src="scripts/pattern-tester.js"></script>
+  </body>
+</html>