Upload 32 files

.env

@@ -0,0 +1,2 @@
+GOOGLE_API_KEY="AIzaSyAyLLDdmALH6qrLa7gnnNX4vRWWx2zB1m8"
+PINECONE_API_KEY="996d2b6e-9968-46a8-a1ca-10fc647eb550"

Dockerfile

@@ -0,0 +1,14 @@
+# read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+WORKDIR /code
+
+COPY ./requirements.txt /code/requirements.txt
+
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+COPY . .
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "main:app"]

main.py

@@ -0,0 +1,97 @@
+from flask import Flask, request, render_template, jsonify
+import google.generativeai as genai
+from langchain_google_genai import GoogleGenerativeAIEmbeddings, ChatGoogleGenerativeAI
+from langchain.prompts import PromptTemplate
+from dotenv import load_dotenv
+from langchain_pinecone import PineconeVectorStore
+import os
+
+load_dotenv()
+genai.configure(api_key=os.getenv("GOOGLE_API_KEY"))
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/chatbot')
+def chatbot():
+    return render_template('med_chatbot.html')
+
+@app.route('/identification')
+def identification():
+    return render_template('skin_disease_identification.html')
+
+
+@app.route('/get', methods=['POST'])
+def get_response():
+    user_question = request.form['msg']  # Get the user's message from the form data
+    response = user_input(user_question)  # Get the response from the bot
+    return jsonify({'response': response})  # Send the response back to the client
+
+def user_input(user_question):
+    embeddings = GoogleGenerativeAIEmbeddings(model="models/embedding-001")
+    index_name = "medicalchatbot2"
+    vectorstore = PineconeVectorStore(index_name=index_name, embedding=embeddings, namespace="example-namespace")
+    docs = vectorstore.similarity_search(user_question, namespace="example-namespace")
+
+    generation_config = {
+      "temperature": 1,
+      "top_p": 0.95,
+      "top_k": 0,
+      "max_output_tokens": 8192,
+    }
+
+    safety_settings = [
+      {
+        "category": "HARM_CATEGORY_HARASSMENT",
+        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
+      },
+      {
+        "category": "HARM_CATEGORY_HATE_SPEECH",
+        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
+      },
+      {
+        "category": "HARM_CATEGORY_SEXUALLY_EXPLICIT",
+        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
+      },
+      {
+        "category": "HARM_CATEGORY_DANGEROUS_CONTENT",
+        "threshold": "BLOCK_MEDIUM_AND_ABOVE"
+      },
+    ]
+
+    model = genai.GenerativeModel(model_name="gemini-1.5-pro-latest",
+                                  generation_config=generation_config,
+                                  safety_settings=safety_settings)
+
+    prompt_template = """
+    you are a Medical Assistant. If user writes name of the disease, then explain the symptoms and treatment for that disease. Answer the question as detailed as possible, make sure to provide all the details, if the answer is not in provided context then create an answer by yourself that makes sense. give the answer point wise.\n\n
+    Context:\n {context}?\n
+    Question: \n{question}\n
+    Answer:
+    """
+
+    prompt = PromptTemplate(template=prompt_template, input_variables=["context", "question"])
+
+    convo = model.start_chat(history=[
+        {
+            "role": "user",
+            "parts": ["I am writing an initial prompt. read it carefully. I am deploying you in medical chatbot. you have to act as a medical assistant. your next question will be asked by a user related to medical information. help the user identify the disease based on his symptoms. give him treatment suggestions. and other relevant information. now when you give the response, do not use any title or header or bold letters. just use line spaces. all the best."]
+        },
+        {
+            "role": "model",
+            "parts": ["sounds good! i'm ready to assist users with their medical concerns. just provide me with the user's symptoms and i'll do my best to help diagnose the issue, suggest treatments, and offer relevant information. remember, i'm only an AI assistant, so it's crucial for users to consult with a qualified healthcare professional for a proper diagnosis and treatment plan."]
+        },
+    ])
+
+    response = convo.send_message(user_question)
+    response_text = convo.last.text  # Extract the text from the ChatSession object
+    return response_text
+
+def main():
+    app.run(debug=True)
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,11 @@
+streamlit
+google-generativeai
+python-dotenv
+langchain
+PyPDF2
+chromadb
+faiss-cpu
+langchain_google_genai
+flask
+langchain_pinecone
+gunicorn

static/css/main.css

@@ -0,0 +1,825 @@
+@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');
+
+
+:root{
+    --clr-blue: #458ff6;
+    --clr-black: #000;
+    --clr-white: #fff;
+    --clr-gray: #7d7987;
+    --clr-dark-blue: #233348;
+    --clr-dark-purple: #1f1534;
+    --font-family-mulish: 'Mulish', sans-serif;
+    --transition-default: all 300ms ease-in-out;
+}
+
+html{
+    scroll-behavior: smooth;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    -webkit-text-size-adjust: 100%;
+}
+
+/* some resets & configuration */
+*,
+*::before,
+*::after{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+ul, ol{
+    list-style-type: none;
+}
+a{
+    text-decoration: none;
+    color: unset;
+    transition: var(--transition-default);
+}
+
+a:focus, a:hover{
+    color: unset;
+}
+
+img, picture, video, canvas, svg{
+    max-width: 100%;
+    display: block;
+}
+input, button, textarea, select{
+    font: inherit;
+    outline: 0;
+}
+h1, h2, h3, h4, h5, h6{
+    overflow-wrap: break-word;
+}
+textarea{
+    resize: none;
+}
+img, object, embed, video{
+    max-width: 100%;
+}
+
+body{
+    font-family: var(--font-family-mulish);
+    line-height: 1.6;
+    height: 100%;
+    font-weight: 300;
+}
+
+button{
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+}
+.page-wrapper{
+    overflow: hidden!important;
+}
+
+/* header section  & navbar */
+.header{
+    position: relative;
+    min-height: 100vh;
+    background-color: var(--clr-blue);
+}
+.header *{
+    color: var(--clr-white);
+}
+.navbar{
+    padding: 56px 0 80px 0;
+}
+.brand-and-toggler{
+    width: 100%;
+}
+.navbar-content{
+    height: 41px;
+}
+.navbar-brand .brand-shape{
+    width: 41px;
+    height: 41px;
+    border-radius: 50%;
+    background-color: var(--clr-white);
+    font-size: 26px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    margin-right: 12px;
+    color: var(--clr-blue);
+}
+
+.navbar-brand .brand-text{
+    color: var(--clr-white);
+    font-size: 24px;
+}
+.nav-item{
+    margin-left: 40px;
+}
+.nav-link{
+    font-weight: 400;
+    font-size: 18px;
+}
+.nav-link:hover{
+    opacity: 0.9;
+}
+.nav-link.nav-active{
+    position: relative;
+    color: var(--clr-white);
+    font-weight: 700;
+    opacity: 1;
+}
+.nav-link.nav-active::after{
+    content: "";
+    position: absolute;
+    bottom: -7px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background-color: var(--clr-white);
+}
+.navbar-show-btn{
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.navbar-hide-btn{
+    display: none;
+    cursor: pointer;
+    transition: var(--transition-default);
+}
+.navbar-hide-btn:hover{
+    opacity: 0.8;
+}
+.element-one{
+    position: absolute;
+    top: calc(56px + 41px + 63px);
+    left: 0;
+}
+.element-one img{
+    width: 60px;
+}
+
+/* banner */
+.banner-title{
+    font-size: 48px;
+    line-height: 1.166;
+}
+.banner-content{
+    display: grid;
+    column-gap: 78px;
+    grid-template-columns: repeat(2, 1fr);
+    align-items: center;
+}
+.banner-left .content-wrapper{
+    max-width: 445px;
+    margin-left: auto;
+}
+.banner-left .content-wrapper p{
+    max-width: 340px;
+}
+.banner-left .text{
+    margin-top: 25px;
+    margin-bottom: 45px;
+}
+
+/* services */
+.sc-services{
+    padding-top: 179px;
+    padding-bottom: 115.9px;
+    position: relative;
+    overflow: hidden;
+}
+.sc-services .content-wrapper{
+    max-width: 670px;
+    margin-right: auto;
+    margin-left: auto;
+}
+.sc-services .content-wrapper .text{
+    line-height: 1.6667;
+}
+.services-list{
+    margin-top: calc(83px - 18.5px);
+    margin-bottom: -18.5px;
+    margin-right: -18.5px;
+    margin-left: -18.5px;
+    display: flex;
+    flex-wrap: wrap;
+}
+.services-item{
+    box-shadow: 10px 40px 50px 0px #e5e9f666;
+    background-color: var(--clr-white);
+    border-radius: 20px;
+    width: 350px;
+    min-height: 354px;
+    padding: 46px 38px;
+    margin: 18.5px;
+    width: calc(33.3333% - 37px);
+    transition: var(--transition-default);
+}
+.services-item:hover{
+    box-shadow:  rgba(0, 0, 0, 0.1) 0 20px 25px -5px, rgba(0, 0, 0, 0.04) 0 10px 10px -5px;
+}
+.services-item .item-title{
+    font-size: 24px;
+    margin-top: 22px;
+    margin-bottom: 12px;
+}
+.services-shape{
+    position: absolute;
+    z-index: -1;
+    top: 290px;
+    left: -70px;
+}
+.services-main-btn{
+    margin-top: 69px;
+}
+
+/* grid block one */
+.grid-content .content-wrapper{
+    max-width: 360px;
+}
+.grid-content{
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 137px;
+}
+.grid-content .title-box .title-separator{
+    margin-left: 0;
+    margin-top: 26px;
+}
+.grid-content .text{
+    line-height: 1.667;
+}
+.grid-content .btn{
+    margin-top: 37px;
+}
+
+/* grid one */
+.sc-grid-one{
+    padding: 115.5px 0 114.5px 0;
+    background-color: var(--clr-blue);
+}
+.sc-grid-one .grid-content .title-box .title-separator{
+    background-color: var(--clr-white);
+}
+
+/* grid two */
+.sc-grid-two{
+    padding: 114.5px 0 125px 0;
+}
+.sc-grid-two .grid-content .grid-img{
+    order: 2;
+}
+.sc-grid-two .grid-content .grid-text .content-wrapper{
+    max-width: 340px;
+}
+.sc-grid-two .btn:hover img{
+    filter: invert(100%) brightness(100);
+}
+.sc-grid-two .grid-content .grid-text{
+    margin-left: auto;
+}
+.sc-grid-two .btn img{
+    margin-left: 7px;
+}
+
+/* feedback section */
+.sc-feedback{
+    padding: 125px 0 138px 0;
+}
+.feedback-content{
+    max-width: 1120px;
+    background: linear-gradient(208.18deg, #67c3f3 9.05%, #5a98f2 76.74%);
+    border-radius: 24px;
+    margin-right: auto;
+    margin-left: auto;
+    min-height: 425px;
+    position: relative;
+}
+.feedback-content .title-box{
+    padding-top: 61px;
+}
+.feedback-content .title-box .title-separator{
+    background-color: var(--clr-white);
+}
+.feedback-content .feedback-element{
+    position: absolute;
+    right: -50px;
+    top: -15px;
+    z-index: 1;
+}
+.feedback-content .feedback-element-2{
+    position: absolute;
+    bottom: 50px;
+    left: -52px;
+    z-index: -1;
+}
+.feedback-item .item-left .item-info{
+    margin-left: 29px;
+}
+.feedback-item{
+    padding: 66px 124px 86px;
+    align-items: center;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 111px;
+}
+.feedback-item .item-img{
+    width: 141px;
+    height: 141px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 4px solid var(--clr-white);
+}
+.feedback-item .item-img img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: 50%;
+}
+.feedback-item .item-info .name{
+    font-size: 22px;
+}
+.feedback-item .item-info .designation{
+    font-size: 18px;
+}
+.feedback-item .item-right{
+    max-width: 340px;
+    line-height: 1.57;
+}
+.feedback-list{
+    position: relative;
+}
+.feedback-list .owl-dots{
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    top: calc(100% + 40px);
+}
+.feedback-list .owl-dots .owl-dot span{
+    background-color: var(--clr-blue)!important;
+    opacity: 0.3;
+}
+.feedback-list .owl-dots .owl-dot:hover span{
+    background-color: var(--clr-blue)!important;
+    opacity: 1;
+}
+.feedback-list .owl-dots .owl-dot.active span{
+    opacity: 1;
+}
+.feedback-list .owl-nav{
+    position: absolute;
+    top: calc(100% + 24px);
+    left: 50%;
+    transform: translateX(-50%);
+}
+.feedback-list .owl-nav button:hover{
+    background-color:transparent!important;
+    color: var(--clr-blue)!important;
+}
+.feedback-list .owl-nav .owl-prev{
+    margin-right: 286px;
+}
+.feedback-list .owl-nav{
+    color: var(--clr-blue);
+    opacity: 1;
+}
+.feedback-list .owl-nav .disabled{
+    opacity: 0.3;
+}
+
+/* articles */
+.sc-articles{
+    position: relative;
+    padding: 108px 0 64.5px 0;
+}
+.articles-item{
+    box-shadow: 10px 40px 50px 0px #e5e9f666;
+    border-radius: 20px;
+    background-color: var(--clr-white);
+    max-width: 350px;
+}
+.articles-list{
+    margin-right: -17px;
+    margin-left: -17px;
+    margin-top: 79px;
+}
+.articles-shape{
+    position: absolute;
+    right: 0;
+    top: 200px;
+    z-index: -1;
+}
+.articles-item{
+    width: calc(33.3333% - 34px);
+    overflow: hidden;
+    margin: 0 17px;
+    transition: var(--transition-default);
+}
+.articles-item:hover{
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
+}
+.articles-item .item-img{
+    height: 246px;
+    overflow: hidden;
+}
+.articles-item .item-img img{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+.articles-item .item-body{
+    padding: 24px 33px 35px;
+}
+.articles-item .item-title{
+    font-weight: 700;
+    line-height: 1.52;
+    font-size: 21px;
+    margin-bottom: 12px;
+}
+.articles-item .text{
+    font-weight: 300;
+    font-size: 16px;
+    margin-bottom: 25px;
+}
+.articles-item .item-link-text{
+    font-weight: 600;
+    font-size: 17px;
+}
+.articles-item .item-link-icon{
+    margin-left: 12px;
+}
+.articles-item .item-link:hover{
+    color: #1472f4;
+}
+.articles-content{
+    position: relative;
+}
+.articles-element{
+    position: absolute;
+    top: 105px;
+    left: -5px;
+    z-index: -1;
+}
+
+/* footer */
+.footer{
+    margin-top: 136.6px;
+    background: linear-gradient(183.41deg, #67c3f3 -8.57%, #5a98f2 82.96%);
+    padding-top: 118px;
+    padding-bottom: 109px;
+    position: relative;
+}
+
+.footer .navbar-brand{
+    margin-bottom: 17px;
+}
+
+.footer .navbar-brand .brand-shape{
+    background-color: var(--clr-white);
+    color: var(--clr-blue);
+}
+.footer .navbar-brand .brand-text{
+    color: var(--clr-white);
+}
+
+.footer-list{
+    grid-template-columns: 3fr 1fr 1fr 1fr;
+    column-gap: 80px;
+    row-gap: 40px;
+}
+.footer-item:nth-child(1){
+    padding-right: 100px;
+}
+.footer-item:nth-child(1) p{
+    font-weight: 300;
+    font-size: 18px;
+}
+.footer-item:nth-child(1) .copyright-text{
+    margin-top: 31px;
+    line-height: 1.55;
+}
+.footer-item-title{
+    font-weight: 700;
+    font-size: 20px;
+    margin-bottom: 24px;
+}
+.footer-links li a{
+    font-weight: 300;
+    font-size: 18px;
+}
+.footer-links li a:hover{
+    opacity: 0.95;
+    text-decoration: underline;
+}
+.footer-links li{
+    margin-bottom: 10px;
+}
+.footer-element-1{
+    bottom: 0;
+    left: 0;
+    position: absolute;
+}
+.footer-element-2{
+    position: absolute;
+    right: 91px;
+    top: -70px;
+    z-index: 1;
+}
+
+/* Media queries */
+@media screen and (max-width: 1120px){
+    .feedback-list .feedback-item{
+        column-gap: 40px;
+    }
+
+    .footer-item:nth-child(1){
+        padding-right: 0;
+    }
+
+    .footer-list{
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media screen and (max-width: 992px){
+    .navbar .navbar-show-btn{
+        display: block;
+    }
+
+    .navbar .navbar-hide-btn i{
+        color: var(--clr-black);
+    }
+
+    .navbar-box{
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: 280px;
+        height: 100%;
+        box-shadow: rgba(149, 157, 165, 0.4) 0px 8px 24px;
+        z-index: 999;
+        background-color: var(--clr-white);
+        padding: 48px 32px 24px;
+        transform: translateX(100%);
+        transition: var(--transition-default);
+    }
+
+    .navbar-box-show{
+        transform: translateX(0);
+    }
+
+    .navbar-box .nav-link{
+        color: var(--clr-black);
+        position: relative;
+        padding-bottom: 8px;
+    }
+
+    .navbar-box .nav-link::after{
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        height: 1px;
+        width: 0;
+        background-color: var(--clr-blue);
+        transition: var(--transition-default);
+    }
+    .navbar-box .nav-link:hover{
+        color: var(--clr-blue);
+    }
+    .navbar-box .nav-link:hover::after{
+        width: 100%;
+    }
+    .navbar-box .nav-link.nav-active{
+        color: var(--clr-blue);
+    }
+    .navbar-box .nav-item{
+        margin: 12px 0;
+    }
+    .navbar-box .navbar-nav{
+        flex-direction: column;
+    }
+    .navbar-box .navbar-hide-btn{
+        display: block;
+        position: absolute;
+        right: 16px;
+        top: 16px;
+        font-size: 24px;
+    }
+
+    /* banner */
+    .banner-content{
+        column-gap: 36px;
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .banner .banner-left .content-wrapper{
+        max-width: 540px;
+        margin-right: auto;
+        margin-left: auto;
+        text-align: center;
+    }
+    .banner-left .content-wrapper p{
+        max-width: 100%;
+    }
+    .banner .banner-right{
+        justify-content: center;
+        margin-top: 40px;
+        max-width: 480px;
+        margin-right: auto;
+        margin-left: auto;
+    }
+
+    /* services */
+    .sc-services{
+        padding-top: 80px!important;
+        padding-bottom: 80px!important;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .services-item{
+        width: calc(50% - 37px);
+    }
+
+    .sc-services{
+        padding-top: 120px;
+        padding-bottom: 115.5px;
+    }
+    .services-shape{
+        width: 70%;
+        top: 340px;
+    }
+
+    /* grid one */
+    .sc-grid-one, .sc-grid-two{
+        padding: 100px 0;
+    }
+
+    .grid-content .content-wrapper{
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+    }
+    .grid-content{
+        grid-template-columns: repeat(1, 1fr);
+    }
+    .grid-content .title-box .title-separator{
+        margin-left: auto;
+    }
+    .grid-content .grid-img{
+        max-width: 480px;
+        margin-right: auto;
+        margin-left: auto;
+        margin-bottom: 40px;
+    }
+
+    .sc-grid.sc-grid-two .grid-content .content-wrapper{
+        max-width: 600px;
+        margin-left: auto;
+        margin-right: auto;
+        text-align: center;
+    }
+    .sc-grid-two .grid-content .grid-text{
+        width: 100%;
+        margin-right: 0;
+        margin-left: 0;
+        margin-bottom: 60px;
+    }
+
+    /* feedback */
+    .sc-feedback{
+        padding: 120px;
+    }
+    .feedback-list .feedback-item{
+        grid-template-columns: repeat(1, 1fr);
+        padding: 32px;
+    }
+    .feedback-list .feedback-item .item-right{
+        max-width: 100%;
+        margin-top: 24px;
+    }
+    .feedback-list .owl-nav .owl-prev{
+        margin-right: 200px;
+    }
+    .feedback-content .feedback-element{
+        width: 40px;
+        right: 5px;
+        top: 5px;
+    }
+    .feedback-content .feedback-element-2{
+        width: 50px;
+        left: 0;
+    }
+
+    /* articles */
+    .sc-articles{
+        padding: 100px 0;
+    }
+    .articles-content .articles-item{
+        width: calc(50% - 34px);
+        overflow: hidden;
+        margin: 17px;
+    }
+    .articles-shape{
+        width: 50%;
+    }
+    .articles-element{
+        top: 180px;
+        width: 60px;
+    }
+
+    /* footer */
+    .footer-element-1{
+        width: 60px;
+    }
+    .footer-element-22{
+        width: 60px;
+        right: 0;
+        top: -35px;
+    }
+}
+
+@media screen and (max-width: 768px){
+    /* navbar */
+    .element-one img{
+        width: 40px;
+    }
+    /* grid one */
+    .sc-grid-one, .sc-grid-two{
+        padding: 80px 0;
+    }
+
+    /* feedback */
+    .sc-feedback{
+        padding: 80px 0;
+    }
+    .feedback-list .feedback-item{
+        padding-right: 20px;
+        padding-left: 20px
+    }
+    .feedback-list .feedback-item .item-left{
+        flex-direction: column;
+    }
+    .feedback-list .feedback-item .item-left .item-info{
+        margin-left: 0;
+        text-align: center;
+        margin-top: 16px;
+    }
+    .feedback-list .owl-nav .owl-prev{
+        margin-right: 120px;
+    }
+
+    /* articles */
+    .sc-articles{
+        padding: 80px 0;
+    }
+
+    /* footer */
+    .footer-list{
+        grid-template-columns: repeat(1, 1fr);
+        text-align: center;
+    }
+    .footer-list .navbar-brand{
+        justify-content: center;
+    }
+    .footer-list .footer-item:nth-child(1){
+        max-width: 450px;
+        margin-right: auto;
+        margin-left: auto;
+    }
+}
+
+@media screen and (max-width: 678px){
+    .sc-services .services-list{
+        margin-right: 0;
+        margin-left: 0;
+    }
+
+    .services-list .services-item{
+        width: 100%;
+        margin: 12px 0;
+    }
+
+    .articles-list .articles-item{
+        width: calc(100% - 34px);
+        overflow: hidden;
+        max-width: 100%;
+    }
+}
+
+@media screen and (max-width: 576px){
+    .services-item{
+        text-align: center;
+    }
+    .services-item .item-icon img{
+        margin-right: auto;
+        margin-left: auto;
+    }
+}
+
+@media screen and (max-width: 450px){
+    .navbar-box{
+        width: 100%;
+    }
+}

static/css/utilities.css

@@ -0,0 +1,155 @@
+/* utilities classes */
+.container{
+    margin: 0 auto;
+    padding-right: 16px;
+    padding-left: 16px;
+    max-width: calc(1273px - 32px);
+}
+
+/* text stylings and colors */
+.text{
+    color: var(--clr-gray);
+    mix-blend-mode: normal;
+    font-weight: 300;
+    font-style: normal;
+}
+.text-blue{color: var(--clr-blue);}
+.text-black{color: var(--clr-black);}
+.text-white{color: var(--clr-white);}
+.text-gray{color: var(--clr-gray);}
+.text-dark-purple{color: var(--clr-dark-purple);}
+
+.text-uppercase{text-transform: uppercase;}
+.text-capitalize{text-transform: capitalize;}
+.text-lowercase{text-transform: lowercase;}
+.text-center{text-align: center;}
+.text-start{text-align: left;}
+.text-end{text-align: right;}
+.text-justify{text-align: justify;}
+.text-nowrap{white-space: nowrap;}
+
+/* backgrounds colors */
+.bg-transparent{background-color: transparent;}
+.bg-white{background-color: var(--clr-white);}
+.bg-black{background-color: var(--clr-black);}
+.bg-blue{background-color: var(--clr-blue);}
+.bg-gray{background-color: var(--clr-gray);}
+.bg-dark-purple{background-color: var(--clr-dark-purple);}
+
+.op-01{opacity: 0.1;}
+.op-02{opacity: 0.2;}
+.op-03{opacity: 0.3;}
+.op-04{opacity: 0.4;}
+.op-05{opacity: 0.5;}
+.op-06{opacity: 0.6;}
+.op-07{opacity: 0.7;}
+.op-08{opacity: 0.8;}
+.op-09{opacity: 0.9;}
+
+/* font weights */
+.fw-3{font-weight: 300;}
+.fw-4{font-weight: 400;}
+.fw-5{font-weight: 500;}
+.fw-6{font-weight: 600;}
+.fw-7{font-weight: 700;}
+.fw-8{font-weight: 800;}
+.fw-9{font-weight: 900;}
+
+/* display */
+.d-block{display: block;}
+.d-inline{display: inline;}
+.d-inline-block{display: inline-block;}
+.d-flex{display: flex;}
+.d-inline-flex{display: inline-flex;}
+.d-grid{display: grid;}
+.d-none{display: none;}
+
+/* flex */
+.justify-content-start{justify-content: flex-start;}
+.justify-content-end{justify-content: flex-end;}
+.justify-content-center{justify-content: center;}
+.align-items-center{align-items: center;}
+.align-items-stretch{align-items: stretch;}
+.align-items-end{align-items: flex-start;}
+.align-items-start{align-items: flex-start;}
+.align-items-baseline{align-items: baseline;}
+.flex-column{flex-direction: column;}
+.flex-row{flex-direction: row;}
+.flex-wrap{flex-wrap: wrap;}
+
+/* vertically and horizontally centered */
+.flex-center{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.justify-content-between{justify-content: space-between;}
+
+/* buttons */
+.btn{
+    min-width: 200px;
+    height: 56px;
+    border-radius: 54px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 18px;
+    color: var(--clr-white);
+    transition: var(--transition-default);
+}
+
+.btn:hover{
+    color: var(--clr-white);
+    background-color: #1472f4;
+    box-shadow: rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
+}
+.btn-primary{
+    background-color: var(--clr-blue);
+}
+.btn-primary-outline{
+    border: 1.4px solid var(--clr-blue);
+    color: var(--clr-blue);
+}
+.btn-secondary{
+    background-color: var(--clr-white);
+    color: var(--clr-blue);
+}
+.btn-white-outline{
+    color: var(--clr-white);
+    border: 1.4px solid var(--clr-white);
+}
+.btn-white-outline:hover{
+    background-color: var(--clr-white);
+    color: var(--clr-blue);
+}
+
+/* title */
+.title-box .title-box-name{
+    font-weight: 700;
+    font-size: 36px;
+}
+.title-box .title-separator{
+    height: 2px;
+    background-color: var(--clr-black);
+    width: 56px;
+    margin-top: 10px;
+    margin-bottom: 33px;
+}
+
+/* margin auto */
+.mx-auto{
+    margin-right: auto;
+    margin-left: auto;
+}
+
+@media screen and (max-width: 992px){
+    .title-box .title-box-name{
+        font-size: 32px;
+    }
+}
+
+.resize-animation-stopper *{
+    animation: none!important;
+    transition: none!important;
+}

static/js/script.js

@@ -0,0 +1,30 @@
+
+
+$(document).ready(function(){
+    $('.feedback-slider').owlCarousel({
+        loop: false,
+        margin: 10,
+        nav: true,
+        items: 1,
+        autoplay: true,
+        navText: ["<i class = 'fas fa-arrow-left'></i>", "<i class = 'fas fa-arrow-right'></i>"]
+    });
+
+    // stop animation on resize
+    let resizeTimer;
+    $(window).resize(function(){
+        $(document.body).addClass('resize-animation-stopper');
+        clearTimeout(resizeTimer);
+        resizeTimer = setTimeout(() => {
+            $(document.body).removeClass('resize-animation-stopper');
+        }, 400);
+    });
+
+    $('.navbar-show-btn').click(function(){
+        $('.navbar-box').addClass('navbar-box-show');
+    });
+
+    $('.navbar-hide-btn').click(function(){
+        $('.navbar-box').removeClass("navbar-box-show");
+    })
+});

templates/index.html

@@ -0,0 +1,495 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <title>MediAssist</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <!-- font awesome -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <!-- owl carousel -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <!-- custom css -->
+        <link rel = "stylesheet" href = "assets/css/main.css" />
+        <link rel = "stylesheet" href = "assets/css/utilities.css" />
+        <!-- normalize.css -->
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/utilities.css') }}">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    </head>
+    <body>
+        
+        <div class="page-wrapper">
+            <!-- header -->
+            <header class = "header">
+                <nav class = "navbar">
+                    <div class="container">
+                        <div class="navbar-content d-flex justify-content-between align-items-center">
+                            <div class = "brand-and-toggler d-flex align-items-center justify-content-between">
+                                <a href = "#" class = "navbar-brand d-flex align-items-center">
+                                    <span class="brand-shape d-inline-block text-white">M</span>
+                                    <span class="brand-text fw-7">MediAssist</span>
+                                </a>
+                                <button type = "button" class = "d-none navbar-show-btn">
+                                    <i class = "fas fa-bars"></i>
+                                </button>
+                            </div>
+
+                            <div class = "navbar-box">
+                                <button type = "button" class = "navbar-hide-btn">
+                                    <i class = "fas fa-times"></i>
+                                </button>
+
+                                <ul class = "navbar-nav d-flex align-items-center">
+                                    <li class = "nav-item">
+                                        <a href = "#" class = "nav-link text-white nav-active text-nowrap">Home</a>
+                                    </li>
+                                    <li class = "nav-item">
+                                        <a href = "#" class = "nav-link text-white text-nowrap">Find a doctor</a>
+                                    </li>
+                                    <li class = "nav-item">
+                                        <a href = "#" class = "nav-link text-white text-nowrap">Apps</a>
+                                    </li>
+                                    <li class = "nav-item">
+                                        <a href = "#" class = "nav-link text-white text-nowrap">Testimonials</a>
+                                    </li>
+                                    <li class = "nav-item">
+                                        <a href = "#" class = "nav-link text-white text-nowrap">About us</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </nav>
+
+                <div class="element-one">
+                    <img src = "{{ url_for('static', filename='images/element-img-1.png') }}" alt = "">
+                </div>
+
+                <div class="banner">
+                    <div class="container">
+                        <div class="banner-content">
+                            <div class="banner-left">
+                                <div class="content-wrapper">
+                                    <h1 class="banner-title">Virtual healthcare <br> for you</h1>
+                                    <p class="text text-white">MediAssist provides progressive, and affordable healthcare, accessible on mobile and onnline for everyone</p>
+                                    <a href = "#" class="btn btn-secondary">Consult today</a>
+                                </div>
+                            </div>
+
+                            <div class = "banner-right d-flex align-items-center justify-content-end">
+                                    <img src="{{ url_for('static', filename='images/banner-image.png') }}" alt="">
+
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </header>
+            <!-- end of header -->
+
+            <main>
+                <section class = "sc-services">
+                    <div class = "services-shape">
+                        <img src="{{ url_for('static', filename='images/curve-shape-1.png') }}" alt="">
+
+                    </div>
+                    <div class="container">
+                        <div class = "services-content">
+                            <div class="title-box text-center">
+                                <div class = "content-wrapper">
+                                    <h3 class = "title-box-name">Our services</h3>
+                                    <div class = "title-separator mx-auto"></div>
+                                    <p class = "text title-box-text">We provide you the best choices for you. Adjust it to your health needs and make sure you undergo treatment with our highly qualified doctors you can consult with us which type of service is suitable for your health</p>
+                                </div>
+                            </div>
+
+                            <div class = "services-list">
+                                <div class = "services-item">
+                                    <div class = "item-icon">
+                                        <img src="{{ url_for('static', filename='images/service-icon-1.png') }}" alt="service icon">
+
+                                    </div>
+                                    <h5 class = "item-title fw-7">Search doctor</h5>
+                                    <p class = "text">Choose your doctor form thousands of specialist, general and trusted hospitals.</p>
+                                </div>
+
+                                <div class = "services-item">
+                                    <div class = "item-icon">
+                                        <img src="{{ url_for('static', filename='images/service-icon-2.png') }}" alt="service icon">
+
+                                    </div>
+                                    <h5 class = "item-title fw-7">Online pharmacy</h5>
+                                    <p class = "text">Buy your medicines with our mobile application with a simple delivery system</p>
+                                </div>
+
+                                <div class = "services-item">
+				<a href="/chatbot" class="service-link">
+                                    <div class = "item-icon">
+                                        <img src="{{ url_for('static', filename='images/service-icon-3.png') }}" alt="service icon">
+
+                                    </div>
+                                    <h5 class = "item-title fw-7">Medibot</h5>
+                                    <p class = "text">Free chat with our medical chatbot.</p>
+				</a>
+                                </div>
+
+                                <div class = "services-item">
+                                    <div class = "item-icon">
+                                        <img src="{{ url_for('static', filename='images/service-icon-4.png') }}" alt="service icon">
+
+                                    </div>
+                                    <h5 class = "item-title fw-7">Details info</h5>
+                                    <p class = "text">Free consultation with our trusted doctors and get the best recommendations.</p>
+                                </div>
+
+                                <div class = "services-item">
+                                    <div class = "item-icon">
+                                        <img src="{{ url_for('static', filename='images/service-icon-5.png') }}" alt="service icon">
+
+                                    </div>
+                                    <h5 class = "item-title fw-7">Emergency care</h5>
+                                    <p class = "text">You can get 24/7 urgent care for yourself or your children and your lovely family.</p>
+                                </div>
+
+                                <div class = "services-item">
+                                    <a href="/identification" class="service-link">
+
+                                    <div class = "item-icon">
+                                        <img src="{{ url_for('static', filename='images/service-icon-6.png') }}" alt="service icon">
+
+                                    </div>
+                                    <h5 class = "item-title fw-7">skin disease identification</h5>
+                                    <p class = "text">unaware about your skin disease? Show us and we'll identify it for you.</p>
+                                      </a>
+                                </div>
+                            </div>
+
+                            <div class = "d-flex align-items-center justify-content-center services-main-btn">
+                                <button type = "button" class = "btn btn-primary-outline">Learn more</button>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class = "sc-grid sc-grid-one">
+                    <div class="container">
+                        <div class = "grid-content d-grid align-items-center">
+                            <div class = "grid-img">
+                                <img src="{{ url_for('static', filename='images/health-care-img.png') }}" alt="">
+
+                            </div>
+                            <div class = "grid-text">
+                                <div class = "content-wrapper text-start">
+                                    <div class = "title-box">
+                                        <h3 class = "title-box-name text-white">Leading healthcare providers</h3>
+                                        <div class = "title-separator mx-auto"></div>
+                                    </div>
+
+                                    <p class = "text title-box-text text-white">MediAssist provides progressive, and affordable healthcare, accessible on mobile and online for everyone. To us, it's not just work. We take pride in the solutions we deliver</p>
+                                    <button type = "button" class = "btn btn-white-outline">Learn more</button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class = "sc-grid sc-grid-two">
+                    <div class = "container">
+                        <div class = "grid-content d-grid align-items-center">
+                            <div class = "grid-img">
+                                <img src="{{ url_for('static', filename='images/download-image.png') }}" alt="">
+
+                            </div>
+                            <div class = "grid-text">
+                                <div class = "content-wrapper text-start">
+                                    <div class = "title-box">
+                                        <h3 class = "title-box-name">Download our mobile apps</h3>
+                                        <div class = "title-separator mx-auto"></div>
+                                    </div>
+                                    <p class = "text title-box-text">Our dedicated patient engagement app and web portal allow you to access information instantaneously (no tedeous form, long calls, or administrative hassle) and securely</p>
+                                    <button type = "button" class = "btn btn-primary-outline">
+                                        Download
+                                        <img src="{{ url_for('static', filename='images/arrow-down.svg') }}" />
+
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class = "sc-feedback">
+                    <div class="container">
+                        <div class = "feedback-content">
+                            <div class = "feedback-element">
+                                <img src="{{ url_for('static', filename='images/element-img-3.png') }}">
+
+                            </div>
+                            <div class="feedback-element-2">
+                                <img src="{{ url_for('static', filename='images/element-img-5.png') }}">
+
+                            </div>
+                            <div class = "title-box text-center">
+                                <div class = "content-wrapper">
+                                    <h3 class = "title-box-name text-white">What our customer are saying</h3>
+                                    <div class = "title-separator mx-auto"></div>
+                                </div>
+                            </div>
+
+                            <div class = "feedback-list feedback-slider owl-carousel owl-theme">
+                                <div class = "feedback-item d-grid">
+                                    <div class = "item-left d-flex align-items-center">
+                                        <div class = "item-img">
+                                            <img src="{{ url_for('static', filename='images/person-image.png') }}" alt="">
+
+                                        </div>
+                                        <div class = "item-info text-white">
+                                            <p class = "fw-7 name">Edward Newgate</p>
+                                            <span class = "designation fw-4">Founder Circle</span>
+                                        </div>
+                                    </div>
+                                    <div class = "item-right">
+                                        <p class = "text text-white">"Our dedicated patient engagement app and web portal allow you to access information instantaneoulsy (no tedeous form, long calls, or administrative hassle) and securely"</p>
+                                    </div>
+                                </div>
+
+                                <div class = "feedback-item d-grid">
+                                    <div class = "item-left d-flex align-items-center">
+                                        <div class = "item-img">
+                                            <img src="{{ url_for('static', filename='images/person-image.png') }}" alt="">
+
+                                        </div>
+                                        <div class = "item-info text-white">
+                                            <p class = "fw-7 name">Edward Newgate</p>
+                                            <span class = "designation fw-4">Founder Circle</span>
+                                        </div>
+                                    </div>
+                                    <div class = "item-right">
+                                        <p class = "text text-white">"Our dedicated patient engagement app and web portal allow you to access information instantaneoulsy (no tedeous form, long calls, or administrative hassle) and securely"</p>
+                                    </div>
+                                </div>
+
+                                <div class = "feedback-item d-grid">
+                                    <div class = "item-left d-flex align-items-center">
+                                        <div class = "item-img">
+                                            <img src = "assets/images/person-image.png" alt = "">
+                                        </div>
+                                        <div class = "item-info text-white">
+                                            <p class = "fw-7 name">Simon Paul</p>
+                                            <span class = "designation fw-4">Founder Circle</span>
+                                        </div>
+                                    </div>
+                                    <div class = "item-right">
+                                        <p class = "text text-white">"Our dedicated patient engagement app and web portal allow you to access information instantaneoulsy (no tedeous form, long calls, or administrative hassle) and securely"</p>
+                                    </div>
+                                </div>
+
+                                <div class = "feedback-item d-grid">
+                                    <div class = "item-left d-flex align-items-center">
+                                        <div class = "item-img">
+                                            <img src="{{ url_for('static', filename='images/person-image.png') }}" alt="">
+
+                                        </div>
+                                        <div class = "item-info text-white">
+                                            <p class = "fw-7 name">John Doe</p>
+                                            <span class = "designation fw-4">Founder Circle</span>
+                                        </div>
+                                    </div>
+                                    <div class = "item-right">
+                                        <p class = "text text-white">"Our dedicated patient engagement app and web portal allow you to access information instantaneoulsy (no tedeous form, long calls, or administrative hassle) and securely"</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <section class = "sc-articles">
+                    <div class = "articles-shape">
+                        <img src="{{ url_for('static', filename='images/curve-shape-2.png') }}" alt="">
+
+                    </div>
+                    <div class = "container">
+                        <div class = "articles-content">
+                            <div class = "articles-element">
+                                <img src="{{ url_for('static', filename='images/element-img-2.png') }}" alt="">
+
+                            </div>
+                            <div class = "title-box text-center">
+                                <div class = "content-wrapper">
+                                    <h3 class = "title-box-name">Check out our latest article</h3>
+                                    <div class = "title-separator mx-auto"></div>
+                                </div>
+                            </div>
+                            
+                            <div class = "articles-list d-flex flex-wrap justify-content-center">
+                                <article class = "articles-item">
+                                    <div class = "item-img">
+                                        <img src="{{ url_for('static', filename='images/article-img-1.png') }}">
+
+                                    </div>
+                                    <div class = "item-body">
+                                        <div class = "item-title">Disease detection, check up in the laboratory</div>
+                                        <p class = "text">In this case, the role of the health laboratory is very important to do a disease detection ...</p>
+                                        <a href = "#" class = "item-link text-blue d-flex align-items-baseline">
+                                            <span class = "item-link-text">Read more</span>
+                                            <span class = "item-link-icon">
+                                                <i class = "fas fa-arrow-right"></i>
+                                            </span>
+                                        </a>
+                                    </div>
+                                </article>
+
+                                <article class = "articles-item">
+                                    <div class = "item-img">
+                                        <img src="{{ url_for('static', filename='images/article-img-2.png') }}">
+
+                                    </div>
+                                    <div class = "item-body">
+                                        <div class = "item-title">Herbal medicines that are safe for consumption</div>
+                                        <p class = "text">Herbal medicine is very widely used at this time because of its very good for your health ...</p>
+                                        <a href = "#" class = "item-link text-blue d-flex align-items-baseline">
+                                            <span class = "item-link-text">Read more</span>
+                                            <span class = "item-link-icon">
+                                                <i class = "fas fa-arrow-right"></i>
+                                            </span>
+                                        </a>
+                                    </div>
+                                </article>
+
+                                <article class = "articles-item">
+                                    <div class = "item-img">
+                                        <img src="{{ url_for('static', filename='images/article-img-3.png') }}">
+
+                                    </div>
+                                    <div class = "item-body">
+                                        <div class = "item-title">Natural care for healthy facial skin</div>
+                                        <p class = "text">A healthy lifestyle should start from now and also for your skin health ...</p>
+                                        <a href = "#" class = "item-link text-blue d-flex align-items-baseline">
+                                            <span class = "item-link-text">Read more</span>
+                                            <span class = "item-link-icon">
+                                                <i class = "fas fa-arrow-right"></i>
+                                            </span>
+                                        </a>
+                                    </div>
+                                </article>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+
+            <footer class = "footer">
+                <div class = "container">
+                    <div class = "footer-content">
+                        <div class = "footer-list d-grid text-white">
+                            <div class = "footer-item">
+                                <a href = "#" class = "navbar-brand d-flex align-items-center">
+                                    <span class = "brand-shape d-inline-block text-white">M</span>
+                                    <span class = "brand-text fw-7">MediAssist</span>
+                                </a>
+                                <p class = "text-white">MediAssist provides progressive, and affordable healthcare, accessible on mobile and online for everyone</p>
+                                <p class = "text-white copyright-text">&copy; MediAssist PTY LTD 2023. All rights reserved.</p>
+                            </div>
+
+                            <div class = "footer-item">
+                                <h3 class = "footer-item-title">Company</h3>
+                                <ul class = "footer-links">
+                                    <li><a href = "#">About</a></li>
+                                    <li><a href = "#">Find a doctor</a></li>
+                                    <li><a href = "#">Apps</a></li>
+                                </ul>
+                            </div>
+
+                            <div class = "footer-item">
+                                <h3 class = "footer-item-title">Region</h3>
+                                <ul class = "footer-links">
+                                    <li><a href = "#">Indonesia</a></li>
+                                    <li><a href = "#">Singapore</a></li>
+                                    <li><a href = "#">Hongkong</a></li>
+                                    <li><a href = "#">Canada</a></li>
+                                </ul>
+                            </div>
+
+                            <div class = "footer-item">
+                                <h3 class = "footer-item-title">Help</h3>
+                                <ul class = "footer-links">
+                                    <li><a href = "#">Help center</a></li>
+                                    <li><a href = "#">Contact support</a></li>
+                                    <li><a href = "#">Instructions</a></li>
+                                    <li><a href = "#">How it works</a></li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class = "footer-element-1">
+                    <img src="{{ url_for('static', filename='images/element-img-4.png') }}" alt="">
+
+                </div>
+                <div class = "footer-element-2">
+                    <img src="{{ url_for('static', filename='images/element-img-5.png') }}" alt="">
+
+                </div>
+            </footer>
+        </div>
+        
+
+
+
+
+
+
+
+        <!-- jquery cdn -->
+        <script src="https://code.jquery.com/jquery-3.6.4.js" integrity="sha256-a9jBBRygX1Bh5lt8GZjXDzyOB+bWve9EiO7tROUtj/E=" crossorigin="anonymous"></script>
+        <!-- owl carousel -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+        <!-- custom js -->
+        <script src="{{ url_for('static', filename='js/script.js') }}"></script>
+
+
+        <script>
+            function sendRequest(input) {
+    fetch('http://localhost:5000/chatbot', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({ input: input })
+    })
+    .then(response => response.json())
+    .then(data => {
+        // Display bot response
+        var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://img.freepik.com/free-vector/doctor-character-background_1270-84.jpg?t=st=1711953478~exp=1711957078~hmac=02ec96e4ef878f0702a696389fada16b95b12e21cbc66b1e1a418f6ad64e9ee3&w=740" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data.output + '<span class="msg_time">' + str_time + '</span></div></div>';
+        $("#messageForm").append($.parseHTML(botHtml)); // Append bot response to conversation
+        scrollToBottom(); // Scroll to bottom after appending bot response
+    })
+    .catch(error => console.error('Error:', error));
+}
+
+            $("#messageArea").on("submit", function (event) {
+    // Prevent form submission
+    event.preventDefault();
+    // Get current time
+    const date = new Date();
+    const hour = date.getHours();
+    const minute = date.getMinutes();
+    const str_time = hour + ":" + minute;
+    // Get user input
+    var rawText = $("#text").val();
+    // Display user message
+    var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">' + str_time + '</span></div><div class="img_cont_msg"><img src="https://cdn-icons-png.flaticon.com/512/4140/4140038.png" class="rounded-circle user_img_msg"></div></div>';
+    $("#text").val(""); // Clear input field
+    $("#messageForm").append(userHtml);
+    scrollToBottom();// Append user message to conversation
+    // Send user message to Python server
+    sendRequest(rawText);
+});
+
+        </script>
+    </body>
+</html>

templates/med_chatbot.html

@@ -0,0 +1,562 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <title>MediBot</title>
+    <link rel="icon"
+          href="https://img.freepik.com/premium-photo/red-medical-caduceus-symbol-white-background-3d-rendering_476612-15069.jpg"
+          class="rounded-circle user_img_msg">
+    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
+          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <script src="https://kit.fontawesome.com/d75ed78aeb.js" crossorigin="anonymous"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
+  <!-- font awesome -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <!-- owl carousel -->
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+        <!-- custom css -->
+        <link rel = "stylesheet" href = "assets/css/main.css" />
+        <link rel = "stylesheet" href = "assets/css/utilities.css" />
+        <!-- normalize.css -->
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/main.css') }}">
+        <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/utilities.css') }}">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    
+    <style>
+        /* Paste your CSS code here */
+        body, html {
+    height: 100%;
+    margin: 0;
+    background-image: url('https://img.freepik.com/free-psd/interior-luxury-hospital-hall-generative-ai_587448-2177.jpg?w=1380&t=st=1711982777~exp=1711983377~hmac=c51bf6095f681cd783f1ecd5fed9b3b1e9bb5365ac5658c820148020b7007cc2'); /* Your image URL */
+    background-size: cover;
+    background-position: center;
+}
+
+.home{
+    height: 100%;
+    margin: 0;
+    background-image: url('https://img.freepik.com/free-photo/view-medicine-bandage-arrangement_23-2149341577.jpg?w=1060&t=st=1712301512~exp=1712302112~hmac=a46f1498db978bec565130bed107dacb0f981979a61dc70f9ce52f62cfe9568d'); /* Your image URL */
+    background-size: cover;
+    background-position: center;
+}
+
+
+
+.chat {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.card {
+    height: 90vh;
+    width: 75vw;
+    border-radius: 25px !important;
+    background-color: rgba(255,255,255,0.9); /* white */
+    margin: auto; /* centering */
+}
+
+.home-card{
+    background: linear-gradient(135deg, rgba(255, 182, 193, 0.8), rgba(255, 105, 180, 0.8), rgba(186, 85, 211, 0.8));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.chatbot-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.chatbot-container h2{
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Adjust font-family as needed */
+    color: #fff; /* White color */
+}
+
+.chatbot-container h3 {
+    font-size: 24px;
+    color: #ffffffb1;
+    text-align: center;
+    line-height: 1.5;
+    margin-top: 20px;
+    font-family: 'Roboto', sans-serif; /* Apply special font */
+}
+
+.button {
+    display: inline-block;
+    padding: 10px 20px;
+    margin: 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    color: #fff !important;
+    text-align: center;
+    text-decoration: none !important;
+    background: linear-gradient(135deg, #FF1493, #C71585); /* Default background */
+    transition: background 0.5s; /* Transition effect for background change */
+}
+
+.button:hover {
+    background: linear-gradient(135deg, #8A2BE2, #4B0082) !important; /* Gradient change on hover */
+    opacity: 0.8;
+}
+
+.button:active {
+    transform: translateY(1px) !important;
+}
+
+.contacts_body {
+    padding:  0.75rem 0 !important;
+    overflow-y: auto;
+    white-space: nowrap;
+}
+
+.msg_card_body {
+    overflow-y: auto;
+}
+
+.card-header {
+    border-radius: 15px 15px 0 0 !important;
+    border-bottom: 0 !important;
+}
+
+.card-footer {
+    border-radius: 0 0 15px 15px !important;
+    border-top: 0 !important;
+}
+
+.container {
+    align-content: center;
+}
+
+.search {
+    border-radius: 15px 0 0 15px !important;
+    background-color: rgba(241, 242, 242, 1) !important; /* semi-transparent white */
+    border:0 !important;
+    color: #333 !important; /* dark gray */
+}
+
+.search:focus {
+    box-shadow: none !important;
+    outline: 0px !important;
+}
+
+.type_msg {
+    background-color: rgba(255,255,255,0) !important; /* semi-transparent white */
+    color: #333 !important; /* dark gray */
+    height: 60px !important;
+    border: 0px;
+    overflow-y: auto;
+    text-transform: capitalize;
+}
+
+.type_msg:focus {
+    box-shadow: none !important;
+    outline: 0px !important;
+}
+
+.attach_btn,
+.send_btn,
+.search_btn {
+    border-radius: 9px 9px 9px 9px !important;
+    height: 60px;
+    background-color: rgba(30, 48, 80, 1) !important; /* semi-transparent white */
+    border: 0 !important;
+    color: #fff !important; /* dark gray */
+    cursor: pointer;
+}
+
+.contacts {
+    list-style: none;
+    padding: 0;
+}
+
+.contacts li {
+    width: 100% !important;
+    padding: 5px 10px;
+    margin-bottom: 15px !important;
+}
+
+.active {
+    background-color: rgba(255,255,255,0.3);
+}
+
+.user_img,
+.user_img_msg {
+    height: 55px;
+    width: 55px;
+    border: 1.5px solid #f5f6fa;
+}
+
+.img_cont,
+.img_cont_msg {
+    position: relative;
+    height: 70px;
+    width: 70px;
+}
+
+.user_info {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 15px;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+
+.user_info span {
+    font-size: 20px;
+    color: #333;
+}
+
+.user_info p {
+    font-size: 10px;
+    color: rgba(51,51,51,0.6);
+}
+
+.video_cam {
+    margin-left: 50px;
+    margin-top: 5px;
+}
+
+.video_cam span {
+    color: #333;
+    font-size: 20px;
+    cursor: pointer;
+    margin-right: 20px;
+}
+
+.msg_cotainer,
+.msg_cotainer_send {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 10px;
+    border-radius: 25px;
+    background-color: #1e3050; /* light blue */
+    padding: 10px;
+    position: relative;
+    color: #fff; /* white */
+}
+
+.msg_cotainer_send {
+    margin-right: 10px;
+    background-color: #0ca678; /* green */
+}
+
+.msg_cotainer span {
+    font-size: 14px; /* Adjust font size for regular text */
+}
+
+.msg_cotainer strong {
+    font-size: 18px; /* Adjust font size for titles or topics */
+    color: #FF1493; /* Adjust color for titles or topics */
+}
+
+.msg_time,
+.msg_time_send {
+    position: absolute;
+    bottom: -15px;
+    color: rgba(0,0,0,0.5);
+    font-size: 10px;
+}
+
+.msg_head {
+    position: relative;
+}
+
+#action_menu_btn {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    color: #333;
+    cursor: pointer;
+    font-size: 20px;
+}
+
+.action_menu {
+    z-index: 1;
+    position: absolute;
+    padding: 15px 0;
+    background-color: rgba(255,255,255,0.5);
+    color: #333;
+    border-radius: 15px;
+    top: 30px;
+    right: 15px;
+    display: none;
+}
+
+.action_menu ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.action_menu ul li {
+    width: 100%;
+    padding: 10px 15px;
+    margin-bottom: 5px;
+}
+
+.action_menu ul li i {
+    padding-right: 10px;
+}
+
+.action_menu ul li:hover {
+    cursor: pointer;
+    background-color: rgba(255,255,255,0.2);
+}
+
+@media(max-width: 576px) {
+    .contacts_card {
+        margin-bottom: 15px !important;
+    }
+}
+
+.navbar-brand .brand-shape {
+    width: 41px;
+    height: 41px;
+    border-radius: 50%;
+    background-color: var(--clr-white);
+    font-size: 26px;
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    margin-right: 12px;
+    color: var(--clr-blue);
+}
+
+.d-inline-block {
+    display: inline-block;
+}
+
+.text-white {
+    color: var(--clr-white);
+}
+
+.navbar {
+    padding: 30px 0 30px 0;
+}
+
+.header {
+    position: relative;
+    min-height: 10vh;
+    background-color: var(--clr-blue);
+}
+      
+*, *::before, *::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+.nav {
+    display: block;
+    unicode-bidi: isolate;
+}
+
+.align-items-center {
+    align-items: center;
+}
+
+.d-flex {
+    display: flex;
+}
+
+
+        /* Add the rest of your CSS styles here */
+    </style>
+    <link rel="stylesheet" type="text/css" href="./style.css"/>
+</head>
+
+<body>
+
+
+            <!-- header -->
+            <header class = "header">
+                <nav class = "navbar">
+                    <div class="container">
+                        <div class="navbar-content d-flex justify-content-between align-items-center">
+                            <div class = "brand-and-toggler d-flex align-items-center justify-content-between">
+                                <a href = "#" class = "navbar-brand d-flex align-items-center">
+                                    <span class="brand-shape d-inline-block">M</span>
+                                    <span class="brand-text fw-7">MediAssist</span>
+                                </a>
+                                <button type = "button" class = "d-none navbar-show-btn">
+                                    <i class = "fas fa-bars"></i>
+                                </button>
+                            </div>
+
+                            <div class = "navbar-box">
+                                <button type = "button" class = "navbar-hide-btn">
+                                    <i class = "fas fa-times"></i>
+                                </button>
+
+                                <ul class = "navbar-nav d-flex align-items-center">
+                                    <li class = "nav-item">
+                                        <a href = "/" class = "nav-link text-white nav-active text-nowrap">Home</a>
+                                    </li>
+                                    
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                </nav>
+            </header>
+  
+
+
+
+  
+<div class="container-fluid h-100">
+    <div class="row justify-content-center h-100">
+        <div class="card">
+            <div class="card-header msg_head">
+                <div class="d-flex bd-highlight">
+                    <div class="img_cont">
+                        <img src="https://img.freepik.com/free-vector/doctor-character-background_1270-84.jpg?t=st=1711953478~exp=1711957078~hmac=02ec96e4ef878f0702a696389fada16b95b12e21cbc66b1e1a418f6ad64e9ee3&w=740"
+                             class="rounded-circle user_img">
+                    </div>
+                    <div class="user_info">
+                        <span>MediBot</span>
+                        <p>Empowering Your Health Journey</p>
+                    </div>
+                </div>
+            </div>
+            <div id="messageForm" class="card-body msg_card_body" style="overflow-y: auto; height: 400px;">
+
+            </div>
+            <div class="card-footer">
+                <form id="messageArea" class="input-group">
+                    <input type="text" id="text" name="msg" placeholder="Message" autocomplete="off"
+                           class="form-control type_msg" required/>
+                    <div class="input-group-append">
+                        <button type="submit" id="send" class="input-group-text send_btn"><i
+                                class="fa-solid fa-arrow-right"></i></button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- <script>
+    $(document).ready(function () {
+        // Function to initiate conversation
+        $(window).on('load', function () {
+            scrollToBottom();
+            // Get current time
+            const date = new Date();
+            const hour = date.getHours();
+            const minute = date.getMinutes();
+            const str_time = hour + ":" + minute;
+            // Display bot's initial message
+            var initialMessage = "How may I assist you with your medical inquiries or issues?";
+            var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://img.freepik.com/free-vector/doctor-character-background_1270-84.jpg?t=st=1711953478~exp=1711957078~hmac=02ec96e4ef878f0702a696389fada16b95b12e21cbc66b1e1a418f6ad64e9ee3&w=740" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + initialMessage + '<span class="msg_time">' + str_time + '</span></div></div>';
+            $("#messageForm").append($.parseHTML(botHtml)); // Append bot's initial message to conversation
+        });
+
+        // Function to send user message and receive response
+        $("#messageArea").on("submit", function (event) {
+            // Prevent form submission
+            event.preventDefault();
+
+            // Get current time
+            const date = new Date();
+            const hour = date.getHours();
+            const minute = date.getMinutes();
+            const str_time = hour + ":" + minute;
+
+            // Get user input
+            var rawText = $("#text").val();
+
+            // Display user message
+            var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">' + str_time + '</span></div><div class="img_cont_msg"><img src="https://cdn-icons-png.flaticon.com/512/4140/4140038.png" class="rounded-circle user_img_msg"></div></div>';
+            $("#text").val(""); // Clear input field
+            $("#messageForm").append(userHtml);
+            scrollToBottom();// Append user message to conversation
+
+            // Send user message to server and get response
+            $.ajax({
+                data: {msg: rawText},
+                type: "POST",
+                url: "/get",
+                success: function (data) {
+                    // Display bot response
+                    var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://img.freepik.com/free-vector/doctor-character-background_1270-84.jpg?t=st=1711953478~exp=1711957078~hmac=02ec96e4ef878f0702a696389fada16b95b12e21cbc66b1e1a418f6ad64e9ee3&w=740" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data + '<span class="msg_time">' + str_time + '</span></div></div>';
+                    $("#messageForm").append($.parseHTML(botHtml)); // Append bot response to conversation
+                    scrollToBottom(); // Scroll to bottom after appending bot response
+                }
+            });
+        });
+
+        // Function to scroll to the bottom of the chat window
+        function scrollToBottom() {
+            var chatWindow = document.getElementById("messageForm");
+            chatWindow.scrollTop = chatWindow.scrollHeight;
+        }
+    });
+
+</script> -->
+
+<script>
+    $(document).ready(function () {
+        // Function to initiate conversation
+        $(window).on('load', function () {
+            scrollToBottom();
+            // Get current time
+            const date = new Date();
+            const hour = date.getHours();
+            const minute = date.getMinutes();
+            const str_time = hour + ":" + minute;
+            // Display bot's initial message
+            var initialMessage = "How may I assist you with your medical inquiries or issues?";
+            var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://img.freepik.com/free-vector/doctor-character-background_1270-84.jpg?t=st=1711953478~exp=1711957078~hmac=02ec96e4ef878f0702a696389fada16b95b12e21cbc66b1e1a418f6ad64e9ee3&w=740" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + initialMessage + '<span class="msg_time">' + str_time + '</span></div></div>';
+            $("#messageForm").append($.parseHTML(botHtml)); // Append bot's initial message to conversation
+        });
+        // Function to send user message and receive response
+        $("#messageArea").on("submit", function (event) {
+            // Prevent form submission
+            event.preventDefault();
+            // Get current time
+            const date = new Date();
+            const hour = date.getHours();
+            const minute = date.getMinutes();
+            const str_time = hour + ":" + minute;
+            // Get user input
+            var rawText = $("#text").val();
+            // Display user message
+            var userHtml = '<div class="d-flex justify-content-end mb-4"><div class="msg_cotainer_send">' + rawText + '<span class="msg_time_send">' + str_time + '</span></div><div class="img_cont_msg"><img src="https://cdn-icons-png.flaticon.com/512/4140/4140038.png" class="rounded-circle user_img_msg"></div></div>';
+            $("#text").val(""); // Clear input field
+            $("#messageForm").append(userHtml);
+            scrollToBottom();// Append user message to conversation
+            // Send user message to server and get response
+            $.ajax({
+                data: {msg: rawText},
+                type: "POST",
+                url: "/get",
+                success: function (data) {
+                    // Display bot response
+                    var botHtml = '<div class="d-flex justify-content-start mb-4"><div class="img_cont_msg"><img src="https://img.freepik.com/free-vector/doctor-character-background_1270-84.jpg?t=st=1711953478~exp=1711957078~hmac=02ec96e4ef878f0702a696389fada16b95b12e21cbc66b1e1a418f6ad64e9ee3&w=740" class="rounded-circle user_img_msg"></div><div class="msg_cotainer">' + data.response + '<span class="msg_time">' + str_time + '</span></div></div>';
+                    $("#messageForm").append($.parseHTML(botHtml)); // Append bot response to conversation
+                    scrollToBottom(); // Scroll to bottom after appending bot response
+                }
+            });
+        });
+        // Function to scroll to the bottom of the chat window
+        function scrollToBottom() {
+            var chatWindow = document.getElementById("messageForm");
+            chatWindow.scrollTop = chatWindow.scrollHeight;
+        }
+    });
+</script>
+
+
+
+</body>
+</html>

templates/skin_disease_identification.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hugging Face Space Embed</title>
+    <!-- Add any additional styles or scripts here -->
+    <style>
+        /* Add custom CSS styles here if needed */
+        body {
+            margin: 0;
+            padding: 0;
+            font-family: Arial, sans-serif;
+        }
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        iframe {
+            width: 100%;
+            height: 900px; /* You can adjust the height as needed */
+            border: none;
+        }
+    </style>
+</head>
+<body>
+        <!-- Paste your iframe code here -->
+        <iframe
+	src="https://apurv20-skin-disease-identification-v3.hf.space"
+	frameborder="0"
+	width="850"
+	height="450"
+></iframe>
+
+
+</body>
+</html>

templates/style.css

@@ -0,0 +1,279 @@
+body, html {
+    height: 100%;
+    margin: 0;
+    background-image: url('https://img.freepik.com/free-psd/interior-luxury-hospital-hall-generative-ai_587448-2177.jpg?w=1380&t=st=1711982777~exp=1711983377~hmac=c51bf6095f681cd783f1ecd5fed9b3b1e9bb5365ac5658c820148020b7007cc2'); /* Your image URL */
+    background-size: cover;
+    background-position: center;
+}
+
+.home{
+    height: 100%;
+    margin: 0;
+    background-image: url('https://img.freepik.com/free-photo/view-medicine-bandage-arrangement_23-2149341577.jpg?w=1060&t=st=1712301512~exp=1712302112~hmac=a46f1498db978bec565130bed107dacb0f981979a61dc70f9ce52f62cfe9568d'); /* Your image URL */
+    background-size: cover;
+    background-position: center;
+}
+
+
+
+.chat {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.card {
+    height: 70vh;
+    width: 75vw;
+    border-radius: 25px !important;
+    background-color: rgba(255,255,255,0.9); /* white */
+    margin: auto; /* centering */
+}
+
+.home-card{
+    background: linear-gradient(135deg, rgba(255, 182, 193, 0.8), rgba(255, 105, 180, 0.8), rgba(186, 85, 211, 0.8));
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.chatbot-container{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 20px;
+}
+
+.chatbot-container h2{
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Adjust font-family as needed */
+    color: #fff; /* White color */
+}
+
+.chatbot-container h3 {
+    font-size: 24px;
+    color: #ffffffb1;
+    text-align: center;
+    line-height: 1.5;
+    margin-top: 20px;
+    font-family: 'Roboto', sans-serif; /* Apply special font */
+}
+
+.button {
+    display: inline-block;
+    padding: 10px 20px;
+    margin: 10px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    color: #fff !important;
+    text-align: center;
+    text-decoration: none !important;
+    background: linear-gradient(135deg, #FF1493, #C71585); /* Default background */
+    transition: background 0.5s; /* Transition effect for background change */
+}
+
+.button:hover {
+    background: linear-gradient(135deg, #8A2BE2, #4B0082) !important; /* Gradient change on hover */
+    opacity: 0.8;
+}
+
+.button:active {
+    transform: translateY(1px) !important;
+}
+
+.contacts_body {
+    padding:  0.75rem 0 !important;
+    overflow-y: auto;
+    white-space: nowrap;
+}
+
+.msg_card_body {
+    overflow-y: auto;
+}
+
+.card-header {
+    border-radius: 15px 15px 0 0 !important;
+    border-bottom: 0 !important;
+}
+
+.card-footer {
+    border-radius: 0 0 15px 15px !important;
+    border-top: 0 !important;
+}
+
+.container {
+    align-content: center;
+}
+
+.search {
+    border-radius: 15px 0 0 15px !important;
+    background-color: rgba(241, 242, 242, 1) !important; /* semi-transparent white */
+    border:0 !important;
+    color: #333 !important; /* dark gray */
+}
+
+.search:focus {
+    box-shadow: none !important;
+    outline: 0px !important;
+}
+
+.type_msg {
+    background-color: rgba(255,255,255,0) !important; /* semi-transparent white */
+    color: #333 !important; /* dark gray */
+    height: 60px !important;
+    border: 0px;
+    overflow-y: auto;
+    text-transform: capitalize;
+}
+
+.type_msg:focus {
+    box-shadow: none !important;
+    outline: 0px !important;
+}
+
+.attach_btn,
+.send_btn,
+.search_btn {
+    border-radius: 9px 9px 9px 9px !important;
+    height: 60px;
+    background-color: rgba(30, 48, 80, 1) !important; /* semi-transparent white */
+    border: 0 !important;
+    color: #fff !important; /* dark gray */
+    cursor: pointer;
+}
+
+.contacts {
+    list-style: none;
+    padding: 0;
+}
+
+.contacts li {
+    width: 100% !important;
+    padding: 5px 10px;
+    margin-bottom: 15px !important;
+}
+
+.active {
+    background-color: rgba(255,255,255,0.3);
+}
+
+.user_img,
+.user_img_msg {
+    height: 55px;
+    width: 55px;
+    border: 1.5px solid #f5f6fa;
+}
+
+.img_cont,
+.img_cont_msg {
+    position: relative;
+    height: 70px;
+    width: 70px;
+}
+
+.user_info {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 15px;
+    font-weight: bold;
+    letter-spacing: 1px;
+}
+
+.user_info span {
+    font-size: 20px;
+    color: #333;
+}
+
+.user_info p {
+    font-size: 10px;
+    color: rgba(51,51,51,0.6);
+}
+
+.video_cam {
+    margin-left: 50px;
+    margin-top: 5px;
+}
+
+.video_cam span {
+    color: #333;
+    font-size: 20px;
+    cursor: pointer;
+    margin-right: 20px;
+}
+
+.msg_cotainer,
+.msg_cotainer_send {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: 10px;
+    border-radius: 25px;
+    background-color: #1e3050; /* light blue */
+    padding: 10px;
+    position: relative;
+    color: #fff; /* white */
+}
+
+.msg_cotainer_send {
+    margin-right: 10px;
+    background-color: #0ca678; /* green */
+}
+
+.msg_time,
+.msg_time_send {
+    position: absolute;
+    bottom: -15px;
+    color: rgba(0,0,0,0.5);
+    font-size: 10px;
+}
+
+.msg_head {
+    position: relative;
+}
+
+#action_menu_btn {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    color: #333;
+    cursor: pointer;
+    font-size: 20px;
+}
+
+.action_menu {
+    z-index: 1;
+    position: absolute;
+    padding: 15px 0;
+    background-color: rgba(255,255,255,0.5);
+    color: #333;
+    border-radius: 15px;
+    top: 30px;
+    right: 15px;
+    display: none;
+}
+
+.action_menu ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.action_menu ul li {
+    width: 100%;
+    padding: 10px 15px;
+    margin-bottom: 5px;
+}
+
+.action_menu ul li i {
+    padding-right: 10px;
+}
+
+.action_menu ul li:hover {
+    cursor: pointer;
+    background-color: rgba(255,255,255,0.2);
+}
+
+@media(max-width: 576px) {
+    .contacts_card {
+        margin-bottom: 15px !important;
+    }
+}