From b0a0a3b54c7b3418f97e0fba3d41590cb68456cf Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 17 May 2024 01:57:59 +0530 Subject: [PATCH] appointment page --- Html-Files/Css-Files/appointStyle.css | 104 ++++++++++++++++++++++++++ Html-Files/appointScript.js | 50 +++++++++++++ Html-Files/appointment.html | 94 +++++++++++++++++++++++ Html-Files/doc.html | 24 +++--- 4 files changed, 260 insertions(+), 12 deletions(-) create mode 100644 Html-Files/Css-Files/appointStyle.css create mode 100644 Html-Files/appointScript.js create mode 100644 Html-Files/appointment.html diff --git a/Html-Files/Css-Files/appointStyle.css b/Html-Files/Css-Files/appointStyle.css new file mode 100644 index 00000000..695513da --- /dev/null +++ b/Html-Files/Css-Files/appointStyle.css @@ -0,0 +1,104 @@ +body { + margin: 0; + padding: 0; + background-color: #f9f9f9; +} + +header { + background-color: #007074d5; + color: white; + padding: 15px; + text-align: center; +} + +header .logo { + font-size: 24px; + font-weight: bold; +} + +main { + padding: 20px; +} + +h1 { + color: #333; +} + +form { + background: white; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.form-section { + margin-bottom: 20px; +} + +label { + display: block; + margin-bottom: 5px; +} + +input[type="text"], +input[type="email"], +input[type="tel"], +input[type="date"], +textarea, +select { + width: 100%; + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; +} + +textarea { + height: 100px; +} + +button { + background-color: #007074d5; + color: white; + padding: 15px 20px; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 16px; +} + +button:hover { + background-color: #3fbcc0a4; +} + +.contact-info-doc { + padding: 20px; + background-color: #f1f1f1; + margin-top: 20px; + border-radius: 5px; +} + +footer { + background-color: #333; + color: white; + text-align: center; + padding: 10px 0; + width: 100%; + bottom: 0; +} + +footer ul { + list-style-type: none; + padding: 0; + margin: 0; +} + +footer ul li { + display: inline; + margin: 0 15px; +} + +footer ul li a { + color: white; + text-decoration: none; +} diff --git a/Html-Files/appointScript.js b/Html-Files/appointScript.js new file mode 100644 index 00000000..2d8ee089 --- /dev/null +++ b/Html-Files/appointScript.js @@ -0,0 +1,50 @@ +document.addEventListener("DOMContentLoaded", function() { + const existingPatientCheckbox = document.getElementById('existing-patient'); + const patientIdInput = document.getElementById('patient-id'); + const appointmentForm = document.getElementById('appointment-form'); + const previewSection = document.getElementById('preview-section'); + const previewDetails = document.getElementById('preview-details'); + const doctorSelect = document.getElementById('doctor-select'); + const appointmentDate = document.getElementById('appointment-date'); + const timeSlotsDiv = document.getElementById('time-slots'); + + existingPatientCheckbox.addEventListener('change', function() { + if (this.checked) { + patientIdInput.style.display = 'block'; + } else { + patientIdInput.style.display = 'none'; + } + }); + + window.previewAppointment = function() { + const formData = new FormData(appointmentForm); + + let details = ` + Doctor: ${formData.get('doctor')}
+ Date: ${formData.get('date')}
+ Time: ${formData.get('time-slot')}
+ Name: ${formData.get('full-name')}
+ Date of Birth: ${formData.get('dob')}
+ Email: ${formData.get('email')}
+ Phone: ${formData.get('phone')}
+ Reason for Visit: ${formData.get('reason')}
+ Existing Patient: ${formData.get('existing-patient') ? 'Yes' : 'No'}
+ Patient ID: ${formData.get('patient-id')} + `; + previewDetails.innerHTML = details; + previewSection.style.display = 'block'; + appointmentForm.style.display = 'none'; + }; + + window.confirmAppointment = function() { + alert('Submitted successfully'); + appointmentForm.reset(); + previewSection.style.display = 'none'; + appointmentForm.style.display = 'block'; + }; + + window.editAppointment = function() { + previewSection.style.display = 'none'; + appointmentForm.style.display = 'block'; + }; +}); diff --git a/Html-Files/appointment.html b/Html-Files/appointment.html new file mode 100644 index 00000000..139c3eb5 --- /dev/null +++ b/Html-Files/appointment.html @@ -0,0 +1,94 @@ + + + + + + Book an Appointment + + + +
+ +
+ +
+

Book an Appointment

+

Schedule your visit with our expert doctors easily.

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + + + + + + + + + + + + + + + +
+ + +
+ + +
+ +
+

Doctor's Contact Information

+

123 Clinic Street, MediCity

+

Phone: +91 1234567890

+

Email: contact@clinic.com

+
+ + + + + + diff --git a/Html-Files/doc.html b/Html-Files/doc.html index 292c770c..eb0242d4 100644 --- a/Html-Files/doc.html +++ b/Html-Files/doc.html @@ -46,7 +46,7 @@

RapiDoc

Dr. Satbir Singh

Cardiologist

- +
@@ -59,7 +59,7 @@

Dr. Satbir Singh

Dr. Vikas Chopra

Cardiologist

- +
@@ -72,7 +72,7 @@

Dr. Vikas Chopra

Dr. Ajay Aggarwal

Cardiologist

- +
@@ -85,7 +85,7 @@

Dr. Ajay Aggarwal

Dr. Rajeev Kumar Rajput

Cardiologist

- +
@@ -98,7 +98,7 @@

Dr. Rajeev Kumar Rajput

Dr. Nityanand Tripathi

Cardiologist

- +
@@ -111,7 +111,7 @@

Dr. Nityanand Tripathi

Dr. Soni Gupta

Dermatologist

- +
@@ -124,7 +124,7 @@

Dr. Soni Gupta

Dr. Ranjan Upadhyay

Dermatologist

- +
@@ -137,7 +137,7 @@

Dr. Ranjan Upadhyay

Dr. Deepti Shrivastava

Dermatologist

- +
@@ -150,7 +150,7 @@

Dr. Deepti Shrivastava

Dr. Manisha Chopra

Dermatologist

- +
@@ -163,7 +163,7 @@

Dr. Manisha Chopra

Dr. Pradeep Bansal

Dermatologist

- +
@@ -176,7 +176,7 @@

Dr. Pradeep Bansal

Dr. Jayant Jaswal

Ear-nose-throat (ENT)

- +
@@ -189,7 +189,7 @@

Dr. Jayant Jaswal

Dr. Vibhuti

Ear-nose-throat (ENT)

- +