DOCPAT-SMART-DISEASE-PRED / Git / [06cc32] /templates/main.html

Models:
Mathew-S/
DOCPAT-SMART-DISEASE-PRED
Downloads: 2
[06cc32]: / templates / main.html
History
Download this file
439 lines (377 with data), 11.6 kB

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="og:title" content="DOC-PAT : Smart Disease Predictor">
  <meta name="author" content="MILIND KASHYAP">
  <meta name="og:image" content="static/favicon.ico">
  <title>DOC-PAT</title>
  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sticky-footer/">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDzwrnQq4xF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

  <style>
    html, body {
      height: 100%;
      margin: 0;
      color: black;
    }
    header {
      color: #000000;
  height: 150px;
  background-color: rgb(94, 162, 231); /* Change to the desired color */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

footer {
  color: #ffffff;
  height: 200px;
  background-color: rgb(94, 162, 231); /* Change to the desired color */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.1);
}


    body {
      font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
      display: flex;
      flex-direction: column;
      background-color: rgb(255, 255, 255);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
    }
    .heading-wrapper {
  display: inline-block;
  background-color: rgba(255, 255, 0, 0.3); /* Light yellow with transparency */
  padding: 30px 60px;
  border-radius: 10px; /* Rounded corners */
}

h2 {
  position: relative;
  font-size: 30px;
  transition: transform 0.3s, color 0.3s; /* Add transition effect for transform and color */
}

h2:hover {
  transform: scale(1.1); /* Scale up text on hover */
  color: #000000; /* Change text color on hover */
}





.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.disease-image {
  width: auto;
  max-width: 100%;
  height: auto;
  border: 5px solid transparent;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.image-container:hover .disease-image {
  transform: scale(1.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); /* Add shadow below image on hover */
  border-color: #000000;
}




    .image-container img {
      width: 300px;
      height: auto;
      margin: 70px;
      cursor: pointer;
      border-radius: 10px;
    }



    .image-text {
      text-align: center;
      margin-top: 0px;
    }

    .image-text p {
      font-size: 30px;
      font-weight: bold;
      color: #333;
      margin-bottom: 0;
      padding: 0;
    }

    .faq-dropdown {
      text-align: center;
    }

    .reviews {
      text-align: center;
      margin-bottom: 20px;
    }

    .fa-star {
      color: #ffd700;
    }

    .contact-info {
      text-align: center;
      color: white;
    }

    .navbar-nav .nav-item {
      margin: 0 10px;
    }

    .navbar-nav .nav-link {
    color: black; /* Set initial text color to black */
    background-color: #ffd700;
    padding: 15px 20px;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s, color 0.3s; /* Include color transition */
    border: 2px solid black;
    align-items: center;
  }

  .navbar-nav .nav-link:hover {
    background-color: rgba(236, 87, 87, 0.792);
    transform: scale(1.05);
    color: white; /* Change text color to white on hover */
  }

    .navbar-brand img {
      height: 60px;
      width: auto;
    }
    /* Style for the dropdown container */
    #faqButton {
        transition: all 0.3s ease-in-out;
    }

    /* Increase button size */
    #faqButton {
        font-size: 1.5rem; /* Change to adjust the font size */
        padding: 15px 30px; /* Change to adjust the padding */
    }

    /* Hover effect */
    #faqButton:hover {
        transform: scale(1.1);
    }
    /* Custom CSS for the reviews section */

/* Custom CSS for increasing logo size */
.navbar-brand img {
  width: 100px; /* Adjust the width as needed */
  height: auto; /* Maintain aspect ratio */
}

.reviews-heading {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .reviews {
    background-color: #f9f9f9;
    padding: 40px 20px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }

  .review-box {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    position: relative;
  }

  .review-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }

  .stars {
    color: #ffc107; /* Gold color for stars */
    font-size: 1.5rem;
    margin-bottom: 15px;
  }

  .review-box p {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 10px;
  }

  .reviewer-photo {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    object-fit: cover;
  }

  .review-box small {
    display: block;
    font-size: 0.9rem;
    color: #666;
    margin-top: 10px;
  }
  


  </style>

</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark fixed-top" style="background-color: rgb(94, 162, 231); height: 120px;">
    <a class="navbar-brand" >
      <img src="/static/NEWLOGO.png" alt="Logo">
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="diabetes_info/">Diabetes</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="breast_cancer_info/">Breast Cancer</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="heart_disease_info/">Heart Disease</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="liver_disease_info/">Liver Disease</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" href="GI_Diseases_info/">GI Diseases</a>
        </li>
      </ul>
    </div>
  </nav>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container mt-5">
  <div class="row">
    <div class="col-md-12 text-center">
      <div class="heading-wrapper">
        <h2>Welcome to DOC-PAT: Your Intelligent Companion for Predictive Healthcare</h2>
      </div>
     </div>
  </div>
</div>

  <div class="container mt-5">
    <!-- Existing Images -->
    <div class="row">
      <div class="col-md-6">
        <div class="image-container">
          <a href="diabetes/">
            <img src="/static/diabetesnew.jpg" alt="Diabetes" class="disease-image">
          </a>
        </div>
        <div class="image-text">
          <p>Predict Diabetes</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="image-container">
          <a href="breast/">
            <img src="/static/Breast-Cancer-new (1).webp" alt="Breast Cancer" class="disease-image">
          </a>
        </div>
        <div class="image-text">
          <p>Predict Breast Cancer</p>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="image-container">
          <a href="heart/">
            <img src="/static/heartnew (2).jpg" alt="Heart Disease" class="disease-image">
          </a>
        </div>
        <div class="image-text">
          <p>Predict Heart Disease</p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="image-container">
          <a href="liver/">
            <img src="/static/livernew (1).webp" alt="Liver Disease" class="disease-image">
          </a>
        </div>
        <div class="image-text">
          <p>Predict Liver Disease</p>
        </div>
      </div>
    </div>
  
    <!-- Centered Image -->
    <div class="row mt-5">
      <div class="col-md-12 text-center">
        <div class="image-container">
          <a href="GI_diseases/">
            <img src="/static/ginew.jpeg" alt="Centered Image" class="disease-image">
          </a>
        </div>
        <div class="image-text">
          <p>Predict Gastrointestinal (GI) diseases</p>
        </div>
      </div>
    </div>
  </div>
  
  <br>
  <br>
  <br>
  <br>
  <br>





  <div class="faq-dropdown mt-5">
    <button class="btn btn-primary btn-lg" type="button" id="faqButton" onclick="window.location.href='faqs/'" style="background-color: #ffd700;">
      Frequently Asked Questions
  </button>
  
</div>


<br>
<br>
<br>
<br>
<p class="reviews-heading">Reviews</p>
<div class="reviews mt-5">
  <div class="row">
    <div class="col-md-4">
      <div class="review-box">
        <img src="/static/review.jpg" alt="Reviewer Aryan" class="reviewer-photo">
        <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9733;</div>
        <p>"Great app! Really helped me understand my health better."</p>
        <small>- Aryan</small>
      </div>
    </div>
    <div class="col-md-4">
      <div class="review-box">
        <img src="/static/review.jpg" alt="Reviewer Mayank" class="reviewer-photo">
        <div class="stars">&#9733;&#9733;&#9733;&#9733;&#9734;</div>
        <p>"Good app, but could use some improvements."</p>
        <small>- Mayank</small>
      </div>
    </div>
    <div class="col-md-4">
      <div class="review-box">
        <img src="/static/review.jpg" alt="Reviewer Ved" class="reviewer-photo">
        <div class="stars">&#9733;&#9733;&#9733;&#9734;&#9734;</div>
        <p>"Decent app, needs more features."</p>
        <small>- Ved</small>
      </div>
    </div>
  </div>
</div>



<br>
<br>
<br>
  <footer>
    <center>
      <p>© 2023 DOC-PAT. All rights reserved.</p>
      <p>Contact us: contact@docpat.com | +1 (123) 456-7890</p>
      <p><a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
      <p>
        <a href="#https://www.facebook.com/"><i class="fa fa-facebook"></i></a>
        <a href="https://x.com/?lang=en"><i class="fa fa-twitter"></i></a>
        <a href="#https://www.instagram.com/"><i class="fa fa-instagram"></i></a>
      </p>
      <p>Bennett University Greater Noida</p>
    </center>
  </footer>
  

</body>
</html>