Update app.py

app.py

@@ -7,52 +7,69 @@ import re
 from pptx import Presentation
 from pptx.util import Inches, Pt
 
-app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP, 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap'])
 
-app.layout = dbc.Container([
-    dbc.Row([
-        dbc.Col([
-            html.H1("Markdown to PowerPoint Converter", className="text-center mb-4")
-        ])
-    ]),
-    dbc.Row([
-        dbc.Col([
-            dbc.Card([
-                dbc.CardHeader("Upload Markdown File"),
-                dbc.CardBody([
-                    dcc.Upload(
-                        id='upload-file',
-                        children=dbc.Button("Select File", color="primary", className="mr-2"),
-                        multiple=False
-                    ),
-                    html.Div(id="upload-file-name", className="mt-2")
-                ])
-            ], className="mb-3")
-        ], md=6),
-        dbc.Col([
-            dbc.Card([
-                dbc.CardHeader("Or Paste Markdown Text"),
-                dbc.CardBody([
-                    dbc.Textarea(
-                        id='markdown-text',
-                        placeholder='Enter or paste your markdown text here',
-                        style={'height': 150}
-                    )
-                ])
+app.layout = html.Div([
+    dbc.Navbar(
+        dbc.Container(
+            html.H1("MD to PPT", className="mb-0 text-white")
+        ),
+        color="primary",
+        dark=True,
+        fixed="top",
+        className="mb-5",
+    ),
+    dbc.Container([
+        dbc.Row([
+            dbc.Col([
+                dbc.Card([
+                    dbc.CardHeader("Upload Markdown", className="bg-primary text-white"),
+                    dbc.CardBody([
+                        dcc.Upload(
+                            id='upload-file',
+                            children=html.Div([
+                                html.I(className="fas fa-cloud-upload-alt fa-3x mb-3"),
+                                html.Div("Drag and Drop or Select File")
+                            ], className="text-center"),
+                            style={
+                                'borderWidth': '2px',
+                                'borderStyle': 'dashed',
+                                'borderRadius': '5px',
+                                'padding': '20px',
+                                'transition': 'border .3s ease-in-out'
+                            },
+                            className="mb-3"
+                        ),
+                        html.Div(id="upload-file-name", className="text-muted")
+                    ])
+                ], className="mb-4 shadow-sm")
+            ], md=6, className="mb-4"),
+            dbc.Col([
+                dbc.Card([
+                    dbc.CardHeader("Paste Markdown", className="bg-primary text-white"),
+                    dbc.CardBody([
+                        dbc.Textarea(
+                            id='markdown-text',
+                            placeholder='Enter or paste your markdown text here',
+                            style={'height': '200px'},
+                            className="mb-3"
+                        )
+                    ])
+                ], className="mb-4 shadow-sm")
+            ], md=6, className="mb-4")
+        ]),
+        dbc.Row([
+            dbc.Col([
+                dbc.Button("Convert", id='convert-button', color="success", className="w-100 mb-3", size="lg")
+            ])
+        ]),
+        dbc.Row([
+            dbc.Col([
+                html.Div(id='output')
             ])
-        ], md=6)
-    ]),
-    dbc.Row([
-        dbc.Col([
-            dbc.Button("Convert", id='convert-button', color="success", className="mt-3 mb-3 w-100")
-        ])
-    ]),
-    dbc.Row([
-        dbc.Col([
-            html.Div(id='output')
         ])
-    ])
-], fluid=True)
+    ], className="mt-5 pt-5")
+])
 
 def markdown_to_pptx(md_text):
     prs = Presentation()