API tools faq
paste
Advertisement
Guest User

Reentry keyboard-shortcut-map-maker

a guest
Apr 6th, 2022
118
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 26.75 KB | None | 0 0
raw download clone embed print report
  1. <html xmlns="http://www.w3.org/1999/xhtml"><!-- This file was made using: https://archie-adams.github.io/keyboard-shortcut-map-maker/ It can be edited by loading it with the same website. --><head><title>ReEntry.html</title><style>/* -------------------------------------------------------------------------- */
  2. /*                                  site.css                                  */
  3. /* -------------------------------------------------------------------------- */
  4. /*                            Author: Archie Adams                            */
  5. /* -------------------------------------------------------------------------- */
  6. /*                Styling for the general objects on the site.                */
  7. /* -------------------------------------------------------------------------- */
  8.  
  9. /* Header styling.*/
  10. header {
  11.   background-color: #b4b3bd;
  12.   font-size: 48px;
  13.   font-weight: 500;
  14. }
  15. header h1 {
  16.   margin: 0;
  17. }
  18. header h2 {
  19.   text-align: center;
  20. }
  21.  
  22. .ulButtons ul {
  23.   margin: 0;
  24.   list-style-type: none;
  25.   text-align: center;
  26.   background-color: #b4b3bd;
  27. }
  28. .ulButtons ul li {
  29.   display: inline;
  30. }
  31. .ulButtons ul li div {
  32.   padding: 10px 5px;
  33.   text-align: center;
  34.   text-decoration: none;
  35.   display: inline-block;
  36. }
  37. .ulButtons ul li label {
  38.   padding: 10px 5px;
  39.   text-align: center;
  40.   text-decoration: none;
  41.   display: inline-block;
  42.   margin:0;
  43. }
  44.  
  45.  
  46. /* Main body styling */
  47. html, body {
  48.   margin: 0;
  49.   padding: 0;
  50.   background-color: #ffff;
  51. }
  52.  
  53. .bodyStyle {
  54.   width:1109px;
  55.   margin:0 auto;
  56. }
  57.  
  58. #introduction{
  59.   margin-bottom: 25px;
  60. }
  61. #introduction p {
  62.   margin-bottom:5px;
  63. }
  64. #introduction hr {
  65.   margin-top:10px;
  66.   margin-bottom:7px;
  67. }
  68.  
  69. /* Footer styling. */
  70. footer {
  71.   background-color: #b4b3bd;
  72.   margin-top: 20px;
  73.   margin-bottom: 0;
  74. }
  75.  
  76. footer address {
  77.   background-color: #b4b3bd; padding-top:20px; padding-bottom:20px;
  78. }
  79.  
  80. .footer-div {
  81.   width:960px;
  82.   margin:0 auto;
  83.   background-color: #b4b3bd;
  84. }
  85.  
  86. #to-top-button{
  87.   margin-left:426px;
  88.   padding-top: 14px;
  89. }
  90. #to-top-input {
  91.   width: 110px;
  92. }
  93.  
  94. .protectFooter {
  95.   clear:both;
  96. }
  97.  
  98. /* Heading styling. */
  99. h1 {
  100.   text-align: center;
  101.   padding-top: 20px;
  102.   font-size: 48px;
  103.   font-weight: 500;
  104. }
  105. h2 {
  106.   font-size: 24px;
  107.   margin-bottom: 7px;
  108. }
  109. h3 {
  110.   font-size: 20px;
  111. }
  112. li span {
  113.   font-size: 18px;
  114. }
  115. ol{
  116.   list-style-type: none;
  117. }
  118.  
  119. /* Font styling. */
  120. * {
  121.   font-family: 'Open Sans';
  122.   font-style: normal;
  123.   font-size: 14px;
  124. }
  125. .light {
  126.   font-weight: 300;
  127. }
  128. .regular {
  129.   font-weight: 400;
  130. }
  131. .semibold {
  132.   font-weight: 600;
  133. }
  134.  
  135. .up               { margin-left:20px; }
  136. .up, .down        { cursor: pointer; }
  137. .up:after         { content: '△'; }
  138. .up:hover:after   { content: '▲'; }
  139. .down:after       { content: '▽'; }
  140. .down:hover:after { content: '▼'; }
  141.  
  142. .hidden {
  143.   display: none;
  144. }
  145.  
  146. .sectionDivider {
  147.   margin-bottom: 15px;
  148. }</style><style>/* -------------------------------------------------------------------------- */
  149. /*                                keyboard.css                                */
  150. /* -------------------------------------------------------------------------- */
  151. /*                        Original Author: Guido Torres                       */
  152. /*              (https://github.com/guido732/mechanical-keyboard)             */
  153. /* -------------------------------------------------------------------------- */
  154. /*                           Edited by: Archie Adams                          */
  155. /* -------------------------------------------------------------------------- */
  156. /*    Adapted version of the CSS originally created by Guido Torres for the   */
  157. /*                appearance of the mechanical style keyboards.               */
  158. /* -------------------------------------------------------------------------- */
  159.  
  160. * {
  161.   padding: 0;
  162.   margin: 0;
  163.   -webkit-box-sizing: border-box;
  164.           box-sizing: border-box;
  165. }
  166.  
  167. .container {
  168.   background: linear-gradient(165deg, #1d4f71 0%, #122430 100%);
  169.   font-family: "Baloo 2", cursive;
  170.   display: -webkit-box;
  171.   display: -ms-flexbox;
  172.   display: flex;
  173.   -webkit-box-orient: vertical;
  174.   -webkit-box-direction: normal;
  175.       -ms-flex-direction: column;
  176.           flex-direction: column;
  177.   -webkit-box-align: center;
  178.       -ms-flex-align: center;
  179.           align-items: center;
  180.   -webkit-box-pack: center;
  181.       -ms-flex-pack: center;
  182.           justify-content: center;
  183.   margin: 0 auto;
  184.   height: 100vh;
  185.   overflow: visible;
  186. }
  187.  
  188. .keyboard {
  189.   display: -webkit-box;
  190.   display: -ms-flexbox;
  191.   display: flex;
  192.   position: relative;
  193.   border-radius: 0.5rem;
  194.   border-top: 0.75rem solid #3d779e;
  195.   border-right: 0.75rem solid #36698b;
  196.   border-left: 0.75rem solid #36698b;
  197.   border-bottom: 0.75rem solid #25485f;
  198.   width: 1109px;
  199.   margin:auto;
  200.   margin-bottom: 30px;
  201. }
  202.  
  203. .keyboardBorderStyle {
  204.   border-radius: 0.5rem;
  205.   border-top: 0.75rem solid #3d779e;
  206.   border-right: 0.75rem solid #36698b;
  207.   border-left: 0.75rem solid #36698b;
  208.   border-bottom: 0.75rem solid #25485f;
  209.   margin: auto;
  210.   margin-top: 20px;
  211.   margin-bottom: 30px;
  212. }
  213. .SixButtons {
  214.   width: 822px;
  215. }
  216. .FiveButtons {
  217.   width: 688px;
  218. }
  219. .ThreeButtons {
  220.   width: 421px;
  221. }
  222.  
  223. .keyboard::before {
  224.   content: "";
  225.   position: absolute;
  226.   bottom: -1.5rem;
  227.   left: -0.75rem;
  228.   width: calc(100% + (1.5rem));
  229.   height: 2rem;
  230.   z-index: -1;
  231.   background-color: #122430;
  232.   border-bottom-left-radius: 1.2rem;
  233.   border-bottom-right-radius: 1.2rem;
  234.   -webkit-box-shadow: 0 1.5rem 2rem 0rem #172635;
  235.           box-shadow: 0 1.5rem 2rem 0rem #172635;
  236. }
  237.  
  238. .keyboard__section {
  239.   display: -webkit-box;
  240.   display: -ms-flexbox;
  241.   display: flex;
  242.   -webkit-box-orient: vertical;
  243.   -webkit-box-direction: normal;
  244.       -ms-flex-direction: column;
  245.           flex-direction: column;
  246.   background-color: #122430;
  247.   border-radius: 0.5rem;
  248.   padding: 0.25rem 0.25rem 0 0.25rem;
  249. }
  250.  
  251. .keyboard__section:last-child {
  252.   padding-left: 0;
  253. }
  254. .keyboard__section:first-child {
  255.   padding-right: 0;
  256. }
  257.  
  258. .keyboard__section--vertical {
  259.   -webkit-box-orient: horizontal;
  260.   -webkit-box-direction: normal;
  261.       -ms-flex-direction: row;
  262.           flex-direction: row;
  263. }
  264.  
  265. .keyboard__row {
  266.   display: -webkit-box;
  267.   display: -ms-flexbox;
  268.   display: flex;
  269.   width: -webkit-min-content;
  270.   width: -moz-min-content;
  271.   width: min-content;
  272.   margin-bottom: 0.25rem;
  273.   position: relative;
  274. }
  275.  
  276. .keyboard__row--vertical {
  277.   -webkit-box-orient: vertical;
  278.   -webkit-box-direction: normal;
  279.       -ms-flex-direction: column;
  280.           flex-direction: column;
  281.   margin-right: 0.25rem;
  282. }
  283.  
  284. .keyboard__row--vertical:last-child {
  285.   margin-right: 0;
  286. }
  287.  
  288. .keyboard__corner {
  289.   width: 0.25rem;
  290.   height: 1rem;
  291.   background: #122430;
  292.   position: absolute;
  293. }
  294. .keyboard__corner--tl {
  295.   top: 2px;
  296.   left: 0px;
  297.   -webkit-transform: rotate(-225deg);
  298.           transform: rotate(-225deg);
  299.   -webkit-transform-origin: 50% 0%;
  300.           transform-origin: 50% 0%;
  301. }
  302. .keyboard__corner--tr {
  303.   top: 2px;
  304.   right: 0px;
  305.   -webkit-transform: rotate(-135deg);
  306.           transform: rotate(-135deg);
  307.   -webkit-transform-origin: 50% 0%;
  308.           transform-origin: 50% 0%;
  309. }
  310. .keyboard__corner--bl {
  311.   bottom: 2px;
  312.   left: 0px;
  313.   -webkit-transform: rotate(-135deg);
  314.           transform: rotate(-135deg);
  315.   -webkit-transform-origin: 50% 100%;
  316.           transform-origin: 50% 100%;
  317. }
  318. .keyboard__corner--br {
  319.   bottom: 2px;
  320.   right: 0px;
  321.   -webkit-transform: rotate(135deg);
  322.           transform: rotate(135deg);
  323.   -webkit-transform-origin: 50% 100%;
  324.           transform-origin: 50% 100%;
  325. }
  326.  
  327. .keyboard.large .keyboard-short-only {
  328.   display: none;
  329. }
  330.  
  331. .colourkey, .menukey, .key {
  332.   position: relative;
  333.   width: 4rem;
  334.   height: 4rem;
  335.   display: -webkit-box;
  336.   display: -ms-flexbox;
  337.   display: flex;
  338.   -webkit-box-orient: vertical;
  339.   -webkit-box-direction: normal;
  340.       -ms-flex-flow: column;
  341.           flex-flow: column;
  342.   -webkit-box-pack: justify;
  343.       -ms-flex-pack: justify;
  344.           justify-content: space-between;
  345.   margin-right: 0.25rem;
  346.   padding: 0.15rem 0.1rem;
  347.   color: #06112e; /* Default key text colour */
  348.   font-size: 0.7rem;
  349.   font-weight: 500;
  350.   -webkit-user-select: none;
  351.      -moz-user-select: none;
  352.       -ms-user-select: none;
  353.           user-select: none;
  354.   background: -webkit-gradient(linear, left top, right top, from(#e1e1e1), color-stop(30%, #f0f0f0), color-stop(60%, #f0f0f0), to(#e6e6e6));
  355.   background: linear-gradient(90deg, #e1e1e1 0%, #f0f0f0 30%, #f0f0f0 60%, #e6e6e6);
  356.   border-radius: 0.3125rem 0.3125rem 0.5rem 0.5rem;
  357.   border-top: 0.15rem solid #d7d7d7;
  358.   border-right: 0.35rem solid gainsboro;
  359.   border-left: 0.35rem solid gainsboro;
  360.   border-bottom: 0.6rem solid #cfcfcf;
  361.   -webkit-box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #f3f3f3;
  362.           box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #f3f3f3;
  363. }
  364. .userText {
  365.   font-size: 0.7rem;
  366.   font-weight: 500;
  367. }
  368.  
  369. .key:last-child, .menukey:last-child, .colourkey:last-child {
  370.   margin-right: 0;
  371. }
  372.  
  373. .key--2 {
  374.   width: 5.0625rem;
  375. }
  376. .key--3 {
  377.   width: 6.125rem;
  378. }
  379. .key--4 {
  380.   width: 7.1875rem;
  381. }
  382. .key--5 {
  383.   width: 8.25rem;
  384. }
  385. .key--6 {
  386.   width: 9.3125rem;
  387. }
  388. .key--7 {
  389.   width: 11.4375rem;
  390.   margin-right: 0;
  391. }
  392. .key--8 {
  393.   width: 26.3125rem;
  394. }
  395.  
  396. .key--vert {
  397.   margin-bottom: 0.25rem;
  398.   margin-right: 0;
  399. }
  400. .key--vert:last-child {
  401.   margin-bottom: 0;
  402. }
  403. .key--vert.key--5 {
  404.   width: 4rem;
  405.   height: 8.25rem;
  406. }
  407.  
  408. .key--pressed {
  409.   -webkit-transform: translateY(0.2rem);
  410.           transform: translateY(0.2rem);
  411.   -webkit-transition: -webkit-transform 0.05s;
  412.   transition: -webkit-transform 0.05s;
  413.   transition: transform 0.05s;
  414.   transition: transform 0.05s, -webkit-transform 0.05s;
  415. }
  416.  
  417. .text-center {
  418.   text-align: center;
  419. }
  420.  
  421. .text-end {
  422.   text-align: end;
  423. }
  424.  
  425. .vert-center {
  426.   display: -webkit-box;
  427.   display: -ms-flexbox;
  428.   display: flex;
  429.   -webkit-box-align: center;
  430.       -ms-flex-align: center;
  431.           align-items: center;
  432.   -webkit-box-pack: center;
  433.       -ms-flex-pack: center;
  434.           justify-content: center;
  435. }
  436.  
  437. .text-lg {
  438.   font-size: 1rem;
  439.   font-weight: 500;
  440. }
  441.  
  442. .hidden {
  443.   visibility:hidden;
  444. }</style><style>/* -------------------------------------------------------------------------- */
  445. /*                                key-colours.css                             */
  446. /* -------------------------------------------------------------------------- */
  447. /*                        Original Author: Guido Torres                       */
  448. /*              (https://github.com/guido732/mechanical-keyboard)             */
  449. /* -------------------------------------------------------------------------- */
  450. /*                           Edited by: Archie Adams                          */
  451. /* -------------------------------------------------------------------------- */
  452. /*          A selection classes which will change the colour of keys.         */
  453. /* -------------------------------------------------------------------------- */
  454.  
  455. .key--colour--coral {
  456.   color: #f0f0f0;
  457.   background: -webkit-gradient(linear, left top, right top, from(#e97b67), color-stop(30%, #ed9282), color-stop(60%, #ed9282), to(#ea8270));
  458.   background: linear-gradient(90deg, #e97b67 0%, #ed9282 30%, #ed9282 60%, #ea8270);
  459.   border-radius: 0.3125rem 0.3125rem 0.5rem 0.5rem;
  460.   border-top: 0.15rem solid #e76b55;
  461.   border-right: 0.35rem solid #e8735e;
  462.   border-left: 0.35rem solid #e8735e;
  463.   border-bottom: 0.6rem solid #da6753;
  464.   -webkit-box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #ee9686;
  465.           box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #ee9686;
  466. }
  467.  
  468. .key--colour--navy {
  469.   color: #f0f0f0;
  470.   background: -webkit-gradient(linear, left top, right top, from(#264a63), color-stop(30%, #2f5b79), color-stop(60%, #2f5b79), to(#29506a));
  471.   background: linear-gradient(90deg, #264a63 0%, #2f5b79 30%, #2f5b79 60%, #29506a);
  472.   border-radius: 0.3125rem 0.3125rem 0.5rem 0.5rem;
  473.   border-top: 0.15rem solid #213f54;
  474.   border-right: 0.35rem solid #24455c;
  475.   border-left: 0.35rem solid #24455c;
  476.   border-bottom: 0.6rem solid #223644;
  477.   -webkit-box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #305e7d;
  478.           box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #305e7d;
  479. }
  480.  
  481. .key--colour--green {
  482.   color: #eae7e1;
  483.   background: -webkit-gradient(linear, left top, right top, from(#237465), color-stop(30%, #2a8c79), color-stop(60%, #2a8c79), to(#257c6b));
  484.   background: linear-gradient(90deg, #237465 0%, #2a8c79 30%, #2a8c79 60%, #257c6b);
  485.   border-radius: 0.3125rem 0.3125rem 0.5rem 0.5rem;
  486.   border-top: 0.15rem solid #1e6557;
  487.   border-right: 0.35rem solid #216d5e;
  488.   border-left: 0.35rem solid #216d5e;
  489.   border-bottom: 0.6rem solid #205349;
  490.   -webkit-box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #2b907c;
  491.           box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #2b907c;
  492. }
  493.  
  494. .key--colour--orange {
  495.   color: #f7f6f4;
  496.   background: -webkit-gradient(linear, left top, right top, from(#f35b24), color-stop(30%, #f57141), color-stop(60%, #f57141), to(#f4632e));
  497.   background: linear-gradient(90deg, #f35b24 0%, #f57141 30%, #f57141 60%, #f4632e);
  498.   border-radius: 0.3125rem 0.3125rem 0.5rem 0.5rem;
  499.   border-top: 0.15rem solid #f24d11;
  500.   border-right: 0.35rem solid #f3541a;
  501.   border-left: 0.35rem solid #f3541a;
  502.   border-bottom: 0.6rem solid #db4c18;
  503.   -webkit-box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #f57546;
  504.           box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #f57546;
  505. }
  506.  
  507. .key--colour--blue {
  508.   color: #f7f6f4;
  509.   background: -webkit-gradient(linear, left top, right top, from(#2c9ce5), color-stop(30%, #47a9e8), color-stop(60%, #47a9e8), to(#35a1e6));
  510.   background: linear-gradient(90deg, #2c9ce5 0%, #47a9e8 30%, #47a9e8 60%, #35a1e6);
  511.   border-radius: 0.3125rem 0.3125rem 0.5rem 0.5rem;
  512.   border-top: 0.15rem solid #1c93e0;
  513.   border-right: 0.35rem solid #2398e3;
  514.   border-left: 0.35rem solid #2398e3;
  515.   border-bottom: 0.6rem solid #2688c7;
  516.   -webkit-box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #4cabe9;
  517.           box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #4cabe9;
  518. }
  519.  
  520. .key--disabled {
  521.   color: #f7f6f4;
  522.   background: -webkit-gradient(linear, left top, right top, from(#9ca8b1), color-stop(30%, #94a4ad), color-stop(60%, #94a4ad), to(#9ca8b1));
  523.   background: linear-gradient(90deg, #94a4ad 0%, #94a4ad 30%, #94a4ad 60%, #94a4ad);
  524.   border-radius: 0.3125rem 0.3125rem 0.5rem 0.5rem;
  525.   border-top: 0.15rem solid #94a4ad;
  526.   border-right: 0.35rem solid #81868a;
  527.   border-left: 0.35rem solid #81868a;
  528.   border-bottom: 0.6rem solid #81868a;
  529.   -webkit-box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #94a4ad;
  530.           box-shadow: 0.25rem 0.25rem 1rem 0rem rgba(23, 38, 53, 0.5), inset -1px -1px 5px 0 #94a4ad;
  531. }</style></head><header><h1 id="top">Keyboard Shortcut Map Maker</h1><h2 id="loadedFileHeader" class="editable">ReEntry.html</h2><div style=" padding-top: 1px;"></div></header><body><div style=" margin-top: 30px;" class="top-padding-50px"></div><div class="bodyStyle"><ol id="KeyboardTable"><li>
  532.       <span class="up hidden"></span>
  533.       <span class="down hidden"></span>
  534.       <h3 style="float: left;" class="editable">Default Keyboard Mappings</h3>
  535.       <p style="float: right; font-size: 18px;" onclick="removeKeyboard($(this.parentNode));" class="hidden">🚮</p>
  536.       <div id="kbd1647336481083" class="keyboard large">
  537.  
  538.         <div class="keyboard__corner keyboard__corner--bl"></div>
  539.         <div class="keyboard__corner keyboard__corner--tl"></div>
  540.         <div class="keyboard__corner keyboard__corner--tr"></div>
  541.         <div class="keyboard__corner keyboard__corner--br"></div>
  542.  
  543.         <div class="keyboard__section">
  544.  
  545.           <div class="keyboard__row keyboard__row--lg keyboard-long-only">
  546.             <div data-key="Escape" class="key">ESC<span class="userText">Cancel</span></div>
  547.             <div data-key="HIDDEN" class="key hidden"><span class="userText"></span></div>
  548.             <div data-key="F1" class="key key--colour--coral">F1<span class="userText">External View</span></div>
  549.             <div data-key="F2" class="key key--colour--coral">F2<span class="userText">Advanced Ext View</span></div>
  550.             <div data-key="F3" class="key key--colour--coral">F3<span class="userText">Orbit View</span></div>
  551.             <div data-key="F4" class="key key--colour--coral" style="margin-right: 31px;">F4<span class="userText">Change Active Craft</span>
  552.             </div>
  553.             <div data-key="F5" class="key key--colour--coral">F5<span class="userText">Cockpit View 1</span></div>
  554.             <div data-key="F6" class="key key--colour--coral">F6<span class="userText">Cockpit View 2</span></div>
  555.             <div data-key="F7" class="key key--colour--coral">F7<span class="userText">Cockpit View 3</span></div>
  556.             <div data-key="F8" class="key key--colour--coral">F8<span class="userText">Cockpit View 4</span></div>
  557.             <div data-key="F9" class="key key--colour--coral" style="margin-left: 32px;">F9<span class="userText">Cockpit View 5</span></div>
  558.             <div data-key="F10" class="key key--colour--coral">F10<span class="userText">Cockpit View 6</span></div>
  559.             <div data-key="F11" class="key key--colour--coral">F11<span class="userText">Cockpit View 7</span></div>
  560.             <div data-key="F12" class="key key--colour--coral">F12<span class="userText"></span></div>
  561.           </div>
  562.  
  563.           <!-- SPACER DIV FOR 10keyless  -->
  564.           <div class="keyboard__row keyboard__row--lg" style="height:5px">
  565.           </div>
  566.  
  567.           <div class="keyboard__row keyboard__row--lg">
  568.             <div data-key="Escape" class="key keyboard-short-only">ESC<span class="userText"></span></div>
  569.             <div data-key="Backquote" class="key key--primary keyboard-long-only">`<span class="userText">Console</span>
  570.             </div>
  571.             <div data-key="Digit1" class="key">1<span class="userText">Time 1X</span></div>
  572.             <div data-key="Digit2" class="key">2<span class="userText">Time 2X</span></div>
  573.             <div data-key="Digit3" class="key">3<span class="userText">Time 5X</span></div>
  574.             <div data-key="Digit4" class="key">4<span class="userText">Time 10X</span></div>
  575.             <div data-key="Digit5" class="key">5<span class="userText">Time 20X</span></div>
  576.             <div data-key="Digit6" class="key">6<span class="userText">Time 50X</span></div>
  577.             <div data-key="Digit7" class="key">7<span class="userText">Time 100X</span></div>
  578.             <div data-key="Digit8" class="key">8<span class="userText">Time 200X</span>
  579.             </div>
  580.             <div data-key="Digit9" class="key">9<span class="userText">Time 400X</span></div>
  581.             <div data-key="Digit0" class="key">0<span class="userText">Time Pause</span></div>
  582.             <div data-key="Minus" class="key">-<span class="userText"></span></div>
  583.             <div data-key="Equal" class="key">=<span class="userText"></span></div>
  584.             <div data-key="Backspace" class="key text-end key--5">BACKSPACE<span class="userText"></span>
  585.             </div>
  586.           </div>
  587.  
  588.           <div class="keyboard__row keyboard__row--lg">
  589.             <div data-key="Tab" class="key key--3">TAB<span class="userText"></span></div>
  590.             <div data-key="KeyQ" class="key key--colour--navy">Q<span class="userText">Roll Left</span></div>
  591.             <div data-key="KeyW" class="key key--colour--blue">W<span class="userText">Pitch Up</span></div>
  592.             <div data-key="KeyE" class="key key--colour--navy">E<span class="userText">Roll Right</span></div>
  593.             <div data-key="KeyR" class="key">R<span class="userText"></span></div>
  594.             <div data-key="KeyT" class="key">T<span class="userText"></span></div>
  595.             <div data-key="KeyY" class="key">Y<span class="userText"></span></div>
  596.             <div data-key="KeyU" class="key">U<span class="userText"></span></div>
  597.             <div data-key="KeyI" class="key key--colour--navy">I<span class="userText">Translate Up</span></div>
  598.             <div data-key="KeyO" class="key">O<span class="userText"></span></div>
  599.             <div data-key="KeyP" class="key">P<span class="userText"></span></div>
  600.             <div data-key="BracketLeft" class="key">[ {<span class="userText"></span></div>
  601.             <div data-key="BracketRight" class="key">] }<span class="userText"></span></div>
  602.             <div data-key="Backslash" class="key text-center key--3">\ |<span class="userText"></span></div>
  603.           </div>
  604.  
  605.           <div class="keyboard__row keyboard__row--lg">
  606.             <div data-key="CapsLock" class="key key--4">CAPSLOCK<span class="userText"></span></div>
  607.             <div data-key="KeyA" class="key key--colour--green">A<span class="userText">Yaw Left</span></div>
  608.             <div data-key="KeyS" class="key key--colour--blue">S<span class="userText">Pitch Down</span></div>
  609.             <div data-key="KeyD" class="key key--colour--green">D<span class="userText">Yaw Right</span></div>
  610.             <div data-key="KeyF" class="key">F<span class="userText">Flashlight</span></div>
  611.             <div data-key="KeyG" class="key">G<span class="userText"></span></div>
  612.             <div data-key="KeyH" class="key key--colour--blue">H<span class="userText">Translate Fwd</span></div>
  613.             <div data-key="KeyJ" class="key key--colour--green">J<span class="userText">Translate Left</span></div>
  614.             <div data-key="KeyK" class="key key--colour--navy">K<span class="userText">Translate Down</span></div>
  615.             <div data-key="KeyL" class="key key--colour--green">L<span class="userText">Translate Right</span></div>
  616.             <div data-key="Semicolon" class="key">; :<span class="userText"></span></div>
  617.             <div data-key="Quote" class="key">' "<span class="userText"></span></div>
  618.             <div data-key="Enter" class="key text-end key--6">ENTER<span class="userText">Submit</span></div>
  619.           </div>
  620.  
  621.           <div class="keyboard__row keyboard__row--lg">
  622.             <div data-key="ShiftLeft" class="key key--6">SHIFT<span class="userText"></span></div>
  623.             <div data-key="KeyZ" class="key">Z<span class="userText"></span></div>
  624.             <div data-key="KeyX" class="key">X<span class="userText"></span></div>
  625.             <div data-key="KeyC" class="key">C<span class="userText">Comms Menu</span></div>
  626.             <div data-key="KeyV" class="key">V<span class="userText">View Menu</span></div>
  627.             <div data-key="KeyB" class="key">B<span class="userText">Checklist Proceed</span></div>
  628.             <div data-key="KeyN" class="key key--colour--blue">N<span class="userText">Translate Aft</span></div>
  629.             <div data-key="KeyM" class="key">M<span class="userText">Mission Pad</span></div>
  630.             <div data-key="Comma" class="key">, &lt;<span class="userText"></span></div>
  631.             <div data-key="Period" class="key">. &gt;<span class="userText">Toggle Aids</span></div>
  632.             <div data-key="Slash" class="key">/ ?<span class="userText"></span></div>
  633.             <div data-key="ShiftRight" class="key text-end key--7">SHIFT<span class="userText"></span></div>
  634.           </div>
  635.  
  636.           <div class="keyboard__row keyboard__row--lg">
  637.             <div data-key="ControlLeft" class="key text-center key--2">CTRL<span class="userText"></span>
  638.             </div>
  639.             <div data-key="OSLeft" class="key text-center key--2">WIN<span class="userText"></span>
  640.             </div>
  641.             <div data-key="AltLeft" class="key text-center key--2">ALT<span class="userText"></span></div>
  642.             <div data-key="Space" class="key key--8"><span class="userText"></span></div>
  643.             <div data-key="AltRight" class="key text-center key--2">ALT<span class="userText"></span></div>
  644.             <div data-key="Function" class="key text-center key--2">FN<span class="userText"></span></div>
  645.             <div data-key="ContextMenu" class="key text-center last key--2">MENU<span class="userText"></span>
  646.             </div>
  647.             <div data-key="ControlRight" class="key text-center key--2">CTRL<span class="userText"></span>
  648.             </div>
  649.           </div>
  650.  
  651.         </div>
  652.  
  653.         <!-- This is the numpad and right arrow section. -->
  654.         <div class="keyboard__section keyboard__section--vertical">
  655.  
  656.           <!-- Vertical spacer column. -->
  657.           <div class="keyboard__row keyboard__row--vertical" style="width:8px">
  658.           </div>
  659.  
  660.           <div class="keyboard__row keyboard__row--vertical">
  661.             <div data-key="PrintScreen" class="key key--vert" style="margin-bottom: 12px;">
  662.               PRTSC<span class="userText"></span></div>
  663.             <div data-key="Insert" class="key key--vert">INS<span class="userText"></span></div>
  664.             <div data-key="Delete" class="key key--vert">DEL<span class="userText"></span></div>
  665.             <div data-key="HIDDEN" class="key vert-center key--vert key--5 hidden"><span class="userText"></span>
  666.             </div>
  667.             <div data-key="ArrowLeft" class="key key--vert">◁<span class="userText">View Left</span></div>
  668.           </div>
  669.  
  670.           <div class="keyboard__row keyboard__row--vertical">
  671.             <div data-key="ScrollLock" class="key key--vert" style="margin-bottom: 12px;">
  672.               SCRLK<span class="userText"></span></div>
  673.             <div data-key="Home" class="key key--vert">HOME<span class="userText"></span></div>
  674.             <div data-key="End" class="key key--vert">END<span class="userText"></span></div>
  675.             <div data-key="HIDDEN" class="key key--vert hidden"><span class="userText"></span></div>
  676.             <div data-key="Numpad3" class="key key--vert">△<span class="userText">View Fwd</span></div>
  677.             <div data-key="ArrowUp" class="key key--vert">▽<span class="userText">View Bwd</span></div>
  678.           </div>
  679.  
  680.           <div class="keyboard__row keyboard__row--vertical" style="padding-right: 3px;">
  681.             <div data-key="Pause" class="key key--vert" style="margin-bottom: 12px;">PAUSE<span class="userText"></span>
  682.             </div>
  683.             <div data-key="PageUp" class="key key--vert">PGUP<span class="userText">View Up</span></div>
  684.             <div data-key="PageDown" class="key key--vert">PGDN<span class="userText">View Down</span></div>
  685.             <div data-key="HIDDEN" class="key vert-center key--vert key--5 hidden"><span class="userText"></span>
  686.             </div>
  687.             <div data-key="ArrowRight" class="key key--vert">▷<span class="userText">View Right</span></div>
  688.           </div>
  689.         </div>
  690.  
  691.       </div> <!-- End of keyboard. -->
  692.     </li></ol></div></body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!