Upload 9 files

app.py

@@ -173,57 +173,17 @@ with open("manual.md", "r", encoding="utf-8") as file:
 # Mostrar el contenido del manual en el sidebar
 st.sidebar.markdown(manual_content)
 
-# Ocultar elementos de la interfaz
-st.markdown("""
-    <style>
-        
-        /* Reducir espacio superior */
-        .block-container {
-            padding-top: 1rem;
-            padding-bottom: 5rem;
-        }
-
-        /* Ajustar espaciado del título */
-        h1 {
-            margin-top: -2rem;
-            padding-top: 0.5rem;
-        }
-
-        /* Ajustar espaciado del subtítulo */
-        h4 {
-            margin-top: 0.5rem;
-            padding-top: 0rem;
-        }
-    </style>
-""", unsafe_allow_html=True)
+# Load CSS from file
+with open("styles/main.css", "r") as f:
+    css = f.read()
+    
+# Apply the CSS
+st.markdown(f"<style>{css}</style>", unsafe_allow_html=True)
 
 # Centrar el título y el subtítulo
 st.markdown("<h1 style='text-align: center;'>Enchanted Hooks</h1>", unsafe_allow_html=True)
 st.markdown("<h4 style='text-align: center;'>Imagina poder conjurar títulos que no solo informan, sino que encantan. Esta app es tu varita mágica en el mundo del copywriting, transformando cada concepto en un titular cautivador que deja a todos deseando más.</h4>", unsafe_allow_html=True)
 
-# Añadir CSS personalizado para el botón
-st.markdown("""
-    <style>
-    div.stButton > button {
-        background-color: #FFCC00;
-        color: black;
-        width: 90%;
-        height: 60px;
-        font-weight: bold;
-        font-size: 22px;
-        text-transform: uppercase;
-        border: 1px solid #000000;
-        border-radius: 8px;
-        display: block;
-        margin: 0 auto;
-    }
-    div.stButton > button:hover {
-        background-color: #FFD700;
-        color: black;
-    }
-    </style>
-""", unsafe_allow_html=True)
-
 # Crear columnas
 col1, col2 = st.columns([1, 2])  
 
@@ -276,7 +236,7 @@ if submit:
                 selected_angle  # Agregar el ángulo seleccionado
             )
             col2.markdown(f"""
-                <div style="border: 1px solid #000000; padding: 15px; border-radius: 8px; background-color: #ffffff;">
+                <div class="results-container">
                     <h4>Observa la magia en acción:</h4>
                     <p>{generated_headlines}</p>
                 </div>

styles/main.css

@@ -0,0 +1,45 @@
+/* Main container styling */
+.block-container {
+    padding-top: 1rem;
+    padding-bottom: 5rem;
+}
+
+/* Title spacing */
+h1 {
+    margin-top: -2rem;
+    padding-top: 0.5rem;
+}
+
+/* Subtitle spacing */
+h4 {
+    margin-top: 0.5rem;
+    padding-top: 0rem;
+}
+
+/* Custom button styling */
+div.stButton > button {
+    background-color: #FFCC00;
+    color: black;
+    width: 90%;
+    height: 60px;
+    font-weight: bold;
+    font-size: 22px;
+    text-transform: uppercase;
+    border: 1px solid #000000;
+    border-radius: 8px;
+    display: block;
+    margin: 0 auto;
+}
+
+div.stButton > button:hover {
+    background-color: #FFD700;
+    color: black;
+}
+
+/* Results container */
+.results-container {
+    border: 1px solid #000000; 
+    padding: 15px; 
+    border-radius: 8px; 
+    background-color: #ffffff;
+}