side panel

master
km0 3 years ago
parent e8afdfdfc8
commit 055b47e92b

@ -4,13 +4,16 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="labels.js" defer></script> <script src="labels.js" defer></script>
<script src="picture.js" defer></script> <script src="picture.js" defer></script>
<script src="panel.js" defer></script>
<link rel="stylesheet" href="style.css" /> <link rel="stylesheet" href="style.css" />
<title>Concrete Label</title> <title>Concrete Label</title>
</head> </head>
<body> <body>
<div id="container"> <main id="container">
<figure class="background-container"> <figure class="background-container">
<input type="file" /> <input type="file" />
<img id="background-image" draggable="false" src="#" /> <img id="background-image" draggable="false" src="#" />
@ -23,6 +26,24 @@
<button id="cancel">x</button> <button id="cancel">x</button>
</form> </form>
</div> </div>
</div> </main>
<button id="show-info">?</button>
<aside class="info" id="info-panel">
<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>
</body> </body>
</html> </html>

@ -0,0 +1,14 @@
const showInfo = document.getElementById("show-info");
const infoPanel = document.getElementById("info-panel");
showInfo.addEventListener("click", (e) => {
if (infoPanel.classList.contains("active")) {
infoPanel.classList.remove("active");
showInfo.classList.remove("active");
showInfo.innerHTML = "?";
} else {
infoPanel.classList.add("active");
showInfo.classList.add("active");
showInfo.innerHTML = "X";
}
});

@ -2,6 +2,8 @@ html,
body { body {
margin: 0; margin: 0;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
width: 100%;
overflow: hidden;
} }
#container { #container {
@ -88,7 +90,6 @@ body {
z-index: 200; z-index: 200;
width: 100%; width: 100%;
height: 100vh; height: 100vh;
/* display: flex; */
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -155,3 +156,68 @@ body {
.hidden { .hidden {
display: none; display: none;
} }
.info {
position: absolute;
right: 0;
bottom: 0;
top: 0;
z-index: 50;
padding: 24px;
margin: 0;
width: 25%;
line-height: 1.6;
background-color: #111;
color: white;
transform: translateX(100%);
transition: transform 0.4s ease-out;
}
.info.active {
transform: translateX(0);
transition: transform 0.4s ease-in;
}
.info .title {
margin: 0;
}
#show-info {
position: absolute;
top: 24px;
right: 24px;
z-index: 100;
background: none;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
border: 1px solid currentColor;
color: tomato;
cursor: pointer;
}
#show-info:hover {
border: 1px solid tomato;
background-color: tomato;
color: white;
}
#show-info.active {
color: white;
}
#show-info:hover.active {
border: 1px solid white;
background-color: white;
color: #111;
}

Loading…
Cancel
Save