diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..5422a45e4 Binary files /dev/null and b/.DS_Store differ diff --git a/.github/workflows/azure-static-web-apps-proud-bush-09ac21d10.yml b/.github/workflows/azure-static-web-apps-proud-bush-09ac21d10.yml new file mode 100644 index 000000000..4e1cd7db6 --- /dev/null +++ b/.github/workflows/azure-static-web-apps-proud-bush-09ac21d10.yml @@ -0,0 +1,46 @@ +name: Azure Static Web Apps CI/CD + +on: + push: + branches: + - master + pull_request: + types: [opened, synchronize, reopened, closed] + branches: + - master + +jobs: + build_and_deploy_job: + if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed') + runs-on: ubuntu-latest + name: Build and Deploy Job + steps: + - uses: actions/checkout@v3 + with: + submodules: true + lfs: false + - name: Build And Deploy + id: builddeploy + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PROUD_BUSH_09AC21D10 }} + repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments) + action: "upload" + ###### Repository/Build Configurations - These values can be configured to match your app requirements. ###### + # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig + app_location: "/" # App source code path + api_location: "" # Api source code path - optional + output_location: "" # Built app content directory - optional + ###### End of Repository/Build Configurations ###### + + close_pull_request_job: + if: github.event_name == 'pull_request' && github.event.action == 'closed' + runs-on: ubuntu-latest + name: Close Pull Request Job + steps: + - name: Close Pull Request + id: closepullrequest + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_PROUD_BUSH_09AC21D10 }} + action: "close" diff --git a/README.md b/README.md new file mode 100644 index 000000000..1d642d163 --- /dev/null +++ b/README.md @@ -0,0 +1,29 @@ +# HealHive - Simplifying Appointment Management + +HealHive is a web platform aimed at enhancing accessibility and efficiency in appointment management within the healthcare sector. Developed as part of the ISM 6225 course, this project focuses on streamlining processes through a user-centric design and robust web development practices. + +## Team Members + +- Afrah Shaik +- Raajitha Sai Bondada +- Shwetha Sunkara +- Srija Thota + +## Project Intent and Goals + +- **Enhancing Accessibility**: Making healthcare more accessible through intuitive interface designs. +- **Streamlining Processes**: Optimizing appointment scheduling and management workflows to save time and reduce errors. +- **Transparent Performance Metrics**: Offering healthcare providers clear insights into their operational effectiveness. +- **Efficient Data Operations**: Utilizing modern database technologies to ensure secure and fast data handling. + +## Live Demonstration + +Explore the features of HealHive by visiting our live platform at http://myweb.usf.edu/~shwethasunkara/HealHive/index.html. + +## Key Learnings + +- **User-Centric Design**: Focused on prioritizing user experience and incorporating user feedback into continuous development. +- **Agile Approach**: Adapted agile methodologies to stay flexible and responsive to changing project needs. +- **Collaboration**: Emphasized on teamwork and communication to ensure project success. +- **Web Development Practices**: Mastered advanced techniques in web design and development to create an intuitive and effective platform. +- **Continuous Improvement**: Implemented feedback loops to iteratively refine and enhance the platform's capabilities. diff --git a/Views/Account/Login.html b/Views/Account/Login.html new file mode 100644 index 000000000..7eea1b992 --- /dev/null +++ b/Views/Account/Login.html @@ -0,0 +1,76 @@ + + + + Log in + + + + + + +
+ +
+
+
+
+ +

Fill in your details below to login

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

+ Register If you don't have an account. +

+
+
+
+
+
+ +




+ + +
+ \ No newline at end of file diff --git a/Views/Account/Myaccount.html b/Views/Account/Myaccount.html new file mode 100644 index 000000000..4be87e208 --- /dev/null +++ b/Views/Account/Myaccount.html @@ -0,0 +1,92 @@ + + + + + + Welcome to HealHive + + + + + + +
+

Welcome to HealHive

+

Where Care Comes First

+ Learn more +
+ +
+
+ Find Doctors +

Find Doctors

+

Get the best in health care with the help of our highly qualified doctors. Click the button below to get started.

+ Find Doctors +
+ +
+ Create Appointments +

Create Appointments

+

Get started! Your appointment is just a few clicks away.

+ Create now +
+ +
+ View Statistics +

View Statistics

+

Want to know how well we are doing? Check it out yourself.

+ Show Statistics +
+
+




+ + + diff --git a/Views/Account/Register.html b/Views/Account/Register.html new file mode 100644 index 000000000..c83cd6915 --- /dev/null +++ b/Views/Account/Register.html @@ -0,0 +1,102 @@ + + + + Register + + + + + +
+
+
+

Register Now!

+
+ +

Fill in the details below to create an account:

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




+ + +
+ diff --git a/Views/Appointment/AppointmentIndex.html b/Views/Appointment/AppointmentIndex.html new file mode 100644 index 000000000..d2ec20e89 --- /dev/null +++ b/Views/Appointment/AppointmentIndex.html @@ -0,0 +1,60 @@ + + + + + + Appointment Form + + + + + + +
+
+
+

Book An Appointment

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

Health Tips

+
    +
  • Stay hydrated to keep your body in good condition.
    • +
  • Regular exercise can boost your immune system.
    • +
  • Eating a balanced diet is key to maintaining health.
    • + +
+
+
+ +
+ + + diff --git a/Views/Appointment/Details.html b/Views/Appointment/Details.html new file mode 100644 index 000000000..bac4c925e --- /dev/null +++ b/Views/Appointment/Details.html @@ -0,0 +1,141 @@ + + + + Appointment Details + + + + +
+ +

+
+ +

Appointment Details

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Patient's NameDoctor's NameDepartmentDateTimeConcern
BenDr.DannyDentistry2024-04-258:30 AMBleeding gums
ToyDr.JoeyNuerology2024-04-1510:30 AMMigrane
AlexDr.AsfiEmergency2024-05-1502:00 PMChest Pain
EmmaDr.DannyDentistry2024-05-2011:00 AMDental Checkup
OliviaDr.KennethRadiology2024-06-1809:30 AMX-Ray
NoahDr.MariaGynecology2024-07-0501:00 PMRegular Checkup
SophiaDr.ShellyDietician2024-07-2203:00 PMNutrition Plan
IsabellaDr.DannyDentistry2024-08-2010:00 AMWisdom Teeth Removal
JamesDr.JoeyNeurology2024-09-1511:30 AMEEG Test
CharlotteDr.KennethRadiology2024-10-0508:45 AMCT Scan
+ +

+ Go Back +

+





+ + + \ No newline at end of file diff --git a/Views/Appointment/Editappointment.html b/Views/Appointment/Editappointment.html new file mode 100644 index 000000000..031744aab --- /dev/null +++ b/Views/Appointment/Editappointment.html @@ -0,0 +1,62 @@ + + + + Edit Appointment + + + + + +
+ +
+
+
+

Edit your appointment

+
+ + + + + + + + + + + + + + + + +
+
\ No newline at end of file diff --git a/Views/Appointment/Myappointments.html b/Views/Appointment/Myappointments.html new file mode 100644 index 000000000..0926f91ae --- /dev/null +++ b/Views/Appointment/Myappointments.html @@ -0,0 +1,210 @@ + + + + Appointment Details + + + + +
+ +
+ +

Appointment Details

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Patient's NameDoctor's NameDepartmentDateTimeConcern
BenDr.DannyDentistry2024-04-258:30 AMBleeding gums + + + +
ToyDr.JoeyNuerology2024-04-1510:30 AMMigrane + + + +
AlexDr.AsfiEmergency2024-05-1502:00 PMChest Pain + + + +
EmmaDr.DannyDentistry2024-05-2011:00 AMDental Checkup + + + +
LiamDr.JoeyNeurology2024-06-1010:00 AMHeadache + + + +
OliviaDr.KennethRadiology2024-06-1809:30 AMX-Ray + + + +
NoahDr.MariaGynecology2024-07-0501:00 PMRegular Checkup + + + +
SophiaDr.ShellyDietician2024-07-2203:00 PMNutrition Plan + + + +
WilliamDr.AsfiEmergency2024-08-1602:30 PMAccident Injury + + + +
IsabellaDr.DannyDentistry2024-08-2010:00 AMWisdom Teeth Removal + + + +
JamesDr.JoeyNeurology2024-09-1511:30 AMEEG Test + + + +
CharlotteDr.KennethRadiology2024-10-0508:45 AMCT Scan + + + +
+ +

© 2024 - HealHive LLC

+ + + diff --git a/Views/Doctor/DocIndex.html b/Views/Doctor/DocIndex.html new file mode 100644 index 000000000..eebdeda1e --- /dev/null +++ b/Views/Doctor/DocIndex.html @@ -0,0 +1,107 @@ + + + + + + Doctors + + + +
+ +
+ +
+

Our team

+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Doctor's NameSexDepartmentDegreeOpen for appointments
Dr.Asfi MaleEmergencyMBBS,FRCEMYes
Dr.DannyFemaleDenistryDDSYes
Dr.JoeyMaleNeurologyMBBS,MDYes
Dr.KennethMaleRadiologyMBBS,DOYes
Dr.MariaFemaleGynecologyMBBS,MDYes
Dr.ShellyFemaleDieticianMBBS,RDNYes
+
+ + + + \ No newline at end of file diff --git a/Views/Doctor/docindex.html b/Views/Doctor/docindex.html new file mode 100644 index 000000000..482111588 --- /dev/null +++ b/Views/Doctor/docindex.html @@ -0,0 +1,314 @@ + + + + + + Doctors + + + + +
+ +
+ +
+

Our Team

+
+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Doctor's NameSexDepartmentDegreeOpen for appointments
Dr.Asfi MaleEmergencyMBBS,FRCEMYesCreate Appointment
Dr.DannyFemaleDentistryDDSYesCreate Appointment
Dr.JoeyMaleNeurologyMBBS,MDYesCreate Appointment
Dr.KennethMaleRadiologyMBBS,DOYesCreate Appointment
Dr.MariaFemaleGynecologyMBBS,MDYesCreate Appointment
Dr.ShellyFemaleDieticianMBBS,RDNYesCreate Appointment
+
+ +




+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Views/Home/About.html b/Views/Home/About.html new file mode 100644 index 000000000..4a54c1e61 --- /dev/null +++ b/Views/Home/About.html @@ -0,0 +1,151 @@ + + + + + + + About Us + + + + + + + +
+

About Us

+

At HealHive, We're revolutionizing healthcare, starting with our appointment page. It's not just a scheduling tool, it is your gateway to personalizedmedical attention. Farewell to endless waiting and welcome to a new era of tailored care. Our commitment goes beyond booking appointments and is about creating compassionate healthcare journeys. Join us at Healhive as we redefine the standard of wellness, one appointment at a time.

+ +

Our Team

+
+
+ Team Member 1 +
+

Afrah Shaik

+

Afrah, a student in USF's Business Analytics and Information Systems graduate program, has been + pivotal in designing the pages and implementing JavaScript for website functionalities. She + designed the login and registration pages.

+
+
+
+ Team Member 2 +
+

Raajitha Sai Bondada

+

Raajitha, a student in USF's Business Analytics and Information Systems graduate program, has + played a pivotal role in implementing JavaScripts for various functionalities on the website. +

+
+
+
+ Team Member 3 +
+

Shwetha Sunkara

+

Shwetha, a student in USF's Business Analytics and Information Systems graduate program, She has + implemented statistics page and CSS to enhance the functionality and visual appeal of the site.

+
+
+
+ Team Member 4 +
+

Srija Thota

+

Srija, a student in USF's Business Analytics and Information Systems graduate program, has made + substantial contributions by designing the about page and crafted the data model with precision. +

+
+
+
+
+

Our Data Model

+

The Data Model shows how our website data is structured to provide insights and functionality + effectively:

+ Data Model of the Website +
+
+

Our GitHub Repository

+

Our project is open-source, and we encourage collaboration: +

+ Visit our GitHub Repository +
+
+
+

Git Log


+

This section presents the output of the following terminal command for each group member.

+

git log --author="githubID" --pretty=tformat: --numstat

+
+

Afrah

+
+

Raajitha

+
+

Shwetha

+
+

Srija

+ +
+ +
+ + + + + \ No newline at end of file diff --git a/Views/Statistics/ViewStatistics.html b/Views/Statistics/ViewStatistics.html new file mode 100644 index 000000000..f2e1321fe --- /dev/null +++ b/Views/Statistics/ViewStatistics.html @@ -0,0 +1,267 @@ + + + + + + HealHive Statistics + + + + + + +
+

Statistics Dashboard

+
+
+
+

Appointment Distribution

+ +
+

This pie chart shows the distribution of appointments among doctors, giving a quick view of each doctor's patient load.

+
+
+
+

+
+
+

Weekly Appointments

+
+ +
+
+

This bar chart displays the number of appointments for each day of the week, providing insight into the busiest days for consultations.

+
+
+
+
+
+

Monthly Patient Visits

+
+ +
+
+

This line chart illustrates the trend of patient visits each month, helping to identify peak periods and analyze growth or decline.

+
+
+
+ +
+



+
+ + + diff --git a/css/about.css b/css/about.css new file mode 100644 index 000000000..9de0226f1 --- /dev/null +++ b/css/about.css @@ -0,0 +1,127 @@ +/* Basic styling for the navigation menu */ +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; + } + nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; + } + nav li img{ + padding-left: 20px; + height: 40px; + width: 40px; + } + nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; + } + nav a:hover { + color: #56bb8a; + } +/* General Styles */ +body { + font-family: Arial, sans-serif; + margin: 0; + background-color: #f4f4f4; + background-image: url("../../Assignment_LookAndFeel/img/DoctorAppointment.jpg"); /* Add the path to your background image */ + /* padding-left: 11em; + padding-right: 20em; */ + padding: 0; + background-size: cover; /* This will make the image cover the entire body */ + background-repeat: no-repeat; /* This will prevent the image from repeating */ + background-position: center; /* This will center the image */ +} + +.container { + display: flex; + flex-wrap: wrap; + justify-content: center; + text-align: justify; +} + +/* Header Styles */ +header { + background-color: #333; + color: #fff; + padding: 10px; + display: flex; + justify-content: space-between; + align-items: center; +} + +nav a { + color: #fff; + text-decoration: none; + padding: 10px; + transition: background-color 0.3s ease; +} + +nav a:hover { + background-color: #555; +} + +/* About Section Styles */ +.about { + text-align: center; + padding: 40px 0; +} + +.team-members { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 30px; +} +.team-member { + flex: 200px; + text-align: center; + margin: 20px; +} +.team-member img { + width: 150px; + height: 150px; + border-radius: 10%; + object-fit: cover; + margin-bottom: 10px; +} + +.team-member h3 { + margin: 10px 0; +} + +.team-member p { + font-size: 14px; + color: #666; +} +.team-member h2 { + text-align: center; + margin: 10px 0; +} + +.section { + text-align: center; + width: auto; + margin: 20px; +} + +.git{ + + max-width: 800px; + align-items: center; + margin: auto auto; + padding: 20px; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); +} + .git h2{ + align-items: center; + } \ No newline at end of file diff --git a/css/appointmentindex.css b/css/appointmentindex.css new file mode 100644 index 000000000..7ad9c3f3a --- /dev/null +++ b/css/appointmentindex.css @@ -0,0 +1,214 @@ +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; +} +nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; +} +nav li img{ + padding-left: 20px; + height: 40px; + width: 40px; +} +nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; +} +nav a:hover { + color: #b9c0bc; +} + +nav ul li a.btn:hover { + background-color: #56bb8a; /* Darker shade on hover */ +} + +nav ul li a.btn.btn-register { + background-color: #56bb8a; /* for the 'Register' button */ +} + +.form-horizontal { + max-width: 600px; + margin: 0 auto; + background-color: #fff; + padding: 20px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h2 { + text-align: center; + color: #333333; +} + +.form-group { + margin-bottom: 20px; +} + +label { + font-weight: bold; +} + +.form-control { + width: 100%; + padding: 8px; + border: 1px solid #cccccc; + border-radius: 3px; +} + +.btn { + padding: 10px 20px; + background-color: #4CAF50; + color: #ffffff; + border: none; + border-radius: 3px; + cursor: pointer; +} + +.btn:hover { + background-color: #45a049; +} + +/* Styling for Go Back link */ +a { + text-decoration: none; + color: #007bff; + cursor: pointer; +} + +a:hover { + text-decoration: underline; +} + + +/* Main content */ +main { + padding: 20px; +} + +.filters { + margin-bottom: 20px; +} + +.filters input, +.filters select, +.filters button { + padding: 5px; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, td { + padding: 8px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background-color: #f2f2f2; +} +.btn { + display: inline-block; + padding: 8px 16px; + background-color: #4CAF50; + color: white; + text-decoration: none; + border-radius: 4px; + transition: background-color 0.3s; +} +.btn:hover { + background-color: #45a049; +} + + /* Reset default button styles */ + button { + border: none; + outline: none; + cursor: pointer; + background-color: transparent; /* Remove background color */ + padding: 0; + font-size: 14px; + color: #56bb8a; /* Set text color */ + margin-right: 10px; + transition: color 0.3s; +} + +/* Extend the upper border */ +.button-container { + border-top: 2px solid #ddd; + padding-top: 20px; +} +/* Form styling */ +.form-control { + width: 100%; + padding: 10px; + border: 1px solid #ccc; + border-radius: 5px; + margin-bottom: 15px; +} + +label { + font-weight: bold; +} + + + +/* Responsive adjustments */ +@media (max-width: 768px) { + nav ul li { + display: block; + margin-right: 0; + margin-bottom: 10px; + } +} + +/* Basic Styling for Footer */ +footer { + background-color: #56bb8a; + color: #333; + padding: 20px 0; + font-size: 14px; + } + + .footer-container { + display: flex; + justify-content: space-around; + align-items: start; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + } + + .footer-section h4 { + color: #000; + margin-bottom: 10px; + } + + .footer-section ul, + .footer-section p { + list-style: none; + padding: 0; + } + + .footer-section ul li a, + .footer-section { + color: #555; + text-decoration: none; + transition: color 0.3s; + } + + .footer-section ul li a:hover, + .footer-section a:hover { + color: #007bff; + } + \ No newline at end of file diff --git a/css/bookappointment.css b/css/bookappointment.css new file mode 100644 index 000000000..edca0d18d --- /dev/null +++ b/css/bookappointment.css @@ -0,0 +1,261 @@ +/* Header and navigation styling */ +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; + } + nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; + } + nav li img{ + padding-left: 20px; + height: 40px; + width: 60px; + } + nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; + } + nav a:hover { + color: #56bb8a; + } + +/* Button styles for 'Login' and 'Register' */ +nav ul li a.btn { + padding: 10px 20px; /* Padding inside the buttons */ + background-color: #56bb8a; /* Background color for the buttons */ + color: white; /* Text color for the buttons */ + border-radius: 20px; /* Rounded corners for the buttons */ + transition: background-color 0.3s ease; /* Smooth transition for hover effects */ +} + +nav ul li a.btn:hover { + background-color: #56bb8a; /* Darker shade on hover */ +} + +nav ul li a.btn.btn-register { + background-color: #56bb8a; /* for the 'Register' button */ +} + +/* Add a basic reset */ +* { + margin: 0; + padding: 3px; + box-sizing: border-box; +} + +body, html { + width: 100%; + height: 100%; + font-family: 'Arial', sans-serif; +} +/* Navigation link styles */ +.nav-links { + list-style: none; + display: flex; +} + +.nav-links li { + padding: 0 15px; /* Space out the links */ +} + +.nav-links a { + text-decoration: none; + color: #333; /* Dark text for readability */ + font-weight: bold; + transition: color 0.3s ease; /* Smooth transition for hover effect */ +} + +.nav-links a:hover { + color: #0d1a13; /* Highlight color on hover */ +} + +body, html { + width: 100%; + height: 100%; + font-family: Arial, sans-serif; +} + +.nav-links a, .appointment-link { + text-decoration: none; + color: #333; + margin: 0 10px; + font-size: 16px; +} + +/* Main content and form styling */ +main { + display: flex; + justify-content: center; + align-items: center; + padding: 50px 0px; + background-image: url('../img/dd.jpeg'); /* Update the relative path to where your image is stored */ + background-size: cover; + background-position: center; + position: relative; /* This will allow us to absolutely position an overlay */ +} + +main::before { + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(255, 255, 255, 0.5); /* White background with 50% opacity */ + z-index: 0; /* Sit below the content */ +} + +.appointment-section { + position: relative; /* Make sure this is positioned relative to the pseudo-element */ + background: #fff; + border-radius: 8px; + padding: 20px; + max-width: 900px; + margin: auto; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + z-index: 1; /* Sit above the pseudo-element */ + display: flex; + justify-content: space-between; + align-items: flex-start; +} + +.form-container { + width: calc(60% - 10px); /* Adjust width and account for the gap */ + margin-right: 20px; /* Ensure there is a gap between the form and the health tips */ +} + +.health-tips-container { + width: calc(40% - 10px); /* Adjust width and account for the gap */ +} + +.tips-list { + list-style-type: none; + padding: 0; +} + +.tips-list li { + background: #f5f5f5; + color: #333; + padding: 10px; + margin-bottom: 10px; + border-radius: 4px; +} + +.tips-list li:last-child { + margin-bottom: 0; +} + +@media (max-width: 768px) { + .appointment-section { + flex-direction: column; + } + + .form-container, + .health-tips-container { + width: 100%; /* Full width on smaller screens */ + margin-right: 0; /* Remove the margin on smaller screens */ + } + + .tips-list li { + padding: 8px; /* Adjust padding for smaller screens if necessary */ + } +} + + +#appointment-form { + display: flex; + flex-direction: column; +} + +#appointment-form input[type="text"], +#appointment-form input[type="email"], +#appointment-form select, +#appointment-form input[type="date"], +#appointment-form input[type="time"] { + padding: 10px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; +} + +#appointment-form button { + padding: 10px; + background-color: #56bb8a; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + transition: background 0.3s; +} + +#appointment-form button:hover { + background-color: #003d82; +} + +/* Footer styling */ +footer { + text-align: center; + background-color: #333; + color: white; + padding: 10px; + position: absolute; + bottom: 0; + width: 100%; +} + +/* Responsive styling */ +@media (max-width: 768px) { + .appointment-section { + flex-direction: column; + padding: 20px; + } +} + +/* Basic Styling for Footer */ +footer { + background-color: #56bb8a; + color: #333; + padding: 20px 0; + font-size: 15px; +} + +.footer-container { + display: flex; + justify-content: space-around; + align-items: start; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.footer-section h4 { + color: #000; + margin-bottom: 10px; +} + +.footer-section ul, +.footer-section p { + list-style: none; + padding: 0; +} + +.footer-section ul li a, +.footer-section { + color: #555; + text-decoration: none; + transition: color 0.3s; +} + +.footer-section ul li a:hover, +.footer-section a:hover { + color: #007bff; +} diff --git a/css/doctorindex.css b/css/doctorindex.css new file mode 100644 index 000000000..4521a5882 --- /dev/null +++ b/css/doctorindex.css @@ -0,0 +1,107 @@ +/* Reset and typography */ +body { + font-family: 'Times New Roman', Times, serif; + margin: 0; + padding: 0; +} +/* Basic styling for the navigation menu */ +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; +} +nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; +} + nav li img{ + padding-left: 20px; + height: 40px; + width: 40px; + } + nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; + } + nav a:hover { + color: #56bb8a; + } + + +/* Main content */ +main { + padding: 20px; +} + +.filters { + margin-bottom: 20px; +} + +.filters input, +.filters select, +.filters button { + padding: 5px; +} + +table { + width: 100%; + border-collapse: collapse; +} + +th, td { + padding: 8px; + text-align: left; + border-bottom: 1px solid #ddd; +} + +th { + background-color: #f2f2f2; +} + + +/* Basic Styling for Footer */ +footer { + background-color: #56bb8a; + color: #333; + padding: 20px 0; + font-size: 14px; + } + + .footer-container { + display: flex; + justify-content: space-around; + align-items: start; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + } + + .footer-section h4 { + color: #000; + margin-bottom: 10px; + } + + .footer-section ul, + .footer-section p { + list-style: none; + padding: 0; + } + + .footer-section ul li a, + .footer-section { + color: #555; + text-decoration: none; + transition: color 0.3s; + } + + .footer-section ul li a:hover, + .footer-section a:hover { + color: #007bff; + } + \ No newline at end of file diff --git a/css/edit.css b/css/edit.css new file mode 100644 index 000000000..13e3879a7 --- /dev/null +++ b/css/edit.css @@ -0,0 +1,150 @@ +h1 { + text-align: center; /* Centers the heading */ + margin-bottom: 20px; + margin-top: 20px; /* Adds space above the heading */ +} +/* Reset margin and padding for all elements */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* Apply a font to the entire body */ +body { + font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + background-color: #f9f9f9; + color: #333; + line-height: 1.6; + padding-top: 50px; /* Give some space on the top */ +} + +/* Basic styling for the navigation menu */ +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; + } + nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; + } + nav li img{ + padding-left: 20px; + height: 35px; + width: 55px; + } +nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; +} +nav a:hover { + color: #56bb8a; +} + +/* Styling for login and register buttons */ +.btn-login, .btn-register { + background-color: #56bb8a; + color: #fff; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: background-color 0.3s; +} +.btn-login:hover, .btn-register:hover { + background-color: #56bb8a; +} + +/* Main content styles */ +.row { + width: 800px; + margin: 0 auto; +} + +h1 { + margin-bottom: 20px; +} + +form { + background: #ffffff; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +form label { + display: block; + margin: 10px 0; +} + +/* Apply styles to text and email input fields */ +form input[type="text"], +form input[type="email"], +form input[type="date"], +form select { + width: 100%; + padding: 10px; + margin-bottom: 20px; + border: 1px solid #ddd; + border-radius: 4px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +/* Focus styles for form fields */ +form input[type="text"]:focus, +form input[type="email"]:focus, +form input[type="date"]:focus, +form select:focus { + border-color: #4CAF50; + outline: none; +} + +/* Style the form submit button */ +form button { + display: block; + width: 100%; + padding: 10px; + background-color: #5cb85c; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + font-size: 18px; +} + +form button:hover { + background-color: #449d44; +} + +/* Footer styles */ +footer { + background-color: #333; + color: #fff; + text-align: center; + padding: 20px 0; + margin-top: 40px; +} + +footer p { + margin: 0; +} + +/* Add responsiveness */ +@media (max-width: 768px) { + header nav { + flex-direction: column; + } + + .row { + width: 95%; + } +} diff --git a/css/login.css b/css/login.css new file mode 100644 index 000000000..a874d0f68 --- /dev/null +++ b/css/login.css @@ -0,0 +1,140 @@ +main{ + display: flex; + justify-content: center; + align-items: center; + padding: 50px 0px; + background-image: url('../img/DoctorAppointment.jpg'); /* Update the relative path to where your image is stored */ + background-size: cover; + background-position: center; + position: relative; +} +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; + } + nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; + } + nav li img { + padding-left: 20px; + height: 40px; + width: 40px; + } + nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; + } + nav a:hover { + color: #56bb8a; + } + +.row { + width: 400px; + margin: 0 auto; + padding: 20px; + background-color: #ffffff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1 { + margin-bottom: 20px; +} + +.form-group { + margin-bottom: 20px; +} + +label { + font-weight: bold; +} + +.form-control { + width: 100%; + padding: 8px; + border: 1px solid #cccccc; + border-radius: 3px; +} + +.checkbox { + display: flex; + align-items: center; +} + +.checkbox input[type="checkbox"] { + margin-right: 10px; +} + +.btn { + padding: 10px 20px; + background-color: #4CAF50; + color: #ffffff; + border: none; + border-radius: 3px; + cursor: pointer; +} + +.btn:hover { + background-color: #45a049; +} +/* Styling for login and register buttons */ +.btn-login, .btn-register { + background-color: #56bb8a; + color: #fff; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: background-color 0.3s; + } + .btn-login:hover, .btn-register:hover { + background-color: #56bb8a; + } + + /* Basic Styling for Footer */ +footer { + background-color: #56bb8a; + color: #333; + padding: 20px 0; + font-size: 14px; +} + +.footer-container { + display: flex; + justify-content: space-around; + align-items: start; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.footer-section h4 { + color: #000; + margin-bottom: 10px; +} + +.footer-section ul, +.footer-section p { + list-style: none; + padding: 0; +} + +.footer-section ul li a, +.footer-section { + color: #555; + text-decoration: none; + transition: color 0.3s; +} + +.footer-section ul li a:hover, +.footer-section a:hover { + color: #007bff; +} diff --git a/css/main.css b/css/main.css index bcc90344f..91c96d786 100644 --- a/css/main.css +++ b/css/main.css @@ -1,47 +1,237 @@ -/** -Sample css code -*/ -/* Set height to 100% for body and html to enable the background image to cover the whole page: */ -body, -html { - height: 100%; -} - -/*Set background image*/ -.container { - background-image: url('https://doc-10-ao-docs.googleusercontent.com/docs/securesc/ha0ro937gcuc7l7deffksulhg5h7mbp1/r085o9ungppbiokopob2sfbekae4uqbb/1537920000000/14802840322886517493/*/110cT8sl-pOiHGgj9yToPkAqAzrr-RNfb'); - height: 100%; - background-position: center; - background-size: cover; -} - -/* Position text in the middle */ -.middle { - position: absolute; - color: beige; - top: 70%; - left: 39%; + +/* Basic styling for the navigation menu */ +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; +} +nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; +} +nav li img{ + padding-left: 20px; + height: 40px; + width: 40px; +} +nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; +} +nav a:hover { + color: #b9c0bc; +} + +/* Styling for the jumbotron section */ +.jumbotron { + background-color: #f8f9fa; + padding: 20px; text-align: center; - font-size: 25px; +} +.jumbotron h2 { + font-size: 28px; + margin-bottom: 10px; +} +.jumbotron .lead { + font-size: 18px; + color: #333; +} +.jumbotron .btn-primary { + background-color: #56bb8a; + color: #fff; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: background-color 0.3s; +} +.jumbotron .btn-primary:hover { + background-color: #56bb8a; } -/*Set circle in unordered list*/ -.middle ul { - list-style-type: circle; +/* Styling for the three columns */ +.row { + display: flex; + justify-content: center; /* Added to center the columns */ + margin-top: 20px; +} +.col-md-4 { + flex-basis: 30%; + padding: 10px; + text-align: center; + margin: 0 10px; /* Added some margin between columns */ +} +.col-md-4 img { + max-width: 100%; + height: auto; + margin-bottom: 10px; +} +.col-md-4 h2 { + font-size: 24px; + margin-bottom: 10px; +} +.col-md-4 p { + font-size: 16px; + color: #555; + margin-bottom: 20px; +} +.col-md-4 .btn-default { + background-color: #f8f9fa; + color: #56bb8a; + border: 1px solid #56bb8a; + padding: 8px 16px; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: background-color 0.3s, color 0.3s; +} +.col-md-4 .btn-default:hover { + background-color: #56bb8a; + color: #fff; +} +/* Styling for the appointment form */ +/* Footer Styles */ +footer { + background-color: #5a5757; + color: #fff; + padding: 20px 0; } -/*Set text inside li tag to left*/ -.middle ul li { - text-align: left !important; +footer main { + display: flex; + justify-content: space-between; + flex-wrap: wrap; + max-width: 1200px; + margin: auto; + padding: 0 20px; } -/*Set text color for a tag inside middle class and ul>li element*/ -.middle ul li a { - color: beige; +.contact-container { + display: flex; + width: 90%; + align-items: flex-start; + justify-content: space-around; + flex-wrap: wrap; } -/*Change text color and decoration for a tags inside middle class and ul>li element*/ -.middle ul li a:hover { - color: red; - text-decoration: none; +.contact-section, +.contact-details { + flex: 1 1 45%; /* Each section will take up 45% of the container width */ + margin: 10px; +} + +.contact-section { + max-width: 600px; +} + +.contact-details { + max-width: 350px; +} + +/* Form Styles */ +form { + background-color: #444; + padding: 20px; + border-radius: 8px; +} + +.form-group { + margin-bottom: 15px; +} + +.form-group label { + display: block; + margin-bottom: 5px; +} + +.form-group input, +.form-group textarea { + width: 100%; + padding: 10px; + border-radius: 4px; + border: none; + margin-top: 5px; +} + +.form-group textarea { + resize: vertical; +} + +button[type="submit"] { + width: 100%; + padding: 10px; + border: none; + border-radius: 4px; + background-color: #008cba; + color: white; + cursor: pointer; + margin-top: 10px; +} + +button[type="submit"]:hover { + background-color: #007ba7; +} + +/* Contact Details and Social Links */ +.footer-section h4 { + margin-bottom: 10px; +} + +.footer-section p { + font-size: 0.9em; + margin-bottom: 5px; +} + +.social-links { + display: flex; + justify-content: center; + padding: 0; +} + +.social-icon { + display: inline-block; + width: 40px; + height: 40px; + background-color: #555; + border-radius: 50%; + text-align: center; + line-height: 40px; + margin-right: 10px; + transition: background-color 0.3s ease; +} + +.social-icon:hover { + background-color: #666; +} + +.social-icon i { + color: white; + font-size: 20px; + line-height: 40px; +} + +/* Responsive Design */ +@media (max-width: 768px) { + footer main { + flex-direction: column; + align-items: center; + } + + .contact-section, + .contact-details { + flex-basis: 100%; + max-width: 100%; + margin-right: 20px; + } + + .social-links { + justify-content: space-around; + width: 100%; + } } diff --git a/css/register.css b/css/register.css new file mode 100644 index 000000000..b08660093 --- /dev/null +++ b/css/register.css @@ -0,0 +1,132 @@ +body { + font-family: Arial, sans-serif; + background-color: #f2f2f2; +} +main{ + + background-image: url('../img/DoctorAppointment.jpg'); /* Update the relative path to where your image is stored */ + background-size: cover; + background-position: center; + position: relative; +} +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; +} +nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; +} +nav li img{ + padding-left: 20px; + height: 40px; + width: 40px; +} + nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; + } + nav a:hover { + color: #56bb8a; + } + +h2 { + text-align: center; + color: white; +} + +form { + max-width: 600px; + margin: 0 auto; + padding: 20px; + background-color: #ffffff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.form-group { + margin-bottom: 20px; +} + +label { + font-weight: bold; +} + +.form-control { + width: 100%; + padding: 8px; + border: 1px solid #cccccc; + border-radius: 3px; +} + +.btn { + padding: 10px 20px; + background-color: #4CAF50; + color: #ffffff; + border: none; + border-radius: 3px; + cursor: pointer; +} + +.btn:hover { + background-color: #45a049; +} +/* Styling for login and register buttons */ +.btn-login, .btn-register { + background-color: #56bb8a; + color: #fff; + padding: 10px 20px; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + transition: background-color 0.3s; + } + .btn-login:hover, .btn-register:hover { + background-color: #56bb8a; + } + /* Basic Styling for Footer */ +footer { + background-color: #56bb8a; + color: #333; + padding: 20px 0; + font-size: 14px; +} + +.footer-container { + display: flex; + justify-content: space-around; + align-items: start; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; +} + +.footer-section h4 { + color: #000; + margin-bottom: 10px; +} + +.footer-section ul, +.footer-section p { + list-style: none; + padding: 0; +} + +.footer-section ul li a, +.footer-section { + color: #555; + text-decoration: none; + transition: color 0.3s; +} + +.footer-section ul li a:hover, +.footer-section a:hover { + color: #007bff; +} diff --git a/css/statistics.css b/css/statistics.css new file mode 100644 index 000000000..2bc466fcf --- /dev/null +++ b/css/statistics.css @@ -0,0 +1,110 @@ +nav ul { + list-style: none; + display: flex; + justify-content: start; + background-color: #56bb8a; + padding: 10px; + gap: 20px; + } + nav li { + margin-right: 20px; + font-size: 20px; + font-family: 'Times New Roman', Times, serif; + } + nav li img{ + padding-left: 20px; + height: 40px; + width: 40px; + } + nav a { + text-decoration: none; + color: #fff; + font-weight: bold; + transition: color 0.3s; + } + nav a:hover { + color: #b9c0bc; + } + +/* Basic styling for the containers */ +main { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + padding: 20px; + background-color: #f4f4f4; +} + +.chart-section { + flex: 1 1 calc(50% - 40px); /* Adjust the calc() to fit two sections side by side */ + margin: 20px; /* This margin is taken into account in the calc() above */ + padding: 20px; + background-color: #ffffff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 8px; +} + +/* Add responsive design for smaller screens */ +@media (max-width: 768px) { + .chart-section { + flex-basis: 100%; + } +} + + +.chart-section h2 { + color: #333; /* Dark grey color for headings */ + margin-bottom: 15px; /* Space below the heading */ +} + +.insights { + font-size: 14px; /* Smaller font size for insight text */ + color: #666; /* Light grey color for the text */ + margin-top: 15px; /* Space above the insights text */ + text-align: left; /* Left-align the insights text */ +} + + + + +/* Basic Styling for Footer */ +footer { + background-color: #56bb8a; + color: #333; + padding: 20px 0; + font-size: 15px; + } + + .footer-container { + display: flex; + justify-content: space-around; + align-items: start; + max-width: 1200px; + margin: 0 auto; + padding: 0 20px; + } + + .footer-section h4 { + color: #000; + margin-bottom: 10px; + } + + .footer-section ul, + .footer-section p { + list-style: none; + padding: 0; + } + + .footer-section ul li a, + .footer-section { + color: #555; + text-decoration: none; + transition: color 0.3s; + } + + .footer-section ul li a:hover, + .footer-section a:hover { + color: #007bff; + } + + \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 000000000..a958afbf3 --- /dev/null +++ b/css/style.css @@ -0,0 +1,42 @@ +body { + padding-top: 50px; + padding-bottom: 20px; +} + +/* Set padding to keep content from hitting the edges */ +.body-content { + padding-left: 15px; + padding-right: 15px; +} + +/* Set width on the form input elements since they're 100% wide by default */ +input, +select, +textarea { + max-width: 280px; +} + +/* styles for validation helpers */ +.field-validation-error { + color: #b94a48; +} + +.field-validation-valid { + display: none; +} + +input.input-validation-error { + border: 1px solid #b94a48; +} + +input[type="checkbox"].input-validation-error { + border: 0 none; +} + +.validation-summary-errors { + color: #b94a48; +} + +.validation-summary-valid { + display: none; +} \ No newline at end of file diff --git a/img/DoctorAppointment.jpg b/img/DoctorAppointment.jpg new file mode 100644 index 000000000..130848791 Binary files /dev/null and b/img/DoctorAppointment.jpg differ diff --git a/img/ERD.png b/img/ERD.png new file mode 100644 index 000000000..a8a7dbb65 Binary files /dev/null and b/img/ERD.png differ diff --git a/img/appointment.jpeg b/img/appointment.jpeg new file mode 100644 index 000000000..491664ee7 Binary files /dev/null and b/img/appointment.jpeg differ diff --git a/img/appointment.png b/img/appointment.png new file mode 100644 index 000000000..d9831a9cc Binary files /dev/null and b/img/appointment.png differ diff --git a/img/bull1.jpg b/img/bull1.jpg new file mode 100644 index 000000000..cc356f4fa Binary files /dev/null and b/img/bull1.jpg differ diff --git a/img/bull2.jpg b/img/bull2.jpg new file mode 100644 index 000000000..8da0bec35 Binary files /dev/null and b/img/bull2.jpg differ diff --git a/img/bull3.jpg b/img/bull3.jpg new file mode 100644 index 000000000..d3443b7be Binary files /dev/null and b/img/bull3.jpg differ diff --git a/img/bull4.jpg b/img/bull4.jpg new file mode 100644 index 000000000..f36a8384c Binary files /dev/null and b/img/bull4.jpg differ diff --git a/img/dd.jpeg b/img/dd.jpeg new file mode 100644 index 000000000..1b032398a Binary files /dev/null and b/img/dd.jpeg differ diff --git a/img/finddoctors.png b/img/finddoctors.png new file mode 100644 index 000000000..6fb93c228 Binary files /dev/null and b/img/finddoctors.png differ diff --git a/img/git_Afrah.png b/img/git_Afrah.png new file mode 100644 index 000000000..abca654ce Binary files /dev/null and b/img/git_Afrah.png differ diff --git a/img/git_Raajitha.png b/img/git_Raajitha.png new file mode 100644 index 000000000..d838ca8d1 Binary files /dev/null and b/img/git_Raajitha.png differ diff --git a/img/git_Shwetha.png b/img/git_Shwetha.png new file mode 100644 index 000000000..25815fb20 Binary files /dev/null and b/img/git_Shwetha.png differ diff --git a/img/git_Srija.png b/img/git_Srija.png new file mode 100644 index 000000000..96c13e023 Binary files /dev/null and b/img/git_Srija.png differ diff --git a/img/git_short_log_output.png b/img/git_short_log_output.png new file mode 100644 index 000000000..7a30091ed Binary files /dev/null and b/img/git_short_log_output.png differ diff --git a/img/logo.png b/img/logo.png new file mode 100644 index 000000000..cea474886 Binary files /dev/null and b/img/logo.png differ diff --git a/img/statistics.png b/img/statistics.png new file mode 100644 index 000000000..9f627b3c3 Binary files /dev/null and b/img/statistics.png differ diff --git a/index.html b/index.html index fbae197cd..5a25b8803 100644 --- a/index.html +++ b/index.html @@ -1 +1,93 @@ - \ No newline at end of file + + + + + + Welcome to HealHive + + + + + + +
+

Welcome to HealHive

+

Where Care Comes First

+ Learn more +
+ +
+
+ Find Doctors +

Find Doctors

+

Get the best in health care with the help of our highly qualified doctors. Click the button below to get started.

+ Find Doctors +
+ +
+ Create Appointments +

Create Appointments

+

Get started! Your appointment is just a few clicks away.

+ Create now +
+ +
+ View Statistics +

View Statistics

+

Want to know how well we are doing? Check it out yourself.

+ Show Statistics +
+
+




+ + + diff --git a/js/appointmentsChart.js b/js/appointmentsChart.js new file mode 100644 index 000000000..19f2d444e --- /dev/null +++ b/js/appointmentsChart.js @@ -0,0 +1,29 @@ +// Example content for appointmentsChart.js +document.addEventListener('DOMContentLoaded', function() { + var ctx1 = document.getElementById('appointmentsPerDoctor').getContext('2d'); + var barChart = new Chart(ctx1, { + type: 'bar', + data: { + labels: ['Dr. Smith', 'Dr. Johnson', 'Dr. Lee'], + datasets: [{ + label: 'Appointments', + data: [10, 20, 30], + backgroundColor: ['red', 'blue', 'green'] + }] + } + }); + + var ctx2 = document.getElementById('appointmentsOverTime').getContext('2d'); + var lineChart = new Chart(ctx2, { + type: 'line', + data: { + labels: ['January', 'February', 'March'], + datasets: [{ + label: 'Monthly Appointments', + data: [50, 60, 70], + backgroundColor: 'rgba(54, 162, 235, 0.5)', + borderColor: 'blue' + }] + } + }); +}); diff --git a/js/bookappointment.js b/js/bookappointment.js new file mode 100644 index 000000000..0ebebf614 --- /dev/null +++ b/js/bookappointment.js @@ -0,0 +1,35 @@ +document.addEventListener('DOMContentLoaded', function() { + const form = document.getElementById('appointment-form'); + + form.addEventListener('submit', function(event) { + event.preventDefault(); // Prevent the default form submission + + // Validate the form + const patientName = form.querySelector('input[type="text"]').value; + const email = form.querySelector('input[type="email"]').value; + const department = form.querySelector('select').value; + const doctor = form.querySelectorAll('select')[1].value; // assuming the second select is for doctors + const date = form.querySelector('input[type="date"]').value; + const time = form.querySelector('input[type="time"]').value; + + if (!patientName || !email || department === "Select Department" || doctor === "Select Doctor" || !date || !time) { + alert('Please fill out all required fields.'); + return; + } + + // Check if the date and time are in the future + const appointmentDate = new Date(date + ' ' + time); + if (appointmentDate < new Date()) { + alert('Please select a future date and time for the appointment.'); + return; + } + + // TODO: Here you would normally send the data to a server + // For demo purposes, we'll just log to the console + console.log('Form submitted with:', { patientName, email, department, doctor, date, time }); + + // Show a confirmation message or reset the form + alert('Your appointment is booked!'); + form.reset(); // Reset the form fields + }); +}); diff --git a/js/login.js b/js/login.js new file mode 100644 index 000000000..9d6929f0e --- /dev/null +++ b/js/login.js @@ -0,0 +1,55 @@ +// Form validation +document.querySelector('form').addEventListener('submit', function(event) { + event.preventDefault(); // Prevent the form from submitting + // Get the form values + const username = document.getElementById('UserName').value.trim(); + const password = document.getElementById('Password').value.trim(); + + // Perform client-side validation + let isValid = true; + const usernameError = document.querySelector('#UserName + .field-validation-valid'); + const passwordError = document.querySelector('#Password + .field-validation-valid'); + + if (username === '') { + isValid = false; + usernameError.textContent = 'Please enter a username.'; + } else { + usernameError.textContent = ''; + } + + if (password === '') { + isValid = false; + passwordError.textContent = 'Please enter a password.'; + } else { + passwordError.textContent = ''; + } + + // If the form is valid, submit it + if (isValid) { + // Simulate successful login (replace this with your actual login logic) + const isLoggedIn = authenticateUser(username, password); + if (isLoggedIn) { + // Show an alert message + alert('You are logged in'); + // Redirect to the dashboard page after successful login + window.location.href = '../../Views/Account/Myaccount.html'; + } else { + alert('Invalid username or password'); + } + } + }); + + // Function to simulate user authentication (replace this with your actual authentication logic) + function authenticateUser(username, password) { + // For this example, we'll simply return true for any username and password + return true; + } + + // Show/hide password + const passwordInput = document.getElementById('Password'); + const showPasswordCheckbox = document.createElement('label'); + showPasswordCheckbox.innerHTML = ` Show Password`; + passwordInput.parentNode.appendChild(showPasswordCheckbox.firstChild); + showPasswordCheckbox.firstChild.addEventListener('change', function() { + passwordInput.type = this.checked ? 'text' : 'password'; + }); \ No newline at end of file diff --git a/js/main.js b/js/main.js index 848a3f230..cd27c5965 100644 --- a/js/main.js +++ b/js/main.js @@ -1,14 +1,15 @@ -/** - * Your JS code here - */ +function findDoctors() { + // Implement the logic to find doctors + alert("Redirecting to find doctors..."); +} -/** - * Sample code - */ -document.addEventListener('DOMContentLoaded', function() { - var ulElement = document.getElementById('links'); - var liElement = document.createElement('li'); - liElement.appendChild(document.createTextNode('created by main.js')); +function createAppointment() { + // Implement the logic to create an appointment + alert("Redirecting to appointment creation..."); +} + +function viewStatistics() { + // Implement the logic to view statistics + alert("Redirecting to view statistics..."); +} - ulElement.appendChild(liElement); -}); diff --git a/js/register.js b/js/register.js new file mode 100644 index 000000000..fe9b2b379 --- /dev/null +++ b/js/register.js @@ -0,0 +1,88 @@ +// Form validation +document.querySelector('#registerForm').addEventListener('submit', function(event) { + event.preventDefault(); // Prevent the form from submitting + // Get the form values + const name = document.getElementById('Name').value.trim(); + const username = document.getElementById('UserName').value.trim(); + const password = document.getElementById('Password').value.trim(); + const confirmPassword = document.getElementById('ConfirmPassword').value.trim(); + const birthDate = document.getElementById('BirthDate').value; + const sex = document.getElementById('Sex').value; + + // Perform client-side validation + let isValid = true; + const nameError = document.querySelector('#Name + .field-validation-valid'); + const usernameError = document.querySelector('#UserName + .field-validation-valid'); + const passwordError = document.querySelector('#Password + .field-validation-valid'); + const confirmPasswordError = document.querySelector('#ConfirmPassword + .field-validation-valid'); + const birthDateError = document.querySelector('#BirthDate + .field-validation-valid'); + const sexError = document.querySelector('#Sex + .field-validation-valid'); + + if (name === '') { + isValid = false; + nameError.textContent = 'Please enter your name.'; + } else { + nameError.textContent = ''; + } + + if (username === '') { + isValid = false; + usernameError.textContent = 'Please enter a username.'; + } else { + usernameError.textContent = ''; + } + + if (password === '') { + isValid = false; + passwordError.textContent = 'Please enter a password.'; + } else { + passwordError.textContent = ''; + } + + if (confirmPassword === '') { + isValid = false; + confirmPasswordError.textContent = 'Please confirm your password.'; + } else { + confirmPasswordError.textContent = ''; + } + + if (birthDate === '') { + isValid = false; + birthDateError.textContent = 'Please enter your birth date.'; + } else { + birthDateError.textContent = ''; + } + + if (sex === '') { + isValid = false; + sexError.textContent = 'Please select your sex.'; + } else { + sexError.textContent = ''; + } + + if (password !== confirmPassword) { + isValid = false; + confirmPasswordError.textContent = 'Passwords do not match.'; + } + + // If the form is valid, submit it + if (isValid) { + // Simulate successful registration (replace this with your actual registration logic) + const isRegistered = registerUser(name, username, password, birthDate, sex); + if (isRegistered) { + // Show an alert message + alert('You are registered successfully!'); + // Redirect to the login page after successful registration + window.location.href = '../Account/Login.html'; + } else { + alert('Registration failed. Please try again.'); + } + } + }); + + // Function to simulate user registration (replace this with your actual registration logic) + function registerUser(name, username, password, birthDate, sex) { + // Here you would typically make an AJAX request to your server to register the user + // For this example, we'll simply return true to simulate successful registration + return true; + } \ No newline at end of file diff --git a/sample.html b/sample.html deleted file mode 100644 index 6fa891b6c..000000000 --- a/sample.html +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - - Assignment - 3 - - - -
-
-

- Useful links -

- -
-
- - - - - - \ No newline at end of file