-
Notifications
You must be signed in to change notification settings - Fork 0
/
Aim Trainer.html
110 lines (109 loc) · 11.2 KB
/
Aim Trainer.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
<style> </style>
<body>
<div class="aimtrainer-main noselect">
<div class="aimtrainer-container">
<div id="trainerSettings" class="aimtrainer-settings">
<div class="aimtrainer-cards">
<section>
<div style="padding: 10px;"> <svg class="Reticle" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100px" height="100px" viewBox="-2 -2 20 20">
<circle fill="none" stroke="currentColor" cx="8" cy="8" r=".3" />
<path fill="none" stroke="currentColor" d="M 8 0 L 8 6.5" />
<path fill="none" stroke="currentColor" d="M 0 8 L 6.5 8" />
<path fill="none" stroke="currentColor" d="M 8 9.5 L 8 16" />
<path fill="none" stroke="currentColor" d="M 9.5 8 L 16 8" />
</svg> </div>
<table cellspacing="0" cellpadding="0" style="margin-left: auto; margin-right: auto; border-collapse: collapse; border: none; margin: 15px 0px 0px 0px; padding: 0px; position: relative; bottom:0px;">
<tr style="margin: 0px; padding: 10px 0px; border: none;">
<td style=" margin: 0px; padding: 5px 0px;border: none;"><label style="width: 100px; text-align: left;" for="ReticleColorSelector">Reticle Color</label></td>
<td style="margin: 0px; padding: 5px 0px; border: none; color: #571845;"><input style="width: 100px; padding:0px; border:none;" type="color" id="ReticleColorSelector" oninput="changeReticleColor(event)" /></td>
</tr>
<tr style="margin: 0px; padding: 10px 0px; border: none;">
<td style="margin: 0px; padding: 5px 0px; border: none;"><label style="width: 100px; text-align: left;" for="ReticleSize">Reticles Size</label></td>
<td style="margin: 0px; padding: 5px 0px; border: none; color: #571845;">
<div><input style="width: 100px; font-size:15px;" type="number" name="size" id="ReticleSize" value="100" min="10" max="100" step="5" onchange="setReticleSize(event.target.value)" /><span></span></div>
</td>
</tr>
</table>
</section>
<section>
<div style="padding: 10px;">
<div class="target target-preview"></div>
</div>
<table cellspacing="0" cellpadding="0" style="margin-left: auto; margin-right: auto; border-collapse: collapse; border: none; margin: 15px 0px 0px 0px; padding: 0px; position: relative; bottom:0px;">
<tr style="margin: 0px; padding: 10px 0px; border: none;">
<td style=" margin: 0px; padding: 5px 0px;border: none;"><label style="width: 100px; text-align: left;" for="targetSize">Target Size</label></td>
<td style="margin: 0px; padding: 5px 0px; border: none; color: #571845;">
<div><input style="width: 100px; font-size:15px;" type="number" name="targetSize" id="targetSize" value="100" min="20" max="100" step="5" onchange="setTargetSize(event.target.value)" /><span></span></div>
</td>
</tr>
<tr style="margin: 0px 20px; padding: 10px 0px; border: none;">
<td style="margin: 0px; padding: 5px 0px; border: none;"><label style="width: 100px; text-align: left;" for="targetRoundness">Roundness</label></td>
<td style="margin: 0px; padding: 5px 0px; border: none; color: #571845;"><input style="width: 100px;" type="range" name="targetRoundness" id="targetRoundness" value="50" min="0" max="50" oninput="setTargetRadius(event.target.value)" /></td>
</tr>
</table>
</section>
<section>
<div style="padding: 10px;"> <img src="https://joltfly.com/wp-content/uploads/2021/04/Joltfly-Aim-Trainer-Game-Timer.svg" alt="Joltfly-Aim-Trainer-Game-Timer" style="height:100px; width:100px;" /> </div>
<table cellspacing="0" cellpadding="0" style="margin-left: auto; margin-right: auto; border-collapse: collapse; border: none; margin: 15px 0px 0px 0px; padding: 0px; position: relative; bottom:0px;">
<tr style="margin: 0px; padding: 10px 0px; border: none;">
<td style=" margin: 0px; padding: 5px 0px;border: none;"><label style="width: 100px; text-align: left;" for="timer">Train For</label></td>
<td style="margin: 0px; padding: 5px 0px; border: none; color: #571845;">
<div><input style="width: 100px; font-size:15px;" type="number" name="targetSize" id="timerLimit" value="60" min="30" max="240" step="5" onchange="setGameTime(event)" /><span></span></div>
</td>
</tr>
<tr style="margin: 0px 20px; padding: 10px 0px; border: none;">
<td style="margin: 0px; padding: 5px 0px; border: none;"><label style="width: 100px; text-align: left;" for="difficultylevel">Difficulty</label></td>
<td style="margin: 0px; padding: 5px 0px; border: none; color: #571845;"><input style="width: 100px;" type="range" name="targetRoundness" id="difficultyLevel" min="1" max="3" step="1" value="2" onchange="setGameDifficulty(event)" /></td>
</tr>
</table>
</section>
</div>
<div class="aimtrainer-button" id="StartGame">Start Game</div>
</div>
<div id="trainerGame" class="aimtrainer-game" style="display:none; font-size:15px;">
<div id="scoreBoard" style="display:none;">
<div style="position: absolute; left: 18px; top : 10px; color:black;"><label for="mouseHits">Hits : </label><span id="mouseHits">00</span><span style=" margin-left: 10px;">|</span> <label style=" margin-left: 10px;" for="mouseMiss">Miss : </label><span id="mouseMiss">00</span></div>
<div style="position: absolute; right: 18px; top:10px; color:black;"><label for="gameTimer">Timer : </label><span id="gameTimer">15</span></div>
</div> <span style="font-size:72px;" id="countdown"></span> <svg xmlns="http://www.w3.org/2000/svg" id="Reticle" version="1.1" width="100px" height="100px" viewBox="-2 -2 20 20">
<circle fill="none" stroke="currentColor" cx="8" cy="8" r=".3" />
<path fill="none" stroke="currentColor" d="M 8 0 L 8 6.5" />
<path fill="none" stroke="currentColor" d="M 0 8 L 6.5 8" />
<path fill="none" stroke="currentColor" d="M 8 9.5 L 8 16" />
<path fill="none" stroke="currentColor" d="M 9.5 8 L 16 8" />
</svg>
<div class="practice-area">
<div id="realTarget" class="target"></div>
</div>
</div>
</div>
</div>
<div id="AimTrainerModal" class="aim-trainer-modal noselect">
<div class="aim-trainer-main-msg">
<div>
<div style="float:left; color:white; margin-left:5px;">Check Your Score</div>
<div id="closeAimTrainerModal" class="modalclosebtn" style="float:right; margin-right:5px;">✕</div>
</div> <br>
<div class="aim-trainer-main-msg-content">
<div class="aim-trainer-main-msg-image"> <img id="AimTrainerMainimg" 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:36px; line-height:35px">Target Hits : <span id="thetargetHits"></span> | Miss : <span id="thetargetMiss"></span> </div>
<div style="text-align:center; color:white; font-size:15px; line-height:40px"> Target Size : <span id="thetargetSize"></span> | Reticle Size : <span id="thereticleSize"></span> | Timer : <span id="thetimerLimit"></span> </div>
<div style="text-align:center; color:white; font-size:15px; line-height:0px">Difficulty Level : <span id="thedifficultyLevel"></span> | Accuracy : <span id="theaccuracy"></span> %</div>
</div>
</div>
<div style="margin-top:30px; text-align:center; color:white; font-size:22px;">You Earned the <span id="AimTrainerAchievedRank"></span> Rank!</div>
<div style="margin-top:5px; text-align:center; color:white; font-size:18px;">"You have succesfuly hit the target <span id="AimTrainertargetHits"></span> times with <span id="AimTrainerHPSscore"></span> HPS Score"</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="AimTrainermsgreset" class="aim-trainer-reset-button" style="margin: 15px auto;">⟲</div>
</div>
</div>
</body>
</html>