Update app.py

app.py

@@ -108,6 +108,31 @@ body {
     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);
+}
+
 /* Button Style */
 .gr-button {
     color: #ffffff;
@@ -161,6 +186,40 @@ body {
     background-color: rgba(255, 140, 0, 0.1);
     padding: 8px 16px;
 }
+
+/* Label Styling */
+label {
+    font-size: 1em;
+    font-weight: 600;
+    color: #7fffd4;
+    margin-bottom: 5px;
+}
+
+/* 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;
+}
+
+/* Responsive Design for Mobile Devices */
+@media (max-width: 768px) {
+    .gradio-container {
+        padding: 20px;
+    }
+    
+    #header {
+        font-size: 2em;
+    }
+
+    input, textarea, select, .gr-button {
+        font-size: 1em;
+        padding: 10px;
+    }
+}
 """
 
 # Gradio Interface
@@ -189,21 +248,23 @@ with gr.Blocks(css=custom_css) as app:
         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(() => {
+        
+        # Copy Patient ID functionality with JavaScript
+        gr.Markdown("""
+        <button onclick="copyPatientID()" class="gr-button" style="margin-top: 10px;">Copy Patient ID</button>
+        <script>
+            function copyPatientID() {
+                const patientID = document.querySelector('#patient_id_display input').value;
+                navigator.clipboard.writeText(patientID).then(() => {
                     alert('Patient ID copied to clipboard');
                 });
             }
+        </script>
         """)
 
+        # Callback for registration and display Patient ID
+        register_button.click(registration_interface, [name, father_name, age, gender, phone, address], [registration_output, patient_id_display])
+
     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")