This repository has been archived on 2022-08-19. You can view files and clone it, but cannot push or open issues or pull requests.
hydrogen-web/scripts/logviewer/index.html

128 lines
3.1 KiB
HTML
Raw Normal View History

2021-02-18 15:18:58 +05:30
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html, body {
height: 100%;
}
body {
font-family: sans-serif;
font-size: 1rem;
margin: 0;
display: grid;
grid-template-areas: "nav nav" "items details";
grid-template-columns: 1fr 400px;
grid-template-rows: auto 1fr;
min-height: 0;
}
main {
grid-area: items;
min-width: 0;
min-height: 0;
overflow-y: auto;
}
aside {
grid-area: details;
2021-02-18 15:38:43 +05:30
padding: 8px;
2021-02-18 15:18:58 +05:30
}
aside h3 {
word-wrap: anywhere;
}
2021-02-18 15:38:43 +05:30
aside p {
margin: 2px 0;
}
2021-02-18 15:18:58 +05:30
aside .values li span {
word-wrap: ;
word-wrap: anywhere;
}
aside .values {
list-style: none;
padding: 0;
2021-02-18 15:38:43 +05:30
border: 1px solid lightgray;
2021-02-18 15:18:58 +05:30
}
2021-02-18 15:38:43 +05:30
aside .values span.key {
width: 30%;
2021-02-18 15:18:58 +05:30
display: block;
}
2021-02-18 15:38:43 +05:30
aside .values span.value {
width: 70%;
display: block;
padding-left: 10px;
}
2021-02-18 15:18:58 +05:30
aside .values li {
display: flex;
2021-02-18 15:38:43 +05:30
}
aside .values li:not(:first-child) {
border-top: 1px solid lightgray;
2021-02-18 15:18:58 +05:30
}
nav {
grid-area: nav;
}
.timeline ol {
list-style: none;
padding: 0 0 0 20px;
}
.timeline div.item {
--hue: 100deg;
--brightness: 80%;
background-color: hsl(var(--hue), 60%, var(--brightness));
border: 1px solid hsl(var(--hue), 60%, calc(var(--brightness) - 40%));
border-radius: 4px;
padding: 2px;
display: flex;
margin: 1px;
}
.timeline div.item .caption {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex: 1;
}
.timeline div.item.level-3 {
--brightness: 90%;
}
.timeline div.item.level-6 {
--hue: 0deg !important;
}
.timeline div.item.type-network {
--hue: 30deg;
}
.timeline div.item.selected {
background-color: Highlight;
border-color: Highlight;
color: HighlightText;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<nav><button id="openFile">Open log file</button></nav>
<main></main>
<aside></aside>
<script type="module" src="main.js"></script>
</body>
</html>