assets/css/stylesheet.css

@@ -116,9 +116,6 @@ body {
 }
 
 .flip-card {
-    opacity: 0;
-    visibility: hidden;
-    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
     width: 30%;
     align-items: center;
     text-align: center;
@@ -126,21 +123,17 @@ body {
     margin-top: -90px;
 }
 
-.flip-card.visible {
-    opacity: 1;
-    visibility: visible;
-}
-
 .tendrils {
     padding-top: 15px;
     width: 100%;   
 }
 
-.info_layer {
+.info-layer {
     padding-top: 15px;
     padding-bottom: 20px;
 }
 
+
 .flip-card-inner {
   position: relative;
   width: 100%;
@@ -166,14 +159,13 @@ body {
 }
 
 .flip-card-front {
-    
+  background-color: #bbb;
-  background-color: #d4d1d0;
   border-radius: 30px;
   color: black;
 }
 
 .flip-card-back {
-  background-color: #d4d1d0;
+  background-color: #bbb;
   color: black;
   border-radius: 30px;
   transform: rotateY(180deg);

assets/js/script.js

@@ -94,35 +94,21 @@ function getResponse(keyword) {
         return {
             screen: "I'm not sure how to respond. Change your approach.",
             paper: "Unknown",
-            info_layer: "Unknown",
         };
     }
 }
 
-
 function handleInput() {
     var userInput = document.getElementById("user_input").value.trim();
     var response = getResponse(userInput);
     document.getElementById("output").innerText = response.screen;
-    document.querySelector(".info_layer").innerText = response.info_layer; // Update info_layer content
-    document.querySelector("h1").innerText = userInput; // Update h1 text to user input
-    document.querySelector("h1").className = "response-heading"; // Assign suitable class to h1
-
     printing(response.paper);
 
-    // Toggle flip-card visibility
-    var flipCard = document.querySelector(".flip-card");
-    if (userInput) {
-        flipCard.classList.add("visible");
-    } else {
-        flipCard.classList.remove("visible");
-    }
 
     console.log("Paper: " + userInput);
-    console.log("info_layer: " + response.info_layer); // Log info_layer content
+    console.log("info_layer" + userInput);
 }
 
-
 function printing(input){
     fetch("https://hub.xpub.nl/chopchop/cgi-bin/table.cgi?input=" + input);
 }

index.html

@@ -41,11 +41,12 @@
         <div class="flip-card-inner">
           <div class="flip-card-front">
         <img class="tendrils" src="assets/img/tendrils.svg"></img>
-        <h1></h1>
+        <h2>monster</h2>
+        <p class="info-layer">a site of tension, ambiguity, anomaly that challenges the established social order. A moster doesn't fit, emerges unexpectedly shedding light on toxic dynamics of power and on the invisible suffering of those who inhabits the border(land)s, the "other".</p>
         <img class="tendrils" src="assets/img/tendrils.svg"></img>
     </div>
     <div class="flip-card-back">
-      <p class="info_layer"></p>
+      <h2>Back of the card</h2>
     </div>
   </div>
 </div>