-
Notifications
You must be signed in to change notification settings - Fork 0
/
welcome.html
130 lines (119 loc) · 6.14 KB
/
welcome.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
<!DOCTYPE html>
<html 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">
<!--Favicon-->
<link rel="icon" type="image/png" sizes="32x32" href="src/images/favicon-32x32.png">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!--Google fonts-->
<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=Quicksand:wght@400;700&display=swap" rel="stylesheet">
<!--Internal links-->
<link rel="stylesheet" href="/src/welcome.css">
<script src="src/welcome.js" defer></script>
<title>Welcome | Tree of Life</title>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-xl navbar-light sticky-top" style="background-color: #F7F6FB;">
<a class="navbar-brand" href="https://www.merckgroup.com/en">
<img class="merck-logo" src="/src/images/merck_logo.png" alt="Merck 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">
<li class="nav-item active">
<a class="nav-link" href="welcome.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="match.html">Match</a>
</li>
<li class="nav-item">
<a class="nav-link" href="patients.html">Patient List</a>
</li>
<li class="nav-item">
<a class="nav-link" href="trials.html">Clinical Trials</a>
</li>
<li class="nav-item">
<img src="/src/images/avatar.png" alt="avatar" class="avatar-img">
<a class="profile" href="profile.html">Dr Sunshine</a>
</a>
</li>
</ul>
</div>
</nav>
<img src="/src/images/tree.png" alt="Your Tree of Life" class="tree">
<h1>Your Tree of Life</h1>
<div class="intro">
<p>This is your <strong>Tree of Life</strong>! The more matches you make, the more it will grow. Your matches help to make create a diverse patient pool and contributes to better datasets of Clinical Trials. Make matches to keep your tree growing!</p>
<p>Below on the <strong>left</strong>, you can see an overview of the actual talent pool. You can check the diversity of the people by applying different filters (age, gender, ethnicity).</p>
<p>Below on the <strong>right</strong>, you can see the current clinical trials. Click each of them for more details.</p>
</div>
<div class="box">
<div class="card">
<h3>Patient List</h3>
<div class="button-row">
<div class="button-container">
<button id="age-button">Age</button>
</div>
<div class="button-container">
<button id="gender-button">Gender</button>
</div>
<div class="button-container">
<button id="ethnicity-button">Ethnicity</button>
</div>
</div>
<img class="chart" id="age" src="/src/images/age.png" alt="Pie chart of age distribution" style="display:block;">
<img class="chart" id="gender" src="/src/images/gender.png" alt="Pie chart of gender distribution">
<img class="chart" id="ethnicity" src="/src/images/ethnicity.png" alt="Pie chart of ethnicity distribution">
</div>
<div class="card">
<h3>Clinical Trials</h3>
<div class="button-row">
<div class="button-container">
<button id="phase-button">Phase</button>
</div>
<div class="button-container">
<button id="divind-button">DI</button>
</div>
<div class="button-container">
<button id="completion-button">Complete</button>
</div>
</div>
<img class="chart" id="phase" src="/src/images/phase.png" alt="Pie chart of phase distribution" style="display:block;">
<img class="chart" id="divind" src="/src/images/divind.png" alt="Pie chart of diversity index distribution">
<img class="chart" id="completion" src="/src/images/completion.png" alt="Pie chart of completion distribution">
</div>
</div>
<div class="match-text">
<p>When you are ready make a match below!</p>
<a href="match.html"><button>Match!</button></a>
</div>
<footer>
This web page was made by
<a href="https://github.com/Bishu11" target=”_blank”>Bishu11</a>,
<a href="https://github.com/cslylla" target=”_blank”>cslylla</a>,
<a href="https://github.com/Divya1205" target=”_blank”>Divya1205</a> and
<a href="https://snezhanabogeva.myportfolio.com/work" target=”_blank”>Snezhana</a>
</footer>
</div>
<!--For bootstrap-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>