forked from JackZhang-SH/Cancer-Detector
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathfront end
181 lines (166 loc) · 10.6 KB
/
front end
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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"rel="stylesheet">
<title>Cancer Detector</title>
</head>
<body>
<header class="text-gray-600 body-font">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">Cancer Detector</span>
</a>
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
<a herf="/"class="mr-5 hover:text-gray-900">Home</a>
<a herf="/"class="mr-5 hover:text-gray-900">About</a>
<a herf="/"class="mr-5 hover:text-gray-900">Services</a>
<a herf="/"class="mr-5 hover:text-gray-900">Contact</a>
</nav>
</div>
</header>
<section class="text-gray-600 body-font">
<div class="container mx-auto flex px-5 py-24 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 mb-16 md:mb-0 items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Detect your Cancer Here
<br class="hidden lg:inline-block">
</h1>
<p class="mb-8 leading-relaxed">A project built by a group of high schoolers,with real-world applications</p>
<div class="flex justify-center">
<button class="inline-flex text-white bg-indigo-500 border-0 py-2 px-6 focus:outline-none hover:bg-indigo-600 rounded text-lg">Scroll down to learn more</button>
</div>
</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="https://source.unsplash.com/720x600/?cell">
</div>
</div>
</section>
<section class="text-gray-600 body-font">
<div class="container mx-auto flex px-5 py-24 md:flex-row flex-col items-center">
<div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6 mb-10 md:mb-0">
<img class="object-cover object-center rounded" alt="hero" src="https://source.unsplash.com/720x600/?cancer,cell">
</div>
<div class="lg:flex-grow md:w-1/2 lg:pl-24 md:pl-16 flex flex-col md:items-start md:text-left items-center text-center">
<h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Behind the Scences
<br class="hidden lg:inline-block">
</h1>
<p class="mb-8 leading-relaxed">After Brainstroming different problems that needed solving,we decided to go down medical route.AI technology could have several possible application,including detecting cancerous tissue! Metastatic cancer tissue in particular is what our model is trying to identify as
this can pose health risk to a patient,should it spread throughout their body.
Our model is able to see what our naked eye can't detect the otherwise undetecable.For this reson,the use of AI in a medical setting has the potential to do lot of good!
</p>
<div class="flex justify-center">
</div>
</div>
</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto">
<div class="flex flex-col text-center w-full mb-20">
<h1 class="text-2xl font-medium title-font mb-4 text-gray-900">Catch a Cell</h1>
<p class="lg:w-2/3 mx-auto leading-relaxed text-base">Can you Tell the difference between metastic and healthy cell tissue?</p>
</div>
<div class="flex flex-wrap -m-4">
<div class="p-4 lg:w-1/4 md:w-1/2">
<div class="h-full flex flex-col items-center text-center">
<img alt="team" class="flex-shrink-0 rounded-lg w-full h-56 object-cover object-center mb-4" src="https://images.unsplash.com/photo-1631048008444-cd48b97b5564?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fG1pY3Jvc2NvcGljJTIwY2VsbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60">
<div class="w-full">
</div>
</div>
</div>
<div class="p-4 lg:w-1/4 md:w-1/2">
<div class="h-full flex flex-col items-center text-center">
<img alt="team" class="flex-shrink-0 rounded-lg w-full h-56 object-cover object-center mb-4" src="https://images.unsplash.com/photo-1631048004867-2e792ff71cf7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bWljcm9zY29waWMlMjBjZWxsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60">
<div class="w-full">
</div>
</div>
</div>
<div class="p-4 lg:w-1/4 md:w-1/2">
<div class="h-full flex flex-col items-center text-center">
<img alt="team" class="flex-shrink-0 rounded-lg w-full h-56 object-cover object-center mb-4" src="https://media.istockphoto.com/id/859639874/photo/brain-tissue-microscopic-photography.jpg?b=1&s=170667a&w=0&k=20&c=n5ssN76XpkGmP1WYCmGb6poZcfbZNvQV6v973Yf3wbc=">
<div class="w-full">
</div>
</div>
</div>
<div class="p-4 lg:w-1/4 md:w-1/2">
<div class="h-full flex flex-col items-center text-center">
<img alt="team" class="flex-shrink-0 rounded-lg w-full h-56 object-cover object-center mb-4" src="https://images.unsplash.com/photo-1631048007275-db7b5deffbad?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fG1pY3Jvc2NvcGljJTIwY2VsbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60">
<div class="w-full">
</div>
</div>
</div>
</div>
</div>
</section>
<section class="text-gray-600 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap">
<div class="flex flex-wrap w-full">
<div class="lg:w-2/5 md:w-1/2 md:pr-10 md:py-6">
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-gray-900 mb-1 tracking-wider">STEP 1</h2>
<p class="leading-relaxed">Upload the photo </p>
</div>
</div>
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-gray-900 mb-1 tracking-wider">STEP 2</h2>
<p class="leading-relaxed">Click on Detect botton to get prediction.</p>
</div>
</div>
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<circle cx="12" cy="5" r="3"></circle>
<path d="M12 22V8M5 12H2a10 10 0 0020 0h-3"></path>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-gray-900 mb-1 tracking-wider">STEP 3</h2>
<p class="leading-relaxed">Get your prediction.</p>
</div>
</div>
<div class="flex relative pb-12">
<div class="h-full w-10 absolute inset-0 flex items-center justify-center">
<div class="h-full w-1 bg-gray-200 pointer-events-none"></div>
</div>
<div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-500 inline-flex items-center justify-center text-white relative z-10">
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div class="flex-grow pl-4">
<h2 class="font-medium title-font text-sm text-gray-900 mb-1 tracking-wider">FINISH</h2>
<p class="leading-relaxed">Yor Reseult in on screen.</p>
</div>
</div>
</div>
<img class="lg:w-3/5 md:w-1/2 object-cover object-center rounded-lg md:mt-0 mt-12" src="https://images.unsplash.com/photo-1579544787614-fa683917e045?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bWljcm9zY29waWN8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="step">
</div>
</div>
</section>
</body>
</html>