├── .gitignore ├── LICENSE ├── README.md └── public ├── Tools ├── ascii │ ├── gen.coffee │ ├── gen.js │ └── index.html ├── calculator │ ├── calculator.js │ ├── index.html │ └── style.css ├── compiler │ ├── index.coffee │ ├── index.html │ ├── index.js │ ├── style.css │ └── temp.js ├── dictionary │ ├── dictionary.js │ ├── index.html │ └── style.css ├── regex │ ├── index.html │ └── index.js ├── shortener │ ├── index.html │ ├── short.js │ ├── style.css │ └── uglify.min.js ├── stackoverflow │ ├── index.html │ ├── stackoverflow.js │ └── style.css ├── todolist │ ├── index.html │ ├── style.css │ └── todo.js ├── videoRecorder │ ├── index.html │ ├── style.css │ └── videoRecorder.js ├── voiceRecorder │ ├── index.html │ ├── style.css │ └── voiceRecorder.js └── whiteboard │ ├── index.html │ ├── style.css │ └── whiteboard.js ├── assets ├── bootstrap │ ├── css │ │ └── bootstrap.min.css │ └── js │ │ └── bootstrap.min.js ├── css │ ├── Highlight-Clean.css │ ├── Navigation-Clean.css │ └── styles.css ├── fonts │ ├── FontAwesome.otf │ ├── font-awesome.min.css │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.svg │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── img │ └── wave.png └── js │ ├── jquery.min.js │ ├── navbar.js │ ├── swing.js │ └── switchTabs.js ├── favicon.ico ├── index.html ├── switchSite.js └── window.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | 106 | .idea/ 107 | vscode/ 108 | 109 | .history 110 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | logo 5 | 6 |
7 |
8 | 9 | [![Generic badge](https://img.shields.io/badge/CodeJam-Timathon-orange.svg)](https://twtcodejam.net/) ![Platforms](https://raster.shields.io/badge/Platform-Web%20Browser-blue.png) ![GitHub repo size](https://img.shields.io/github/repo-size/TWT-Code-Jam-FAST/Probox) [![Link](https://img.shields.io/badge/Link-https://probox.vercel.app-orange.svg)](https://probox.vercel.app) 10 | 11 |
12 | 13 | # Probox, the toolbox for Programmers 14 | 15 | This is the perfect tool for any programmer! It has many features to help them in their every day life. 16 | So why don't you come down and test it? I promise you won't lose anything! 17 | 18 | You can try the app by clicking [here](https://probox.vercel.app/) or by going to this link: 19 | https://probox.vercel.app/ 20 | 21 | ## Features 22 | 23 | - Code Compiler: Compile any code in node, python, c++, ruby or lua right from your browser! 24 | - Code Shortener: Let us shorten your javascript code! 25 | - Dictionary: Don't know the meaning of a word? Use this to find it! 26 | - Calculator: Perform your calculations easily here! 27 | - Stack Overflow: Search for stack overflow questions right from our website! 28 | - Video Recorder: Record some nice video! 29 | - Audio Recorder: Record some nice audio! 30 | - Regex Templates: Don't know the regex for something? Look for it here! 31 | - Whiteboard: Sketch your ideas to this online whiteboard! 32 | - Ascii Chart: Show all the ascii characters and their infos! 33 | - TODO List: So you will never forgot what you needed to do next! 34 | 35 | ## Contributions 36 | 37 | We love your open source enthusiasm. Seeing an website grow a bigger community is possibly the best thing a developer can expect. 38 | The Code Jam is now officially over. Therefore, we now accept any kind of pull requests - Doc, UI, Bug fixes - feel free to make prs! 39 | -------------------------------------------------------------------------------- /public/Tools/ascii/gen.coffee: -------------------------------------------------------------------------------- 1 | replace = 2 | 0: "NUL" 3 | 1: "SOH" 4 | 2: "STX" 5 | 3: "ETX" 6 | 4: "EOT" 7 | 5: "ENQ" 8 | 6: "ACK" 9 | 7: "BEL" 10 | 8: "BS" 11 | 9: "HT" 12 | 10: "LF" 13 | 11: "VT" 14 | 12: "FF" 15 | 13: "CR" 16 | 14: "SO" 17 | 15: "SI" 18 | 16: "DLE" 19 | 17: "DC1" 20 | 18: "DC2" 21 | 19: "DC3" 22 | 20: "DC4" 23 | 21: "NAK" 24 | 22: "SYN" 25 | 23: "ETB" 26 | 24: "CAN" 27 | 25: "EM" 28 | 26: "SUB" 29 | 27: "ESC" 30 | 28: "FS" 31 | 29: "GS" 32 | 30: "RS" 33 | 31: "US" 34 | 32: "SPACE" 35 | 127: "DEL" 36 | 37 | 38 | gen = -> 39 | document.getElementById("tb-bd").innerHTML = "" 40 | s = "" 41 | for i in [0..127] 42 | w = "" 43 | 44 | # Dec 45 | w += "#{i}" 46 | 47 | # Hex 48 | w += "" + i.toString(16).padStart(2, 0) + "" 49 | 50 | # Bin 51 | w += "" + i.toString(2).padStart(8, 0) + "" 52 | 53 | # HTML 54 | w += "&##{i};" 55 | 56 | # Char 57 | w += "" + 58 | if i of replace then replace[i] 59 | else String.fromCharCode(i) + "" 60 | 61 | w ="\n" + w + "\n" 62 | s += w 63 | document.getElementById("tb-bd").innerHTML = s 64 | 65 | $(document).ready gen; 66 | -------------------------------------------------------------------------------- /public/Tools/ascii/gen.js: -------------------------------------------------------------------------------- 1 | var gen, replace; 2 | 3 | replace = { 4 | 0: "NUL", 5 | 1: "SOH", 6 | 2: "STX", 7 | 3: "ETX", 8 | 4: "EOT", 9 | 5: "ENQ", 10 | 6: "ACK", 11 | 7: "BEL", 12 | 8: "BS", 13 | 9: "HT", 14 | 10: "LF", 15 | 11: "VT", 16 | 12: "FF", 17 | 13: "CR", 18 | 14: "SO", 19 | 15: "SI", 20 | 16: "DLE", 21 | 17: "DC1", 22 | 18: "DC2", 23 | 19: "DC3", 24 | 20: "DC4", 25 | 21: "NAK", 26 | 22: "SYN", 27 | 23: "ETB", 28 | 24: "CAN", 29 | 25: "EM", 30 | 26: "SUB", 31 | 27: "ESC", 32 | 28: "FS", 33 | 29: "GS", 34 | 30: "RS", 35 | 31: "US", 36 | 32: "SPACE", 37 | 127: "DEL", 38 | }; 39 | 40 | gen = function () { 41 | var i, j, s, w; 42 | document.getElementById("tb-bd").innerHTML = ""; 43 | s = ""; 44 | for (i = j = 0; j <= 127; i = ++j) { 45 | w = ""; 46 | // Dec 47 | w += `${i}`; 48 | // Hex 49 | w += "" + i.toString(16).padStart(2, 0) + ""; 50 | // Bin 51 | w += "" + i.toString(2).padStart(8, 0) + ""; 52 | 53 | // HTML 54 | w += `&#${i};`; 55 | 56 | // Char 57 | w += 58 | "" + (i in replace ? replace[i] : String.fromCharCode(i) + ""); 59 | w = "\n" + w + "\n"; 60 | s += w; 61 | } 62 | return (document.getElementById("tb-bd").innerHTML = s); 63 | }; 64 | 65 | $(document).ready(gen); 66 | -------------------------------------------------------------------------------- /public/Tools/ascii/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Probox - ASCII Chart 7 | 8 | 9 | 10 | 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 |
DecHexBinHTMLChar
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /public/Tools/calculator/calculator.js: -------------------------------------------------------------------------------- 1 | var inp1 = ""; 2 | var inp2 = ""; 3 | var ans = ""; 4 | var isInp1 = true; 5 | var operation = ""; 6 | 7 | function digit(input) { 8 | document.getElementById("clear-button").innerHTML = "C"; 9 | if (isInp1) { 10 | inp1 += input; 11 | display(inp1); 12 | } else { 13 | inp2 += input; 14 | display(inp2); 15 | } 16 | } 17 | 18 | function decimal() { 19 | if (isInp1) { 20 | if (!inp1.includes(".")) { 21 | inp1 += "."; 22 | } 23 | display(inp1); 24 | } else { 25 | if (!inp2.includes(".")) { 26 | inp2 += "."; 27 | } 28 | display(inp2); 29 | } 30 | } 31 | 32 | function cClear() { 33 | if (inp2 != "") { 34 | inp2 = ""; 35 | display(""); 36 | } else if (operation != "") { 37 | operation = ""; 38 | setOperation(""); 39 | isInp1 = true; 40 | display(inp1); 41 | document.getElementById("clear-button").innerHTML = "AC"; 42 | } else { 43 | document.getElementById("clear-button").innerHTML = "C"; 44 | clearInp(); 45 | } 46 | } 47 | 48 | function clearInp() { 49 | inp1 = ""; 50 | inp2 = ""; 51 | operation = ""; 52 | isInp1 = true; 53 | setOperation(""); 54 | display(""); 55 | } 56 | 57 | function add() { 58 | calculate(); 59 | if (isInp1 && inp1 != "") { 60 | isInp1 = false; 61 | operation = "+"; 62 | setOperation("+"); 63 | } 64 | } 65 | 66 | function sub() { 67 | calculate(); 68 | if (isInp1 && inp1 != "") { 69 | isInp1 = false; 70 | operation = "–"; 71 | setOperation("–"); 72 | } 73 | } 74 | 75 | function div() { 76 | calculate(); 77 | if (isInp1 && inp1 != "") { 78 | isInp1 = false; 79 | operation = "÷"; 80 | setOperation("÷"); 81 | } 82 | } 83 | 84 | function multiply() { 85 | calculate(); 86 | if (isInp1 && inp1 != "") { 87 | isInp1 = false; 88 | operation = "×"; 89 | setOperation("×"); 90 | } 91 | } 92 | 93 | let _inp1, 94 | _inp2 = 0; 95 | function calculate() { 96 | if (inp1 != "" && inp2 != "") { 97 | switch (operation) { 98 | case "+": 99 | _inp1 = Number(inp1); 100 | _inp2 = Number(inp2); 101 | ans = _inp1 + _inp2; 102 | showAns(ans); 103 | break; 104 | case "–": 105 | _inp1 = Number(inp1); 106 | _inp2 = Number(inp2); 107 | ans = _inp1 - _inp2; 108 | showAns(ans); 109 | break; 110 | case "÷": 111 | _inp1 = Number(inp1); 112 | _inp2 = Number(inp2); 113 | ans = _inp1 / _inp2; 114 | showAns(ans); 115 | break; 116 | case "×": 117 | _inp1 = Number(inp1); 118 | _inp2 = Number(inp2); 119 | ans = _inp1 * _inp2; 120 | showAns(ans); 121 | break; 122 | } 123 | } 124 | } 125 | 126 | function showAns(answer) { 127 | inp1 = (Math.round(ans * 1000000000) / 1000000000).toString(); 128 | display(inp1); 129 | inp2 = ""; 130 | isInp1 = true; 131 | setOperation(""); 132 | operation = ""; 133 | } 134 | 135 | function negate() { 136 | if (isInp1) { 137 | inp1 *= -1; 138 | display(inp1); 139 | } else { 140 | inp2 *= -1; 141 | display(inp2); 142 | } 143 | } 144 | 145 | function percent() { 146 | if (isInp1) { 147 | inp1 /= 100; 148 | inp1 = Math.round(inp1 * 1000000000) / 1000000000; 149 | display(inp1); 150 | } else { 151 | inp2 /= 100; 152 | inp2 = Math.round(inp2 * 1000000000) / 1000000000; 153 | display(inp2); 154 | } 155 | } 156 | 157 | function display(input) { 158 | document.getElementById("input-number").innerHTML = input; 159 | } 160 | 161 | function setOperation(input) { 162 | document.getElementById("operation-symbol").innerHTML = input; 163 | } 164 | -------------------------------------------------------------------------------- /public/Tools/calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ProBox - Calculator 7 | 8 | 9 | 10 | 11 |
12 |

13 |

C

14 |

+/–

15 |

%

16 |

÷

17 |

7

18 |

8

19 |

9

20 |

×

21 |

4

22 |

5

23 |

6

24 |

–

25 |

1

26 |

2

27 |

3

28 |

+

29 |

=

30 |

.

31 |

0

32 |
33 | 34 | -------------------------------------------------------------------------------- /public/Tools/calculator/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | font-family: Roboto, sans-serif; 4 | } 5 | 6 | body, 7 | html { 8 | margin: 0 auto; 9 | width: 100%; 10 | height: 100%; 11 | overflow-x: hidden; 12 | } 13 | 14 | #calc-container { 15 | display: grid; 16 | grid-gap: 0px; 17 | grid-template-columns: 25% 25% 25% 25% 25% 25% 25% 25%; 18 | grid-template-rows: 25% 15% 15% 15% 15% 15%; 19 | padding: 5px; 20 | width: 100%; 21 | height: 100%; 22 | background-color: #8d6c9f; 23 | } 24 | 25 | #calc-container div { 26 | padding: 5px; 27 | border: 5px solid #8d6c9f; 28 | } 29 | 30 | #input-container { 31 | border-radius: 10px; 32 | position: relative; 33 | background-color: #acb7d0; 34 | grid-column: 1 / span 8; 35 | grid-row: 1; 36 | width: 975px; 37 | } 38 | 39 | #input-number { 40 | position: absolute; 41 | bottom: min(5%, 20px); 42 | right: min(5%, 20px); 43 | font-size: 10vmin; 44 | } 45 | 46 | #operation-symbol { 47 | margin-left: 1vh; 48 | font-size: 5vh; 49 | color: grey; 50 | } 51 | 52 | .button { 53 | display: flex; 54 | position: relative; 55 | width: 100%; 56 | height: 100%; 57 | border-radius: 10px; 58 | justify-content: center; 59 | align-items: center; 60 | transition: all 0.1s; 61 | } 62 | .button:active { 63 | transform: scale(0.9); 64 | } 65 | .button p { 66 | margin: 0px; 67 | padding: 0px; 68 | font-size: 4.5vmin; 69 | color: white; 70 | -webkit-touch-callout: none; 71 | -webkit-user-select: none; 72 | -khtml-user-select: none; 73 | -moz-user-select: none; 74 | -ms-user-select: none; 75 | user-select: none; 76 | } 77 | 78 | .button1 { 79 | background-color: rgb(100, 100, 150); 80 | } 81 | .button1:hover { 82 | background-color: #5c5c8a; 83 | } 84 | .button1:active { 85 | background-color: rgb(82, 82, 122); 86 | } 87 | 88 | .button2 { 89 | background-color: #e9b363; 90 | } 91 | .button2:hover { 92 | background-color: rgb(245, 130, 0); 93 | } 94 | .button2:active { 95 | background-color: rgb(230, 120, 0); 96 | } 97 | 98 | .button3 { 99 | background-color: #5f86d3; 100 | } 101 | .button3:hover { 102 | background-color: rgb(120, 120, 120); 103 | } 104 | .button3:active { 105 | background-color: rgb(105, 105, 105); 106 | } 107 | p { 108 | margin: 0px; 109 | line-height: 100%; 110 | color: white; 111 | font-weight: bold; 112 | } 113 | 114 | .zero-button { 115 | position: relative; 116 | right: 100%; 117 | } 118 | -------------------------------------------------------------------------------- /public/Tools/compiler/index.coffee: -------------------------------------------------------------------------------- 1 | Storage = window.localStorage 2 | 3 | cm = new (CodeMirror.fromTextArea)(document.getElementById('compiler-ip'), 4 | lineNumbers: true 5 | mode: 'javascript' 6 | theme: 'dracula' 7 | lineWrapping: true 8 | scrollbarStyle: 'overlay' 9 | autoCloseBrackets: true) 10 | 11 | fetchData = (code, lang) -> 12 | req = await fetch "https://Wandbox-API.snowballsh.repl.co?code=#{encodeURIComponent(code)}&lang=#{encodeURIComponent(lang)}" 13 | 14 | newData = await req.json() 15 | 16 | msg = newData.program_message or newData.compiler_message or '' 17 | 18 | document.getElementById('msg').innerHTML = msg.replaceAll('\n', '
').replaceAll(' ', ' ') 19 | document.getElementById('runbtn').innerHTML = 'Run' 20 | document.getElementById('runbtn').classList = 'btn btn-success' 21 | 22 | submit = -> 23 | document.getElementById('runbtn').innerHTML = 'Compiling...' 24 | document.getElementById('runbtn').classList = 'btn btn-info' 25 | code = cm.getValue() 26 | update() 27 | fetchData code, lang 28 | return 29 | 30 | update = -> 31 | input = document.getElementById('select') 32 | theme = input.options[input.selectedIndex].value 33 | cm.setOption 'theme', theme.trim().toLowerCase() 34 | localStorage.setItem 'SAVETHEME', input.selectedIndex 35 | localStorage.setItem 'SAVELANG', lang 36 | localStorage.setItem 'SAVECODE', cm.getValue() 37 | return 38 | 39 | reset = -> 40 | localStorage.clear() 41 | return 42 | 43 | cm.setValue JSCODE 44 | 45 | cm.setSize 'auto', window.innerHeight 46 | 47 | lang = 'nodejs-head' 48 | 49 | $(document).ready -> 50 | if t = localStorage.getItem('SAVETHEME') 51 | document.getElementById('select').selectedIndex = t 52 | cm.on 'change', update 53 | if l = localStorage.getItem('SAVELANG') 54 | lang = l 55 | temp = JSCODE 56 | i = 1 57 | j = 'js' 58 | m = 'javascript' 59 | switch l 60 | when 'cpython-head' 61 | temp = PYCODE 62 | i = 2 63 | j = 'py' 64 | m = 'python' 65 | when 'nodejs-head' 66 | temp = JSCODE 67 | i = 1 68 | j = 'js' 69 | m = 'javascript' 70 | when 'gcc-head' 71 | temp = CPPCODE 72 | i = 3 73 | j = 'cpp' 74 | m = 'text/x-c++src' 75 | when 'ruby-head' 76 | temp = RBCODE 77 | i = 4 78 | j = 'rb' 79 | m = 'ruby' 80 | when 'lua-5.4.0' 81 | temp = LUACODE 82 | i = 5 83 | j = 'lua' 84 | m = 'lua' 85 | 86 | if co = localStorage.getItem('SAVECODE') 87 | temp = co 88 | 89 | $('#tab-' + i).tab 'show' 90 | $('#select-' + j).tab 'show' 91 | 92 | cm.setValue temp 93 | cm.setOption 'mode', m 94 | 95 | document.getElementById('msg').innerHTML = 'Press \'Run\' to run code!' 96 | $('#select-py').click (e) -> 97 | e.preventDefault() 98 | cm.setValue PYCODE 99 | cm.setOption 'mode', 'python' 100 | lang = 'cpython-head' 101 | update() 102 | return 103 | $('#select-js').click (e) -> 104 | e.preventDefault() 105 | cm.setValue JSCODE 106 | cm.setOption 'mode', 'javascript' 107 | lang = 'nodejs-head' 108 | update() 109 | return 110 | $('#select-cpp').click (e) -> 111 | e.preventDefault() 112 | cm.setValue CPPCODE 113 | cm.setOption 'mode', 'text/x-c++src' 114 | lang = 'gcc-head' 115 | update() 116 | return 117 | $('#select-rb').click (e) -> 118 | e.preventDefault() 119 | cm.setValue RBCODE 120 | cm.setOption 'mode', 'ruby' 121 | lang = 'ruby-head' 122 | update() 123 | return 124 | $('#select-lua').click (e) -> 125 | e.preventDefault() 126 | cm.setValue LUACODE 127 | cm.setOption 'mode', 'lua' 128 | lang = 'lua-5.4.0' 129 | update() 130 | return 131 | update() 132 | $('select').on 'change', update 133 | return -------------------------------------------------------------------------------- /public/Tools/compiler/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Probox - Compiler 5 | 9 | 13 | 17 | 21 | 25 | 29 | 33 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 56 | 57 | 58 | 59 | 60 |
61 |
62 | 63 |
64 |
65 |
66 | 118 |
119 |
120 |

Language: Node JS

121 |

Compiler: Node

122 |
123 |
124 |

Language: Python

125 |

Compiler: CPython 3

126 |
127 |
128 |

Language: C++

129 |

Compiler: GCC

130 |
131 |
132 |

Language: Ruby

133 |

Compiler: CRuby 2

134 |
135 |
136 |

Language: Lua

137 |

Compiler: Lua 5

138 |
139 |
140 |
141 |
145 | 154 |
155 | Standard Output 156 |
167 | 168 |
169 | 182 |
183 | 186 |
187 |
188 | 196 | 197 | 198 | -------------------------------------------------------------------------------- /public/Tools/compiler/index.js: -------------------------------------------------------------------------------- 1 | var Storage, cm, fetchData, lang, reset, submit, update; 2 | 3 | Storage = window.localStorage; 4 | 5 | cm = new CodeMirror.fromTextArea(document.getElementById("compiler-ip"), { 6 | lineNumbers: true, 7 | mode: "javascript", 8 | theme: "dracula", 9 | lineWrapping: true, 10 | scrollbarStyle: "overlay", 11 | autoCloseBrackets: true, 12 | }); 13 | 14 | fetchData = async function (code, lang) { 15 | var msg, newData, req; 16 | req = await fetch( 17 | `https://Wandbox-API.snowballsh.repl.co?code=${encodeURIComponent( 18 | code 19 | )}&lang=${encodeURIComponent(lang)}` 20 | ); 21 | newData = await req.json(); 22 | msg = newData.program_message || newData.compiler_message || ""; 23 | document.getElementById("msg").innerHTML = msg 24 | .replaceAll("\n", "
") 25 | .replaceAll(" ", " "); 26 | document.getElementById("runbtn").innerHTML = "Run"; 27 | return (document.getElementById("runbtn").classList = "btn btn-success"); 28 | }; 29 | 30 | submit = function () { 31 | var code; 32 | document.getElementById("runbtn").innerHTML = "Compiling..."; 33 | document.getElementById("runbtn").classList = "btn btn-info"; 34 | code = cm.getValue(); 35 | update(); 36 | fetchData(code, lang); 37 | }; 38 | 39 | update = function () { 40 | var input, theme; 41 | input = document.getElementById("select"); 42 | theme = input.options[input.selectedIndex].value; 43 | cm.setOption("theme", theme.trim().toLowerCase()); 44 | localStorage.setItem("SAVETHEME", input.selectedIndex); 45 | localStorage.setItem("SAVELANG", lang); 46 | localStorage.setItem("SAVECODE", cm.getValue()); 47 | }; 48 | 49 | reset = function () { 50 | localStorage.clear(); 51 | }; 52 | 53 | cm.setValue(JSCODE); 54 | 55 | cm.setSize("auto", window.innerHeight); 56 | 57 | lang = "nodejs-head"; 58 | 59 | $(document).ready(function () { 60 | var co, i, j, l, m, t, temp; 61 | if ((t = localStorage.getItem("SAVETHEME"))) { 62 | document.getElementById("select").selectedIndex = t; 63 | } 64 | cm.on("change", update); 65 | if ((l = localStorage.getItem("SAVELANG"))) { 66 | lang = l; 67 | temp = JSCODE; 68 | i = 1; 69 | j = "js"; 70 | m = "javascript"; 71 | switch (l) { 72 | case "cpython-head": 73 | temp = PYCODE; 74 | i = 2; 75 | j = "py"; 76 | m = "python"; 77 | break; 78 | case "nodejs-head": 79 | temp = JSCODE; 80 | i = 1; 81 | j = "js"; 82 | m = "javascript"; 83 | break; 84 | case "gcc-head": 85 | temp = CPPCODE; 86 | i = 3; 87 | j = "cpp"; 88 | m = "text/x-c++src"; 89 | break; 90 | case "ruby-head": 91 | temp = RBCODE; 92 | i = 4; 93 | j = "rb"; 94 | m = "ruby"; 95 | break; 96 | case "lua-5.4.0": 97 | temp = LUACODE; 98 | i = 5; 99 | j = "lua"; 100 | m = "lua"; 101 | } 102 | if ((co = localStorage.getItem("SAVECODE"))) { 103 | temp = co; 104 | } 105 | $("#tab-" + i).tab("show"); 106 | $("#select-" + j).tab("show"); 107 | cm.setValue(temp); 108 | cm.setOption("mode", m); 109 | } 110 | document.getElementById("msg").innerHTML = "Press 'Run' to run code!"; 111 | $("#select-py").click(function (e) { 112 | e.preventDefault(); 113 | cm.setValue(PYCODE); 114 | cm.setOption("mode", "python"); 115 | lang = "cpython-head"; 116 | update(); 117 | }); 118 | $("#select-js").click(function (e) { 119 | e.preventDefault(); 120 | cm.setValue(JSCODE); 121 | cm.setOption("mode", "javascript"); 122 | lang = "nodejs-head"; 123 | update(); 124 | }); 125 | $("#select-cpp").click(function (e) { 126 | e.preventDefault(); 127 | cm.setValue(CPPCODE); 128 | cm.setOption("mode", "text/x-c++src"); 129 | lang = "gcc-head"; 130 | update(); 131 | }); 132 | $("#select-rb").click(function (e) { 133 | e.preventDefault(); 134 | cm.setValue(RBCODE); 135 | cm.setOption("mode", "ruby"); 136 | lang = "ruby-head"; 137 | update(); 138 | }); 139 | $("#select-lua").click(function (e) { 140 | e.preventDefault(); 141 | cm.setValue(LUACODE); 142 | cm.setOption("mode", "lua"); 143 | lang = "lua-5.4.0"; 144 | update(); 145 | }); 146 | update(); 147 | $("select").on("change", update); 148 | }); 149 | -------------------------------------------------------------------------------- /public/Tools/compiler/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100%; 3 | height: 100%; 4 | max-height: 100%; 5 | margin: 0 auto; 6 | padding: 0; 7 | } 8 | 9 | * { 10 | box-sizing: border-box; 11 | } 12 | 13 | .CodeMirror-linenumber { 14 | padding-right: 10px; 15 | } 16 | 17 | .CodeMirror { 18 | padding-top: 10px; 19 | padding-bottom: 10px; 20 | } 21 | 22 | ::-webkit-scrollbar { 23 | width: 10px; 24 | } 25 | 26 | /* Track */ 27 | ::-webkit-scrollbar-track { 28 | background: #f1f1f1; 29 | } 30 | 31 | /* Handle */ 32 | ::-webkit-scrollbar-thumb { 33 | background: #888; 34 | } 35 | 36 | /* Handle on hover */ 37 | ::-webkit-scrollbar-thumb:hover { 38 | background: #555; 39 | } 40 | -------------------------------------------------------------------------------- /public/Tools/compiler/temp.js: -------------------------------------------------------------------------------- 1 | const JSCODE = 2 | ` 3 | // This is the Node JS template 4 | 5 | function greet(name) { 6 | console.log(\`Hello, \${name}!\`); 7 | } 8 | greet("world"); 9 | `.trim() + "\n"; 10 | 11 | const PYCODE = 12 | ` 13 | # This is the Python template 14 | 15 | def greet(name): 16 | print(f"Hello, {name}!") 17 | 18 | greet("world") 19 | `.trim() + "\n"; 20 | 21 | const CPPCODE = 22 | ` 23 | // This is the C++ template 24 | 25 | #include 26 | 27 | void greet(std::string name) { 28 | std::cout << "Hello, " << name << "!"; 29 | } 30 | 31 | int main() { 32 | greet("world"); 33 | return 0; 34 | } 35 | `.trim() + "\n"; 36 | 37 | const RBCODE = 38 | ` 39 | # This is the Ruby template 40 | 41 | def greet(name) 42 | puts "Hello, #{name}!" 43 | end 44 | 45 | greet('world') 46 | `.trim() + "\n"; 47 | 48 | const LUACODE = 49 | ` 50 | -- This is the Lua template 51 | 52 | function greet(name) 53 | print("Hello, " .. name .. "!") 54 | end 55 | 56 | greet("world") 57 | `.trim() + "\n"; 58 | -------------------------------------------------------------------------------- /public/Tools/dictionary/dictionary.js: -------------------------------------------------------------------------------- 1 | document.addEventListener("keyup", function (e) { 2 | if (e.code == 13 || e.key == "Enter") { 3 | let definitions = document.getElementById("definition-container"); 4 | let word = document.getElementById("word"); 5 | let definition = document.getElementById("result"); 6 | let input = document.getElementById("vocab-search-bar").value; 7 | let meanings; 8 | input = input.trim(); 9 | if (input) { 10 | fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${input}`) 11 | .then((res) => (res.ok ? res.json() : res.json())) 12 | .then((data) => { 13 | if (!data.title) { 14 | word.innerHTML = data[0].word; 15 | definition.innerHTML = data[0].phonetics[0].text; 16 | definitions.innerHTML = ""; 17 | for (let i = 0; i < data[0].meanings.length; i++) { 18 | definitions.innerHTML += `
`; 19 | meanings = document.getElementsByClassName("meaning-container"); 20 | meanings[ 21 | i 22 | ].innerHTML += `

${data[0].meanings[i].partOfSpeech}

`; 23 | for (let j = 0; j < data[0].meanings[i].definitions.length; j++) { 24 | meanings[ 25 | i 26 | ].innerHTML += `

${data[0].meanings[i].definitions[j].definition}

`; 27 | } 28 | } 29 | } else if (data.message) { 30 | word.innerHTML = ""; 31 | definitions.innerHTML = data.message; 32 | definitions.innerHTML = ""; 33 | } 34 | }); 35 | } else { 36 | word.innerHTML = ""; 37 | definition.innerHTML = ""; 38 | definitions.innerHTML = ""; 39 | } 40 | } 41 | }); 42 | -------------------------------------------------------------------------------- /public/Tools/dictionary/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Probox - Dictionary 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 |
23 |

24 | Dictionary 25 |

26 | 39 |
51 |

52 |

53 |
54 |
55 |
56 | 57 | 58 | -------------------------------------------------------------------------------- /public/Tools/dictionary/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | * { 4 | margin: 0 auto; 5 | padding: 0; 6 | box-sizing: border-box; 7 | font-family: Roboto, sans-serif; 8 | } 9 | 10 | body, 11 | html { 12 | background-color: #ffca93; 13 | } 14 | 15 | */ 16 | 17 | input { 18 | font-size: 25px; 19 | } 20 | 21 | input:focus { 22 | outline: none; 23 | } 24 | .centered-elements { 25 | margin: 20px; 26 | } 27 | 28 | #result-container { 29 | background: white; 30 | border-radius: 15px; 31 | border: none; 32 | } 33 | 34 | #word { 35 | margin: 10px; 36 | font-size: 35px; 37 | } 38 | 39 | #definition-container { 40 | word-wrap: break-word; 41 | } 42 | -------------------------------------------------------------------------------- /public/Tools/regex/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Probox - Regex 10 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Regex Templates

25 |
26 |
27 |
28 |

Password

29 |

Password Validation

30 | (?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[!@#$*]) 33 |
34 |
35 | 42 |
43 |
44 |
45 |
46 |

Email

47 |

The regular expression for email

48 | ^[^@ ]+@[^@ ]+\.[^@ \.]{2,}$ 49 |
50 |
51 | 58 |
59 |
60 |
61 |
62 |

Date

63 |

Date Validation (YYYY-MM-DD)

64 | \d{4}-\d{2}-\d{2} 65 |
66 |
67 | 74 |
75 |
76 |
77 |
78 |

Mastercard

79 |

Mastercard Validation

80 | ^(?:5[1–5][0–9]{2}|222[1–9]|22[3–9][0–9]|2[3–6][0–9]{2}|27[01][0–9]|2720)[0–9]{12}$ 83 |
84 |
85 | 92 |
93 |
94 |
95 |
96 |
97 |
98 |

Visa Card

99 |

Visa Credit Card Validation

100 | ^4[0–9]{12}(?:[0–9]{3})?$ 101 |
102 |
103 | 110 |
111 |
112 |
113 |
114 |

IPv4

115 |

IPv4 Address Validator

116 | ^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$ 119 |
120 |
121 | 128 |
129 |
130 |
131 |
132 |

JSON

133 |

JSON Validator & Parser

134 | (?(DEFINE)(?<json>(?>\s*(?&object)\s*|\s*(?&array)\s*))(?<object>(?>\{\s*(?>(?&pair)(?>\s*,\s*(?&pair))*)?\s*\}))(?<pair>(?>(?&STRING)\s*:\s*(?&value)))(?<array>(?>\[\s*(?>(?&value)(?>\s*,\s*(?&value))*)?\s*\]))(?<value>(?>true|false|null|(?&STRING)|(?&NUMBER)|(?&object)|(?&array)))(?<STRING>(?>"(?>\\(?>["\\\/bfnrt]|u[a-fA-F0-9]{4})|[^"\\\0-\x1F\x7F]+)*"))(?<NUMBER>(?>-?(?>0|[1-9][0-9]*)(?>\.[0-9]+)?(?>[eE][+-]?[0-9]+)?)))\A(?&json)\z 137 |
138 |
139 | 146 |
147 |
148 |
149 |
150 |

CSV

151 |

CSV Validation

152 | (?:\s*(?:\"([^\"]*)\"|([^,]+))\s*,?)+? 153 |
154 |
155 | 162 |
163 |
164 |
165 |
166 | 167 | 168 | 169 | 170 | 171 | -------------------------------------------------------------------------------- /public/Tools/regex/index.js: -------------------------------------------------------------------------------- 1 | function copyId(id) { 2 | const copyText = document.getElementById(id); 3 | 4 | var range, selection; 5 | 6 | if (document.body.createTextRange) { 7 | range = document.body.createTextRange(); 8 | range.moveToElementText(copyText); 9 | range.select(); 10 | } else if (window.getSelection) { 11 | selection = window.getSelection(); 12 | range = document.createRange(); 13 | range.selectNodeContents(copyText); 14 | selection.removeAllRanges(); 15 | selection.addRange(range); 16 | } 17 | 18 | try { 19 | document.execCommand("copy"); 20 | alert("Regex Copied!"); 21 | } catch (err) { 22 | alert("Failed to copy regex..."); 23 | } 24 | 25 | if (selection) selection.removeAllRanges(); 26 | } 27 | -------------------------------------------------------------------------------- /public/Tools/shortener/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Probox - Code Shortener 7 | 8 | 12 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |
35 | 36 |
37 |
38 | 39 |
40 | 41 | 42 | -------------------------------------------------------------------------------- /public/Tools/shortener/short.js: -------------------------------------------------------------------------------- 1 | function shorten() { 2 | const code = cm.getValue(); 3 | const result = UglifyJS.minify(code); 4 | if (result.error !== undefined) { 5 | cmdp.setValue(`${result.error}`); 6 | } else { 7 | cmdp.setValue(`${result.code}`); 8 | } 9 | } 10 | 11 | let cm = new CodeMirror.fromTextArea(document.getElementById("shortener-ip"), { 12 | lineNumbers: true, 13 | mode: "javascript", 14 | theme: "dracula", 15 | lineWrapping: true, 16 | scrollbarStyle: "overlay", 17 | autoCloseBrackets: true, 18 | }); 19 | 20 | cm.setValue( 21 | ` 22 | function greet(name) { 23 | console.log("Hello, " + name + "!"); 24 | } 25 | greet("wo" + 'r' + "ld") 26 | `.trim() + "\n" 27 | ); 28 | 29 | cm.setSize("auto", window.innerHeight); 30 | 31 | let cmdp = new CodeMirror.fromTextArea(document.getElementById("shortened"), { 32 | lineNumbers: true, 33 | mode: "javascript", 34 | theme: "dracula", 35 | lineWrapping: true, 36 | scrollbarStyle: "overlay", 37 | autoCloseBrackets: true, 38 | readOnly: true, 39 | }); 40 | 41 | cmdp.setSize("auto", window.innerHeight); 42 | 43 | document.addEventListener("keyup", function (e) { 44 | shorten(); 45 | }); 46 | 47 | shorten(); 48 | -------------------------------------------------------------------------------- /public/Tools/shortener/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100%; 3 | height: 100%; 4 | margin: 0 auto; 5 | padding: 0; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | .CodeMirror-linenumber { 13 | padding-right: 10px; 14 | } 15 | 16 | .CodeMirror { 17 | padding-top: 10px; 18 | padding-bottom: 10px; 19 | } 20 | -------------------------------------------------------------------------------- /public/Tools/stackoverflow/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Probox - stackOverFlow 8 | 9 | 10 | 11 |
12 |
13 |

StackOverFlow

14 | 24 |
25 | 26 |
27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /public/Tools/stackoverflow/stackoverflow.js: -------------------------------------------------------------------------------- 1 | function searchSO(amount = 10, cache = 0) { 2 | let searchBar = document.getElementById("stackoverflow-search-bar"); 3 | 4 | oVal = searchBar.value; 5 | const val = encodeURIComponent(oVal); 6 | fetch( 7 | `https://api.stackexchange.com/2.2/search/advanced?pagesize=${amount}&order=desc&sort=activity&accepted=True&q=${val}&site=stackoverflow` 8 | ).then((v) => 9 | v.json().then((data) => { 10 | if (data.items.length === 0) { 11 | document.getElementById("answers-container").innerHTML = 12 | "No Results found, please use more concise keywords!"; 13 | return; 14 | } 15 | 16 | if (amount >= 100 || cache === data.items.length) { 17 | document.getElementById("Load-More").innerHTML = 18 | "
Sorry, no more results
"; 19 | } else { 20 | document.getElementById( 21 | "Load-More" 22 | ).innerHTML = ``; 25 | } 26 | 27 | const d = data.items; 28 | const x = d.map( 29 | (a) => `${a.title}` 30 | ); 31 | document.getElementById( 32 | "search-results" 33 | ).innerHTML = `Searching Results for ${oVal}:`; 34 | document.getElementById("answers-container").innerHTML = x.join("

"); 35 | }) 36 | ); 37 | } 38 | 39 | document.addEventListener("keyup", function (e) { 40 | if (e.code == 13 || e.key == "Enter") { 41 | searchSO(); 42 | } 43 | }); 44 | -------------------------------------------------------------------------------- /public/Tools/stackoverflow/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #fde99b; 3 | width: 90%; 4 | height: 90vh; 5 | } 6 | 7 | * { 8 | box-sizing: border-box; 9 | font-family: Roboto, sans-serif; 10 | margin: 0 auto; 11 | padding: 0; 12 | } 13 | 14 | #main-searching-container { 15 | position: absolute; 16 | top: 50%; 17 | left: 50%; 18 | transform: translate(-50%, -50%); 19 | } 20 | 21 | #main-title { 22 | font-weight: normal; 23 | line-height: 1.3; 24 | font-size: 3rem; 25 | position: relative; 26 | bottom: 130px; 27 | } 28 | 29 | #stackoverflow-logo { 30 | position: relative; 31 | bottom: 200px; 32 | right: 85px; 33 | } 34 | 35 | #stackoverflow-search-bar { 36 | position: relative; 37 | bottom: 100px; 38 | width: 690px; 39 | height: 70px; 40 | padding: 10px; 41 | border-radius: 15px; 42 | border: none; 43 | font-size: 1em; 44 | } 45 | 46 | input:focus { 47 | outline: none; 48 | } 49 | 50 | #main-title-container { 51 | position: relative; 52 | left: 190px; 53 | } 54 | 55 | #answers-container { 56 | position: absolute; 57 | top: 68%; 58 | left: 30%; 59 | } 60 | 61 | #Load-More { 62 | position: fixed; 63 | bottom: 5px; 64 | margin-top: 10px; 65 | left: 12%; 66 | 67 | } 68 | 69 | .load-more-button { 70 | background: rgba(210, 206, 206, 0.9); 71 | border: 5px solid #D2CECE; 72 | box-sizing: border-box; 73 | border-radius: 15px; 74 | width: 93px; 75 | height: 38px; 76 | } 77 | 78 | #search-results { 79 | position: absolute; 80 | top: 60%; 81 | left: 37.5%; 82 | transform: translate(-50%, -50%); 83 | font-family: Roboto,sans-serif; 84 | font-style: normal; 85 | font-weight: normal; 86 | font-size: 20px; 87 | line-height: 35px; 88 | 89 | 90 | } 91 | 92 | 93 | a { 94 | color: #0075FF; 95 | margin: 20px; 96 | word-wrap: break-word; 97 | } 98 | 99 | 100 | @media only screen and (max-width: 870px) { 101 | #main-title { 102 | font-size: 2rem; 103 | } 104 | 105 | #main-title-container { 106 | position: relative; 107 | left: 160px; 108 | } 109 | 110 | #stackoverflow-search-bar { 111 | width: 500px; 112 | } 113 | 114 | #answers-container { 115 | left: 20%; 116 | } 117 | } 118 | 119 | @media only screen and (max-width: 625px) { 120 | #main-title { 121 | font-size: 1.5rem; 122 | right: 100px; 123 | } 124 | #stackoverflow-search-bar { 125 | width: 300px; 126 | } 127 | #stackoverflow-logo { 128 | display: none; 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /public/Tools/todolist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ProBox - TODO List 7 | 8 | 9 | 10 | 11 | 15 | 16 | 17 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |
27 |
28 |
29 |
30 |

My Todo List

31 |
32 | 37 | 42 |
43 |
44 |
    48 |
  • 49 |
    50 | 55 |
    56 | 57 |
    • 58 |
  • 59 |
    60 | 64 |
    65 | 66 |
    • 67 |
68 |
69 |
70 |
71 | 78 |
79 |
80 |
81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /public/Tools/todolist/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f9f9fa; 3 | } 4 | 5 | .flex { 6 | -webkit-box-flex: 1; 7 | -ms-flex: 1 1 auto; 8 | flex: 1 1 auto; 9 | } 10 | 11 | @media (max-width: 991.98px) { 12 | .padding { 13 | padding: 1.5rem; 14 | } 15 | } 16 | 17 | @media (max-width: 767.98px) { 18 | .padding { 19 | padding: 1rem; 20 | } 21 | } 22 | 23 | .padding { 24 | padding: 5rem; 25 | } 26 | 27 | .card { 28 | box-shadow: none; 29 | -webkit-box-shadow: none; 30 | -moz-box-shadow: none; 31 | -ms-box-shadow: none; 32 | } 33 | 34 | .pl-3, 35 | .px-3 { 36 | padding-left: 1rem !important; 37 | } 38 | 39 | .card { 40 | position: relative; 41 | display: flex; 42 | flex-direction: column; 43 | min-width: 0; 44 | word-wrap: break-word; 45 | background-color: #fff; 46 | background-clip: border-box; 47 | border: 1px solid #d2d2dc; 48 | border-radius: 0; 49 | } 50 | 51 | .pr-3, 52 | .px-3 { 53 | padding-right: 1rem !important; 54 | } 55 | 56 | .card .card-body { 57 | padding: 1.25rem 1.75rem; 58 | } 59 | 60 | .card-body { 61 | flex: 1 1 auto; 62 | padding: 1.25rem; 63 | } 64 | 65 | .card .card-title { 66 | color: #000000; 67 | margin-bottom: 0.625rem; 68 | text-transform: capitalize; 69 | font-size: 0.875rem; 70 | font-weight: 500; 71 | } 72 | 73 | .add-items { 74 | margin-bottom: 1.5rem; 75 | overflow: hidden; 76 | } 77 | 78 | .d-flex { 79 | display: flex !important; 80 | } 81 | 82 | .add-items input[type="text"] { 83 | border-top-right-radius: 0; 84 | border-bottom-right-radius: 0; 85 | width: 100%; 86 | background: transparent; 87 | } 88 | 89 | .form-control { 90 | border: 1px solid #f3f3f3; 91 | font-weight: 400; 92 | font-size: 0.875rem; 93 | } 94 | 95 | .form-control { 96 | display: block; 97 | width: 100%; 98 | padding: 0.875rem 1.375rem; 99 | font-size: 1rem; 100 | line-height: 1; 101 | color: #495057; 102 | background-color: #ffffff; 103 | background-clip: padding-box; 104 | border: 1px solid #ced4da; 105 | border-radius: 2px; 106 | transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 107 | } 108 | 109 | .add-items .btn { 110 | margin-left: 0.5rem; 111 | } 112 | 113 | .btn { 114 | font-size: 0.875rem; 115 | line-height: 1; 116 | font-weight: 400; 117 | padding: 0.7rem 1.5rem; 118 | border-radius: 0.1275rem; 119 | } 120 | 121 | .list-wrapper { 122 | height: 100%; 123 | max-height: 100%; 124 | } 125 | 126 | .add-items { 127 | margin-bottom: 1.5rem; 128 | overflow: hidden; 129 | } 130 | 131 | .add-items input[type="text"] { 132 | border-top-right-radius: 0; 133 | border-bottom-right-radius: 0; 134 | width: 100%; 135 | background: transparent; 136 | } 137 | 138 | .add-items .btn, 139 | .add-items .fc button, 140 | .fc .add-items button, 141 | .add-items .ajax-upload-dragdrop .ajax-file-upload, 142 | .ajax-upload-dragdrop .add-items .ajax-file-upload, 143 | .add-items .swal2-modal .swal2-buttonswrapper .swal2-styled, 144 | .swal2-modal .swal2-buttonswrapper .add-items .swal2-styled, 145 | .add-items .wizard > .actions a, 146 | .wizard > .actions .add-items a { 147 | margin-left: 0.5rem; 148 | } 149 | 150 | .rtl .add-items .btn, 151 | .rtl .add-items .fc button, 152 | .fc .rtl .add-items button, 153 | .rtl .add-items .ajax-upload-dragdrop .ajax-file-upload, 154 | .ajax-upload-dragdrop .rtl .add-items .ajax-file-upload, 155 | .rtl .add-items .swal2-modal .swal2-buttonswrapper .swal2-styled, 156 | .swal2-modal .swal2-buttonswrapper .rtl .add-items .swal2-styled, 157 | .rtl .add-items .wizard > .actions a, 158 | .wizard > .actions .rtl .add-items a { 159 | margin-left: auto; 160 | margin-right: 0.5rem; 161 | } 162 | 163 | .list-wrapper { 164 | height: 100%; 165 | max-height: 100%; 166 | } 167 | 168 | .list-wrapper ul { 169 | padding: 0; 170 | text-align: left; 171 | list-style: none; 172 | margin-bottom: 0; 173 | } 174 | 175 | .list-wrapper ul li { 176 | font-size: 0.9375rem; 177 | padding: 0.4rem 0; 178 | border-bottom: 1px solid #f3f3f3; 179 | } 180 | 181 | .list-wrapper ul li:first-child { 182 | border-bottom: none; 183 | } 184 | 185 | .list-wrapper ul li .form-check { 186 | max-width: 90%; 187 | margin-top: 0.25rem; 188 | margin-bottom: 0.25rem; 189 | } 190 | 191 | .list-wrapper ul li .form-check label:hover { 192 | cursor: pointer; 193 | } 194 | 195 | .list-wrapper input[type="checkbox"] { 196 | margin-right: 15px; 197 | } 198 | 199 | .list-wrapper .remove { 200 | cursor: pointer; 201 | font-size: 1.438rem; 202 | font-weight: 600; 203 | width: 1.25rem; 204 | height: 1.25rem; 205 | line-height: 20px; 206 | text-align: center; 207 | } 208 | 209 | .list-wrapper .completed { 210 | text-decoration: line-through; 211 | text-decoration-color: #3da5f4; 212 | } 213 | 214 | .list-wrapper ul li .form-check { 215 | max-width: 90%; 216 | margin-top: 0.25rem; 217 | margin-bottom: 0.25rem; 218 | } 219 | 220 | .list-wrapper ul li .form-check, 221 | .list-wrapper ul li .form-check .form-check-label, 222 | .email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-name, 223 | .email-wrapper 224 | .mail-sidebar 225 | .menu-bar 226 | .profile-list-item 227 | a 228 | .user 229 | .u-designation, 230 | .email-wrapper .mail-list-container .mail-list .content .sender-name, 231 | .email-wrapper .message-body .attachments-sections ul li .details p.file-name, 232 | .settings-panel .chat-list .list .info p { 233 | text-overflow: ellipsis; 234 | overflow: hidden; 235 | max-width: 100%; 236 | white-space: nowrap; 237 | } 238 | 239 | .form-check { 240 | position: relative; 241 | display: block; 242 | margin-top: 10px; 243 | margin-bottom: 10px; 244 | padding-left: 0; 245 | } 246 | 247 | .list-wrapper ul li .form-check, 248 | .list-wrapper ul li .form-check .form-check-label, 249 | .email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-name, 250 | .email-wrapper 251 | .mail-sidebar 252 | .menu-bar 253 | .profile-list-item 254 | a 255 | .user 256 | .u-designation, 257 | .email-wrapper .mail-list-container .mail-list .content .sender-name, 258 | .email-wrapper .message-body .attachments-sections ul li .details p.file-name, 259 | .settings-panel .chat-list .list .info p { 260 | text-overflow: ellipsis; 261 | overflow: hidden; 262 | max-width: 100%; 263 | white-space: nowrap; 264 | } 265 | 266 | .form-check .form-check-label { 267 | min-height: 18px; 268 | display: block; 269 | margin-left: 1.75rem; 270 | font-size: 0.875rem; 271 | line-height: 1.5; 272 | } 273 | 274 | .form-check-label { 275 | margin-bottom: 0; 276 | } 277 | 278 | .list-wrapper input[type="checkbox"] { 279 | margin-right: 15px; 280 | } 281 | 282 | .form-check .form-check-label input { 283 | position: absolute; 284 | top: 0; 285 | left: 0; 286 | margin-left: 0; 287 | margin-top: 0; 288 | z-index: 1; 289 | cursor: pointer; 290 | opacity: 0; 291 | filter: alpha(opacity=0); 292 | } 293 | 294 | input[type="radio"], 295 | input[type="checkbox"] { 296 | box-sizing: border-box; 297 | padding: 0; 298 | } 299 | 300 | .list-wrapper ul li .form-check, 301 | .list-wrapper ul li .form-check .form-check-label, 302 | .email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user .u-name, 303 | .email-wrapper 304 | .mail-sidebar 305 | .menu-bar 306 | .profile-list-item 307 | a 308 | .user 309 | .u-designation, 310 | .email-wrapper .mail-list-container .mail-list .content .sender-name, 311 | .email-wrapper .message-body .attachments-sections ul li .details p.file-name, 312 | .settings-panel .chat-list .list .info p { 313 | text-overflow: ellipsis; 314 | overflow: hidden; 315 | max-width: 100%; 316 | white-space: nowrap; 317 | } 318 | 319 | .form-check .form-check-label input[type="checkbox"] + .input-helper:before { 320 | content: ""; 321 | width: 18px; 322 | height: 18px; 323 | border-radius: 2px; 324 | border: solid #405189; 325 | border-width: 2px; 326 | -webkit-transition: all; 327 | -moz-transition: all; 328 | -ms-transition: all; 329 | -o-transition: all; 330 | transition: all; 331 | transition-duration: 0s; 332 | -webkit-transition-duration: 250ms; 333 | transition-duration: 250ms; 334 | } 335 | 336 | .form-check .form-check-label input[type="checkbox"] + .input-helper:before, 337 | .form-check .form-check-label input[type="checkbox"] + .input-helper:after { 338 | position: absolute; 339 | top: 0; 340 | left: 0; 341 | } 342 | 343 | .form-check .form-check-label input[type="checkbox"] + .input-helper:after { 344 | -webkit-transition: all; 345 | -moz-transition: all; 346 | -ms-transition: all; 347 | -o-transition: all; 348 | transition: all; 349 | transition-duration: 0s; 350 | -webkit-transition-duration: 250ms; 351 | transition-duration: 250ms; 352 | font-family: Material Design Icons; 353 | opacity: 0; 354 | filter: alpha(opacity=0); 355 | -webkit-transform: scale(0); 356 | -ms-transform: scale(0); 357 | -o-transform: scale(0); 358 | transform: scale(0); 359 | content: "\F12C"; 360 | font-size: 0.9375rem; 361 | font-weight: bold; 362 | color: #ffffff; 363 | } 364 | 365 | .form-check .form-check-label input[type="checkbox"] + .input-helper:before, 366 | .form-check .form-check-label input[type="checkbox"] + .input-helper:after { 367 | position: absolute; 368 | top: 0; 369 | left: 0; 370 | } 371 | 372 | .form-check 373 | .form-check-label 374 | input[type="checkbox"]:checked 375 | + .input-helper:before { 376 | background: #405189; 377 | border-width: 0; 378 | } 379 | 380 | .form-check .form-check-label input[type="checkbox"] + .input-helper:before { 381 | content: ""; 382 | width: 18px; 383 | height: 18px; 384 | border-radius: 2px; 385 | border: solid #405189; 386 | border-width: 2px; 387 | -webkit-transition: all; 388 | -moz-transition: all; 389 | -ms-transition: all; 390 | -o-transition: all; 391 | transition: all; 392 | transition-duration: 0s; 393 | -webkit-transition-duration: 250ms; 394 | transition-duration: 250ms; 395 | } 396 | 397 | .form-check .form-check-label input[type="checkbox"] + .input-helper:after { 398 | font-family: FontAwesome; 399 | content: "\f095"; 400 | display: inline-block; 401 | padding-right: 3px; 402 | vertical-align: middle; 403 | color: #fff; 404 | } 405 | 406 | .text-primary, 407 | .list-wrapper .completed .remove { 408 | color: #405189 !important; 409 | } 410 | 411 | .list-wrapper .remove { 412 | cursor: pointer; 413 | font-size: 1.438rem; 414 | font-weight: 600; 415 | width: 1.25rem; 416 | height: 1.25rem; 417 | line-height: 20px; 418 | text-align: center; 419 | } 420 | 421 | .ml-auto, 422 | .list-wrapper .remove, 423 | .mx-auto { 424 | margin-left: auto !important; 425 | } 426 | 427 | .mdi-close-circle-outline:before { 428 | content: "\F15A"; 429 | } 430 | 431 | .list-wrapper ul li { 432 | font-size: 0.9375rem; 433 | padding: 0.4rem 0; 434 | border-bottom: 1px solid #f3f3f3; 435 | } 436 | 437 | .mdi:before { 438 | font-family: FontAwesome; 439 | content: "×"; 440 | display: inline-block; 441 | padding-right: 3px; 442 | vertical-align: middle; 443 | font-size: 0.756em; 444 | color: #405189; 445 | } 446 | 447 | .list-wrapper ul { 448 | padding: 0; 449 | text-align: left; 450 | list-style: none; 451 | margin-bottom: 0; 452 | } 453 | 454 | .flex-column-reverse { 455 | flex-direction: column-reverse !important; 456 | } 457 | 458 | .d-flex, 459 | .loader-demo-box, 460 | .distribution-chart-legend .distribution-chart, 461 | .distribution-chart-legend .distribution-chart .item, 462 | .list-wrapper ul li, 463 | .email-wrapper .mail-sidebar .menu-bar .profile-list-item a, 464 | .email-wrapper .mail-sidebar .menu-bar .profile-list-item a .user, 465 | .email-wrapper .mail-list-container .mail-list .details, 466 | .email-wrapper .message-body .attachments-sections ul li .thumb, 467 | .email-wrapper .message-body .attachments-sections ul li .details .buttons, 468 | .lightGallery .image-tile .demo-gallery-poster, 469 | .swal2-modal, 470 | .navbar .navbar-menu-wrapper .navbar-nav, 471 | .navbar .navbar-menu-wrapper .navbar-nav .nav-item.nav-profile, 472 | .navbar 473 | .navbar-menu-wrapper 474 | .navbar-nav 475 | .nav-item.dropdown 476 | .navbar-dropdown 477 | .dropdown-item { 478 | display: flex !important; 479 | } 480 | -------------------------------------------------------------------------------- /public/Tools/todolist/todo.js: -------------------------------------------------------------------------------- 1 | (function ($) { 2 | "use strict"; 3 | $(function () { 4 | const Storage = window.localStorage; 5 | var todoListItem = $(".todo-list"); 6 | var todoListInput = $(".todo-list-input"); 7 | document.getElementById("main-list").innerHTML = 8 | Storage.getItem("TODO_HTML") || 9 | document.getElementById("main-list").innerHTML; 10 | $(".todo-list-add-btn").on("click", function (event) { 11 | event.preventDefault(); 12 | 13 | Storage.setItem( 14 | "TODO_HTML", 15 | document.getElementById("main-list").innerHTML 16 | ); 17 | var item = $(this).prevAll(".todo-list-input").val(); 18 | 19 | if (item) { 20 | todoListItem.append( 21 | `
  • 22 |
    27 |
    • ` 28 | ); 29 | todoListInput.val(""); 30 | } 31 | }); 32 | 33 | todoListItem.on("change", ".checkbox", function () { 34 | if ($(this).attr("checked")) { 35 | $(this).removeAttr("checked"); 36 | } else { 37 | $(this).attr("checked", "checked"); 38 | } 39 | 40 | $(this).closest("li").toggleClass("completed"); 41 | Storage.setItem( 42 | "TODO_HTML", 43 | document.getElementById("main-list").innerHTML 44 | ); 45 | }); 46 | 47 | todoListItem.on("click", ".remove", function () { 48 | $(this).parent().remove(); 49 | Storage.setItem( 50 | "TODO_HTML", 51 | document.getElementById("main-list").innerHTML 52 | ); 53 | }); 54 | }); 55 | })(jQuery); 56 | 57 | function resetStorage() { 58 | const Storage = window.localStorage; 59 | Storage.clear(); 60 | const temp = `
  • 61 |
    62 | 67 |
    68 | 69 |
    • 70 |
  • 71 |
    72 | 76 |
    77 | 78 |
    • `; 79 | document.getElementById("main-list").innerHTML = temp; 80 | } 81 | -------------------------------------------------------------------------------- /public/Tools/videoRecorder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Probox - Video Recorder 10 | 11 | 12 | 13 | 14 |

    15 | Notice: This might not work if another app is using the current webcam. 16 |

    17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /public/Tools/videoRecorder/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0 auto; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: Roboto, sans-serif; 6 | font-weight: normal; 7 | } 8 | 9 | body { 10 | background-color: white; 11 | } 12 | 13 | button:focus { 14 | outline: none; 15 | } 16 | 17 | 18 | 19 | #record-btn { 20 | position: absolute; 21 | top: 50%; 22 | right: 10%; 23 | transition: translate(-50%,-50%); 24 | width: 100px; 25 | height: 100px; 26 | background-color: rgba(255,0,0,0.7); 27 | border-radius: 50%; 28 | border: 10px solid rgb(168, 167, 167); 29 | } 30 | 31 | #record-btn:hover { 32 | transition: 0.5s; 33 | background-color: rgb(255, 0, 0); 34 | border: 10px solid rgb(154, 152, 152); 35 | 36 | } 37 | 38 | 39 | video { 40 | position: relative; 41 | top: 50px; 42 | left: 50px; 43 | } 44 | 45 | 46 | p { 47 | color: red; 48 | transform: translate(5%, 2%); 49 | } -------------------------------------------------------------------------------- /public/Tools/videoRecorder/videoRecorder.js: -------------------------------------------------------------------------------- 1 | let isRecording = false; 2 | let videoConfiguration = { 3 | audio: true, 4 | video: { 5 | facingMode: "user", 6 | width: { min: 640, ideal: 1280, max: 1920 }, 7 | height: { min: 480, ideal: 720, max: 1080 } 8 | } 9 | }; 10 | 11 | if (!navigator.mediaDevices) { 12 | navigator.mediaDevices = {}; 13 | navigator.mediaDevices.getUserMedia = function(videoConfiguration) { 14 | let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia; 15 | if (!getUserMedia) { 16 | return Promise.reject(new Error('getUserMedia is not supported in this browser')); 17 | } 18 | return new Promise(function(resolve, reject) { 19 | getUserMedia.call(navigator, videoConfiguration, resolve, reject); 20 | }); 21 | } 22 | } else{ 23 | navigator.mediaDevices.enumerateDevices() 24 | .then(devices => { 25 | devices.forEach(()=>{ 26 | }) 27 | }) 28 | .catch(()=>{ 29 | }) 30 | } 31 | 32 | navigator.mediaDevices.getUserMedia(videoConfiguration) 33 | .then(function(mediaVid) { 34 | let video = document.querySelector('video'); 35 | if ("srcObject" in video) { 36 | video.srcObject = mediaVid; 37 | } else { 38 | video.src = window.URL.createObjectURL(mediaVid); 39 | } 40 | 41 | video.onloadedmetadata = function(evt) { 42 | video.play(); 43 | }; 44 | 45 | let recordButton = document.getElementById('record-btn'); 46 | let vidSave = document.getElementById('recorded-video'); 47 | let mediaRecorder = new MediaRecorder(mediaVid); 48 | let dataStorage = []; 49 | 50 | recordButton.addEventListener('click', (evt)=>{ 51 | if (isRecording) { 52 | mediaRecorder.stop(); 53 | isRecording = false; 54 | recordButton.innerHTML = "Record"; 55 | } else { 56 | mediaRecorder.start(); 57 | isRecording = true; 58 | recordButton.innerHTML = "Stop Record"; 59 | } 60 | }) 61 | 62 | mediaRecorder.ondataavailable = function(evt) { 63 | dataStorage.push(evt.data); 64 | } 65 | mediaRecorder.onstop = (ev)=>{ 66 | let blob = new Blob(dataStorage, {'type':'video/mp4;' }); 67 | dataStorage = []; 68 | let videoURL = window.URL.createObjectURL(blob); 69 | vidSave.src = videoURL; 70 | } 71 | }) 72 | -------------------------------------------------------------------------------- /public/Tools/voiceRecorder/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Probox - Voice Recorder 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 |
    14 | 15 | -------------------------------------------------------------------------------- /public/Tools/voiceRecorder/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: white; 9 | } 10 | 11 | #voice-record-btn { 12 | position: absolute; 13 | top: 50%; 14 | right: 10%; 15 | transition: translate(-50%,-50%); 16 | width: 100px; 17 | height: 100px; 18 | border-radius:50%; 19 | background-color: rgba(255,0,0,0.7); 20 | border-radius: 50%; 21 | border: 10px solid rgb(168, 167, 167); 22 | } 23 | 24 | #voice-record-btn:hover { 25 | transition: 0.5s; 26 | background-color: rgb(255, 0, 0); 27 | border: 10px solid rgb(154, 152, 152); 28 | 29 | } 30 | 31 | #voice-recorder-container { 32 | position: absolute; 33 | top: 55%; 34 | right: 50%; 35 | transition: translate(-50%, -50%); 36 | } -------------------------------------------------------------------------------- /public/Tools/voiceRecorder/voiceRecorder.js: -------------------------------------------------------------------------------- 1 | let datas = []; 2 | let isRecording = false; 3 | let recordVoiceBtn = document.getElementById("voice-record-btn"); 4 | let audioContainer = document.getElementById("voice-recorder-container"); 5 | let micDevice = navigator.mediaDevices.getUserMedia( 6 | { 7 | audio:true 8 | } 9 | ); 10 | 11 | micDevice.then( (stream) => { 12 | let voiceRecorder = new MediaRecorder(stream); 13 | voiceRecorder.ondataavailable = (evt) => { 14 | datas.push(evt.data); 15 | if(voiceRecorder.state == "inactive") { 16 | let blob = new Blob(datas,{type:"audio/webm"}); 17 | datas = []; 18 | let newAudio = document.createElement("audio"); 19 | newAudio.setAttribute("controls", "controls"); 20 | newAudio.innerHTML = ``; 21 | audioContainer.innerHTML = ""; 22 | audioContainer.appendChild(newAudio); 23 | } 24 | }; 25 | recordVoiceBtn.addEventListener("click", () => { 26 | if(isRecording) { 27 | voiceRecorder.stop(); 28 | isRecording = false; 29 | recordVoiceBtn.innerHTML = "Record"; 30 | 31 | } else { 32 | voiceRecorder.start(100); 33 | isRecording = true; 34 | recordVoiceBtn.innerHTML = "Stop"; 35 | } 36 | 37 | 38 | }) 39 | }); 40 | -------------------------------------------------------------------------------- /public/Tools/whiteboard/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ProBox - Whiteboard 7 | 8 | 12 | 13 | 14 | 15 |
    16 | 17 | 18 | 19 |
    20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /public/Tools/whiteboard/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0 auto; 3 | padding: 0; 4 | box-sizing:border-box; 5 | overflow:hidden; 6 | font-family: Roboto, san-serif; 7 | } 8 | 9 | body,html { 10 | background-color: white; 11 | } 12 | 13 | canvas { 14 | border-radius: 20px; 15 | } 16 | 17 | .btn { 18 | color: black; 19 | background: white; 20 | border: 2px solid black; 21 | } 22 | 23 | .btn:hover { 24 | background-color: #d9d9d9; 25 | border: 2px solid black; 26 | color: black; 27 | } 28 | 29 | #drawing-tools { 30 | left: 50%; 31 | transform: translate(-50%, 0); 32 | } 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /public/Tools/whiteboard/whiteboard.js: -------------------------------------------------------------------------------- 1 | var canvas = document.querySelector("#canvas"); 2 | var ctx = canvas.getContext("2d"); 3 | var penColor = "black"; 4 | var pencilBtn = document.getElementById("pencil"); 5 | var eraserBtn = document.getElementById("eraser"); 6 | var resetBtn = document.getElementById("reset"); 7 | //var whiteBoardWindowCloserBtn = document.getElementById("whiteboard-window-closer"); 8 | var dataUrl; 9 | var penWidth=10; 10 | 11 | 12 | function setWidthAndHeight() { 13 | canvas.height = window.innerHeight - 20; 14 | canvas.width = window.innerWidth - 20; 15 | } 16 | 17 | window.addEventListener("load", () => { 18 | try { 19 | dataUrl = localStorage.getItem("drawing"); 20 | var dataImg = new Image; 21 | dataImg.src = dataUrl; 22 | dataImg.onload = () => { 23 | ctx.drawImage(dataImg, 0, 0); 24 | } 25 | } 26 | catch {} 27 | setWidthAndHeight(); 28 | let isPainting = false; 29 | function paint(evt) { 30 | 31 | if(!isPainting) return; 32 | ctx.lineWidth = penWidth; 33 | ctx.lineCap = "round"; 34 | ctx.strokeStyle = penColor; 35 | ctx.lineTo(evt.clientX, evt.clientY-50); 36 | ctx.stroke(); 37 | }; 38 | canvas.addEventListener("mousedown",(evt)=>{isPainting = true;paint(evt);}); 39 | canvas.addEventListener("mouseup",()=>{ 40 | isPainting = false; 41 | ctx.beginPath(); 42 | localStorage.setItem("drawing", canvas.toDataURL()); 43 | }); 44 | canvas.addEventListener("mousemove",paint) 45 | pencilBtn.addEventListener("click", () => {penColor = "black"; penWidth=10;}); 46 | eraserBtn.addEventListener("click", () => {penColor = "white"; penWidth=15;}); 47 | resetBtn.addEventListener("click", () => { 48 | ctx.clearRect(0,0,canvas.width, canvas.height) 49 | localStorage.removeItem("drawing"); 50 | }); 51 | }); 52 | 53 | window.addEventListener("resize", () => { 54 | // try 55 | // {localStorage.removeItem("drawing");} 56 | // catch{} 57 | localStorage.setItem("drawing", canvas.toDataURL()); 58 | setWidthAndHeight(); 59 | dataUrl = localStorage.getItem("drawing"); 60 | var dataImg = new Image; 61 | dataImg.src = dataUrl; 62 | dataImg.onload = () => { 63 | ctx.drawImage(dataImg, 0, 0); 64 | } 65 | }); 66 | -------------------------------------------------------------------------------- /public/assets/css/Highlight-Clean.css: -------------------------------------------------------------------------------- 1 | .highlight-clean { 2 | color: #313437; 3 | background-color: #fff; 4 | padding: 50px 0; 5 | } 6 | 7 | .highlight-clean p { 8 | color: #7d8285; 9 | } 10 | 11 | .highlight-clean h2 { 12 | font-weight: bold; 13 | margin-bottom: 25px; 14 | line-height: 1.5; 15 | padding-top: 0; 16 | margin-top: 0; 17 | color: inherit; 18 | } 19 | 20 | .highlight-clean .intro { 21 | font-size: 16px; 22 | max-width: 500px; 23 | margin: 0 auto 25px; 24 | } 25 | 26 | .highlight-clean .buttons { 27 | text-align: center; 28 | } 29 | 30 | .highlight-clean .buttons .btn { 31 | padding: 16px 32px; 32 | margin: 6px; 33 | border: none; 34 | background: none; 35 | box-shadow: none; 36 | text-shadow: none; 37 | opacity: 0.9; 38 | text-transform: uppercase; 39 | font-weight: bold; 40 | font-size: 13px; 41 | letter-spacing: 0.4px; 42 | line-height: 1; 43 | outline: none; 44 | background-color: #ddd; 45 | } 46 | 47 | .highlight-clean .buttons .btn:hover { 48 | opacity: 1; 49 | } 50 | 51 | .highlight-clean .buttons .btn:active { 52 | transform: translateY(1px); 53 | } 54 | 55 | .highlight-clean .buttons .btn-primary { 56 | background-color: #055ada; 57 | color: #fff; 58 | } 59 | -------------------------------------------------------------------------------- /public/assets/css/Navigation-Clean.css: -------------------------------------------------------------------------------- 1 | .navigation-clean { 2 | background: #fff; 3 | padding-top: 0.75rem; 4 | padding-bottom: 0.75rem; 5 | color: #333; 6 | border-radius: 0; 7 | box-shadow: none; 8 | border: none; 9 | margin-bottom: 0; 10 | } 11 | 12 | @media (min-width: 768px) { 13 | .navigation-clean { 14 | padding-top: 1rem; 15 | padding-bottom: 1rem; 16 | } 17 | } 18 | 19 | .navigation-clean .navbar-brand { 20 | font-weight: bold; 21 | color: inherit; 22 | } 23 | 24 | .navigation-clean .navbar-brand:hover { 25 | color: #222; 26 | } 27 | 28 | .navigation-clean.navbar-dark .navbar-brand:hover { 29 | color: #f0f0f0; 30 | } 31 | 32 | .navigation-clean .navbar-brand img { 33 | height: 100%; 34 | display: inline-block; 35 | margin-right: 10px; 36 | width: auto; 37 | } 38 | 39 | .navigation-clean .navbar-toggler { 40 | border-color: #ddd; 41 | } 42 | 43 | .navigation-clean .navbar-toggler:hover, 44 | .navigation-clean .navbar-toggler:focus { 45 | background: none; 46 | } 47 | 48 | .navigation-clean.navbar-dark .navbar-toggler { 49 | border-color: #555; 50 | } 51 | 52 | .navigation-clean .navbar-toggler { 53 | color: #888; 54 | } 55 | 56 | .navigation-clean.navbar-dark .navbar-toggler { 57 | color: #eee; 58 | } 59 | 60 | .navigation-clean .navbar-collapse, 61 | .navigation-clean .form-inline { 62 | border-top-color: #ddd; 63 | } 64 | 65 | .navigation-clean.navbar-dark .navbar-collapse, 66 | .navigation-clean.navbar-dark .form-inline { 67 | border-top-color: #333; 68 | } 69 | 70 | .navigation-clean .navbar-nav > .active > a, 71 | .navigation-clean .navbar-nav > .show > a { 72 | background: none; 73 | box-shadow: none; 74 | } 75 | 76 | .navigation-clean.navbar-light .navbar-nav .nav-link.active, 77 | .navigation-clean.navbar-light .navbar-nav .nav-link.active:focus, 78 | .navigation-clean.navbar-light .navbar-nav .nav-link.active:hover { 79 | color: #8f8f8f; 80 | box-shadow: none; 81 | background: none; 82 | pointer-events: none; 83 | } 84 | 85 | .navigation-clean.navbar .navbar-nav .nav-link { 86 | padding-left: 18px; 87 | padding-right: 18px; 88 | } 89 | 90 | .navigation-clean.navbar-light .navbar-nav .nav-link { 91 | color: #465765; 92 | } 93 | 94 | .navigation-clean.navbar-light .navbar-nav .nav-link:focus, 95 | .navigation-clean.navbar-light .navbar-nav .nav-link:hover { 96 | color: #37434d !important; 97 | background-color: transparent; 98 | } 99 | 100 | .navigation-clean .navbar-nav > li > .dropdown-menu { 101 | margin-top: -5px; 102 | box-shadow: none; 103 | background-color: #fff; 104 | border-radius: 2px; 105 | } 106 | 107 | @media (min-width: 768px) { 108 | .navigation-clean .navbar-nav .show .dropdown-menu { 109 | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 110 | } 111 | } 112 | 113 | @media (max-width: 767px) { 114 | .navigation-clean .navbar-nav .show .dropdown-menu .dropdown-item { 115 | color: #37434d; 116 | padding-top: 0.8rem; 117 | padding-bottom: 0.8rem; 118 | line-height: 1; 119 | } 120 | } 121 | 122 | .navigation-clean .dropdown-menu .dropdown-item:focus, 123 | .navigation-clean .dropdown-menu .dropdown-item { 124 | line-height: 2; 125 | color: #37434d; 126 | } 127 | 128 | .navigation-clean .dropdown-menu .dropdown-item:focus, 129 | .navigation-clean .dropdown-menu .dropdown-item:hover { 130 | background: #eee; 131 | color: inherit; 132 | } 133 | 134 | .navigation-clean.navbar-dark { 135 | background-color: #1f2021; 136 | color: #fff; 137 | } 138 | 139 | .navigation-clean.navbar-dark .navbar-nav a.active, 140 | .navigation-clean.navbar-dark .navbar-nav a.active:focus, 141 | .navigation-clean.navbar-dark .navbar-nav a.active:hover { 142 | color: #8f8f8f; 143 | box-shadow: none; 144 | background: none; 145 | pointer-events: none; 146 | } 147 | 148 | .navigation-clean.navbar-dark .navbar-nav .nav-link { 149 | color: #dfe8ee; 150 | } 151 | 152 | .navigation-clean.navbar-dark .navbar-nav .nav-link:focus, 153 | .navigation-clean.navbar-dark .navbar-nav .nav-link:hover { 154 | color: #fff; 155 | background-color: transparent; 156 | } 157 | 158 | .navigation-clean.navbar-dark .navbar-nav > li > .dropdown-menu { 159 | background-color: #1f2021; 160 | } 161 | 162 | .navigation-clean.navbar-dark .dropdown-menu .dropdown-item:focus, 163 | .navigation-clean.navbar-dark .dropdown-menu .dropdown-item { 164 | color: #f2f5f8; 165 | } 166 | 167 | .navigation-clean.navbar-dark .dropdown-menu .dropdown-item:focus, 168 | .navigation-clean.navbar-dark .dropdown-menu .dropdown-item:hover { 169 | background: #363739; 170 | } 171 | 172 | @media (max-width: 767px) { 173 | .navigation-clean.navbar-dark 174 | .navbar-nav 175 | .show 176 | .dropdown-menu 177 | .dropdown-item { 178 | color: #fff; 179 | } 180 | } 181 | -------------------------------------------------------------------------------- /public/assets/css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | font-family: Roboto, sans-serif; 4 | margin: 0 auto; 5 | } 6 | 7 | html { 8 | overflow-x: hidden; 9 | overflow-y: scroll; 10 | } 11 | 12 | ul, 13 | li { 14 | list-style-type: none; 15 | } 16 | 17 | body { 18 | margin: 0; 19 | width: 100%; 20 | height: 80vh; 21 | } 22 | 23 | ::-webkit-scrollbar { 24 | width: 0px; 25 | background: transparent; 26 | } 27 | 28 | navbar { 29 | width: 100%; 30 | height: 30px; 31 | } 32 | 33 | .nav-element { 34 | font-family: Roboto, sans-serif; 35 | position: relative; 36 | top: 10px; 37 | font-size: 30px; 38 | color: #3f3d56; 39 | font-weight: normal; 40 | line-height: 40px; 41 | letter-spacing: 0em; 42 | z-index: 9999; 43 | } 44 | 45 | header * { 46 | padding: 0; 47 | margin: 0; 48 | } 49 | 50 | .main-title { 51 | text-align: left; 52 | position: absolute; 53 | left: 20px; 54 | margin-top: 10px; 55 | } 56 | 57 | .nav-right { 58 | float: right; 59 | list-style: none; 60 | padding: 10px 20px 20px; 61 | width: auto; 62 | height: auto; 63 | margin-top: 0px; 64 | } 65 | 66 | .navbar-right-elements { 67 | margin-right: 10px; 68 | margin-left: 20px; 69 | } 70 | 71 | .nav-right-hover:hover { 72 | background: rgba(255, 148, 77, 0.3); 73 | border-radius: 7px; 74 | transition: 0.4s; 75 | cursor: pointer; 76 | } 77 | 78 | .nav-right-hover.opened { 79 | border-radius: 7px; 80 | transition: 0.4s; 81 | cursor: pointer; 82 | background: rgba(255, 148, 77, 0.7); 83 | } 84 | 85 | #color-picker:hover { 86 | cursor: pointer; 87 | transition: 0.3s; 88 | box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.25); 89 | } 90 | 91 | #color-editor { 92 | position: fixed; 93 | right: 10px; 94 | top: 90px; 95 | border-radius: 20px; 96 | width: 140px; 97 | height: 40px; 98 | border: solid 10px white; 99 | background-color: white; 100 | color: black; 101 | display: none; 102 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); 103 | z-index: 999999; 104 | } 105 | 106 | input:focus { 107 | outline: none; 108 | } 109 | 110 | #code-board { 111 | position: absolute; 112 | right: 80px; 113 | top: 170px; 114 | filter: drop-shadow(0px 4px 115px rgba(0, 0, 0, 0.25)); 115 | } 116 | 117 | #hot-balloon { 118 | position: absolute; 119 | top: -80px; 120 | left: 250px; 121 | filter: drop-shadow(0px 4px 250px rgba(0, 0, 0, 0.25)); 122 | } 123 | 124 | .wave { 125 | position: absolute; 126 | bottom: 0; 127 | left: 0; 128 | width: 100%; 129 | height: 100px; 130 | background: url(../img/wave.png); 131 | background-size: 1000px 100px; 132 | } 133 | 134 | .wave.wave1 { 135 | animation: waving 30s linear infinite; 136 | z-index: 1000; 137 | opacity: 1; 138 | -webkit-animation-delay: 0s; 139 | -moz-animation-delay: 0s; 140 | -ms-animation-delay: 0s; 141 | -o-animation-delay: 0s; 142 | animation-delay: 0s; 143 | bottom: 0; 144 | } 145 | 146 | .wave.wave2 { 147 | animation: waving2 15s linear infinite; 148 | z-index: 999; 149 | opacity: 0.5; 150 | -webkit-animation-delay: -5s; 151 | -moz-animation-delay: -5s; 152 | -ms-animation-delay: -5s; 153 | -o-animation-delay: -5s; 154 | animation-delay: -5s; 155 | bottom: 10px; 156 | } 157 | 158 | .wave.wave3 { 159 | animation: waving2 5s linear infinite; 160 | z-index: 998; 161 | opacity: 0.2; 162 | -webkit-animation-delay: -2s; 163 | -moz-animation-delay: -2s; 164 | -ms-animation-delay: -2s; 165 | -o-animation-delay: -2s; 166 | animation-delay: -2s; 167 | bottom: 15px; 168 | } 169 | 170 | .wave.wave4 { 171 | animation: waving2 15s linear infinite; 172 | z-index: 997; 173 | opacity: 0.7; 174 | -webkit-animation-delay: -5s; 175 | -moz-animation-delay: -5s; 176 | -ms-animation-delay: -5s; 177 | -o-animation-delay: -5s; 178 | animation-delay: -5s; 179 | bottom: 20px; 180 | } 181 | 182 | @-webkit-keyframes waving { 183 | 0% { 184 | background-position-x: 0; 185 | } 186 | 100% { 187 | background-position-x: 1000px; 188 | } 189 | } 190 | 191 | @-o-keyframes waving { 192 | 0% { 193 | background-position-x: 0; 194 | } 195 | 100% { 196 | background-position-x: 1000px; 197 | } 198 | } 199 | 200 | @-moz-keyframes waving { 201 | 0% { 202 | background-position-x: 0; 203 | } 204 | 100% { 205 | background-position-x: 1000px; 206 | } 207 | } 208 | 209 | @keyframes waving { 210 | 0% { 211 | background-position-x: 0; 212 | } 213 | 100% { 214 | background-position-x: 1000px; 215 | } 216 | } 217 | 218 | @keyframes waving2 { 219 | 0% { 220 | background-position-x: 0; 221 | } 222 | 100% { 223 | background-position-x: -1000px; 224 | } 225 | } 226 | 227 | @-webkit-keyframes waving2 { 228 | 0% { 229 | background-position-x: 0; 230 | } 231 | 100% { 232 | background-position-x: -1000px; 233 | } 234 | } 235 | 236 | @-o-keyframes waving2 { 237 | 0% { 238 | background-position-x: 0; 239 | } 240 | 100% { 241 | background-position-x: -1000px; 242 | } 243 | } 244 | 245 | @-moz-keyframes waving2 { 246 | 0% { 247 | background-position-x: 0; 248 | } 249 | 100% { 250 | background-position-x: -1000px; 251 | } 252 | } 253 | 254 | #page-title-container { 255 | position: absolute; 256 | top: 280px; 257 | left: 17%; 258 | } 259 | 260 | #title-text-container { 261 | margin-bottom: 80px; 262 | position: relative; 263 | right: 50px; 264 | } 265 | 266 | .title-text { 267 | font-family: Roboto, sans-serif; 268 | font-style: normal; 269 | font-weight: normal; 270 | font-size: 50px; 271 | 272 | color: rgba(63, 61, 86, 0.8); 273 | } 274 | 275 | @keyframes blinkTextCursor { 276 | from { 277 | border-right-color: orange; 278 | } 279 | to { 280 | border-right-color: transparent; 281 | } 282 | } 283 | 284 | #title-text-container h2 { 285 | white-space: nowrap; 286 | font-family: Roboto, sans-serif; 287 | overflow: hidden; 288 | letter-spacing: 0.1rem; 289 | border-right: 0.15em solid orange; 290 | } 291 | 292 | h2.text1 { 293 | width: 5.5em; 294 | -webkit-animation: type 2s steps(40, end); 295 | animation: type 2s steps(40, end), 296 | blinkTextCursor 500ms steps(44) infinite normal; 297 | -webkit-animation-fill-mode: forwards; 298 | animation-fill-mode: forwards; 299 | } 300 | 301 | h2.text2 { 302 | width: 6.4em; 303 | opacity: 0; 304 | -webkit-animation: type2 5s steps(30, end), 305 | blink 0.5s step-end infinite alternate; 306 | animation: type2 2s steps(30, end), blink 0.5s step-end infinite alternate, 307 | blinkTextCursor 500ms steps(44) infinite normal; 308 | -webkit-animation-delay: 2s; 309 | animation-delay: 2s; 310 | -webkit-animation-fill-mode: forwards; 311 | animation-fill-mode: forwards; 312 | } 313 | 314 | @keyframes type { 315 | 0% { 316 | width: 0; 317 | } 318 | 99.9% { 319 | border-right: 0.15em solid orange; 320 | } 321 | 100% { 322 | border: none; 323 | } 324 | } 325 | 326 | @-webkit-keyframes type { 327 | 0% { 328 | width: 0; 329 | } 330 | 99.9% { 331 | border-right: 0.15em solid orange; 332 | } 333 | 100% { 334 | border: none; 335 | } 336 | } 337 | 338 | @keyframes type2 { 339 | 0% { 340 | width: 0; 341 | } 342 | 1% { 343 | opacity: 1; 344 | } 345 | 99.9% { 346 | border-right: 0.15em solid orange; 347 | } 348 | 100% { 349 | opacity: 1; 350 | border: none; 351 | } 352 | } 353 | 354 | @-webkit-keyframes type2 { 355 | 0% { 356 | width: 0; 357 | } 358 | 1% { 359 | opacity: 1; 360 | } 361 | 99.9% { 362 | border-right: 0.15em solid orange; 363 | } 364 | 100% { 365 | opacity: 1; 366 | border: none; 367 | } 368 | } 369 | 370 | #tryOutToolsButton { 371 | background: linear-gradient( 372 | 270deg, 373 | #feae79 0%, 374 | rgba(255, 151, 134, 0.979681) 15.44%, 375 | #fcb484 100% 376 | ); 377 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 378 | border-radius: 15px; 379 | width: 220px; 380 | height: 80px; 381 | border: none; 382 | font-size: 25px; 383 | line-height: 41px; 384 | color: #ffffff; 385 | } 386 | 387 | #tryOutToolsButton:focus { 388 | outline: none; 389 | } 390 | 391 | #tryOutToolsButton:hover { 392 | cursor: pointer; 393 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 394 | } 395 | 396 | #tools-tab, 397 | #assistant-tab, 398 | #contact-tab { 399 | display: none; 400 | } 401 | 402 | #nav-tools-searcher-container { 403 | position: relative; 404 | top: 100px; 405 | background: linear-gradient(to right top, #ff9966, #ffbb99); 406 | border-radius: 2px; 407 | height: 70px; 408 | width: 100%; 409 | } 410 | 411 | #tools-searcher-container { 412 | position: absolute; 413 | right: 0; 414 | } 415 | 416 | #tools-searcher { 417 | position: relative; 418 | bottom: 7px; 419 | right: 15px; 420 | width: auto; 421 | height: 41px; 422 | border-radius: 5px; 423 | background: #ffffff; 424 | border: none; 425 | padding-left: 10px; 426 | box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); 427 | } 428 | 429 | #tools-searcher:focus { 430 | outline: none; 431 | } 432 | 433 | .search-bar { 434 | position: relative; 435 | top: 10px; 436 | right: 5px; 437 | } 438 | 439 | .orange-underscore { 440 | position: absolute; 441 | left: 10px; 442 | width: 138px; 443 | height: 5px; 444 | background: #ffa64d; 445 | border-radius: 2px; 446 | } 447 | 448 | #general-tools-title { 449 | position: relative; 450 | top: 200px; 451 | left: 20px; 452 | } 453 | 454 | #general-tools-text-title { 455 | position: relative; 456 | bottom: 17px; 457 | } 458 | 459 | #general-tools-underscore { 460 | position: absolute; 461 | left: 1px; 462 | } 463 | 464 | #general-tools-container { 465 | position: relative; 466 | top: 100px; 467 | } 468 | 469 | .general-tool { 470 | z-index: 999; 471 | position: relative; 472 | top: 50px; 473 | padding: 0; 474 | margin: 20px 0 20px 0; 475 | display: inline; 476 | width: 200px; 477 | } 478 | 479 | .tools-icon { 480 | position: relative; 481 | bottom: 2px; 482 | display: inline; 483 | float: left; 484 | margin: 0; 485 | padding: 0; 486 | } 487 | 488 | .tools-container { 489 | display: flex; 490 | flex-wrap: wrap; 491 | } 492 | 493 | .general-tool { 494 | display: inline; 495 | float: left; 496 | margin: 30px; 497 | } 498 | 499 | .tools-icon:hover { 500 | transition: 0.3s; 501 | background-color: transparent; 502 | padding: 10px; 503 | border-radius: 10px; 504 | } 505 | 506 | .tools-title { 507 | position: relative; 508 | top: 80px; 509 | right: 80px; 510 | display: inline; 511 | color: grey; 512 | float: left; 513 | margin: 0; 514 | padding: 0; 515 | } 516 | 517 | #person-on-wave { 518 | position: absolute; 519 | right: 260px; 520 | top: 86px; 521 | z-index: 9; 522 | } 523 | 524 | iframe { 525 | z-index: 9999; 526 | position: fixed; 527 | top: 50%; 528 | left: 50%; 529 | transform: translate(-50%, -50%); 530 | width: 90%; 531 | height: 90vh; 532 | border-radius: 10px; 533 | } 534 | 535 | #calculator-window { 536 | width: 1000px; 537 | } 538 | 539 | .window-closer { 540 | z-index: 99999; 541 | position: fixed; 542 | left: 45px; 543 | top: 43px; 544 | border-radius: 50%; 545 | height: 30px; 546 | width: 30px; 547 | border: none; 548 | font-size: 20px; 549 | } 550 | 551 | .window-closer:hover { 552 | transition: 0.5s; 553 | background-color: #bfbfbf; 554 | } 555 | 556 | .window-top-left-icon { 557 | position: relative; 558 | bottom: 40px; 559 | right: 5px; 560 | } 561 | 562 | #calculator-window-closer { 563 | position: fixed; 564 | left: 20%; 565 | top: 43px; 566 | } 567 | 568 | #contact-tab-main-container { 569 | display: flex; 570 | justify-content: center; 571 | align-items: center; 572 | min-height: 100vh; 573 | width: 100%; 574 | } 575 | 576 | #developers-container { 577 | display: flex; 578 | justify-content: center; 579 | align-items: center; 580 | flex-wrap: wrap; 581 | padding: 40px 0 40px 0; 582 | margin-top: 0px; 583 | } 584 | 585 | .contact-card { 586 | position: relative; 587 | width: 370px; 588 | height: 490px; 589 | box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), 590 | inset -5px -5px 5px rgba(255, 255, 255, 0.5), 591 | 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5); 592 | border-radius: 15px; 593 | margin: 50px; 594 | } 595 | 596 | .about-content { 597 | position: absolute; 598 | top: 20px; 599 | left: 20px; 600 | right: 20px; 601 | bottom: 20px; 602 | background: white; 603 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); 604 | border-radius: 15px; 605 | padding: 20px; 606 | text-align: center; 607 | transition: 0.5s; 608 | } 609 | 610 | .contact-card:hover .about-content { 611 | transform: translateY(-50px); 612 | box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); 613 | background: linear-gradient(to right top, #ff9966, #ffbb99); 614 | } 615 | 616 | .contact-card:hover h2 { 617 | color: white; 618 | } 619 | 620 | .contact-card:hover p { 621 | color: white; 622 | } 623 | 624 | .about-content h2 { 625 | font-size: 1.5em; 626 | color: #777; 627 | z-index: 1; 628 | transition: 0.5s; 629 | margin: 20px; 630 | } 631 | 632 | .about-content p { 633 | font-size: 1.2em; 634 | font-weight: 300; 635 | color: #777; 636 | z-index: 1; 637 | transition: 0.5s; 638 | } 639 | 640 | .about-content .github-link { 641 | text-decoration: none; 642 | position: relative; 643 | display: inline-block; 644 | padding: 15px 25px 15px 25px; 645 | background: #4dc3ff; 646 | margin-top: 15px; 647 | border-radius: 20px; 648 | color: #fff; 649 | font-weight: 400; 650 | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.02); 651 | } 652 | 653 | .other-links { 654 | color: #0075ff; 655 | } 656 | 657 | @media only screen and (max-width: 720px) { 658 | .nav-element { 659 | font-size: 22px; 660 | } 661 | } 662 | 663 | @media only screen and (max-width: 200px) { 664 | * { 665 | display: none; 666 | } 667 | } 668 | 669 | @media only screen and (max-width: 1000px) { 670 | .skylight-menu { 671 | display: none; 672 | } 673 | } 674 | 675 | @media only screen and (max-width: 560px) { 676 | .nav-element { 677 | font-size: 18px; 678 | } 679 | } 680 | 681 | 682 | @media only screen and (max-width: 1200px) { 683 | #code-board { 684 | position: fixed; 685 | width: 700px; 686 | height: 360px; 687 | right: 40px; 688 | } 689 | 690 | #person-on-wave { 691 | display:none; 692 | } 693 | } 694 | 695 | @media only screen and (max-width: 647px) { 696 | .nav-element { 697 | font-size: 13px; 698 | } 699 | } 700 | 701 | @media only screen and (max-width: 500px) { 702 | .nav-right { 703 | padding: 10px 5px 10px; 704 | } 705 | } 706 | 707 | @media only screen and (max-height: 693px) { 708 | #wave { 709 | display: none; 710 | } 711 | } 712 | 713 | @media only screen and (max-width: 1640px) { 714 | #hot-balloon { 715 | display: none; 716 | } 717 | } 718 | @media only screen and (max-height: 750px) { 719 | .wave { 720 | position: absolute; 721 | bottom: 0; 722 | left: 0; 723 | width: 100%; 724 | height: 0px; 725 | background: url(../img/wave.png); 726 | background-size: 1000px 0px; 727 | } 728 | } 729 | 730 | @media only screen and (max-width: 1570px) { 731 | #calculator-window-closer { 732 | position: fixed; 733 | left: 15%; 734 | top: 43px; 735 | } 736 | } 737 | 738 | @media only screen and (max-width: 1355px) { 739 | #calculator-window-closer { 740 | position: fixed; 741 | left: 10%; 742 | top: 43px; 743 | } 744 | } 745 | 746 | @media only screen and (max-width: 1204px) { 747 | #calculator-window-closer { 748 | position: fixed; 749 | left: 5%; 750 | top: 43px; 751 | } 752 | } 753 | 754 | @media only screen and (max-width: 1105px) { 755 | #code-board {display:none;} 756 | #title-text-container { 757 | left: 20%; 758 | } 759 | 760 | #tryOutToolsButton { 761 | position: absolute; 762 | left: 22%; 763 | } 764 | } 765 | 766 | 767 | #list { 768 | font-size: 1.5em; 769 | margin-right: 10px; 770 | margin-top: 10px; 771 | padding: 10px; 772 | border: 2px solid rgba(0, 0, 0, 0.2); 773 | background-color: white; 774 | border-radius: 10px; 775 | filter: drop-shadow(0px 4px 1px rgba(0, 0, 0, 0.25)); 776 | z-index: 99999999999999; 777 | } 778 | 779 | .list-tools { 780 | display: list-item; 781 | z-index: 99999999999; 782 | } 783 | -------------------------------------------------------------------------------- /public/assets/fonts/FontAwesome.otf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TWT-Code-Jam-FAST/Probox/6b9c1f517e87e9222390f2725e7908318cae66c5/public/assets/fonts/FontAwesome.otf -------------------------------------------------------------------------------- /public/assets/fonts/font-awesome.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome 3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) 4 | */@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-fw{width:1.28571429em;text-align:center}.fa-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.fa-ul>li{position:relative}.fa-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em;text-align:center}.fa-li.fa-lg{left:-1.85714286em}.fa-border{padding:.2em .25em .15em;border:solid .08em #eee;border-radius:.1em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left{margin-right:.3em}.fa.fa-pull-right{margin-left:.3em}.pull-right{float:right}.pull-left{float:left}.fa.pull-left{margin-right:.3em}.fa.pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);-ms-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);-ms-transform:scale(1, -1);transform:scale(1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical{filter:none}.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:middle}.fa-stack-1x,.fa-stack-2x{position:absolute;left:0;width:100%;text-align:center}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}.fa-th:before{content:"\f00a"}.fa-th-list:before{content:"\f00b"}.fa-check:before{content:"\f00c"}.fa-remove:before,.fa-close:before,.fa-times:before{content:"\f00d"}.fa-search-plus:before{content:"\f00e"}.fa-search-minus:before{content:"\f010"}.fa-power-off:before{content:"\f011"}.fa-signal:before{content:"\f012"}.fa-gear:before,.fa-cog:before{content:"\f013"}.fa-trash-o:before{content:"\f014"}.fa-home:before{content:"\f015"}.fa-file-o:before{content:"\f016"}.fa-clock-o:before{content:"\f017"}.fa-road:before{content:"\f018"}.fa-download:before{content:"\f019"}.fa-arrow-circle-o-down:before{content:"\f01a"}.fa-arrow-circle-o-up:before{content:"\f01b"}.fa-inbox:before{content:"\f01c"}.fa-play-circle-o:before{content:"\f01d"}.fa-rotate-right:before,.fa-repeat:before{content:"\f01e"}.fa-refresh:before{content:"\f021"}.fa-list-alt:before{content:"\f022"}.fa-lock:before{content:"\f023"}.fa-flag:before{content:"\f024"}.fa-headphones:before{content:"\f025"}.fa-volume-off:before{content:"\f026"}.fa-volume-down:before{content:"\f027"}.fa-volume-up:before{content:"\f028"}.fa-qrcode:before{content:"\f029"}.fa-barcode:before{content:"\f02a"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-book:before{content:"\f02d"}.fa-bookmark:before{content:"\f02e"}.fa-print:before{content:"\f02f"}.fa-camera:before{content:"\f030"}.fa-font:before{content:"\f031"}.fa-bold:before{content:"\f032"}.fa-italic:before{content:"\f033"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-align-left:before{content:"\f036"}.fa-align-center:before{content:"\f037"}.fa-align-right:before{content:"\f038"}.fa-align-justify:before{content:"\f039"}.fa-list:before{content:"\f03a"}.fa-dedent:before,.fa-outdent:before{content:"\f03b"}.fa-indent:before{content:"\f03c"}.fa-video-camera:before{content:"\f03d"}.fa-photo:before,.fa-image:before,.fa-picture-o:before{content:"\f03e"}.fa-pencil:before{content:"\f040"}.fa-map-marker:before{content:"\f041"}.fa-adjust:before{content:"\f042"}.fa-tint:before{content:"\f043"}.fa-edit:before,.fa-pencil-square-o:before{content:"\f044"}.fa-share-square-o:before{content:"\f045"}.fa-check-square-o:before{content:"\f046"}.fa-arrows:before{content:"\f047"}.fa-step-backward:before{content:"\f048"}.fa-fast-backward:before{content:"\f049"}.fa-backward:before{content:"\f04a"}.fa-play:before{content:"\f04b"}.fa-pause:before{content:"\f04c"}.fa-stop:before{content:"\f04d"}.fa-forward:before{content:"\f04e"}.fa-fast-forward:before{content:"\f050"}.fa-step-forward:before{content:"\f051"}.fa-eject:before{content:"\f052"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-plus-circle:before{content:"\f055"}.fa-minus-circle:before{content:"\f056"}.fa-times-circle:before{content:"\f057"}.fa-check-circle:before{content:"\f058"}.fa-question-circle:before{content:"\f059"}.fa-info-circle:before{content:"\f05a"}.fa-crosshairs:before{content:"\f05b"}.fa-times-circle-o:before{content:"\f05c"}.fa-check-circle-o:before{content:"\f05d"}.fa-ban:before{content:"\f05e"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrow-down:before{content:"\f063"}.fa-mail-forward:before,.fa-share:before{content:"\f064"}.fa-expand:before{content:"\f065"}.fa-compress:before{content:"\f066"}.fa-plus:before{content:"\f067"}.fa-minus:before{content:"\f068"}.fa-asterisk:before{content:"\f069"}.fa-exclamation-circle:before{content:"\f06a"}.fa-gift:before{content:"\f06b"}.fa-leaf:before{content:"\f06c"}.fa-fire:before{content:"\f06d"}.fa-eye:before{content:"\f06e"}.fa-eye-slash:before{content:"\f070"}.fa-warning:before,.fa-exclamation-triangle:before{content:"\f071"}.fa-plane:before{content:"\f072"}.fa-calendar:before{content:"\f073"}.fa-random:before{content:"\f074"}.fa-comment:before{content:"\f075"}.fa-magnet:before{content:"\f076"}.fa-chevron-up:before{content:"\f077"}.fa-chevron-down:before{content:"\f078"}.fa-retweet:before{content:"\f079"}.fa-shopping-cart:before{content:"\f07a"}.fa-folder:before{content:"\f07b"}.fa-folder-open:before{content:"\f07c"}.fa-arrows-v:before{content:"\f07d"}.fa-arrows-h:before{content:"\f07e"}.fa-bar-chart-o:before,.fa-bar-chart:before{content:"\f080"}.fa-twitter-square:before{content:"\f081"}.fa-facebook-square:before{content:"\f082"}.fa-camera-retro:before{content:"\f083"}.fa-key:before{content:"\f084"}.fa-gears:before,.fa-cogs:before{content:"\f085"}.fa-comments:before{content:"\f086"}.fa-thumbs-o-up:before{content:"\f087"}.fa-thumbs-o-down:before{content:"\f088"}.fa-star-half:before{content:"\f089"}.fa-heart-o:before{content:"\f08a"}.fa-sign-out:before{content:"\f08b"}.fa-linkedin-square:before{content:"\f08c"}.fa-thumb-tack:before{content:"\f08d"}.fa-external-link:before{content:"\f08e"}.fa-sign-in:before{content:"\f090"}.fa-trophy:before{content:"\f091"}.fa-github-square:before{content:"\f092"}.fa-upload:before{content:"\f093"}.fa-lemon-o:before{content:"\f094"}.fa-phone:before{content:"\f095"}.fa-square-o:before{content:"\f096"}.fa-bookmark-o:before{content:"\f097"}.fa-phone-square:before{content:"\f098"}.fa-twitter:before{content:"\f099"}.fa-facebook-f:before,.fa-facebook:before{content:"\f09a"}.fa-github:before{content:"\f09b"}.fa-unlock:before{content:"\f09c"}.fa-credit-card:before{content:"\f09d"}.fa-feed:before,.fa-rss:before{content:"\f09e"}.fa-hdd-o:before{content:"\f0a0"}.fa-bullhorn:before{content:"\f0a1"}.fa-bell:before{content:"\f0f3"}.fa-certificate:before{content:"\f0a3"}.fa-hand-o-right:before{content:"\f0a4"}.fa-hand-o-left:before{content:"\f0a5"}.fa-hand-o-up:before{content:"\f0a6"}.fa-hand-o-down:before{content:"\f0a7"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-globe:before{content:"\f0ac"}.fa-wrench:before{content:"\f0ad"}.fa-tasks:before{content:"\f0ae"}.fa-filter:before{content:"\f0b0"}.fa-briefcase:before{content:"\f0b1"}.fa-arrows-alt:before{content:"\f0b2"}.fa-group:before,.fa-users:before{content:"\f0c0"}.fa-chain:before,.fa-link:before{content:"\f0c1"}.fa-cloud:before{content:"\f0c2"}.fa-flask:before{content:"\f0c3"}.fa-cut:before,.fa-scissors:before{content:"\f0c4"}.fa-copy:before,.fa-files-o:before{content:"\f0c5"}.fa-paperclip:before{content:"\f0c6"}.fa-save:before,.fa-floppy-o:before{content:"\f0c7"}.fa-square:before{content:"\f0c8"}.fa-navicon:before,.fa-reorder:before,.fa-bars:before{content:"\f0c9"}.fa-list-ul:before{content:"\f0ca"}.fa-list-ol:before{content:"\f0cb"}.fa-strikethrough:before{content:"\f0cc"}.fa-underline:before{content:"\f0cd"}.fa-table:before{content:"\f0ce"}.fa-magic:before{content:"\f0d0"}.fa-truck:before{content:"\f0d1"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-square:before{content:"\f0d3"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-plus:before{content:"\f0d5"}.fa-money:before{content:"\f0d6"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-up:before{content:"\f0d8"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-columns:before{content:"\f0db"}.fa-unsorted:before,.fa-sort:before{content:"\f0dc"}.fa-sort-down:before,.fa-sort-desc:before{content:"\f0dd"}.fa-sort-up:before,.fa-sort-asc:before{content:"\f0de"}.fa-envelope:before{content:"\f0e0"}.fa-linkedin:before{content:"\f0e1"}.fa-rotate-left:before,.fa-undo:before{content:"\f0e2"}.fa-legal:before,.fa-gavel:before{content:"\f0e3"}.fa-dashboard:before,.fa-tachometer:before{content:"\f0e4"}.fa-comment-o:before{content:"\f0e5"}.fa-comments-o:before{content:"\f0e6"}.fa-flash:before,.fa-bolt:before{content:"\f0e7"}.fa-sitemap:before{content:"\f0e8"}.fa-umbrella:before{content:"\f0e9"}.fa-paste:before,.fa-clipboard:before{content:"\f0ea"}.fa-lightbulb-o:before{content:"\f0eb"}.fa-exchange:before{content:"\f0ec"}.fa-cloud-download:before{content:"\f0ed"}.fa-cloud-upload:before{content:"\f0ee"}.fa-user-md:before{content:"\f0f0"}.fa-stethoscope:before{content:"\f0f1"}.fa-suitcase:before{content:"\f0f2"}.fa-bell-o:before{content:"\f0a2"}.fa-coffee:before{content:"\f0f4"}.fa-cutlery:before{content:"\f0f5"}.fa-file-text-o:before{content:"\f0f6"}.fa-building-o:before{content:"\f0f7"}.fa-hospital-o:before{content:"\f0f8"}.fa-ambulance:before{content:"\f0f9"}.fa-medkit:before{content:"\f0fa"}.fa-fighter-jet:before{content:"\f0fb"}.fa-beer:before{content:"\f0fc"}.fa-h-square:before{content:"\f0fd"}.fa-plus-square:before{content:"\f0fe"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angle-down:before{content:"\f107"}.fa-desktop:before{content:"\f108"}.fa-laptop:before{content:"\f109"}.fa-tablet:before{content:"\f10a"}.fa-mobile-phone:before,.fa-mobile:before{content:"\f10b"}.fa-circle-o:before{content:"\f10c"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-spinner:before{content:"\f110"}.fa-circle:before{content:"\f111"}.fa-mail-reply:before,.fa-reply:before{content:"\f112"}.fa-github-alt:before{content:"\f113"}.fa-folder-o:before{content:"\f114"}.fa-folder-open-o:before{content:"\f115"}.fa-smile-o:before{content:"\f118"}.fa-frown-o:before{content:"\f119"}.fa-meh-o:before{content:"\f11a"}.fa-gamepad:before{content:"\f11b"}.fa-keyboard-o:before{content:"\f11c"}.fa-flag-o:before{content:"\f11d"}.fa-flag-checkered:before{content:"\f11e"}.fa-terminal:before{content:"\f120"}.fa-code:before{content:"\f121"}.fa-mail-reply-all:before,.fa-reply-all:before{content:"\f122"}.fa-star-half-empty:before,.fa-star-half-full:before,.fa-star-half-o:before{content:"\f123"}.fa-location-arrow:before{content:"\f124"}.fa-crop:before{content:"\f125"}.fa-code-fork:before{content:"\f126"}.fa-unlink:before,.fa-chain-broken:before{content:"\f127"}.fa-question:before{content:"\f128"}.fa-info:before{content:"\f129"}.fa-exclamation:before{content:"\f12a"}.fa-superscript:before{content:"\f12b"}.fa-subscript:before{content:"\f12c"}.fa-eraser:before{content:"\f12d"}.fa-puzzle-piece:before{content:"\f12e"}.fa-microphone:before{content:"\f130"}.fa-microphone-slash:before{content:"\f131"}.fa-shield:before{content:"\f132"}.fa-calendar-o:before{content:"\f133"}.fa-fire-extinguisher:before{content:"\f134"}.fa-rocket:before{content:"\f135"}.fa-maxcdn:before{content:"\f136"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-html5:before{content:"\f13b"}.fa-css3:before{content:"\f13c"}.fa-anchor:before{content:"\f13d"}.fa-unlock-alt:before{content:"\f13e"}.fa-bullseye:before{content:"\f140"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-rss-square:before{content:"\f143"}.fa-play-circle:before{content:"\f144"}.fa-ticket:before{content:"\f145"}.fa-minus-square:before{content:"\f146"}.fa-minus-square-o:before{content:"\f147"}.fa-level-up:before{content:"\f148"}.fa-level-down:before{content:"\f149"}.fa-check-square:before{content:"\f14a"}.fa-pencil-square:before{content:"\f14b"}.fa-external-link-square:before{content:"\f14c"}.fa-share-square:before{content:"\f14d"}.fa-compass:before{content:"\f14e"}.fa-toggle-down:before,.fa-caret-square-o-down:before{content:"\f150"}.fa-toggle-up:before,.fa-caret-square-o-up:before{content:"\f151"}.fa-toggle-right:before,.fa-caret-square-o-right:before{content:"\f152"}.fa-euro:before,.fa-eur:before{content:"\f153"}.fa-gbp:before{content:"\f154"}.fa-dollar:before,.fa-usd:before{content:"\f155"}.fa-rupee:before,.fa-inr:before{content:"\f156"}.fa-cny:before,.fa-rmb:before,.fa-yen:before,.fa-jpy:before{content:"\f157"}.fa-ruble:before,.fa-rouble:before,.fa-rub:before{content:"\f158"}.fa-won:before,.fa-krw:before{content:"\f159"}.fa-bitcoin:before,.fa-btc:before{content:"\f15a"}.fa-file:before{content:"\f15b"}.fa-file-text:before{content:"\f15c"}.fa-sort-alpha-asc:before{content:"\f15d"}.fa-sort-alpha-desc:before{content:"\f15e"}.fa-sort-amount-asc:before{content:"\f160"}.fa-sort-amount-desc:before{content:"\f161"}.fa-sort-numeric-asc:before{content:"\f162"}.fa-sort-numeric-desc:before{content:"\f163"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbs-down:before{content:"\f165"}.fa-youtube-square:before{content:"\f166"}.fa-youtube:before{content:"\f167"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-youtube-play:before{content:"\f16a"}.fa-dropbox:before{content:"\f16b"}.fa-stack-overflow:before{content:"\f16c"}.fa-instagram:before{content:"\f16d"}.fa-flickr:before{content:"\f16e"}.fa-adn:before{content:"\f170"}.fa-bitbucket:before{content:"\f171"}.fa-bitbucket-square:before{content:"\f172"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-long-arrow-down:before{content:"\f175"}.fa-long-arrow-up:before{content:"\f176"}.fa-long-arrow-left:before{content:"\f177"}.fa-long-arrow-right:before{content:"\f178"}.fa-apple:before{content:"\f179"}.fa-windows:before{content:"\f17a"}.fa-android:before{content:"\f17b"}.fa-linux:before{content:"\f17c"}.fa-dribbble:before{content:"\f17d"}.fa-skype:before{content:"\f17e"}.fa-foursquare:before{content:"\f180"}.fa-trello:before{content:"\f181"}.fa-female:before{content:"\f182"}.fa-male:before{content:"\f183"}.fa-gittip:before,.fa-gratipay:before{content:"\f184"}.fa-sun-o:before{content:"\f185"}.fa-moon-o:before{content:"\f186"}.fa-archive:before{content:"\f187"}.fa-bug:before{content:"\f188"}.fa-vk:before{content:"\f189"}.fa-weibo:before{content:"\f18a"}.fa-renren:before{content:"\f18b"}.fa-pagelines:before{content:"\f18c"}.fa-stack-exchange:before{content:"\f18d"}.fa-arrow-circle-o-right:before{content:"\f18e"}.fa-arrow-circle-o-left:before{content:"\f190"}.fa-toggle-left:before,.fa-caret-square-o-left:before{content:"\f191"}.fa-dot-circle-o:before{content:"\f192"}.fa-wheelchair:before{content:"\f193"}.fa-vimeo-square:before{content:"\f194"}.fa-turkish-lira:before,.fa-try:before{content:"\f195"}.fa-plus-square-o:before{content:"\f196"}.fa-space-shuttle:before{content:"\f197"}.fa-slack:before{content:"\f198"}.fa-envelope-square:before{content:"\f199"}.fa-wordpress:before{content:"\f19a"}.fa-openid:before{content:"\f19b"}.fa-institution:before,.fa-bank:before,.fa-university:before{content:"\f19c"}.fa-mortar-board:before,.fa-graduation-cap:before{content:"\f19d"}.fa-yahoo:before{content:"\f19e"}.fa-google:before{content:"\f1a0"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-square:before{content:"\f1a2"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-stumbleupon:before{content:"\f1a4"}.fa-delicious:before{content:"\f1a5"}.fa-digg:before{content:"\f1a6"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-drupal:before{content:"\f1a9"}.fa-joomla:before{content:"\f1aa"}.fa-language:before{content:"\f1ab"}.fa-fax:before{content:"\f1ac"}.fa-building:before{content:"\f1ad"}.fa-child:before{content:"\f1ae"}.fa-paw:before{content:"\f1b0"}.fa-spoon:before{content:"\f1b1"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-recycle:before{content:"\f1b8"}.fa-automobile:before,.fa-car:before{content:"\f1b9"}.fa-cab:before,.fa-taxi:before{content:"\f1ba"}.fa-tree:before{content:"\f1bb"}.fa-spotify:before{content:"\f1bc"}.fa-deviantart:before{content:"\f1bd"}.fa-soundcloud:before{content:"\f1be"}.fa-database:before{content:"\f1c0"}.fa-file-pdf-o:before{content:"\f1c1"}.fa-file-word-o:before{content:"\f1c2"}.fa-file-excel-o:before{content:"\f1c3"}.fa-file-powerpoint-o:before{content:"\f1c4"}.fa-file-photo-o:before,.fa-file-picture-o:before,.fa-file-image-o:before{content:"\f1c5"}.fa-file-zip-o:before,.fa-file-archive-o:before{content:"\f1c6"}.fa-file-sound-o:before,.fa-file-audio-o:before{content:"\f1c7"}.fa-file-movie-o:before,.fa-file-video-o:before{content:"\f1c8"}.fa-file-code-o:before{content:"\f1c9"}.fa-vine:before{content:"\f1ca"}.fa-codepen:before{content:"\f1cb"}.fa-jsfiddle:before{content:"\f1cc"}.fa-life-bouy:before,.fa-life-buoy:before,.fa-life-saver:before,.fa-support:before,.fa-life-ring:before{content:"\f1cd"}.fa-circle-o-notch:before{content:"\f1ce"}.fa-ra:before,.fa-resistance:before,.fa-rebel:before{content:"\f1d0"}.fa-ge:before,.fa-empire:before{content:"\f1d1"}.fa-git-square:before{content:"\f1d2"}.fa-git:before{content:"\f1d3"}.fa-y-combinator-square:before,.fa-yc-square:before,.fa-hacker-news:before{content:"\f1d4"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-qq:before{content:"\f1d6"}.fa-wechat:before,.fa-weixin:before{content:"\f1d7"}.fa-send:before,.fa-paper-plane:before{content:"\f1d8"}.fa-send-o:before,.fa-paper-plane-o:before{content:"\f1d9"}.fa-history:before{content:"\f1da"}.fa-circle-thin:before{content:"\f1db"}.fa-header:before{content:"\f1dc"}.fa-paragraph:before{content:"\f1dd"}.fa-sliders:before{content:"\f1de"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-bomb:before{content:"\f1e2"}.fa-soccer-ball-o:before,.fa-futbol-o:before{content:"\f1e3"}.fa-tty:before{content:"\f1e4"}.fa-binoculars:before{content:"\f1e5"}.fa-plug:before{content:"\f1e6"}.fa-slideshare:before{content:"\f1e7"}.fa-twitch:before{content:"\f1e8"}.fa-yelp:before{content:"\f1e9"}.fa-newspaper-o:before{content:"\f1ea"}.fa-wifi:before{content:"\f1eb"}.fa-calculator:before{content:"\f1ec"}.fa-paypal:before{content:"\f1ed"}.fa-google-wallet:before{content:"\f1ee"}.fa-cc-visa:before{content:"\f1f0"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-bell-slash:before{content:"\f1f6"}.fa-bell-slash-o:before{content:"\f1f7"}.fa-trash:before{content:"\f1f8"}.fa-copyright:before{content:"\f1f9"}.fa-at:before{content:"\f1fa"}.fa-eyedropper:before{content:"\f1fb"}.fa-paint-brush:before{content:"\f1fc"}.fa-birthday-cake:before{content:"\f1fd"}.fa-area-chart:before{content:"\f1fe"}.fa-pie-chart:before{content:"\f200"}.fa-line-chart:before{content:"\f201"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-bicycle:before{content:"\f206"}.fa-bus:before{content:"\f207"}.fa-ioxhost:before{content:"\f208"}.fa-angellist:before{content:"\f209"}.fa-cc:before{content:"\f20a"}.fa-shekel:before,.fa-sheqel:before,.fa-ils:before{content:"\f20b"}.fa-meanpath:before{content:"\f20c"}.fa-buysellads:before{content:"\f20d"}.fa-connectdevelop:before{content:"\f20e"}.fa-dashcube:before{content:"\f210"}.fa-forumbee:before{content:"\f211"}.fa-leanpub:before{content:"\f212"}.fa-sellsy:before{content:"\f213"}.fa-shirtsinbulk:before{content:"\f214"}.fa-simplybuilt:before{content:"\f215"}.fa-skyatlas:before{content:"\f216"}.fa-cart-plus:before{content:"\f217"}.fa-cart-arrow-down:before{content:"\f218"}.fa-diamond:before{content:"\f219"}.fa-ship:before{content:"\f21a"}.fa-user-secret:before{content:"\f21b"}.fa-motorcycle:before{content:"\f21c"}.fa-street-view:before{content:"\f21d"}.fa-heartbeat:before{content:"\f21e"}.fa-venus:before{content:"\f221"}.fa-mars:before{content:"\f222"}.fa-mercury:before{content:"\f223"}.fa-intersex:before,.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-venus-double:before{content:"\f226"}.fa-mars-double:before{content:"\f227"}.fa-venus-mars:before{content:"\f228"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-neuter:before{content:"\f22c"}.fa-genderless:before{content:"\f22d"}.fa-facebook-official:before{content:"\f230"}.fa-pinterest-p:before{content:"\f231"}.fa-whatsapp:before{content:"\f232"}.fa-server:before{content:"\f233"}.fa-user-plus:before{content:"\f234"}.fa-user-times:before{content:"\f235"}.fa-hotel:before,.fa-bed:before{content:"\f236"}.fa-viacoin:before{content:"\f237"}.fa-train:before{content:"\f238"}.fa-subway:before{content:"\f239"}.fa-medium:before{content:"\f23a"}.fa-yc:before,.fa-y-combinator:before{content:"\f23b"}.fa-optin-monster:before{content:"\f23c"}.fa-opencart:before{content:"\f23d"}.fa-expeditedssl:before{content:"\f23e"}.fa-battery-4:before,.fa-battery:before,.fa-battery-full:before{content:"\f240"}.fa-battery-3:before,.fa-battery-three-quarters:before{content:"\f241"}.fa-battery-2:before,.fa-battery-half:before{content:"\f242"}.fa-battery-1:before,.fa-battery-quarter:before{content:"\f243"}.fa-battery-0:before,.fa-battery-empty:before{content:"\f244"}.fa-mouse-pointer:before{content:"\f245"}.fa-i-cursor:before{content:"\f246"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-sticky-note:before{content:"\f249"}.fa-sticky-note-o:before{content:"\f24a"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-diners-club:before{content:"\f24c"}.fa-clone:before{content:"\f24d"}.fa-balance-scale:before{content:"\f24e"}.fa-hourglass-o:before{content:"\f250"}.fa-hourglass-1:before,.fa-hourglass-start:before{content:"\f251"}.fa-hourglass-2:before,.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-3:before,.fa-hourglass-end:before{content:"\f253"}.fa-hourglass:before{content:"\f254"}.fa-hand-grab-o:before,.fa-hand-rock-o:before{content:"\f255"}.fa-hand-stop-o:before,.fa-hand-paper-o:before{content:"\f256"}.fa-hand-scissors-o:before{content:"\f257"}.fa-hand-lizard-o:before{content:"\f258"}.fa-hand-spock-o:before{content:"\f259"}.fa-hand-pointer-o:before{content:"\f25a"}.fa-hand-peace-o:before{content:"\f25b"}.fa-trademark:before{content:"\f25c"}.fa-registered:before{content:"\f25d"}.fa-creative-commons:before{content:"\f25e"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-tripadvisor:before{content:"\f262"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-get-pocket:before{content:"\f265"}.fa-wikipedia-w:before{content:"\f266"}.fa-safari:before{content:"\f267"}.fa-chrome:before{content:"\f268"}.fa-firefox:before{content:"\f269"}.fa-opera:before{content:"\f26a"}.fa-internet-explorer:before{content:"\f26b"}.fa-tv:before,.fa-television:before{content:"\f26c"}.fa-contao:before{content:"\f26d"}.fa-500px:before{content:"\f26e"}.fa-amazon:before{content:"\f270"}.fa-calendar-plus-o:before{content:"\f271"}.fa-calendar-minus-o:before{content:"\f272"}.fa-calendar-times-o:before{content:"\f273"}.fa-calendar-check-o:before{content:"\f274"}.fa-industry:before{content:"\f275"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-map-o:before{content:"\f278"}.fa-map:before{content:"\f279"}.fa-commenting:before{content:"\f27a"}.fa-commenting-o:before{content:"\f27b"}.fa-houzz:before{content:"\f27c"}.fa-vimeo:before{content:"\f27d"}.fa-black-tie:before{content:"\f27e"}.fa-fonticons:before{content:"\f280"}.fa-reddit-alien:before{content:"\f281"}.fa-edge:before{content:"\f282"}.fa-credit-card-alt:before{content:"\f283"}.fa-codiepie:before{content:"\f284"}.fa-modx:before{content:"\f285"}.fa-fort-awesome:before{content:"\f286"}.fa-usb:before{content:"\f287"}.fa-product-hunt:before{content:"\f288"}.fa-mixcloud:before{content:"\f289"}.fa-scribd:before{content:"\f28a"}.fa-pause-circle:before{content:"\f28b"}.fa-pause-circle-o:before{content:"\f28c"}.fa-stop-circle:before{content:"\f28d"}.fa-stop-circle-o:before{content:"\f28e"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-hashtag:before{content:"\f292"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-percent:before{content:"\f295"}.fa-gitlab:before{content:"\f296"}.fa-wpbeginner:before{content:"\f297"}.fa-wpforms:before{content:"\f298"}.fa-envira:before{content:"\f299"}.fa-universal-access:before{content:"\f29a"}.fa-wheelchair-alt:before{content:"\f29b"}.fa-question-circle-o:before{content:"\f29c"}.fa-blind:before{content:"\f29d"}.fa-audio-description:before{content:"\f29e"}.fa-volume-control-phone:before{content:"\f2a0"}.fa-braille:before{content:"\f2a1"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asl-interpreting:before,.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-deafness:before,.fa-hard-of-hearing:before,.fa-deaf:before{content:"\f2a4"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-signing:before,.fa-sign-language:before{content:"\f2a7"}.fa-low-vision:before{content:"\f2a8"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-pied-piper:before{content:"\f2ae"}.fa-first-order:before{content:"\f2b0"}.fa-yoast:before{content:"\f2b1"}.fa-themeisle:before{content:"\f2b2"}.fa-google-plus-circle:before,.fa-google-plus-official:before{content:"\f2b3"}.fa-fa:before,.fa-font-awesome:before{content:"\f2b4"}.fa-handshake-o:before{content:"\f2b5"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-o:before{content:"\f2b7"}.fa-linode:before{content:"\f2b8"}.fa-address-book:before{content:"\f2b9"}.fa-address-book-o:before{content:"\f2ba"}.fa-vcard:before,.fa-address-card:before{content:"\f2bb"}.fa-vcard-o:before,.fa-address-card-o:before{content:"\f2bc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-circle-o:before{content:"\f2be"}.fa-user-o:before{content:"\f2c0"}.fa-id-badge:before{content:"\f2c1"}.fa-drivers-license:before,.fa-id-card:before{content:"\f2c2"}.fa-drivers-license-o:before,.fa-id-card-o:before{content:"\f2c3"}.fa-quora:before{content:"\f2c4"}.fa-free-code-camp:before{content:"\f2c5"}.fa-telegram:before{content:"\f2c6"}.fa-thermometer-4:before,.fa-thermometer:before,.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-3:before,.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-thermometer-2:before,.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-1:before,.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-0:before,.fa-thermometer-empty:before{content:"\f2cb"}.fa-shower:before{content:"\f2cc"}.fa-bathtub:before,.fa-s15:before,.fa-bath:before{content:"\f2cd"}.fa-podcast:before{content:"\f2ce"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-times-rectangle:before,.fa-window-close:before{content:"\f2d3"}.fa-times-rectangle-o:before,.fa-window-close-o:before{content:"\f2d4"}.fa-bandcamp:before{content:"\f2d5"}.fa-grav:before{content:"\f2d6"}.fa-etsy:before{content:"\f2d7"}.fa-imdb:before{content:"\f2d8"}.fa-ravelry:before{content:"\f2d9"}.fa-eercast:before{content:"\f2da"}.fa-microchip:before{content:"\f2db"}.fa-snowflake-o:before{content:"\f2dc"}.fa-superpowers:before{content:"\f2dd"}.fa-wpexplorer:before{content:"\f2de"}.fa-meetup:before{content:"\f2e0"}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto} 5 | -------------------------------------------------------------------------------- /public/assets/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TWT-Code-Jam-FAST/Probox/6b9c1f517e87e9222390f2725e7908318cae66c5/public/assets/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /public/assets/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TWT-Code-Jam-FAST/Probox/6b9c1f517e87e9222390f2725e7908318cae66c5/public/assets/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /public/assets/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TWT-Code-Jam-FAST/Probox/6b9c1f517e87e9222390f2725e7908318cae66c5/public/assets/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /public/assets/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TWT-Code-Jam-FAST/Probox/6b9c1f517e87e9222390f2725e7908318cae66c5/public/assets/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /public/assets/img/wave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TWT-Code-Jam-FAST/Probox/6b9c1f517e87e9222390f2725e7908318cae66c5/public/assets/img/wave.png -------------------------------------------------------------------------------- /public/assets/js/navbar.js: -------------------------------------------------------------------------------- 1 | colorPickerIcon = document.getElementById("color-picker"); 2 | colorPickerInput = document.getElementById("color-editor"); 3 | 4 | colorPickerIcon.addEventListener("click", function () { 5 | colorPickerInput.style.display = "inline"; 6 | }); 7 | 8 | document.addEventListener("click", (e) => { 9 | if ( 10 | !e.target.matches(".nav-element") && 11 | !e.target.matches(".color-input") && 12 | !e.target.matches("rect") 13 | ) { 14 | colorPickerInput.style.display = "none"; 15 | colorPickerInput.value = ""; 16 | } 17 | }); 18 | 19 | document.addEventListener("keyup", function (e) { 20 | if (e.code == 13 || e.key == "Enter") { 21 | localStorage.setItem("backgroundColor", colorPickerInput.value); 22 | document.body.style.backgroundColor = localStorage.getItem( 23 | "backgroundColor" 24 | ); 25 | } 26 | }); 27 | 28 | document.body.style.backgroundColor = localStorage.getItem("backgroundColor"); 29 | -------------------------------------------------------------------------------- /public/assets/js/swing.js: -------------------------------------------------------------------------------- 1 | let cssAnimation; 2 | let keyFramesBrowserPrefixes = ["-webkit-", "-o-", "-moz-", ""]; 3 | let skylighterElements = ["skylight1", "skylight2", "skylight3"]; 4 | 5 | for (let i in keyFramesBrowserPrefixes) { 6 | cssAnimation = 7 | "@" + 8 | keyFramesBrowserPrefixes[i] + 9 | "keyframes swing {" + 10 | "20% {" + 11 | keyFramesBrowserPrefixes[i] + 12 | "transform: rotate(15deg);}" + 13 | "40% {" + 14 | keyFramesBrowserPrefixes[i] + 15 | "transform: rotate(-10deg);}" + 16 | "60% {" + 17 | keyFramesBrowserPrefixes[i] + 18 | "transform: rotate(5deg);}" + 19 | "80% {" + 20 | keyFramesBrowserPrefixes[i] + 21 | "transform: rotate(-5deg);}" + 22 | "100% {" + 23 | keyFramesBrowserPrefixes[i] + 24 | "transform: rotate(0deg); }}"; 25 | cssAnimation = document.createTextNode(cssAnimation); 26 | document.getElementsByTagName("style")[0].appendChild(cssAnimation); 27 | } 28 | 29 | for (let j of skylighterElements) { 30 | cssAnimation = 31 | "#" + 32 | j + 33 | "{" + 34 | " -webkit-transform-origin: top center;" + 35 | "-moz-transform-origin: top center;" + 36 | "-ms-transform-origin: top center;" + 37 | "-o-transform-origin: top center;" + 38 | "transform-origin: top center;" + 39 | "-webkit-animation-name: swing;" + 40 | "-moz-animation-name: swing;" + 41 | "-ms-animation-name: swing;" + 42 | "-o-animation-name: swing;" + 43 | "animation-name: swing;" + 44 | "-webkit-animation-delay: 1s;" + 45 | "-moz-animation-delay: 1s;" + 46 | "-ms-animation-delay: 1s;" + 47 | "-o-animation-delay: 1s;" + 48 | "animation-delay: 1s;" + 49 | "-webkit-animation-duration: 1s;" + 50 | "-moz-animation-duration: 1s;" + 51 | "-ms-animation-duration: 1s;" + 52 | "-o-animation-duration: 1s;" + 53 | "animation-duration: 1s;}"; 54 | 55 | cssAnimation = document.createTextNode(cssAnimation); 56 | document.getElementsByTagName("style")[0].appendChild(cssAnimation); 57 | } 58 | -------------------------------------------------------------------------------- /public/assets/js/switchTabs.js: -------------------------------------------------------------------------------- 1 | let skyLights = document.getElementById("skylights"); 2 | let tab = document.getElementsByClassName("newTab"); 3 | let tabsToOpen = document.getElementsByClassName("open-tabs"); 4 | let toolsTab = document.getElementById("Tools"); 5 | 6 | document.getElementById("home-tab").style.display = "block"; 7 | 8 | function openTabs(e, tabName) { 9 | let transitionAnimation = 10 | ".transition-1 {position: fixed; top: 0; right: -100%; bottom: 0; width:100%;z-index: 99999999999999999;background: linear-gradient(270deg, #FEAE79 0%, rgba(255, 151, 134, 0.979681) 15.44%, #FCB484 100%);transition: 0.3s ease-out;} .transition-1.is-active {right: 0px;} .transition-2 {position: fixed;top: 0;left: -100%;width: 100%;bottom: 0;z-index: 9999999;background: linear-gradient(270deg, #FEAE79 0%, rgba(255, 151, 134, 0.979681) 15.44%, #FCB484 100%);transition: 0.3s ease-out;} .transition-2.is-active {left: 0px;} .transition-3 {position: fixed;top: 100%;left: 0;width: 100%;height: 100%;z-index: 9999999;background: linear-gradient(270deg, #FEAE79 0%, rgba(255, 151, 134, 0.979681) 15.44%, #FCB484 100%);transition: 0.3s ease-out;} .transition-3.is-active {top: 0;} .transition-4 {position: fixed;bottom: 100%;left: 0;width: 100%;height: 100%;z-index: 9999999;background: linear-gradient(270deg, #FEAE79 0%, rgba(255, 151, 134, 0.979681) 15.44%, #FCB484 100%);transition: 0.3s ease-out;} .transition-4.is-active {bottom: 0;}"; 11 | transitionAnimation = document.createTextNode(transitionAnimation); 12 | document.getElementsByTagName("style")[0].appendChild(transitionAnimation); 13 | 14 | for (let i of tab) { 15 | i.style.display = "none"; 16 | } 17 | 18 | for (let j of tabsToOpen) { 19 | j.className = j.className.replace(" opened", ""); 20 | } 21 | 22 | let currentTab = document.getElementById(tabName); 23 | const transition_elements = document.querySelectorAll(".transition"); 24 | 25 | currentTab.children[0].classList.add("is-active"); 26 | setTimeout(() => { 27 | for (let transition_el of transition_elements) { 28 | transition_el.classList.remove("is-active"); 29 | } 30 | }, 300); 31 | 32 | currentTab.style.display = "block"; 33 | 34 | if (e.target.id == "tryOutToolsButton") { 35 | toolsTab.classList.add("opened"); 36 | } else { 37 | e.currentTarget.className += " opened"; 38 | } 39 | } 40 | 41 | function onBlur() { 42 | document.getElementById("list").style.display = "none"; 43 | let titles = document.getElementsByClassName("tools-title"); 44 | for (i = 0; i < titles.length; i++) { 45 | titles[i].innerHTML = !titles[i].innerHTML.startsWith("") 46 | ? titles[i].innerHTML 47 | : titles[i].innerHTML.split(">")[1]; 48 | } 49 | } 50 | 51 | function searchTool() { 52 | let input = document.getElementById("tools-searcher").value.trim(); 53 | input = input.toLowerCase(); 54 | let x = document.getElementsByClassName("list-tools"); 55 | 56 | if (input === "") { 57 | document.getElementById("list").style.display = "none"; 58 | return; 59 | } 60 | document.getElementById("list").style.display = ""; 61 | 62 | let titles = document.getElementsByClassName("tools-title"); 63 | 64 | for (i = 0; i < x.length; i++) { 65 | if (!x[i].innerHTML.toLowerCase().includes(input)) { 66 | x[i].style.display = "none"; 67 | titles[i].innerHTML = !titles[i].innerHTML.startsWith("") 68 | ? titles[i].innerHTML 69 | : titles[i].innerHTML.split(">")[1]; 70 | } else { 71 | x[i].style.display = "list-item"; 72 | titles[i].innerHTML = !titles[i].innerHTML.startsWith("") 73 | ? titles[i].innerHTML 74 | : titles[i].innerHTML.split(">")[1]; 75 | titles[i].innerHTML = "" + titles[i].innerHTML + ""; 76 | } 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/TWT-Code-Jam-FAST/Probox/6b9c1f517e87e9222390f2725e7908318cae66c5/public/favicon.ico -------------------------------------------------------------------------------- /public/switchSite.js: -------------------------------------------------------------------------------- 1 | let page = window.location.href.split("#")[1] || "home"; 2 | 3 | /* 4 | if (page != "home") { 5 | window.open(`https://probox.vercel.app/Tools/${page}/index.html`, `_blank`); 6 | }*/ 7 | 8 | switch (page.toLowerCase().trim()) { 9 | case "calculator": 10 | createCalculator(); 11 | break; 12 | case "stackoverflow": 13 | createStackOrflowverFlow(); 14 | break; 15 | case "short": 16 | createCodeShortener(); 17 | break; 18 | case "dictionary": 19 | createDictionary(); 20 | break; 21 | case "compiler": 22 | createCompiler(); 23 | break; 24 | case "whileboard": 25 | createWhiteBoard(); 26 | break; 27 | case "regex": 28 | createRegexTemplate(); 29 | break; 30 | case "todo": 31 | createToDoList(); 32 | break; 33 | case "ascii": 34 | createAsciiChart(); 35 | break; 36 | case "video": 37 | createVideoRecorder(); 38 | break; 39 | default: 40 | break; 41 | } 42 | -------------------------------------------------------------------------------- /public/window.js: -------------------------------------------------------------------------------- 1 | var container; 2 | var iframeStyle; 3 | 4 | function create(htmlString) { 5 | let frag = document.createDocumentFragment(), 6 | temp = document.createElement("div"); 7 | temp.innerHTML = htmlString; 8 | while (temp.firstChild) { 9 | frag.appendChild(temp.firstChild); 10 | } 11 | return frag; 12 | } 13 | 14 | function closeWindow(element) { 15 | element.parentNode.remove(); 16 | // unblurBackgroundStyle = document.createTextNode( 17 | // "main { filter: blur(0px);-webkit-filter:blur(0px);} " 18 | // ); 19 | 20 | // document.getElementsByTagName("style")[0].append(unblurBackgroundStyle); 21 | } 22 | 23 | function createStackOverFlow() { 24 | container = document.getElementById("windows-container"); 25 | let stackoverflowPage = create( 26 | `
    ` 27 | ); 28 | iframeStyle = document.createTextNode( 29 | // main { filter: blur(8px);-webkit-filter: blur(8px);} 30 | "iframe {border: 10px solid #fcdc5c; border-radius: 20px;}" 31 | ); 32 | container.appendChild(stackoverflowPage); 33 | document.getElementsByTagName("style")[0].append(iframeStyle); 34 | } 35 | 36 | function createCalculator() { 37 | container = document.getElementById("windows-container"); 38 | let calculatorPage = create( 39 | `
    ` 40 | ); 41 | iframeStyle = document.createTextNode( 42 | // main { filter: blur(8px);-webkit-filter: blur(8px);} 43 | "iframe {border: 10px solid #6b507c; border-radius: 20px;}" 44 | ); 45 | container.appendChild(calculatorPage); 46 | document.getElementsByTagName("style")[0].append(iframeStyle); 47 | } 48 | 49 | function createCodeShortener() { 50 | container = document.getElementById("windows-container"); 51 | let codeShortenerPage = create( 52 | `
    ` 53 | ); 54 | iframeStyle = document.createTextNode( 55 | "iframe {border: none; border-radius: 5px;}" 56 | ); 57 | container.appendChild(codeShortenerPage); 58 | document.getElementsByTagName("style")[0].append(iframeStyle); 59 | } 60 | 61 | function createDictionary() { 62 | container = document.getElementById("windows-container"); 63 | let dictionaryPage = create( 64 | `
    ` 65 | ); 66 | iframeStyle = document.createTextNode( 67 | "iframe {border: none; border-radius: 20px;}" 68 | ); 69 | container.appendChild(dictionaryPage); 70 | document.getElementsByTagName("style")[0].append(iframeStyle); 71 | } 72 | 73 | function createCompiler() { 74 | container = document.getElementById("windows-container"); 75 | let compilerPage = create( 76 | `
    ` 77 | ); 78 | iframeStyle = document.createTextNode( 79 | "iframe {border: none; border-radius: 20px; box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);}" 80 | ); 81 | container.appendChild(compilerPage); 82 | document.getElementsByTagName("style")[0].append(iframeStyle); 83 | } 84 | 85 | function createWhiteBoard() { 86 | container = document.getElementById("windows-container"); 87 | let WhiteBoardPage = create( 88 | `
    ` 89 | ); 90 | iframeStyle = document.createTextNode( 91 | "iframe {border: none; border-radius: 20px; box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);}" 92 | ); 93 | container.appendChild(WhiteBoardPage); 94 | document.getElementsByTagName("style")[0].append(iframeStyle); 95 | } 96 | 97 | function createRegexTemplate() { 98 | container = document.getElementById("windows-container"); 99 | let regexTemplatePage = create( 100 | `
    ` 101 | ); 102 | iframeStyle = document.createTextNode( 103 | "iframe {border: none; border-radius: 20px; box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);}" 104 | ); 105 | container.appendChild(regexTemplatePage); 106 | document.getElementsByTagName("style")[0].append(iframeStyle); 107 | } 108 | 109 | function createToDoList() { 110 | container = document.getElementById("windows-container"); 111 | let toDoListPage = create( 112 | `
    ` 113 | ); 114 | iframeStyle = document.createTextNode( 115 | "iframe {border: none; border-radius: 20px; box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);}" 116 | ); 117 | container.appendChild(toDoListPage); 118 | document.getElementsByTagName("style")[0].append(iframeStyle); 119 | } 120 | 121 | function createAsciiChart() { 122 | container = document.getElementById("windows-container"); 123 | let asciiChartPage = create( 124 | `
    ` 125 | ); 126 | iframeStyle = document.createTextNode( 127 | "iframe {border: none; border-radius: 20px; box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);}" 128 | ); 129 | container.appendChild(asciiChartPage); 130 | document.getElementsByTagName("style")[0].append(iframeStyle); 131 | } 132 | 133 | function createVideoRecorder() { 134 | container = document.getElementById("windows-container"); 135 | let videoRecorderPage = create( 136 | `
    ` 137 | ); 138 | iframeStyle = document.createTextNode( 139 | "iframe {border: none; border-radius: 20px; box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);}" 140 | ); 141 | container.appendChild(videoRecorderPage); 142 | document.getElementsByTagName("style")[0].append(iframeStyle); 143 | } 144 | 145 | 146 | function createVoiceRecorder() { 147 | container = document.getElementById("windows-container"); 148 | let voiceRecorderPage = create( 149 | `
    ` 150 | ); 151 | iframeStyle = document.createTextNode( 152 | "iframe {border: none; border-radius: 20px; box-shadow: 0px 4px 17px rgba(0, 0, 0, 0.25);}" 153 | ); 154 | container.appendChild(voiceRecorderPage); 155 | document.getElementsByTagName("style")[0].append(iframeStyle); 156 | } 157 | --------------------------------------------------------------------------------