popup.html 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
  5. <meta content="utf-8" http-equiv="encoding" />
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  7. <!--
  8. /*******************************************************************************
  9. Cloud Firewall - a browser extension/addon that allows you to toggle blocking
  10. ON or OFF for allowing your browser to connect to web pages and web resources (
  11. like images, videos) hosted on popular top 5 cloud/companies.
  12. Copyright (C) 2019-2021 Niklas Poslovski
  13. Copyright (C) 2019 Gokulakrishna Sudharsan
  14. This program is free software: you can redistribute it and/or modify
  15. it under the terms of the GNU General Public License as published by
  16. the Free Software Foundation, either version 3 of the License, or
  17. (at your option) any later version.
  18. This program is distributed in the hope that it will be useful,
  19. but WITHOUT ANY WARRANTY; without even the implied warranty of
  20. MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  21. GNU General Public License for more details.
  22. You should have received a copy of the GNU General Public License
  23. along with this program. If not, see <http://www.gnu.org/licenses/>.
  24. Home: https://notabug.org/nipos/cloud-firewall
  25. */
  26. -->
  27. <title>Cloud Firewall</title>
  28. <link rel="stylesheet" href="css/popup2.css" />
  29. <link rel="stylesheet" href="css/toggleswitch.css" />
  30. <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
  31. <script src="libraries/tomlify.js"></script>
  32. <script src="js/popup/variables.js"></script>
  33. <script src="js/popup/registerListeners.js"></script>
  34. <script src="libraries/publicsuffixlist.min.js"></script>
  35. <script src="libraries/punycode.js"></script>
  36. <script src="libraries/uritools.js"></script>
  37. <script src="libraries/json2yaml.js"></script>
  38. <script src="libraries/JSON2Plain.js"></script>
  39. <script src="libraries/cson-parser-4.0.3-stringify.js"></script>
  40. <script src="js/dom/DOMUpdater.js"></script>
  41. <script src="js/dom/common.js"></script>
  42. <script src="js/popup/popup.js"></script>
  43. </head>
  44. <!--https://codepen.io/ondrejsvestka/pen/qmbeMe-->
  45. <!--https://stackoverflow.com/questions/20979062/bootstrap-right-column-on-top-on-mobile-view-->
  46. <body class="hideBody">
  47. <div id="titlediv" style="white-space: nowrap;">
  48. <div id="titledivinner">
  49. <img id="titlelogo" class="icon-light" src="images/shield.svg"/><img id="titlelogo" class="icon-dark" src="images/shield-light.svg"/>
  50. <span id="title"><strong>Cloud&nbsp;Firewall</strong></span>
  51. </div>
  52. </div>
  53. <div id="rowdiv">
  54. <div class="col" id="statsTableDesktop">
  55. <table id="statstable">
  56. <tr id="showstats" class="spaceUnder">
  57. <td>
  58. <div id="connectionsblockeddiv">
  59. <img id="connectionsblockedicon" class="icon-light" src="images/red-ban.svg"/><img id="connectionsblockedicon" class="icon-dark" src="images/true-red-ban.svg"/><b><i18n>connectionsblocked</i18n></b>
  60. </div>
  61. <div id="sinceinstallationdiv"><b><i18n>sinceinstallation</i18n></b></div>
  62. <div id="countsgoogle"></div>
  63. <div id="countsamazon"></div>
  64. <div id="countsfacebook"></div>
  65. <div id="countsapple"></div>
  66. <div id="countsmicrosoft"></div>
  67. <div id="countscloudflare"></div>
  68. <b>
  69. <div id="countstotal"></div>
  70. </b>
  71. </td>
  72. </tr>
  73. <tr id="pageshowstats" class="spaceUnder">
  74. <td>
  75. <div id="onthispagediv"><b><i18n>onthispage</i18n></b></div>
  76. <div id="hostnameToDisplay"></div>
  77. <div id="pagecountsgoogle"></div>
  78. <div id="pagecountsamazon"></div>
  79. <div id="pagecountsfacebook"></div>
  80. <div id="pagecountsapple"></div>
  81. <div id="pagecountsmicrosoft"></div>
  82. <div id="pagecountscloudflare"></div>
  83. <b>
  84. <div id="pagecountstotal"></div>
  85. </b><br>
  86. <span id="copyBtnArea">
  87. <a class="btn btn-lightblue" id="showInPopup" tabindex="-1"><i18n>showurlsinpopup</i18n></a><br><br><br>
  88. <div><i18n>copy</i18n> <span id="allText"></span><span id="totalcountsForCopyBtn"></span><span id="urlText"></span> <i18n>as</i18n>:</div><br><div><a class="btn btn-outline-dark btn-sm" id="copyToClipboardYAML" tabindex="-1">YAML</a><a class="btn btn-outline-dark btn-sm" id="copyToClipboardTOML" tabindex="-1">TOML</a><a class="btn btn-outline-dark btn-sm" id="copyToClipboardPlain" tabindex="-1">Plain</a><a class="btn btn-outline-dark btn-sm" id="copyToClipboardCSON" tabindex="-1">CSON</a><a class="btn btn-outline-dark btn-sm" id="copyToClipboardJSON" tabindex="-1">JSON</a></div></span>
  89. </td>
  90. </tr>
  91. <!-- <a class="btn blue large" href="help.html" target="_blank">Help</a>-->
  92. </table>
  93. </div>
  94. <div id="uidiv">
  95. <table width="100%" style="min-width: 250px; " align="center" id="tableMain">
  96. <!--
  97. <tr class="spaceUnder" id="showenablebutton" align="center">
  98. <td>
  99. <div class="alert alert-danger" tabindex="-1" style="">
  100. Cloud Firewall is disabled!
  101. </div>
  102. <button
  103. type="button"
  104. class="btn btn-success btn-sm"
  105. id="enablebutton"
  106. tabindex="-1"
  107. >
  108. Enable Cloud Firewall
  109. </button>
  110. </td>
  111. </tr> -->
  112. <tr class="spaceUnder" align="center" id="settingsbuttonarea">
  113. <td>
  114. <button type="button" class="btn btn-blue" id="settingsbutton" tabindex="-1"><i18n>settings</i18n></button>
  115. <button type="button" class="btn btn-lightblue" id="helpButton"><i18n>help</i18n></button>
  116. <button type="button" class="btn btn-green" id="rulesbutton" tabindex="-1"><i18n>rules<i18n></button>
  117. <br />
  118. </td>
  119. </tr>
  120. <tr class="spaceUnder" align="left" id="togglegroup">
  121. <td>
  122. <center id="infocenter">
  123. <a href="#" class="badge badge-pill badge-danger" id="resetRule" style="display:none">&times;</a>
  124. <span class="badge badge-info" id="infoRule"></span>
  125. </center>
  126. <div id="switchdiv">
  127. <label class="md_switch">
  128. <input type="checkbox" id="switchgoogle" />
  129. <span class="md_switch__toggle"></span>
  130. &nbsp;&nbsp;&nbsp;<i18n>blockgoogle</i18n></label><br />
  131. <label class="md_switch">
  132. <input type="checkbox" id="switchamazon" />
  133. <span class="md_switch__toggle"></span>
  134. &nbsp;&nbsp;&nbsp;<i18n>blockamazon</i18n></label><br />
  135. <label class="md_switch">
  136. <input type="checkbox" id="switchfacebook" />
  137. <span class="md_switch__toggle"></span>
  138. &nbsp;&nbsp;&nbsp;<i18n>blockfacebook</i18n></label><br />
  139. <label class="md_switch" data-on="yes" data-off="no">
  140. <input type="checkbox" id="switchapple" />
  141. <span class="md_switch__toggle"></span>
  142. &nbsp;&nbsp;&nbsp;<i18n>blockapple</i18n></label><br />
  143. <label class="md_switch">
  144. <input type="checkbox" id="switchmicrosoft" />
  145. <span class="md_switch__toggle"></span>
  146. &nbsp;&nbsp;&nbsp;<i18n>blockmicrosoft</i18n></label><br />
  147. <label class="md_switch" data-on="yes" data-off="no">
  148. <input type="checkbox" id="switchcloudflare" />
  149. <span class="md_switch__toggle"></span>
  150. <span style="display: inline;">
  151. &nbsp;&nbsp;&nbsp;<i18n>blockcloudflare</i18n></span></label>
  152. </div>
  153. <!-- <span id="2BR"><br /></span>
  154. -->
  155. <br/> <!-- <div>
  156. <div
  157. class="alert alert-info"
  158. tabindex="-1"
  159. id="inExcludesAlert"
  160. style="display:none;"
  161. ></div> -->
  162. <button class="btn btn-all" type="button" id="blockAllButton" tabindex="-1"><i18n>blockall</i18n></button>&nbsp;&nbsp;&nbsp;
  163. <button class="btn btn-all" type="button" id="allowAllButton" tabindex="-1"><i18n>allowall</i18n></button>
  164. <br><br>
  165. <div align="center">
  166. <div id="inExcludesAlertWrapper" class="badge badge-alert-info" style="display:none;"><img class="badge-alert-info-img" src="images/alert-darkyellow.svg">
  167. <a id="inExcludesAlert" tabindex="-1"></a>
  168. </div><br>
  169. <button class="btn btn-red" id="openExcludePopup" tabindex="-1" style="white-space:normal;word-wrap:anywhere"><i18n>disablefor</i18n> {domain}</button>
  170. <button class="btn btn-green" id="removeFromExcludes" tabindex="-1" style="white-space:normal;word-wrap:anywhere"><i18n>include</i18n> {domain}</button>
  171. </div>
  172. </div>
  173. </td>
  174. </tr>
  175. <!--
  176. <tr class="spaceUnder" align="center" id="showdisablebutton">
  177. <td>
  178. <button
  179. type="button"
  180. class="btn btn-outline-dark btn-sm"
  181. id="disablebutton"
  182. tabindex="-1"
  183. >
  184. Disable Cloud Firewall temporarily
  185. </button>
  186. </td>
  187. </tr>
  188. -->
  189. <!-- <tr class="spaceUnder" align="center">
  190. <td>
  191. <button
  192. type="button"
  193. class="btn btn-info btn-sm formfineleft"
  194. id="helpButton"
  195. >
  196. Help
  197. </button>
  198. </td>
  199. </tr> -->
  200. </table>
  201. </div>
  202. </div>
  203. <!-- temporary duplicate of stats table as I don't yet have the time to do bootstrap classes things to push left column table to bottom of screen in android firefox screen-->
  204. <table id="statsTableAndroid" width="100%" style="min-width: 250px; ">
  205. <!-- <div id="inExcludesAlertWrapper" style="display:none;">
  206. <div id="inExcludesAlert" class="alert alert-info" tabindex="-1"></div>
  207. </div> -->
  208. <tr id="showstats" class="spaceUnder">
  209. <td>
  210. <div id="connectionsblockeddiv">
  211. <img id="connectionsblockedicon" src="images/red-ban.svg"/><b><i18n>connectionsblocked</i18n></b>
  212. </div>
  213. <div id="sinceinstallationdiv"><b><i18n>sinceinstallation</i18n></b></div>
  214. <div id="countsgoogle"></div>
  215. <div id="countsamazon"></div>
  216. <div id="countsfacebook"></div>
  217. <div id="countsapple"></div>
  218. <div id="countsmicrosoft"></div>
  219. <div id="countscloudflare"></div>
  220. <b>
  221. <div id="countstotal"></div>
  222. </b>
  223. </td>
  224. </tr>
  225. <tr id="pageshowstats" class="spaceUnder">
  226. <td>
  227. <div id="onthispagediv"><b><i18n>onthispage</i18n></b></div>
  228. <div id="hostnameToDisplay"></div>
  229. <div id="pagecountsgoogle"></div>
  230. <div id="pagecountsamazon"></div>
  231. <div id="pagecountsfacebook"></div>
  232. <div id="pagecountsapple"></div>
  233. <div id="pagecountsmicrosoft"></div>
  234. <div id="pagecountscloudflare"></div>
  235. <b>
  236. <div id="pagecountstotal"></div>
  237. </b><br>
  238. <span id="copyBtnArea">
  239. <a class="btn btn-lightblue" id="showInPopup" tabindex="-1"><i18n>showurlsinpopup</i18n></a><br><br><br>
  240. <div><i18n>copy</i18n> <i18n>as</i18n>:</div><div><a class="btn btn-outline-dark btn-sm" id="copyToClipboardYAML" tabindex="-1">YAML</a><a class="btn btn-outline-dark btn-sm" id="copyToClipboardTOML" tabindex="-1">TOML</a><a class="btn btn-outline-dark btn-sm" id="copyToClipboardPlain" tabindex="-1">Plain</a><a class="btn btn-outline-dark btn-sm" id="copyToClipboardCSON" tabindex="-1">CSON</a><a class="btn btn-outline-dark btn-sm" id="copyToClipboardJSON" tabindex="-1">JSON</a></div></span>
  241. </td>
  242. </tr>
  243. <!-- <a class="btn blue large" href="help.html" target="_blank">Help</a>-->
  244. </table>
  245. <div style="margin: 0px; padding: 0px; border: 0px solid rgb(6, 117, 211); font-size: 19px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1; font-family: sans-serif; vertical-align: baseline; box-sizing: content-box; overflow: unset; height: 1px; position: relative; width: auto; display: flex; background-color: rgb(9, 150, 248); color: rgb(255, 255, 255); text-align: left; align-items: center; border-radius: 3px; justify-content: center; text-decoration: none;"></div>
  246. <footer>
  247. <small><div style="text-align:center;" id="versiondisplay"></div></small>
  248. </footer>
  249. <div id="excludePopup">
  250. <h1><i18n>addexception</i18n></h1>
  251. <div style="margin: 0px; padding: 0px; border: 0px solid rgb(6, 117, 211); font-size: 19px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1; font-family: sans-serif; vertical-align: baseline; box-sizing: content-box; overflow: unset; height: 1px; position: relative; width: auto; display: flex; background-color: rgb(9, 150, 248); color: rgb(255, 255, 255); text-align: left; align-items: center; border-radius: 3px; justify-content: center; text-decoration: none;"></div>
  252. <i18n>exceptionlifetime</i18n><br/><br/><br/>
  253. <center>
  254. <button class="btn btn-red addToExcludes" data-lifetime="permanent" tabindex="-1" style="white-space:normal;word-wrap:anywhere"><i18n>disableforever</i18n></button><p></p>
  255. <button class="btn btn-red addToExcludes" data-lifetime="session" tabindex="-1" style="white-space:normal;word-wrap:anywhere"><i18n>disableforsession</i18n></button><p></p>
  256. <button class="btn btn-red addToExcludes" data-lifetime="visit" tabindex="-1" style="white-space:normal;word-wrap:anywhere"><i18n>disableforvisit</i18n></button>
  257. </center>
  258. </div>
  259. </body>
  260. <script src="js/i18n.js"></script>
  261. </html>