-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path404.html
1 lines (1 loc) · 52.9 KB
/
404.html
1
<!DOCTYPE html><html><head><meta name="description" content="The modern virtual keyboard for Javascript Compatible with your JS, React, Angular or Vue projects. View Demos Documentation Explore articles {{blogAr..."><meta name="twitter:description" content="The modern virtual keyboard for Javascript Compatible with your JS, React, Angular or Vue projects. View Demos Documentation Explore articles {{blogAr..."><meta property="og:title" content="Home"><meta property="og:site_name" content="Simple-keyboard - The Modern Virtual Keyboard"><meta charset="UTF-8"><title>Home - Simple-keyboard - The Modern Virtual Keyboard</title><script async src="https://www.googletagmanager.com/gtag/js?id=UA-135256973-1"></script><script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","UA-135256973-1");</script><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="description" content="Onscreen virtual keyboard compatible with your ES6, React, Vue, Angular or jQuery projects. Available on Github and NPM."><meta name="author" content="Francisco Hodge"><link rel="apple-touch-icon" sizes="57x57" href="/assets/img/ico/apple-icon-57x57.png"><link rel="apple-touch-icon" sizes="60x60" href="/assets/img/ico/apple-icon-60x60.png"><link rel="apple-touch-icon" sizes="72x72" href="/assets/img/ico/apple-icon-72x72.png"><link rel="apple-touch-icon" sizes="76x76" href="/assets/img/ico/apple-icon-76x76.png"><link rel="apple-touch-icon" sizes="114x114" href="/assets/img/ico/apple-icon-114x114.png"><link rel="apple-touch-icon" sizes="120x120" href="/assets/img/ico/apple-icon-120x120.png"><link rel="apple-touch-icon" sizes="144x144" href="/assets/img/ico/apple-icon-144x144.png"><link rel="apple-touch-icon" sizes="152x152" href="/assets/img/ico/apple-icon-152x152.png"><link rel="apple-touch-icon" sizes="180x180" href="/assets/img/ico/apple-icon-180x180.png"><link rel="icon" type="image/png" sizes="192x192" href="/assets/img/ico/android-icon-192x192.png"><link rel="icon" type="image/png" sizes="32x32" href="/assets/img/ico/favicon-32x32.png"><link rel="icon" type="image/png" sizes="96x96" href="/assets/img/ico/favicon-96x96.png"><link rel="icon" type="image/png" sizes="16x16" href="/assets/img/ico/favicon-16x16.png"><link rel="manifest" href="/assets/img/ico/manifest.json"><meta name="msapplication-TileColor" content="#ffffff"><meta name="msapplication-TileImage" content="/ms-icon-144x144.png"><meta name="theme-color" content="#ffffff"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"><title>Simple-keyboard - The Modern Javascript Virtual Keyboard</title><meta property="og:title" content="Simple-keyboard - Javascript Virtual Keyboard"><meta property="og:description" content="Customizable, responsive and lightweight. Compatible with Vanilla JS, React, Angular, Vue and more."><meta name="twitter:card" content="summary_large_image"><meta property="og:image" content="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-bn.png"><meta property="og:url" content="https://virtual-keyboard.js.org"><meta property="og:site_name" content="simple-keyboard"><meta name="twitter:image:alt" content="Simple-keyboard"><link rel="stylesheet" href="/assets/css/fonts.css"><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css"><link href="https://virtual-keyboard.js.org/assets/css/twemoji-awesome.css" rel="stylesheet"><link rel="stylesheet" href="/assets/css/main.css"><noscript><link rel="stylesheet" href="/assets/css/noscript.css"></noscript><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><link rel="stylesheet" href="/assets/css/font-awesome.min.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"><style>body{margin:0;padding:0;background:#0f0f0f;color:#a6a6a6}body,input,select,textarea{font-family:Roboto,Helvetica,sans-serif;font-size:17pt;font-weight:300;line-height:1.65}h1{font-size:2.5em;line-height:1.2;font-family:skfont;font-weight:400;font-style:normal;display:inline-block;border-right:25px solid #fff;padding-right:25px;letter-spacing:0;margin-bottom:0}a{-moz-transition:color .2s ease,border-bottom .2s ease;-webkit-transition:color .2s ease,border-bottom .2s ease;-ms-transition:color .2s ease,border-bottom .2s ease;transition:color .2s ease,border-bottom .2s ease;text-decoration:none;color:inherit}a:hover{border-bottom-color:transparent}.btnContainer .button{box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}.btnContainer .button:first-child{margin-right:10px}.right-content{padding:0}.content-detail{padding:20px}.left-content{color:#fff;flex:1;box-sizing:border-box;max-height:100vh;overflow-y:auto}.blog{width:100%;overflow:auto;background:#000000cc}.intro-content{text-align:center;margin:0 auto;padding:20px;height:calc(100vh - 130px);display:flex;align-items:center;justify-content:center;flex-flow:column}.intro-content h1{margin-bottom:20px}h3{padding:19px 34px;background:#151515;margin:0}.footer{border-top:1px solid rgba(255,255,255,.05);background:rgba(0,0,0,.05);height:50px;font-size:16px;display:flex;align-items:center;padding:0 20px;box-sizing:border-box;font-weight:500}.footer a.footer-shoutout{display:flex;align-items:center;gap:4px}.footer img.prss-footer-image{margin-left:2px;margin-top:-2px}.prss-logo-wrapper{display:flex;align-items:center;gap:1px}.qDemo{display:flex;align-items:center;justify-content:center;min-width:100%;margin-top:10px}.blog-articles{display:flex;padding:20px;gap:20px;flex-wrap:wrap}.blog-article{border:1px solid #262626b8;border-radius:10px;overflow:hidden;width:calc((100% / 3) - 15px);height:400px;background:#02020294;box-shadow:0 0 11px #0000004f}h4.article-title{margin:0;padding:20px 20px 0 20px}.article-content{padding:20px}.featured-image{height:200px;background-size:cover;background-position:center}.button,button,input[type=button],input[type=reset],input[type=submit]{-moz-appearance:none;-webkit-appearance:none;-ms-appearance:none;appearance:none;-moz-transition:background-color .2s ease-in-out,color .2s ease-in-out;-webkit-transition:background-color .2s ease-in-out,color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out,color .2s ease-in-out;transition:background-color .2s ease-in-out,color .2s ease-in-out;border-radius:8px;border:0;cursor:pointer;display:inline-block;font-weight:300;height:2.75em;line-height:2.75em;min-width:9.25em;padding:0 1.5em;text-align:center;text-decoration:none;white-space:nowrap}.button:hover{font-weight:400}h1:first-child,h2:first-child{margin-top:0}div#wrapper{display:flex;height:100%}.right-content{background:#efefef;width:500px;box-sizing:border-box;display:flex;flex-flow:column;padding:0}.content-detail{flex:1;overflow-y:auto;display:flex;flex-flow:column}h2{font-size:25px;display:flex;align-items:center}input.simple-keyboard-input{border:0;padding:20px 10px;font-size:20px;flex-grow:1;width:700px;font-size:2em}input::placeholder{color:#636363}.keyboardContainer{transition:margin-top 1s ease-in-out .5s,opacity 1s ease-in-out .5s,width .3s linear;overflow:hidden;width:100%;z-index:3;max-width:750px;font-size:20px;margin-bottom:40px}.keyboardContainer .simple-keyboard{background:rgba(255,255,255,.9)}.keyboardContainer .simple-keyboard .hg-button{color:rgba(0,0,0,.7);font-weight:300;font-size:20px;font-size:17px}.keyboardContainer .simple-keyboard .hg-button:active{background:rgba(0,0,0,.01)}.inputContainer:after{display:block;content:"";width:3.25em;height:2px;margin:.7em 0 1em 0;border-radius:2px}.inputContainer:after{background-color:#ddd;background-image:-moz-linear-gradient(90deg,#efa8b0,#a89cc8,#8cc9f0);background-image:-webkit-linear-gradient(90deg,#efa8b0,#a89cc8,#8cc9f0);background-image:-ms-linear-gradient(90deg,#efa8b0,#a89cc8,#8cc9f0);background-image:linear-gradient(90deg,#efa8b0,#a89cc8,#8cc9f0)}.simple-keyboard.hg-theme-default .hg-button[data-skbtnuid^=numbers-]{width:33%;max-width:none}.content-block>p:first-child{margin-top:0}.content-block:last-child{display:none}div#codefund a,div#codefund span,div#codefund strong{color:#000!important;text-decoration:none;border:none}div#cf{max-width:500px!important;width:500px}h2 em,h2 i{margin-right:10px!important}.ul-lang{display:flex;flex-wrap:wrap;list-style:none;padding:0}.ul-lang li{background:#e0e0e0;border-radius:5px;padding:3px 10px;margin-bottom:5px;margin-right:5px}.fundzone{border-top:5px solid rgba(0,0,0,.01);height:163px!important;overflow:hidden}strong{color:#1c4994}.qDemo{display:flex;align-items:center;justify-content:center}.spo-widget{border:none!important;width:400px;height:148px}.content-detail{max-height:calc(100vh - 213px)}.right-content{font-size:21px;min-height:100vh}.post-page.page{min-height:calc(100vh - 106px)}.post-page .title-container{display:flex;align-items:center;justify-content:space-between}.post-page h1{padding:67px 20px;border-right:unset}.post-page .featured-image{height:400px;background-size:cover;box-shadow:0 5px 65px #b4b4b63b,0 5px 6px #b4b4b621;border-radius:5px;margin-bottom:20px}.post-page .article-content{padding:20px 0}body.post-body{background:#0f0f0f;color:#a6a6a6}.post-page .title-container .row .col:nth-child(2){min-width:400px!important;justify-content:center;display:flex;align-items:center}.post-page .title-container .row{width:100%}.wp-block-kevinbatdorf-code-block-pro,.wp-block-kevinbatdorf-code-block-pro *{max-width:unset!important;width:unset!important;font-size:16px!important;border-radius:10px!important;overflow:hidden}.wp-block-kevinbatdorf-code-block-pro svg{display:none}span[data-darkreader-inline-bgcolor]:first-child{display:none!important}.wp-block-heading{background:0 0;padding:30px 0}@media screen and (max-width:1120px){div#wrapper{display:block}.intro-content{min-width:unset;margin:20px auto!important;height:auto!important}.content-detail{max-height:unset!important}.btnContainer{text-align:center}.blog-articles{flex-flow:column}.blog-article{width:100%!important}.left-content{max-height:unset!important}.right-content{width:100%}h1{font-size:26px}.button{display:block;margin-right:0!important;margin-bottom:10px}.hg-button.hg-functionBtn.hg-button-space{flex:5}}.powered-text{font-size:14px}</style><script>document.title="Simple-keyboard - The Modern Javascript Virtual Keyboard";</script><style>body{background-color:#1c4995;color:#212529}</style></head><body><script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script><script src="items.js"></script><div id="root"></div><script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.production.min.js"></script><script crossorigin src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.production.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/build/index.js"></script><script src="config.js"></script><script src="items.js"></script><script crossorigin src="https://cdn.jsdelivr.net/npm/@hodgef/[email protected]/build/home.js"></script><script>var PRSSElement=React.createElement(PRSSComponent.default,Object.assign({path:"/",templateId:"blank.home",parser:"react",item:{uuid:"4ae7f7bb-ea8b-4e05-9d7e-35358e652acb",slug:"home",title:"Home",content:' \x3c!-- Wrapper --\x3e\n <div id="wrapper">\n <div class="left-content">\n <div class="intro-content">\n <h1>simple-keyboard</h1>\n <p>The modern virtual keyboard for Javascript<br>\n <span class="tagSndLine">Compatible with your JS, <a title="simple-keyboard for React" href="/react">React</a>, <a href="/angular" title="simple-keyboard for Angular">Angular</a> or <a href="/vuejs" title="simple-keyboard for Vue.js">Vue</a> projects.</span>\n </p>\n <div class="qDemo">\n <div class="keyboardContainer">\n <div class="simple-keyboard"></div>\n </div>\n </div>\n\n <div class="btnContainer">\n <a href="https://simple-keyboard.com/demo" target="_blank" class="button github">\n <span>View Demos</span>\n </a>\n <a href="https://simple-keyboard.com/getting-started/" class="button github">\n <span>Documentation</span>\n </a>\n </div>\n </div>\n <div class="blog">\n <h3><a href="/blog">Explore articles</a></h3>\n {{blogArticles}}\n </div>\n </div>\n\n <div class="right-content">\n <div class="content-detail">\n <p>Simple-keyboard is a <strong>fast</strong>, <strong>dependency-free</strong> and <strong>customizable</strong> virtual keyboard for rich and snappy web applications.</p>\n <div class="content-block">\n <h2><em class="twa twa-heart"></em> Features</h2>\n <ul class="ul-features">\n <li>Supports Angular, React, Vue and Vanilla JS projects.</li>\n <li>Many options and methods to enhance customization.</li>\n <li>Flex-box layout for easy styling.</li>\n <li>Supports Modules such as Autocorrect, Input Mask, among others.</li>\n <li>Ability to style a group of buttons independently, for advanced layouts.</li>\n <li>Great for all types of apps (Kiosks, gamepad-controlled apps, etc).</li>\n <li>Multi-keyboard instance support.</li>\n <li>Ready to use implementation demos.</li>\n <li>And more.</li>\n </ul>\n </div>\n\n <div class="content-block">\n <h2><em class="twa twa-stars"></em> Supported Languages</h2>\n <ul class="ul-lang">\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/arabic/">Arabic</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/burmese/">Burmese</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/chinese/">Chinese</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/czech/">Czech</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/">English</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/french/">French</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/georgian/">Georgian</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/german/">German</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/hebrew/">Hebrew</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/hindi/">Hindi</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/italian/">Italian</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/japanese/">Japanese</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/kannada/">Kannada</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/korean/">Korean</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/russian/">Russian</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/sindhi/">Sindhi</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/spanish/">Spanish</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/thai/">Thai</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/turkish/">Turkish</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/ukrainian/">Ukrainian</a></li>\n <li><a href="https://franciscohodge.com/projects/simple-keyboard/demo-showcase/languages/urdu/">Urdu</a></li>\n </ul>\n </div>\n </div>\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="assets/html/sponsor.html" width="335" height="125"></iframe>\n </div>\n\n\n <div class="footer"><a href="https://prss.io" class="d-flex align-items-center footer-shoutout" target="_blank" rel="noopener"><span class="powered-text">Website Powered by </span><span class="prss-logo-wrapper"><img class="prss-footer-image mx-1" src="data:image/png;base64,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" width="15"> PRSS Site Creator</span></a></div>\n </div>\n\n\n </div>',template:"home",updatedAt:1740382113081,createdAt:1714779163703,vars:{}},rootPath:"",headHtml:'<title>%item.title% - %site.title%</title>\n<script async src="https://www.googletagmanager.com/gtag/js?id=UA-135256973-1"><\/script>\n<script>\n function gtag() {\n dataLayer.push(arguments)\n }\n window.dataLayer = window.dataLayer || [], gtag("js", new Date), gtag("config", "UA-135256973-1");\n<\/script>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">\n<meta name="description" content="Onscreen virtual keyboard compatible with your ES6, React, Vue, Angular or jQuery projects. Available on Github and NPM.">\n<meta name="author" content="Francisco Hodge">\n<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/ico/apple-icon-57x57.png">\n<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/ico/apple-icon-60x60.png">\n<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/ico/apple-icon-72x72.png">\n<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/ico/apple-icon-76x76.png">\n<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/ico/apple-icon-114x114.png">\n<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/ico/apple-icon-120x120.png">\n<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/ico/apple-icon-144x144.png">\n<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/ico/apple-icon-152x152.png">\n<link rel="apple-touch-icon" sizes="180x180" href="/assets/img/ico/apple-icon-180x180.png">\n<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/ico/android-icon-192x192.png">\n<link rel="icon" type="image/png" sizes="32x32" href="/assets/img/ico/favicon-32x32.png">\n<link rel="icon" type="image/png" sizes="96x96" href="/assets/img/ico/favicon-96x96.png">\n<link rel="icon" type="image/png" sizes="16x16" href="/assets/img/ico/favicon-16x16.png">\n<link rel="manifest" href="/assets/img/ico/manifest.json">\n<meta name="msapplication-TileColor" content="#ffffff">\n<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">\n<meta name="theme-color" content="#ffffff">\n<meta name="apple-mobile-web-app-capable" content="yes">\n<meta name="mobile-web-app-capable" content="yes">\n<title>Simple-keyboard - The Modern Javascript Virtual Keyboard</title>\n<meta property="og:title" content="Simple-keyboard - Javascript Virtual Keyboard">\n<meta property="og:description" content="Customizable, responsive and lightweight. Compatible with Vanilla JS, React, Angular, Vue and more.">\n<meta name="twitter:card" content="summary_large_image">\n<meta property="og:image" content="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard-bn.png">\n<meta property="og:url" content="https://virtual-keyboard.js.org">\n<meta property="og:site_name" content="simple-keyboard">\n<meta name="twitter:image:alt" content="Simple-keyboard">\n<link rel="stylesheet" href="/assets/css/fonts.css">\n<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">\n<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">\n<link href="https://virtual-keyboard.js.org/assets/css/twemoji-awesome.css" rel="stylesheet">\n<link rel="stylesheet" href="/assets/css/main.css"><noscript>\n <link rel="stylesheet" href="/assets/css/noscript.css">\n</noscript>\n<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">\n<link rel="stylesheet" href="/assets/css/font-awesome.min.css">\n<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">\n<style>\n body {\n margin: 0;\n padding: 0;\n background: #0f0f0f;\n color: #a6a6a6;\n }\n\n body,\n input,\n select,\n textarea {\n font-family: Roboto, Helvetica, sans-serif;\n font-size: 17pt;\n font-weight: 300;\n line-height: 1.65\n }\n\n h1 {\n font-size: 2.5em;\n line-height: 1.2;\n font-family: skfont;\n font-weight: 400;\n font-style: normal;\n display: inline-block;\n border-right: 25px solid #fff;\n padding-right: 25px;\n letter-spacing: 0;\n margin-bottom: 0\n }\n\n a {\n -moz-transition: color .2s ease, border-bottom .2s ease;\n -webkit-transition: color .2s ease, border-bottom .2s ease;\n -ms-transition: color .2s ease, border-bottom .2s ease;\n transition: color .2s ease, border-bottom .2s ease;\n text-decoration: none;\n color: inherit\n }\n\n a:hover {\n border-bottom-color: transparent\n }\n\n .btnContainer .button {\n box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6)\n }\n\n .btnContainer .button:first-child {\n margin-right: 10px\n }\n\n .right-content {\n padding: 0\n }\n\n .content-detail {\n padding: 20px\n }\n\n .left-content {\n color: #fff;\n flex: 1;\n box-sizing: border-box;\n max-height: 100vh;\n overflow-y: auto\n }\n\n .blog {\n width: 100%;\n overflow: auto;\n background: #000000cc\n }\n\n .intro-content {\n text-align: center;\n margin: 0 auto;\n padding: 20px;\n height: calc(100vh - 130px);\n display: flex;\n align-items: center;\n justify-content: center;\n flex-flow: column\n }\n\n .intro-content h1 {\n margin-bottom: 20px\n }\n\n h3 {\n padding: 19px 34px;\n background: #151515;\n margin: 0\n }\n\n .footer {\n border-top: 1px solid rgba(255, 255, 255, .05);\n background: rgba(0, 0, 0, .05);\n height: 50px;\n font-size: 16px;\n display: flex;\n align-items: center;\n padding: 0 20px;\n box-sizing: border-box;\n font-weight: 500\n }\n\n .footer a.footer-shoutout {\n display: flex;\n align-items: center;\n gap: 4px\n }\n\n .footer img.prss-footer-image {\n margin-left: 2px;\n margin-top: -2px\n }\n\n .prss-logo-wrapper {\n display: flex;\n align-items: center;\n gap: 1px\n }\n\n .qDemo {\n display: flex;\n align-items: center;\n justify-content: center;\n min-width: 100%;\n margin-top: 10px\n }\n\n .blog-articles {\n display: flex;\n padding: 20px;\n gap: 20px;\n flex-wrap: wrap\n }\n\n .blog-article {\n border: 1px solid #262626b8;\n border-radius: 10px;\n overflow: hidden;\n width: calc((100% / 3) - 15px);\n height: 400px;\n background: #02020294;\n box-shadow: 0 0 11px #0000004f\n }\n\n h4.article-title {\n margin: 0;\n padding: 20px 20px 0 20px\n }\n\n .article-content {\n padding: 20px\n }\n\n .featured-image {\n height: 200px;\n background-size: cover;\n background-position: center;\n }\n\n .button,\n button,\n input[type=button],\n input[type=reset],\n input[type=submit] {\n -moz-appearance: none;\n -webkit-appearance: none;\n -ms-appearance: none;\n appearance: none;\n -moz-transition: background-color .2s ease-in-out, color .2s ease-in-out;\n -webkit-transition: background-color .2s ease-in-out, color .2s ease-in-out;\n -ms-transition: background-color .2s ease-in-out, color .2s ease-in-out;\n transition: background-color .2s ease-in-out, color .2s ease-in-out;\n border-radius: 8px;\n border: 0;\n cursor: pointer;\n display: inline-block;\n font-weight: 300;\n height: 2.75em;\n line-height: 2.75em;\n min-width: 9.25em;\n padding: 0 1.5em;\n text-align: center;\n text-decoration: none;\n white-space: nowrap\n }\n\n .button:hover {\n font-weight: 400\n }\n\n h1:first-child,\n h2:first-child {\n margin-top: 0\n }\n\n div#wrapper {\n display: flex;\n height: 100%\n }\n\n .right-content {\n background: #efefef;\n width: 500px;\n box-sizing: border-box;\n display: flex;\n flex-flow: column;\n padding: 0\n }\n\n .content-detail {\n flex: 1;\n overflow-y: auto;\n display: flex;\n flex-flow: column\n }\n\n h2 {\n font-size: 25px;\n display: flex;\n align-items: center\n }\n\n input.simple-keyboard-input {\n border: 0;\n padding: 20px 10px;\n font-size: 20px;\n flex-grow: 1;\n width: 700px;\n font-size: 2em\n }\n\n input::placeholder {\n color: #636363\n }\n\n .keyboardContainer {\n transition: margin-top 1s ease-in-out .5s, opacity 1s ease-in-out .5s, width .3s linear;\n overflow: hidden;\n width: 100%;\n z-index: 3;\n max-width: 750px;\n font-size: 20px;\n margin-bottom: 40px\n }\n\n .keyboardContainer .simple-keyboard {\n background: rgba(255, 255, 255, .9)\n }\n\n .keyboardContainer .simple-keyboard .hg-button {\n color: rgba(0, 0, 0, .7);\n font-weight: 300;\n font-size: 20px;\n font-size: 17px\n }\n\n .keyboardContainer .simple-keyboard .hg-button:active {\n background: rgba(0, 0, 0, .01)\n }\n\n .inputContainer:after {\n display: block;\n content: "";\n width: 3.25em;\n height: 2px;\n margin: .7em 0 1em 0;\n border-radius: 2px\n }\n\n .inputContainer:after {\n background-color: #ddd;\n background-image: -moz-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: -webkit-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: -ms-linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0);\n background-image: linear-gradient(90deg, #efa8b0, #a89cc8, #8cc9f0)\n }\n\n .simple-keyboard.hg-theme-default .hg-button[data-skbtnuid^=numbers-] {\n width: 33%;\n max-width: none\n }\n\n .content-block>p:first-child {\n margin-top: 0\n }\n\n .content-block:last-child {\n display: none\n }\n\n div#codefund a,\n div#codefund span,\n div#codefund strong {\n color: #000 !important;\n text-decoration: none;\n border: none\n }\n\n div#cf {\n max-width: 500px !important;\n width: 500px\n }\n\n h2 em,\n h2 i {\n margin-right: 10px !important\n }\n\n .ul-lang {\n display: flex;\n flex-wrap: wrap;\n list-style: none;\n padding: 0\n }\n\n .ul-lang li {\n background: #e0e0e0;\n border-radius: 5px;\n padding: 3px 10px;\n margin-bottom: 5px;\n margin-right: 5px\n }\n\n .fundzone {\n border-top: 5px solid rgba(0, 0, 0, .01);\n height: 163px !important;\n overflow: hidden\n }\n\n strong {\n color: #1c4994\n }\n\n .qDemo {\n display: flex;\n align-items: center;\n justify-content: center\n }\n\n .spo-widget {\n border: none !important;\n width: 400px;\n height: 148px\n }\n\n .content-detail {\n max-height: calc(100vh - 213px)\n }\n\n .right-content {\n font-size: 21px;\n min-height: 100vh\n }\n\n .post-page.page {\n min-height: calc(100vh - 106px)\n }\n\n .post-page .title-container {\n display: flex;\n align-items: center;\n justify-content: space-between\n }\n\n .post-page h1 {\n padding: 67px 20px;\n border-right: unset\n }\n\n .post-page .featured-image {\n height: 400px;\n background-size: cover;\n box-shadow: 0 5px 65px #b4b4b63b, 0 5px 6px #b4b4b621;\n border-radius: 5px;\n margin-bottom: 20px\n }\n\n .post-page .article-content {\n padding: 20px 0\n }\n\n body.post-body {\n background: #0f0f0f;\n color: #a6a6a6\n }\n\n .post-page .title-container .row .col:nth-child(2) {\n min-width: 400px !important;\n justify-content: center;\n display: flex;\n align-items: center\n }\n\n .post-page .title-container .row {\n width: 100%\n }\n\n .wp-block-kevinbatdorf-code-block-pro,\n .wp-block-kevinbatdorf-code-block-pro * {\n max-width: unset !important;\n width: unset !important;\n font-size: 16px !important;\n border-radius: 10px !important;\n overflow: hidden;\n }\n\n\n .wp-block-kevinbatdorf-code-block-pro svg {\n display: none;\n }\n\n span[data-darkreader-inline-bgcolor]:first-child {\n display: none !important;\n }\n\n .wp-block-heading {\n background: none;\n padding: 30px 0px;\n }\n\n @media screen and (max-width:1120px) {\n div#wrapper {\n display: block\n }\n\n .intro-content {\n min-width: unset;\n margin: 20px auto !important;\n height: auto !important\n }\n\n .content-detail {\n max-height: unset !important\n }\n\n .btnContainer {\n text-align: center\n }\n\n .blog-articles {\n flex-flow: column\n }\n\n .blog-article {\n width: 100% !important\n }\n\n .left-content {\n max-height: unset !important\n }\n\n .right-content {\n width: 100%\n }\n\n h1 {\n font-size: 26px\n }\n\n .button {\n display: block;\n margin-right: 0 !important;\n margin-bottom: 10px\n }\n\n .hg-button.hg-functionBtn.hg-button-space {\n flex: 5\n }\n }\n\n /*.prss-logo-wrapper {*/\n /* display: flex;*/\n /* align-items: center;*/\n /* gap: 5px;*/\n /* letter-spacing: 0px;*/\n /*}*/\n\n /*.prss-logo-wrapper::after {*/\n /* content: "SSR";*/\n /* border-radius: 5px;*/\n /* border: 1px solid #996a37;*/\n /* color: #996a37;*/\n /* font-weight: 500;*/\n /* font-size: 9px;*/\n /* padding: 0px 5px;*/\n /* display: inline-flex;*/\n /* letter-spacing: normal;*/\n /*}*/\n\n .powered-text {\n font-size: 14px;\n }\n</style><script>\r\n document.title = "Simple-keyboard - The Modern Javascript Virtual Keyboard";\r\n<\/script>\r\n<style>\r\n body {\r\n background-color: #1c4995;\r\n color: #212529;\r\n }\r\n</style>',footerHtml:'<script>\r\n if (location.pathname.includes("blog")) {\r\n document.body.classList.add("post-body");\r\n const n = PRSS.getItemChildrenBySlug("blog"),\r\n e = PRSS.getComponent("header"),\r\n t = PRSS.getComponent("footer"),\r\n a = PRSS.getProp("item");\r\n\r\n PRSS.appendToHead(e.headHtml);\r\n PRSS.appendToHead(t.headHtml);\r\n\r\n if ("/blog/" === location.pathname) {\r\n PRSS.setContent("div.app", `\r\n <header>${e.content}</header>\r\n <div class="post-page page">\r\n <div class="container">\r\n <div class="row">\r\n <div class="col">\r\n <div class="title-container">\r\n <div class="row">\r\n <div class="col">\r\n <h1>${a.title}</h1>\r\n </div>\r\n \r\n <div class="col col-md-4">\r\n <div class="fundzone">\r\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125"></iframe>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class="article-content">\r\n ${a.content}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <footer>${t.content}</footer>\r\n `, true);\r\n\r\n PRSS.setContent(".blog-articles", `\r\n ${n.map(n => `\r\n <div class="blog-article">\r\n <a href="${n.url}">\r\n <div class="featured-image" style="${n.vars.featuredImageUrl ? `background-image: url(${n.vars.featuredImageUrl})` : ""}"></div>\r\n <h4 class="article-title">\r\n ${n.title}\r\n </h4>\r\n <div class="article-content">\r\n ${n.content}\r\n </div>\r\n </a>\r\n </div>\r\n `).join("")}\r\n `)\r\n } else {\r\n PRSS.setContent("div.app", `\r\n <header>${e.content}</header>\r\n <div class="post-page page">\r\n <div class="container">\r\n <div class="row">\r\n <div class="col">\r\n <div class="title-container">\r\n <div class="row">\r\n <div class="col">\r\n <h1>${a.title}</h1>\r\n </div>\r\n \r\n <div class="col col-md-4">\r\n <div class="fundzone">\r\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125"></iframe>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class="featured-image" style="${a.vars.featuredImageUrl ? `background-image: url(${a.vars.featuredImageUrl})` : ""}"></div>\r\n <div class="article-content">\r\n ${a.content}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <footer>${t.content}</footer>\r\n `, true)\r\n }\r\n } else {\r\n const n = PRSS.getProp("item");\r\n\r\n let content = n.content;\r\n\r\n if (content.includes("{{blogArticles}}")) {\r\n const n = PRSS.getItemChildrenBySlug("blog");\r\n content = content.replace("{{blogArticles}}", `\r\n <div class="blog-articles">\r\n ${n.map(n => `\r\n <div class="blog-article">\r\n <a href="${n.url}" target="_blank">\r\n <div class="featured-image" style="${n.vars.featuredImageUrl ? `background-image: url(${n.vars.featuredImageUrl})` : ""}"></div>\r\n <h4 class="article-title">\r\n ${n.title}\r\n </h4>\r\n <div class="article-content">\r\n ${n.content}\r\n </div>\r\n </a>\r\n </div>\r\n `).join("")}\r\n </div>\r\n `)\r\n }\r\n\r\n PRSS.setContent("body", content);\r\n }\r\n<\/script>\r\n<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"><\/script> \x3c!-- Scripts --\x3e\r\n <script src="https://cdn.jsdelivr.net/npm/[email protected]/2/twemoji.min.js" crossorigin="anonymous"><\/script>\r\n <script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"><\/script>\r\n <script src="../assets/js/jquery.min.js"><\/script>\r\n \r\n<script>\r\n if (jQuery) {\r\n var isIE = false;\r\n var ua = window.navigator.userAgent;\r\n var old_ie = ua.indexOf(\'MSIE \');\r\n var new_ie = ua.indexOf(\'Trident/\');\r\n\r\n if ((old_ie > -1) || (new_ie > -1)) {\r\n isIE = true;\r\n }\r\n\r\n if (isIE) {\r\n console.log("IE Detected!");\r\n jQuery("body").prepend(\'<div style="position: fixed;background: #e66365;width: 100%;z-index: 999999;padding: 20px 50px;color: white;"><strong>Warning:</strong> Internet Explorer is not supported. Please upgrade to a more modern browser.</div>\');\r\n }\r\n }\r\n<\/script>\r\n<script>\r\n var isMobileWidth = false;\r\n\r\n let Keyboard = window.SimpleKeyboard.default;\r\n\r\n let keyboard = new Keyboard({\r\n onChange: function(input) {\r\n onChange(input)\r\n },\r\n onKeyPress: function(button) {\r\n onKeyPress(button)\r\n },\r\n physicalKeyboardHighlight: true,\r\n maxLength: 70,\r\n mergeDisplay: true,\r\n onInit: function() {\r\n $(\'body\').addClass(\'keyboard-shown\');\r\n //$(".simple-keyboard-input").focus();\r\n },\r\n layout: null,\r\n display: {}\r\n });\r\n\r\n resizeHandler();\r\n\r\n function onChange(input) {\r\n if (!window.skTagline) {\r\n window.skTagline = document.querySelector(\'.tagSndLine\').textContent;\r\n }\r\n document.querySelector(".tagSndLine").textContent = input || window.skTagline;\r\n console.log("Input changed", input);\r\n }\r\n\r\n function onKeyPress(button) {\r\n console.log("Button pressed", button);\r\n\r\n if (button === "{shiftleft}" || button === "{shiftright}" || button === "{capslock}" || button === "{shift}" || button === "{lock}") handleShift();\r\n if (button === "{numbers}" || button === "{abc}") handleNumbers();\r\n\r\n if ($(\'.dot_icon\').hasClass(\'circ_animate\')) {\r\n $(\'.dot_icon\').removeClass(\'circ_animate\');\r\n }\r\n }\r\n\r\n function handleShift() {\r\n let currentLayout = keyboard.options.layoutName;\r\n let shiftToggle = currentLayout === "default" ? "shift" : "default";\r\n\r\n keyboard.setOptions({\r\n layoutName: shiftToggle\r\n });\r\n }\r\n\r\n function handleNumbers() {\r\n let currentLayout = keyboard.options.layoutName;\r\n let numbersToggle = currentLayout !== "numbers" ? "numbers" : "default";\r\n\r\n keyboard.setOptions({\r\n layoutName: numbersToggle\r\n });\r\n }\r\n\r\n\r\n document.addEventListener(\'keydown\', function(e) {\r\n if (e.key === "Tab") {\r\n e.preventDefault();\r\n }\r\n });\r\n\r\n window.addEventListener(\'resize\', resizeHandler);\r\n window.addEventListener(\'orientationchange\', resizeHandler);\r\n\r\n function resizeHandler() {\r\n if (window.innerWidth <= 850) {\r\n if (!isMobileWidth) {\r\n isMobileWidth = true;\r\n keyboard.setOptions({\r\n mergeDisplay: true,\r\n layoutName: "default",\r\n layout: {\r\n \'default\': [\r\n \'q w e r t y u i o p\',\r\n \'a s d f g h j k l\',\r\n \'{shiftleft} z x c v b n m {backspace}\',\r\n \'{numbers} {space} {ent}\'\r\n ],\r\n \'shift\': [\r\n \'Q W E R T Y U I O P\',\r\n \'A S D F G H J K L\',\r\n \'{shiftleft} Z X C V B N M {backspace}\',\r\n \'{numbers} {space} {ent}\'\r\n ],\r\n \'numbers\': [\r\n "1 2 3",\r\n "4 5 6",\r\n "7 8 9",\r\n "{abc} 0 {backspace}",\r\n ]\r\n },\r\n display: {\r\n "{numbers}": "123",\r\n "{ent}": "return",\r\n "{escape}": "esc ⎋",\r\n "{tab}": "tab ⇥",\r\n "{backspace}": "⌫",\r\n "{capslock}": "caps lock ⇪",\r\n "{shiftleft}": "⇧",\r\n "{shiftright}": "shift ⇧",\r\n "{controlleft}": "ctrl ⌃",\r\n "{controlright}": "ctrl ⌃",\r\n "{altleft}": "alt ⌥",\r\n "{altright}": "alt ⌥",\r\n "{metaleft}": "cmd ⌘",\r\n "{metaright}": "cmd ⌘",\r\n "{abc}": "ABC"\r\n }\r\n });\r\n //document.querySelector(".simple-keyboard-input").setAttribute("placeholder", "Tap on the keyboard");\r\n mobileDisableInput();\r\n }\r\n } else {\r\n if (isMobileWidth) {\r\n isMobileWidth = false;\r\n\r\n keyboard.setOptions({\r\n mergeDisplay: true,\r\n layoutName: "default",\r\n layout: {\r\n \'default\': [\r\n \'` 1 2 3 4 5 6 7 8 9 0 - = {backspace}\',\r\n \'{tab} q w e r t y u i o p [ ] \\\\\',\r\n \'{capslock} a s d f g h j k l ; \\\' {enter}\',\r\n \'{shiftleft} z x c v b n m , . / {shiftright}\',\r\n \'.com @ {space}\'\r\n ],\r\n \'shift\': [\r\n \'~ ! @ # $ % ^ & * ( ) _ + {backspace}\',\r\n \'{tab} Q W E R T Y U I O P { } |\',\r\n \'{capslock} A S D F G H J K L : " {enter}\',\r\n \'{shiftleft} Z X C V B N M < > ? {shiftright}\',\r\n \'.com @ {space}\'\r\n ]\r\n },\r\n display: {}\r\n });\r\n //document.querySelector(".simple-keyboard-input").setAttribute("placeholder", "Tap on the keyboard or type to start");\r\n allowInput();\r\n }\r\n }\r\n }\r\n\r\n function mobileDisableInput() {\r\n\r\n if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {\r\n //document.querySelector(".simple-keyboard-input").setAttribute("readonly", "true");\r\n\r\n keyboard.setOptions({\r\n physicalKeyboardHighlight: false\r\n });\r\n\r\n $(\'body\').addClass("mobile");\r\n } else {\r\n $(\'body\').removeClass("mobile");\r\n }\r\n }\r\n\r\n function allowInput() {\r\n\r\n keyboard.setOptions({\r\n physicalKeyboardHighlight: true\r\n });\r\n }\r\n<\/script>',sidebarHtml:"",vars:{heroTitle:"Welcome",heroMessage:"This is your PRSS site. Feel free to add new content and customize to your heart's desire. Happy publishing."}},{site:PRSSConfig}));ReactDOM.render(PRSSElement,document.getElementById("root"));</script><script>if(location.pathname.includes("blog")){document.body.classList.add("post-body");const n=PRSS.getItemChildrenBySlug("blog"),e=PRSS.getComponent("header"),t=PRSS.getComponent("footer"),i=PRSS.getProp("item");PRSS.appendToHead(e.headHtml),PRSS.appendToHead(t.headHtml),"/blog/"===location.pathname?(PRSS.setContent("div.app",`\n <header>${e.content}</header>\n <div class="post-page page">\n <div class="container">\n <div class="row">\n <div class="col">\n <div class="title-container">\n <div class="row">\n <div class="col">\n <h1>${i.title}</h1>\n </div>\n \n <div class="col col-md-4">\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125"></iframe>\n </div>\n </div>\n </div>\n </div>\n <div class="article-content">\n ${i.content}\n </div>\n </div>\n </div>\n </div>\n </div>\n <footer>${t.content}</footer>\n `,!0),PRSS.setContent(".blog-articles",`\n ${n.map(n=>`\n <div class="blog-article">\n <a href="${n.url}">\n <div class="featured-image" style="${n.vars.featuredImageUrl?`background-image: url(${n.vars.featuredImageUrl})`:""}"></div>\n <h4 class="article-title">\n ${n.title}\n </h4>\n <div class="article-content">\n ${n.content}\n </div>\n </a>\n </div>\n `).join("")}\n `)):PRSS.setContent("div.app",`\n <header>${e.content}</header>\n <div class="post-page page">\n <div class="container">\n <div class="row">\n <div class="col">\n <div class="title-container">\n <div class="row">\n <div class="col">\n <h1>${i.title}</h1>\n </div>\n \n <div class="col col-md-4">\n <div class="fundzone">\n <iframe class="spo-widget" scrolling="no" title="Sponsor Widget" src="/assets/html/sponsor.html" width="335" height="125"></iframe>\n </div>\n </div>\n </div>\n </div>\n <div class="featured-image" style="${i.vars.featuredImageUrl?`background-image: url(${i.vars.featuredImageUrl})`:""}"></div>\n <div class="article-content">\n ${i.content}\n </div>\n </div>\n </div>\n </div>\n </div>\n <footer>${t.content}</footer>\n `,!0)}else{let n=PRSS.getProp("item").content;if(n.includes("{{blogArticles}}")){const e=PRSS.getItemChildrenBySlug("blog");n=n.replace("{{blogArticles}}",`\n <div class="blog-articles">\n ${e.map(n=>`\n <div class="blog-article">\n <a href="${n.url}" target="_blank">\n <div class="featured-image" style="${n.vars.featuredImageUrl?`background-image: url(${n.vars.featuredImageUrl})`:""}"></div>\n <h4 class="article-title">\n ${n.title}\n </h4>\n <div class="article-content">\n ${n.content}\n </div>\n </a>\n </div>\n `).join("")}\n </div>\n `)}PRSS.setContent("body",n)}</script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script><!-- Scripts --><script src="https://cdn.jsdelivr.net/npm/[email protected]/2/twemoji.min.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.js"></script><script src="../assets/js/jquery.min.js"></script><script>if(jQuery){var isIE=!1,ua=window.navigator.userAgent,old_ie=ua.indexOf("MSIE "),new_ie=ua.indexOf("Trident/");(old_ie>-1||new_ie>-1)&&(isIE=!0),isIE&&(console.log("IE Detected!"),jQuery("body").prepend('<div style="position: fixed;background: #e66365;width: 100%;z-index: 999999;padding: 20px 50px;color: white;"><strong>Warning:</strong> Internet Explorer is not supported. Please upgrade to a more modern browser.</div>'))}</script><script>var isMobileWidth=!1;let Keyboard=window.SimpleKeyboard.default,keyboard=new Keyboard({onChange:function(e){onChange(e)},onKeyPress:function(e){onKeyPress(e)},physicalKeyboardHighlight:!0,maxLength:70,mergeDisplay:!0,onInit:function(){$("body").addClass("keyboard-shown")},layout:null,display:{}});function onChange(e){window.skTagline||(window.skTagline=document.querySelector(".tagSndLine").textContent),document.querySelector(".tagSndLine").textContent=e||window.skTagline,console.log("Input changed",e)}function onKeyPress(e){console.log("Button pressed",e),"{shiftleft}"!==e&&"{shiftright}"!==e&&"{capslock}"!==e&&"{shift}"!==e&&"{lock}"!==e||handleShift(),"{numbers}"!==e&&"{abc}"!==e||handleNumbers(),$(".dot_icon").hasClass("circ_animate")&&$(".dot_icon").removeClass("circ_animate")}function handleShift(){let e="default"===keyboard.options.layoutName?"shift":"default";keyboard.setOptions({layoutName:e})}function handleNumbers(){let e="numbers"!==keyboard.options.layoutName?"numbers":"default";keyboard.setOptions({layoutName:e})}function resizeHandler(){window.innerWidth<=850?isMobileWidth||(isMobileWidth=!0,keyboard.setOptions({mergeDisplay:!0,layoutName:"default",layout:{default:["q w e r t y u i o p","a s d f g h j k l","{shiftleft} z x c v b n m {backspace}","{numbers} {space} {ent}"],shift:["Q W E R T Y U I O P","A S D F G H J K L","{shiftleft} Z X C V B N M {backspace}","{numbers} {space} {ent}"],numbers:["1 2 3","4 5 6","7 8 9","{abc} 0 {backspace}"]},display:{"{numbers}":"123","{ent}":"return","{escape}":"esc ⎋","{tab}":"tab ⇥","{backspace}":"⌫","{capslock}":"caps lock ⇪","{shiftleft}":"⇧","{shiftright}":"shift ⇧","{controlleft}":"ctrl ⌃","{controlright}":"ctrl ⌃","{altleft}":"alt ⌥","{altright}":"alt ⌥","{metaleft}":"cmd ⌘","{metaright}":"cmd ⌘","{abc}":"ABC"}}),mobileDisableInput()):isMobileWidth&&(isMobileWidth=!1,keyboard.setOptions({mergeDisplay:!0,layoutName:"default",layout:{default:["` 1 2 3 4 5 6 7 8 9 0 - = {backspace}","{tab} q w e r t y u i o p [ ] \\","{capslock} a s d f g h j k l ; ' {enter}","{shiftleft} z x c v b n m , . / {shiftright}",".com @ {space}"],shift:["~ ! @ # $ % ^ & * ( ) _ + {backspace}","{tab} Q W E R T Y U I O P { } |",'{capslock} A S D F G H J K L : " {enter}',"{shiftleft} Z X C V B N M < > ? {shiftright}",".com @ {space}"]},display:{}}),allowInput())}function mobileDisableInput(){/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)?(keyboard.setOptions({physicalKeyboardHighlight:!1}),$("body").addClass("mobile")):$("body").removeClass("mobile")}function allowInput(){keyboard.setOptions({physicalKeyboardHighlight:!0})}resizeHandler(),document.addEventListener("keydown",(function(e){"Tab"===e.key&&e.preventDefault()})),window.addEventListener("resize",resizeHandler),window.addEventListener("orientationchange",resizeHandler);</script></body></html>