65 lines
2.1 KiB
HTML
65 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<link rel="icon" href="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
|
|
<title>Homepage</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Inconsolata-LGC';
|
|
src: local('Inconsolata-LGC'),
|
|
url(/fonts/Inconsolata-LGC.woff2) format('woff2'),
|
|
url(/fonts/Inconsolata-LGC.woff) format('woff');
|
|
font-display: swap;
|
|
}
|
|
:root {--b: #000; --w: #fff;}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {--b: #fff; --w: #000;}
|
|
}
|
|
body {
|
|
background: var(--w);
|
|
color: var(--b);
|
|
font-family: 'Inconsolata-LGC', monospace;
|
|
}
|
|
div.container {width: fit-content; margin: auto;}
|
|
ul {list-style: none; padding: 0;}
|
|
li:hover:before {margin-left: -2ch; content: "> ";}
|
|
a {text-decoration: none; color: var(--b);}
|
|
a:hover, a:active {color: var(--w); background: var(--b);}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div id="list"></div>
|
|
</div>
|
|
<script>
|
|
var request = new XMLHttpRequest();
|
|
request.overrideMimeType("application/json");
|
|
request.open("GET", "bookmarks.json");
|
|
request.onload = function () {
|
|
if (request.status >= 200 && request.status < 400) {
|
|
var bookmarks = JSON.parse(this.response);
|
|
var list = document.createElement('ul');
|
|
for (var i = 0; i < bookmarks.links.length; i++) {
|
|
var item = document.createElement('li');
|
|
var a = document.createElement('a');
|
|
console.log(bookmarks.links[i])
|
|
a.title = bookmarks.links[i].title;
|
|
a.href = bookmarks.links[i].url;
|
|
a.appendChild(document.createTextNode(bookmarks.links[i].title));
|
|
item.appendChild(a);
|
|
list.appendChild(item);
|
|
}
|
|
document.getElementById("list").appendChild(list)
|
|
} else {
|
|
console.error(request.status);
|
|
document.title = request.status;
|
|
}
|
|
}
|
|
request.send(null);
|
|
</script>
|
|
</body>
|
|
</html>
|