Update app_enhanced.py

app_enhanced.py

@@ -496,7 +496,7 @@ class EnhancedComicGenerator:
     <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">
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&family=Permanent+Marker&display=swap" rel="stylesheet">
     <style>
         body { margin: 0; padding: 20px; background: #f0f0f0; font-family: 'Lato', sans-serif; }
         .comic-container { max-width: 1200px; margin: 0 auto; }
@@ -509,27 +509,83 @@ class EnhancedComicGenerator:
         .panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.1s ease-out; }
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
-        .speech-bubble { font-family: 'Comic Neue', cursive; position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; }
+        .speech-bubble { position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; padding: 8px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; }
         .bubble-text { padding: 2px; word-wrap: break-word; }
         .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; }
-        .speech-bubble.speech { background: white; border: 2px solid #333; color: #333; border-radius: 15px; }
-        .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
-        .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900; text-transform: uppercase; width: 180px; clip-path: polygon(0% 25%, 17% 21%, 17% 0%, 31% 16%, 50% 4%, 69% 16%, 83% 0%, 83% 21%, 100% 25%, 85% 45%, 95% 62%, 82% 79%, 100% 97%, 79% 89%, 60% 98%, 46% 82%, 27% 95%, 15% 78%, 5% 62%, 15% 45%); }
-        .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 80% 75%, 70% 100%, 60% 75%, 0% 75%); }
-        .speech-bubble.idea { background: linear-gradient(180deg,#FFFDD0 0%, #FFF8B5 100%); border: 2px solid #FFA500; color: #6a4b00; border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; clip-path: polygon(20% 0%, 80% 0%, 100% 50%, 80% 100%, 20% 100%, 0% 50%); }
-        .speech-bubble.speech::after, .speech-bubble.idea::after { content: ''; position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; }
-        .speech-bubble.speech::after { border-top: 10px solid #333; bottom: -9px; left: 20px; }
-        .speech-bubble.thought::after { display: none; }
-        .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; }
-        .thought-dot-1 { width: 20px; height: 20px; bottom: -20px; left: 15px; }
-        .thought-dot-2 { width: 12px; height: 12px; bottom: -32px; left: 5px; }
-        .speech-bubble.flipped.speech::after, .speech-bubble.flipped.idea::after { left: auto; right: 20px; }
-        .speech-bubble.flipped.thought .thought-dot-1 { left: auto; right: 15px; }
-        .speech-bubble.flipped.thought .thought-dot-2 { left: auto; right: 5px; }
-        .speech-bubble.flipped-vertical.speech::after, .speech-bubble.flipped-vertical.idea::after { bottom: auto; top: -9px; transform: rotate(180deg); }
-        .speech-bubble.flipped-vertical.thought .thought-dot-1 { bottom: auto; top: -20px; }
-        .speech-bubble.flipped-vertical.thought .thought-dot-2 { bottom: auto; top: -32px; }
+        
+        /* --- NEW BUBBLE STYLES --- */
+        .speech-bubble.speech {
+            padding: 20px 30px;
+            border-radius: 10px;
+            border: 3px solid black;
+            background: white;
+            color: black;
+            font-family: "Permanent Marker", cursive;
+        }
+        .speech-bubble.speech:before {
+             content: '';
+             position: absolute;
+             bottom: -50px;
+             height: 50px;
+             width: 90px;
+             border-radius: 0 0 100%;     
+             box-shadow: -2px -2px 0 0 #000 inset, -23px 0 0 0 #fff inset, -25px -2px 0 0 #000 inset;
+             left: 0;
+        }
+        .speech-bubble.speech.flipped:before {
+             border-radius: 0 0 0 100%;     
+             box-shadow: 2px -2px 0 0 #000 inset, 23px 0 0 0 #fff inset, 25px -2px 0 0 #000 inset;
+             right: 0;
+             left: auto;
+        }
+
+        .speech-bubble.thought {
+            border-radius: 50%;
+            border: 3px solid black;
+            background: white;
+            color: black;
+        }
+        .speech-bubble.thought:before {
+            content: '';
+            position: absolute;
+            height: 3px;
+            width: 3px;
+            bottom: -20px;
+            border-radius: 100%;
+            background: #fff;
+            left: 20px;
+            box-shadow: 0 0 0 7px white, 0 0 0 10px black, -20px 15px 0 5px white, -20px 15px 0 8px black, -40px 20px 0 2px white, -40px 20px 0 5px black;
+        }
+        .speech-bubble.thought.flipped:before {
+            right: 20px;
+            left: auto;
+            box-shadow: 0 0 0 7px white, 0 0 0 10px black, 20px 15px 0 5px white, 20px 15px 0 8px black, 40px 20px 0 2px white, 40px 20px 0 5px black;
+        }
+
+        .speech-bubble.reaction {
+            background: #FFD700;
+            border: 3px solid #E53935;
+            color: #D32F2F;
+            font-weight: 900;
+            border-radius: 50%;
+            position: relative;
+        }
+        .speech-bubble.reaction:before, .speech-bubble.reaction:after {
+            content: '';
+            position: absolute;
+            top: -3px; left: -3px; right: -3px; bottom: -3px;
+            background: inherit;
+            clip-path: polygon(50% 0%, 60% 40%, 100% 40%, 70% 65%, 85% 100%, 50% 75%, 15% 100%, 30% 65%, 0% 40%, 40% 40%);
+            z-index: -1;
+        }
+        .speech-bubble.reaction:after {
+            transform: rotate(20deg);
+        }
+        
+        .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; }
+        .speech-bubble.idea { background: linear-gradient(180deg,#FFFDD0 0%, #FFF8B5 100%); border: 2px solid #FFA500; color: #6a4b00; border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; }
+        
         .resize-handle { position: absolute; width: 10px; height: 10px; background: #2196F3; border: 1px solid white; border-radius: 50%; display: none; z-index: 11; }
         .speech-bubble.selected .resize-handle { display: block; }
         .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
@@ -567,6 +623,7 @@ class EnhancedComicGenerator:
                 <option value="speech">Speech</option><option value="thought">Thought</option><option value="reaction">Reaction</option><option value="narration">Narration</option><option value="idea">Idea</option>
             </select>
             <select id="font-select" onchange="changeFont(this.value)" disabled>
+                <option value="'Permanent Marker', cursive">Permanent Marker</option>
                 <option value="'Comic Neue', cursive">Comic Neue</option>
                 <option value="'Bangers', cursive">Bangers</option>
                 <option value="'Gloria Hallelujah', cursive">Gloria</option>
@@ -582,7 +639,7 @@ class EnhancedComicGenerator:
                     <input type="color" id="bubble-fill-color" value="#FFFFFF" disabled>
                 </div>
             </div>
-            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button>
+            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Flip Tail</button>
             <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
             <button onclick="deleteBubble()" class="reset-button">🗑️ Delete Bubble</button>
         </div>
@@ -717,21 +774,12 @@ class EnhancedComicGenerator:
         }
 
         function applyBubbleType(bubble, type) {
-            bubble.querySelectorAll('.thought-dot').forEach(el => el.remove());
-            let classesToKeep = 'speech-bubble';
-            if (bubble.classList.contains('selected')) classesToKeep += ' selected';
-            if (bubble.classList.contains('flipped')) classesToKeep += ' flipped';
-            if (bubble.classList.contains('flipped-vertical')) classesToKeep += ' flipped-vertical';
-            bubble.className = classesToKeep;
+            let classesToKeep = ['speech-bubble'];
+            if (bubble.classList.contains('selected')) classesToKeep.push('selected');
+            if (bubble.classList.contains('flipped')) classesToKeep.push('flipped');
+            bubble.className = classesToKeep.join(' ');
             bubble.classList.add(type);
             bubble.dataset.type = type;
-            if (type === 'thought') {
-                for (let i = 1; i <= 2; i++) {
-                    const dot = document.createElement('div');
-                    dot.className = `thought-dot thought-dot-${i}`;
-                    bubble.appendChild(dot);
-                }
-            }
         }
         
         function changeBubbleType(type) {
@@ -746,12 +794,7 @@ class EnhancedComicGenerator:
         
         function rotateBubbleTail() {
             if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
-            const isFlippedH = currentlySelectedBubble.classList.contains('flipped');
-            const isFlippedV = currentlySelectedBubble.classList.contains('flipped-vertical');
-            if (!isFlippedH && !isFlippedV) { currentlySelectedBubble.classList.add('flipped'); }
-            else if (isFlippedH && !isFlippedV) { currentlySelectedBubble.classList.add('flipped-vertical'); }
-            else if (isFlippedH && isFlippedV) { currentlySelectedBubble.classList.remove('flipped'); }
-            else { currentlySelectedBubble.classList.remove('flipped-vertical'); }
+            currentlySelectedBubble.classList.toggle('flipped');
         }
         
         function selectPanel(panel) {