-
Notifications
You must be signed in to change notification settings - Fork 3
/
seq-id.html
235 lines (223 loc) · 9.79 KB
/
seq-id.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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<!--- Change the title of the webpage in the <title> tag -->
<title>Microbe-ID | Sequence-ID</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="root" >
<!-- Le styles, make sure that the Bootstrap_files folder is in the same directory than your homepage -->
<link href="Bootstrap_files/bootstrap.css" rel="stylesheet">
<link href="Bootstrap_files/phytophthora-lab.css" rel="stylesheet">
<style>
#updates .modal-body {
max-height: 800px;
}
#updates{
width: 900px;
margin: -250px 60 0 -450px;
}
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
/* Wrapper for page content to push down footer */
#wrap {
min-height: 95%;
height: auto !important;
height: 95%;
/* Negative indent footer by it's height */
margin: 0 auto -70px;
}
/* Set the fixed height of the footer here */
#push,
#footer {
height: 120px;
}
#footer {
background-color: #f5f5f5;
}
/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
#footer {
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
}
}
#wrap > .container {
padding-top: 60px;
}
.container .credit {
margin: 20px 0;
}
code {
font-size: 80%;
}
</style>
<!-- Recalling stylesheets and icons. Once again, make sure that the Bootstrap_files folder is in the same directory than your homepage -->
<link href="Bootstrap_files/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="img/customIcon.png">
</head>
<body>
<div id="wrap">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Names of the links are between the <a></a> tags. -->
<a class="brand" href="./index.html">Microbe-ID</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li><a href="./index.html">Home</a></li>
<li><a href="./seq-id.html">Sequence-ID</a></li>
<li><a href="./geno-id.html">Genotype-ID</a></li>
<li><a href="./about.html">About</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<!-- Change this image to the one of your preference! -->
<h1>Sequence-ID</h1>
<p>Choose a tab to identify species using BLAST against a curated database</p>
<!-- Tabs and Dropdowns -->
<ul class="nav nav-tabs">
<li class="active"><a href="#its" data-toggle="tab">Blast</a></li>
<li class="dropdown" id="help_menu">
<a class="dropdown-toggle" data-toggle="dropdown">Help<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#updates" data-toggle="modal">Site Help</a></li>
</ul>
<li>
</ul>
<div class="tab-content">
<!-- MICROBE_ID specific: Form for BLAST submission-->
<div class="tab-pane active" id="its">
<!-- MICROBE_ID specific: The following section is a crucial part of the BLAST search: The form name and id should be
called the same way, as both are communicating to the blast.cgi perl script. the blast.cgi
script is a perl script which contains PERL code that is transformed in HTML and also submits the
query to the server in order to run BLAST. Additionally, the "onSubmit=" class in the form is a
custom javascript to determine if the sequence is a FASTA file or not.
The blast.cgi file is contained in a folder called cgi-bin in the root repository. MOVE THAT FILE
TO THE cgi-bin FOLDER ON APACHE (Ask your network administrator if you don't know how to do this.
the BLAST submission page will not work without it.-->
<form name="blast" onSubmit="return validateFasta(this);" class="form-horizontal" id="blast" method="get" action="/cgi-bin/its_blast.cgi">
<fieldset>
<legend>blastn search</legend>
<!-- Job Name Form -->
<div class="control-group">
<label class="control-label">Job name</label>
<div class="controls">
<input type="text" class="input-xlarge span6" id="job_name" name="job_name" data-content="Enter a name for the job." data-original-title="Job Name" placeholder="Enter job name here">
</div>
</div>
<!-- Sequence Form -->
<div class="control-group">
<label class="control-label" for="textarea" >Input FASTA format sequence here:</label>
<div class="controls">
<textarea rows="11" class="input-xlarge span6" id="fasta_file" name="fasta_file" placeholder=" >Query file
GTGAGTACCTTGGGCTGCCTTTATATATAATCTAGAAACAAGGCCCCTGTAAGGCCCTTTCCTTCCTCCTCCCCAAAGCTATAAAAGATATTTGGGTAGAATTCACAGCTTCAGGCTATGGAACTCCTGGATTCCCTCCTTCCACTTCCACCCTACTGCAGAGATGCTGAGAAAGTCTGGGAGGGTTTTTCTAAAAGCTAAGCTGGGCCAAATAGCCAGGTTCAAGTCAGTACATGAAGAGTTGTGGTTCTAAATTCCTTCCCTACTCCAGCTCCAAATTTCATTTTAGTTCCACTTTTGGGCCTAACCAGCTAAAGGTCCCCACCCAGCTCCTGCCTATCTAGTCACTGCATATGGCAGACCTTGAAAGTCCTATCTCAAAGCAGCAGAATTATCAGTTATCTGTCTTGTCATGGAAAAGAGAGATAAGCAGAGGCCTGAGAAAGGAGTCTGGAGCTCCAGCTTCTGGTACACATCCTTGTGTTACCTGGATATGATCCTATTCCTCTAGAG"></textarea>
</div>
</div>
<!-- ITS Submit button-->
<div class="control-group">
<label class="control-label"></label>
<div class="controls">
<button id="button" type="submit" class="btn btn-success" >Submit and run</button>
<a href="files/ITS_database.fasta" class="btn btn-info">Download database</a>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- Start Of Modal popup showing the site help-->
<div class="modal fade hide" id="updates">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h2>Help</h2>
<p>Choose the appropriate tab for help.</p>
<ul class="nav nav-pills">
<li class="active"><a href="#sequence" data-toggle="pill">Sequence</a></li>
</ul>
</div>
<div class="modal-body">
<div class="pill-content">
<div class="pill-pane active" id="sequence">
<h3> Sequence format </h3>
<p>
Sequences need to follow the FASTA format:
</p>
<pre>
>Name of the sequence
CCACACCTAAAAAACTTTCCACGTGAACCGTATCAACCCTTTTAGTTGGG
GGTCTTGTACCCTATCATGGCGAATGTTTGGACTTCGGTCCGGGCGAGTA
GCTTTTTGTTTTAAACCCATTTCACAATTCTGATTATACTGTGGGGACGA
AAGTCTCTGCTTTTAACTAGATAGCAACTTTCAGCAGTGGATGTCTAGGC
TCGCACATCGATGAAGAACGCTGCGAACTGCGATACGTAATGCGAATTGC
AGGATTCAGTGAGTCATCGAAATTTTGAACGCATATTGCACTTCCGGGTT
AGTCCTGGGAGTATGCCTGTATCAGTGTCCGTACATCAAACTTGGCTTTC
TTCCTTCCGTGTAGTCGGTGGAGGATGTGCCAGATGTGAAGTGTCTTGCG
TGTTGTCCTTCGGGTCGACTGCGAGTCCTTTTAAATGTACTGAACTGTAC
TTCTCTTTGCTCGAAAAGCGTGGTGTTGCTGGTTGTGGAGGCTGCCTGCG
TGGCCAGTCGGCGACCGGTTTGTCTGCTGCGGCGTTTAAAGGAGGAGTGT
TCGATTCGCGGTATGGTTGGCTTCGGCTGAACAGGCGCTTATTGAATGCT
TTTCCTGCTGTGGCGTGATGGGCTGGTGAACCGTAGCTGTGTTTGGCTTG
GCTTTTGAATCGGTTTTGCTGTTGCGAAGTAGAGTGGCGGCTTCGGCTGT
CGAGGGTCGATCCATTTTGGGAATTTTGTGTGCACTTCGGTGCGCATCTC
AA</pre>
</div>
</div>
<div class="modal-footer">
<a href="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div> </div>
<div id="push"></div>
</div>
</div>
<div id="footer">
<div class="container">
<br>
<p>Add some content here </p>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="Bootstrap_files/jquery.js"></script>
<script src="Bootstrap_files/bootstrap-transition.js"></script>
<script src="Bootstrap_files/bootstrap-alert.js"></script>
<script src="Bootstrap_files/bootstrap-modal.js"></script>
<script src="Bootstrap_files/bootstrap-dropdown.js"></script>
<script src="Bootstrap_files/bootstrap-scrollspy.js"></script>
<script src="Bootstrap_files/bootstrap-tab.js"></script>
<script src="Bootstrap_files/bootstrap-tooltip.js"></script>
<script src="Bootstrap_files/bootstrap-popover.js"></script>
<script src="Bootstrap_files/bootstrap-button.js"></script>
<script src="Bootstrap_files/bootstrap-collapse.js"></script>
<script src="Bootstrap_files/bootstrap-carousel.js"></script>
<script src="Bootstrap_files/bootstrap-typeahead.js"></script>
<script src="Bootstrap_files/holder.js"></script>
<script src="validate.js"></script>
</body></html>