feat: visual improvements

- move clear key button away from save to make use more clear
- show bind name for keys on hover
- use proper symbols for arrows
- use "Win" -- vast majority of users on windows, more clear.
- bsp -> back, ret -> enter

Author: ThisAMJ

index.html

@@ -36,7 +36,7 @@
 					</div>
 					<div class="kp-mainbody">
 						<div class="kp-row">
-							<span class="key" p2key="`">`</span>
+							<span class="key" p2key="`">~<br/>`</span>
 							<span class="key" p2key="1">1</span>
 							<span class="key" p2key="2">2</span>
 							<span class="key" p2key="3">3</span>
@@ -49,7 +49,7 @@
 							<span class="key" p2key="0">0</span>
 							<span class="key" p2key="-">-</span>
 							<span class="key" p2key="=">=</span>
-							<span class="key widekey2" p2key="backspace">Bsp</span>
+							<span class="key widekey2" p2key="backspace">Back</span>
 						</div>
 						<div class="kp-row">
 							<span class="key widekey1" p2key="tab">Tab</span>
@@ -80,7 +80,7 @@
 							<span class="key" p2key="l">L</span>
 							<span class="key" p2key="semicolon">;</span>
 							<span class="key" p2key="'">'</span>
-							<span class="key widekey3" p2key="enter">Ret</span>
+							<span class="key widekey3" p2key="enter">Enter<br/><small>Return</small></span>
 						</div>
 						<div class="kp-row">
 							<span class="key widekey4" p2key="shift">Shift</span>
@@ -98,11 +98,11 @@
 						</div>
 						<div class="kp-row">
 							<span class="key widekey1" p2key="ctrl">Ctrl</span>
-							<span class="key widekey1" p2key="lwin">Super</span>
+							<span class="key widekey1" p2key="lwin">Win<br/><small>Super</small></span>
 							<span class="key widekey1" p2key="alt">Alt</span>
 							<span class="key widekey5" p2key="space">Space</span>
 							<span class="key widekey1" p2key="ralt">Alt</span>
-							<span class="key widekey1" p2key="rwin">Super</span>
+							<span class="key widekey1" p2key="rwin">Win<br/><small>Super</small></span>
 							<span class="key widekey1" p2key="rctrl">Ctrl</span>
 						</div>
 					</div>
@@ -120,22 +120,22 @@
 							<div class="kp-row">
 								<span class="key" p2key="ins">Ins</span>
 								<span class="key" p2key="home">Hme</span>
-								<span class="key" p2key="pgup">Pgu</span>
+								<span class="key" p2key="pgup">Pg🠉</span>
 							</div>
 							<div class="kp-row">
 								<span class="key" p2key="del">Del</span>
 								<span class="key" p2key="end">End</span>
-								<span class="key" p2key="pgdn">Pgd</span>
+								<span class="key" p2key="pgdn">Pg🠋</span>
 							</div>
 						</div>
 						<div class="kp-midpart">
 							<div class="kp-row">
-								<span class="key" p2key="uparrow">^</span>
+								<span class="key" p2key="uparrow">🠉</span>
 							</div>
 							<div class="kp-row">
-								<span class="key" p2key="leftarrow">&lt;</span>
-								<span class="key" p2key="downarrow">v</span>
-								<span class="key" p2key="rightarrow">&gt;</span>
+								<span class="key" p2key="leftarrow">🠈</span>
+								<span class="key" p2key="downarrow">🠋</span>
+								<span class="key" p2key="rightarrow">🠊</span>
 							</div>
 						</div>
 					</div>
@@ -170,7 +170,7 @@
 					<div class="kp-col">
 						<span class="key" p2key="kp_minus">-</span>
 						<span class="key tallkey1" p2key="kp_plus">+</span>
-						<span class="key tallkey1" p2key="kp_enter">Ret</span>
+						<span class="key tallkey1" p2key="kp_enter">Ent<br/><small>Return</small></span>
 					</div>
 				</div>
 				<div class="kp-mouse">
@@ -352,9 +352,11 @@ <h3>Misc</h3>
                             <span>
                                 <input type="text" id="bind_saveload_name">
                             </span>
-                            <button id="reset_bind">Clear</button>
                         </div>
                     </div>
+					<div>
+						<button id="reset_bind">Clear Key</button>
+					</div>
 				</div>
 			</div>
 			<div id="links">

keypanel.js

@@ -51,6 +51,9 @@ for (let i = 0; i < keys.length; ++i) {
 	let key_attr = keys[i].attributes.getNamedItem("p2key");
 	if (key_attr !== null) {
 		keys[i].classList.add("bindable");
+		// Add the key name to the title (hover text)
+		let title = keys[i].attributes.getNamedItem("title")?.value || "";
+		keys[i].setAttribute("title", `${title}\n${key_attr.value.toUpperCase()}`.trim());
 		keys[i].addEventListener("click", function() {
 			if (g_current_selected !== null) {
 				g_current_selected.classList.remove("selected");

style.css

@@ -174,6 +174,10 @@ main {
 	cursor: default;
 }
 
+.keypanel .key small {
+	font-size: 0.5em;
+}
+
 .keypanel .key.bindable {
 	background: var(--key-bg-bindable);
 }
@@ -246,7 +250,7 @@ main {
 	justify-content: center;
 	gap: 30px;
 	background: var(--panel-bg);
-	padding: 20px;
+	padding: 10px;
 }
 
 .keybinder .binds > div > div {
@@ -276,16 +280,18 @@ button:hover {
 }
 
 #reset_bind {
-	flex-grow: 1;
-	margin: 10px;
+	flex-grow: 0.2;
 }
 
 #reset_all {
 	padding: 30px;
+}
+
+#reset_bind, #reset_all {
 	border: 2px solid var(--key-bg-bound);
 }
 
-#reset_all:hover {
+#reset_bind:hover, #reset_all:hover {
 	background: var(--key-bg-bound-hover);
 }