Layout update

app.py

@@ -46,13 +46,23 @@ flip_card_html = """
 <br>
 
 <div style="text-align: center; font-size: 1rem;">
-<p>🧠 <a href="https://huggingface.co/crossroderick/dalat5" target="_blank">Model page</a><br>
-   🔤 <a href="https://astanatimes.com/2021/02/kazakhstan-presents-new-latin-alphabet-plans-gradual-transition-through-2031/" target="_blank">Kazakhstan 2021 alphabet reform</a></p>
+<p>🧠 <a href="https://huggingface.co/crossroderick/dalat5" target="_blank">Model page</a> | 🔤 <a href="https://astanatimes.com/2021/02/kazakhstan-presents-new-latin-alphabet-plans-gradual-transition-through-2031/" target="_blank">Kazakhstan 2021 alphabet reform</a></p>
 
 <br>
 
 <p>Егер сіз үлес қосқыңыз, бірлесіп жұмыс жасағыңыз немесе жай ғана пікір бөліскіңіз келсе – байланысыңыз / If you'd like to contribute, collaborate, or just share feedback – feel free to connect with <a href="https://www.linkedin.com/in/rpereiracruz/" target="_blank">Rodrigo Pereira Cruz</a>. 🇧🇷🇰🇿</p>
 </div>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    const card = document.querySelector(".flip-card");
+    const inner = document.querySelector(".flip-card-inner");
+
+    card.addEventListener("click", function() {
+        inner.classList.toggle("flipped");
+    });
+});
+</script>
 """
 
 # Custom CSS for flip card
@@ -64,6 +74,7 @@ flip_card_css = """
   height: 250px;
   perspective: 1000px;
   margin: 0 auto 2rem auto;
+  cursor: pointer; /* Makes it obvious it's clickable */
 }
 
 .flip-card-inner {
@@ -73,11 +84,10 @@ flip_card_css = """
   text-align: center;
   transition: transform 0.8s;
   transform-style: preserve-3d;
-  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
   border-radius: 15px;
 }
 
-.flip-card:hover .flip-card-inner {
+.flip-card-inner.flipped {
   transform: rotateY(180deg);
 }
 
@@ -86,7 +96,9 @@ flip_card_css = """
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
-  background-color: #fefefe;
+  background-color: transparent;
+  color: inherit;
+  border: 1px solid rgba(255, 255, 255, 0.2);
   border-radius: 15px;
   padding: 20px;
   display: flex;
@@ -94,14 +106,18 @@ flip_card_css = """
   justify-content: center;
 }
 
-.flip-card-front {
-  background-color: #f0f8ff;
-}
-
 .flip-card-back {
-  background-color: #e6f7ff;
   transform: rotateY(180deg);
 }
+
+a {
+  color: inherit;
+  text-decoration: underline;
+}
+
+a:hover {
+  opacity: 0.8;
+}
 """
 
 # Interface
@@ -115,6 +131,7 @@ with gr.Blocks(css = flip_card_css) as demo:
             placeholder = "Мен қазақ тілінде сөйлеймін.",
             lines = 6
         ),
+
         outputs = gr.Textbox(
             label = "Латын графикасының шығуы / Latin script output",
         ),