ADD TEMPALTES

app.py

@@ -125,49 +125,100 @@ def collect_missing_data(profile):
     return profile
 
 def display_success_message(inserted_id, frontend_url):
-    """Displays a focused success message highlighting both portfolio options"""
+    """Displays a focused success message highlighting all portfolio templates"""
     
     st.balloons()  # Add some celebration!
     
-    # Create styles for the portfolio cards
+    # Create styles for the portfolio templates display
     st.markdown("""
     <style>
-    .portfolio-container {
+    .success-header {
+        text-align: center;
+        margin-bottom: 30px;
+    }
+    .success-header h1 {
+        color: #28a745;
+        margin-bottom: 10px;
+    }
+    .templates-container {
         display: flex;
+        flex-direction: column;
         gap: 20px;
-        margin: 30px 0;
-        flex-wrap: wrap;
+        margin: 20px 0;
+    }
+    .category-title {
+        margin: 10px 0;
+        padding-bottom: 5px;
+        border-bottom: 1px solid rgba(150, 150, 150, 0.2);
+        font-size: 1.3rem;
     }
-    .portfolio-card {
-        flex: 1;
-        min-width: 300px;
+    .templates-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 15px;
+    }
+    .template-card {
+        display: flex;
+        flex-direction: column;
         background-color: rgba(255, 255, 255, 0.05);
         border: 1px solid rgba(150, 150, 150, 0.2);
         border-radius: 10px;
-        padding: 20px;
-        text-align: center;
+        overflow: hidden;
+        transition: transform 0.3s, box-shadow 0.3s;
     }
-    .portfolio-title {
-        font-size: 1.5rem;
-        margin-bottom: 10px;
-        color: inherit;
+    .template-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
     }
-    .portfolio-desc {
-        font-size: 0.9rem;
-        margin-bottom: 20px;
-        color: inherit;
-        opacity: 0.8;
+    .template-image {
+        width: 100%;
+        height: 150px;
+        background-color: rgba(100, 100, 100, 0.1);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .template-info {
+        padding: 15px;
     }
-    .portfolio-link {
+    .template-name {
+        font-size: 1.2rem;
+        font-weight: bold;
+        margin-bottom: 5px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .template-category {
+        font-size: 0.85rem;
+        opacity: 0.7;
+        margin-bottom: 15px;
+    }
+    .template-link {
         display: inline-block;
         background-color: #28a745;
         color: white !important;
-        padding: 10px 20px;
+        padding: 8px 16px;
         border-radius: 5px;
         text-decoration: none;
-        margin: 10px 0;
         font-weight: bold;
-        font-size: 1.1rem;
+        transition: background-color 0.3s;
+        text-align: center;
+    }
+    .template-link:hover {
+        background-color: #218838;
+    }
+    .premium-badge {
+        display: inline-block;
+        background-color: #ffc107;
+        color: #212529;
+        font-size: 0.7rem;
+        padding: 2px 6px;
+        border-radius: 10px;
+        margin-left: 10px;
+    }
+    .share-section {
+        margin-top: 40px;
     }
     .share-grid {
         display: grid;
@@ -188,42 +239,123 @@ def display_success_message(inserted_id, frontend_url):
         background-color: rgba(100, 100, 100, 0.1);
         transform: translateY(-2px);
     }
+    .portfolio-id {
+        margin-top: 30px;
+        text-align: center;
+        padding: 10px;
+        background-color: rgba(40, 167, 69, 0.1);
+        border-radius: 5px;
+    }
     </style>
     """, unsafe_allow_html=True)
     
-    # Define portfolio URLs
-    classic_url = f"https://iportfo.netlify.app/{inserted_id}"
-    modern_url = f"https://v0-modern-portfolio-react.vercel.app/{inserted_id}"
+    # Define all templates with their details
+    templates = [
+        {
+            "id": 1,
+            "name": "Clean Portfolio",
+            "category": "professional",
+            "url": f"https://v0-recreate-figma-ui-dua1ta.vercel.app/{inserted_id}",
+            "isPremium": False
+        },
+        {
+            "id": 2,
+            "name": "Creative Designer",
+            "category": "creative",
+            "url": f"https://v0-recreate-figma-ui-f7.vercel.app/{inserted_id}",
+            "isPremium": True
+        },
+        {
+            "id": 3,
+            "name": "iPortfo",
+            "category": "tech",
+            "url": f"https://iportfo.netlify.app/{inserted_id}",
+            "isPremium": False
+        },
+        {
+            "id": 4,
+            "name": "Modern Portfolio",
+            "category": "professional",
+            "url": f"https://v0-modern-portfolio-react.vercel.app/{inserted_id}",
+            "isPremium": False
+        },
+        {
+            "id": 5,
+            "name": "Data Science Portfolio",
+            "category": "tech",
+            "url": f"https://v0-portfolio-web-application.vercel.app/{inserted_id}",
+            "isPremium": False
+        },
+        {
+            "id": 6,
+            "name": "VimFolio Portfolio",
+            "category": "special",
+            "url": f"https://v0-dynamic-portfolio-app.vercel.app/sample/{inserted_id}",
+            "isPremium": True
+        },
+        {
+            "id": 7,
+            "name": "AI Portfolio",
+            "category": "special",
+            "url": f"https://v0-portfolio-data-integration.vercel.app/{inserted_id}",
+            "isPremium": True
+        }
+    ]
+    
+    # Group templates by category
+    categories = {}
+    for template in templates:
+        category = template["category"].capitalize()
+        if category not in categories:
+            categories[category] = []
+        categories[category].append(template)
     
     # Success header
     st.markdown("""
-    <div style="text-align: center; margin-bottom: 30px;">
-        <h1 style="color: #28a745;">🎉 Your Portfolio is Ready!</h1>
-        <p style="color: inherit;">Choose from two beautiful portfolio designs</p>
+    <div class="success-header">
+        <h1>🎉 Your Portfolio is Ready!</h1>
+        <p>Choose from our diverse collection of beautiful portfolio templates</p>
     </div>
     """, unsafe_allow_html=True)
     
-    # Portfolio cards
-    st.markdown(f"""
-    <div class="portfolio-container">
-        <div class="portfolio-card">
-            <h2 class="portfolio-title">🎨 Classic Portfolio</h2>
-            <p class="portfolio-desc">Clean and professional design showcasing your experience in a traditional layout</p>
-            <a href="{classic_url}" target="_blank" class="portfolio-link">
-                View Classic Design 🚀
-            </a>
-        </div>
-        <div class="portfolio-card">
-            <h2 class="portfolio-title">✨ Modern Portfolio (Beta)</h2>
-            <p class="portfolio-desc">Contemporary and dynamic design with enhanced visual elements</p>
-            <a href="{modern_url}" target="_blank" class="portfolio-link">
-                Try Modern Design 🎯
-            </a>
-        </div>
-    </div>
-    """, unsafe_allow_html=True)
+    # Display templates by category
+    st.markdown('<div class="templates-container">', unsafe_allow_html=True)
+    
+    for category, category_templates in categories.items():
+        st.markdown(f'<h2 class="category-title">{category} Templates</h2>', unsafe_allow_html=True)
+        st.markdown('<div class="templates-grid">', unsafe_allow_html=True)
+        
+        for template in category_templates:
+            premium_badge = '<span class="premium-badge">Premium</span>' if template["isPremium"] else ''
+            
+            st.markdown(f"""
+            <div class="template-card">
+                <div class="template-image">
+                    <span style="font-size: 2rem;">🖼️</span>
+                </div>
+                <div class="template-info">
+                    <div class="template-name">
+                        {template["name"]} {premium_badge}
+                    </div>
+                    <div class="template-category">
+                        {category}
+                    </div>
+                    <a href="{template["url"]}" target="_blank" class="template-link">
+                        View Portfolio
+                    </a>
+                </div>
+            </div>
+            """, unsafe_allow_html=True)
+        
+        st.markdown('</div>', unsafe_allow_html=True)
+    
+    st.markdown('</div>', unsafe_allow_html=True)
+    
+    # Select primary URL for sharing (use iPortfo as default)
+    primary_share_url = next((t["url"] for t in templates if t["name"] == "iPortfo"), templates[0]["url"])
     
     # Share section
+    st.markdown('<div class="share-section">', unsafe_allow_html=True)
     st.subheader("📤 Share Your Portfolio")
     
     # Define share messages
@@ -232,9 +364,9 @@ def display_success_message(inserted_id, frontend_url):
     whatsapp_msg = "Hi! I wanted to share my professional portfolio with you. Take a look!"
     
     # Create share URLs
-    linkedin_share_url = f"https://www.linkedin.com/sharing/share-offsite/?url={classic_url}&summary={linkedin_msg}"
-    twitter_share_url = f"https://twitter.com/intent/tweet?text={twitter_msg}&url={classic_url}"
-    whatsapp_share_url = f"https://wa.me/?text={whatsapp_msg}%20{classic_url}"
+    linkedin_share_url = f"https://www.linkedin.com/sharing/share-offsite/?url={primary_share_url}&summary={linkedin_msg}"
+    twitter_share_url = f"https://twitter.com/intent/tweet?text={twitter_msg}&url={primary_share_url}"
+    whatsapp_share_url = f"https://wa.me/?text={whatsapp_msg}%20{primary_share_url}"
     
     # Share buttons
     st.markdown(f"""
@@ -262,11 +394,13 @@ def display_success_message(inserted_id, frontend_url):
         </a>
     </div>
     """, unsafe_allow_html=True)
+    st.markdown('</div>', unsafe_allow_html=True)
     
-    # Portfolio IDs
+    # Portfolio ID
     st.markdown(f"""
-    <div style="margin-top: 30px; text-align: center;">
-        <p style="color: inherit;">Your Portfolio ID: <code>{inserted_id}</code></p>
+    <div class="portfolio-id">
+        <p>Your Portfolio ID: <code>{inserted_id}</code></p>
+        <small>Use this ID to access your portfolio from anywhere</small>
     </div>
     """, unsafe_allow_html=True)