added help
This commit is contained in:
e7d
parent
c0c005221a
commit
ba0f190a1a
95
css/main.css
95
css/main.css
@ -11,3 +11,98 @@ body {
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
.help {
|
||||
background: whitesmoke;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
font-size: 10pt;
|
||||
left: 50%;
|
||||
min-width: 400px;
|
||||
padding: 20px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.help.active {
|
||||
display: block;
|
||||
}
|
||||
.help h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
.help h3 {
|
||||
margin-top: 1.5em;
|
||||
}
|
||||
.help p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.help table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.help th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.help th, .help td {
|
||||
border-top: 1px solid #ddd;
|
||||
line-height: 1.42857143;
|
||||
padding: 8px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.help table>thead>tr>th {
|
||||
border-bottom: 2px solid #ddd;
|
||||
border-top: 0;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
kbd {
|
||||
display: inline;
|
||||
display: inline-block;
|
||||
min-width: 1em;
|
||||
padding: .2em .3em;
|
||||
margin: 0 .2em;
|
||||
font: normal 1em monospace;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
-moz-border-radius: .3em;
|
||||
-webkit-border-radius: .3em;
|
||||
border-radius: .3em;
|
||||
border: none;
|
||||
cursor: default;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
kbd[title], .key[title] {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
kbd, kbd.dark {
|
||||
background: rgb(80, 80, 80);
|
||||
background: -moz-linear-gradient(top, rgb(60, 60, 60), rgb(80, 80, 80));
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(60, 60, 60)), to(rgb(80, 80, 80)));
|
||||
color: rgb(250, 250, 250);
|
||||
text-shadow: -1px -1px 0 rgb(70, 70, 70);
|
||||
-moz-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
|
||||
-webkit-box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
|
||||
box-shadow: inset 0 0 1px rgb(150, 150, 150), inset 0 -.05em .4em rgb(80, 80, 80), 0 .1em 0 rgb(30, 30, 30), 0 .1em .1em rgba(0, 0, 0, .3);
|
||||
}
|
||||
|
||||
kbd.light {
|
||||
background: rgb(250, 250, 250);
|
||||
background: -moz-linear-gradient(top, rgb(210, 210, 210), rgb(255, 255, 255));
|
||||
background: -webkit-gradient(linear, left top, left bottom, from(rgb(210, 210, 210)), to(rgb(255, 255, 255)));
|
||||
color: rgb(50, 50, 50);
|
||||
text-shadow: 0 0 2px rgb(255, 255, 255);
|
||||
-moz-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
|
||||
-webkit-box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
|
||||
box-shadow: inset 0 0 1px rgb(255, 255, 255), inset 0 0 .4em rgb(200, 200, 200), 0 .1em 0 rgb(130, 130, 130), 0 .11em 0 rgba(0, 0, 0, .4), 0 .1em .11em rgba(0, 0, 0, .9);
|
||||
}
|
||||
|
||||
38
index.html
38
index.html
@ -12,6 +12,44 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="gamepad"></div>
|
||||
<div class="help">
|
||||
<h2>Help</h2>
|
||||
|
||||
<h3>Instructions</h3>
|
||||
<p>Press any of your gamepad buttons for at least 1 second. If your gamepad is supported, it shows up.</p>
|
||||
|
||||
<h3>Keyboard shortcuts</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Key</th>
|
||||
<th>Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><kbd>+</kbd></th>
|
||||
<td>Zoom gamepad in</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>-</kbd></th>
|
||||
<td>Zoom gamepad out</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>C</kbd></th>
|
||||
<td>Change active gamepad color</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>H</kbd></th>
|
||||
<td>Display this help</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><kbd>Delete</kbd>, <kbd>Escape</kbd></th>
|
||||
<td>Clear active gamepad</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script src="https://static.e7d.io/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
<script src="js/gamepad.js"></script>
|
||||
|
||||
@ -10,6 +10,7 @@ $.urlParam = function(name) {
|
||||
var haveEvents = 'ongamepadconnected' in window;
|
||||
var gamepads = {};
|
||||
var $gamepad = $('.gamepad');
|
||||
var $help = $('.help');
|
||||
var gamepadIdentifiers = {
|
||||
'ds4': {
|
||||
'id': /054c.*?05c4/,
|
||||
@ -52,6 +53,9 @@ function onKeyDown(e) {
|
||||
case "KeyC":
|
||||
changeGamepadColor();
|
||||
break;
|
||||
case "KeyH":
|
||||
toggleHelp();
|
||||
break;
|
||||
case "NumpadAdd":
|
||||
case "Equal":
|
||||
changeZoom("+");
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user