You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

62 lines
2.0 KiB
HTML

3 years ago
<!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" />
3 years ago
3 years ago
<script src="labels.js" defer></script>
<script src="picture.js" defer></script>
3 years ago
<script src="panels.js" defer></script>
<script src="text-export.js" defer></script>
3 years ago
3 years ago
<link rel="stylesheet" href="style.css" />
<title>Concrete Label</title>
</head>
<body>
3 years ago
<main id="container">
<figure class="background-container">
3 years ago
<input type="file" />
<img id="background-image" draggable="false" src="#" />
3 years ago
</figure>
3 years ago
<div id="editor"></div>
3 years ago
<div class="text-input">
<form class="modal">
3 years ago
<input id="input" placeholder="Describe this area" type="text" />
3 years ago
<button id="insert" type="submit">Insert</button>
<button id="cancel">x</button>
</form>
</div>
3 years ago
</main>
3 years ago
<nav>
<button id="show-transcription">Export</button>
3 years ago
<button id="show-info">?</button>
<button id="show-image">IMG</button>
3 years ago
</nav>
3 years ago
<aside class="info" id="info-panel">
3 years ago
<button class="close">X</button>
3 years ago
<h1 class="title">Concrete 🎏 Label</h1>
<p>
How could computer read concrete & visual poetry? How does computer navigate through
text objects in which layout and graphical elements play a fundamental role?
</p>
<p>
With this tool you can upload an image and then annotate it spatially. In doing so
you generate a transcription of the image that keeps track of the order of your
annotations (and so the visual path you take when reading the image), as well as
their position and size. (wip 👹)
</p>
<p>
Neither the image nor the labels nor the transcription will be uploaded online.
Everything happen in your browser.
</p>
</aside>
3 years ago
<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>
3 years ago
</aside>
3 years ago
</body>
</html>