diff --git a/- fonts.txt b/- fonts.txt new file mode 100644 index 00000000..e645abd8 --- /dev/null +++ b/- fonts.txt @@ -0,0 +1,4 @@ +Font - + +Poppins +https://fonts.google.com/specimen/Poppins \ No newline at end of file diff --git a/.github/workflows/auto-label-issues.yml b/.github/workflows/auto-label-issues.yml new file mode 100644 index 00000000..71349c4c --- /dev/null +++ b/.github/workflows/auto-label-issues.yml @@ -0,0 +1,22 @@ +name: Auto-label on Any Issue + +on: + issues: + types: [opened] + +jobs: + auto-label: + runs-on: ubuntu-latest + steps: + - name: Add labels to any new issue + uses: actions/github-script@v4 + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + script: | + const labelsToAdd = ["gssoc"]; + await github.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: context.issue.number, + labels: labelsToAdd + }); \ No newline at end of file diff --git a/.github/workflows/greetings.yml b/.github/workflows/greetings.yml index 704db0e2..be872536 100644 --- a/.github/workflows/greetings.yml +++ b/.github/workflows/greetings.yml @@ -1,16 +1,22 @@ -name: Greetings +name: 'Greetings' -on: [pull_request_target, issues] +on: + issues: + types: [opened] + pull_request_target: + types: [opened] +permissions: + issues: write + pull-requests: write jobs: - greeting: + welcome: runs-on: ubuntu-latest - permissions: - issues: write - pull-requests: write steps: - - uses: actions/first-interaction@v1 - with: - repo-token: ${{ secrets.GITHUB_TOKEN }} - issue-message: "Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible." - pr-message: "Welcome to Our repository.🎊 Thank you so much for taking the time to point this out." + - uses: actions/checkout@v1 + - uses: EddieHubCommunity/gh-action-community/src/welcome@main + with: + github-token: ${{ secrets.GITHUB_TOKEN }} + issue-message: "Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible." + pr-message: "Great job, @${{ github.actor }}! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project.We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our [contributing guidelines](https://github.com/Anshika14528/RAPIDOC-HEALTHCARE-WEBSITE-/blob/main/CONTRIBUTING.md)" + \ No newline at end of file diff --git a/.vscode/settings.json b/.vscode/settings.json index 6f3a2913..d85aeb14 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,3 @@ { - "liveServer.settings.port": 5501 -} \ No newline at end of file + "liveServer.settings.port": 5502 +} diff --git a/Css-Files/aboutus.css b/Css-Files/aboutus.css new file mode 100644 index 00000000..190f8bfa --- /dev/null +++ b/Css-Files/aboutus.css @@ -0,0 +1,228 @@ +.about-us { + display: block; + margin: auto; + width: 52.5rem; + height: 100%; +} + +.about-us-heading { + text-align: center; + font-size: 40px; + margin-bottom: 5rem; + margin-top: 5rem; +} + +.about-service { + height: 360px; + width: 1200px; + margin-left: 150px; + margin-top: -40px; + display: flex; + justify-content: center; + align-items: center; +} + +.sec-1, +.sec-2 { + height: 360px; + width: 600px; +} + +.sec-2 { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 8px; +} + +.a-1, +.a-2, +.a-3 { + height: 94px; + width: 500px; + display: flex; + align-items: left; + justify-content: left; + background-color: #111111; + border-radius: 11px; +} + +.a-l, +.b-l, +.c-l { + height: 58px; + width: 58px; + border-radius: 50%; + margin-top: 17px; + margin-left: 15px; + border: 2px solid #2f7f81; +} + +.a-r, +.b-r { + height: 58px; + width: 380px; + margin-top: 19px; + margin-left: 20px; +} + +.c-r { + height: 58px; + width: 380px; + margin-left: 20px; + margin-top: 17px; +} + +.head-1, +.head-2 { + height: 28px; + width: 380px; +} + +.head-1 { + font-size: 18px; +} + +.head-2 { + font-size: 10px; + margin-top: 7px; +} +.h-icon { + margin-left: 10px; + margin-top: 11px; +} + +.q-icon { + margin-left: 7px; + margin-top: 7px; +} + +.a-icon { + margin-left: 14px; + margin-top: 15px; +} +.about-img { + height: 300px; + width: 520px; + margin-left: 40px; + margin-top: 30px; +} + +.about-us-block { + display: flex; + justify-content: space-evenly; + margin-top: 80px; +} + +.about-us-community, +.about-us-product, +.about-us-event, +.about-us-location { + display: flex; + flex-direction: column; + gap: 1rem; + width: 35%; + height: 18rem; + border: 1px solid rgba(206, 212, 218, 1); + border-radius: 8px; + margin-bottom: 21px; +} + +.about-us-community { + border: 2px solid #1c413b; +} + +.about-us-community:hover { + background: #1c413b; + color: white; +} + +.about-us-location { + border: 2px solid #1c413b; +} + +.about-us-location:hover { + background: #1c413b; + color: white; +} + +.about-us-product { + border: 2px solid #1c413b; +} + +.about-us-product:hover { + background: #1c413b; + color: white; +} + +.about-us-event { + border: 2px solid #1c413b; +} + +.about-us-event:hover { + background: #1c413b; + color: white; +} + +.about-us-blk-text { + font-size: 20px; + font-weight: 600; + line-height: 30px; + letter-spacing: 0em; + text-align: left; + margin-top: 1rem; +} + +.about-us-blk-para { + font-size: 16px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: left; + margin-left: 1rem; + margin-right: 1rem; +} + +@media only screen and (max-width: 768px) { + .about-us-block { + flex-direction: column; + justify-content: center; + align-items: center; + } + + .about-us-community, + .about-us-event, + .about-us-location, + .about-us-product { + width: 90%; + height: 100%; + padding: 0.5rem; + } +} + +@media only screen and (max-width: 1020px) { + .about-us-block { + flex-direction: column; + justify-content: center; + align-items: center; + } + + .about-us-community, + .about-us-event, + .about-us-location, + .about-us-product { + width: 90% !important; + height: 100%; + padding: 0.5rem; + } +} + +@media only screen and (max-width: 1250px) { + .about-us-community, + .about-us-event, + .about-us-location, + .about-us-product { + width: 45%; + } +} diff --git a/Css-Files/bloodstyle.css b/Css-Files/bloodstyle.css index e645409f..dc998bba 100644 --- a/Css-Files/bloodstyle.css +++ b/Css-Files/bloodstyle.css @@ -4,8 +4,9 @@ box-sizing: border-box; font-family: 'poppins',sans-serif; } -bodY{ +body{ display: flex; + flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; @@ -16,7 +17,7 @@ bodY{ text-decoration: none; margin-top: -18px; position: absolute; - left: 50%; + left: 45%; font-size: 30px; justify-content: center; align-items: center; @@ -28,7 +29,6 @@ margin-top: -18px; color: #fff; } #topbar1 { - background: #022a2d; height: 50px; font-size: 14px; transition: all 0.5s; @@ -39,26 +39,9 @@ margin-top: -18px; top: -40px; } - #topbar1 .contact-info a { - margin-top: -40px; - line-height: 1; - color: #fff; - transition: 0.3s; - } - #topbar1 .contact-info a:hover { - color: #3fbbc0; - } - #topbar1 .contact-info i { - color: #3fbbc0; - margin-top: -40px; - padding-right: 4px; - margin-left: 15px; - line-height: 0; - } - #topbar1 .contact-info i:first-child { - margin-left: 0; - } + + #topbar1 .social-links a { margin-top: -40px; @@ -67,6 +50,8 @@ margin-top: -18px; display: inline-block; line-height: 1px; transition: 0.3s; + transform: translateY(-100px); + } #topbar1 .social-links a:hover { @@ -225,7 +210,8 @@ justify-content: center; align-items: center; flex-direction: column; text-align: center; -gap: 15px +gap: 15px; +padding-top: 3rem; } .container .drop .content h2{ @@ -243,6 +229,7 @@ gap: 15px align-items: center; font-size: 2em; color: var(--clr); + padding-left: 1em; } .container .drop .content a{ position: relative; @@ -256,10 +243,10 @@ gap: 15px opacity: 0.75; transition: 0.5s; } -container .drop .content a:hover{ +.container .drop .content a:hover{ opacity: 1; } -container .drop .content a::before{ +.container .drop .content a::before{ content: ''; position: absolute; width: 65%; @@ -281,4 +268,400 @@ container .drop .content a::before{ font-size: 28px; line-height: 36px; } -} \ No newline at end of file +} +.ltr{ + color: black !important; +} + + a { + color: #55a5ea; + text-decoration: none; + cursor: pointer; + } + + a:hover { + color: #55a5ea; + text-decoration: none; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + font-family: "Raleway", sans-serif; + } + + .nav_link li { + padding: 5px 10px; + display: inline-block; + color: white; + } + + .nav_link li a { + transition: all 0.3s ease 0s; + color: white; + } + button { + position: relative; + border-radius: 10px; + border: 1px solid #4bb6b7; + background-color: #4bb6b7; + color: #fff; + font-size: 15px; + font-weight: 700; + margin: 8px; + padding: 8px 50px; + letter-spacing: 1px; + text-transform: capitalize; + transition: 0.3s ease-in-out; + cursor: pointer; + } + + .nav_link li a:hover { + color: #55a5ea; + + /* text-decoration: underline 2.5px rgb(3, 3, 94); */ + } + + .header_container { + /* background-color: #d9d9d9; */ + background-color: #022a2d ; + opacity: 0.9; + display: flex; + flex-direction: row; + /* justify-content: space-evenly; */ + justify-content: space-between; + align-items: center; + height: 70px; + margin: auto; + width: 100%; + } + + :root { + --text-color: #959DA5; + --footer-bg: #022a2d; + --footer-bottom-bg: #3fbcc051s; + --white: white; + --link-color: #959DA5; + --link-hover: #2F81CF; + --button-border: #848D97; + } + footer { + position: relative; + padding: 50px 0; + } + + #back-to-top-container { + position: fixed; + bottom: 25px; + right: 30px; + cursor: pointer; + z-index: 1000; + } + + .circle { + background-color: #00093d; + border-radius: 50%; + width: 35px; + height: 35px; + display: flex; + justify-content: center; + align-items: center; + transition: background-color 0.3s; + } + + #back-to-top { + width: 40px; + height: 40px; + fill: #4178c0; + color: #00093d; + transition: fill 0.3s; + } + + #back-to-top:hover { + fill: hsl(214, 50%, 60%); + } + + .back-to-top:hover { + background: #3fbcc0cd; + color: #fff; + } + + .back-to-top.active { + visibility: visible; + opacity: 1; + } + + .subscribebtn:hover { + border: 3px solid var(--white); + background-color: var(--footer-bg); + } + #footer { + background: #000; + padding: 0 0 20px 0; + color: #fff; + font-size: 14px; + width: 100%; + padding: 50px; + } + + #footer .footer-top { + background: #000; + padding: 20px 0 20px 0; + } + + #footer .footer-top .footer-info { + margin-bottom: 20px; + } + + #footer .footer-top .footer-info h3 { + font-size: 50px; + margin: 0 0 20px 0; + color: #57a6ea; + padding: 2px 0 2px 0; + line-height: 1; + } + + #footer .footer-top .footer-info p { + font-size: 14px; + line-height: 24px; + margin-bottom: 0; + font-family: "Roboto", sans-serif; + } + + #footer .footer-top .social-links a { + font-size: 18px; + display: inline-block; + background: #57a6ea; + color: #fff; + line-height: 1; + padding: 8px 0; + margin-right: 4px; + border-radius: 4px; + text-align: center; + width: 36px; + height: 36px; + transition: 0.3s; + } + footer { + bottom: 0; + background-color: #03393d; + width: 100%; + min-width: 20re; + bottom: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + + .footer-wrapper { + display: flex; + flex-direction: column; + max-width: 80rem; + width: 100%; + margin: 0 auto; + padding: 1rem; + } + + .footer-logo-columns { + list-style-type: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-grow: 4; + gap: 3rem 1rem; + } + + .footer-logo { + margin-bottom: 2rem; + width: 3rem; + } + + .footer-logo-column { + display: flex; + grid-area: footer-logo; + flex-direction: column; + min-width: 16rem; + flex-grow: 1; + padding-right: 0.5rem; + } + + .footer-logo-column p { + color: var(--text-color); + font-size: 0.95rem; + margin-bottom: 1.5rem; + } + + .footer-logo-column h3 { + color: var(--white); + margin-top: 0.25rem; + margin-bottom: 0.25rem; + } + + /* other columns */ + + .other-columns { + display: inline-grid; + grid-template-columns: repeat(2, 1fr); + width: 100%; + gap: 2rem 1rem; + padding-top: 2rem; + } + + .other-columns ul { + display: flex; + gap: 0.75rem; + list-style-type: none; + padding: 0; + margin: 0; + flex-direction: column; + font-weight: 600; + } + + .other-columns ul a { + color: var(--text-color); + text-decoration: none; + font-size: 0.85rem; + } + + .other-columns ul a:hover { + text-decoration: underline; + } + + .other-columns h3 { + color: var(--link-color); + margin-bottom: 1rem; + font-size: 1rem; + font-family: ui-monospace, monospace; + } + + .footer-logo svg { + fill: var(--white); + } + + /*? Footer bottom */ + .footer-bottom { + width: 100%; + color: var(--text-color); + background-color: var(--footer-bottom-bg); + } + + .footer-bottom-wrapper { + display: flex; + max-width: 80rem; + margin: 0 auto; + gap: 1rem; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + align-content: center; + padding: 1rem; + } + + .footer-bottom small { + font-size: 1rem; + display: inline; + white-space: nowrap; + } + + .footer-bottom-links { + list-style-type: none; + display: inline-flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + } + + .footer-bottom-links a { + color: var(--link-color); + text-decoration: none; + white-space: nowrap; + } + + .footer-bottom-links a:hover { + color: var(--link-hover); + text-decoration: underline; + } + + .footer-bottom>small { + font-size: 1rem; + margin: 0 auto; + width: 100% + } + + /*? socials */ + .social-wrapper { + display: flex; + gap: 0.5rem; + margin: 0 auto; + } + + .social-links { + display: inline-flex; + gap: 0.5rem; + align-items: center; + } + + .social-links img { + width: 1.5rem; + height: 1.5rem; + transition: all 0.2s ease-in-out; + } + + .social-links img:hover { + transform: scale(1.1); + } + + .social-links ul { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + list-style-type: none; + } + + .footer-bottom-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + } + + .subscribe-form{ + margin-top: 10px; + display: flex; + flex-direction: column; + gap: 10px; + } + .subscribe-form input{ + padding: 10px; + } + + @media (min-width: 600px) { + .other-columns { + display: grid; + grid-template-columns: repeat(4, 1fr); + } + + .footer-bottom-wrapper { + flex-direction: row; + } + .footer-bottom-wrapper small{ + font-size: smaller; + } + .footer-bottom-links { + margin-left: 1.5rem; + } + } + + @media (max-width: 800px) { + .footer-top { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 1rem 0.5rem 2rem 0.5rem; + } + } \ No newline at end of file diff --git a/Css-Files/doctor.css b/Css-Files/doctor.css index d81e3925..bbb6ddea 100644 --- a/Css-Files/doctor.css +++ b/Css-Files/doctor.css @@ -11,6 +11,9 @@ body{ justify-content: center; background-color: #000; } +.logo { + cursor: pointer; +} .slide-content{ margin: 0 40px; overflow: hidden; @@ -24,6 +27,102 @@ body{ padding: 40px 0; border-radius: 20px; } +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px; + background-color: #f8f8f8; +} + +.logo { + height: 40px; +} + +.header-buttons button { + margin-left: 10px; + padding: 5px 10px; +} + +.calendar { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #f3f3f3; + padding: 10px; + border-bottom: 1px solid #ccc; +} + +.nav-button { + background-color: #007bff; + color: #fff; + border: none; + padding: 5px 10px; + cursor: pointer; +} + +.month { + font-size: 20px; + font-weight: bold; +} + +.dates { + display: flex; + gap: 10px; +} + +.date1, .date2, .date3, .date4, .date5, .date6, .date7, .date8, .date9, .date10, .date11, .date12 { + background-color: #fff; + padding: 10px; + cursor: pointer; + border: 1px solid #ccc; +} + +.date:hover { + background-color: #007bff; + color: #fff; +} + +.schedule { + padding: 20px; +} + +.consultation { + margin-top: 20px; + padding: 20px; + border: 1px solid #ccc; + border-radius: 5px; + background-color: #f9f9f9; +} + +.consultation h3 { + margin: 0; +} + +.consultation p { + margin: 5px 0; +} + +.consult-button { + background-color: #007bff; + color: #fff; + border: none; + padding: 5px 10px; + cursor: pointer; + margin-top: 10px; + display: inline-block; +} + +.consult-button:hover { + background-color: #0056b3; +} + +footer { + display: flex; + justify-content: space-around; + padding: 10px; + background-color: #f8f8f8; +} .card{ border-radius: 25px; background-color: #FFf; @@ -101,6 +200,7 @@ transition: all 0.3s ease; .button:hover{ background: #02969bd5; } + .swiper-navBtn{ color: white; } diff --git a/Css-Files/news.css b/Css-Files/news.css new file mode 100644 index 00000000..f8bde885 --- /dev/null +++ b/Css-Files/news.css @@ -0,0 +1,220 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins',sans-serif; +} + + +body{ + /* font-family: "Open Sans", sans-serif; */ + color: #fff; + background-color: #000; + } + + a { + color: white; + text-decoration: none; + } + + a:hover { + color: #55a5ea; + text-decoration: none; + } + + .nav_link { + list-style: none; + } + + .nav_link li { + padding: 5px 20px; + display: inline-block; + color: white; + padding-top: 15px; + } + + .nav_link li a { + transition: all 0.3s ease 0s; + color: white; + text-decoration: none; + } + + .nav_link li a:hover { + color: #55a5ea; + text-decoration: underline 2.5px rgb(3, 3, 94); + } + + .header_container { + /* background-color: #d9d9d9; */ + background-color: #022a2d; + opacity: 0.9; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 60px; + margin: auto; + } + + .head { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + padding: 12px; + margin: 12px auto; +} + +.line { + width: 30vw; + border: 1px solid black; + margin: 7px; + background-color: black; + height: 4px; + border-radius: 24px; +} + +#newsBox { + display: flex; + justify-content: center; +align-items: center; + gap: 2rem; + flex-wrap: wrap; + +} + + +footer { + width: 100%; + background: linear-gradient(to right, #0f0f0f, #00093d); + color: #ffff; + line-height: 20px; + } + + .footer-title { + font-weight: 700; + font-size: 26px; + margin-bottom: 22px; + } + + .row { + width: 90%; + margin: auto; + display: flex; + flex-wrap: wrap; + align-items: flex-start; + } + + .col { + padding: 20px 0; + } + + .col h3 { + font-size: 25px; + } + + #col1 { + flex-basis: 40%; + margin-right: 40px; + } + + #col2 { + flex-basis: 20%; + margin-right: 10px; + font-size: 15px; + } + + #col3 { + flex-basis: 15%; + } + + #col4 { + flex-basis: 15%; + } + + .logo { + margin-bottom: 30px; + } + + .col h3 { + width: fit-content; + margin-bottom: 40px; + position: relative; + } + + #col2 p { + margin-bottom: 18px; + } + + #col2 p a { + font-size: 15px; + padding-top: 10px; + color: #fff; + } + + .email-id { + width: fit-content; + margin: 20px 0; + border-bottom: 1px solid #ccc; + } + + .quick-links-info div { + margin-bottom: 20px; + } + + .quick-links-info div a { + color: #fff; + font-size: 15px; + } + + .underline { + width: 100%; + height: 5px; + background: #767676; + border-radius: 3px; + position: absolute; + top: 25px; + left: 0; + overflow: hidden; + } + + .underline span { + width: 15px; + height: 100%; + background: #fff; + border-radius: 3px; + position: absolute; + top: 0; + left: 10px; + /* animation: moving 1s linear infinite; */ + } + + .news{ + border-radius: 1rem; + background-color: #fff; + padding: 2rem 4rem; + box-shadow: rgba(50,50,93,0.25) 0px 2px 5px -1px,rgba(0, 0,0,0.3) 0px 1px 3px -1px; + margin: 50px; + width: 60%; + margin-left: 250px; + padding: 20px; + } + .news h1{ + color: black; + font-size: 2.0rem; + margin-bottom: 0.3rem; + font-family: "Poppins", sans-serif; + } + .news p{ + color: black; + font-size: 1.1rem; + font-family: "Poppins", sans-serif; + } + .emoji{ + padding: 1rem 0; + width: 20%; + display: flex; + justify-content: space-between; + } + + \ No newline at end of file diff --git a/Css-Files/testimonial.css b/Css-Files/testimonial.css new file mode 100644 index 00000000..807a036b --- /dev/null +++ b/Css-Files/testimonial.css @@ -0,0 +1,245 @@ +.testimonals-item { + background-color: #ede6e6; + padding: 30px; + border-radius: 30px; + } + + .rating { + width: 180px; + } + + .section-title { + color: white !important; + font-size: 48px; + margin-bottom: 2rem; + } + + .rating__star { + font-size: 20px; + cursor: pointer; + color: #dabd18b2; + } + + .testimonals-item img { + max-width: 70px; + border-radius: 50%; + margin-right: 20px; + vertical-align: middle; + } + + /* Testimonals Section */ + + .testimonals-item { + background-color: #1c413b; + padding: 30px; + border-radius: 30px; + text-align: center; + } + + .testimonals-item img { + max-width: 80px; + border-radius: 50%; + margin-right: 20px; + vertical-align: middle; + } + + .testimonals-item .info { + display: flex; + align-items: center; + } + + .testimonals-item .name { + font-size: 24px; + text-transform: capitalize; + font-weight: 800; + color: white; + line-height: 1.2; + margin-top: 10px; + margin-bottom: 10px; + } + + .testimonals-item p { + margin-top: 20px; + color: white; + text-align: left; + } + + .testimonals-item .rating { + margin-top: 15px; + font-size: 14px; + text-align: left; + } + + .testimonals .swiper-pagination { + position: relative; + margin-top: 40px; + bottom: auto; + } + + .testimonals .swiper-pagination-bullet { + height: 12px; + width: 12px; + background-color: white !important; + } + + .testimonals-item .job { + text-transform: capitalize; + color: white; + text-align: center; + } + + .testimonals-item p { + margin-top: 20px; + color: white; + } + + .testimonals-item .rating { + margin-top: 15px; + font-size: 14px; + } + + .testimonals .swiper-pagination { + position: relative; + margin-top: 40px; + bottom: auto; + } + +#test { + + margin-left: 2rem; + margin-right: 2rem; + + .testimonals { + min-height: 100vh; + max-width: 80% !important; + display: flex; + align-items: center; + justify-content: center; + background-color: #198754; +} + +.slide-content { + margin: 0 40px; + overflow: hidden; + border-radius: 25px; +} +.card { + position: relative; + border-radius: 25px; + background-color: #1c413b; + height: 300px; + transition: transform 0.5s ease; +} + +.image-content { + display: flex; + flex-direction: column; + align-items: center; + padding: 25px 0; +} + +.card-image { + height: 150px; + width: 150px; + border-radius: 50%; + background: #1c413b; +} + +.card-image .card-img { + height: 100%; + width: 100%; + object-fit: cover; + border-radius: 50%; + border: 4px solid #1c413b; +} + +.swiper-navBtn { + color: white !important; + transition: color 0.3s ease; +} + +.swiper-navBtn:hover { + color: #198754; +} + +.swiper-navBtn::before, +.swiper-navBtn::after { + font-size: 35px; +} + +.swiper-button-next { + right: 0; +} + +.swiper-button-prev { + left: 0; +} + +.swiper-pagination-bullet { + background-color: white !important; + opacity: 1; +} + +.swiper-pagination-bullet-active { + background-color: grey !important; +} + +@media screen and (max-width: 768px) { + .slide-content { + margin: 0 10px; + } + .swiper-navBtn { + display: none; + } +} + +.card:hover .fronts { + opacity: 0; + transform: translateY(-100%); +} + +.card .fronts { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + backface-visibility: hidden; +} + +.backs { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + backface-visibility: hidden; + opacity: 0; + border: 2px solid #198754; + background-color: #1c413b; + border-radius: 50px; + font-size: 1em; + padding: 10px 40px; + transition: opacity 0.5s ease; +} + +.card:hover .backs { + opacity: 1; +} + +.rating i { + color: #ffc107; +} + +@media screen and (max-width: 700px) { + .backs { + font-size: 15px; + } +} + +@media screen and (min-width: 520px) and (max-width: 550px) { + .backs { + font-size: 13px; + } +} +} \ No newline at end of file diff --git a/Html-Files/Css-Files/Experiencestyle.css b/Html-Files/Css-Files/Experiencestyle.css new file mode 100644 index 00000000..799b31ab --- /dev/null +++ b/Html-Files/Css-Files/Experiencestyle.css @@ -0,0 +1,418 @@ +body { + font-family: "Open Sans", sans-serif; + color: #fff; + background-color: #000; + margin: 0; + padding-top: 10px; + } + a { + color: #55a5ea; + text-decoration: none; + } + h1{ + color: #4bb6b7; + font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; + } + a:hover { + color: #55a5ea; + text-decoration: none; + } + .nav_link li { + padding: 5px 20px; + display: inline-block; + color: white; + } + + .nav_link li a { + transition: all 0.3s ease 0s; + color: white; + } + button { + position: relative; + border-radius: 10px; + border: 1px solid #4bb6b7; + background-color: #4bb6b7; + color: #fff; + font-size: 15px; + font-weight: 700; + margin: 8px; + padding: 8px 50px; + letter-spacing: 1px; + text-transform: capitalize; + transition: 0.3s ease-in-out; + } + + .nav_link li a:hover { + color: #55a5ea; + } +/*Preloader CSS*/ +.pre{ + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + transition: opacity 2s ease-out, visibility 2s ease-out; + opacity: 1; + visibility: visible; + z-index: 9999; + } + + .pre--hidden { + opacity: 0; + visibility: hidden; + } + + .loader { + display: block; + position: relative; + width: 150px; + height: 150px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #55a5ea; + animation: spin 3s linear infinite; + } + + .loader:before { + content: ""; + position: absolute; + top: 5px; + left: 5px; + right: 5px; + bottom: 5px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #3fbcc0c6; + animation: spin 3s linear infinite; + } + + .loader:after { + content: ""; + position: absolute; + top: 15px; + left: 15px; + right: 15px; + bottom: 15px; + border-radius: 50%; + border: 3px solid transparent; + border-top-color: #fff; + animation: spin 1.5s linear infinite; + } + + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + + + .loader--hidden{ + opacity: 0; + visibility: hidden; + } +.h{ + margin-top: 20px; + margin-bottom: 20px; +} + .header_container { + background-color: #022a2d; + opacity: 0.9; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + height: 60px; + margin: auto; + } + *,*::after,*::before{ + /*padding: 0; + margin: 0;*/ + box-sizing: border-box; + } + +header { +display: flex; +justify-content: space-between; +align-items: center; +margin-bottom: 20px; +} + +.filter-sort { +display: flex; +align-items: center; +} + +.filter-sort label { +margin-right: 10px; +} + +.filter-sort select, +.filter-sort input[type="range"] { +margin-right: 20px; +} + +#doctor-list { +list-style-type: none; +padding: 0; +} + +#doctor-list li { +border: 1px solid #ccc; +padding: 10px; +margin-bottom: 10px; +display: flex; +justify-content: space-between; +align-items: center; +} +:root { + --text-color: #959DA5; + --footer-bg: #3fbcc051; + --footer-bottom-bg: #3fbcc051s; + --white: white; + --link-color: #959DA5; + --link-hover: #2F81CF; + --button-border: #848D97; + } + + .subscribe-btn { + display: flex; + align-items: center; + justify-content: center; + max-width: 8rem; + color: var(--white); + text-decoration: none; + font-size: 1rem; + height: 3rem; + font-weight: 700; + white-space: nowrap; + vertical-align: middle; + user-select: none; + border: 1px solid var(--link-color); + border-radius: 0.375rem; + transition: all 0.2s ease-in-out; + } + + .subscribe-btn:hover { + border: 3px solid var(--white); + } + + /*? footer containers */ + footer { + bottom: 0; + background-color: var(--footer-bg); + width: 100%; + min-width: 20re; + bottom: 0; + display: flex; + align-items: center; + flex-direction: column; + } + + + .footer-wrapper { + display: flex; + flex-direction: column; + max-width: 80rem; + width: 100%; + margin: 0 auto; + padding: 1rem; + } + + .footer-logo-columns { + list-style-type: none; + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex-grow: 4; + gap: 3rem 1rem; + } + + .footer-logo { + margin-bottom: 2rem; + width: 3rem; + } + + .footer-logo-column { + display: flex; + grid-area: footer-logo; + flex-direction: column; + min-width: 16rem; + flex-grow: 1; + padding-right: 0.5rem; + } + + .footer-logo-column p { + color: var(--text-color); + font-size: 0.95rem; + margin-bottom: 1.5rem; + } + + .footer-logo-column h3 { + color: var(--white); + margin-top: 0.25rem; + margin-bottom: 0.25rem; + } + + /* other columns */ + + .other-columns { + display: inline-grid; + grid-template-columns: repeat(2, 1fr); + width: 100%; + gap: 2rem 1rem; + padding-top: 2rem; + } + + .other-columns ul { + display: flex; + gap: 0.75rem; + list-style-type: none; + padding: 0; + margin: 0; + flex-direction: column; + font-weight: 600; + } + + .other-columns ul a { + color: var(--text-color); + text-decoration: none; + font-size: 0.85rem; + } + + .other-columns ul a:hover { + text-decoration: underline; + } + + .other-columns h3 { + color: var(--link-color); + margin-bottom: 1rem; + font-size: 1rem; + font-family: ui-monospace, monospace; + } + + .footer-logo svg { + fill: var(--white); + } + + /*? Footer bottom */ + .footer-bottom { + width: 100%; + color: var(--text-color); + background-color: var(--footer-bottom-bg); + } + + .footer-bottom-wrapper { + display: flex; + max-width: 80rem; + margin: 0 auto; + gap: 1rem; + width: 100%; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + align-content: center; + padding: 1rem; + } + + .footer-bottom small { + font-size: 1rem; + display: inline; + white-space: nowrap; + } + + .footer-bottom-links { + list-style-type: none; + display: inline-flex; + flex-wrap: wrap; + justify-content: center; + gap: 1rem; + } + + .footer-bottom-links a { + color: var(--link-color); + text-decoration: none; + white-space: nowrap; + } + + .footer-bottom-links a:hover { + color: var(--link-hover); + text-decoration: underline; + } + + .footer-bottom>small { + font-size: 1rem; + margin: 0 auto; + width: 100% + } + + /*? socials */ + .social-wrapper { + display: flex; + gap: 0.5rem; + margin: 0 auto; + } + + .social-links { + display: inline-flex; + gap: 0.5rem; + align-items: center; + } + + .social-links img { + width: 1.5rem; + height: 1.5rem; + transition: all 0.2s ease-in-out; + } + + .social-links img:hover { + transform: scale(1.1); + } + + .social-links ul { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + list-style-type: none; + } + + .footer-bottom-wrapper { + display: flex; + flex-direction: column; + justify-content: center; + } + + + + @media (min-width: 600px) { + .other-columns { + display: grid; + grid-template-columns: repeat(4, 1fr); + } + + .footer-bottom-wrapper { + flex-direction: row; + } + .footer-bottom-wrapper small{ + font-size: smaller; + } + .footer-bottom-links { + margin-left: 1.5rem; + } + } + + @media (max-width: 800px) { + .footer-top { + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + padding: 1rem 0.5rem 2rem 0.5rem; + } + } \ No newline at end of file diff --git a/Html-Files/Css-Files/styles.css b/Html-Files/Css-Files/styles.css index f0803764..41a187f1 100644 --- a/Html-Files/Css-Files/styles.css +++ b/Html-Files/Css-Files/styles.css @@ -1,56 +1,53 @@ -/* @import url('http://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap'); -* -{ +* { margin: 0; padding: 0; box-sizing: border-box; - font-family: 'Poppins',sans-serif; + font-family: 'Poppins', sans-serif; } -section -{ +section { display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #095a55; - + position: relative; } -section::before -{ + +section::before { content: ''; position: absolute; - top: 10; + top: 0; left: 0; width: 50%; height: 100%; - background: #fff38e; + background: #4bb6b7; } .nav_link { list-style: none; - } - - .nav_link li { +} + +.nav_link li { padding: 5px 20px; display: inline-block; color: white; - } - - .nav_link li a { +} + +.nav_link li a { transition: all 0.3s ease 0s; color: white; text-decoration: none; - } - - .nav_link li a:hover { +} + +.nav_link li a:hover { color: #55a5ea; text-decoration: underline 2.5px rgb(3, 3, 94); - } - - .header_container { - /* background-color: #d9d9d9; */ +} + +.header_container { background-color: #022a2d; opacity: 0.9; display: flex; @@ -58,11 +55,11 @@ section::before justify-content: space-between; align-items: center; height: 60px; - margin: auto; - } + width: 100%; + padding: 0 20px; +} -.container -{ +.container { position: relative; min-width: 1100px; min-height: 550px; @@ -70,11 +67,9 @@ section::before z-index: 1000; /* border-radius: 22px; */ /* background-color: #fff; */ - } -.container .contactInfo -{ +.container .contactInfo { position: absolute; top: 40px; width: 350px; @@ -83,29 +78,23 @@ section::before z-index: 1; padding: 40px; display: flex; - justify-content: center; flex-direction: column; justify-content: space-between; box-shadow: 0 20px 25px rgba(0,0,0,0.15); border-radius: 22px; } -.container .contactInfo h2 -{ +.container .contactInfo h2 { color: #fff; - font-size:24px; + font-size: 24px; font-weight: 500; } -.container .contactInfo ul.info -{ - position: relative; +.container .contactInfo ul.info { margin: 20px 0; } -.container .contactInfo ul.info li -{ - position: relative; +.container .contactInfo ul.info li { list-style: none; display: flex; margin: 20px 0; @@ -113,37 +102,28 @@ section::before align-items: flex-start; } -.container .contactInfo ul.info li span:nth-child(1) -{ +.container .contactInfo ul.info li span:nth-child(1) { width: 30px; min-width: 30px; } -/* for gmail */ -.container .contactInfo ul.info li span a -{ +.container .contactInfo ul.info li span a { color: #fff; text-decoration: none; - width: 30px; - min-width: 30px; - } -.container .contactInfo ul.info li span:nth-child(1) img -{ +.container .contactInfo ul.info li span:nth-child(1) img { max-width: 100%; filter: invert(1); } -.container .contactInfo ul.info li span:nth-child(2) -{ +.container .contactInfo ul.info li span:nth-child(2) { color: #fff; margin-left: 10px; font-weight: 300; } .container .contactInfo ul.sci { - position: relative; display: flex; } @@ -158,61 +138,50 @@ section::before .container .contactInfo ul.sci li a img { filter: invert(1); - background-color: transparent; - width: 25px; /* Adjust the width as needed */ - height: 25px; /* Adjust the height as needed */ + width: 25px; + height: 25px; } - - -.container .contactForm -{ +.container .contactForm { position: absolute; padding: 70px 50px; padding-left: 250px; margin-left: 150px; - width: calc(100% - 150px); + width: calc(100% - 300px); height: 100%; background: #fff; box-shadow: 0 50px 50px rgba(0,0,0,0.25); border-radius: 22px; } -.container .contactForm h2 -{ +.container .contactForm h2 { color: #0f3959; font-size: 24px; font-weight: 500; } -.container .contactForm .formBox -{ - position: relative; +.container .contactForm .formBox { display: flex; justify-content: space-between; flex-wrap: wrap; padding-top: 30px; } -.container .contactForm .formBox .inputBox -{ - position: relative; +.container .contactForm .formBox .inputBox { margin-bottom: 35px; + width: 100%; } -.container .contactForm .formBox .inputBox.w50 -{ +.container .contactForm .formBox .inputBox.w50 { width: 47%; } -.container .contactForm .formBox .inputBox.w100 -{ +.container .contactForm .formBox .inputBox.w100 { width: 100%; } .container .contactForm .formBox .inputBox input, -.container .contactForm .formBox .inputBox textarea -{ +.container .contactForm .formBox .inputBox textarea { width: 100%; resize: none; padding: 5px 0; @@ -224,13 +193,11 @@ section::before border-bottom: 1px solid #777; } -.container .contactForm .formBox .inputBox textarea -{ +.container .contactForm .formBox .inputBox textarea { height: 120px; } -.container .contactForm .formBox .inputBox span -{ +.container .contactForm .formBox .inputBox span { position: absolute; left: 0; padding: 5px 0; @@ -243,20 +210,16 @@ section::before .container .contactForm .formBox .inputBox input:focus ~ span, .container .contactForm .formBox .inputBox input:valid ~ span, .container .contactForm .formBox .inputBox textarea:focus ~ span, -.container .contactForm .formBox .inputBox textarea:valid ~ span -{ +.container .contactForm .formBox .inputBox textarea:valid ~ span { transform: translateY(-20px); - font-size: 12px; + font-size: 12px; font-weight: 400; letter-spacing: 1px; color: #095a55; font-weight: 500; } -/* Css for the submit button */ -.container .contactForm .formBox .inputBox input[type="submit"] -{ - position: relative; +.container .contactForm .formBox .inputBox input[type="submit"] { cursor: pointer; background: #095a55; border-radius: 20px; @@ -264,35 +227,30 @@ section::before border: none; max-width: 150px; padding: 12px; - + margin-left: 170px; } -.container .contactForm .formBox .inputBox input[type="submit"]:hover{ +.container .contactForm .formBox .inputBox input[type="submit"]:hover { background: #0d9480; } -/* make the form responsive */ -@media (max-width: 1200px) -{ - .container - { +/* Responsive adjustments */ +@media (max-width: 1200px) { + .container { width: 90%; - min-width: auto; margin: 20px; box-shadow: 0 20px 50px rgba(0,0,0,0.2); } - .container .contactInfo - { + .container .contactInfo { top: 0; height: 550px; position: relative; box-shadow: none; - border-radius: 0px; + border-radius: 0; } - .container .contactForm - { + .container .contactForm { position: relative; width: calc(100% - 350px); padding-left: 0; @@ -300,75 +258,62 @@ section::before padding: 40px; height: 550px; box-shadow: none; - border-radius: 0px; + border-radius: 0; } } -@media (max-width: 991px) -{ - section - { +@media (max-width: 991px) { + section { display: flex; justify-content: center; align-items: center; min-height: 100vh; - background: #fff38e; + background: #4bb6b7; } - section::before - { + section::before { display: none; } - .container - { - display: flex; + .container { flex-direction: column-reverse; } - .container .contactForm - { + .container .contactForm { width: 100%; height: auto; - border-radius: 0px; + border-radius: 0; } - .container .contactInfo - { + .container .contactInfo { width: 100%; height: auto; flex-direction: row; - border-radius: 0px; + border-radius: 0; } - .container .contactInfo ul.sci - { - position: relative; - display: flex; - justify-content: center; - align-items: center; + + .container .contactInfo ul.sci { + justify-content: center; + align-items: center; } } -@media (max-width: 600px) -{ - .container .contactForm - { +@media (max-width: 600px) { + .container .contactForm { padding: 25px; } - .container .contactInfo{ + .container .contactInfo { padding: 25px; flex-direction: column; align-items: flex-start; } - .container .contactInfo ul.sci - { + .container .contactInfo ul.sci { margin-top: 40px; } - .container .contactForm .formBox .inputBox.w50 - { + .container .contactForm .formBox .inputBox.w50 { width: 100%; } } diff --git a/Html-Files/Doctor Experience.html b/Html-Files/Doctor Experience.html new file mode 100644 index 00000000..0a4f41e7 --- /dev/null +++ b/Html-Files/Doctor Experience.html @@ -0,0 +1,495 @@ + + + + + + Find a Doctor + + + + + + + +
+
+
+
+
+ +
+ +
+ +
+

Find a Doctor

+
+ + + + + + 1000 + + +
+
+ +
+ +
+ + + + + + diff --git a/Html-Files/blood.html b/Html-Files/blood.html index bb82c507..0ccbded8 100644 --- a/Html-Files/blood.html +++ b/Html-Files/blood.html @@ -2,6 +2,7 @@ + @@ -10,29 +11,41 @@ - - + + + + + Blood Bank + -
- -
-
- rapidoc@mail.com -
- -
-
+
+
+ + + + +
+ + + +
@@ -107,6 +120,181 @@

AB-

+ + + + + +
+
+ + + +
+
+ + + + + @@ -114,5 +302,10 @@

AB-

+ + + + + \ No newline at end of file diff --git a/Html-Files/cardio.html b/Html-Files/cardio.html new file mode 100644 index 00000000..949d13df --- /dev/null +++ b/Html-Files/cardio.html @@ -0,0 +1,662 @@ + + + + + + + + + + + + + Doctors + + + + + + + + + + +
+
+
+ +
+
+ +
+ + +
+
+
+ +
+ +
+
+
+

Dr. Vikas Chopra

+

Cardiologist

+ + +
+
+ MAY + +
+ 1 + 2 + 3 + 4 + 5 + 6 + 7 +
+
+ +
+ +
+
+ + + + + +
+
+
+
+ +
+ + +
+
+
+ +
+ +
+
+
+

Dr. Ajay Aggarwal

+

Cardiologist

+ + +
+
+ MAY + +
+ 11 + 12 + 13 + 14 + 15 + 16 + 17 +
+
+ +
+ +
+
+ + + + + +
+
+
+
+ +
+ + +
+
+
+ +
+ +
+
+
+

Dr. Rajeev Kumar Rajput

+

Cardiologist

+ + +
+
+ MAY + +
+ 18 + 19 + 20 + 21 + 22 + 23 + 24 +
+
+ +
+ +
+
+ + + + + +
+
+
+
+ +
+ + +
+
+
+ +
+ +
+
+
+

Dr. Nityanand Tripathi

+

Cardiologist

+ + +
+
+ MAY + +
+ 1 + 2 + 3 + 4 + 5 + 6 + 7 +
+
+ +
+ +
+
+ + + + + +
+
+ + + + + +
+
+
+
+
+
+ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Html-Files/contact.html b/Html-Files/contact.html index 17b71d05..bd0ce523 100644 --- a/Html-Files/contact.html +++ b/Html-Files/contact.html @@ -1,4 +1,4 @@ - + + rapidoc@mail.com
  • @@ -77,7 +77,7 @@

    Contact Info

    -
    +

    RapiDoc Query

    @@ -111,4 +111,351 @@

    RapiDoc Query

    - + --> + + + + + + Contact Us + + + + + + + +
    +
    + +
    +
    +

    RapiDoc

    +
    + +
    +
    +
    +
    +
    +

    Contact Info

    + +
    +
      +
      • + +
      • +
      • +
      • + + +
    +
    +
    +

    RapiDoc Query

    +
    +
    + + First Name +
    +
    + + Last Name +
    +
    + + Email Address +
    +
    + + Mobile Number +
    +
    + + Write your message here... +
    +
    + +
    +
    +
    +
    +
    + + + \ No newline at end of file diff --git a/Html-Files/derma.html b/Html-Files/derma.html new file mode 100644 index 00000000..b5247cd1 --- /dev/null +++ b/Html-Files/derma.html @@ -0,0 +1,715 @@ + + + + + + + + + + + + + Doctors + + + + + + + + + + +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    +
    +

    Dr. Soni Gupta

    +

    Dermatologist

    + + +
    +
    + MAY + +
    + 21 + 22 + 23 + 24 + 25 + 26 + 27 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    +
    +

    Dr. Deepti Shrivastava

    +

    Dermatologist

    + + +
    +
    + MAY + +
    + 8 + 9 + 10 + 11 + 12 + 13 + 14 +
    +
    + +
    + +
    +
    + + + + + +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    +
    +

    Dr. Manisha Chopra

    +

    Dermatologist

    + + +
    +
    + MAY + +
    + 10 + 12 + 23 + 24 + 25 + 26 + 27 +
    +
    + +
    + +
    +
    + + + + + +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    +
    +

    Dr. Pradeep Bansal

    +

    Dermatologist

    + + +
    +
    + MAY + +
    + 13 + 14 + 15 + 16 + 17 + 18 + 19 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + + + +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Html-Files/doc.html b/Html-Files/doc.html index 8d417803..3660e877 100644 --- a/Html-Files/doc.html +++ b/Html-Files/doc.html @@ -28,10 +28,9 @@ -
    @@ -46,186 +45,1477 @@

    RapiDoc

    - + -
    -
    +
    +
    +
    + +
    + + +
    +
    - +

    Dr. Satbir Singh

    Cardiologist

    + +
    +
    + MAY + +
    + 20 + 21 + 22 + 23 + 24 + 25 + 26 +
    +
    + +
    +
    +
    + + + + + +
    +
    +
    + +
    + + +
    +
    - +

    Dr. Vikas Chopra

    Cardiologist

    + +
    +
    + MAY + +
    + 1 + 2 + 3 + 4 + 5 + 6 + 7 +
    +
    + +
    +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Ajay Aggarwal

    Cardiologist

    + +
    +
    + MAY + +
    + 11 + 12 + 13 + 14 + 15 + 16 + 17 +
    +
    + +
    +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Rajeev Kumar Rajput

    Cardiologist

    + +
    +
    + MAY + +
    + 18 + 19 + 20 + 21 + 22 + 23 + 24 +
    + +
    + +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Nityanand Tripathi

    Cardiologist

    + +
    +
    + MAY + +
    + 1 + 2 + 3 + 4 + 5 + 6 + 7 +
    + +
    + +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Soni Gupta

    Dermatologist

    +
    +
    + MAY + +
    + 21 + 22 + 23 + 24 + 25 + 26 + 27 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Ranjan Upadhyay

    Dermatologist

    +
    +
    + MAY + +
    + 1 + 2 + 3 + 4 + 15 + 26 + 27 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Deepti Shrivastava

    Dermatologist

    +
    +
    + MAY + +
    + 8 + 9 + 10 + 11 + 12 + 13 + 14 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Manisha Chopra

    Dermatologist

    +
    +
    + MAY + +
    + 10 + 12 + 23 + 24 + 25 + 26 + 27 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Pradeep Bansal

    Dermatologist

    +
    +
    + MAY + +
    + 13 + 14 + 15 + 16 + 17 + 18 + 19 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Jayant Jaswal

    Ear-nose-throat (ENT)

    + +
    +
    + MAY + +
    + 1 + 2 + 3 + 4 + 5 + 6 + 7 +
    +
    + +
    +
    +
    + + + + + +
    +
    + +
    + + +
    +
    - +

    Dr. Vibhuti

    Ear-nose-throat (ENT)

    + +
    +
    + MAY + +
    + 21 + 22 + 23 + 24 + 29 + 30 + 31 +
    + +
    + +
    +
    + + + + + +
    - +
    -
    + - - - - - + + + + + + + + + + + + + + + diff --git a/Html-Files/ent.html b/Html-Files/ent.html new file mode 100644 index 00000000..8ab2e6b1 --- /dev/null +++ b/Html-Files/ent.html @@ -0,0 +1,298 @@ + + + + + + + + + + + + + Doctors + + + + + + + + + + +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    +
    +

    Dr. Jayant Jaswal

    +

    Ear-nose-throat (ENT)

    + + +
    +
    + MAY + +
    + 1 + 2 + 3 + 4 + 5 + 6 + 7 +
    +
    + +
    + +
    +
    + + + + + +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    +
    +

    Dr. Vibhuti

    +

    Ear-nose-throat (ENT)

    + + +
    +
    + MAY + +
    + 21 + 22 + 23 + 24 + 29 + 30 + 31 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + +
    +
    +
    +
    +
    +
    + + + + + + + + + + + + + \ No newline at end of file diff --git a/Html-Files/error.css b/Html-Files/error.css new file mode 100644 index 00000000..4302c6d3 --- /dev/null +++ b/Html-Files/error.css @@ -0,0 +1,118 @@ +/* Baseline styles */ +body { + font-family: sans-serif; + margin: 0; + padding: 0; + background-color: #f2f2f2; + } + +header { + text-align: center; + } + + .container { + max-width: 1000px; + margin: 0 auto; + padding: 20px; + } + + /* Header styles */ + header { + background-color: #fff; + padding: 10px 0; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + } + + .logo { + font-size: 24px; + font-weight: bold; + color: #095a55; + } + + /* Main content styles */ + main { + padding-top: 100px; + padding-bottom: 50px; + } + + .error { + text-align: center; + padding: 40px; + border-radius: 5px; + background-color: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + animation: entrance 0.5s ease-in-out forwards; + border: 1px solid #ddd; /* Remove border for two-color scheme */ + } + + .error h1 { + font-size: 100px; + color: #095a55; + margin-bottom: 20px; + } + + .error h2 { + font-size: 24px; + color: #333; /* Can be adjusted to black for stronger contrast */ + margin-bottom: 15px; + } + + .error p { + font-size: 16px; + color: #444; /* Can be adjusted to black for stronger contrast */ + line-height: 1.5; + } + + .btn { + display: inline-block; + padding: 10px 20px; + background-color: #095a55; + color: #fff; + font-size: 16px; + border: none; + border-radius: 5px; + cursor: pointer; + transition: all 0.2s ease-in-out; + } + + .btn:hover { + background-color: #00474a; + } + + /* Image hover effect (replace with a healthcare-related image) */ + .image-container { + position: relative; + margin: 20px auto; + width: 200px; /* Adjust image size */ + height: 200px; /* Adjust image size */ + } + + .image-container img { + width: 100%; + height: 100%; + transition: opacity 0.5s ease-in-out; + } + + .image-container:hover img { + opacity: 0.5; + } + + .image-container:hover .overlay { + opacity: 1; + background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black */ + color: #fff; /* White text */ + padding: 10px; /* Add padding for text */ + text-align: center; /* Center text alignment */ + } + + /* Footer styles */ + footer { + background-color: #f2f2f2; + padding: 10px 0; + text-align: center; + } + + footer p { + color: #333; /* Can be adjusted to black for stronger contrast */ + } + diff --git a/Html-Files/error.js b/Html-Files/error.js new file mode 100644 index 00000000..38ace50e --- /dev/null +++ b/Html-Files/error.js @@ -0,0 +1,30 @@ +// Function to adjust navigation based on screen size +function adjustNav() { + const nav = document.querySelector('nav'); + const windowWidth = window.innerWidth; + + if (windowWidth <= 768) { + nav.classList.add('responsive'); + } else { + nav.classList.remove('responsive'); + } + } + + // Call the adjustNav function on initial load and window resize + adjustNav(); + window.addEventListener('resize', adjustNav); + + // Responsive navigation functionality (optional) + if (document.querySelector('nav.responsive')) { + const navToggle = document.createElement('button'); + navToggle.classList.add('nav-toggle'); + navToggle.innerHTML = ''; // Font Awesome icon for menu (replace with your preferred method) + + navToggle.addEventListener('click', () => { + const nav = document.querySelector('nav'); + nav.classList.toggle('active'); + }); + + document.querySelector('header').appendChild(navToggle); + } + \ No newline at end of file diff --git a/Html-Files/error404.html b/Html-Files/error404.html new file mode 100644 index 00000000..3f182b95 --- /dev/null +++ b/Html-Files/error404.html @@ -0,0 +1,35 @@ + + + + + + 404 - Page Not Found |RapiDoc + + + + + +
    +
    + +
    +
    + +
    +
    +
    +

    404

    +

    Ooops! Page Not Found

    +

    We're sorry, but the page you requested was not found. Perhaps you mistyped the URL or the page has been removed.

    + Go Back to Home +
    +
    +
    + +
    +
    +

    © RapiDoc - 2024

    +
    +
    + + diff --git a/Html-Files/gynaco.html b/Html-Files/gynaco.html new file mode 100644 index 00000000..297329e3 --- /dev/null +++ b/Html-Files/gynaco.html @@ -0,0 +1,176 @@ + + + + + + + + + + + + + Doctors + + + + + + + + + + +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    +
    +

    Dr. Satbir Singh

    +

    Gynacologist

    + + +
    +
    + MAY + +
    + 20 + 21 + 22 + 23 + 24 + 25 + 26 +
    +
    + +
    + +
    +
    + + + + + +
    + +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + + + diff --git a/Html-Files/images/doctor.png b/Html-Files/images/doctor.png new file mode 100644 index 00000000..074ca25e Binary files /dev/null and b/Html-Files/images/doctor.png differ diff --git a/Html-Files/images/doctor17.jpeg b/Html-Files/images/doctor17.jpeg new file mode 100644 index 00000000..f5509f57 Binary files /dev/null and b/Html-Files/images/doctor17.jpeg differ diff --git a/Html-Files/images/doctor18.jpeg b/Html-Files/images/doctor18.jpeg new file mode 100644 index 00000000..004805b9 Binary files /dev/null and b/Html-Files/images/doctor18.jpeg differ diff --git a/Html-Files/images/doctor19.jpeg b/Html-Files/images/doctor19.jpeg new file mode 100644 index 00000000..98782bb2 Binary files /dev/null and b/Html-Files/images/doctor19.jpeg differ diff --git a/Html-Files/images/doctor8.jpeg b/Html-Files/images/doctor8.jpeg new file mode 100644 index 00000000..518d2626 Binary files /dev/null and b/Html-Files/images/doctor8.jpeg differ diff --git a/Html-Files/images/github.png b/Html-Files/images/github.png new file mode 100644 index 00000000..95cdc93f Binary files /dev/null and b/Html-Files/images/github.png differ diff --git a/Html-Files/images/logo.png b/Html-Files/images/logo.png new file mode 100644 index 00000000..2af321b2 Binary files /dev/null and b/Html-Files/images/logo.png differ diff --git a/Html-Files/images/mail2.png b/Html-Files/images/mail2.png new file mode 100644 index 00000000..aefdf535 Binary files /dev/null and b/Html-Files/images/mail2.png differ diff --git a/Html-Files/images/phone.png b/Html-Files/images/phone.png new file mode 100644 index 00000000..f2c79b7d Binary files /dev/null and b/Html-Files/images/phone.png differ diff --git a/Html-Files/images/twitter.png b/Html-Files/images/twitter.png new file mode 100644 index 00000000..e3247ffb Binary files /dev/null and b/Html-Files/images/twitter.png differ diff --git a/Html-Files/images/twitters.png b/Html-Files/images/twitters.png new file mode 100644 index 00000000..8ec9337a Binary files /dev/null and b/Html-Files/images/twitters.png differ diff --git a/Html-Files/news.html b/Html-Files/news.html index 741a2052..bd7a5d90 100644 --- a/Html-Files/news.html +++ b/Html-Files/news.html @@ -2,76 +2,731 @@ - - - News RapiDoc - - - - - - - - + + + + + + + + + + + RapiDoc + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - -
    -

    - Top News by RapiDoc -

    - +
    - -
    - - - + +
    +
    + + + +
    +
    + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/Html-Files/pediatrition.html b/Html-Files/pediatrition.html new file mode 100644 index 00000000..ffa74e4e --- /dev/null +++ b/Html-Files/pediatrition.html @@ -0,0 +1,171 @@ + + + + + + + + + + + Doctors + + + + + + + + +
    +
    +
    +
    +
    + +
    + + +
    +
    +
    + +
    + +
    +
    +
    +

    Dr. Ranjan Upadhyay

    +

    Pediatrician

    + + +
    +
    + MAY + +
    + 1 + 2 + 3 + 4 + 15 + 26 + 27 +
    +
    + +
    + +
    +
    + + + + + +
    +
    + + + +
    +
    +
    +
    +
    +
    + + + + + + + + + \ No newline at end of file diff --git a/Html-Files/privacy_policy_page.html b/Html-Files/privacy_policy_page.html new file mode 100644 index 00000000..3709f1e8 --- /dev/null +++ b/Html-Files/privacy_policy_page.html @@ -0,0 +1,151 @@ + + + + + + Privacy Policy + + + + + + + + + +
    +

    Privacy Policy

    + +
    +

    Introduction

    +

    Welcome to Rapidoc. We value your privacy and are committed to protecting your personal information. This Privacy Policy outlines how we collect, use, and protect your data when you use our website and services.

    +
    + +
    +

    Data Collection

    +

    We collect various types of information in connection with the services we provide, including:

    +
      +
    • Personal Identification Information (Name, email address, phone number, etc.)
      • +
    • Usage Data (IP address, browser type, pages visited, etc.)
      • +
    • Cookies and Tracking Technologies
      • +
    +
    + +
    +

    Data Use

    +

    The information we collect is used for various purposes, including:

    +
      +
    • To provide and maintain our services
      • +
    • To notify you about changes to our services
      • +
    • To provide customer support
      • +
    • To gather analysis or valuable information so that we can improve our services
      • +
    • To monitor the usage of our services
      • +
    • To detect, prevent, and address technical issues
      • +
    +
    + +
    +

    Data Sharing

    +

    We may share your personal information with third parties in the following circumstances:

    +
      +
    • With service providers to monitor and analyze the use of our service
      • +
    • With business partners to offer you certain products, services, or promotions
      • +
    • With your consent, we may disclose your personal information for any other purpose
      • +
    +
    + +
    +

    Data Protection

    +

    We implement a variety of security measures to maintain the safety of your personal information. However, please note that no method of transmission over the Internet, or method of electronic storage is 100% secure.

    +
    + +
    +

    Your Rights

    +

    You have the right to access, correct, or delete your personal information. You can do this by contacting us using the contact information provided below.

    +
    + +
    +

    Changes to This Privacy Policy

    +

    We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new Privacy Policy on this page.

    +
    + +
    +

    Contact Us

    +

    If you have any questions about this Privacy Policy, please contact us:

    +
      +
    • By email: contact@example.com
      • +
    • By visiting this page on our website: [Contact Us Page URL]
      • +
    • By phone number: [Phone Number]
      • +
    +
    +
    + + + + + + + + + + diff --git a/Learn.md b/Learn.md new file mode 100644 index 00000000..96c9a7a9 --- /dev/null +++ b/Learn.md @@ -0,0 +1,160 @@ +# **Contributing Guidelines** 📄 + +This documentation contains a set of guidelines to help you during the contribution process. +We are happy to welcome all the contributions from anyone willing to improve/add new scripts to this project. +Thank you for helping out and remember, **no contribution is too small.** +
    +Please note we have a [code of conduct](CODE_OF_CONDUCT.md) please follow it in all your interactions with the project. + +
    + +## How to Contribute ? + +## **Getting Started** +1. Clone the repo + +```sh + git clone https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-.git +``` + +2. Run index.html with any browser (example: chrome etc). + +
    + +## Contribution + +Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are **greatly appreciated**. + +- If you have any suggestions for the project, such as reporting a bug, improving the UI, or enhancing the README.md file, feel free to **open an issue** to discuss it or directly create a pull request with the necessary changes. +- Please make sure to check your spelling and grammar. +- Create individual pull requests for each suggestion to keep changes focused and manageable. + +Your involvement helps to improve the project and make it better for everyone. Thank you for your contributions! + +## Creating Pull Request +1. **Fork the Project:** + - Click on the "Fork" button at the top right corner of the repository's page on GitHub to create your own copy of the project. + +2. **Clone Your Forked Repository:** + - Clone the forked repository to your local machine using the following command: + ```sh + git clone https://github.com//RAPIDOC-HEALTHCARE-WEBSITE- + ``` + - Navigate to project folder: + ```sh + cd RAPIDOC-HEALTHCARE-WEBSITE + ``` + +3. **Add a reference(remote) to the original repository:** + + ``` + git remote add upstream https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE- + ``` +4. **Check the remotes for this repository.** + ``` + git remote -v + ``` + +5. **Always take a pull from the upstream repository to your master branch to keep it at par with the main project (updated repository).** + ``` + git pull upstream main + ``` + +6. **Create a New Branch and Move to the Branch:** + - Create a new branch for your changes and move to that branch using the following commands: + ```sh + git checkout -b + ``` + +7. **Add Your Changes:** + - After you have made your changes, check the status of the changed files using the following command: + ```sh + git status -s + ``` + - Add all the files to the staging area using the following command: + ```sh + git add . + ``` + or add specific files using: + ```sh + git add + ``` +8. **Commit Your Changes:** + - Commit your changes with a descriptive message using the following command: + ```sh + git commit -m "" + ``` + +9. **Push Your Changes:** + - Push your changes to your forked repository on GitHub using the following command: + ```sh + git push origin + ``` + +10. **Open a Pull Request:** + - Go to the GitHub page of your forked repository, and you should see an option to create a pull request. Click on it, provide a descriptive title and description for your pull request, and then submit it. + +### Alternatively contribute using GitHub Desktop + +1. **Open GitHub Desktop:** + Launch GitHub Desktop and log in to your GitHub account if you haven't already. + +2. **Clone the Repository:** + - If you haven't cloned the RAPIDOC-HEALTHCARE-WEBSITE- repository yet, you can do so by clicking on the "File" menu and selecting "Clone Repository." + - Choose the RAPIDOC-HEALTHCARE-WEBSITE- repository from the list of repositories on GitHub and clone it to your local machine. + +3. **Switch to the Correct Branch:** + - Ensure you are on the branch that you want to submit a pull request for. + - If you need to switch branches, you can do so by clicking on the "Current Branch" dropdown menu and selecting the desired branch. + +4. **Make Changes:** + Make your changes to the code or files in the repository using your preferred code editor. + +5. **Commit Changes:** + - In GitHub Desktop, you'll see a list of the files you've changed. Check the box next to each file you want to include in the commit. + - Enter a summary and description for your changes in the "Summary" and "Description" fields, respectively. Click the "Commit to " button to commit your changes to the local branch. + +6. **Push Changes to GitHub:** + After committing your changes, click the "Push origin" button in the top right corner of GitHub Desktop to push your changes to your forked repository on GitHub. + +7. **Create a Pull Request:** + - Go to the GitHub website and navigate to your fork of the RAPIDOC-HEALTHCARE-WEBSITE- repository. + - You should see a button to "Compare & pull request" between your fork and the original repository. Click on it. + +8. **Review and Submit:** + - On the pull request page, review your changes and add any additional information, such as a title and description, that you want to include with your pull request. + - Once you're satisfied, click the "Create pull request" button to submit your pull request. + +9. **Wait for Review:** + Your pull request will now be available for review by the project maintainers. They may provide feedback or ask for changes before merging your pull request into the main branch of the RAPIDOC-HEALTHCARE-WEBSITE- repository. + +## **Issue Report Process 📌** + +1. Go to the project's issues. +2. Give proper description for the issues. +3. Don't spam to get the assignment of the issue 😀. +4. Wait for till someone is looking into it !. +5. Start working on issue only after you got assigned that issue 🚀. + +## **Pull Request Process 🚀** + +1. Ensure that you have self reviewed your code 😀 +2. Make sure you have added the proper description for the functionality of the code +3. I have commented my code, particularly in hard-to-understand areas. +4. Add screenshot it help in review. +5. Submit your PR by giving the necesarry information in PR template and hang tight we will review it really soon 🚀 + +
    + +## **Need some help regarding the basics?🤔** + +You can refer to the following articles on basics of Git and Github and also contact the Project Mentors, +in case you are stuck: + +- [Forking a Repo](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) +- [Cloning a Repo](https://help.github.com/en/desktop/contributing-to-projects/creating-an-issue-or-pull-request) +- [How to create a Pull Request](https://opensource.com/article/19/7/create-pull-request-github) +- [Getting started with Git and GitHub](https://towardsdatascience.com/getting-started-with-git-and-github-6fcd0f2d4ac6) +- [Learn GitHub from Scratch](https://docs.github.com/en/get-started/start-your-journey/git-and-github-learning-resources) + +# **Thank you for contributing💗** diff --git a/README.md b/README.md index a132e6b9..f7b93577 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,16 @@ -![RapidDoc](https://camo.githubusercontent.com/dd5e3080a7adc2ead8f86cbbd6577cee0a38439c0ebf195021ce41587b0a405f/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f6d61782f313430302f312a633459675258595161794f5657785633376f757272772e706e67) - -## RapiDoc +
    -[💬 Join the community on Slack](https://join.slack.com/t/newworkspace-ley5153/shared_invite/zt-2isvflg78-tMexsn50mxdwY4BEJ_W11g)
    +![RapidDoc](https://camo.githubusercontent.com/dd5e3080a7adc2ead8f86cbbd6577cee0a38439c0ebf195021ce41587b0a405f/68747470733a2f2f6d69726f2e6d656469756d2e636f6d2f6d61782f313430302f312a633459675258595161794f5657785633376f757272772e706e67) +
    -# RapiDoc.com +#

    RapiDoc.com

    +[💬 Join the community on Slack](https://join.slack.com/t/newworkspace-ley5153/shared_invite/zt-2isvflg78-tMexsn50mxdwY4BEJ_W11g)
    -An online platform providing comprehensive information on nearby hospitals and healthcare facilities! +

    An online platform providing comprehensive information on nearby hospitals and healthcare facilities!
    @@ -19,11 +19,11 @@ - + - - - + + + @@ -37,9 +37,9 @@
    🌟 Stars Stars 🍴 Forks🐛 Issues🔔 Open PRs🔕 Closed PRs Issues Open PRs Closed PRs
    -

    Featured In

    +

    RocketFeatured In

    - +
    @@ -51,20 +51,23 @@
    Event Name
    -

    Project Overview

    -It is an online platform which enables you to get information about your nearest hospitals and healthcare facilities including important information like blood availablity in emergency, Opds and beds availability in your nearest/desired hospitals. It aims to address health-related issues. It is a one-stop destination for all your medical needs. +

    RocketProject Overview

    +

    +It is an online platform which enables you to get information about your nearest hospitals and healthcare facilities including important information like blood availablity in emergency, Opds and beds availability in your nearest/desired hospitals. It aims to address health-related issues. It is a one-stop destination for all your medical needs.

    -## Technology Stack +##

    High VoltageTech Stack

    +
    + + +
    -- **Frontend**: HTML5, CSS, JavaScript, BootStrap -- **IDE**: VS Code/Google IDX -- **Version Control**: Git and GitHub +

    -## Get Started +##

    RocketGet Started

    ### Setup and Installation -To contribute to the RAPIDOC-HEALTHCARE-WEBSITE repository, follow these steps: +

    To contribute to the RAPIDOC-HEALTHCARE-WEBSITE repository, follow these steps:

    1. **Fork the Repository:** Click on the "Fork" button on the repository's GitHub page to create a copy of the repository in your GitHub account. @@ -103,8 +106,9 @@ To contribute to the RAPIDOC-HEALTHCARE-WEBSITE repository, follow these steps: ``` 9. **Create a Pull Request:** Go to the GitHub page of your forked repository. You should see a prompt to create a pull request (PR). Click on it, compare the changes, and create the PR. +

    -To run the project locally in your System +

    To run the project locally in your System

    1. _Fork the Repository:_ Click on the "Fork" button on the repository's GitHub page to create a copy of the repository in your GitHub account. @@ -118,10 +122,9 @@ To run the project locally in your System ```bash git clone https://github.com//RAPIDOC-HEALTHCARE-WEBSITE - + ``` ![Screenshot (129)](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/assets/105973197/88249cc4-5849-4472-b190-9d9bad2bb236) - ``` 3. _Open the project in VS Code:_ Click on the open with vs code button , to make changes to the code using the text editor. @@ -139,48 +142,30 @@ To run the project locally in your System ![Screenshot (133)](https://github.com/Anishkagupta04/RAPIDOC-HEALTHCARE-WEBSITE-/assets/105973197/62044e1a-a644-467d-98ac-eabfac970ed9) -To contribute to the RAPIDOC-HEALTHCARE-WEBSITE repository using GitHub Desktop, follow these steps: +

    Contributing -1. **Clone the repository:** - Open GitHub Desktop and log in to your GitHub account. Go to the "File" menu and select "Clone Repository." Select the RAPIDOC-HEALTHCARE-WEBSITE repository from the list and choose a local path to clone the repository. +

    We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's. -2. **Switch to the correct branch:** - Once the repository is cloned, make sure you are on the correct branch where you want to make your changes. You can switch branches using the "Branch" menu in GitHub Desktop. - -3. **Make and commit changes:** - Make the desired changes to the code in your local repository. After making changes, stage them by clicking the "+" button next to the changed files. Enter a commit message describing your changes and click the "Commit" button. - -4. **Push changes to GitHub:** - After committing your changes, push them to your fork of the repository on GitHub. Click the "Push origin" button in GitHub Desktop to push your changes. - -5. **Create a pull request:** - Go to your fork of the RAPIDOC-HEALTHCARE-WEBSITE repository on the GitHub website. You should see a notification that your branch is ahead of the original repository. Click on the "Compare & pull request" button to create a pull request for your changes. - -6. **Review and submit the pull request:** - On the pull request page, review your changes and add a title and description for your pull request. Once you're satisfied with your changes, click the "Create pull request" button to submit your pull request. - -If you find this project helpful, please consider giving it a star! ⭐️ - -### Contributing - -We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's: +To contribute to the RAPIDOC-HEALTHCARE-WEBSITE repository using GitHub Desktop, follow these steps: -- Reporting a bug -- Discussing the current state of the code -- Submitting a fix -- Proposing new features + Reporting a bug
    +Discussing the current state of the code
    +Submitting a fix
    +Proposing new features

    -

    Our Contributors ❤️

    +

    Our Contributors Red Heart

    Thank you for contributing to our repository

    - - - + -### Show some ❤️ by starring this awesome repository! +

    Show some Red Heart by starring this awesome repository!

    +
    +

    +If you find this project helpful, please consider giving it a star!

    +

    diff --git a/ReadMe.txt b/ReadMe.txt index 6b2126bd..21bcdd48 100644 --- a/ReadMe.txt +++ b/ReadMe.txt @@ -1,2 +1,9 @@ This project is a Front End representation prototype of RapiDoc. -Some features might not work without internet while testing. \ No newline at end of file +Some features might not work without internet while testing. + +IMPORTANT NOTICE: + +Please use this source code as best as possible. +Download and save this source code to your computer. +Thank You. +This project website provides digital healthcare services. diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 00000000..9d20d3e5 --- /dev/null +++ b/assets/css/styles.css @@ -0,0 +1,617 @@ +/*=============== GOOGLE FONTS ===============*/ +@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap"); +/*=============== VARIABLES CSS ===============*/ +:root { + --header-height: 3rem; + /*========== Colors ==========*/ + --hue: 45; + --sat: 98%; + --first-color: #4bb6b7; + --first-color-light: hsl(var(--hue), var(--sat), 85%); + --first-color-lighten: #4bb6b7; + --first-color-alt: hsl(var(--hue), var(--sat), 53%); + --title-color: hsl(var(--hue), 4%, 15%); + --text-color: hsl(var(--hue), 4%, 35%); + --text-color-light: hsl(var(--hue), 4%, 65%); + --body-color: hsl(var(--hue), 0%, 100%); + --container-color: #FFF; + --scroll-bar-color: hsl(var(--hue), 4%, 85%); + --scroll-thumb-color: hsl(var(--hue), 4%, 75%); + /*========== Font and typography ==========*/ + --body-font: 'Poppins', sans-serif; + --biggest-font-size: 2rem; + --h2-font-size: 1.25rem; + --h3-font-size: 1.125rem; + --normal-font-size: .938rem; + --small-font-size: .813rem; + --smaller-font-size: .75rem; + /*========== Font weight ==========*/ + --font-semi-bold: 600; + --font-bold: 700; + /*========== Margenes ==========*/ + --mb-0-5: .5rem; + --mb-0-75: .75rem; + --mb-1: 1rem; + --mb-1-5: 1.5rem; + --mb-2: 2rem; + /*========== z index ==========*/ + --z-tooltip: 10; + --z-fixed: 100; +} + +@media screen and (min-width: 968px) { + :root { + --biggest-font-size: 3rem; + --h2-font-size: 1.75rem; + --h3-font-size: 1.25rem; + --normal-font-size: 1rem; + --small-font-size: .875rem; + --smaller-font-size: .813rem; + } +} + +/*=============== BASE ===============*/ +*, ::before, ::after { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html { + scroll-behavior: smooth; +} + +body { + margin: var(--header-height) 0 0 0; + font-family: var(--body-font); + font-size: var(--normal-font-size); + background-color: var(--body-color); + color: var(--text-color); + transition: .5s; +} + +h1, h2, h3 { + font-weight: var(--font-semi-bold); + color: var(--title-color); + line-height: 1.5; +} + +ul { + list-style: none; +} + +a { + text-decoration: none; +} + +img { + max-width: 100%; + height: auto; +} + +/*=============== THEME ===============*/ +/*========== Variables Dark theme ==========*/ +body.dark-theme { + --first-color-light: hsl(var(--hue), var(--sat), 75%); + --title-color: hsl(var(--hue), 4%, 95%); + --text-color: hsl(var(--hue), 4%, 80%); + --body-color: hsl(var(--hue), 8%, 13%); + --container-color: hsl(var(--hue), 8%, 16%); + --scroll-bar-color: hsl(var(--hue), 4%, 32%); + --scroll-thumb-color: hsl(var(--hue), 4%, 24%); +} + +/*========== Button Dark/Light ==========*/ +.change-theme { + position: absolute; + right: 1.5rem; + top: 2.2rem; + color: var(--title-color); + font-size: 1.8rem; + cursor: pointer; +} + +.dark-theme .footer { + background-color: var(--container-color); +} + +/*=============== REUSABLE CSS CLASSES ===============*/ +.section { + padding: 4.5rem 0 1rem; +} + +.section__title, .section__title-center { + font-size: var(--h2-font-size); + color: var(--title-color); + text-align: center; + margin-bottom: var(--mb-1); +} + +.svg__color { + fill: var(--first-color); +} + +.svg__blob { + fill: var(--first-color-light); +} + +.svg__img { + width: 300px; + justify-self: center; +} + +/*=============== LAYOUT ===============*/ +.container { + max-width: 968px; + margin-left: var(--mb-1-5); + margin-right: var(--mb-1-5); +} + +.grid { + display: grid; + gap: 1.5rem; +} + +/*=============== HEADER ===============*/ +.header { + width: 100%; + background-color: var(--body-color); + + top: 0; + left: 0; + z-index: var(--z-fixed); + transition: .5s; +} +.header img { + width: 100px; /* Adjust the width as needed */ + height: 100px; + margin-left: 1px; /* Adjust the margin as needed */ +} + +/*=============== NAV ===============*/ +.nav { + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; +} + +@media screen and (max-width: 767px) { + .nav__menu { + position: fixed; + background-color: var(--container-color); + box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); + padding: 2.5rem 0; + width: 90%; + top: -100%; + left: 0; + right: 0; + margin: 0 auto; + transition: .4s; + border-radius: 2rem; + z-index: var(--z-fixed); + } +} + +.nav__list { + display: flex; + flex-direction: column; + align-items: center; + row-gap: 1.5rem; +} + +.nav__link, .nav__logo, .nav__toggle { + color: var(--title-color); + font-weight: var(--font-semi-bold); +} + +.nav__toggle { + font-size: 1.3rem; + cursor: pointer; +} + +/* Show menu */ +.show-menu { + top: calc(var(--header-height) + 1rem); +} + +/* Active link */ +.active-link { + position: relative; +} + +.active-link::before { + content: ''; + position: absolute; + bottom: -.75rem; + left: 45%; + width: 5px; + height: 5px; + background-color: var(--title-color); + border-radius: 50%; +} + +/* Change background header */ +.scroll-header { + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); +} + +/*=============== HOME ===============*/ +.home__container { + row-gap: 3rem; +} + +.home__title { + font-size: var(--biggest-font-size); + font-weight: var(--font-bold); + margin-bottom: var(--mb-0-75); +} + +.home__description { + margin-bottom: var(--mb-2); +} +.home img { + max-width: 100%; + height: auto; + margin-left: 500px; /* Adjust the margin as needed */ + margin-top: -350px; +} +/*=============== BUTTONS ===============*/ +.button { + display: inline-block; + background-color: var(--first-color); + color: #1A1A1A; + padding: .75rem 1.5rem; + border-radius: 3rem; + font-weight: var(--font-semi-bold); + transition: .3s; +} + +.button:hover { + background-color: var(--first-color-alt); +} + +.button__header { + display: none; +} + +.button-link { + background: none; + padding: 0; + color: var(--title-color); +} + +.button-link:hover { + background-color: transparent; +} + +.button-flex { + display: inline-flex; + align-items: center; + column-gap: .25rem; + padding: .75rem 1rem; +} + +.button__icon { + font-size: 1.5rem; +} + +/*=============== ABOUT ===============*/ +.about__container { + gap: 2.5rem; +} + +.about__data { + text-align: center; +} +.about img { + max-width: 100%; + height: auto; + margin-left: 500px; /* Adjust the margin as needed */ + margin-top: -150px; +} + +/*=============== SECURITY ===============*/ +.security__container { + gap: 2.5rem; +} + +.security__data { + text-align: center; +} + +/*=============== SERVICES ===============*/ +.services__container { + padding-top: 1rem; +} + +.services__data { + display: grid; + row-gap: 1rem; + background-color: var(--container-color); + box-shadow: 0px 2px 6px hsla(var(--hue), 100%, 15%, 0.15); + padding: 2rem 1.5rem; + border-radius: 1rem; + text-align: center; +} + +.services__img { + width: 135px; + justify-self: center; + margin-bottom: var(--mb-0-5); +} + +/*=============== APP ===============*/ +.app__container { + gap: 2.5rem; +} + +.app__data { + text-align: center; +} + +.app__description { + margin-bottom: var(--mb-1-5); +} + +.app__buttons { + display: grid; + grid-template-columns: repeat(2, max-content); + justify-content: center; + gap: .5rem; +} + + +/*=============== CONTACT ===============*/ +.contact__container { + padding-bottom: 3rem; +} + +.contact__description { + text-align: center; +} + +.contact__content { + row-gap: .75rem; +} + +.contact__address { + font-size: var(--small-font-size); + font-weight: var(--font-semi-bold); + color: var(--title-color); +} + +.contact__information { + font-weight: initial; + color: var(--text-color); +} + +/*=============== FOOTER ===============*/ +.footer { + background-color: var(--first-color-lighten); + padding-bottom: 2rem; +} + +.footer__container { + row-gap: 2rem; +} + +.footer__logo, .footer__title { + font-size: var(--h3-font-size); + margin-bottom: var(--mb-0-75); +} + +.footer__logo { + display: inline-block; + font-weight: var(--font-semi-bold); + color: var(--title-color); +} + +.footer__description, .footer__link { + font-size: var(--small-font-size); +} + +.footer__links { + display: grid; + row-gap: .5rem; +} + +.footer__link { + color: var(--title-color); +} + +.footer__social { + display: flex; + column-gap: 1.5rem; +} + +.footer__social-link { + font-size: 1.25rem; + color: var(--title-color); +} + +.footer__copy { + margin-top: 6rem; + text-align: center; + font-size: var(--smaller-font-size); + color: var(--text-color); +} + +/*=============== SCROLL UP ===============*/ +.scrollup { + position: fixed; + background: var(--first-color); + right: 1rem; + bottom: -20%; + display: inline-flex; + padding: .3rem; + border-radius: .25rem; + z-index: var(--z-tooltip); + opacity: .8; + transition: .4s; +} + +.scrollup:hover { + background-color: var(--first-color); + opacity: 1; +} + +.scrollup__icon { + font-size: 1.25rem; + color: var(--title-color); +} + +/* Show Scroll Up*/ +.show-scroll { + bottom: 3rem; +} + +/*=============== SCROLL BAR ===============*/ +::-webkit-scrollbar { + width: .6rem; + border-radius: .5rem; + background-color: var(--scroll-bar-color); +} + +::-webkit-scrollbar-thumb { + background-color: var(--scroll-thumb-color); + border-radius: .5rem; +} + +::-webkit-scrollbar-thumb:hover { + background-color: var(--text-color-light); +} + +/*=============== MEDIA QUERIES ===============*/ +/* For small devices */ +@media screen and (max-width: 360px) { + .svg__img { + width: 100%; + } + .section { + padding: 3.5rem 0 1rem; + } + .services__img { + width: 100px; + } + .app__buttons { + grid-template-columns: max-content; + } +} + +/* For medium devices */ +@media screen and (min-width: 576px) { + .svg__img { + width: 100%; + } + .section__title-center { + text-align: initial; + } + .home__container, + .about__container, + .security__container, + .services__container, + .app__container, + .contact__container, + .footer__container { + grid-template-columns: repeat(2, 1fr); + } + .home__img { + order: 1; + } + .home__container, + .about__container, + .security__container, + .app__container, + .contact__container { + align-items: center; + } + .about__data, + .security__data, + .app__data, + .contact__description { + text-align: initial; + } + .about__img, + .app__img { + order: -1; + } +} + +@media screen and (min-width: 767px) { + body { + margin: 0; + } + .section { + padding: 6rem 0 2rem; + } + .nav { + height: calc(var(--header-height) + 1.5rem); + } + .nav__list { + flex-direction: row; + column-gap: 2.5rem; + } + .nav__toggle { + display: none; + } + .change-theme { + position: initial; + } + .home__container { + padding: 6rem 0 2rem; + } + .app__buttons { + justify-content: initial; + } +} + +/* For large devices */ +@media screen and (min-width: 968px) { + .button__header { + display: block; + } + .svg__img { + width: 470px; + } + .about__container, + .security__container, + .app__container, + .contact__container { + column-gap: 6rem; + } + .services__container { + grid-template-columns: repeat(3, 1fr); + } + .contact__container { + grid-template-columns: 3fr 1.5fr 1.25fr; + } + .footer__container { + grid-template-columns: repeat(5, 1fr); + } + .footer__social { + align-items: flex-start; + } + .footer__social-link { + font-size: 1.45rem; + } +} + +@media screen and (min-width: 1024px) { + .container { + margin-left: auto; + margin-right: auto; + } + .home__img { + width: 540px; + } + .home__description { + padding-right: 5rem; + } + .footer__container { + column-gap: 3rem; + } + .scrollup { + right: 2rem; + } +} diff --git a/assets/img/about.png b/assets/img/about.png new file mode 100644 index 00000000..49154b60 Binary files /dev/null and b/assets/img/about.png differ diff --git a/assets/img/rd.png b/assets/img/rd.png new file mode 100644 index 00000000..885be48c Binary files /dev/null and b/assets/img/rd.png differ diff --git a/assets/img/rd1.png b/assets/img/rd1.png new file mode 100644 index 00000000..b504bf24 Binary files /dev/null and b/assets/img/rd1.png differ diff --git a/assets/img/s1.jpg b/assets/img/s1.jpg new file mode 100644 index 00000000..25e2914f Binary files /dev/null and b/assets/img/s1.jpg differ diff --git a/assets/img/s2.jpg b/assets/img/s2.jpg new file mode 100644 index 00000000..3aa07e95 Binary files /dev/null and b/assets/img/s2.jpg differ diff --git a/assets/img/s3.jpg b/assets/img/s3.jpg new file mode 100644 index 00000000..83680b42 Binary files /dev/null and b/assets/img/s3.jpg differ diff --git a/assets/img/sec.png b/assets/img/sec.png new file mode 100644 index 00000000..fd83ea5d Binary files /dev/null and b/assets/img/sec.png differ diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 00000000..3557fec5 --- /dev/null +++ b/assets/js/main.js @@ -0,0 +1,90 @@ +/*=============== SHOW MENU ===============*/ +const showMenu = (toggleId, navId) =>{ + const toggle = document.getElementById(toggleId), + nav = document.getElementById(navId) + + // Validate that variables exist + if(toggle && nav){ + toggle.addEventListener('click', ()=>{ + // We add the show-menu class to the div tag with the nav__menu class + nav.classList.toggle('show-menu') + }) + } +} +showMenu('nav-toggle','nav-menu') + +/*=============== REMOVE MENU MOBILE ===============*/ +const navLink = document.querySelectorAll('.nav__link') + +function linkAction(){ + const navMenu = document.getElementById('nav-menu') + // When we click on each nav__link, we remove the show-menu class + navMenu.classList.remove('show-menu') +} +navLink.forEach(n => n.addEventListener('click', linkAction)) + +/*=============== SCROLL SECTIONS ACTIVE LINK ===============*/ +const sections = document.querySelectorAll('section[id]') + +function scrollActive(){ + const scrollY = window.pageYOffset + + sections.forEach(current =>{ + const sectionHeight = current.offsetHeight, + sectionTop = current.offsetTop - 50, + sectionId = current.getAttribute('id') + + if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight){ + document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.add('active-link') + }else{ + document.querySelector('.nav__menu a[href*=' + sectionId + ']').classList.remove('active-link') + } + }) +} +window.addEventListener('scroll', scrollActive) + +/*=============== CHANGE BACKGROUND HEADER ===============*/ +function scrollHeader(){ + const nav = document.getElementById('header') + // When the scroll is greater than 80 viewport height, add the scroll-header class to the header tag + if(this.scrollY >= 80) nav.classList.add('scroll-header'); else nav.classList.remove('scroll-header') +} +window.addEventListener('scroll', scrollHeader) + +/*=============== SHOW SCROLL UP ===============*/ +function scrollUp(){ + const scrollUp = document.getElementById('scroll-up'); + // When the scroll is higher than 560 viewport height, add the show-scroll class to the a tag with the scroll-top class + if(this.scrollY >= 560) scrollUp.classList.add('show-scroll'); else scrollUp.classList.remove('show-scroll') +} +window.addEventListener('scroll', scrollUp) + +/*=============== DARK LIGHT THEME ===============*/ +const themeButton = document.getElementById('theme-button') +const darkTheme = 'dark-theme' +const iconTheme = 'bx-toggle-right' + +// Previously selected topic (if user selected) +const selectedTheme = localStorage.getItem('selected-theme') +const selectedIcon = localStorage.getItem('selected-icon') + +// We obtain the current theme that the interface has by validating the dark-theme class +const getCurrentTheme = () => document.body.classList.contains(darkTheme) ? 'dark' : 'light' +const getCurrentIcon = () => themeButton.classList.contains(iconTheme) ? 'bx-toggle-left' : 'bx-toggle-right' + +// We validate if the user previously chose a topic +if (selectedTheme) { + // If the validation is fulfilled, we ask what the issue was to know if we activated or deactivated the dark + document.body.classList[selectedTheme === 'dark' ? 'add' : 'remove'](darkTheme) + themeButton.classList[selectedIcon === 'bx-toggle-left' ? 'add' : 'remove'](iconTheme) +} + +// Activate / deactivate the theme manually with the button +themeButton.addEventListener('click', () => { + // Add or remove the dark / icon theme + document.body.classList.toggle(darkTheme) + themeButton.classList.toggle(iconTheme) + // We save the theme and the current icon that the user chose + localStorage.setItem('selected-theme', getCurrentTheme()) + localStorage.setItem('selected-icon', getCurrentIcon()) +}) diff --git a/assets/scss/base/_base.scss b/assets/scss/base/_base.scss new file mode 100644 index 00000000..86458bf7 --- /dev/null +++ b/assets/scss/base/_base.scss @@ -0,0 +1,36 @@ +/*=============== BASE ===============*/ +*,::before,::after{ + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html{ + scroll-behavior: smooth; +} + +body{ + margin: var(--header-height) 0 0 0; + font-family: var(--body-font); + font-size: var(--normal-font-size); + background-color: var(--body-color); + color: var(--text-color); + transition: .5s; // For animation dark mode +} + +h1,h2,h3{ + font-weight: var(--font-semi-bold); + color: var(--title-color); + line-height: 1.5; +} + +ul{ + list-style: none; +} +a{ + text-decoration: none; +} +img{ + max-width: 100%; + height: auto; +} diff --git a/assets/scss/components/_about.scss b/assets/scss/components/_about.scss new file mode 100644 index 00000000..061603ef --- /dev/null +++ b/assets/scss/components/_about.scss @@ -0,0 +1,9 @@ +/*=============== ABOUT ===============*/ +.about{ + &__container{ + gap: 2.5rem; + } + &__data{ + text-align: center; + } +} diff --git a/assets/scss/components/_app.scss b/assets/scss/components/_app.scss new file mode 100644 index 00000000..c43abe37 --- /dev/null +++ b/assets/scss/components/_app.scss @@ -0,0 +1,18 @@ +/*=============== APP ===============*/ +.app{ + &__container{ + gap: 2.5rem; + } + &__data{ + text-align: center; + } + &__description{ + margin-bottom: var(--mb-1-5); + } + &__buttons{ + display: grid; + grid-template-columns: repeat(2, max-content); + justify-content: center; + gap: .5rem + } +} diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss new file mode 100644 index 00000000..f5a721da --- /dev/null +++ b/assets/scss/components/_buttons.scss @@ -0,0 +1,39 @@ +/*=============== BUTTONS ===============*/ +.button{ + display: inline-block; + background-color: var(--first-color); + color: #1A1A1A; // Use color black for yellow + padding: .75rem 1.5rem; + border-radius: 3rem; + font-weight: var(--font-semi-bold); + transition: .3s; + + &:hover{ + background-color: var(--first-color-alt); + } + + &__header{ + display: none; + } + + &-link{ + background: none; + padding: 0; + color: var(--title-color); + + &:hover{ + background-color: transparent; + } + } + + &-flex{ + display: inline-flex; + align-items: center; + column-gap: .25rem; + padding: .75rem 1rem; + } + + &__icon{ + font-size: 1.5rem; + } +} diff --git a/assets/scss/components/_contact.scss b/assets/scss/components/_contact.scss new file mode 100644 index 00000000..4567fd94 --- /dev/null +++ b/assets/scss/components/_contact.scss @@ -0,0 +1,21 @@ +/*=============== CONTACT ===============*/ +.contact{ + &__container{ + padding-bottom: 3rem; + } + &__description{ + text-align: center; + } + &__content{ + row-gap: .75rem; + } + &__address{ + font-size: var(--small-font-size); + font-weight: var(--font-semi-bold); + color: var(--title-color); + } + &__information{ + font-weight: initial; + color: var(--text-color); + } +} diff --git a/assets/scss/components/_footer.scss b/assets/scss/components/_footer.scss new file mode 100644 index 00000000..8a4e36d9 --- /dev/null +++ b/assets/scss/components/_footer.scss @@ -0,0 +1,46 @@ +/*=============== FOOTER ===============*/ +.footer{ + background-color: var(--first-color-lighten); + padding-bottom: 2rem; + + &__container{ + row-gap: 2rem; + } + + &__logo, + &__title{ + font-size: var(--h3-font-size); + margin-bottom: var(--mb-0-75); + } + &__logo{ + display: inline-block; + font-weight: var(--font-semi-bold); + color: var(--title-color); + } + &__description, + &__link{ + font-size: var(--small-font-size); + } + &__links{ + display: grid; + row-gap: .5rem; + } + &__link{ + color: var(--title-color); + } + &__social{ + display: flex; + column-gap: 1.5rem; + + &-link{ + font-size: 1.25rem; + color: var(--title-color); + } + } + &__copy{ + margin-top: 6rem; + text-align: center; + font-size: var(--smaller-font-size); + color: var(--text-color); + } +} diff --git a/assets/scss/components/_header.scss b/assets/scss/components/_header.scss new file mode 100644 index 00000000..ebdcaeaf --- /dev/null +++ b/assets/scss/components/_header.scss @@ -0,0 +1,77 @@ +/*=============== HEADER ===============*/ +.header{ + width: 100%; + background-color: var(--body-color); + position: fixed; + top: 0; + left: 0; + z-index: var(--z-fixed); + transition: .5s; // For animation dark mode +} + +/*=============== NAV ===============*/ +.nav{ + height: var(--header-height); + display: flex; + justify-content: space-between; + align-items: center; + + &__menu{ + @media screen and (max-width: 767px){ + position: fixed; + background-color: var(--container-color); + box-shadow: 0 0 4px rgba(0,0,0,.1); + padding: 2.5rem 0; + width: 90%; + top: -100%; + left: 0; + right: 0; + margin: 0 auto; + transition: .4s; + border-radius: 2rem; + z-index: var(--z-fixed); + } + } + &__list{ + display: flex; + flex-direction: column; + align-items: center; + row-gap: 1.5rem; + } + &__link, + &__logo, + &__toggle{ + color: var(--title-color); + font-weight: var(--font-semi-bold); + } + &__toggle{ + font-size: 1.3rem; + cursor: pointer; + } +} + +/* Show menu */ +.show-menu{ + top: calc(var(--header-height) + 1rem); +} + +/* Active link */ +.active-link{ + position: relative; + + &::before{ + content: ''; + position: absolute; + bottom: -.75rem; + left: 45%; + width: 5px; + height: 5px; + background-color: var(--title-color); + border-radius: 50%; + } +} + +/* Change background header */ +.scroll-header{ + box-shadow: 0 1px 4px rgba(0,0,0,.1); +} diff --git a/assets/scss/components/_home.scss b/assets/scss/components/_home.scss new file mode 100644 index 00000000..b936872f --- /dev/null +++ b/assets/scss/components/_home.scss @@ -0,0 +1,14 @@ +/*=============== HOME ===============*/ +.home{ + &__container{ + row-gap: 3rem; + } + &__title{ + font-size: var(--biggest-font-size); + font-weight: var(--font-bold); + margin-bottom: var(--mb-0-75); + } + &__description{ + margin-bottom: var(--mb-2); + } +} diff --git a/assets/scss/components/_mediaqueries.scss b/assets/scss/components/_mediaqueries.scss new file mode 100644 index 00000000..8a9349b2 --- /dev/null +++ b/assets/scss/components/_mediaqueries.scss @@ -0,0 +1,161 @@ +/*=============== MEDIA QUERIES ===============*/ +/* For small devices */ +@media screen and (max-width: 360px){ + .svg__img{ + width: 100%; + } + + .section{ + padding: 3.5rem 0 1rem; + } + + .services__img{ + width: 100px; + } + + .app__buttons{ + grid-template-columns: max-content; + } +} + +/* For medium devices */ +@media screen and (min-width: 576px){ + .svg__img{ + width: 100%; + } + + .section__title-center{ + text-align: initial; + } + + .home__container, + .about__container, + .security__container, + .services__container, + .app__container, + .contact__container, + .footer__container{ + grid-template-columns: repeat(2, 1fr); + } + + .home__img{ + order: 1; + } + + .home__container, + .about__container, + .security__container, + .app__container, + .contact__container{ + align-items: center; + } + + .about__data, + .security__data, + .app__data, + .contact__description{ + text-align: initial; + } + + .about__img, + .app__img{ + order: -1; + } +} + +@media screen and (min-width: 767px){ + body{ + margin: 0; + } + + .section{ + padding: 6rem 0 2rem; + } + + .nav{ + height: calc(var(--header-height) + 1.5rem); + + &__list{ + flex-direction: row; + column-gap: 2.5rem; + } + &__toggle{ + display: none; + } + } + + .change-theme{ + position: initial; + } + + .home__container{ + padding: 6rem 0 2rem; + } + + .app__buttons{ + justify-content: initial; + } +} + +/* For large devices */ +@media screen and (min-width: 968px){ + .button__header{ + display: block; + } + + .svg__img{ + width: 470px; + } + + .about__container, + .security__container, + .app__container, + .contact__container{ + column-gap: 6rem; + } + + .services__container{ + grid-template-columns: repeat(3, 1fr); + } + + .contact__container{ + grid-template-columns: 3fr 1.5fr 1.25fr; + } + + .footer{ + &__container{ + grid-template-columns: repeat(5, 1fr); + } + &__social{ + align-items: flex-start; + + &-link{ + font-size: 1.45rem; + } + } + } +} + +@media screen and (min-width: 1024px){ + .container{ + margin-left: auto; + margin-right: auto; + } + + .home{ + &__img{ + width: 540px; + } + &__description{ + padding-right: 5rem; + } + } + + .footer__container{ + column-gap: 3rem; + } + + .scrollup{ + right: 2rem; + } +} diff --git a/assets/scss/components/_scroll.scss b/assets/scss/components/_scroll.scss new file mode 100644 index 00000000..ec88467e --- /dev/null +++ b/assets/scss/components/_scroll.scss @@ -0,0 +1,44 @@ +/*=============== SCROLL UP ===============*/ +.scrollup{ + position: fixed; + background: var(--first-color); + right: 1rem; + bottom: -20%; + display: inline-flex; + padding: .3rem; + border-radius: .25rem; + z-index: var(--z-tooltip); + opacity: .8; + transition: .4s; + + &:hover{ + background-color: var(--first-color); + opacity: 1; + } + + &__icon{ + font-size: 1.25rem; + color: var(--title-color); + } +} + +/* Show Scroll Up*/ +.show-scroll{ + bottom: 3rem; +} + +/*=============== SCROLL BAR ===============*/ +::-webkit-scrollbar{ + width: .6rem; + border-radius: .5rem; + background-color: var(--scroll-bar-color); + + &-thumb{ + background-color: var(--scroll-thumb-color); + border-radius: .5rem; + + &:hover{ + background-color: var(--text-color-light); + } + } +} diff --git a/assets/scss/components/_security.scss b/assets/scss/components/_security.scss new file mode 100644 index 00000000..1364b8fe --- /dev/null +++ b/assets/scss/components/_security.scss @@ -0,0 +1,9 @@ +/*=============== SECURITY ===============*/ +.security{ + &__container{ + gap: 2.5rem; + } + &__data{ + text-align: center; + } +} diff --git a/assets/scss/components/_services.scss b/assets/scss/components/_services.scss new file mode 100644 index 00000000..74cc90c3 --- /dev/null +++ b/assets/scss/components/_services.scss @@ -0,0 +1,20 @@ +/*=============== SERVICES ===============*/ +.services{ + &__container{ + padding-top: 1rem; + } + &__data{ + display: grid; + row-gap: 1rem; + background-color: var(--container-color); + box-shadow: 0px 2px 6px hsla(var(--hue), 100%, 15%, 0.15); + padding: 2rem 1.5rem; + border-radius: 1rem; + text-align: center; + } + &__img{ + width: 135px; + justify-self: center; + margin-bottom: var(--mb-0-5); + } +} diff --git a/assets/scss/config/_variables.scss b/assets/scss/config/_variables.scss new file mode 100644 index 00000000..669201e1 --- /dev/null +++ b/assets/scss/config/_variables.scss @@ -0,0 +1,58 @@ +/*=============== GOOGLE FONTS ===============*/ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap'); + +/*=============== VARIABLES CSS ===============*/ +:root{ + --header-height: 3rem; + + /*========== Colors ==========*/ + --hue: 45; // Yellow: 45 | Red: 4 | Orange: 18 | Green: 118 + --sat: 98%; // Yellow: 98% | Red: 90% | Orange: 85% | Green: 50% + --first-color: hsl(var(--hue), var(--sat), 60%); + --first-color-light: hsl(var(--hue), var(--sat), 85%); + --first-color-lighten: hsl(var(--hue), var(--sat), 80%); + --first-color-alt: hsl(var(--hue), var(--sat), 53%); + --title-color: hsl(var(--hue), 4%, 15%); + --text-color: hsl(var(--hue), 4%, 35%); + --text-color-light: hsl(var(--hue), 4%, 65%); + --body-color: hsl(var(--hue), 0%, 100%); + --container-color: #FFF; + --scroll-bar-color: hsl(var(--hue), 4%, 85%); + --scroll-thumb-color: hsl(var(--hue), 4%, 75%); + + + /*========== Font and typography ==========*/ + --body-font: 'Poppins', sans-serif; + + --biggest-font-size: 2rem; + --h2-font-size: 1.25rem; + --h3-font-size: 1.125rem; + --normal-font-size: .938rem; + --small-font-size: .813rem; + --smaller-font-size: .75rem; + + // Responsive typography + @media screen and (min-width: 968px){ + --biggest-font-size: 3rem; + --h2-font-size: 1.75rem; + --h3-font-size: 1.25rem; + --normal-font-size: 1rem; + --small-font-size: .875rem; + --smaller-font-size: .813rem; + } + + /*========== Font weight ==========*/ + --font-semi-bold: 600; + --font-bold: 700; + + /*========== Margenes ==========*/ + --mb-0-5: .5rem; + --mb-0-75: .75rem; + --mb-1: 1rem; + --mb-1-5: 1.5rem; + --mb-2: 2rem; + + /*========== z index ==========*/ + --z-tooltip: 10; + --z-fixed: 100; +} diff --git a/assets/scss/layout/_layout.scss b/assets/scss/layout/_layout.scss new file mode 100644 index 00000000..b12442fa --- /dev/null +++ b/assets/scss/layout/_layout.scss @@ -0,0 +1,36 @@ +/*=============== REUSABLE CSS CLASSES ===============*/ +.section{ + padding: 4.5rem 0 1rem; + + &__title, &__title-center{ + font-size: var(--h2-font-size); + color: var(--title-color); + text-align: center; + margin-bottom: var(--mb-1); + } +} + +.svg{ + &__color{ + fill: var(--first-color); + } + &__blob{ + fill: var(--first-color-light); + } + &__img{ + width: 300px; + justify-self: center; + } +} + +/*=============== LAYOUT ===============*/ +.container{ + max-width: 968px; + margin-left: var(--mb-1-5); + margin-right: var(--mb-1-5); +} + +.grid{ + display: grid; + gap: 1.5rem; +} diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss new file mode 100644 index 00000000..4919af13 --- /dev/null +++ b/assets/scss/styles.scss @@ -0,0 +1,16 @@ +// Import of partial files +@import 'config/variables'; +@import 'base/base'; +@import 'theme/theme'; +@import 'layout/layout'; +@import 'components/header'; +@import 'components/home'; +@import 'components/buttons'; +@import 'components/about'; +@import 'components/security'; +@import 'components/services'; +@import 'components/app'; +@import 'components/contact'; +@import 'components/footer'; +@import 'components/scroll'; +@import 'components/mediaqueries'; diff --git a/assets/scss/theme/_theme.scss b/assets/scss/theme/_theme.scss new file mode 100644 index 00000000..85540d41 --- /dev/null +++ b/assets/scss/theme/_theme.scss @@ -0,0 +1,25 @@ +/*=============== THEME ===============*/ +/*========== Variables Dark theme ==========*/ +body.dark-theme{ + --first-color-light: hsl(var(--hue), var(--sat), 75%); + --title-color: hsl(var(--hue), 4%, 95%); + --text-color: hsl(var(--hue), 4%, 80%); + --body-color: hsl(var(--hue), 8%, 13%); + --container-color: hsl(var(--hue), 8%, 16%); + --scroll-bar-color: hsl(var(--hue), 4%, 32%); + --scroll-thumb-color: hsl(var(--hue), 4%, 24%); +} + +/*========== Button Dark/Light ==========*/ +.change-theme { + position: absolute; + right: 1.5rem; + top: 2.2rem; + color: var(--title-color); + font-size: 1.8rem; + cursor: pointer; +} + +.dark-theme .footer{ + background-color: var(--container-color); +} diff --git a/chatboxx.js b/chatboxx.js new file mode 100644 index 00000000..b3d53e53 --- /dev/null +++ b/chatboxx.js @@ -0,0 +1,135 @@ +const chatbotToggler = document.querySelector(".chatbot-toggler"); +const closeBtn = document.querySelector(".close-btn"); +const chatbox = document.querySelector(".chatbox"); +const chatInput = document.querySelector(".chat-input textarea"); +const sendChatBtn = document.querySelector(".chat-input span"); + +let userMessage = null; // Variable to store user's message + +const inputInitHeight = chatInput.scrollHeight; + +const predefinedAnswers = { + "What types of health checkup packages does Rapidoc offer?": "Rapidoc offers a variety of health checkup packages, including basic health screenings, comprehensive full-body checkups, and specialized tests tailored to specific health concerns.", + "How can I book a health checkup through Rapidoc?": "You can easily book a health checkup through our platform by selecting your preferred package and scheduling a convenient appointment time. Our user-friendly interface guides you through the booking process.", + "What should I expect during my health checkup?": "During your health checkup, you will undergo a series of tests and screenings based on the package you selected. Our medical professionals will provide a detailed analysis of your results and personalized recommendations.", + "How do I find out the availability of emergency wards?": "Rapidoc provides real-time updates on the availability of emergency wards in various hospitals. Simply use our platform to check the current status and find the nearest available ward.", + "Can I book appointments with specialists through Rapidoc?": "Yes, you can book appointments with a wide range of specialists through Rapidoc. Our platform allows you to select the specialist you need and schedule an appointment at your convenience.", + "What personalized healthcare services does Rapidoc offer?": "Rapidoc offers personalized healthcare services including tailored treatment plans, ongoing health management, and consultations with various specialists to meet your unique health needs.", + "How does Rapidoc ensure the quality of its services?": "Rapidoc collaborates with certified medical professionals and accredited hospitals to ensure high-quality healthcare services. Our comprehensive health checkups and personalized care plans are designed to meet rigorous standards.", + "Is Rapidoc available in my area?": "Rapidoc is continually expanding its network. Please check our platform for the most up-to-date information on available locations and services in your area.", + "How do I get started with Rapidoc?": "Getting started with Rapidoc is easy. Visit our website, create an account, and explore our range of health services. You can book appointments, check emergency ward availability, and access personalized healthcare all through our platform.", + "What are the benefits of using Rapidoc for my healthcare needs?": "Rapidoc offers convenient and comprehensive healthcare solutions, including thorough health checkups, real-time emergency ward updates, seamless appointment bookings, and personalized healthcare services—all designed to enhance your well-being and streamline your healthcare experience." +}; + +const createChatLi = (message, className) => { + // Create a chat
  • element with passed message and className + const chatLi = document.createElement("li"); + chatLi.classList.add("chat", `${className}`); + let chatContent = className === "outgoing" ? `

    ` : `smart_toy

    `; + chatLi.innerHTML = chatContent; + chatLi.querySelector("p").textContent = message; + if (className === "question") { + chatLi.style.cursor = "pointer"; + } + return chatLi; // return chat
  • element +} + + +const generateResponse = (chatElement) => { + const API_URL = "https://api.openai.com/v1/chat/completions"; + const messageElement = chatElement.querySelector("p"); + + // Define the properties and message for the API request + const requestOptions = { + method: "POST", + headers: { + "Content-Type": "application/json", + "Authorization": `Bearer ${API_KEY}` + }, + body: JSON.stringify({ + model: "gpt-3.5-turbo", + messages: [{role: "user", content: userMessage}], + }) + } + + // Send POST request to API, get response and set the reponse as paragraph text + fetch(API_URL, requestOptions).then(res => res.json()).then(data => { + messageElement.textContent = data.choices[0].message.content.trim(); + }).catch(() => { + messageElement.classList.add("error"); + messageElement.textContent = "Oops! Something went wrong. Please try again."; + }).finally(() => chatbox.scrollTo(0, chatbox.scrollHeight)); +} + +const handleChat = () => { + userMessage = chatInput.value.trim(); // Get user entered message and remove extra whitespace + if (!userMessage) return; + + // Clear the input textarea and set its height to default + chatInput.value = ""; + chatInput.style.height = `${inputInitHeight}px`; + + // Append the user's message to the chatbox + chatbox.appendChild(createChatLi(userMessage, "outgoing")); + chatbox.scrollTo(0, chatbox.scrollHeight); + + // Check if the message matches a predefined question + if (userMessage == "Hi" || userMessage == "hi" || userMessage == "HI") + showQuestionList(); + else { + setTimeout(() => { + // Display "Thinking..." message while waiting for the response + const incomingChatLi = createChatLi("Thinking...", "incoming"); + chatbox.appendChild(incomingChatLi); + chatbox.scrollTo(0, chatbox.scrollHeight); + generateResponse(incomingChatLi); + }, 600); + } +} + +chatInput.addEventListener("input", () => { + // Adjust the height of the input textarea based on its content + chatInput.style.height = `${inputInitHeight}px`; + chatInput.style.height = `${chatInput.scrollHeight}px`; +}); + +chatInput.addEventListener("keydown", (e) => { + // If Enter key is pressed without Shift key and the window + // width is greater than 800px, handle the chat + if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) { + e.preventDefault(); + handleChat(); + } +}); + +sendChatBtn.addEventListener("click", handleChat); +closeBtn.addEventListener("click", () => document.body.classList.remove("show-chatbot")); +chatbotToggler.addEventListener("click", () => document.body.classList.toggle("show-chatbot")); + +function showWelcomeMessage() { + const welcomeChatLi = createChatLi("Hi! Welcome to RapiDoc! Chatbot. Say Hi to display menu."); + chatbox.appendChild(welcomeChatLi); + chatbox.scrollTo(0, chatbox.scrollHeight); + } + + // Function to display list of questions + function showQuestionList() { + for (const question in predefinedAnswers) { + const questionChatLi = createChatLi(question, "question"); + questionChatLi.addEventListener("click", () => showAnswer(question)); + questionChatLi.style.cursor = "pointer"; + chatbox.appendChild(questionChatLi); + } + chatbox.scrollTo(0, chatbox.scrollHeight); + } + + // Function to display answer based on clicked question + function showAnswer(clickedQuestion) { + const answer = predefinedAnswers[clickedQuestion]; + const answerChatLi = createChatLi(answer, "incoming"); + chatbox.appendChild(answerChatLi); + chatbox.scrollTo(0, chatbox.scrollHeight); + } + + // Call showWelcomeMessage and showQuestionList initially + showWelcomeMessage(); diff --git a/dex.html b/dex.html new file mode 100644 index 00000000..cce2f7a7 --- /dev/null +++ b/dex.html @@ -0,0 +1,228 @@ + + + + + + + + + + + + + + RAPIDOC|Delivery + + + + + +
    + +
    +
    +
    +

    RAPIDOC|Delivery
    Order Medicines

    +

    Order your Medicine at any time and we will deliver them right to where you are.

    + + Get Started +home +
    +
    +
    + + +
    +
    +
    +

    Find Out A Little More
    About Us

    +

    We are a company dedicated to the distribution of products by delivery + to your home or to the place where you are, with the best quality of delivery. +

    + about +
    +
    +
    + + +
    +
    +
    +

    Your Safety Is
    Important

    +

    When your order reaches you, we have the health safety protocols, + so that you are protected from any disease. Watch the video of how the delivery is made. +

    + +
    + about +
    +
    + + +
    +

    Some Services We
    Offer

    +
    +
    +

    Payment Done

    + imog +

    Pay with a Visa or PayPal card and without much ado.

    + +
    + +
    +

    Find Your Product

    + imog +

    We offer sale of products through the Internet.

    + +
    + +
    +

    Product Received

    + imog +

    In our app you can see the delay time of your order.

    + +
    +
    +
    + + +
    +
    +
    +

    Watch Your Delivery
    At Any Time

    +

    With our app you can view the route of your order, from our local headquarters to the + place where you are. Look for the app now!

    +
    + + App Store + + + Google Play + + +
    + +
    + home1 +
    + +
    + + +
    +
    +
    +

    Contact Us From
    Here

    +

    You can contact us from here, you can write to us, + call us or visit our service center, we will gladly assist you.

    +
    + +
      +
    • Email: delivery@email.com
      • +
    • Location: New Delhi
      • +
    + +
    + Contact Us +
    +
    +
    +
    + + + + + + + + + + + diff --git a/faq.html b/faq.html new file mode 100644 index 00000000..bc4ae520 --- /dev/null +++ b/faq.html @@ -0,0 +1,333 @@ + + + + FAQ + + + + + + + + + + + RapiDoc + + + + + + + + + + + + + + + + + + + + + + +
    +
    + +
    + + + + +
    + + + + +
    + + +
    +
    +

    ➕

    +

    What services does the platform offer?

    +
    +

    Our platform provides a range of healthcare services, including real-time information on hospital bed availability, patient statistics, OPD appointment booking, blood group availability, and much more.

    + +
    +

    ➕

    +

    How can I check the availability of hospital beds?

    +
    +

    To check hospital bed availability, log in to your account, navigate to the "Hospital Services" section, and select "Bed Availability." You will be able to see real-time updates on the availability of beds in your preferred hospitals.

    + +
    +

    ➕

    +

    Can I book an OPD appointment through the platform?

    +
    +

    Yes, you can easily prebook OPD appointments. Visit the "Appointments" section, choose your preferred doctor and hospital, and select a convenient time slot to book your appointment.

    + +
    +

    ➕

    +

    How do I find the availability of specific blood groups in hospitals?

    +
    +

    Go to the "Blood Bank" section, select the required blood group, and the platform will display the current availability status in various hospitals and blood banks.

    + +
    +

    ➕

    +

    Is there a mobile app for this platform?

    +
    +

    Yes, our platform is accessible via a mobile app available for both Android and iOS devices. You can download it from the respective app stores.

    + +
    +

    ➕

    +

    How do I register on the platform?

    +
    +

    To register, click on the "Sign Up" button on the homepage, fill in the required details, and verify your email address. Once registered, you can log in to access all the services.

    + +
    +

    ➕

    +

    Can I cancel or reschedule my OPD appointment?

    +
    +

    Yes, you can cancel or reschedule your OPD appointment through the "Appointments" section. Please note that some hospitals may have specific policies regarding cancellations and rescheduling, so check the terms during the booking process.

    + +
    +

    ➕

    +

    Can I access my medical records through the platform?

    +
    +

    Yes, you can access your medical records under the "My Health Records" section. Ensure that your hospital is integrated with our platform to view your records.

    + +
    +

    ➕

    +

    How can I contact customer support?

    +
    +

    You can contact our customer support team by clicking on the "Contact Us" link at the bottom of the homepage. We offer support via email, phone, and live chat.

    + +
    +

    ➕

    +

    Is my personal information secure on the platform?

    +
    +

    Yes, we prioritize your privacy and security. Our platform uses advanced encryption technologies to ensure that your personal and medical information is securely stored and transmitted.

    + +
    +

    ➕

    +

    Are there any fees for using the platform?

    +
    +

    Basic services such as browsing hospital information and checking bed availability are free. However, there may be fees for certain premium services like detailed health analytics and advanced appointment features. These fees will be clearly indicated before any charges are applied.

    + +
    +

    ➕

    +

    I have many more questions for you!

    +
    +

    Contact us! We will be there for support at rapidoc@gmail.com.

    + +
    +
    + + + + + +