|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
<script src="session.js" defer></script>
|
|
|
|
<script src="labels.js" defer></script>
|
|
|
|
<script src="picture.js" defer></script>
|
|
|
|
<script src="panels.js" defer></script>
|
|
|
|
<script src="text-export.js" defer></script>
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
<title>Concrete Label</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<main id="container">
|
|
|
|
<figure class="background-container">
|
|
|
|
<img id="background-image" draggable="false" src="./assets/map_description_H.jpg" />
|
|
|
|
</figure>
|
|
|
|
<div id="editor"></div>
|
|
|
|
<div class="text-input">
|
|
|
|
<form class="modal">
|
|
|
|
<textarea id="input" placeholder="Describe this area" type="text"></textarea>
|
|
|
|
<button id="insert" type="submit">Insert</button>
|
|
|
|
<button id="cancel">x</button>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<nav>
|
|
|
|
<button id="show-transcription">Export</button>
|
|
|
|
<button id="show-info">?</button>
|
|
|
|
<button id="show-image">IMG</button>
|
|
|
|
</nav>
|
|
|
|
<aside class="info" id="info-panel">
|
|
|
|
<button class="close">X</button>
|
|
|
|
<h1 class="title">Concrete 🎏 Label</h1>
|
|
|
|
<p>
|
|
|
|
What do we need to know: - text labels-contents - order - position - size - who
|
|
|
|
wrote it ? (random id? name? nothing at all?) - timestamp ? -
|
|
|
|
</p>
|
|
|
|
</aside>
|
|
|
|
<aside class="transcription" id="transcription-panel">
|
|
|
|
<button class="close">X</button>
|
|
|
|
<h1 class="title">Label Transcription</h1>
|
|
|
|
<ol class="labels-contents"></ol>
|
|
|
|
<button id="export-text">Export</button>
|
|
|
|
</aside>
|
|
|
|
</body>
|
|
|
|
</html>
|