Datasets
Models
Downloads: 2
Diff of
/templates/main.html
[000000]
..
[b018ba]
Switch to side-by-side view
--- a +++ b/templates/main.html @@ -0,0 +1,438 @@ +<!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">★★★★★</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">★★★★☆</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">★★★☆☆</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>