Update app_enhanced.py

app_enhanced.py

@@ -562,22 +562,17 @@ 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; }
         
-        /* <<< THIN "SHARK FIN" TAIL (EXPORT SAFE) >>> */
-        /* 
-           We replicate the visual result of the Mask CSS using a "Crescent Shadow" trick.
-           This creates the thin, curved thorn shape using box-shadow on a rounded element,
-           which IS supported by html2canvas (unlike masks).
-        */
+        /* <<< VARIANT #85: "SHARK FIN" SHAPE (EXPORT SAFE: BOX-SHADOW METHOD) >>> */
         .speech-bubble.speech {
             --bubble-fill-color: #4ECDC4;
             --bubble-text-color: #ffffff;
-            --bubble-border-color: #333333; /* Only used if borders enabled */
+            --bubble-border-color: #333333; 
             --tail-pos: 50%;
             
-            /* The original variables from your CSS */
-            --b: 3em;   /* base */
-            --h: 1.8em; /* height */
-            --t: .6;    /* thickness */
+            /* Variables from your specific CSS */
+            --b: 3em;   /* tail base */
+            --h: 1.8em; /* tail height */
+            --t: 0.6;   /* thickness */
             --r: 1.2em; /* radius */
 
             background: var(--bubble-fill-color);
@@ -585,72 +580,77 @@ class EnhancedComicGenerator:
             padding: 1em;
             position: absolute;
             
-            /* The exact border-radius logic from your CSS */
+            /* EXACT border-radius logic from your requested CSS */
             border-radius: var(--r) var(--r) 
                            min(var(--r), calc(100% - var(--tail-pos) - (1 - var(--t)) * var(--b) / 2)) 
                            min(var(--r), calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2)) 
                            / var(--r);
         }
 
+        /* 
+           EXPORT SAFE TRICK: 
+           Instead of 'mask' (which fails export), we use a transparent box 
+           with a curved border-radius and an INSET BOX-SHADOW.
+           This paints the "meat" of the fin inside the curve, mimicking the mask.
+        */
         .speech-bubble.speech:before {
             content: "";
             position: absolute;
             pointer-events: none;
-            
-            /* 
-               CRESCENT TRICK: 
-               1. Create a transparent box.
-               2. Round one corner significantly.
-               3. Use box-shadow to "paint" the shape outside the transparent box.
-               This creates a sharp, thin, concave curve exactly like the mask.
-            */
-            width: 1.5em; /* Controls fin thinness width */
-            height: 1.8em; /* Controls fin height */
-            background: transparent; 
+            background: transparent;
             z-index: 1;
+            /* Fin Dimensions */
+            width: 3em; height: 1.8em; 
         }
 
         /* BOTTOM TAIL */
         .speech-bubble.speech.tail-bottom:before {
-            top: 90%; /* Slight overlap to seal gap */
-            /* Exact positioning logic */
+            top: 95%; /* Slight overlap */
+            /* Position Logic */
             left: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
             
-            /* The Crescent Shape Construction */
-            border-radius: 0 0 100% 0; /* Bottom-right curve */
-            /* Using thinner shadow values (-6px vs -10px) makes the tail thinner */
-            box-shadow: inset -6px -6px 0px -2px var(--bubble-fill-color); 
-            transform: rotate(-10deg); 
-            transform-origin: top left;
+            /* The Fin Shape via Shadow */
+            border-bottom-left-radius: 100%; 
+            box-shadow: inset 1.5em -0.8em 0 0 var(--bubble-fill-color);
         }
 
-        /* TOP TAIL (Reflected) */
+        /* TOP TAIL (Flip) */
+        .speech-bubble.speech.tail-top {
+             /* Flip Main Radius Logic for top */
+             border-radius: min(var(--r), calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2)) 
+                            min(var(--r), calc(100% - var(--tail-pos) - (1 - var(--t)) * var(--b) / 2)) 
+                            var(--r) var(--r) / var(--r);
+        }
         .speech-bubble.speech.tail-top:before {
-            bottom: 90%;
+            bottom: 95%;
             left: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            border-radius: 0 100% 0 0;
-            box-shadow: inset -6px 6px 0px -2px var(--bubble-fill-color);
-            transform: rotate(10deg);
-            transform-origin: bottom left;
+            border-top-left-radius: 100%;
+            box-shadow: inset 1.5em 0.8em 0 0 var(--bubble-fill-color);
         }
 
-        /* LEFT TAIL */
+        /* LEFT TAIL (Rotate) */
+        .speech-bubble.speech.tail-left {
+            border-radius: var(--r);
+        }
         .speech-bubble.speech.tail-left:before {
-            right: 90%;
+            right: 95%;
             top: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            border-radius: 0 0 0 100%;
-            box-shadow: inset 6px -6px 0px -2px var(--bubble-fill-color);
-            transform: rotate(10deg);
+            border-top-left-radius: 100%;
+            box-shadow: inset 0.8em 1.5em 0 0 var(--bubble-fill-color);
+            transform: rotate(-90deg);
             transform-origin: top right;
         }
 
-        /* RIGHT TAIL */
+        /* RIGHT TAIL (Rotate) */
+        .speech-bubble.speech.tail-right {
+             border-radius: var(--r);
+        }
         .speech-bubble.speech.tail-right:before {
-            left: 90%;
+            left: 95%;
             top: clamp(0%, calc(var(--tail-pos) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b)));
-            border-radius: 0 0 100% 0;
-            box-shadow: inset -6px -6px 0px -2px var(--bubble-fill-color);
-            transform: rotate(-10deg);
+            border-top-right-radius: 100%;
+            box-shadow: inset -0.8em 1.5em 0 0 var(--bubble-fill-color);
+            transform: rotate(90deg);
             transform-origin: top left;
         }
 
@@ -1083,7 +1083,7 @@ class EnhancedComicGenerator:
             const pages = document.querySelectorAll('.comic-page');
             if (pages.length === 0) return alert("No pages found.");
             
-            // 1. FREEZE DIMENSIONS BEFORE EXPORT (Prevents size reset bug)
+            // 1. FREEZE DIMENSIONS BEFORE EXPORT
             const bubbles = document.querySelectorAll('.speech-bubble');
             bubbles.forEach(b => {
                 const rect = b.getBoundingClientRect();
@@ -1106,7 +1106,7 @@ class EnhancedComicGenerator:
                 } catch (err) { alert(`Failed to export page ${i + 1}.`); }
             }
             
-            // 2. UNFREEZE DIMENSIONS (Restore normal behavior)
+            // 2. UNFREEZE DIMENSIONS
             bubbles.forEach(b => {
                 b.style.minWidth = '50px';   
                 b.style.minHeight = '30px'; 
@@ -1271,7 +1271,7 @@ class EnhancedComicGenerator:
     </script>
 </body>
 </html>'''
-            # Fixed indentation for the write operation
+            # Corrected Indentation here
             with open(os.path.join(self.output_dir, 'page.html'), 'w', encoding='utf-8') as f:
                 f.write(template_html)
             print("📄 Template files copied successfully!")