Update app_enhanced.py

app_enhanced.py

@@ -73,6 +73,10 @@ INDEX_HTML = '''
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Movie to Comic Generator</title>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet">
     <style>
         body {
             background-color: #fdf6e3;
@@ -562,85 +566,75 @@ class EnhancedComicGenerator:
         .speech-bubble.selected { outline: 2px dashed #4CAF50; }
         .speech-bubble textarea { position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; border: 1px solid #4CAF50; background: rgba(255,255,255,0.95); font: inherit; text-align: center; resize: none; padding: 8px; z-index: 102; }
         
-        /* <<< VARIANT #85: MASKED CURVED TAIL >>> */
+        /* <<< ROBUST BORDER-BASED SHARK FIN TAIL >>> */
         .speech-bubble.speech {
-            /* Variables defined inline via slider, default values here */
-            --b: 3em;   /* tail base width */
-            --h: 1.8em; /* tail height */
-            --t: 0.6;   /* thickness factor */
-            --p: var(--tail-pos, 50%);  /* Slider position */
-            --r: 15px;  /* Border Radius */
+            --bubble-fill-color: #4ECDC4; /* Default fill */
+            --bubble-text-color: #ffffff;
+            --tail-pos: 50%;
             
-            /* IMPORTANT: Default colors in case var is missing */
-            background: var(--bubble-fill-color, #4ECDC4);
-            color: var(--bubble-text-color, #fff);
+            background: var(--bubble-fill-color);
+            color: var(--bubble-text-color);
+            border-radius: 12px;
             padding: 1em;
-            
-            /* Robust border-radius calculation using calc() for compatibility */
-            /* TopLeft TopRight BottomRight BottomLeft / VerticalRadius */
-            border-radius: var(--r) var(--r) 
-                           min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) 
-                           min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) 
-                           / var(--r);
-            
-            /* Ensure it stays absolute to position on image */
-            position: absolute; 
+            position: absolute;
         }
 
-        /* The Tail Pseudo-Element */
+        /* The Tail Pseudo-Element using BORDERS (Export Safe) */
         .speech-bubble.speech:before {
             content: "";
             position: absolute;
-            width: var(--b);
-            height: var(--h);
-            background: inherit; /* Inherits teal/fill color */
-            border-bottom-left-radius: 100%;
+            width: 0; 
+            height: 0; 
+            border-style: solid;
             pointer-events: none;
             
-            /* Mask gradient to create the 'cutout' curve */
-            -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0, #0000 99%, #000 101%);
-            mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0, #0000 99%, #000 101%);
+            /* Shark Fin Shape: Right Angled Triangle logic */
+            /* This creates a solid triangle that works in html2canvas */
         }
 
-        /* BOTTOM TAIL (Standard) */
+        /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:before {
+            /* Triangle pointing down */
+            border-width: 25px 20px 0 0;
+            border-color: var(--bubble-fill-color) transparent transparent transparent;
+            
             top: 100%;
-            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
+            left: var(--tail-pos);
+            transform: translateX(-50%); /* Center the tip horizontally */
         }
 
-        /* TOP TAIL (Flipped) */
-        .speech-bubble.speech.tail-top {
-             /* Flip border radius logic for top */
-             border-radius: min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) 
-                            min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) 
-                            var(--r) var(--r) / var(--r);
-        }
+        /* TOP TAIL */
         .speech-bubble.speech.tail-top:before {
+            /* Triangle pointing up */
+            border-width: 0 20px 25px 0;
+            border-color: transparent transparent var(--bubble-fill-color) transparent;
+            
             bottom: 100%;
-            left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            transform: scaleY(-1);
+            left: var(--tail-pos);
+            transform: translateX(-50%);
         }
 
-        /* LEFT TAIL (Rotated) */
-        .speech-bubble.speech.tail-left {
-            border-radius: var(--r); /* Simplification for side tails to avoid breakage */
-        }
+        /* LEFT TAIL */
         .speech-bubble.speech.tail-left:before {
+            /* Triangle pointing left */
+            border-width: 0 25px 20px 0;
+            border-color: transparent var(--bubble-fill-color) transparent transparent;
+            
             right: 100%;
-            top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            transform: rotate(90deg);
-            transform-origin: right top;
+            top: var(--tail-pos);
+            transform: translateY(-50%);
         }
 
-        /* RIGHT TAIL (Rotated) */
-        .speech-bubble.speech.tail-right {
-             border-radius: var(--r);
-        }
+        /* RIGHT TAIL */
         .speech-bubble.speech.tail-right:before {
+            /* Triangle pointing right */
+            border-width: 20px 25px 0 0;
+            border-color: var(--bubble-fill-color) transparent transparent transparent;
+            
             left: 100%;
-            top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            transform: rotate(-90deg);
-            transform-origin: left top;
+            top: var(--tail-pos);
+            transform: translateY(-50%) rotate(90deg); /* Rotate standard triangle */
+            transform-origin: top left;
         }
 
         .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
@@ -1072,11 +1066,10 @@ class EnhancedComicGenerator:
             const pages = document.querySelectorAll('.comic-page');
             if (pages.length === 0) return alert("No pages found.");
             
-            // 1. FREEZE DIMENSIONS BEFORE EXPORT
+            // 1. FREEZE DIMENSIONS BEFORE EXPORT (Prevents size reset bug)
             const bubbles = document.querySelectorAll('.speech-bubble');
             bubbles.forEach(b => {
                 const rect = b.getBoundingClientRect();
-                // Force explicit dimensions to prevent html2canvas reflow
                 b.style.width = rect.width + 'px';
                 b.style.height = rect.height + 'px';
                 b.style.minWidth = rect.width + 'px';
@@ -1102,7 +1095,6 @@ class EnhancedComicGenerator:
                 b.style.minHeight = '30px'; 
                 b.style.maxWidth = '';       
                 b.style.maxHeight = ''; 
-                // We keep current width/height as user set them
             });
         }