-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
846e621
commit 8c7d1e7
Showing
4 changed files
with
428 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,4 @@ | ||
| # click-speed-test | ||
| # Click Speed Test | ||
| Click Speed Test also known as CPS Test (click per second test) is a challenging game for anyone who wants to check his/her mouse clicking speed. The game does not require any registration, so you will be able to play instantly after you reach the [click speed test](https://joltfly.com/click-speed-test/). | ||
|
|
||
|  |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,198 @@ | ||
| .cpstest-main { | ||
| background: none; | ||
| display: block; | ||
| padding: 0px 0px 0px 0px; | ||
| font: bold 17px/30px Arial, Helvetica, sans-serif; | ||
| min-width: 260px; | ||
| margin: auto; | ||
| border: none; | ||
| } | ||
| .cpstest-main:after { | ||
| content: ""; | ||
| clear: both; | ||
| } | ||
| .noselect { | ||
| cursor: default; | ||
| -webkit-touch-callout: none; | ||
| -webkit-user-select: none; | ||
| -khtml-user-select: none; | ||
| -moz-user-select: none; | ||
| -ms-user-select: none; | ||
| user-select: none; | ||
| } | ||
| .cpstest-card { | ||
| padding: 1rem 2rem 1rem 2rem; | ||
| height: 70px; | ||
| } | ||
| .cpstest-cards { | ||
| max-width: 1600px; | ||
| margin: 0 auto; | ||
| display: grid; | ||
| grid-gap: 0 1rem; | ||
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | ||
| } | ||
| .cpstest-blocks { | ||
| background: #113b54; | ||
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); | ||
| border-radius: 10px; | ||
| display: block; | ||
| padding: 10px 10px 10px 10px; | ||
| margin: 10px 0px; | ||
| border: none; | ||
| text-align: center; | ||
| min-height: 50px; | ||
| } | ||
| .cpstest-click-blocks { | ||
| background: none; | ||
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); | ||
| border-radius: 10px; | ||
| display: block; | ||
| padding: 10px 10px 10px 10px; | ||
| margin: 10px 0px; | ||
| border-width: 5px; | ||
| border-style: solid; | ||
| border-color: #113b54; | ||
| text-align: center; | ||
| height: 250px; | ||
| overflow: hidden !important; | ||
| } | ||
| .cpstest-reset-button { | ||
| position: relative; | ||
| height: 40px; | ||
| width: 40px; | ||
| transition: background-color 0.15s ease-in; | ||
| font-size: 25px; | ||
| text-align: center; | ||
| padding: 0px 7px 8px 4px; | ||
| line-height: 40px; | ||
| text-decoration: none; | ||
| color: white; | ||
| cursor: pointer; | ||
| background-color: #009efd; | ||
| border-radius: 50%; | ||
| } | ||
| .cpstest-reset-button:hover { | ||
| background-color: #113b54; | ||
| transition: background-color 0.3s ease-in; | ||
| transition: background-color 0.3s ease-out; | ||
| } | ||
| .cpstest-click-me { | ||
| background: #113b54; | ||
| background: -webkit-linear-gradient(to right, #113b54, #009efd); | ||
| background: linear-gradient(to right, #113b54, #009efd); | ||
| text-align: center; | ||
| overflow: hidden !important; | ||
| line-height: 220px; | ||
| height: 250px; | ||
| color: white; | ||
| position: relative !important; | ||
| -webkit-transition: all 0.6s ease; | ||
| -moz-transition: all 0.6s ease; | ||
| -ms-transition: all 0.6s ease; | ||
| -o-transition: all 0.6s ease; | ||
| transition: all 0.6s ease; | ||
| } | ||
| .cpstest-click-me:hover { | ||
| text-shadow: 0px 0px 8px rgb(255, 230, 186), 0px 0px 22px rgb(255, 255, 255), | ||
| 0px -1px 0px rgba(0, 0, 0, 0.5); | ||
| } | ||
| .clickMeTextShow { | ||
| opacity: 1; | ||
| } | ||
| .clickMeTextHide { | ||
| opacity: 0; | ||
| } | ||
| .ripple { | ||
| position: absolute; | ||
| background: #fff; | ||
| border-radius: 50%; | ||
| width: 5px; | ||
| height: 5px; | ||
| animation: rippleEffect 0.88s 1; | ||
| opacity: 0; | ||
| } | ||
| @keyframes rippleEffect { | ||
| 0% { | ||
| transform: scale(1); | ||
| opacity: 0.4; | ||
| } | ||
| 100% { | ||
| transform: scale(100); | ||
| opacity: 0; | ||
| } | ||
| } | ||
| .modalclosebtn { | ||
| color: white; | ||
| cursor: pointer; | ||
| } | ||
| .modalclosebtn:hover { | ||
| color: red; | ||
| cursor: pointer; | ||
| } | ||
| .cpsmsgmodal { | ||
| display: none; | ||
| position: fixed; | ||
| z-index: 100; | ||
| padding: 100px 10px; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| overflow: auto; | ||
| background-color: rgb(0, 0, 0); | ||
| background-color: rgba(0, 0, 0, 0.4); | ||
| } | ||
| .cpstest-main-msg { | ||
| background: #113b54; | ||
| background: -webkit-linear-gradient(to right, #113b54, #009efd); | ||
| background: linear-gradient(to right, #113b54, #009efd); | ||
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); | ||
| display: block; | ||
| padding: 10px 20px 10px 20px; | ||
| font: 17px/30px Arial, Helvetica, sans-serif; | ||
| margin: auto; | ||
| max-width: 750px; | ||
| min-width: 260px; | ||
| border: none; | ||
| border-radius: 10px; | ||
| } | ||
| .cpstest-main-msg-content { | ||
| background: none; | ||
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); | ||
| border-radius: 10px; | ||
| display: block; | ||
| padding: 10px 10px 10px 10px; | ||
| margin: 10px 0; | ||
| border-width: 5px; | ||
| border-style: solid; | ||
| border-color: #009efd; | ||
| text-align: center; | ||
| overflow: hidden !important; | ||
| } | ||
| .cpstest-main-msg-image { | ||
| border-right: 2px solid #009efd; | ||
| margin: 10px; | ||
| min-height: 180px; | ||
| width: 180px; | ||
| float: left; | ||
| } | ||
| .social-share-button { | ||
| padding: 2px 2px 2px 4px; | ||
| border-width: 2px; | ||
| border-style: solid; | ||
| border-color: white; | ||
| border-radius: 50px; | ||
| width: 30px; | ||
| height: 30px; | ||
| margin: 15px 10px 15px 0px; | ||
| float: left; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s ease-out; | ||
| transition: border-color 0.3s ease-out; | ||
| } | ||
| .social-share-button:hover { | ||
| border-color: #009efd; | ||
| background-color: #009efd; | ||
| transition: background-color 0.3s ease-in; | ||
| transition: border-color 0.3s ease-in; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <style> </style> | ||
| <head> | ||
| <title>Click Speed Test</title> | ||
| </head> | ||
| <body> | ||
| <div class="cpstest-main noselect"> | ||
| <div style="margin-top:30px; margin-bottom:10px;"> | ||
| <div class="cpstest-cards"> | ||
| <div class="cpstest-card cpstest-blocks"> | ||
| <div><span id="timer" style="font-size:22px; color : white;"> 0.000 </span></div> | ||
| <div style="margin-top:-10px; color : lightgrey;"><span> Timer </span></div> | ||
| </div> | ||
| <div class="cpstest-card cpstest-blocks"> | ||
| <div><span id="cps" style="font-size:22px; color : white;"> 0.00 </span></div> | ||
| <div style="margin-top:-10px; color : lightgrey;"><span> CPS </span></div> | ||
| </div> | ||
| <div class="cpstest-card cpstest-blocks"> | ||
| <div><span id="scor" style="font-size:22px; color : white;"> 0 </span></div> | ||
| <div style="margin-top:-10px; color : lightgrey;"><span> Score </span></div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div id="clickmebutton" class="cpstest-click-me cpstest-click-blocks myRipple" style="cursor: pointer;"> | ||
| <div id="startbutton" style="cursor: pointer;"> CLICK ME TO START PLAYING </div> | ||
| </div> | ||
| </div> | ||
| <div id="cpsmodal" class="cpsmsgmodal noselect"> | ||
| <div class="cpstest-main-msg"> | ||
| <div> | ||
| <div style="float:left; color:white; margin-left:5px;">Check Your Score</div> | ||
| <div id="closecpsmodal" class="modalclosebtn" style="float:right; margin-right:5px;">✕</div> | ||
| </div> <br> | ||
| <div class="cpstest-main-msg-content"> | ||
| <div class="cpstest-main-msg-image"> <img src="" id="cpsmainimg" alt="Your Rank" height="150px" width="150px" style="padding : 12px 10px 10px 0px"> </div> | ||
| <div style="padding: 50px 20px 50px 20px; float:right;"> | ||
| <div style="text-align:center; color:white; font-size:40px; line-height:35px"> You Got <span id="cpsrank"></span> Rank </div> | ||
| <div style="text-align:center; color:white; font-size:15px; line-height:40px"> You Clicked with the speed of <span id="cpsCps"></span> CPS </div> | ||
| <div style="text-align:center; color:white; font-size:15px; line-height:0px"> <span id="noClicks"></span> Clicks in <span id="inSeconds"></span> Second(s) </div> | ||
| </div> | ||
| </div> | ||
| <div style="margin-top:30px; text-align:center; color:white; font-size:24px;"> <span id="cpsMainmsg"></span> </div> | ||
| <div style="text-align:center; color:white; font-size:15px;"> <span id="cpsSubmsg"></span> </div> | ||
| <hr style="height:2px;border-width:0;color:gray;background-color:white; margin: 20px 0px 0px 0px;"> | ||
| <div style="float:left;"> <a rel="nofollow" id="fbbutton" target="_blank" class="social-share-button"> <svg style="margin:auto;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" width="1em" height="1em" aria-hidden="true"> | ||
| <path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z" fill="white"></path> | ||
| </svg> </a> <a rel="nofollow" id="twbutton" target="_blank" class="social-share-button"> <svg style="margin:auto;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" aria-hidden="true"> | ||
| <path fill="white" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"></path> | ||
| </svg> </a> <a rel="nofollow" id="wabutton" target="_blank" class="social-share-button"> <svg style="margin:auto;" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" viewBox="0 0 24 24"> | ||
| <path fill="white" d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946.003-6.556 5.338-11.891 11.893-11.891 3.181.001 6.167 1.24 8.413 3.488 2.245 2.248 3.481 5.236 3.48 8.414-.003 6.557-5.338 11.892-11.893 11.892-1.99-.001-3.951-.5-5.688-1.448l-6.305 1.654zm6.597-3.807c1.676.995 3.276 1.591 5.392 1.592 5.448 0 9.886-4.434 9.889-9.885.002-5.462-4.415-9.89-9.881-9.892-5.452 0-9.887 4.434-9.889 9.884-.001 2.225.651 3.891 1.746 5.634l-.999 3.648 3.742-.981zm11.387-5.464c-.074-.124-.272-.198-.57-.347-.297-.149-1.758-.868-2.031-.967-.272-.099-.47-.149-.669.149-.198.297-.768.967-.941 1.165-.173.198-.347.223-.644.074-.297-.149-1.255-.462-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.521.151-.172.2-.296.3-.495.099-.198.05-.372-.025-.521-.075-.148-.669-1.611-.916-2.206-.242-.579-.487-.501-.669-.51l-.57-.01c-.198 0-.52.074-.792.372s-1.04 1.016-1.04 2.479 1.065 2.876 1.213 3.074c.149.198 2.095 3.2 5.076 4.487.709.306 1.263.489 1.694.626.712.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.248-.695.248-1.29.173-1.414z" /> | ||
| </svg></a> </div> | ||
| <div id="cpsmsgreset" class="cpstest-reset-button" style="margin: 15px auto;">⟲</div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| <script> | ||
|
|
||
| </script> | ||
|
|
||
| </html> |
Oops, something went wrong.