diff --git a/README.md b/README.md index 60d7653..aade9f3 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,37 @@ -# doct +# Project Name + hum dum + +## Milestones + +### Phase 1: Planning +- [x] Website layout +- [x] Website features +- [x] Website functionalities +- [x] Create project plan + +### Phase 2: Design +- [x] Design website layout +- [x] Design UI/UX +- [x] Review and approve design + +### Phase 3: Development +- [x] Set up development environment +- [ ] Implement core features + - [ ] Feature 0: Design the website + - [ ] Feature 1: User Authentication + - [ ] Feature 2: User Profile Management + - [ ] Feature 3: Doctor Profile Management + - [ ] Feature 4: Appointments Management +- [ ] Conduct code reviews + +### Phase 4: Testing +- [ ] Perform UI/UX testing +- [ ] Conduct functionality testing +- [ ] Execute user tests +- [ ] Fix bugs identified in testing + +### Phase 5: Deployment +- [ ] Set up production environment +- [ ] Deploy to production +- [ ] Verify deployment \ No newline at end of file diff --git a/appointments.html b/appointments.html new file mode 100644 index 0000000..b1a5d1c --- /dev/null +++ b/appointments.html @@ -0,0 +1,83 @@ + + + + + + My Appointments + + + + + + + + + + +
+

My Appointments

+
+ + SORT BY ▼ + + +















+ + + + \ No newline at end of file diff --git a/appointments_script.js b/appointments_script.js new file mode 100644 index 0000000..e69de29 diff --git a/images/appointmentdoc.jpg b/images/appointmentdoc.jpg new file mode 100644 index 0000000..3d5fbda Binary files /dev/null and b/images/appointmentdoc.jpg differ diff --git a/images/doc bg.jpg b/images/doc bg.jpg new file mode 100644 index 0000000..005d4e9 Binary files /dev/null and b/images/doc bg.jpg differ diff --git a/images/favicon.png b/images/favicon.png new file mode 100644 index 0000000..108a68b Binary files /dev/null and b/images/favicon.png differ diff --git a/images/icon.jpg b/images/icon.jpg new file mode 100644 index 0000000..02d0d45 Binary files /dev/null and b/images/icon.jpg differ diff --git a/index.html b/index.html index 3015291..6d7015d 100644 --- a/index.html +++ b/index.html @@ -3,41 +3,49 @@ - DOCTORMENT! + Doctorment + + + + +
-
- -
+

DOCTORMENT

+ +
+ +
+
-

Book your appointment in 2 mins!!

+

Book your appointment in 2 minutes!

-
+
+
+ +
+

How to book?

+

Booking a doctor is just 3 easy steps now!

+
+ +
+
+
+ +

SEARCH

+

Doctor / Specialization to match specific consultation needs.

+
+
+
+
+ +

BOOK

+

Request appointments based on slots, date and location.

+
+
+
+
+

CONFIRM

+

Avoid endless back and forth communication; add your details and that's it!

+
+
+
+ +
+














- - - + \ No newline at end of file diff --git a/login.html b/login.html index 3a1074b..67afaf3 100644 --- a/login.html +++ b/login.html @@ -5,37 +5,36 @@ Login Dashboard + -
+
+
+
LOGIN
-
- Avatar -
+ -
-

LOGIN

+
+ +
- -
- - + +
-
- - +
+
- -
-
- - Forgot password? - +
+ Don't have account? Sign Up Now +
+ +
+
+ + \ No newline at end of file diff --git a/pop.png b/pop.png new file mode 100644 index 0000000..108a68b Binary files /dev/null and b/pop.png differ diff --git a/register.html b/register.html new file mode 100644 index 0000000..5adeb8a --- /dev/null +++ b/register.html @@ -0,0 +1,50 @@ + + + + + + Register Dashboard + + + + +
+
+
Sign up
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+ +
+ Already a member? Login Now +
+ +
+
+
+ + + + diff --git a/styles.css b/styles.css index 291a4da..fd07e93 100644 --- a/styles.css +++ b/styles.css @@ -3,6 +3,7 @@ padding: 0; margin: 0; box-sizing: border-box; + } /*Universal CSS ends*/ @@ -80,10 +81,12 @@ body { #logo{ border-radius: 50%; display: block; - margin-left: auto; - margin-right: auto; - width: 220px; - height: 160px; + top: 0; + left: 0; + margin: 0; + position: absolute; + width: 100px; + height: 100px; opacity: 1; } #booking-text { @@ -91,16 +94,17 @@ body { display: block; align-items: center; text-align: center; - font-size: 5vh; - padding: 10px; - margin: 10px; + font-size: 40px; + padding: 15px; + margin: 20px; + letter-spacing: 2px; } #subheading { font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; font-display: block; align-items: center; text-align: center; - font-size: 3vh; + font-size: 40px; padding: 9px; margin: 10px; } @@ -128,7 +132,7 @@ body { border-radius: 6rem; color: rgb(0, 0, 0, 0.87); - font-size: 16px; + font-size: 20px; padding: 13px; padding-left: 45px; outline: none; @@ -182,7 +186,13 @@ body { 0 0 5px rgba(0, 0, 0, 0.05); } -/*cool gradient effect +.howToBookText, #threeSteps{ + padding-top: 60px; + padding-bottom: 35px; + text-align: center; + padding: 25px; +} + html, body { width: 100%; @@ -190,44 +200,45 @@ html, body { } body { - background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); + background-color: #bac3d7; background-size: 400% 400%; - animation: gradient 15s ease infinite; - } - - @keyframes gradient { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } } -*/ -/*Body CSS Ends*/ -html, body { - width: 100%; - height:100%; - } -body { - background: linear-gradient(-45deg,#93a5cf ,#e4efe9); - background-size: 400% 400%; - animation: gradient 15s ease infinite; - } - - @keyframes gradient { - 0% { - background-position: 0% 50%; - } - 50% { - background-position: 100% 50%; - } - 100% { - background-position: 0% 50%; - } - } +.box_feat { + text-align: center; + height: 182px; + width: 182px; + position: absolute; + border: 2px solid #202020; + padding: 30px; + border-radius: 100px; + background-color: rgb(255, 255, 255); +} + +.box_feat h3{ + font-size: 100%; + margin: 5px; +} + +#icon_1 { + margin: 20px 24%; +} + +#icon_2 { + margin: 20px 45%; +} + +#icon_3 { + margin: 20px 66%; +} + +#image { + display: block; + width: 900px; + height: 450px; + background-image: url(images/icon.jpg); + background-size: 100%; + margin-left: auto; + margin-right: auto; +} \ No newline at end of file diff --git a/styles.js b/styles.js new file mode 100644 index 0000000..faabeec --- /dev/null +++ b/styles.js @@ -0,0 +1,100 @@ +document.addEventListener('DOMContentLoaded', () => { + const body = document.body; + const imageCount = 60; // adjust the number of images + const imageSize = 25; // adjust the size of the images + const rotationRange = 180; // adjust the rotation range + + // Store positions of placed images + const positions = []; + + function isOverlapping(x, y) { + for (let i = 0; i < positions.length; i++) { + const pos = positions[i]; + const distance = Math.sqrt(Math.pow(x - pos.x, 2) + Math.pow(y - pos.y, 2)); + if (distance < imageSize) { + return true; + } + } + return false; + } + + for (let i = 0; i < imageCount; i++) { + const img = document.createElement('img'); + img.src = 'pop.png'; // replace with your small image file + img.className = 'image'; + + let x, y; + + // Try random positions until a non-overlapping one is found + do { + x = Math.floor(Math.random() * (body.offsetWidth - imageSize)); + y = Math.floor(Math.random() * (body.offsetHeight - imageSize)); + } while (isOverlapping(x, y)); + + // Store the position + positions.push({ x, y }); + + img.style.top = `${y}px`; + img.style.left = `${x}px`; + + // Random rotation + const rotation = Math.floor(Math.random() * rotationRange); + img.style.transform = `rotate(${rotation}deg)`; + + // Add the image to the body + body.appendChild(img); + } +}); + +document.addEventListener("DOMContentLoaded", function() { + var dropdownButton = document.querySelector('.sort-dropdown-button'); + var dropdownMenu = document.querySelector('.sort-dropdown-menu'); + + dropdownButton.addEventListener('click', function(event) { + event.preventDefault(); + dropdownMenu.style.display = (dropdownMenu.style.display === 'block') ? 'none' : 'block'; + }); + + window.addEventListener('click', function(event) { + if (!dropdownButton.contains(event.target) && !dropdownMenu.contains(event.target)) { + dropdownMenu.style.display = 'none'; + } + }); +}); + + +// document.addEventListener('DOMContentLoaded', () => { +// const body = document.body; +// const imageCount = 100; // adjust the number of images +// const imageSize = 25; // adjust the size of the images +// const rotationRange = 360; // adjust the rotation range + +// const cols = Math.ceil(Math.sqrt(imageCount * (body.offsetWidth / body.offsetHeight))); +// const rows = Math.ceil(imageCount / cols); + +// const horizontalSpacing = body.offsetWidth / cols; +// const verticalSpacing = body.offsetHeight / rows; + +// for (let i = 0; i < imageCount; i++) { +// const img = document.createElement('img'); +// img.src = 'pop.png'; // replace with your small image file +// img.className = 'image'; + +// const col = i % cols; +// const row = Math.floor(i / cols); + +// const x = col * horizontalSpacing + (horizontalSpacing - imageSize) / 2; +// const y = row * verticalSpacing + (verticalSpacing - imageSize) / 2; + +// img.style.top = `${y}px`; +// img.style.left = `${x}px`; + +// // Random rotation +// const rotation = Math.floor(Math.random() * rotationRange); +// img.style.transform = `rotate(${rotation}deg)`; + +// // Add the image to the body +// body.appendChild(img); +// } +// }); + diff --git a/styles_appointments.css b/styles_appointments.css new file mode 100644 index 0000000..822f50c --- /dev/null +++ b/styles_appointments.css @@ -0,0 +1,151 @@ +/*Universal CSS starts*/ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} +/*Universal CSS ends*/ + +/*Navigation bar CSS starts*/ +nav { + display: flex; + justify-content: right; + align-items: center; + padding: 20px; + cursor: pointer; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + font-size: 15px; + font-weight: 500; + padding: 10px; + color: #404040; +} + +nav a { + margin: 15px; +} + +#maps-id { + offset-position: 20px; + width: 35px; + height: 35px; + margin-right: 15px; + margin-top: 20px; +} + +#language { + background-color: transparent; + border: none; + font-size: large; + color: #404040; + border-radius: 2rem; + width: auto; + height: auto; + font-size: medium; + margin: 15px; +} + +#language:hover { + border: 1px solid #ddd; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.05), + 0 0 2px rgba(0, 0, 0, 0.05), + 0 0 3px rgba(0, 0, 0, 0.05), + 0 0 4px rgba(0, 0, 0, 0.05), + 0 0 5px rgba(0, 0, 0, 0.05), + 0 0 4px rgba(0, 0, 0, 0.05), + 0 0 5px rgba(0, 0, 0, 0.05); +} + +nav a:hover { + filter: drop-shadow(5px 5px 5px #d6d0d0); +} + +#maps-id:hover { + filter: drop-shadow(5px 5px 5px #d6d0d0); +} +/*Navigation bar CSS ends*/ + +/* Body CSS starts */ + +#big-text { + font-family: Arial, Helvetica, sans-serif; + margin-left: 3%; + font-size: 200%; + letter-spacing: 3px; + color: #404040; + word-spacing: 4px; +} + +div.scrollmenu { + background-color: #756d6d; + overflow: auto; + white-space: nowrap; + margin: 10px; +} + +div.scrollmenu a { + display: inline-block; + color: white; + text-align: center; + padding: 14px; + text-decoration: none; +} + +div.scrollmenu a:hover { + background-color: #777; +} + +#sort-by-text { + font-family: monospace; +} + +.sort-dropdown-button { + font-family: monospace; + display: inline-block; + background-color: #4CAF50; + color: white; + padding: 10px 20px; + text-decoration: none; + border-radius: 5px; + cursor: pointer; +} + +.sort-dropdown-menu { + display: none; + background-color: #e3c0e0; + width: 200px; + position: absolute; + z-index: 999; + margin-top: 5px; + border-radius: 5px; + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); +} + +.sort-dropdown-menu li { + list-style: none; +} + +.sort-dropdown-menu li a { + display: block; + color: #404040; + padding: 10px; + text-decoration: none; +} + +.sort-dropdown-menu li a:hover { + background-color: #ddd; +} + +body { + margin: 0; + position: relative; + height: 100vh; /* Ensure the body has height */ + overflow: hidden; /* Prevent scrollbars */ + background-color: rgb(255, 246, 234); +} + +.image { + position: absolute; + width: 25px; /* Ensure size matches imageSize */ + height: 25px; + opacity: 30%; +} diff --git a/styles_footer.css b/styles_footer.css new file mode 100644 index 0000000..29ca817 --- /dev/null +++ b/styles_footer.css @@ -0,0 +1,91 @@ +*{ + margin: 0; + padding: 0; + font-family: Arial, Helvetica, sans-serif; + font-size: 16px; + color: black; +} +footer{ + background: pink; + padding-top: 50px; +} +.container{ + width: 1140px; + margin: auto; + display: flex; + justify-content: center; +} +.footer-content{ + width: 33.3%; +} +h3{ + font-size: 28px; + margin-bottom: 15px; + text-align: center; +} +.footer-content p{ + width:190px; + margin: auto; + padding: 7px; +} +.footer-content ul{ + text-align: center; +} +.list{ + padding: 0; +} +.list li{ + width: auto; + text-align: center; + list-style-type:none; + padding: 7px; + position: relative; +} +.list li::before{ + content: ''; + position: absolute; + transform: translate(-50%,-50%); + left: 50%; + top: 100%; + width: 0; + height: 2px; + background: #f18930; + transition-duration: .5s; +} +.list li:hover::before{ + width: 70px; +} +.social-icons{ + text-align: center; + padding: 0; +} +.social-icons li{ + display: inline-block; + text-align: center; + padding: 5px; +} +.social-icons i{ + color: rgb(132, 25, 232); + font-size: 25px; +} +a{ + text-decoration: none; +} +a:hover{ + color: #f18930; +} +.social-icons i:hover{ + color: #f18930; +} +.bottom-bar{ + background: #f18930; + text-align: center; + padding: 10px 0; + margin-top: 50px; +} +.bottom-bar p{ + color: #343434; + margin: 0; + font-size: 16px; + padding: 7px; +} \ No newline at end of file diff --git a/styles_login.css b/styles_login.css index db8acce..38cb086 100644 --- a/styles_login.css +++ b/styles_login.css @@ -3,71 +3,86 @@ padding: 0; margin: 0; box-sizing: border-box; + font-family: 'Times New Roman', Times, serif; + + background-size: cover; + background-repeat: no-repeat; } -/*Universal CSS ends*/ - -/*border form*/ -#form -{ - border:3px solid +body{ + background: #e4e9f7; + background-image: url(/images/appointmentdoc.jpg); + } -/*inputs*/ -input[type=text], input[type=password] - { - width: 30%; - padding: 15px 20px; - margin: 8px 0; - display: block; - border: 1px solid #ccc; - box-sizing: border-box; - border-radius: 15rem; - } - /* inputs ends*/ - #imgcontainer - { - display: flex; - text-align:center; - margin: 24px 0 10px 0; - } - - #loginText - { - display: flex; - text-align: center; - font-family: Arial, Helvetica, sans-serif; - padding: 5px; - margin: 5px; - margin-left: 10px; - font-size: large; - } - - div.userPassContainer - { - display: block; - font-family: Arial, Helvetica, sans-serif; - padding: 5px; - margin: 5px; - margin-left: 10px; - } - #avatar +.container +{ + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; +} +.box{ + background: #f2f2f2; + display: flex; + flex-direction: column; + padding: 25px 25px; + border-radius: 20px; + box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), + 0 32px 64px -48px rgba(0, 0, 0, 0.5) +} +.form-box{ + width: 525px; + margin: 0px 50px; + height: 50vh; +} +.form-box header{ + font-size: 40px; + font-weight: 600; + padding-bottom: 10px; + border-bottom: 1px solid #e6e6e6; + margin-bottom: 10px; +} +.form-box form .field{ + display: flex; + margin-bottom: 10px; + flex-direction: column; +} + + .form-box form .input input { - width: 40%; - border-radius: 50%; + height: 45px; + width: 100%; + padding: 0 10px; + border-radius: 5px; + border: 1px solid #ccc; + outline: none; } - #button { + .button { background-color: #04AA6D; color: white; - padding: 14px 20px; - margin: 8px 0; - border: none; + padding: 0px 10px; + margin-top: 10px; + border: 0; + border-radius: 5px; + font-size: 15px; cursor: pointer; + transition: all .3s; + width: 100%; + height: 35px + } + .button:hover{ + opacity: 0.82; + } + .submit{ width: 100%; + } - span.psw { - float: right; - padding-top: 16px; + .links{ + margin-bottom: 15px; } + + + diff --git a/styles_register.css b/styles_register.css new file mode 100644 index 0000000..23a1881 --- /dev/null +++ b/styles_register.css @@ -0,0 +1,87 @@ +/*Universal CSS starts*/ +* { + padding: 0; + margin: 0; + box-sizing: border-box; + font-family: 'Times New Roman', Times, serif; + background-size: cover; + background-repeat: no-repeat; +} +body{ + background: #e4e9f7; + background-image: url(/images/appointmentdoc.jpg); +} + + +.container +{ + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 100vh; + height: auto; + padding: 20px; +} +.box { + width: 30%; + max-width: 800px; + margin: 0 auto; /* Center the box horizontally */ + background: #f2f2f2; + display: flex; + flex-direction: column; + padding: 25px 25px; + border-radius: 20px; + box-shadow: 0 0 128px 0 rgba(0, 0, 0, 0.1), + 0 32px 64px -48px rgba(0, 0, 0, 0.5); +} + +.form-box   +{ + +} +.form-box header{ + font-size: 45px; + font-weight: 600; + padding-bottom: 10px; + border-bottom: 1px solid #e6e6e6; + margin-bottom: 18px; +} +.form-box form .field{ + display: flex; + margin-bottom: 10px; + flex-direction: column; +} + + .form-box form .input input + { + height: 45px; + width: 100%; + padding: 0 10px; + border-radius: 5px; + border: 1px solid #ccc; + outline: none; + } + .button { + background-color: #5663f3; + color: white; + padding: 0px 10px; + margin-top: 10px; + border: 0; + border-radius: 5px; + font-size: 15px; + cursor: pointer; + transition: all .3s; + width: 100%; + height: 35px + } + .button:hover{ + opacity: 0.82; + } + .submit{ + width: 100%; + + } + .links{ + margin-bottom: 15px; + }