PJ568
2 years ago
parent
df097c82c9
commit
9486f11c80
@ -1,27 +0,0 @@
|
||||
# Online Keyboard & Mouse Tester
|
||||
|
||||
<p><h2>hi geeks,Welcome!</h2></p>
|
||||
<p><h4>Features</h4></p>
|
||||
<ul>
|
||||
<li>Supported by any Keyboard (English Layout)</li>
|
||||
<li>Both the down stroke and the up stroke are highlighted in different colors.</li>
|
||||
<li>Display the name of the pressed KEY</li>
|
||||
<li>Differentiate between duplicate keys (SHIFT,ALT,CTRL,ENTER)</li>
|
||||
<li>Total 106 different keys test</li>
|
||||
<li>Available : Mouse Left,RIght,Middle key & Scroll Up,Scroll Down tests </li>
|
||||
<li>User friendly UI</li>
|
||||
</ul>
|
||||
<p><h4>CHECK THIS APPS LIVE: <a href="https://shawon9324.github.io/apps/keytester ">https://shawon9324.github.io/apps/keytester </a></h4></p>
|
||||
|
||||
## MAIN PAGE:
|
||||
<img src="img/main_page.PNG" alt="main_page">
|
||||
|
||||
## WORKING PROCESS:
|
||||
|
||||
<img src="img/test_process.PNG" alt="test_process">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -1,355 +0,0 @@
|
||||
@font-face {
|
||||
font-family: Helvetica;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../css/helvthin.otf);
|
||||
}
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: "Helvetica";
|
||||
background-color: #000;
|
||||
}
|
||||
header {
|
||||
background: url(../img/background.jpg) no-repeat 50% 50%;
|
||||
background-color: #000;
|
||||
height: 950px;
|
||||
overflow: auto;
|
||||
}
|
||||
.key {
|
||||
border: 1px solid red;
|
||||
border-radius: 8px;
|
||||
color: red;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
height: 52px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 52px;
|
||||
margin: 5px 1px;
|
||||
border-bottom: 2px solid red;
|
||||
}
|
||||
.keyFunc {
|
||||
border: 1px solid red;
|
||||
border-radius: 8px;
|
||||
color: red;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
height: 35px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
width: 47px;
|
||||
margin: 5px 1px;
|
||||
border-bottom: 2px solid red;
|
||||
}
|
||||
.keyboard-body {
|
||||
height: 650px;
|
||||
margin: 5px auto 0;
|
||||
width: 1264px;
|
||||
position: relative;
|
||||
}
|
||||
.header-gap {
|
||||
width: 1264px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
.header-gap > div {
|
||||
display: inline-block;
|
||||
margin: 0 90px;
|
||||
}
|
||||
.keyboard-bg-blur {
|
||||
background: rgba(0, 0, 0, 0) url(../img/background.jpg) no-repeat scroll
|
||||
center 51%;
|
||||
filter: blur(50px);
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.keyboard-bg-fade {
|
||||
background-color: #000;
|
||||
height: 100%;
|
||||
opacity: 0.5;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
}
|
||||
.content {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
z-index: 3;
|
||||
}
|
||||
.keyboard-header {
|
||||
background-color: #000;
|
||||
color: #008b8b;
|
||||
height: 50px;
|
||||
overflow: hidden;
|
||||
padding-top: 5px;
|
||||
width: 100%;
|
||||
border: 1px solid #8b0000;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.keyOutput {
|
||||
border: 1px solid #008b8b;
|
||||
border-radius: 8px;
|
||||
color: #008b8b;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
width: 120px;
|
||||
margin: 7px 0;
|
||||
font-family: consolas;
|
||||
}
|
||||
.keyOutput > p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
.areaGap {
|
||||
visibility: hidden;
|
||||
}
|
||||
.delKey {
|
||||
font-size: 15px;
|
||||
line-height: 0.9;
|
||||
}
|
||||
.delKey > p {
|
||||
margin-top: 14px;
|
||||
}
|
||||
.t16 {
|
||||
font-size: 16px;
|
||||
}
|
||||
.t16 > p {
|
||||
margin-top: 18px;
|
||||
}
|
||||
.key.delKey.minSize > p {
|
||||
font-size: 28px;
|
||||
margin-top: -2px;
|
||||
}
|
||||
.key.delKey.plusKey > p {
|
||||
font-size: 20px;
|
||||
line-height: 0.7;
|
||||
}
|
||||
.brackets {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.gapWidth {
|
||||
width: 2px;
|
||||
}
|
||||
.keyboard-section {
|
||||
padding: 0 22px;
|
||||
}
|
||||
.key.backSpace > p {
|
||||
margin: 10px;
|
||||
transform: translateY(-26px);
|
||||
text-align: center;
|
||||
margin-left: 60px;
|
||||
}
|
||||
.key.backSpace {
|
||||
font-size: 35px;
|
||||
width: 177px;
|
||||
}
|
||||
.key.tab {
|
||||
text-align: left;
|
||||
width: 83px;
|
||||
}
|
||||
.key.arithmeticKey > p {
|
||||
font-size: 20px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.key.arithmeticKey.backslash {
|
||||
width: 146px;
|
||||
}
|
||||
.key.plus {
|
||||
float: right;
|
||||
height: 116px;
|
||||
}
|
||||
.key.plus > p {
|
||||
margin-top: 45px;
|
||||
}
|
||||
.key.caps {
|
||||
font-size: 16px;
|
||||
width: 105px;
|
||||
}
|
||||
.key.caps > p {
|
||||
text-align: left;
|
||||
margin-left: 7px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.key.enter {
|
||||
width: 184px;
|
||||
}
|
||||
.key.enter > p {
|
||||
text-align: left;
|
||||
margin-left: 112px;
|
||||
font-size: 44px;
|
||||
transform: translateY(-70px);
|
||||
}
|
||||
.key.shiftLeft {
|
||||
width: 132px;
|
||||
}
|
||||
.key.shiftLeft > p,
|
||||
.key.shiftRight > p {
|
||||
font-size: 16px;
|
||||
margin-top: 18px;
|
||||
text-align: left;
|
||||
margin-left: 7px;
|
||||
}
|
||||
.key.shiftRight {
|
||||
width: 157px;
|
||||
}
|
||||
.key.enterRight {
|
||||
float: right;
|
||||
height: 116px;
|
||||
}
|
||||
.key.enterRight > p {
|
||||
font-size: 16px;
|
||||
margin-top: 48px;
|
||||
}
|
||||
.key.ctrl1,
|
||||
.key.ctrl2 {
|
||||
text-align: left;
|
||||
width: 95px;
|
||||
}
|
||||
.key.cont {
|
||||
width: 66px;
|
||||
}
|
||||
.key.cont > p {
|
||||
margin: 14px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
.key.arrowUp > p {
|
||||
font-size: 26px;
|
||||
margin-top: 9px;
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.key.wndw > p {
|
||||
margin: 14px auto 0;
|
||||
text-align: center;
|
||||
}
|
||||
.key.wndw {
|
||||
width: 70px;
|
||||
}
|
||||
.key.alt {
|
||||
width: 70px;
|
||||
}
|
||||
.key.space {
|
||||
width: 325px;
|
||||
}
|
||||
.key.zero {
|
||||
width: 112px;
|
||||
}
|
||||
.key.lclick {
|
||||
border-radius: 55px 0 0 0;
|
||||
height: 70px;
|
||||
vertical-align: bottom;
|
||||
width: 96px;
|
||||
}
|
||||
.key.rclick {
|
||||
border-radius: 0 55px 0 0;
|
||||
height: 70px;
|
||||
vertical-align: bottom;
|
||||
width: 96px;
|
||||
}
|
||||
.key.cclick {
|
||||
border-radius: 10px;
|
||||
height: 50px;
|
||||
margin-top: 15px;
|
||||
vertical-align: top;
|
||||
width: 24px;
|
||||
}
|
||||
.key.scrollUp {
|
||||
border-radius: 0 0 0 0;
|
||||
height: 20px;
|
||||
vertical-align: top;
|
||||
width: 96px;
|
||||
}
|
||||
.key.scrollDown {
|
||||
border-radius: 0 0 0 0;
|
||||
height: 20px;
|
||||
vertical-align: top;
|
||||
width: 96px;
|
||||
}
|
||||
.key.divider {
|
||||
border-radius: 0;
|
||||
height: 0;
|
||||
margin-top: 0;
|
||||
vertical-align: top;
|
||||
width: 24px;
|
||||
border-color: #000;
|
||||
}
|
||||
.mouse-section {
|
||||
text-align: center;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.key.arrowLeft > p,
|
||||
.key.arrowRight > p {
|
||||
font-size: 26px;
|
||||
margin: 11px 0;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.key.arrowDown > p {
|
||||
font-size: 26px;
|
||||
margin: 14px 0 14px 5px;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
padding: 25px 0;
|
||||
}
|
||||
.key.press,
|
||||
.keyFunc.press {
|
||||
background-color: #00ced1;
|
||||
border-color: #00e1ef;
|
||||
color: #000;
|
||||
top: 0.2em;
|
||||
box-shadow: 0 0 0 0.05em #000;
|
||||
}
|
||||
.key.active,
|
||||
.keyFunc.active {
|
||||
background-color: #000;
|
||||
border-color: #00e1ef;
|
||||
color: #01c7d4;
|
||||
top: 0.2em;
|
||||
box-shadow: 0 0 0 0.05em #000;
|
||||
}
|
||||
.key.enter.active span,
|
||||
.key.enter.press span {
|
||||
background-position: -24px -13px;
|
||||
}
|
||||
.sliding_text_info {
|
||||
background-color: rgba(2, 12, 20, 0.8);
|
||||
bottom: 0;
|
||||
color: rgba(0, 139, 139, 0.658);
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
left: 0;
|
||||
padding: 10px;
|
||||
right: 0;
|
||||
z-index: 200;
|
||||
font-family: consolas;
|
||||
}
|
||||
.footer-text {
|
||||
background-color: #000;
|
||||
bottom: 0;
|
||||
color: #2f4f4f;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
left: 0;
|
||||
padding: 16px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: 10;
|
||||
text-align: center;
|
||||
font-family: consolas;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 119 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 203 KiB |
|
Before Width: | Height: | Size: 127 KiB |
|
Before Width: | Height: | Size: 205 KiB |
@ -1,422 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
|
||||
<meta name="robots" content="all" />
|
||||
<meta property="og:title" content="Online Keyboard & Mouse Tester" />
|
||||
<meta property="og:description" content="An Online Testing Utility that helps you to test all keys on
|
||||
your keyboard. Works accurate with any keyboard and any browser" />
|
||||
<meta property="og:image" content="img/meta_image.PNG" />
|
||||
<meta property="og:url" content="https://shawon9324.github.io/apps/keytester" />
|
||||
<meta name="description" content="Online Keyboard & Mouse Tester" />
|
||||
<meta name="keywords" content="mouse,checker,test, keyboard, button, online, key-test, keys" />
|
||||
<link rel="shortcut icon" type="image/x-icon" href="img/keyboard (5).png" />
|
||||
<title>Keyboard & Mouse Tester</title>
|
||||
<link rel="stylesheet" href="css/style.css" />
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.js"
|
||||
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
|
||||
<script src="js/custom-script.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
|
||||
integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
|
||||
crossorigin="anonymous" />
|
||||
<link rel="stylesheet" href="css/dark.min.css" />
|
||||
<script src="js/sweetalert2.min.js"></script>
|
||||
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5f7726941438d6cb"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="header-gap">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<br /><br /><br />
|
||||
<div class="keyboard-body">
|
||||
<div class="keyboard-bg-blur"></div>
|
||||
<div class="keyboard-bg-fade"></div>
|
||||
<div class="content">
|
||||
<div class="keyboard-header"></div>
|
||||
<br /><br />
|
||||
<div class="keyboard-section">
|
||||
<div class="keyFunc key27">
|
||||
<p>ESC</p>
|
||||
</div>
|
||||
<div class="keyFunc key112">
|
||||
<p>F1</p>
|
||||
</div>
|
||||
<div class="keyFunc key113">
|
||||
<p>F2</p>
|
||||
</div>
|
||||
<div class="keyFunc key114">
|
||||
<p>F3</p>
|
||||
</div>
|
||||
<div class="keyFunc key115">
|
||||
<p>F4</p>
|
||||
</div>
|
||||
<div class="keyFunc key116">
|
||||
<p>F5</p>
|
||||
</div>
|
||||
<div class="keyFunc key117">
|
||||
<p>F6</p>
|
||||
</div>
|
||||
<div class="keyFunc key118">
|
||||
<p>F7</p>
|
||||
</div>
|
||||
<div class="keyFunc key119">
|
||||
<p>F8</p>
|
||||
</div>
|
||||
<div class="keyFunc key120">
|
||||
<p>F9</p>
|
||||
</div>
|
||||
<div class="keyFunc key121">
|
||||
<p>F10</p>
|
||||
</div>
|
||||
<div class="keyFunc key122">
|
||||
<p>F11</p>
|
||||
</div>
|
||||
<div class="keyFunc key123">
|
||||
<p>F12</p>
|
||||
</div>
|
||||
<div class="keyFunc key19" style="font-size: 10px">
|
||||
<p>
|
||||
Pause <br />
|
||||
break
|
||||
</p>
|
||||
</div>
|
||||
<div class="keyFunc key44">
|
||||
<p>prt sc</p>
|
||||
</div>
|
||||
<div class="keyFunc key46">
|
||||
<p>del</p>
|
||||
</div>
|
||||
<div class="keyFunc key36">
|
||||
<p>home</p>
|
||||
</div>
|
||||
<div class="keyFunc key33">
|
||||
<p>pgup</p>
|
||||
</div>
|
||||
<div class="keyFunc key34">
|
||||
<p>pgdn</p>
|
||||
</div>
|
||||
<div class="keyFunc key145">
|
||||
<p>scr lk</p>
|
||||
</div>
|
||||
<div class="keyFunc key45">
|
||||
<p>ins</p>
|
||||
</div>
|
||||
<div class="keyFunc key35">
|
||||
<p>end</p>
|
||||
</div>
|
||||
<div class="key delKey key192">
|
||||
<p style="font-size: 40px">`</p>
|
||||
</div>
|
||||
<div class="key key49">
|
||||
<p>1</p>
|
||||
</div>
|
||||
<div class="key key50">
|
||||
<p>2</p>
|
||||
</div>
|
||||
<div class="key key51">
|
||||
<p>3</p>
|
||||
</div>
|
||||
<div class="key key52">
|
||||
<p>4</p>
|
||||
</div>
|
||||
<div class="key key53">
|
||||
<p>5</p>
|
||||
</div>
|
||||
<div class="key key54">
|
||||
<p>6</p>
|
||||
</div>
|
||||
<div class="key key55">
|
||||
<p>7</p>
|
||||
</div>
|
||||
<div class="key key56">
|
||||
<p>8</p>
|
||||
</div>
|
||||
<div class="key key57">
|
||||
<p>9</p>
|
||||
</div>
|
||||
<div class="key key48">
|
||||
<p>0</p>
|
||||
</div>
|
||||
<div class="key delKey minSize key173 key189">
|
||||
<p>_<br />-</p>
|
||||
</div>
|
||||
<div class="key delKey plusKey key61 key187">
|
||||
<p>+<br />=</p>
|
||||
</div>
|
||||
<div class="key backSpace key8">
|
||||
<div class="mod" style="
|
||||
font-size: 14;
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
">
|
||||
backspace
|
||||
</div>
|
||||
<p>⟵</p>
|
||||
</div>
|
||||
<div class="key areaGap gapWidth"></div>
|
||||
<div class="key delKey key144">
|
||||
<p>num lk</p>
|
||||
</div>
|
||||
<div class="key key111">
|
||||
<p>/</p>
|
||||
</div>
|
||||
<div class="key key106">
|
||||
<p>*</p>
|
||||
</div>
|
||||
<div class="key delKey key109">
|
||||
<p>_</p>
|
||||
</div>
|
||||
<div class="key tab key9">
|
||||
<p style="margin-left: 7px">tab ⇄</p>
|
||||
</div>
|
||||
<div class="key key81">
|
||||
<p>Q</p>
|
||||
</div>
|
||||
<div class="key key87">
|
||||
<p>W</p>
|
||||
</div>
|
||||
<div class="key key69">
|
||||
<p>E</p>
|
||||
</div>
|
||||
<div class="key key82">
|
||||
<p>R</p>
|
||||
</div>
|
||||
<div class="key key84">
|
||||
<p>T</p>
|
||||
</div>
|
||||
<div class="key key89">
|
||||
<p>Y</p>
|
||||
</div>
|
||||
<div class="key key85">
|
||||
<p>U</p>
|
||||
</div>
|
||||
<div class="key key73">
|
||||
<p>I</p>
|
||||
</div>
|
||||
<div class="key key79">
|
||||
<p>O</p>
|
||||
</div>
|
||||
<div class="key key80">
|
||||
<p>P</p>
|
||||
</div>
|
||||
<div class="key key219">
|
||||
<p>[</p>
|
||||
</div>
|
||||
<div class="key key221">
|
||||
<p>]</p>
|
||||
</div>
|
||||
<div class="key arithmeticKey backslash key220">
|
||||
<p>\</p>
|
||||
</div>
|
||||
<div class="key areaGap gapWidth"></div>
|
||||
<div class="key key103">
|
||||
<p>7</p>
|
||||
</div>
|
||||
<div class="key key104">
|
||||
<p>8</p>
|
||||
</div>
|
||||
<div class="key key105">
|
||||
<p>9</p>
|
||||
</div>
|
||||
<div class="key plus key107">
|
||||
<p>+</p>
|
||||
</div>
|
||||
<div class="key caps key20">
|
||||
<p>caps lock</p>
|
||||
</div>
|
||||
<div class="key key65">
|
||||
<p>A</p>
|
||||
</div>
|
||||
<div class="key key83">
|
||||
<p>S</p>
|
||||
</div>
|
||||
<div class="key key68">
|
||||
<p>D</p>
|
||||
</div>
|
||||
<div class="key key70">
|
||||
<p>F</p>
|
||||
</div>
|
||||
<div class="key key71">
|
||||
<p>G</p>
|
||||
</div>
|
||||
<div class="key key72">
|
||||
<p>H</p>
|
||||
</div>
|
||||
<div class="key key74">
|
||||
<p>J</p>
|
||||
</div>
|
||||
<div class="key key75">
|
||||
<p>K</p>
|
||||
</div>
|
||||
<div class="key key76">
|
||||
<p>L</p>
|
||||
</div>
|
||||
<div class="key arithmeticKey key59 key186">
|
||||
<p>;</p>
|
||||
</div>
|
||||
<div class="key arithmeticKey key222">
|
||||
<p>'</p>
|
||||
</div>
|
||||
<div class="key enter key13">
|
||||
<div class="mod" style="
|
||||
font-size: 16px;
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
margin-right: 20px;
|
||||
">
|
||||
enter
|
||||
</div>
|
||||
<p>⬑</p>
|
||||
</div>
|
||||
<div class="key areaGap gapWidth"></div>
|
||||
<div class="key key100">
|
||||
<p>4</p>
|
||||
</div>
|
||||
<div class="key key101">
|
||||
<p>5</p>
|
||||
</div>
|
||||
<div class="key key102">
|
||||
<p>6</p>
|
||||
</div>
|
||||
<div class="key shiftLeft key16">
|
||||
<p>shift ⇧</p>
|
||||
</div>
|
||||
<div class="key key90">
|
||||
<p>Z</p>
|
||||
</div>
|
||||
<div class="key key88">
|
||||
<p>X</p>
|
||||
</div>
|
||||
<div class="key key67">
|
||||
<p>C</p>
|
||||
</div>
|
||||
<div class="key key86">
|
||||
<p>V</p>
|
||||
</div>
|
||||
<div class="key key66">
|
||||
<p>B</p>
|
||||
</div>
|
||||
<div class="key key78">
|
||||
<p>N</p>
|
||||
</div>
|
||||
<div class="key key77">
|
||||
<p>M</p>
|
||||
</div>
|
||||
<div class="key arithmeticKey key188">
|
||||
<p>,</p>
|
||||
</div>
|
||||
<div class="key arithmeticKey key190">
|
||||
<p>.</p>
|
||||
</div>
|
||||
<div class="key arithmeticKey key191">
|
||||
<p>/</p>
|
||||
</div>
|
||||
<div class="key shiftRight keyPosShiftRight">
|
||||
<p style="text-align: right; margin-right: 10px">shift ⇧</p>
|
||||
</div>
|
||||
<div class="key arrowUp key38">
|
||||
<p>➤</p>
|
||||
</div>
|
||||
<div class="key areaGap gapWidth"></div>
|
||||
<div class="key key97">
|
||||
<p>1</p>
|
||||
</div>
|
||||
<div class="key key98">
|
||||
<p>2</p>
|
||||
</div>
|
||||
<div class="key key99">
|
||||
<p>3</p>
|
||||
</div>
|
||||
<div class="key enterRight keyPosNumpadEnter">
|
||||
<p>enter</p>
|
||||
</div>
|
||||
<div class="key ctrl1 key17">
|
||||
<p style="margin-left: 7px">ctrl</p>
|
||||
</div>
|
||||
<div class="key wndw key91">
|
||||
<p style="font-size: 22px">
|
||||
<i class="fa fa-windows" aria-hidden="true"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="key alt key18">
|
||||
<p>alt</p>
|
||||
</div>
|
||||
<div class="key space key32"></div>
|
||||
<div class="key alt keyPosAltRight">
|
||||
<p>alt gr</p>
|
||||
</div>
|
||||
<div class="key cont key93">
|
||||
<p style="font-size: 28px">
|
||||
<i class="fa fa-file-text-o" aria-hidden="true"></i>
|
||||
</p>
|
||||
</div>
|
||||
<div class="key ctrl2 keyPosControlRight">
|
||||
<p style="text-align: right; margin-right: 10px">ctrl</p>
|
||||
</div>
|
||||
<div class="key arrowLeft key37">
|
||||
<p>➤</p>
|
||||
</div>
|
||||
<div class="key arrowDown key40">
|
||||
<p>➤</p>
|
||||
</div>
|
||||
<div class="key areaGap gapWidth"></div>
|
||||
<div class="key arrowRight key39">
|
||||
<p style="transform: rotate(-0deg)">➤</p>
|
||||
</div>
|
||||
<div class="key key96">
|
||||
<p>0</p>
|
||||
</div>
|
||||
<div class="key key110">
|
||||
<p><b>.</b></p>
|
||||
</div>
|
||||
<br /><br />
|
||||
<div class="mouse-section">
|
||||
<div class="key lclick key0"></div>
|
||||
<div class="key cclick key1"></div>
|
||||
<div class="key rclick key2"></div>
|
||||
</div>
|
||||
<div class="mouse-section">
|
||||
<div class="key scrollUp">▲</div>
|
||||
<div class="key divider"></div>
|
||||
<div class="key scrollDown">▼</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: inline-block">
|
||||
<x style="
|
||||
color: hsla(0, 100%, 50%, 0.678);
|
||||
font-size: 12px;
|
||||
font-family: consolas;
|
||||
"></x>
|
||||
<y style="
|
||||
color: hsla(0, 100%, 50%, 0.678);
|
||||
font-size: 12px;
|
||||
font-family: consolas;
|
||||
"></y>
|
||||
</div>
|
||||
<br /><br />
|
||||
|
||||
<div class="sliding_text_info">
|
||||
<marquee direction="left">FOR AN ACCURATE KEY TEST, PLEASE MAKE SURE THAT YOUR KEYBOARD
|
||||
LAYOUT IS ENGLISH!</marquee>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div class="footer-text">
|
||||
<div class="addthis_inline_share_toolbox"></div>
|
||||
<i class="fa fa-cog fa-spin" aria-hidden="true"></i> Online Keyboard &
|
||||
Mouse Tester<br />
|
||||
Copyright <i class="fa fa-copyright" aria-hidden="true"></i> 2020 Creative
|
||||
Dev Labs<br />
|
||||
<i class="fa fa-github" aria-hidden="true"></i>/shawon9324
|
||||
<br>
|
||||
<!-- Start of WebFreeCounter Code -->
|
||||
<a style="float: right;" href="http://www.statworker.com/" target="_blank"><img src="https://www.webfreecounter.com/hit.php?id=gfpfdk&nd=7&style=15" border="0" alt="statworker.com"></a>
|
||||
<!-- End of WebFreeCounter Code -->
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script src="/js/push_to_baidu.js"></script>
|
||||
@ -1,434 +0,0 @@
|
||||
$(document).ready(function () {
|
||||
load();
|
||||
$(document).on("keyup press", function (event) {
|
||||
event.preventDefault();
|
||||
var key = event.keyCode;
|
||||
var key_pos = event.code;
|
||||
if (key_pos == "NumpadEnter") {
|
||||
$(".keyPos" + key_pos).removeClass("press");
|
||||
$(".keyPos" + key_pos).addClass("active");
|
||||
keyNameDisplay(KeyNamelist(key_pos));
|
||||
} else if (key_pos == "ShiftRight") {
|
||||
$(".keyPos" + key_pos).removeClass("press");
|
||||
$(".keyPos" + key_pos).addClass("active");
|
||||
keyNameDisplay(KeyNamelist(key_pos));
|
||||
} else if (key_pos == "ControlRight") {
|
||||
$(".keyPos" + key_pos).removeClass("press");
|
||||
$(".keyPos" + key_pos).addClass("active");
|
||||
keyNameDisplay(KeyNamelist(key_pos));
|
||||
} else if (key_pos == "AltRight") {
|
||||
$(".keyPos" + key_pos).removeClass("press");
|
||||
$(".keyPos" + key_pos).addClass("active");
|
||||
keyNameDisplay(KeyNamelist(key_pos));
|
||||
} else {
|
||||
$(".key" + key).removeClass("press");
|
||||
$(".key" + key).addClass("active");
|
||||
keyNameDisplay(KeyNamelist(key));
|
||||
}
|
||||
});
|
||||
$(document).on("keydown", function (event) {
|
||||
event.preventDefault();
|
||||
var key = event.keyCode;
|
||||
var key_pos = event.code;
|
||||
if (key_pos == "NumpadEnter") {
|
||||
$(".keyPos" + key_pos).removeClass("active");
|
||||
$(".keyPos" + key_pos).addClass("press");
|
||||
} else if (key_pos == "ShiftRight") {
|
||||
$(".keyPos" + key_pos).removeClass("active");
|
||||
$(".keyPos" + key_pos).addClass("press");
|
||||
} else if (key_pos == "ControlRight") {
|
||||
$(".keyPos" + key_pos).removeClass("active");
|
||||
$(".keyPos" + key_pos).addClass("press");
|
||||
} else if (key_pos == "AltRight") {
|
||||
$(".keyPos" + key_pos).removeClass("active");
|
||||
$(".keyPos" + key_pos).addClass("press");
|
||||
} else {
|
||||
$(".key" + key).removeClass("active");
|
||||
$(".key" + key).addClass("press");
|
||||
}
|
||||
});
|
||||
$(document).on("mouseup", function (event) {
|
||||
event.preventDefault();
|
||||
var key = event.button;
|
||||
$(".key" + key).removeClass("press");
|
||||
$(".key" + key).addClass("active");
|
||||
keyNameDisplay(KeyNamelist(key));
|
||||
});
|
||||
$(document).on("mousedown", function (event) {
|
||||
event.preventDefault();
|
||||
var key = event.button;
|
||||
$(".key" + key).removeClass("active");
|
||||
$(".key" + key).addClass("press");
|
||||
});
|
||||
|
||||
$(document).bind("contextmenu", function (event) {
|
||||
return false;
|
||||
});
|
||||
|
||||
$(document).mousemove(function (event) {
|
||||
$("x").text(event.pageX + ", " + event.pageY);
|
||||
});
|
||||
|
||||
$(document).keydown(function (event) {
|
||||
event.preventDefault();
|
||||
var key1 = event.code;
|
||||
$("y").text(key1);
|
||||
});
|
||||
});
|
||||
|
||||
$(window).on("wheel", function (event) {
|
||||
event.preventDefault();
|
||||
var delta = event.originalEvent.deltaY;
|
||||
if (delta > 0) {
|
||||
$(".scrollDown").removeClass("active");
|
||||
$(".scrollDown").addClass("press");
|
||||
$(".scrollDown").removeClass("press");
|
||||
$(".scrollDown").addClass("active");
|
||||
} else {
|
||||
$(".scrollUp").removeClass("active");
|
||||
$(".scrollUp").addClass("press");
|
||||
$(".scrollUp").removeClass("press");
|
||||
$(".scrollUp").addClass("active");
|
||||
}
|
||||
});
|
||||
|
||||
function keyNameDisplay(keyName) {
|
||||
var str =
|
||||
' <div class="keyOutput"><p>' +
|
||||
keyName +
|
||||
"</p></div>";
|
||||
$(".keyboard-header").prepend(str);
|
||||
}
|
||||
function load() {
|
||||
Swal.fire({
|
||||
title: "Loading...",
|
||||
html:
|
||||
'<i class="fa fa-cog fa-spin" aria-hidden="true"></i> Online Keyboard & Mouse Tester',
|
||||
timer: 1000,
|
||||
timerProgressBar: true,
|
||||
showConfirmButton: false,
|
||||
});
|
||||
}
|
||||
function KeyNamelist(keyCode) {
|
||||
switch (keyCode) {
|
||||
case "NumpadEnter":
|
||||
return "Numpad Enter";
|
||||
break;
|
||||
case "ShiftRight":
|
||||
return "Shift Right";
|
||||
break;
|
||||
case "ControlRight":
|
||||
return "CTRL Right";
|
||||
break;
|
||||
case "AltRight":
|
||||
return "ALT Right";
|
||||
break;
|
||||
case 27:
|
||||
return "ESC";
|
||||
break;
|
||||
case 112:
|
||||
return "F1";
|
||||
break;
|
||||
case 113:
|
||||
return "F2";
|
||||
break;
|
||||
case 114:
|
||||
return "F3";
|
||||
break;
|
||||
case 115:
|
||||
return "F4";
|
||||
break;
|
||||
case 116:
|
||||
return "F5";
|
||||
break;
|
||||
case 117:
|
||||
return "F6";
|
||||
break;
|
||||
case 118:
|
||||
return "F7";
|
||||
break;
|
||||
case 119:
|
||||
return "F8";
|
||||
break;
|
||||
case 120:
|
||||
return "F9";
|
||||
break;
|
||||
case 121:
|
||||
return "F10";
|
||||
break;
|
||||
case 122:
|
||||
return "F11";
|
||||
break;
|
||||
case 123:
|
||||
return "F12";
|
||||
break;
|
||||
case 145:
|
||||
return "Scr Lk";
|
||||
break;
|
||||
case 19:
|
||||
return "Pause break";
|
||||
break;
|
||||
case 45:
|
||||
return "ins";
|
||||
break;
|
||||
case 46:
|
||||
return "del";
|
||||
break;
|
||||
case 36:
|
||||
return "home";
|
||||
break;
|
||||
case 35:
|
||||
return "end";
|
||||
break;
|
||||
case 33:
|
||||
return "page up";
|
||||
break;
|
||||
case 34:
|
||||
return "page down";
|
||||
break;
|
||||
case 192:
|
||||
return "`";
|
||||
break;
|
||||
case 49:
|
||||
return "1";
|
||||
break;
|
||||
case 50:
|
||||
return "2";
|
||||
break;
|
||||
case 51:
|
||||
return "3";
|
||||
break;
|
||||
case 52:
|
||||
return "4";
|
||||
break;
|
||||
case 53:
|
||||
return "5";
|
||||
break;
|
||||
case 54:
|
||||
return "6";
|
||||
break;
|
||||
case 55:
|
||||
return "7";
|
||||
break;
|
||||
case 56:
|
||||
return "8";
|
||||
break;
|
||||
case 57:
|
||||
return "9";
|
||||
break;
|
||||
case 48:
|
||||
return "0";
|
||||
break;
|
||||
case 189:
|
||||
return "-";
|
||||
break;
|
||||
case 187:
|
||||
return "=";
|
||||
break;
|
||||
case 8:
|
||||
return "backspace";
|
||||
break;
|
||||
case 144:
|
||||
return "Numpad Lock";
|
||||
break;
|
||||
case 111:
|
||||
return "Numpad /";
|
||||
break;
|
||||
case 106:
|
||||
return "Numpad *";
|
||||
break;
|
||||
case 109:
|
||||
return "Numpad -";
|
||||
break;
|
||||
case 9:
|
||||
return "tab";
|
||||
break;
|
||||
case 81:
|
||||
return "Q";
|
||||
break;
|
||||
case 87:
|
||||
return "W";
|
||||
break;
|
||||
case 69:
|
||||
return "E";
|
||||
break;
|
||||
case 82:
|
||||
return "R";
|
||||
break;
|
||||
case 84:
|
||||
return "T";
|
||||
break;
|
||||
case 89:
|
||||
return "Y";
|
||||
break;
|
||||
case 85:
|
||||
return "U";
|
||||
break;
|
||||
case 73:
|
||||
return "I";
|
||||
break;
|
||||
case 79:
|
||||
return "O";
|
||||
break;
|
||||
case 80:
|
||||
return "P";
|
||||
break;
|
||||
case 219:
|
||||
return "[";
|
||||
break;
|
||||
case 221:
|
||||
return "]";
|
||||
break;
|
||||
case 220:
|
||||
return "\\";
|
||||
break;
|
||||
case 103:
|
||||
return "Numpad 7";
|
||||
break;
|
||||
case 104:
|
||||
return "Numpad 8";
|
||||
break;
|
||||
case 105:
|
||||
return "Numpad 9";
|
||||
break;
|
||||
case 107:
|
||||
return "Numpad +";
|
||||
break;
|
||||
case 20:
|
||||
return "Caps Lock";
|
||||
break;
|
||||
case 65:
|
||||
return "A";
|
||||
break;
|
||||
case 83:
|
||||
return "S";
|
||||
break;
|
||||
case 68:
|
||||
return "D";
|
||||
break;
|
||||
case 70:
|
||||
return "F";
|
||||
break;
|
||||
case 71:
|
||||
return "G";
|
||||
break;
|
||||
case 72:
|
||||
return "H";
|
||||
break;
|
||||
case 74:
|
||||
return "J";
|
||||
break;
|
||||
case 75:
|
||||
return "K";
|
||||
break;
|
||||
case 76:
|
||||
return "L";
|
||||
break;
|
||||
case 59:
|
||||
return ";:";
|
||||
break;
|
||||
case 186:
|
||||
return ";";
|
||||
break;
|
||||
case 100:
|
||||
return "Numpad 4";
|
||||
break;
|
||||
case 101:
|
||||
return "Numpad 5";
|
||||
break;
|
||||
case 102:
|
||||
return "Numpad 6";
|
||||
break;
|
||||
case 90:
|
||||
return "Z";
|
||||
break;
|
||||
case 88:
|
||||
return "X";
|
||||
break;
|
||||
case 67:
|
||||
return "C";
|
||||
break;
|
||||
case 86:
|
||||
return "V";
|
||||
break;
|
||||
case 66:
|
||||
return "B";
|
||||
break;
|
||||
case 78:
|
||||
return "N";
|
||||
break;
|
||||
case 77:
|
||||
return "M";
|
||||
break;
|
||||
case 188:
|
||||
return ",<";
|
||||
break;
|
||||
case 190:
|
||||
return ".>";
|
||||
break;
|
||||
case 191:
|
||||
return "/?";
|
||||
break;
|
||||
case 96:
|
||||
return "Numpad 0";
|
||||
break;
|
||||
case 32:
|
||||
return "Space";
|
||||
break;
|
||||
case 93:
|
||||
return "menu";
|
||||
break;
|
||||
case 38:
|
||||
return "\u2191";
|
||||
break;
|
||||
case 40:
|
||||
return "\u2193";
|
||||
break;
|
||||
case 37:
|
||||
return "\u2190";
|
||||
break;
|
||||
case 39:
|
||||
return "\u2192";
|
||||
break;
|
||||
case 110:
|
||||
return "Numpad .";
|
||||
break;
|
||||
case 97:
|
||||
return "Numpad 1";
|
||||
break;
|
||||
case 98:
|
||||
return "Numpad 2";
|
||||
break;
|
||||
case 99:
|
||||
return "Numpad 3";
|
||||
break;
|
||||
case 0:
|
||||
return "Left Click";
|
||||
break;
|
||||
case 1:
|
||||
return "Middle Click";
|
||||
break;
|
||||
case 2:
|
||||
return "Right Click";
|
||||
break;
|
||||
case 16:
|
||||
return "Shift Left";
|
||||
break;
|
||||
case 18:
|
||||
return "ALT Left";
|
||||
break;
|
||||
case 17:
|
||||
return "CTRL left";
|
||||
break;
|
||||
case 91:
|
||||
return "WIN";
|
||||
break;
|
||||
case 13:
|
||||
return "Enter";
|
||||
break;
|
||||
case 44:
|
||||
return "Prt Sc";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue