coco/www/saved.html

77 lines
2.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Plotting Data: COCO drawings</title>
<!-- Plotting Data publication -->
<link rel="stylesheet" type="text/css" href="/a/css/main.css">
<link rel="stylesheet" type="text/css" href="coco.css">
</head>
<body class='hideImages saved'>
<nav id='publication'>
<a href="/a/introduction.html">
Introduction
</a>
<a href="/a/coco/" class='current'>
COCO
</a>
<a href="/a/enron/">
Enron
</a>
<a href="/a/20bn/">
Something-Something
</a>
<a href="/a/interviews.html">
Interviews
</a>
<div id='sub'>
<a href="/a/introduction.html#dataset-for-4-year-olds-coco">Dataset for 4 year olds</a>
</div>
</nav>
<div class='buttons buttons-inline'>
<label id='convert'><input type='checkbox' id='loadImages'> <span>Images</span></label>
<label id='labelcheck'><input type='checkbox' id='loadLabels'> <span>Labels</span></label>
<label id='bgcheck'><input type='checkbox' id='loadBg' checked> <span>Scenes</span></label>
<label id='godraw'><a href='/a/coco/'>Draw your own!</a></label>
</div>
<div id='saved'>
{images}
</div>
<script type="text/javascript">
let loadImagesEl = document.getElementById('loadImages');
let loadLabelsEl = document.getElementById('loadLabels');
let loadBgsEl = document.getElementById('loadBg');
let setImageClass = function() {
if(loadImagesEl.checked) {
document.body.classList.remove('hideImages');
} else {
document.body.classList.add('hideImages');
}
}
let setLabelClass = function() {
if(loadLabelsEl.checked) {
document.body.classList.remove('hideLabels');
} else {
document.body.classList.add('hideLabels');
}
}
let setBgClass = function() {
if(loadBgsEl.checked) {
document.body.classList.remove('hideBg');
} else {
document.body.classList.add('hideBg');
}
}
loadImagesEl.addEventListener('change', (e) => setImageClass());
loadLabelsEl.addEventListener('change', (e) => setLabelClass());
loadBgsEl.addEventListener('change', (e) => setBgClass());
setImageClass();
setLabelClass();
setBgClass();
</script>
</body>
</html>