summaryrefslogtreecommitdiffstats
path: root/src/pattern-tester.html
blob: 0757f5d52c553dff85e95c3cbb40b44339f2d3b4 (plain)
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
<!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>