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
92 lines
3.0 KiB
HTML
4 years ago
|
<!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>
|