side panel

3 years ago · 055b47e92b
parent e8afdfdfc8
commit 055b47e92b
3 changed files with 104 additions and 3 deletions
--- a/index.html
+++ b/index.html
@ -4,13 +4,16 @@
 		<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="labels.js" defer></script>
 		<script src="picture.js" defer></script>
+		<script src="panel.js" defer></script>
+
 		<link rel="stylesheet" href="style.css" />
 		<title>Concrete Label</title>
 	</head>
 	<body>
-		<div id="container">
+		<main id="container">
 			<figure class="background-container">
 				<input type="file" />
 				<img id="background-image" draggable="false" src="#" />
@ -23,6 +26,24 @@
 					<button id="cancel">x</button>
 				</form>
 			</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>
 </html>
--- a/panel.js
+++ b/panel.js
@ -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";
+	}
+});
--- a/style.css
+++ b/style.css
@ -2,6 +2,8 @@ html,
 body {
 	margin: 0;
 	font-family: Arial, Helvetica, sans-serif;
+	width: 100%;
+	overflow: hidden;
 }

 #container {
@ -88,7 +90,6 @@ body {
 	z-index: 200;
 	width: 100%;
 	height: 100vh;
-	/* display: flex; */

 	justify-content: center;
 	align-items: center;
@ -155,3 +156,68 @@ body {
 .hidden {
 	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;
+}