chronodiagram/app/templates/index.html

<html>

<head>
    <title>Annotations</title>
    <link rel="stylesheet" href="svganim.css">
    <style>
        body {
            background: rgb(39, 40, 41);
            font-family: sans-serif;
            color: white
        }

        #tags {
            font-size: 80%;
            padding: 0;
            margin: 0;
        }

        #tags li {
            line-height: 1.5;
            list-style: none;
        }

        #tags .tag-id-root {
            list-style: none;
            ;
        }

        #tags .tag-id-root>ul {
            margin: 0;
            padding: 0;
        }

        #tags li>div,
        #tags li.add-tag {
            cursor: pointer;
        }

        #tags .tag-id-root>div {
            display: none;
        }

        /* #tags li:hover>ul>li.add-tag {
            visibility: visible;
            ;
        } */
        #tags li.selected>ul>li.add-tag {
            display: block;
        }

        #tags>li>ul>li.add-tag {
            display: block;
            ;
        }

        #annotations .annotations-actions {
            margin-bottom: 10px;
            color: darkgray;
            font-size: 80%;
            border-bottom: solid 3px #444;
        }


        #tags .add-tag {
            display: none;
            ;
            color: lightgray;
            font-size: 80%;
        }

        #tags input[type="color"] {
            cursor: pointer;
            width: 15px;
            height: 15px;
            padding: 0;
            border: solid 1px black;
            border-radius: 2px;
            vertical-align: middle;
            margin-right: 10px;
        }

        #tags li:hover>div>input.rm-tag {
            display: inline-block;
        }

        #tags li div {
            position: relative
        }

        #tags input.rm-tag:hover {
            color: red;
            transform: rotate(20deg);
        }

        #tags input.rm-tag {
            /* display: none; */
            position: absolute;
            right: 0;
            top: 0;
            padding: 0;
            background: none;
            border: none;
            color: white;
            cursor: pointer;
        }

        #tags .selected>div {
            background: lightblue
        }


        summary h2 {
            display: inline-block;
            cursor: pointer;
        }

        details[open] summary {
            color: rgb(224, 196, 196);
        }

        /* details ul{
            display: none;
        }

        details[open] ul{
            display: block;;
        } */


        #annotation_manager {
            display: grid;
            gap: 20px;
            grid-template-columns: 200px auto;
        }

        #tags {
            grid-column: 1;
        }

        #annotations {
            grid-column: 2;
        }

        #annotations ul {
            grid-template-columns: repeat(auto-fill, 320px);
            grid-gap: 20px;
            display: grid;
            list-style: none;
            margin: 0;
            padding: 0;
        }


        #annotations li {}

        #annotations img {
            /* width: 400px; */
            background: white;
            width: 300px;
            height: 200px;
            cursor: pointer;
            padding: 10px;
        }

        #annotations .svganim_player {
            display: inline-block;
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
            padding: 10px;

            background: white;
        }

        #annotations .svganim_player svg {
            width: 100%;
            height: 100%;
        }

        #annotations .svganim_player.play:not(.loading) .controls {
            visibility: hidden;
        }

        #annotations .svganim_player:hover .controls {
            visibility: visible !important;
        }
    </style>
    <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="annotations.js"></script>
</head>

<body>
    <div id="annotation_manager">
        <ul id="tags"></ul>
        <div id="annotations"></div>
    </div>

    <hr>
    <a href="?refresh=1">Reload index</a>
</body>
<script>
    const am = new AnnotationManager(document.getElementById('annotation_manager'), 'tags.json');
</script>

</html>
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`<html>`

			`<head>`
			`<title>Annotations</title>`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`<link rel="stylesheet" href="svganim.css">`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`<style>`
			`body {`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`background: rgb(39, 40, 41);`
			`font-family: sans-serif;`
			`color: white`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`}`

Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`#tags {`
			`font-size: 80%;`
			`padding: 0;`
			`margin: 0;`
			`}`

			`#tags li {`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`line-height: 1.5;`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`list-style: none;`
			`}`

			`#tags .tag-id-root {`
			`list-style: none;`
			`;`
			`}`

			`#tags .tag-id-root>ul {`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`margin: 0;`
			`padding: 0;`
			`}`

Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`#tags li>div,`
			`#tags li.add-tag {`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`cursor: pointer;`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`}`

			`#tags .tag-id-root>div {`
			`display: none;`
			`}`

WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`/* #tags li:hover>ul>li.add-tag {`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`visibility: visible;`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`;`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`} */`
Counts for tags in index 2022-06-08 18:51:22 +02:00			`#tags li.selected>ul>li.add-tag {`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`display: block;`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`}`

Counts for tags in index 2022-06-08 18:51:22 +02:00			`#tags>li>ul>li.add-tag {`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`display: block;`
			`;`
			`}`

Counts for tags in index 2022-06-08 18:51:22 +02:00			`#annotations .annotations-actions {`
			`margin-bottom: 10px;`
			`color: darkgray;`
			`font-size: 80%;`
			`border-bottom: solid 3px #444;`
			`}`


WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`#tags .add-tag {`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`display: none;`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`;`
			`color: lightgray;`
			`font-size: 80%;`
			`}`

			`#tags input[type="color"] {`
			`cursor: pointer;`
			`width: 15px;`
			`height: 15px;`
			`padding: 0;`
			`border: solid 1px black;`
			`border-radius: 2px;`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`vertical-align: middle;`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`margin-right: 10px;`
			`}`
Counts for tags in index 2022-06-08 18:51:22 +02:00
			`#tags li:hover>div>input.rm-tag {`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`display: inline-block;`
			`}`
Counts for tags in index 2022-06-08 18:51:22 +02:00
			`#tags li div {`
			`position: relative`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`}`
Counts for tags in index 2022-06-08 18:51:22 +02:00
			`#tags input.rm-tag:hover {`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`color: red;`
			`transform: rotate(20deg);`
			`}`
Counts for tags in index 2022-06-08 18:51:22 +02:00
			`#tags input.rm-tag {`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`/* display: none; */`
Counts for tags in index 2022-06-08 18:51:22 +02:00			`position: absolute;`
			`right: 0;`
			`top: 0;`
			`padding: 0;`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`background: none;`
			`border: none;`
			`color: white;`
Counts for tags in index 2022-06-08 18:51:22 +02:00			`cursor: pointer;`
WIP upgraded index, slash annotation editor 2022-06-08 17:26:30 +02:00			`}`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00
			`#tags .selected>div {`
			`background: lightblue`
			`}`

Counts for tags in index 2022-06-08 18:51:22 +02:00
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`summary h2 {`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`display: inline-block;`
			`cursor: pointer;`
			`}`

Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`details[open] summary {`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`color: rgb(224, 196, 196);`
			`}`

			`/* details ul{`
			`display: none;`
			`}`

			`details[open] ul{`
			`display: block;;`
			`} */`

Counts for tags in index 2022-06-08 18:51:22 +02:00
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00
			`#annotation_manager {`
			`display: grid;`
			`gap: 20px;`
			`grid-template-columns: 200px auto;`
			`}`

			`#tags {`
			`grid-column: 1;`
			`}`

			`#annotations {`
			`grid-column: 2;`
			`}`

			`#annotations ul {`
			`grid-template-columns: repeat(auto-fill, 320px);`
			`grid-gap: 20px;`
			`display: grid;`
			`list-style: none;`
			`margin: 0;`
			`padding: 0;`
			`}`


Counts for tags in index 2022-06-08 18:51:22 +02:00			`#annotations li {}`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00
			`#annotations img {`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`/* width: 400px; */`
			`background: white;`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`width: 300px;`
			`height: 200px;`
			`cursor: pointer;`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`padding: 10px;`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`}`

Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`#annotations .svganim_player {`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`display: inline-block;`
			`position: relative;`
			`width: 300px;`
			`height: 200px;`
			`overflow: hidden;`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`padding: 10px;`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00
			`background: white;`
			`}`

Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`#annotations .svganim_player svg {`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`width: 100%;`
			`height: 100%;`
			`}`

Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`#annotations .svganim_player.play:not(.loading) .controls {`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`visibility: hidden;`
			`}`

Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`#annotations .svganim_player:hover .controls {`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`visibility: visible !important;`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`}`
			`</style>`
Big set of changes to load annotations incl. audio. Fixes player mode. 2022-05-30 15:02:28 +02:00			`<script src="assets/nouislider-15.5.0.js"></script>`
			`<script src="assets/wNumb-1.2.0.min.js"></script>`
			`<script src="annotate.js"></script>`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`<script src="annotations.js"></script>`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`</head>`

			`<body>`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`<div id="annotation_manager">`
			`<ul id="tags"></ul>`
			`<div id="annotations"></div>`
			`</div>`
Refresh index button 2022-01-19 11:15:55 +01:00
			`<hr>`
viewbox drag now visible on playback annotator. 2022-03-29 15:07:18 +02:00			`<a href="?refresh=1">Reload index</a>`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`</body>`
			`<script>`
Start with tag management. Incl. fancier index 2022-06-08 13:28:36 +02:00			`const am = new AnnotationManager(document.getElementById('annotation_manager'), 'tags.json');`
index template. Fix python requirement 2022-01-19 10:55:30 +01:00			`</script>`

			`</html>`