Update app.py

app.py

@@ -74,80 +74,6 @@ def billing_interface(patient_id):
     else:
         return "Invalid Patient ID. Please check the ID."
 
-# Custom CSS styling
-custom_css = """
-/* Include your CSS code here */
-"""
-
-# Gradio Interface
-with gr.Blocks(css=custom_css) 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.Radio(
-                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(elem_id="registration_output")
-        patient_id_display = gr.Textbox(label="Patient ID", interactive=False)  # Display Patient ID as non-editable text
-        copy_button = gr.Button("Copy Patient ID")
-
-        # Callback for registration and display Patient ID
-        register_button.click(registration_interface, [name, father_name, age, gender, phone, address], [registration_output, patient_id_display])
-
-        # Copy button to copy Patient ID to clipboard
-        copy_button.click(lambda x: x, patient_id_display, None, _js="navigator.clipboard.writeText")
-
-    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")
-        paste_button_test = gr.Button("Paste Patient ID")  # Paste button to auto-fill 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")
-
-        # Test output to allow for auto-expanding content
-        test_output = gr.Markdown(label="Test Selection Output", elem_id="test_output")
-
-        # Event for updating available tests based on categories
-        categories.change(test_interface, inputs=categories, outputs=available_tests)
-        confirm_button.click(confirm_tests_interface, [patient_id_test, available_tests], test_output)
-
-        # Paste button action for Tests Tab
-        paste_button_test.click(lambda x: x, patient_id_display, patient_id_test)
-
-    with gr.Tab("Billing"):
-        gr.Markdown("<h2>Billing Information</h2>")
-        patient_id_bill = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID for Billing")
-        paste_button_bill = gr.Button("Paste Patient ID")  # Paste button for Billing
-        fetch_button = gr.Button("Fetch Billing Details")
-        
-        billing_output = gr.Markdown(label="Billing Information", elem_id="billing_output")
-        
-        # Event for fetching billing details
-        fetch_button.click(billing_interface, [patient_id_bill], billing_output)
-        
-        # Paste button action for Billing Tab
-        paste_button_bill.click(lambda x: x, patient_id_display, patient_id_bill)
-
 # Custom CSS styling
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
@@ -165,17 +91,6 @@ body {
     min-height: 100vh;
 }
 
-/* Heading Colors */
-h1 {
-    color: #ffffff; /* White color for h1 */
-    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
-}
-
-h2, h3, h4, h5, h6 {
-    color: #f0e68c; /* Light yellow shadow for other headings */
-    text-shadow: 2px 2px 10px rgba(255, 255, 0, 0.3);
-}
-
 /* Header Styling */
 #header {
     color: #7fffd4;
@@ -193,91 +108,24 @@ h2, h3, h4, h5, h6 {
     transform: scale(1.05);
 }
 
-/* Container Style */
-.gradio-container {
-    max-width: 850px;
-    margin: 30px auto;
-    padding: 40px;
-    background: rgba(0, 0, 50, 0.95);
-    border-radius: 15px;
-    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
-    color: #e0f7fa;
-}
-
-/* Form Field Styles */
-input, select, textarea {
-    max-width: 700px;
-    border: 1px solid #7fffd4;
-    border-radius: 8px;
-    padding: 10px 12px;
-    background: rgba(245, 245, 245, 0.95);
-    color: #2d2d2d;
-    font-size: 15px;
-    margin-bottom: 20px;
-    transition: all 0.3s ease;
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
-}
-
-/* Radio Button Group Styling */
-.gr-radio-group label {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px 20px;
-    border: 2px solid #7fffd4;
-    border-radius: 8px;
-    transition: all 0.3s ease;
-    cursor: pointer;
-    color: #7fffd4;
-    background: rgba(245, 245, 245, 0.95);
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.15);
-    margin-right: 10px;
-}
-
-.gr-radio-group label:hover {
-    background: #e0f7fa;
-    color: #00bfa5;
-}
-
-/* Radio Button Styling */
-.gr-radio-group input[type="radio"] {
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    border: 2px solid #7fffd4;
-    border-radius: 50%;
-    margin-right: 10px;
-    transition: all 0.3s ease;
-    position: relative;
-}
-
-/* Selected Radio Button Styling with Checkmark */
-.gr-radio-group input[type="radio"]:checked {
-    background-color: #ff8c00;
-    border-color: #ff8c00;
-}
-
-.gr-radio-group input[type="radio"]:checked::after {
-    content: "✓";
+/* Button Style */
+.gr-button {
     color: #ffffff;
-    font-size: 14px;
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: 18px;
-    height: 18px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: #ff8c00;
+    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);
 }
 
-/* Adjust label for responsive alignment */
-.gr-radio-group span {
-    font-size: 1em;
-    font-weight: 600;
-    color: #2d2d2d;
+.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 */
@@ -314,4 +162,78 @@ input, select, textarea {
     padding: 8px 16px;
 }
 """
-app.launch()
+
+# Gradio Interface
+with gr.Blocks(css=custom_css) 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.Radio(
+                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(elem_id="registration_output")
+        patient_id_display = gr.Textbox(label="Patient ID", interactive=False, elem_id="patient_id_display")  # Display Patient ID as non-editable text
+        copy_button = gr.Button("Copy Patient ID", elem_id="copy_button")
+
+        # Callback for registration and display Patient ID
+        register_button.click(registration_interface, [name, father_name, age, gender, phone, address], [registration_output, patient_id_display])
+
+        # JavaScript function to copy Patient ID
+        copy_button.click(None, [], None, _js="""
+            function(){
+                const text = document.querySelector('#patient_id_display input').value;
+                navigator.clipboard.writeText(text).then(() => {
+                    alert('Patient ID copied to clipboard');
+                });
+            }
+        """)
+
+    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")
+        paste_button_test = gr.Button("Paste Patient ID")  # Paste button to auto-fill 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")
+
+        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)
+
+        # Paste button action for Tests Tab
+        paste_button_test.click(lambda x: x, patient_id_display, patient_id_test)
+
+    with gr.Tab("Billing"):
+        gr.Markdown("<h2>Billing Information</h2>")
+        patient_id_bill = gr.Textbox(label="Patient ID", placeholder="Enter Patient ID for Billing")
+        paste_button_bill = gr.Button("Paste Patient ID")  # Paste button for Billing
+        fetch_button = gr.Button("Fetch Billing Details")
+        
+        billing_output = gr.Markdown(label="Billing Information", elem_id="billing_output")
+        
+        fetch_button.click(billing_interface, [patient_id_bill], billing_output)
+        
+        # Paste button action for Billing Tab
+        paste_button_bill.click(lambda x: x, patient_id_display, patient_id_bill)
+
+app.launch()