-
Notifications
You must be signed in to change notification settings - Fork 2
/
hospital.html
165 lines (139 loc) · 12.3 KB
/
hospital.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html class="scroll-smooth" lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" type="image/x-icon" href="/assets/hospitalfavicon_io/favicon-16x16.png">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<title>e-Asptal</title>
</head>
<body>
<section id="navbar" class="text-gray-600 body-font fixed z-[1] bg-gradient-to-r from-white to-[#ececfc] w-full">
<div class="container mx-auto flex flex-wrap p-5 xl:px-10 xl:py-6 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<img class="w-12" src="assets/hospital-icon.png" alt="" srcset="">
<span class="ml-3 text-2xl text-bold bg-gradient-to-r from-green-600 to-indigo-700 inline-block text-transparent bg-clip-text xl:max-2xl:text-3xl 2xl:text-4xl">e-Asptal</span>
</a>
<nav class="md:ml-auto flex text-black flex-wrap items-center text-base justify-center space-x-8 xl:text-lg" style="font-family: 'Lato', sans-serif;">
<a href="index.html" class="cursor-pointer hover:scale-105 hover:underline hover:font-bold duration-300">← Back to home</a>
<a href="#services" class="cursor-pointer hover:scale-105 hover:underline hover:font-bold duration-300">Services</a>
<a href="#about" class="cursor-pointer hover:scale-105 hover:underline hover:font-bold duration-300">About</a>
</nav>
</div>
</section>
<section id="home" class="text-gray-600 body-font bg-gradient-to-b from-white to-[#F3F3FD] w-full h-auto">
<div class="container mx-auto flex px-5 py-24 xl:px-18 md:flex-row flex-col items-center">
<div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mt-16 mb-16 md:mb-0 items-center text-center">
<div class="bg-white text-black border-2 rounded-3xl my-3 py-2 px-4 xl:ml-24 flex flex-row space-x-2 animate__animated animate__slideInDown">
<span class="font-sans"> Health Matters </span>
<img class="w-6" src="https://img.icons8.com/ultraviolet/40/null/heart-health.png"/>
</div>
<div>
<h1 class="animate__animated animate__backInRight title-font sm:text-4xl text-3xl xl:max-2xl:text-4xl 2xl:text-5xl mb-4 xl:ml-24 font-medium bg-gradient-to-r from-blue-700 via-indigo-800 to-blue-800 inline-block text-transparent bg-clip-text" >
One Stop Solution
</h1>
<h2 class="animate__animated animate__backInLeft title-font sm:text-4xl text-3xl xl:max-2xl:text-4xl 2xl:text-5xl mb-4 xl:ml-24 font-medium text-black">for all your medical needs.</h2>
</div>
<p class="mb-8 leading-relaxed xl:max-2xl:text-base 2xl:text-lg animate__animated animate__fadeIn xl:ml-24" style="font-family: 'Lato', sans-serif;">ML based models which predict the likelihood of various diseases.</p>
</div>
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
<img class="object-cover object-center rounded" alt="hero" src="assets/doctor.png">
</div>
</div>
</section>
<section id="services" class="text-gray-600 body-font overflow-hidden bg-gradient-to-b from-[#F3F3FD] to-white h-fit" style="font-family: 'Lato', sans-serif;">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="sm:text-3xl ml-24 text-2xl font-normal title-font mb-2 bg-gradient-to-r from-indigo-600 to-indigo-700 inline-block text-transparent bg-clip-text text-left">FEATURES WE PROVIDE</h1>
</div>
<div class="flex flex-col space-y-8 md:space-y-0 md:space-x-10 md:flex-row -m-4 items-center md:justify-center">
<div class="cards w-3/4 md:w-1/4 md:h-auto bg-[#ecedfe] border border-gray-200 rounded-lg hover:scale-105 duration-300 hover:border-2 hover:border-black ">
<img class="rounded-t-lg" src="assets/covid.png" alt="" />
<div class="p-5">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">SARS-COV-2</h5>
<p class="mb-3 font-normal text-gray-700 xl:max-2xl:text-base 2xl:text-lg ">Detect the possibilty of a person having Covid-19 by scanned images</p>
<a href="https://tushar2930-covid-detection-app-07syae.streamlit.app/" target="_blank" class="md:mt-6 inline-flex items-center px-5 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
Try It!
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
<a href="covid.html" class="md:mt-6 inline-flex items-center px-5 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
Learn More
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<div class="cards w-3/4 md:w-1/4 md:h-auto bg-[#ecedfe] border border-gray-200 rounded-lg hover:scale-105 duration-300 hover:border-2 hover:border-black ">
<img class="rounded-t-lg " src="assets/brain.png" alt="" />
<div class="p-5">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Brain Tumour</h5>
<p class="mb-3 font-normal text-gray-700 xl:max-2xl:text-base 2xl:text-lg">Know the likelihood of occurence of malicious tumour in brain</p>
<a href="https://tushar2930-brain-tumor-app-0ziz0l.streamlit.app/" target="_blank" class="md:mt-6 inline-flex items-center px-5 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
Try It!
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
<a href="brain.html" class="md:mt-6 inline-flex items-center px-5 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
Learn More
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<div class="cards w-3/4 md:w-1/4 md:h-auto bg-[#ecedfe] border border-gray-200 rounded-lg hover:scale-105 duration-300 hover:border-2 hover:border-black ">
<img class="rounded-t-lg" src="assets/pneumonia.png" alt="" />
<div class="p-5">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Pneumonia</h5>
<p class="mb-3 font-normal text-gray-700 xl:max-2xl:text-base 2xl:text-lg">Provides the possibilty of infection of pnenomia in lungs</p>
<a href="https://tushar2930-pneumonia-app-8ai3tq.streamlit.app/" target="_blank" class="md:mt-6 inline-flex items-center px-5 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
Try It!
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
<a href="pneumonia.html" class="md:mt-6 inline-flex items-center px-5 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300">
Learn More
<svg aria-hidden="true" class="w-4 h-4 ml-2 -mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="text-gray-600 body-font bg-[#F3F3Fd]">
<div class="container px-5 py-8 mx-auto flex items-center sm:flex-row flex-col">
<a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-900">
<img class="w-12" src="assets/iit.png" alt="" srcset="">
<span class="ml-3 text-xl">© Exploratory Project</span>
</a>
<p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 sm:py-2 sm:mt-0 mt-4">2023 IIT(BHU) | All rights reserved.
</p>
</div>
</section>
<button x-data="topBtn" @click="scrolltoTop" id="topButton"
class="fixed z-10 hidden p-3 bg-gray-100 rounded-full shadow-md bottom-5 right-10 animate-bounce">
<svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 10l7-7m0 0l7 7m-7-7v18">
</path>
</svg>
</button>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('topBtn', () => ({
scrolltoTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
}));
});
const topBtn = document.getElementById("topButton");
window.onscroll = () => {
(document.body.scrollTop > 55 || document.documentElement.scrollTop > 55) ?
topBtn.classList.remove("hidden"): topBtn.classList.add("hidden");
}
</script>
</body>
</html>