Update app.py

app.py

@@ -74,62 +74,8 @@ def billing_interface(patient_id):
     else:
         return "Invalid Patient ID. Please check the ID."
 
-# Gradio Interface
-with gr.Blocks() as app:
-    gr.Markdown("<h1 style='text-align: center;'>👩🏻‍🔬丂卂ㄒ卄Ҝ尺ㄩㄒ卄卂 ㄥ丨爪丂🔬</h1>", elem_id="header")
-
-    with gr.Tab("Patient Registration"):
-        gr.Markdown("<h2>Register a New Patient</h2>")
-        
-        with gr.Row():
-            name = gr.Textbox(label="Patient Name", placeholder="Enter patient's full name", elem_id="name_field")
-            father_name = gr.Textbox(label="Father/Husband's Name", placeholder="Enter father/husband's full name", elem_id="father_name_field")
-        
-        with gr.Row():
-            age = gr.Number(label="Age", value=None, minimum=0, maximum=120, elem_id="age_field")
-            gender = gr.CheckboxGroup(
-                choices=["Male", "Female", "Other"],
-                label="Gender",
-                elem_id="gender_field"
-            )
-        
-        with gr.Row():
-            phone = gr.Textbox(label="Phone Number", placeholder="Enter a valid 10-digit phone number", elem_id="phone_field")
-            address = gr.Textbox(label="Address", placeholder="Enter full address", lines=2, elem_id="address_field")
-
-        register_button = gr.Button("Register Patient", elem_id="register_button")
-        registration_output = gr.Markdown(label="Registration Output", elem_id="registration_output")
-        
-        register_button.click(registration_interface, [name, father_name, age, gender, phone, address], registration_output)
-
-    with gr.Tab("Tests"):
-        gr.Markdown("<h2>Select Tests for the Patient</h2>")
-        patient_id_test = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID")
-        categories = gr.CheckboxGroup(
-            ["Haematology", "Clinical Pathology", "Biochemistry", "Microbiology", "Specific Diseases", "Serology", "Radiology", "Other Diagnostic Tests"],
-            label="Select Test Categories"
-        )
-        available_tests = gr.CheckboxGroup(label="Available Tests")
-        confirm_button = gr.Button("Confirm Selected Tests")
-        
-        # Use Markdown for Test Selection Output to allow for auto-expanding content
-        test_output = gr.Markdown(label="Test Selection Output", elem_id="test_output")
-
-        categories.change(test_interface, inputs=categories, outputs=available_tests)
-        confirm_button.click(confirm_tests_interface, [patient_id_test, available_tests], test_output)
-
-    with gr.Tab("Billing"):
-        gr.Markdown("<h2>Billing Information</h2>")
-        patient_id_bill = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID for Billing")
-        fetch_button = gr.Button("Fetch Billing Details")
-        
-        # Use Markdown for Billing Output to allow for auto-expanding content
-        billing_output = gr.Markdown(label="Billing Information", elem_id="billing_output")
-        
-        fetch_button.click(billing_interface, [patient_id_bill], billing_output)
-
-
 # Custom CSS styling
+custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
 
 /* General Page Style */
@@ -260,33 +206,6 @@ input, select, textarea {
     color: #2d2d2d;
 }
 
-/* Form Field Hover and Focus */
-input:focus, textarea:focus, select:focus {
-    border-color: #00ffcc;
-    box-shadow: 0 0 10px rgba(0, 255, 204, 0.6);
-    transform: scale(1.02);
-}
-
-/* Button Style */
-.gr-button {
-    color: #ffffff;
-    background: linear-gradient(135deg, #1de9b6, #007aff);
-    border: none;
-    border-radius: 12px;
-    padding: 12px 30px;
-    cursor: pointer;
-    font-weight: 600;
-    font-size: 16px;
-    transition: 0.3s ease;
-    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
-}
-
-.gr-button:hover {
-    background: linear-gradient(135deg, #005cbf, #00bfa5);
-    transform: scale(1.05);
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
-}
-
 /* Tab Styling */
 .nav-tabs {
     display: flex;
@@ -320,45 +239,60 @@ input:focus, textarea:focus, select:focus {
     background-color: rgba(255, 140, 0, 0.1);
     padding: 8px 16px;
 }
+"""
 
-/* Field Labels */
-label {
-    font-size: 1em;
-    font-weight: 600;
-    color: #7fffd4;
-    margin-bottom: 5px;
-}
+# Gradio Interface
+with gr.Blocks(css=custom_css) as app:
+    gr.Markdown("<h1 style='text-align: center;'>👩🏻‍🔬丂卂ㄒ卄Ҝ尺ㄩㄒ卄卂 ㄥ丨爪丂🔬</h1>", elem_id="header")
 
-/* Output Text Styling */
-#test_output, #billing_output {
-    color: #ffffff !important;
-    background-color: rgba(0, 0, 50, 0.8) !important;
-    padding: 10px;
-    border-radius: 5px;
-    font-weight: bold;
-    text-align: left;
-}
+    with gr.Tab("Patient Registration"):
+        gr.Markdown("<h2>Register a New Patient</h2>")
 
-/* Responsive Design for Mobile Devices */
-@media (max-width: 768px) {
-    .gradio-container {
-        padding: 20px;
-    }
-    
-    #header {
-        font-size: 2em;
-    }
+        with gr.Row():
+            name = gr.Textbox(label="Patient Name", placeholder="Enter patient's full name", elem_id="name_field")
+            father_name = gr.Textbox(label="Father/Husband's Name", placeholder="Enter father/husband's full name", elem_id="father_name_field")
 
-    input, textarea, select, .gr-button {
-        font-size: 1em;
-        padding: 10px;
-    }
+        with gr.Row():
+            age = gr.Number(label="Age", value=None, minimum=0, maximum=120, elem_id="age_field")
+            gender = gr.Radio(
+                choices=["Male", "Female", "Other"],
+                label="Gender",
+                elem_id="gender_field"
+            )
 
-    .gr-radio-group {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
-"""
+        with gr.Row():
+            phone = gr.Textbox(label="Phone Number", placeholder="Enter a valid 10-digit phone number", elem_id="phone_field")
+            address = gr.Textbox(label="Address", placeholder="Enter full address", lines=2, elem_id="address_field")
+
+        register_button = gr.Button("Register Patient", elem_id="register_button")
+        registration_output = gr.Markdown(label="Registration Output", elem_id="registration_output")
+
+        register_button.click(registration_interface, [name, father_name, age, gender, phone, address], registration_output)
+
+    with gr.Tab("Tests"):
+        gr.Markdown("<h2>Select Tests for the Patient</h2>")
+        patient_id_test = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID")
+        categories = gr.CheckboxGroup(
+            ["Haematology", "Clinical Pathology", "Biochemistry", "Microbiology", "Specific Diseases", "Serology", "Radiology", "Other Diagnostic Tests"],
+            label="Select Test Categories"
+        )
+        available_tests = gr.CheckboxGroup(label="Available Tests")
+        confirm_button = gr.Button("Confirm Selected Tests")
+
+        # Use Markdown for Test Selection Output to allow for auto-expanding content
+        test_output = gr.Markdown(label="Test Selection Output", elem_id="test_output")
+
+        categories.change(test_interface, inputs=categories, outputs=available_tests)
+        confirm_button.click(confirm_tests_interface, [patient_id_test, available_tests], test_output)
+
+    with gr.Tab("Billing"):
+        gr.Markdown("<h2>Billing Information</h2>")
+        patient_id_bill = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID for Billing")
+        fetch_button = gr.Button("Fetch Billing Details")
+
+        # Use Markdown for Billing Output to allow for auto-expanding content
+        billing_output = gr.Markdown(label="Billing Information", elem_id="billing_output")
+
+        fetch_button.click(billing_interface, [patient_id_bill], billing_output)
 
 app.launch()