UI Update

app.py

@@ -1119,9 +1119,10 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
     with gr.Row():
         gr.Markdown("""
         # HexaGrid Creator
-        ## Transform Your Images into Mesmerizing Hexagon Grid Masterpieces! ⬢""", elem_classes="intro")
+        ## Transform Your Images into Mesmerizing Hexagon Grid Masterpieces! ⬢
+        ### <span style='color: red; font-style: bolder;'>BEST VIEWED ON DESKTOP</span>""", elem_classes="intro", sanitize_html=False)
     with gr.Row():
-        with gr.Accordion("BEST VIEWED ON DESKTOP<br/>Welcome to HexaGrid Creator, the ultimate tool for transforming your images into stunning hexagon grid artworks. Whether you're a tabletop game enthusiast, a digital artist, or someone who loves unique patterns, HexaGrid Creator has something for you.", open=False, elem_classes="intro"):
+        with gr.Accordion(" Welcome to HexaGrid Creator, the ultimate tool for transforming your images into stunning hexagon grid artworks. Whether you're a tabletop game enthusiast, a digital artist, or someone who loves unique patterns, HexaGrid Creator has something for you.", open=False, elem_classes="intro"):
             gr.Markdown ("""
 
             ## Drop an image into the Input Image and get started!
@@ -1200,7 +1201,7 @@ with gr.Blocks(css_paths="style_20250314.css", title=title, theme='Surn/beeuty',
                         with gr.Row():
                             sketch_alpha_composite_slider = gr.Slider(0,100,50,0.5, label="Sketch Transparancy", elem_id="alpha_composite_slider")
                             btn_sketch_alpha_composite = gr.Button("Overlay Sketch on Input Image", elem_id="btn_sketchninput", elem_classes="solid")
-                        gr.Markdown("### <span style='color: red; font-style: bolder;'>Click the pencil to start drawing.</span><br/>Do Not add to image if using a fill model. Black is replaced by fill model.", elem_classes="centered")
+                        gr.Markdown("### <span style='color: red; font-style: bolder;'>Click the pencil to start drawing.</span><br/>Do Not add to image if using a fill model. Black is replaced by fill model.", elem_classes="centered",sanitize_html=False)
 
         with gr.Column(scale=1, elem_id="filters"):
             with gr.Accordion("Image Filters (optional, fun)", open = False):

style_20250314.css

@@ -6,6 +6,7 @@
 .centered {
     margin: 0 auto;
     display: block;
+    text-align:center;
 }
 
 .solid {