new

app.py

@@ -8,7 +8,7 @@ todo_df = pd.DataFrame(columns=TODO_COLUMNS)
 # Function to add a new task
 def add_task(task, priority, status):
     global todo_df
-    if task:  # Ensure task is not empty
+    if task.strip():  # Ensure task is not empty
         new_task = pd.DataFrame([[task, priority, status]], columns=TODO_COLUMNS)
         todo_df = pd.concat([todo_df, new_task], ignore_index=True)
     return todo_df
@@ -24,34 +24,45 @@ def delete_task(index):
 def get_tasks():
     return todo_df
 
-# Initialize Gradio app with dark mode theme
+# Initialize Gradio app with dark tech-inspired theme
 with gr.Blocks() as demo:
-    gr.Markdown("# 📝 Personal To-Do List Tracker", elem_classes="title")
+    gr.Markdown(
+        """
+        <div style="text-align: center; font-size: 28px; font-weight: bold; color: #FFA500;">
+            📝 Futuristic To-Do List Tracker
+        </div>
+        """,
+        elem_id="title"
+    )
 
     task_table = gr.Dataframe(
         value=get_tasks(),
         headers=TODO_COLUMNS,
         interactive=False,
         label="Current Tasks",
-        elem_classes="task-table"
+        elem_id="task-table"
     )
 
     # Add Task Section
     with gr.Row():
-        task_input = gr.Textbox(label="Task", placeholder="Enter your task here", elem_classes="input-box")
+        task_input = gr.Textbox(
+            label="Task",
+            placeholder="Enter your task...",
+            elem_id="input-box"
+        )
         priority_input = gr.Dropdown(
             choices=["Low", "Medium", "High"],
             label="Priority",
             value="Medium",
-            elem_classes="dropdown"
+            elem_id="dropdown"
         )
         status_input = gr.Dropdown(
             choices=["Not Started", "In Progress", "Completed"],
             label="Status",
             value="Not Started",
-            elem_classes="dropdown"
+            elem_id="dropdown"
         )
-        add_button = gr.Button("Add Task", elem_classes="button")
+        add_button = gr.Button("Add Task", elem_id="button")
 
     add_button.click(
         fn=add_task,
@@ -60,8 +71,8 @@ with gr.Blocks() as demo:
     )
 
     # Delete Task Section
-    delete_index = gr.Number(label="Task Index to Delete", value=0, elem_classes="input-box")
-    delete_button = gr.Button("Delete Task", elem_classes="button")
+    delete_index = gr.Number(label="Task Index to Delete", value=0, elem_id="input-box")
+    delete_button = gr.Button("Delete Task", elem_id="button")
 
     delete_button.click(
         fn=delete_task,
@@ -69,43 +80,51 @@ with gr.Blocks() as demo:
         outputs=task_table
     )
 
-# Custom CSS for Dark Mode
+# Custom CSS for Futuristic Tech Style
 custom_css = """
     body {
-        background-color: #121212;
-        color: #FFFFFF;
+        background-color: #181818;
+        color: #E0E0E0;
+        font-family: 'Roboto Mono', monospace;
     }
-    .title {
+    #title {
         color: #FFA500;
-        font-size: 24px;
-        font-weight: bold;
+        text-shadow: 0 0 8px #FF8C00;
     }
-    .task-table {
-        background-color: #1e1e1e;
-        color: #FFFFFF;
+    #task-table {
+        background-color: #1f1f1f;
+        color: #E0E0E0;
         border: 1px solid #FFA500;
+        border-radius: 8px;
     }
-    .input-box {
-        background-color: #1e1e1e;
-        color: #FFFFFF;
+    #input-box {
+        background-color: #1c1c1c;
+        color: #E0E0E0;
         border: 1px solid #FFA500;
+        border-radius: 8px;
+        padding: 10px;
     }
-    .dropdown {
-        background-color: #1e1e1e;
-        color: #FFFFFF;
+    #dropdown {
+        background-color: #1c1c1c;
+        color: #E0E0E0;
         border: 1px solid #FFA500;
+        border-radius: 8px;
+        padding: 5px;
     }
-    .button {
+    #button {
         background-color: #FFA500;
-        color: #121212;
+        color: #181818;
         border: none;
-        padding: 10px;
-        border-radius: 5px;
+        border-radius: 8px;
+        padding: 10px 20px;
         font-weight: bold;
+        box-shadow: 0 0 12px #FF8C00;
+        transition: all 0.2s ease-in-out;
     }
-    .button:hover {
+    #button:hover {
         background-color: #FF8C00;
         color: #FFFFFF;
+        box-shadow: 0 0 16px #FFA500;
     }
 """