-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (136 loc) · 9.47 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<title>MPA</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="MPA: the MoBiDiC Priorization Algorithm "/>
<meta name="keywords" content="NGS analysis, molecular diagnosis, bioinformatics, vcf annotator"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="style/w3.css" rel="stylesheet" type="text/css"/>
<link href="style/mpa.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="js/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="js/mobidic.js" type="text/javascript"></script>
</head>
<body>
<!-- Navbar (sit on top) -->
<div class="w3-top">
<div id="scroll" class="w3-white w3-opacity-min">
<div id="scroll-bar" class="w3-blue" style="height:2px;width:0%"></div>
</div>
<div class="w3-bar w3-card-2 w3-white w3-opacity-min" id="myNavbar">
<a class="w3-bar-item w3-button w3-hover-black w3-hide-medium w3-hide-large w3-right" href="javascript:void(0);" onclick="toggleFunction()" title="Toggle Navigation Menu">
<i class="fa fa-bars"></i>
</a>
<a href="#home" class="w3-bar-item w3-button"><i class="fa fa-home w3-xlarge"></i></a>
<a href="#about" class="w3-bar-item w3-button w3-hide-small"> About</a>
<a href="#team" class="w3-bar-item w3-button w3-hide-small"> Team</a>
</div>
<!-- Navbar on small screens -->
<div id="navDemo" class="w3-bar-block w3-white w3-hide w3-hide-large w3-hide-medium">
<a href="#about" class="w3-bar-item w3-button" onclick="toggleFunction()"> About</a>
<a href="#team" class="w3-bar-item w3-button" onclick="toggleFunction()"> Team</a>
</div>
</div>
<!-- First Parallax Image with Logo Text -->
<div class="bgimg-1 w3-display-container" id="home">
<div class="w3-display-middle" style="white-space:nowrap;">
<div>
<!-- Title on large and medium screen (Desktop and tablet) -->
<h1 class="w3-center w3-padding-large w3-black w3-xxlarge w3-wide w3-animate-opacity w3-hide-small w3-hide-medium">MPA <br/>The MoBiDiC Priorization Algorithm</h1>
<!-- Title on small screen (Phone) -->
<h1 class="w3-center w3-padding-large w3-black w3-xxlarge w3-wide w3-animate-opacity w3-hide-large">MPA</h1>
</div>
<div class=" w3-center w3-padding-64 w3-padding-large">
<a href="https://github.com/mobidic/MPA" title="Visit MoBiDiC' GitHub page" target="_blank" class="w3-hover-opacity w3-hide-small" style="text-decoration: none;">
<img src="img/logo-MPA.png" alt="MPA" class="w3-white w3-padding w3-padding-16 w3-circle" style="width:150px"/>
</a>
</div>
</div>
<div class="w3-display-bottomright w3-padding-large">
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="https://unsplash.com/@ravenwolfab" target="_blank" rel="noopener noreferrer" title="Photo from
Oregon State University flickr - By Gabriel Barathieu" class="w3-hover-opacity">
<i class="fa fa-camera"></i>
<span style="display:inline-block;padding:2px 3px;">Alan Bishop</span>
</a>
</div>
</div>
<!-- Container (About Section) -->
<div class="w3-content w3-row w3-padding-64" id="about">
<h2 class="w3-center">About MPA</h2>
<div class="w3-container w3-large w3-left-align" id="logo">
<h3>Overview</h3>
<p class="w3-padding-64">The MPA is a prioritizing algorithm for Next Generation Sequencing molecular diagnosis. We propose an open source and free for academic user workflow.<br />
Variant ranking is made with a unique score that takes into account curated database, biological assumptions, splicing predictions and the sum of various predictors for missense alterations. Annotations are made for exonic and splicing variants up to +300nt.<br />
We show the pertinence of our clinical diagnosis approach with an updated evaluation of in silico prediction tools using <em>DYSF</em>, <em>DMD</em>, <em>LMNA</em>, <em>NEB</em> and <em>TTN</em> variants from the human expert-feeded Universal Mutation Database with courtesy regards of curators for pathogenic variants and from the ExAC database to define the dataset of neutral variants.</p>
<h3>Workflow</h3>
<div class="w3-center w3-padding-32">
<img src="img/workflow.png" alt="MoBiDiC" class="w3-image"/>
</div>
<h3>Cite</h3>
<blockquote>
<p><strong>Kevin Yauy, et al.</strong> MPA, a Free, Accessible, and Efficient Pipeline for Single Nucleotide Variant Annotation and Prioritization for Next-Generation Sequencing Routine Molecular Diagnosis, <em>The Journal of Molecular Diagnostics</em>, Available online 22 April 2018, doi: <a href="https://doi.org/10.1016/j.jmoldx.2018.03.009" target="_blank">10.1016/j.jmoldx.2018.03.009</a>.</p>
</blockquote>
<div class="w3-center w3-padding-32">
<a href="https://github.com/mobidic/MPA" title="Visit MPA's GitHub page" target="_blank" class="w3-hover-opacity" style="text-decoration: none;">
<img src="img/logo-MPA.png" alt="MoBiDiC" style="max-width:50%"/>
</a>
</div>
</div>
</div>
<div class="bgimg-3 w3-display-container" id="team">
<div class="w3-display-middle">
<span class="w3-center w3-padding-large w3-black w3-xlarge w3-wide">Team</span>
</div>
<div class="w3-display-bottomright w3-padding-large">
<a style="background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, "San Francisco", "Helvetica Neue", Helvetica, Ubuntu, Roboto, Noto, "Segoe UI", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px;" href="https://unsplash.com/@helloquence?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge" target="_blank" rel="noopener noreferrer" title="Download free do whatever you want high-resolution photos from Helloquence" class="w3-hover-opacity">
<i class="fa fa-camera"></i>
<span style="display:inline-block;padding:2px 3px;">Helloquence</span></a>
</div>
</div>
<!--Team container-->
<div class="w3-row-padding w3-content my_container w3-padding-64">
<div class="w3-half w3-margin-bottom w3-display-container my_column">
<a href="https://neuro-2.iurc.montp.inserm.fr/mobidic/" title="Visit MoBiDiC's page" target="_blank" class="w3-hover-opacity" style="text-decoration: none;">
<img src="img/logo-mobidic.svg" alt="MoBiDiC" class="w3-image w3-display-middle"/></a>
</ul>
</div>
<div class="w3-half w3-margin-bottom my_column">
<ul class="w3-ul w3-border w3-white w3-center">
<li class="w3-san-marino w3-xlarge w3-padding-32 w3-hover-opacity" onclick="window.open('https://github.com/mobidic');" title="Visit MoBiDiC's GitHub page" style="width:100%">The MoBiDiC team</li>
<li class="w3-button w3-hover-shakespeare" onclick="window.open('https://github.com/kyauy');" title="Visit Kevin's GitHub page" style="width:100%">
Kevin Yauy <i class="fa fa-github fa-fw"></i>
</li>
<li class="w3-button w3-hover-shakespeare" onclick="window.open('https://github.com/beboche');" title="Visit David's GitHub page" style="width:100%">
David Baux <i class="fa fa-github fa-fw"></i>
</li>
<li class="w3-button w3-hover-shakespeare" onclick="window.open('https://github.com/henri-pegeot');" title="Visit Henri's GitHub page" style="width:100%">
Henri Pégeot <i class="fa fa-github fa-fw"></i>
</li>
<li class="w3-button w3-hover-shakespeare" onclick="window.open('https://github.com/char-al');" title="Visit Charles' GitHub page" style="width:100%">
Charles Van Goethem <i class="fa fa-github fa-fw"></i>
</li>
<li class="w3-button w3-hover-shakespeare" onclick="window.open('https://github.com/thomasguignard');" title="Visit Thomas' GitHub page" style="width:100%">
Thomas Guignard <i class="fa fa-github fa-fw"></i>
</li>
</ul>
</div>
</div>
<footer class="w3-bottom w3-hide-small">
<div class="w3-white w3-opacity-min w3-row">
<div class="w3-container w3-third w3-left-align">
<a href ="http://www.umontpellier.fr/university-of-montpellier" target="_blank" title="visit the Montpellier University Website"><img src="img/logo-UM.png" class="w3-padding" style="height:50px"/></a>
</div>
<div class="w3-container w3-third w3-center" style="height: 50px; line-height: 50px; text-align: center;">
<span style="display: inline-block;vertical-align: middle;line-height: normal;">
<a href="https://github.com/mobidic" title="Visit MoBiDiC's GitHub page" target="_blank" class="w3-hover-text-black w3-large" style="text-decoration: none;"> MoBiDiC @ GitHub <i class="fa fa-github fa-fw"></i></a>
</span>
</div>
<div class="w3-container w3-third w3-right-align"><a href ="http://www.chu-montpellier.fr/" target="_blank" title="visit the Montpellier University Hospital Website">
<img src="img/logo-CHU_Montpellier.png" class="w3-padding" style="height:50px"/></a>
</div>
</div>
</footer>
</body>
</html>