panels wip

index.html

@@ -7,7 +7,7 @@
 
 		<script src="labels.js" defer></script>
 		<script src="picture.js" defer></script>
-		<script src="panel.js" defer></script>
+		<script src="panels.js" defer></script>
 
 		<link rel="stylesheet" href="style.css" />
 		<title>Concrete Label</title>
@@ -27,8 +27,12 @@
 				</form>
 			</div>
 		</main>
+		<nav>
+			<button id="show-transcription">...</button>
 			<button id="show-info">?</button>
+		</nav>
 		<aside class="info" id="info-panel">
+			<button class="close">X</button>
 			<h1 class="title">Concrete 🎏 Label</h1>
 			<p>
 				How could computer read concrete & visual poetry? How does computer navigate through
@@ -45,5 +49,9 @@
 				Everything happen in your browser.
 			</p>
 		</aside>
+		<aside class="transcription" id="transcription-panel">
+			<button class="close">X</button>
+			<h1 class="title">Label Transcription</h1>
+		</aside>
 	</body>
 </html>

panel.js

@@ -1,14 +0,0 @@
-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";
-	}
-});

panels.js

@@ -0,0 +1,19 @@
+const showInfo = document.getElementById("show-info");
+const infoPanel = document.getElementById("info-panel");
+
+showInfo.addEventListener("click", (e) => {
+	infoPanel.classList.add("active");
+	infoPanel.querySelector(".close").addEventListener("click", (e) => {
+		infoPanel.classList.remove("active");
+	});
+});
+
+const showTranscription = document.getElementById("show-transcription");
+const transcriptionPanel = document.getElementById("transcription-panel");
+
+showTranscription.addEventListener("click", (e) => {
+	transcriptionPanel.classList.add("active");
+	transcriptionPanel.querySelector(".close").addEventListener("click", (e) => {
+		transcriptionPanel.classList.remove("active");
+	});
+});

style.css

@@ -157,7 +157,8 @@ body {
 	display: none;
 }
 
-.info {
+.info,
+.transcription {
 	position: absolute;
 	right: 0;
 	bottom: 0;
@@ -177,21 +178,20 @@ body {
 	transition: transform 0.4s ease-out;
 }
 
+.transcription.active,
 .info.active {
 	transform: translateX(0);
 	transition: transform 0.4s ease-in;
 }
 
+.transcription .title,
 .info .title {
 	margin: 0;
 }
 
-#show-info {
-	position: absolute;
-	top: 24px;
-	right: 24px;
-	z-index: 100;
-
+#show-info,
+#show-transcription,
+.close {
 	background: none;
 
 	display: inline-block;
@@ -206,18 +206,39 @@ body {
 	cursor: pointer;
 }
 
+#show-transcription:hover,
 #show-info:hover {
 	border: 1px solid tomato;
 	background-color: tomato;
 	color: white;
 }
 
-#show-info.active {
+.close {
+	position: absolute;
+	right: 24px;
+	top: 24px;
 	color: white;
 }
 
-#show-info:hover.active {
+.close:hover {
 	border: 1px solid white;
 	background-color: white;
 	color: #111;
 }
+
+nav {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 50;
+
+	padding: 24px;
+	text-align: right;
+
+	pointer-events: none;
+}
+
+nav > * {
+	pointer-events: all;
+}