1 <!doctype html> 2 <html> 3 <head> 4 <title>Popup for Proxy API Test</title> 5 <style> 6 body { 7 margin: 5px 10px 10px; 8 } 9 10 h1 { 11 color: #53637D; 12 font: 26px/1.2 Helvetica, sans-serif; 13 font-size: 200%; 14 margin: 0; 15 padding-bottom: 4px; 16 text-shadow: white 0 1px 2px; 17 } 18 19 div[role='main'] { 20 border-radius: 5px; 21 background: #EAEEF3; 22 font: 14px/1 Arial,Sans Serif; 23 padding: 10px; 24 width: 563px; 25 box-shadow: inset 0px 2px 5px rgba(0,0,0,0.5); 26 -webkit-transition: background-color 0.5s ease-out; 27 overflow: hidden; 28 } 29 30 div[role='main'].incognito { 31 background: #496281 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAhCAYAAABeD2IVAAAFz0lEQVRYw8VYC0xcRRQtUEprERQ1VkohSGNpwaCYYNBUjS2K+KEVTUkDiqY0hWD5xxhDINgQqIZviRAkSiiWNDRxWypNpaatEQk/CwvlWyks3+XPAssu7I7nbmabx+suPzfrTU7yljfz5sy95947w5YtpjcLwBLYBuzgsAGs+DuzGZGwBh4BHIDdwHPA8xxuwBOcnIWpPUAL7wQeB54CngYcAWdO4kXgDeBoWFhYSk5OTtmFCxeuxsbGpuBv3sCTwFZTkrLmXtgH+AJ+QAAQCBzz8/P7MiUl5aebN29Kh4eHFVNTU2xoaIgNDAywe/fusYyMjO858R2mJEUe2ldZWfljd3f3P+3t7bK2trZBuVyuYCJbXFxkXV1drLOzU4e7d++yzMzMasz3AexMSYq89CoRYuuwvr6+B6Q6OjpYUVFRG+Yf4iE0iZYoc5woVK2trUPrIUXh05Mir9XW1qow/33gmf8idj0ZypjHuIgj5ubm1OshpdFoVoTwzp07zMbGJsTb23s/16fFZlKcyDjY29u7+fr6HoJFV1dXt7EN2MjIyANSUqmUubq6Jtna2r7OvWW7kUy04IR2+fj4HDx+/HhUYmJiIQQuhZ5mN0JKqVSuEHtWVlbd6dOns+3s7N7h9YtKynbuhFWNQuYQGBh4ODs7u2B0dHRauNDMzIx2eXmZabXadRG7f/++jhSylV25ckXOk2D4yJEjSVjnNV7ntq9Fily6Jzg4+CTEOqf/OJFoampSFRQUjDc3Ny+QF9RqtU47hozGE3mUDIbxOtTX1ytQt5T6MQipFGu9zDPbYq0i+ey5c+dyxAvBSxrsXHXixIlmVOsOaGykp6dnYXZ2lt49BHhIWVdXN1VaWipLS0trCQ8P/xseUwrD6+HhEUJO4BFa3VMREREx4+PjCkNhunjx4iAWuI0x16KjowlVYkA7uncYczUyMpJ+3z579mzXwsLCA9fimcXHx6djvb3cGatmHrnTBxr4jSZShaYwCQnC89PQXFNUVNSvMTExv6C/XYqLi6sg0DMISRISEq7h+QY81dHY2DgpDq9CoWCYm8Fbl8FmLaxLROoA8OGpU6dKL1++LCMdGdIPEkF569atIYlE0oNNdGFsNz03NDTI0QOVhrRG31GpVCR4JcrEV1jnFWOZaMVrBx07vIDDQBiQil3XQENDMplseWlpiW3WBOLXovWoy8vLBxA+CTT6NdZ5gR9vtooFvis1NfWTioqKn6uqqv6ihius4NCYZn5+Xuf2zRAi4OSgQQIsT05OrnA71qrmR6BtQlL0wwVpL1nPIqQzCgFpzlB50HuFxlF2TkxMUKiXxBKgb4Dooqen5zHeX63FWUfl/22k/aix+qM3IkEeS05Obs7Pz6+vqakZgAcUY2Njur8T2cHBwSXobbSwsPCPgICAAny7QJgstAaVjry8vEquKwexpiz5WccrJCTkDO1yLWIILcP474DPgQ8oMahpA9+C0FxJSUk7nr/h2vwMSAfhJWFJQAKN8Xku4tCJveWP3d8gb6zWToh0aGjoJYz/FHgToGYbTMmBUM0RnJyccvE7GkiEVlv1cylhpqenGbI7l4v8UWNVfRsn5efs7Jxx/vz5fr0+VvGWuqysrMbNzS0R88KDgoLyEMo+/XvyDI4tcmHC6GsUSkgL5rxFCWbsxGDFY/oSdn+mt7d3gj5w/fp15VrENmokbvRANTbyBdbbz8/tBgsn1agD/v7+cUh7lfAj2KmGmdAoI9PT0//kOnQ01vesedF8t7+/X27oQ0hbrSmJoXBKucD3GAsd3VS8cDIoY2YykgM6RS4/Zj8kckt+sfTDeaeHmdFwHxzj98Y94qKpOz+5u7ufZGY28haOyOX89rzCW9SZ3YuLi39g/4Mhy4ex/kHejFeQ2tvS0vI79ShqE+YEmjxLSkoK5aQsheGjW6snv8EeBT42Az4C3uP/l3DhyWYhvuPZ84PWbt6tzQFH7pCdvCzoSP0LtBi6oflBr2wAAAAASUVORK5CYII=') no-repeat 533px bottom; 32 } 33 34 form { 35 width: 563px; 36 -webkit-transition: -webkit-transform 0.25s ease; 37 } 38 39 form.offscreen { 40 -webkit-transform: translateX(-600px); 41 } 42 43 fieldset { 44 border: 0; 45 margin: 0; 46 padding: 0; 47 position: relative; 48 } 49 50 legend { 51 position: absolute; 52 left: -999em; 53 } 54 55 form > fieldset { 56 border-radius: 5px; 57 border: 1px solid transparent; 58 padding: 10px 10px 10px 30px; 59 margin: 5px 0; 60 -webkit-transition: all 0.5s ease; 61 } 62 63 form > fieldset:hover { 64 background: rgba(255,255,255,0.1); 65 border-color: rgba(0,0,0,0.1); 66 } 67 68 form > fieldset.active { 69 background: rgba(255,255,255,0.25); 70 border-color: rgba(0,0,0,0.25); 71 } 72 73 form > fieldset > input { 74 margin-left: -20px; 75 } 76 77 section { 78 margin: 5px 0 0; 79 } 80 81 section fieldset:not(:first-child):not(:last-child) { 82 -webkit-transition: all 0.5s ease; 83 overflow: hidden; 84 max-height: 1.6em; 85 } 86 87 section.single fieldset:not(:first-child):not(:last-child) { 88 max-height: 0px; 89 } 90 91 section fieldset:last-child { 92 margin-top: 5px; 93 } 94 95 section fieldset:last-child label { 96 display: block; 97 } 98 99 section fieldset:last-child textarea { 100 width: 412px; 101 } 102 103 section > fieldset { 104 position: relative; 105 padding-left: 60px; 106 } 107 108 section > fieldset > legend { 109 left: 0; 110 top: 4px; 111 width: 53px; 112 text-align: right; 113 } 114 115 input[type='url']:invalid:not(:active):not(:focus) { 116 border-color: rgba(255,0,0,0.5); 117 background: rgba(255,0,0,0.25); 118 } 119 120 input:invalid:not(:active):not(:focus):after { 121 content: "This isn't a valid URL!"; 122 display:block; 123 } 124 125 input[type="checkbox"] { 126 margin: 5px 0 5px 35px; 127 } 128 129 input[type="text"] { 130 width: 200px; 131 margin: 0 10px 0 0; 132 } 133 134 input[type="number"] { 135 width: 50px; 136 margin: 2px 10px 0 5px; 137 } 138 139 section label, section legend { 140 color: #999; 141 -webkit-transition: color 0.5s ease; 142 } 143 144 .incognito section label, .incognito section legend { 145 color: #BBB; 146 } 147 148 .active section label, .active section legend, form > fieldset > label { 149 color: #000; 150 -webkit-transition: color 0.5s ease; 151 } 152 153 .incognito .active section label, .incognito .active section legend, .incognito form > fieldset > label { 154 color: #FFF; 155 } 156 157 input[type="submit"], button { 158 border-radius: 2px; 159 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1); 160 -webkit-user-select: none; 161 background: -webkit-linear-gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5); 162 border: 1px solid #AAA; 163 color: #444; 164 margin-bottom: 0; 165 min-width: 4em; 166 padding: 3px 12px; 167 margin-top: 0; 168 font-size: 1.1em; 169 } 170 171 .overlay { 172 display: block; 173 text-align: center; 174 position: absolute; 175 left: 50%; 176 top: 50%; 177 width: 350px; 178 padding: 20px; 179 margin: -80px 0 0 -195px; 180 opacity: 0; 181 background: rgba(0, 0, 0, 0.75); 182 border-radius: 5px; 183 color: #FFF; 184 font: 1.5em/1.2 Helvetica Neue, sans-serif; 185 -webkit-transition: all 1.0s ease; 186 } 187 .overlay a { 188 color: #FFF; 189 } 190 191 .overlay.visible { 192 opacity: 1; 193 } 194 </style> 195 </head> 196 <body> 197 <h1>Proxy Configuration</h1> 198 <div role="main"> 199 <form id="proxyForm"> 200 <fieldset id="system"> 201 <legend>System Settings</legend> 202 <input type="radio" name="proxyType" id="proxyTypeSystem" value="system"> 203 <label for="proxyTypeSystem">Use the <em>system's proxy settings</em>.</label> 204 </fieldset> 205 <fieldset id="direct"> 206 <legend>Direct Connection</legend> 207 <input type="radio" name="proxyType" id="proxyTypeDirect" value="direct"> 208 <label for="proxyTypeDirect">Your computer is <em>directly connected</em> to the internet; no need for a proxy.</label> 209 </fieldset> 210 <fieldset id="pac_script"> 211 <legend>Automatic Configuration</legend> 212 <input type="radio" name="proxyType" id="proxyTypeAutoconfig" value="autoconfig"> 213 <label for="proxyTypeAutoconfig">Your proxy supports <em>automatic configuration</em>.</label> 214 215 <section> 216 <label for="autoconfigURL">Autoconfiguration URL (PAC file)</label> 217 <input type="url" name="autoconfigURL" id="autoconfigURL"> 218 <input type="hidden" name="autoconfigData" id="autoconfigData"> 219 </section> 220 </fieldset> 221 <fieldset id="fixed_servers"> 222 <legend>Manual Proxy</legend> 223 <input type="radio" name="proxyType" id="proxyTypeManual" value="manual"> 224 <label for="proxyTypeManual">Configure your proxy settings <em>manually</em>.</label> 225 <section> 226 <fieldset> 227 <legend>HTTP</legend> 228 <label for="proxyHostHttp">Host</label> 229 <select id="proxySchemeHttp" name="proxySchemeHttp"> 230 <option selected value="http">http://</option> 231 <option value="https">https://</option> 232 <option value="socks4">socks4://</option> 233 <option value="socks5">socks5://</option> 234 </select> 235 <input type="text" name="proxyHostHttp" id="proxyHostHttp"> 236 237 <label for="proxyPortHttp">Port</label> 238 <input type="number" min="1" step="1" name="proxyPortHttp" id="proxyPortHttp"> 239 240 <input type="checkbox" name="singleProxyForEverything" id="singleProxyForEverything"> 241 <label for="singleProxyForEverything">Use the same proxy server for all protocols</label> 242 </fieldset> 243 <fieldset> 244 <legend>HTTPS</legend> 245 <label for="proxyHostHttps">Host</label> 246 <select id="proxySchemeHttps" name="proxySchemeHttps"> 247 <option selected value="http">http://</option> 248 <option value="https">https://</option> 249 <option value="socks4">socks4://</option> 250 <option value="socks5">socks5://</option> 251 </select> 252 <input type="text" name="proxyHostHttps" id="proxyHostHttps"> 253 254 <label for="proxyPortHttps">Port</label> 255 <input type="number" min="1" step="1" name="proxyPortHttps" id="proxyPortHttps"> 256 </fieldset> 257 <fieldset> 258 <legend>FTP</legend> 259 <label for="proxyHostFtp">Host</label> 260 <select id="proxySchemeFtp" name="proxySchemeFtp"> 261 <option selected value="http">http://</option> 262 <option value="https">https://</option> 263 <option value="socks4">socks4://</option> 264 <option value="socks5">socks5://</option> 265 </select> 266 <input type="text" name="proxyHostFtp" id="proxyHostFtp"> 267 268 <label for="proxyPortFtp">Port</label> 269 <input type="number" min="1" step="1" name="proxyPortFtp" id="proxyPortFtp"> 270 </fieldset> 271 <fieldset> 272 <legend>Fallback</legend> 273 <label for="proxyHostFallback">Host</label> 274 <select id="proxySchemeFallback" name="proxySchemeFallback"> 275 <option selected value="http">http://</option> 276 <option value="https">https://</option> 277 <option value="socks4">socks4://</option> 278 <option value="socks5">socks5://</option> 279 </select> 280 <input type="text" name="proxyHostFallback" id="proxyHostFallback"> 281 282 <label for="proxyPortFallback">Port</label> 283 <input type="number" min="1" step="1" name="proxyPortFallback" id="proxyPortFallback"> 284 </fieldset> 285 <fieldset> 286 <label for="bypassList">Bypass proxy for these hosts:</label> 287 <textarea id="bypassList" name="bypassList" placeholder="<local>,192.168.1.1/16, .example.com"></textarea> 288 </fieldset> 289 </section> 290 </fieldset> 291 <input type="submit" value="Save proxy settings"> 292 <button value="incognito">Configure incognito window settings.</button> 293 </form> 294 </div> 295 <script src="./proxy_form_controller.js"></script> 296 <script> 297 var c = new ProxyFormController( 'proxyForm' ); 298 </script> 299 </body> 300 </html> 301
