You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

92 lines
3.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face {
font-family: Iosevka;
src: url("../iosevka-fixed-regular.woff2") format("woff2");
}
body {
font-family: Iosevka, monospace;
background: #eceff4;
color: #2e3440;
}
.container {
margin: 0 auto;
max-width: 600px;
}
a {
color: #5e81ac;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
body {
background: #2e3440;
color: #eceff4;
}
a {
color: #81a1c1;
}
}
ul {
list-style-type: none;
padding: 0;
}
li span {
display: inline-block;
text-align: center;
width: 16px;
}
</style>
</head>
<body>
<div class="container">
<h3>Home</h3>
<ul id="bookmarks"></ul>
</div>
<script>
const list = [
{ title: 'Fastmail', link: 'https://fastmail.com' },
{ title: 'Tiny Tiny RSS', link: 'https://tt-rss.dustinswan.com' },
{ title: 'Mastodon', link: 'https://mastodon.social' },
{ title: 'Tweetdeck', link: 'https://tweetdeck.twitter.com' },
{ title: 'Pocket', link: 'https://getpocket.com' },
{ title: 'Instagram', link: 'https://instagram.com' },
{ title: 'Youtube', link: 'https://youtube.com' },
{ title: 'Reddit', link: 'https://reddit.com' },
{ title: 'Dark Sky', link: 'https://darksky.net' },
{ title: 'Hacker News', link: 'https://news.ycombinator.com' },
{ title: 'NHK Easy', link: 'https://www3.nhk.or.jp/news/easy' },
{ title: 'Le Monde', link: 'https://lemonde.fr' },
{ title: 'Spiegel', link: 'https://spiegel.de' },
{ title: 'Wanikani', link: 'https://wanikani.com' },
{ title: 'Bunpro', link: 'https://bunpro.jp' },
{ title: 'Duolingo', link: 'https://duolingo.com' },
{ title: 'Memrise', link: 'https://memrise.com' },
{ title: 'Anki', link: 'https://ankiweb.net' },
{ title: 'Japanese conjugation game', link: 'https://bibby.github.io/conjugator' },
{ title: 'LCWO', link: 'https://lcwo.net' },
{ title: 'Ham Study', link: 'https://hamstudy.org' },
{ title: 'Project Euler', link: 'https://projecteuler.net' },
{ title: 'Khan Academy', link: 'https://khanacademy.org' },
];
const CHAR_OFFSET = 97;
const liTemplate = (e, i) => `<li>[${String.fromCharCode(i + CHAR_OFFSET)}] <a href="${e.link}" target="_blank">${e.title}</a></li>`;
const lis = list.map(liTemplate).join('');
document.getElementById('bookmarks').insertAdjacentHTML('beforeend', lis);
document.addEventListener('keydown', e => {
const idx = e.key.charCodeAt(e) - CHAR_OFFSET;
list[idx] && !e.ctrlKey && !e.altKey && !e.metaKey && window.open(list[idx].link);
});
</script>
</body>
</html>