<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Annotate a line animation</title> <style media="screen"> body { /* background: black; color: white */ background: lightgray; } #sample, svg { position: absolute; top: 20px; left: 20px; width: calc(100% - 40px); height: calc(100% - 200px); font-family: sans-serif; z-index: 2; /* background: white; */ /* border: solid 2px lightgray; */ } svg .background { fill: white } img { position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; height: 100%; z-index: 1; } path { fill: none; stroke: gray; stroke-width: 1mm; stroke-linecap: round; } g.before path { opacity: 0.5; stroke: gray !important; } g.after path, path.before_in { opacity: .1; stroke: gray !important; } #wrapper { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: none; } .gray { position: absolute; background: rgba(255, 255, 255, 0.7); } .controls--playback{ /* display:flex; */ } .timecode{ position: absolute; right: 100%; width: 5%; font-size:8px; } .controls--playback input[type='range'] { /* position: absolute; z-index: 100; bottom: 0; left: 0; right: 0; */ width: 100%; } .controls button.paused, .controls button.playing{ position: absolute; left: 100%; width: 30px; } .controls button.paused::before{ content: '⏵'; } .controls button.playing::before{ content: '⏸'; } .controls { position: absolute !important; z-index: 100; bottom: 10px; left: 5%; right: 0; width: 90%; } .scrubber {} .tags { line-height: 40px; display: flex; flex-direction: row; padding: 0; margin: 0; } .tags .tag { display: block; padding: 5px; border: solid 1px darkgray; flex-grow: 1; text-align: center; } .tags li{ display: block; } .tags .subtags{ padding:0; font-size: 80%; display: flex; flex-direction: row; flex-wrap: wrap; } .tags .subtags .tag{ padding: 2px; } .tags .tag:hover { cursor: pointer; background: darkgray; } .tags .tag.selected { background: #3FB8AF; } .tags .tag.annotation-rm { /* display: none; */ overflow: hidden; color: red; font-size: 30px; width: 0; flex-grow: 0; padding: 5px 0; transition: width .3s; pointer-events: none; border: none; direction: rtl; /* hide behind bar, instead into nothing */ } .selected-annotation .tags .tag.annotation-rm { color: red; display: block; width: 30px; pointer-events: all; } .tags .tag span { display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: middle; border-radius: 5px; } .tags .subtags .tag span{ width: 10px; height: 10px; margin-right: 2px; } .annotations { height: 30px; /* border: solid 1px darkgray; */ position: relative; } .annotations>div { opacity: .4; background: lightseagreen; position: absolute; bottom: 0; top: 0; } .annotations>div:hover, .annotations>div.selected { opacity: 1; cursor: pointer; } .unsaved::before { content: '*'; color: red; display: inline-block; text-align: center; font-size: 30px; position: absolute; top: 10px; left: 10px; } .saved::before { content: '\2713'; display: inline-block; color: green; text-align: center; font-size: 30px; position: absolute; top: 10px; left: 10px; } .noUi-horizontal .noUi-touch-area { cursor: ew-resize; } #interface .noUi-horizontal .noUi-tooltip{ /* tooltips go below the buttons */ bottom:auto; top:110%; } .audioconfig{ z-index: 9; background:black; color: white; position: relative; width: 100px; /* as wide as audio controls only */ overflow: hidden; white-space: nowrap; } .audioconfig:hover{ width: auto; } .audioconfig select, .audioconfig input{ margin:10px; } audio{ vertical-align: middle; width: 100px; /* hides seek head */ } .playlist img{ position: static; width: 250px; height: 250px; background: white; display: block; } </style> <link rel="stylesheet" href="assets/nouislider-15.5.0.css"> <link rel="stylesheet" href="core.css"> </head> <body> <div id='interface'> </div> <script src="assets/nouislider-15.5.0.js"></script> <script src="assets/wNumb-1.2.0.min.js"></script> <script src="annotate.js"></script> <script src="playlist.js"></script> <script type='text/javascript'> let ann; if (location.search) { ann = new Annotator( document.getElementById("interface"), "tags.json", location.search.substring(1) ); } else { const playlist = new Playlist(document.getElementById("interface"), '/files/'); } // Hack to disable hardware media keys starting/stopping the audio playback navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ }); navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ }); navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ }); navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ }); navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ }); navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ }); </script> </body> </html>