diff options
Diffstat (limited to 'src/patterns.html')
| -rw-r--r-- | src/patterns.html | 202 |
1 files changed, 202 insertions, 0 deletions
diff --git a/src/patterns.html b/src/patterns.html new file mode 100644 index 0000000..0d3aa83 --- /dev/null +++ b/src/patterns.html @@ -0,0 +1,202 @@ +<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8">
+ <title data-i18n="patterns">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>
+ td i.fa { font-size: 1.5em; color: #ccc; }
+ td i.fa:hover { font-size: 1.5em; color: #f90; }
+ tr { opacity: 1; transition: all 0.5s ease-in-out; }
+ td { padding: 0.2em 0.5em; }
+ td:nth-of-type(1), td:nth-of-type(2) { min-width: 10em; max-width: 15em; padding: 0 0.5em; }
+ td:nth-of-type(3), td:nth-of-type(4), td:nth-of-type(5) { width: 5em; text-align: center; }
+ td:nth-of-type(6) { width: 7em; }
+
+ input[type="text"], input[type="text"]:focus {
+ background-color: transparent;
+ box-shadow: none;
+ height: auto;
+ margin: 0;
+ padding: 0;
+ border: 1px solid transparent;
+ }
+ input[type="text"]:focus {
+ background-color: #f8f8ff;
+ }
+ input:invalid, input:invalid:focus {
+ background-color: #fff;
+ border-color: #f90;
+ }
+ select {
+ background: #f5fffa;
+ font-size: 0.9em;
+ height: auto;
+ margin: 0;
+ padding: 0.1em;
+ }
+ #result { margin: 1em 0 0; }
+ label[for="file"] { margin: 0; }
+ #links { float: right; }
+ hr { color: white; }
+ .addbuttoncontainer {
+ margin: 1em 0 2em;
+ text-align: center;
+ font-size: 0.9em;
+ }
+ .addbutton {
+ margin-left: 1em;
+ vertical-align: initial;
+ }
+ </style>
+ </head>
+ <body>
+
+ <!-- header -->
+ <div class="prime header" data-i18n="editPatterns"></div>
+
+ <!-- spinner --> <!-- options, patterns, log -->
+ <div class="spinner on"><i class="fa fa-refresh fa-spin"></i></div>
+
+ <!-- error -->
+ <div id="error" class="prime hide">
+ <h3 data-i18n="errorWas"></h3>
+ <button type="button" data-i18n="back">◁ </button>
+ </div>
+
+ <!-- main -->
+ <div class="prime main">
+
+ <div class="flex">
+ <div class="prime warning small" style="flex: 1.5">
+ <span data-i18n="activeNote"></span> <strong><span data-i18n="modePatterns"></span></strong>
+ </div>
+ <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-tester.html" target="_blank"><span data-i18n="patternTester"></span> <i class="fa fa-flask"></i></a>
+ |
+ <a href="/pattern-help.html" target="_blank">
+ <span data-i18n="patternHelp"></span>
+ </a>
+ </div>
+ </div>
+
+
+ <h3 data-i18n="whitePatterns"></h3>
+ <!-- table template -->
+ <div class="scroll" style="margin-bottom: 2em;">
+ <table style="width: 100%;">
+ <thead>
+ <tr>
+ <th data-i18n="name"></th><th data-i18n="pattern"></th><th data-i18n="type"></th>
+ <th>HTTP/s</th><th data-i18n="active"></th><th></th>
+ </tr>
+ <!-- template -->
+ <tr class="template">
+ <td><input type="text" spellcheck="false"></td>
+ <td><input type="text" spellcheck="false" required></td>
+ <td>
+ <select name="type">
+ <option value="1">Wildcard</option>
+ <option value="2">Reg Exp</option>
+ </select>
+ </td>
+ <td>
+ <select name="protocol">
+ <option value="1">all</option>
+ <option value="2">http</option>
+ <option value="4">https</option>
+ </select>
+ </td>
+ <td>
+ <input type="checkbox" class="switch" id=""><label for=""></label>
+ </td>
+ <td style="text-align: right;">
+ <button type="button" class="plain hide" data-i18n="imported|title"><i class="fa fa-download"></i></button>
+ <button type="button" class="plain" data-i18n="patternTester|title"><i class="fa fa-flask"></i></button>
+ <!-- <button type="button" class="plain" data-i18n="edit|title"><i class="fa fa-pencil"></i></button> -->
+ <button type="button" class="plain" data-i18n="delete|title"><i class="fa fa-trash"></i></button>
+ </td>
+ </tr>
+
+
+ </thead>
+
+ <tbody></tbody>
+ </table>
+ </div>
+
+ <div class="addbuttoncontainer">
+ <span data-i18n="addWhitelist"></span>
+ <div class="tooltip"><i class="fa fa-info-circle"></i><span class="tooltiptext center" data-i18n="addWhitelistTip"></span></div>
+ <button type="button" class="small addbutton" data-i18n="add" data-white></button>
+ </div>
+
+ <h3 data-i18n="blackPatterns"></h3>
+ <div class="scroll">
+
+ <table style="width: 100%;">
+ <thead>
+ <tr>
+ <th data-i18n="name"></th><th data-i18n="pattern"></th><th data-i18n="type"></th>
+ <th>HTTP/s</th><th data-i18n="active"></th><th></th>
+ </tr>
+ </thead>
+
+ <tbody></tbody>
+ </table>
+ </div>
+
+
+ <div class="addbuttoncontainer">
+ <span data-i18n="addBlacklist"></span>
+ <div class="tooltip"><i class="fa fa-info-circle"></i><span class="tooltiptext center" data-i18n="addBlacklistTip"></span></div>
+ <button type="button" class="small addbutton" data-i18n="add" data-black></button>
+ </div>
+
+ <div class="flex">
+ <div>
+ <input type="file" id="file" accept=".json">
+ <label for="file" class="button" data-i18n="importPatterns"></label>
+ <button type="button" data-i18n="exportPatterns"></button>
+ </div>
+ <div style="text-align: right;">
+ <button type="button" class="alert" data-i18n="cancel"></button>
+ <button type="button" data-i18n="newWhite"></button>
+ <button type="button" data-i18n="newBlack"></button>
+ <button type="submit" data-i18n="save"></button>
+ </div>
+ </div>
+
+ <p id="result" class="prime small success hide"></p>
+
+ </div>
+
+
+ <script src="scripts/common.js"></script>
+ <script src="scripts/utils.js"></script>
+ <script src="scripts/patterns.js"></script>
+ </body>
+</html>
|