KaiOS keyboard controls

main
Pk11 2 years ago
parent d70ab9a5c8
commit 1b4195df07

@ -0,0 +1,39 @@
const buttons = document.querySelectorAll('[tabindex="0"]');
let selected = 0;
let absoluteMode = false;
document.body.addEventListener("keydown", event => {
if(absoluteMode) {
if(event.key == "*") {
absoluteMode = !absoluteMode;
} else {
let key = parseInt(event.key);
if(key >= 0 && key <= 9) {
buttons[(key + 10) % 11].click();
}
}
} else {
switch(event.key) {
case "6":
case "k":
case "K":
if(selected > 0)
selected--;
buttons[selected].focus();
break;
case "9":
case "j":
case "J":
if(selected < buttons.length)
selected++;
buttons[selected].focus();
break;
case "8":
buttons[selected].click();
break;
case "*":
absoluteMode = !absoluteMode;
break;
}
}
});

@ -4,6 +4,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ピケ.コム</title>
<style>
:focus {
background-color: lightblue;
border-radius: 3px;
padding: 0 2px;
}
</style>
</head>
<body>
@ -17,31 +24,31 @@
<main>
<h2 id="subdomain">Subdomains</h2>
<dl>
<dt><a href="//bad-apple.xn--rck9c.xn--tckwe/index.html">bad-apple</a></dt>
<dt><a tabindex="0" href="//bad-apple.xn--rck9c.xn--tckwe/index.html">bad-apple</a></dt>
<dd>Bad Apple!! but it's pure HTML (no JS or CSS)</dd>
<dt><a href="//bbs.xn--rck9c.xn--tckwe/index.php">bbs</a></dt>
<dt><a tabindex="0" href="//bbs.xn--rck9c.xn--tckwe/index.php">bbs</a></dt>
<dd>A really crappy single thread BBS I made in PHP because I was bored and couldn't upload an image from Windows 98</dd>
<dt><a href="//count.xn--rck9c.xn--tckwe/index.php">count</a> (Japanese)</dt>
<dt><a tabindex="0" href="//count.xn--rck9c.xn--tckwe/index.php">count</a> (Japanese)</dt>
<dd>A simple item count tracker</dd>
<dt><a href="//git.xn--rck9c.xn--tckwe">git</a></dt>
<dt><a tabindex="0" href="//git.xn--rck9c.xn--tckwe">git</a></dt>
<dd>Self hosted <a href="https://gitea.io/en-us/">Gitea</a></dd>
<dt><a href="//grit.xn--rck9c.xn--tckwe">grit</a></dt>
<dt><a tabindex="0" href="//grit.xn--rck9c.xn--tckwe">grit</a></dt>
<dd>Converts images to GRF files using <a href="https://github.com/devkitPro/grit">grit</a></dd>
<dt><a href="//haste.xn--rck9c.xn--tckwe">haste</a></dt>
<dt><a tabindex="0" href="//haste.xn--rck9c.xn--tckwe">haste</a></dt>
<dd>Self-hosted <a href="//hastebin.com">Hastebin</a> with light theme</dd>
<dt><a href="//nextrip.xn--rck9c.xn--tckwe">nextrip</a> (Japanese)</dt>
<dt><a tabindex="0" href="//nextrip.xn--rck9c.xn--tckwe">nextrip</a> (Japanese)</dt>
<dd>Bus stop info viewer using <a href="https://metrotransit.org">Metro Transit</a>'s NexTrip API</dd>
<dt><a href="//rss.xn--rck9c.xn--tckwe">rss</a></dt>
<dt><a tabindex="0" href="//rss.xn--rck9c.xn--tckwe">rss</a></dt>
<dd>Self hosted <a href="https://miniflux.app">Miniflux</a></dd>
<dt><a href="//uwu.xn--rck9c.xn--tckwe">uwu</a></dt>
<dt><a tabindex="0" href="//uwu.xn--rck9c.xn--tckwe">uwu</a></dt>
<dd>Random uwu face</dd>
<dt><ruby><a href="//xn--p8juc.xn--rck9c.xn--tckwe">うち</a><rp> (</rp><rt>uchi</rt><rp>) </rp></ruby> (Japanese)</dt>
@ -50,25 +57,25 @@
<h2 id="page">Other Pages</h2>
<dl>
<dt><a href="/agent.php">agent.php</a></dt>
<dt><a tabindex="0" href="/agent.php">agent.php</a></dt>
<dd>Shows the useragent</dd>
<dt><a href="/bios-shrinker.html">bios-shrinker.html</a></dt>
<dt><a tabindex="0" href="/bios-shrinker.html">bios-shrinker.html</a></dt>
<dd>Shrinks a BIOS dump from a 3DS to the correct size</dd>
<dt><a href="color.html">color.html</a></dt>
<dt><a tabindex="0" href="color.html">color.html</a></dt>
<dd>Convert between hex, RGB, and BGR15 colors</dd>
<dt><a href="/dQw4w9WgXcQ/index.html">dQw4w9WgXcQ</a></dt>
<dt><a tabindex="0" href="/dQw4w9WgXcQ/index.html">dQw4w9WgXcQ</a></dt>
<dd>;)</dd>
<dt><a href="/motd.php">motd.php</a></dt>
<dt><a tabindex="0" href="/motd.php">motd.php</a></dt>
<dd>A random message each day</dd>
<dt><a href="securid.html">securid.html</a></dt>
<dt><a tabindex="0" href="securid.html">securid.html</a></dt>
<dd>Browser implementation of RSA SecurID</dd>
<dt><a href="/video.php">video.php</a></dt>
<dt><a tabindex="0" href="/video.php">video.php</a></dt>
<dd>Makes videos show in embeds</dd>
</dl>
</main>
@ -77,5 +84,7 @@
<hr>
<p>2021-2023 <a href="//pk11.us">Pk11</a></p>
</footer>
<script src="/assets/js/kaios.js"></script>
</body>
</html>

@ -4,6 +4,13 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ピケ.コム</title>
<style>
:focus {
background-color: lightblue;
border-radius: 3px;
padding: 0 2px;
}
</style>
</head>
<body>
@ -17,58 +24,58 @@
<main>
<h2 id="subdomain">サブドメイン</h2>
<dl>
<dt><a href="//bad-apple.xn--rck9c.xn--tckwe/ja.html">bad-apple</a></dt>
<dt><a tabindex="0" href="//bad-apple.xn--rck9c.xn--tckwe/ja.html">bad-apple</a></dt>
<dd>Bad Apple!!でも、HTMLだけです(JSやCSSなし)</dd>
<dt><a href="//bbs.xn--rck9c.xn--tckwe/index.php">bbs</a>(英語)</dt>
<dt><a tabindex="0" href="//bbs.xn--rck9c.xn--tckwe/index.php">bbs</a>(英語)</dt>
<dd>Windows98から画像をアップロードできないでしたので、PHPで作って本当にしょぼい1スレBBS</dd>
<dt><a href="//count.xn--rck9c.xn--tckwe/index.php">count</a></dt>
<dt><a tabindex="0" href="//count.xn--rck9c.xn--tckwe/index.php">count</a></dt>
<dd>シンプルなアイテム数トラッカー</dd>
<dt><a href="//git.xn--rck9c.xn--tckwe">git</a></dt>
<dt><a tabindex="0" href="//git.xn--rck9c.xn--tckwe">git</a></dt>
<dd>自己ホストの<a href="https://gitea.io/ja-jp/">Gitea</a></dd>
<dt><a href="//grit.xn--rck9c.xn--tckwe">grit</a>(英語)</dt>
<dt><a tabindex="0" href="//grit.xn--rck9c.xn--tckwe">grit</a>(英語)</dt>
<dd>イメージを<a href="https://github.com/devkitPro/grit">grit</a>を使用してGRFファイルに変換</dd>
<dt><a href="//haste.xn--rck9c.xn--tckwe">haste</a>(英語)</dt>
<dt><a tabindex="0" href="//haste.xn--rck9c.xn--tckwe">haste</a>(英語)</dt>
<dd>自己ホストのライト配色あり<a href="https://hastebin.com">Hastebin</a></dd>
<dt><a href="//nextrip.xn--rck9c.xn--tckwe">nextrip</a></dt>
<dt><a tabindex="0" href="//nextrip.xn--rck9c.xn--tckwe">nextrip</a></dt>
<dd><a href="https://www.metrotransit.org">Metro Transit</a>のNexTrip APIを使うバス停留所情報ビューアー</dd>
<dt><a href="//rss.xn--rck9c.xn--tckwe">rss</a></dt>
<dt><a tabindex="0" href="//rss.xn--rck9c.xn--tckwe">rss</a></dt>
<dd>自己ホトスの<a href="https://miniflux.app">Miniflux</a></dd>
<dt><a href="//uwu.xn--rck9c.xn--tckwe">uwu</a></dt>
<dt><a tabindex="0" href="//uwu.xn--rck9c.xn--tckwe">uwu</a></dt>
<dd>ランダムなuwu顔</dd>
<dt><a href="//xn--p8juc.xn--rck9c.xn--tckwe">うち</a></dt>
<dt><a tabindex="0" href="//xn--p8juc.xn--rck9c.xn--tckwe">うち</a></dt>
<dd></dd>
</dl>
<h2 id="page">他のページ</h2>
<dl>
<dt><a href="/agent.php">agent.php</a></dt>
<dt><a tabindex="0" href="/agent.php">agent.php</a></dt>
<dd>ユーザーエイジェントを表示</dd>
<dt><a href="/bios-shrinker.html">bios-shrinker.html</a>(英語)</dt>
<dt><a tabindex="0" href="/bios-shrinker.html">bios-shrinker.html</a>(英語)</dt>
<dd>3DSからダンプされたGBAのBIOSファイルを正しいサイズに縮小</dd>
<dt><a href="/color.html">color.html</a></dt>
<dt><a tabindex="0" href="/color.html">color.html</a></dt>
<dd>16進、RGB、BGR15の間で色を変換</dd>
<dt><a href="/dQw4w9WgXcQ/index.html">dQw4w9WgXcQ</a></dt>
<dt><a tabindex="0" href="/dQw4w9WgXcQ/index.html">dQw4w9WgXcQ</a></dt>
<dd>;)</dd>
<dt><a href="/motd.php">motd.php</a></dt>
<dt><a tabindex="0" href="/motd.php">motd.php</a></dt>
<dd>毎日でランダムなメッセージ</dd>
<dt><a href="/securid.html">securid.html</a></dt>
<dt><a tabindex="0" href="/securid.html">securid.html</a></dt>
<dd>RSA SecurIDのブラウザー実装</dd>
<dt><a href="/video.php">video.php</a>(英語)</dt>
<dt><a tabindex="0" href="/video.php">video.php</a>(英語)</dt>
<dd>埋め込みにビデオを表示</dd>
</dl>
</main>
@ -77,5 +84,7 @@
<hr>
<p>2021-2023 <a href="//pk11.us">Pk11</a></p>
</footer>
<script src="/assets/js/kaios.js"></script>
</body>
</html>

Loading…
Cancel
Save