index.html 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <!--
  6. This entire file is licensed under:
  7. ===
  8. MIT License
  9. Copyright (c) 2021 Adnan Shameem
  10. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
  11. The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  12. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  13. ===
  14. -->
  15. <title>polytable</title>
  16. <meta name="description" content="polytable" />
  17. <meta name="keywords" content="computer, language, cheatsheet, code, example, agnostic, guide" />
  18. <link rel="icon" href="data:;base64,=">
  19. <style>
  20. * {
  21. margin:0;
  22. padding:0;
  23. }
  24. .hidden {
  25. display: none !important;
  26. }
  27. body.has-js .noscript {
  28. display: none;
  29. }
  30. pre {
  31. /*background: #fcfcfc;*/
  32. padding: 2px;
  33. word-wrap: break-word;
  34. }
  35. a {
  36. text-decoration: none;
  37. }
  38. .row:not(.firstrow):hover .cell {
  39. background: #fffdc6;
  40. }
  41. .firstrow {
  42. position: sticky;
  43. top:0;
  44. }
  45. .firstrow .cell {
  46. padding-top: 10px;
  47. padding-bottom: 10px;
  48. }
  49. .cell {
  50. display: table-cell;
  51. padding: 5px 7px;
  52. background: #fdf5ff;
  53. border: 1px solid #fff;
  54. width:220px;
  55. min-width:220px;
  56. max-width:220px;
  57. word-wrap: break-word;
  58. box-sizing: border-box;
  59. }
  60. .cell.columnheader {
  61. background: #8e0bab;
  62. color: #efefef;
  63. }
  64. .cell.firstcolumn {
  65. background: #f6eaf9;
  66. width:100px;
  67. max-width:100px;
  68. min-width:100px;
  69. vertical-align: middle;
  70. }
  71. .menu {
  72. display: none;
  73. position: absolute;
  74. width: 150px;
  75. top:40px;
  76. left:0;
  77. padding:5px;
  78. background: #700d86;
  79. border: 1px solid #fff;
  80. }
  81. .menu .item {
  82. display: block;
  83. padding: 7px 15px;
  84. box-sizing: border-box;
  85. }
  86. .menu .item:hover {
  87. background: #4a1c54;
  88. }
  89. .menu .item .checkmark {
  90. visibility:hidden;
  91. margin-right:5px;
  92. }
  93. .menu .item.checked .checkmark {
  94. visibility:visible;
  95. }
  96. .cell.menu-btn {
  97. background-color: #700d86;
  98. color: #efefef;
  99. cursor: pointer;
  100. }
  101. .menu-btn:hover {
  102. background: #600a73;
  103. }
  104. .menu-btn:focus {
  105. background: #700d86;
  106. color: #efefef;
  107. }
  108. .menu-btn:focus .menu {
  109. display: unset;
  110. }
  111. </style>
  112. </head>
  113. <body>
  114. <div class="table">
  115. <div class="row firstrow">
  116. <div tabindex="0" class="cell columnheader firstcolumn menu-btn">
  117. <span title="Menu to toggle languages">☰ MENU</span>
  118. <ul class="menu">
  119. <li class="item checked noscript" title="You are seeing this message because JavaScript is disabled in your browser. Please enable JavaScript to enjoy full feature set."><span class="checkmark">!!</span>JS disabled, some features may not work</li>
  120. <li class="item checked" data-toggle="js" ><span class="checkmark">✓</span>JavaScript</li>
  121. <li class="item checked" data-toggle="php" ><span class="checkmark">✓</span>PHP</li>
  122. <li class="item checked" data-toggle="cpp" ><span class="checkmark">✓</span>C++</li>
  123. <li class="item checked" data-toggle="py" ><span class="checkmark">✓</span>Python</li>
  124. </ul>
  125. </div>
  126. <div class="cell columnheader js ">
  127. JavaScript
  128. </div>
  129. <div class="cell columnheader php ">
  130. PHP
  131. </div>
  132. <div class="cell columnheader cpp ">
  133. C++
  134. </div>
  135. <div class="cell columnheader py ">
  136. Python
  137. </div>
  138. </div>
  139. <div class="row">
  140. <div class="cell firstcolumn">
  141. Print
  142. </div>
  143. <div class="cell js "><!-- JavaScript -->
  144. <pre>
  145. alert('test');
  146. </pre>
  147. </div>
  148. <div class="cell php "><!-- PHP -->
  149. <pre>
  150. echo 'test';
  151. </pre>
  152. </div>
  153. <div class="cell cpp "><!-- C++ -->
  154. <pre>
  155. #include &lt;iostream&gt;
  156. int main() {
  157. std::cout &lt;&lt; "test";
  158. }
  159. </pre>
  160. </div>
  161. <div class="cell py "><!-- Python -->
  162. <pre>
  163. print('test')
  164. </pre>
  165. </div>
  166. </div>
  167. <div class="row">
  168. <div class="cell firstcolumn">
  169. Comment
  170. </div>
  171. <div class="cell js "><!-- JavaScript -->
  172. <pre>
  173. // comment
  174. /* multiline
  175. test */
  176. </pre>
  177. </div>
  178. <div class="cell php "><!-- PHP -->
  179. <pre>
  180. // comment
  181. /* multiline
  182. test */
  183. </pre>
  184. </div>
  185. <div class="cell cpp "><!-- C++ -->
  186. <pre>
  187. // comment
  188. /* multiline
  189. test */
  190. </pre>
  191. </div>
  192. <div class="cell py "><!-- Python -->
  193. <pre>
  194. # comment
  195. """
  196. multiline
  197. test
  198. """
  199. </pre>
  200. </div>
  201. </div>
  202. <div class="row">
  203. <div class="cell firstcolumn">
  204. Variable
  205. </div>
  206. <div class="cell js "><!-- JavaScript -->
  207. <pre>
  208. var a;
  209. var b = 5;
  210. var c = 10;
  211. </pre>
  212. </div>
  213. <div class="cell php "><!-- PHP -->
  214. <pre>
  215. //
  216. $b = 5;
  217. $c = 'test';
  218. </pre>
  219. </div>
  220. <div class="cell cpp "><!-- C++ -->
  221. <pre>
  222. int a;
  223. int b = 5;
  224. str c = "test";
  225. </pre>
  226. </div>
  227. <div class="cell py "><!-- Python -->
  228. <pre>
  229. #
  230. b = 5
  231. c = 'test'
  232. </pre>
  233. </div>
  234. </div>
  235. <div class="row">
  236. <div class="cell firstcolumn">
  237. Function
  238. </div>
  239. <div class="cell js "><!-- JavaScript -->
  240. <pre>
  241. function test() { ... }
  242. function add(a, b) {
  243. return a + b;
  244. }
  245. </pre>
  246. </div>
  247. <div class="cell php "><!-- PHP -->
  248. <pre>
  249. function test() { ... }
  250. function add($a, $b) {
  251. return $a + $b;
  252. }
  253. </pre>
  254. </div>
  255. <div class="cell cpp "><!-- C++ -->
  256. <pre>
  257. void test() { ... }
  258. int add(int a, int b) {
  259. return a + b;
  260. }
  261. </pre>
  262. </div>
  263. <div class="cell py "><!-- Python -->
  264. <pre>
  265. def test():
  266. ...
  267. def add(x, y):
  268. return x + y
  269. </pre>
  270. </div>
  271. </div>
  272. <div class="row">
  273. <div class="cell firstcolumn">
  274. If
  275. </div>
  276. <div class="cell js "><!-- JavaScript -->
  277. <pre>
  278. if ( a &gt; b ) {
  279. ...
  280. } elseif ( b == c ) {
  281. ...
  282. } else {
  283. ...
  284. }
  285. </pre>
  286. </div>
  287. <div class="cell php "><!-- PHP -->
  288. <pre>
  289. if ( $a &gt; $b ) {
  290. ...
  291. } elseif ( b == c ) {
  292. ...
  293. } else {
  294. ...
  295. }
  296. </pre>
  297. </div>
  298. <div class="cell cpp "><!-- C++ -->
  299. <pre>
  300. if ( a &gt; b ) {
  301. ...
  302. } elseif ( b == c ) {
  303. ...
  304. } else {
  305. ...
  306. }
  307. </pre>
  308. </div>
  309. <div class="cell py "><!-- Python -->
  310. <pre>
  311. if b &gt; a:
  312. ...
  313. elif b == c:
  314. ...
  315. else:
  316. ...
  317. </pre>
  318. </div>
  319. </div>
  320. </div>
  321. <script>
  322. // @license magnet:?xt=urn:btih:d3d9a9a6595521f9666a5e94cc830dab83b65699&dn=expat.txt Expat
  323. // Get element out of an identifier
  324. function el(query) {
  325. return document.querySelector(query);
  326. }
  327. // Get all elements out of an identifier
  328. function ela(query) {
  329. return document.querySelectorAll(query);
  330. }
  331. // Loop through all elements
  332. function forall(query, callbfunc) {
  333. var elems = document.querySelectorAll(query);
  334. for (var i = 0, len = elems.length; i < len; i++) {
  335. callbfunc(elems[i]);
  336. }
  337. }
  338. // Add onclick event function
  339. function onclick(query, callbfunc) {
  340. forall(query, function(el) {
  341. el.addEventListener('click', function(){
  342. callbfunc(el);
  343. });
  344. });
  345. }
  346. // Show or hide
  347. function toggle(query) {
  348. forall(query, function(el) {
  349. if (el.style.display === "none") {
  350. el.style.display = "block";
  351. } else {
  352. el.style.display = "none";
  353. }
  354. });
  355. }
  356. // Add or remove an HTML class
  357. function toggleClass(query, class_name) {
  358. forall(query, function(el) {
  359. el.classList.toggle(class_name);
  360. });
  361. }
  362. // Some browsers like Badwolf doesn't support <noscript> elements
  363. // This is a workaround
  364. el('body').classList.add('has-js');
  365. onclick('.menu .item', function(el){
  366. if (el.hasAttribute('data-toggle')) {
  367. toggleClass('.'+el.getAttribute('data-toggle'), 'hidden');
  368. el.classList.toggle('checked');
  369. }
  370. });
  371. // @license-end
  372. </script>
  373. </body>
  374. </html>