annotator/static/annotator.html

126 lines
3.2 KiB
HTML
Raw Permalink Normal View History

2023-02-23 11:56:58 +01:00
<!doctype HTML>
<html>
<head>
<meta charset="utf-8">
<style>
* {
font-family: sans-serif;
}
2023-02-23 16:04:55 +01:00
.main {
position: fixed;
width: calc(90vw - 20px);
left: calc(10vw + 20px);
right: 0px;
}
2023-02-23 11:56:58 +01:00
.centered {
margin-left: auto;
margin-right: auto;
text-align: center;
}
.column {
float: left;
width: 50%;
padding: 10px;
box-sizing: border-box;
}
2023-02-23 16:04:55 +01:00
.column10 {
display: inline-block;
width: 10vw;
padding: 5px;
box-sizing: border-box;
}
2023-02-23 11:56:58 +01:00
.row:after {
content: "";
display: table;
clear: both;
}
img {
max-width: 100%;
max-height: 100%;
}
2023-02-23 16:04:55 +01:00
.selected {
border-style: solid;
border-width: 2px;
border-color: red;
}
.notselected {
border-style: solid;
border-width: 2px;
border-color: rgba(0, 0, 0, 0);
}
2023-02-23 11:56:58 +01:00
#annotations {
margin-left: 20px;
2023-02-23 16:04:55 +01:00
height: auto;
}
#navbar {
position: fixed;
border-right: solid;
border-width: 1px;
height: 100vh;
left: 0;
overflow-y: scroll;
width: 10%;
padding: 10px;
}
table, th, td {
border: 1px solid black;
}
td {
text-align: center;
padding: 5px;
}
p {
margin: 0px;
padding: 0px;
2023-02-23 11:56:58 +01:00
}
</style>
</head>
<body>
2023-02-23 16:04:55 +01:00
<div id="navbar" class="row"></div>
<div class="main">
<h1 class="centered">Annotator</h1>
<div class="row">
<div class="column">
<h2 class="centered">Previous frame (<span id="img-1-index">1</span>)</h2>
<img class="notselected" id="img-1">
</div>
<div class="column">
<h2 class="centered">Current frame (<span id="img-2-index">2</span>)</h2>
<img class="selected" id="img-2">
</div>
2023-02-23 11:56:58 +01:00
</div>
2023-02-23 16:04:55 +01:00
<div class="row">
<div class="column">
<h3 class="centered">Shorcuts:</h3>
<table id="shortcuts" class="centered">
<tr id="shortcuts-index">
</tr>
<tr id="shortcuts-value">
</tr>
</table>
</div>
<div class="column">
<h3>Annotations:</h3>
<div id="annotations">
</div>
2023-02-23 11:56:58 +01:00
</div>
</div>
</div>
<script src="/static/main.js"></script>
</body>
</html>