-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
169 lines (158 loc) · 10.2 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<title>Kv7.2 mutations</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="A free machine learning web service to predict pathogenicity of missense variants in Kv7.2 channels" />
<meta name="keywords"
content="KCNQ2, epilepsy, variants, prediction, pathogenicity, machine learning, bioinformatics" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet" />
<link href="CSS/sexy.css" rel="stylesheet" />
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="app">
<!-- Barra de navegacion -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">MutaGen Kv7.2</a> <!-- Nombre -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <!-- Hamburguesa -->
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav me-auto mb-2 mb-lg-0"> <!-- Opciones -->
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container principal">
<!-- Titulo principal -->
<h1>MutaGen Kv7.2</h1>
<p class="subtitle">A free machine learning web service to predict pathogenicity of missense variants in Kv7.2 channels</p>
<hr />
<div class="container secundario">
<div class="col-12">
<div class="container"> <!-- Descripcion de la aplicacion -->
<h3>About</h3>
<p class="instrucciones">
MutaGen stands for <b>MUT</b>ations in <b>GEN</b>s, more specifically missence mutations in KV7.2 channel. The purpose is to provide the probability of these mutations, making a timely detection and increasing the anticipation of abnormal situations.
</p>
<h3>How to ...</h3>
<p class="instrucciones"> <!-- Describiendo la receta -->
To run the analysis you need to provide the mutation using three principal components: the initial aminoacid, the position (number) and the final aminoacid.
<p>Run the Model!</p>
</p>
</div>
</div>
<h3>Mutation predictor</h3> <!-- Parametros para el modelo -->
<div class="row">
<div class="col-lg-6 col-12">
<div class="row">
<div class="col-12 selector">
<div class="container">
<b>1. Type the mutation</b>
</label>
</div>
</div>
</div>
</div>
<div class="col-12 aa">
<div class="container">
<div class="col-12">
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo" aria-controls="navbarTogglerDemo" aria-expanded="false" aria-label="Toggle">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Run Model</a> <!-- Search bar-->
<div class="collapse navbar-collapse" id="navbarTogglerDemo">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link disabled">Write the mutation using <b>capital</b> letters e.g. K4N</a> <!-- Indicaciones precisas -->
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button> <!-- Buscar la mutación-->
</form>
</div>
</div>
</nav>
<hr/>
<div>
<div class="alert alert-warning" role="alert"> <!-- Warning for the user -->
Double check! The aminoacids must be written in <b>one capital</b> letter
</div>
</div>
<div>
<h3>Additional Features</h3>
<p><b>2. Aminoacid molecular structures</b></p> <!-- To describe the aminoacids-->
</div>
<div class="slider">
<label for="slideForAA" class="form-label">Move the bar to select the amino acid</label>
<input type="range" class="form-range" min="0" max="114" id="slideForAA" v-model="aa" :disabled="isDisabled">
</div>
<div class="aacode">
<div class="btn-group" role="group" aria-label="Mutation selection">
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
<div class="row aaOpts">
<div class="col aaOpt" v-for="(value, name, index) in aaMut">
<input type="radio" class="btn-check" name="btnradio" :id="'btnradio' + index" autocomplete="off" :disabled="isDisabled">
<label class="btn btn-outline-primary" :for="'btnradio' + index" :title="value[0]" v-on:click="onAA(name)">{{name}}</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-12">
<div class="row">
<div class="col-md-6 col-12 bild">
<div class="img">
<h4>Old AA</h4>
<img :src="'IMG/' + aaMut[aaSequence[aa]][1]" :alt="aaMut[aaSequence[aa]][0]">
</div>
<br>
{{aaMut[aaSequence[aa]][0]}}
</div>
<div class="col-md-6 col-12 bild">
<div class="img">
<h4>New AA</h4>
<img :src="'IMG/' + image2" :alt="aaMut[sel][0]">
</div>
<br>
{{aaMut[sel][0]}}
</div>
</div>
<br>
<button class="btn btn-primary run" type="button" v-on:click="run()" :disabled="isDisabled">Run Model</button>
<div v-if="third" class="container third">
<div class="spinning">
<img src="IMG/spinner.gif" alt="Just hold a little longer ..."> <!-- So te user doesn't get bored -->
</div>
</div>
</div>
</div>
</div>
<progress min="0" max="100" value="35"></progress>
</div>
</div>
<script src="JS/action.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>