fix some z index error

app.py

@@ -124,6 +124,34 @@ def determine_style_theme(prompt: str) -> str:
     else:
         return 'modern'
 
+def fix_zindex_conflicts(css_content: str) -> str:
+    """Fix common z-index conflicts in generated CSS."""
+    
+    # Define z-index hierarchy for common components
+    zindex_hierarchy = {
+        'modal': 9999,
+        'modal-overlay': 9998,
+        'dropdown': 200,
+        'tooltip': 300,
+        'header': 1000,
+        'nav': 1001,
+        'sticky': 100,
+        'card-hover': 13,
+        'card': 12,
+        'form': 10,
+        'content': 1,
+        'background': -1
+    }
+    
+    # Add z-index management comment
+    fixed_css = """
+/* Z-Index Management System */
+/* Modal: 9999, Dropdowns: 200-299, Headers: 1000-1099, Content: 1-99, Background: -1 */
+
+""" + css_content
+    
+    return fixed_css
+
 def generate_css_from_prompt(prompt: str, components: dict) -> str:
     """Generate CSS based on the design requirements."""
     
@@ -158,7 +186,7 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
         }
         """
     
-    # Add component-specific styles
+    # Add component-specific styles with proper z-index management
     if components['has_header']:
         css += """
         .header {
@@ -167,7 +195,8 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             padding: 1rem 0;
             position: sticky;
             top: 0;
-            z-index: 100;
+            z-index: 1000;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
         }
         
         .nav {
@@ -177,6 +206,8 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             max-width: 1200px;
             margin: 0 auto;
             padding: 0 2rem;
+            position: relative;
+            z-index: 1001;
         }
         
         .nav ul {
@@ -189,6 +220,8 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             color: white;
             text-decoration: none;
             transition: color 0.3s;
+            position: relative;
+            z-index: 1002;
         }
         
         .nav a:hover {
@@ -203,16 +236,41 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             color: white;
             text-align: center;
             padding: 8rem 2rem;
+            position: relative;
+            z-index: 1;
+            overflow: hidden;
+        }
+        
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: inherit;
+            z-index: -1;
+        }
+        
+        .hero-content {
+            position: relative;
+            z-index: 2;
+            max-width: 800px;
+            margin: 0 auto;
         }
         
         .hero h1 {
             font-size: 3rem;
             margin-bottom: 1rem;
+            position: relative;
+            z-index: 3;
         }
         
         .hero p {
             font-size: 1.2rem;
             margin-bottom: 2rem;
+            position: relative;
+            z-index: 3;
         }
         
         .btn {
@@ -222,11 +280,17 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             padding: 1rem 2rem;
             text-decoration: none;
             border-radius: 5px;
-            transition: background-color 0.3s;
+            transition: all 0.3s;
+            position: relative;
+            z-index: 3;
+            border: none;
+            cursor: pointer;
         }
         
         .btn:hover {
             background-color: #c0392b;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
         }
         """
     
@@ -236,6 +300,8 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             padding: 4rem 2rem;
             max-width: 1200px;
             margin: 0 auto;
+            position: relative;
+            z-index: 10;
         }
         
         .cards-grid {
@@ -243,6 +309,8 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 2rem;
             margin-top: 2rem;
+            position: relative;
+            z-index: 11;
         }
         
         .card {
@@ -250,12 +318,44 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             border-radius: 10px;
             padding: 2rem;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s, box-shadow 0.3s;
+            transition: all 0.3s;
+            position: relative;
+            z-index: 12;
+            overflow: hidden;
+        }
+        
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(45deg, transparent, rgba(52, 152, 219, 0.1), transparent);
+            opacity: 0;
+            transition: opacity 0.3s;
+            z-index: -1;
         }
         
         .card:hover {
             transform: translateY(-5px);
-            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+            z-index: 13;
+        }
+        
+        .card:hover::before {
+            opacity: 1;
+        }
+        
+        .card h3 {
+            position: relative;
+            z-index: 2;
+            margin-bottom: 1rem;
+        }
+        
+        .card p {
+            position: relative;
+            z-index: 2;
         }
         """
     
@@ -264,6 +364,8 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
         .form-section {
             padding: 4rem 2rem;
             background-color: #f8f9fa;
+            position: relative;
+            z-index: 5;
         }
         
         .form-container {
@@ -273,16 +375,22 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             padding: 2rem;
             border-radius: 10px;
             box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            position: relative;
+            z-index: 6;
         }
         
         .form-group {
             margin-bottom: 1.5rem;
+            position: relative;
+            z-index: 7;
         }
         
         .form-group label {
             display: block;
             margin-bottom: 0.5rem;
             font-weight: bold;
+            position: relative;
+            z-index: 8;
         }
         
         .form-group input,
@@ -292,13 +400,24 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             border: 1px solid #ddd;
             border-radius: 5px;
             font-size: 1rem;
+            position: relative;
+            z-index: 8;
+            background: white;
+            transition: all 0.3s;
         }
         
         .form-group input:focus,
         .form-group textarea:focus {
             outline: none;
             border-color: #3498db;
-            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
+            box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
+            z-index: 9;
+        }
+        
+        .form-group input:focus + .focus-indicator,
+        .form-group textarea:focus + .focus-indicator {
+            opacity: 1;
+            transform: scaleX(1);
         }
         """
     
@@ -310,10 +429,17 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             text-align: center;
             padding: 2rem 0;
             margin-top: 4rem;
+            position: relative;
+            z-index: 100;
+        }
+        
+        .footer p {
+            position: relative;
+            z-index: 101;
         }
         """
     
-    # Add animations if requested
+    # Add animations if requested with proper z-index
     if components['has_animation']:
         css += """
         @keyframes fadeInUp {
@@ -327,12 +453,144 @@ def generate_css_from_prompt(prompt: str, components: dict) -> str:
             }
         }
         
+        @keyframes slideInFromLeft {
+            from {
+                opacity: 0;
+                transform: translateX(-50px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+        
         .animate-on-scroll {
-            animation: fadeInUp 0.6s ease-out;
+            animation: fadeInUp 0.6s ease-out forwards;
+        }
+        
+        .animate-slide {
+            animation: slideInFromLeft 0.8s ease-out forwards;
+        }
+        
+        /* Ensure animated elements don't interfere with z-index */
+        .animate-on-scroll,
+        .animate-slide {
+            position: relative;
+            z-index: auto;
         }
         """
     
-    return css
+    # Add modal and overlay styles with high z-index
+    css += """
+    /* Modal and overlay z-index management */
+    .modal-overlay {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 9998;
+        display: none;
+    }
+    
+    .modal {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: white;
+        padding: 2rem;
+        border-radius: 10px;
+        z-index: 9999;
+        max-width: 90vw;
+        max-height: 90vh;
+        overflow: auto;
+    }
+    
+    /* Dropdown menus */
+    .dropdown {
+        position: relative;
+        z-index: 200;
+    }
+    
+    .dropdown-menu {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        background: white;
+        border: 1px solid #ddd;
+        border-radius: 5px;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+        z-index: 201;
+        min-width: 200px;
+        display: none;
+    }
+    
+    .dropdown:hover .dropdown-menu {
+        display: block;
+    }
+    
+    /* Tooltips */
+    .tooltip {
+        position: relative;
+        z-index: 300;
+    }
+    
+    .tooltip::after {
+        content: attr(data-tooltip);
+        position: absolute;
+        bottom: 125%;
+        left: 50%;
+        transform: translateX(-50%);
+        background: #333;
+        color: white;
+        padding: 0.5rem;
+        border-radius: 4px;
+        font-size: 0.875rem;
+        white-space: nowrap;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s;
+        z-index: 301;
+    }
+    
+    .tooltip:hover::after {
+        opacity: 1;
+    }
+    
+    /* Responsive z-index adjustments */
+    @media (max-width: 768px) {
+        .header {
+            z-index: 1100;
+        }
+        
+        .nav {
+            z-index: 1101;
+        }
+        
+        .mobile-menu {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(44, 62, 80, 0.95);
+            z-index: 1200;
+            display: none;
+        }
+        
+        .mobile-menu.active {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+    """
+    
+    # Fix z-index conflicts and return optimized CSS
+    return fix_zindex_conflicts(css)
 
 def generate_html_structure(prompt: str, components: dict) -> str:
     """Generate HTML structure based on components."""