Upload 12 files

app.py

@@ -57,34 +57,31 @@ def display_generated_content(col, generated_content, content_type):
         # Determinar si hay más de 5 nombres para mostrar los botones de descarga
         has_many_items = num_names > 5
         
-        # Usar el mismo formato que para los scripts, pero con clases específicas para nombres
-        # Mostrar botón de descarga superior si hay muchos nombres
-        if has_many_items:
-            # Usar el mismo formato de key que para scripts, pero con content_type="names"
-            col.download_button(
-                label=download_label,
-                data=generated_content,
-                file_name=file_name,
-                mime="text/plain",
-                key=f"download_top_{content_type}",
-                help="Descargar todos los nombres generados"
-            )
-        
         # Mostrar el contenido generado
         col.subheader(subheader_text)
         col.markdown(generated_content)
         
-        # Mostrar botón de descarga inferior solo si hay más de 5 nombres
+        # Para los nombres, usar HTML personalizado en lugar de st.download_button
         if has_many_items:
-            # Usar el mismo formato de key que para scripts, pero con content_type="names"
-            col.download_button(
-                label=download_label,
-                data=generated_content,
-                file_name=file_name,
-                mime="text/plain",
-                key=f"download_bottom_{content_type}",
-                help="Descargar todos los nombres generados"
-            )
+            import base64
+            
+            # Codificar el contenido para descarga
+            b64 = base64.b64encode(generated_content.encode()).decode()
+            
+            # Crear botón de descarga personalizado con HTML y CSS
+            custom_download_html = f"""
+            <div class="custom-download-button names-download-button">
+                <a href="data:text/plain;base64,{b64}" download="{file_name}" style="text-decoration:none; color:white; display:block; width:100%; text-align:center;">
+                    {download_label}
+                </a>
+            </div>
+            """
+            
+            # Mostrar botón de descarga superior
+            col.markdown(custom_download_html, unsafe_allow_html=True)
+            
+            # Mostrar botón de descarga inferior
+            col.markdown(custom_download_html, unsafe_allow_html=True)
 
 # Implementar la función generate_and_display para reemplazar código duplicado
 def generate_and_display(col, generator_func, audience, product, temperature, selected_formula, content_type, **kwargs):

styles/styles.css

@@ -1,116 +1,148 @@
-/* Custom button styles for Perfect Webinar Framework */
-
-/* Generate Webinar Script button - yellow with black border */
-div.stButton > button:first-child {
-    width: 100%;
-    margin-top: 0.5rem;
-    border-radius: 5px;
-    height: 3em;
-    background: #FFD700; /* Solid yellow color like in the image */
-    color: black;
-    font-weight: bold;
-    border: 1px solid black; /* Changed to 1px border */
-    transition: all 0.3s ease;
-}
-
-div.stButton > button:first-child:hover {
-    background: #FFDF33; /* Slightly brighter yellow on hover */
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    border: 1px solid black;
-}
-
-/* Download buttons - green/blue gradient */
-div.stDownloadButton > button:first-child {
-    background: linear-gradient(90deg, #4CAF50, #2196F3); /* Green to blue gradient */
-    color: white; /* White text for better visibility on gradient */
-    font-weight: bold;
-    padding: 0.5rem 1rem;
-    border-radius: 5px;
-    border: 1px solid black; /* 1px border as requested */
-    transition: all 0.3s;
-    width: 80%; /* Width 80% as requested */
-    margin: 0 auto;
-    display: block;
-}
-
-div.stDownloadButton > button:first-child:hover {
-    background: linear-gradient(135deg, #3ED83E 0%, #4169E1 100%);
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    border: 2px solid black !important;
-}
-
-/* Special styling for download buttons in the webinar names container */
-.webinar-names-container div.stDownloadButton > button:first-child {
-    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
-    color: white;
-    font-weight: bold;
-    border: 1px solid black;
-}
-
-.webinar-names-container div.stDownloadButton > button:first-child:hover {
-    background: linear-gradient(135deg, #FF7043, #FFA726);
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    border: 2px solid black !important;
-}
-
-
-/* Reduce top spacing and hide unnecessary elements */
-.block-container {
-    padding-top: 1rem;
-    padding-bottom: 0rem;
-}
-
-header {
-    visibility: hidden;
-}
-
-#MainMenu {
-    visibility: hidden;
-}
-
-footer {
-    visibility: hidden;
-}
-
-/* Add any other custom styles here */
-
-
-/* Styles for the webinar names container in the second tab */
-.webinar-names-container {
-    padding: 15px;
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-/* Add border to all webinar name containers */
-.webinar-names-container.with-border {
-    border: 1px solid #ddd;
-    border-radius: 5px;
-    padding: 20px;
-}
-
-/* Additional styling for containers with many items */
-.webinar-names-container.many-items .stDownloadButton {
-    margin-top: 15px;
-    margin-bottom: 15px;
-}
-
-/* Special styling for download buttons in the webinar names tab */
-div.stDownloadButton[data-testid*="download_top_names"] > button:first-child,
-div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child {
-    background: linear-gradient(90deg, #FF5722, #FF9800) !important; /* Orange gradient */
-    color: white !important;
-    font-weight: bold !important;
-    border: 1px solid black !important;
-}
-
-div.stDownloadButton[data-testid*="download_top_names"] > button:first-child:hover,
-div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child:hover {
-    background: linear-gradient(135deg, #FF7043, #FFA726) !important;
-    transform: translateY(-2px) !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    border: 2px solid black !important;
+/* Custom button styles for Perfect Webinar Framework */
+
+/* Generate Webinar Script button - yellow with black border */
+div.stButton > button:first-child {
+    width: 100%;
+    margin-top: 0.5rem;
+    border-radius: 5px;
+    height: 3em;
+    background: #FFD700; /* Solid yellow color like in the image */
+    color: black;
+    font-weight: bold;
+    border: 1px solid black; /* Changed to 1px border */
+    transition: all 0.3s ease;
+}
+
+div.stButton > button:first-child:hover {
+    background: #FFDF33; /* Slightly brighter yellow on hover */
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    border: 1px solid black;
+}
+
+/* Download buttons - green/blue gradient */
+div.stDownloadButton > button:first-child {
+    background: linear-gradient(90deg, #4CAF50, #2196F3); /* Green to blue gradient */
+    color: white; /* White text for better visibility on gradient */
+    font-weight: bold;
+    padding: 0.5rem 1rem;
+    border-radius: 5px;
+    border: 1px solid black; /* 1px border as requested */
+    transition: all 0.3s;
+    width: 80%; /* Width 80% as requested */
+    margin: 0 auto;
+    display: block;
+}
+
+div.stDownloadButton > button:first-child:hover {
+    background: linear-gradient(135deg, #3ED83E 0%, #4169E1 100%);
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+/* Special styling for download buttons in the webinar names container */
+.webinar-names-container div.stDownloadButton > button:first-child {
+    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
+    color: white;
+    font-weight: bold;
+    border: 1px solid black;
+}
+
+.webinar-names-container div.stDownloadButton > button:first-child:hover {
+    background: linear-gradient(135deg, #FF7043, #FFA726);
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+
+/* Reduce top spacing and hide unnecessary elements */
+.block-container {
+    padding-top: 1rem;
+    padding-bottom: 0rem;
+}
+
+header {
+    visibility: hidden;
+}
+
+#MainMenu {
+    visibility: hidden;
+}
+
+footer {
+    visibility: hidden;
+}
+
+/* Add any other custom styles here */
+
+
+/* Styles for the webinar names container in the second tab */
+.webinar-names-container {
+    padding: 15px;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+/* Add border to all webinar name containers */
+.webinar-names-container.with-border {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 20px;
+}
+
+/* Additional styling for containers with many items */
+.webinar-names-container.many-items .stDownloadButton {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+/* Special styling for download buttons in the webinar names tab */
+div.stDownloadButton[data-testid*="download_top_names"] > button:first-child,
+div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child {
+    background: linear-gradient(90deg, #FF5722, #FF9800) !important; /* Orange gradient */
+    color: white !important;
+    font-weight: bold !important;
+    border: 1px solid black !important;
+}
+
+div.stDownloadButton[data-testid*="download_top_names"] > button:first-child:hover,
+div.stDownloadButton[data-testid*="download_bottom_names"] > button:first-child:hover {
+    background: linear-gradient(135deg, #FF7043, #FFA726) !important;
+    transform: translateY(-2px) !important;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
+    border: 2px solid black !important;
+}
+
+
+/* Custom download button for names tab */
+.custom-download-button.names-download-button {
+    background: linear-gradient(90deg, #FF5722, #FF9800); /* Orange gradient */
+    color: white;
+    font-weight: bold;
+    padding: 0.75rem 1rem;
+    border-radius: 5px;
+    border: 1px solid #333;
+    text-align: center;
+    margin: 15px auto;
+    width: 80%;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.custom-download-button.names-download-button:hover {
+    background: linear-gradient(135deg, #FF7043, #FFA726);
+    transform: translateY(-2px);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+    border: 2px solid #333;
+}
+
+/* Make sure links inside the button inherit the text color */
+.custom-download-button.names-download-button a {
+    color: white !important;
+    display: block;
+    width: 100%;
+    height: 100%;
+    font-weight: bold;
 }