<!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">
<title>SequenceServer: Custom BLAST Server</title>
<meta name="author" content="Anurag Priyam">
<meta name="author" content="Ben J. Woodcroft">
<meta name="author" content="Vivek Rai">
<meta name="author" content="Cedric Wurm">
<meta name="author" content="Yannick Wurm">
<meta name="description" content="Custom BLAST server provided by SequenceServer (http://www.sequenceserver.com)"/>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<% if settings.production? %>
<link rel="stylesheet" media="screen,print" type="text/css" href="css/sequenceserver.min.css"/>
<% else %>
<link rel="stylesheet" media="screen,print" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" media="screen,print" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" media="screen,print" type="text/css" href="css/custom.css"/>
<% end %>
</head>
<body>
<div
class="navbar">
<div
class="container">
<a
class="navbar-brand"
href="http://sequenceserver.com" target="_blank">
SequenceServer
<small>
BLAST searching made easy!
</small>
</a>
<ul class="nav navbar-nav navbar-right hover-reset focus-reset">
<li>
<a
target="_blank"
href="http://www.sequenceserver.com/#support">
<i class="fa fa-comment-o"></i>
Help & Support
</a>
</li>
</ul>
</div>
</div>
<div
class="dnd-overlay"
style="display: none;">
<div
class="container dnd-overlay-container">
<div
class="row">
<div
class="col-md-offset-2 col-md-10">
<p
class="dnd-overlay-drop"
style="display: none;">
<i class="fa fa-2x fa-file-o"></i>
Drop query sequence file here
</p>
<p
class="dnd-overlay-overwrite"
style="display: none;">
<i class="fa fa-2x fa-file-o"></i>
<span style="color: red;">Overwrite</span> query sequence file
</p>
<div
class="dnd-errors">
<div
class="dnd-error"
id="dnd-multi-notification"
style="display: none;">
<div
class="col-md-6 col-md-offset-3">
One file at a time please.
</div>
</div>
<div
class="dnd-error"
id="dnd-large-file-notification"
style="display: none;">
<div
class="col-md-6 col-md-offset-3">
Too big a file. Can only do less than 10 MB. >_<
</div>
</div>
<div
class="dnd-error"
id="dnd-format-notification"
style="display: none;">
<div
class="col-md-6 col-md-offset-3">
Only FASTA files please.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="container">
<noscript>
<div
class="nojs-error">
<h3>SequenceServer can't work without JavaScript.</h3>
<ul>
<li>Please see if you can enable JavaScript in your browser's preferences.</li>
<li>If your browser doesn't support JavaScript, please consider upgrading to the latest version or using Firefox or Chrome.</li>
</ul>
</div>
</noscript>
<form
class="form-horizontal" id="blast"
method="post" action="#result">
<div
class="form-group">
<div
class="col-md-12">
<div
class="sequence-controls hidden">
<button
type="button"
class="btn btn-sm btn-default" id="btn-sequence-clear"
title="Clear query sequence(s).">
<span id="sequence-file"></span>
<i class="fa fa-times"></i>
</button>
</div>
<div
class="sequence">
<textarea
class="form-control text-monospace" name="sequence" id="sequence"
rows="10"
autofocus="true"
spellcheck="false"
placeholder="Paste query sequence(s) or drag file containing query sequence(s) in FASTA format here ..." ></textarea>
</div>
</div>
</div>
<div
class="notifications">
<div
class="notification"
id="nucleotide-sequence-notification"
style="display: none;">
<div
class="alert-info col-md-6 col-md-offset-3">
Detected: nucleotide sequence(s).
</div>
</div>
<div
class="notification"
id="protein-sequence-notification"
style="display: none;">
<div
class="alert-info col-md-6 col-md-offset-3">
Detected: protein sequence(s).
</div>
</div>
<div
class="notification"
id="mixed-sequence-notification"
style="display: none;">
<div
class="alert-danger col-md-10 col-md-offset-1">
Detected: mixed nucleotide and protein sequences. We can't handle that. Please try one sequence at a time.
</div>
</div>
</div>
<div
class="form-group databases-container">
<%# sort => same ordering of nucleotide and protein datbases %>
<% databases.keys.sort.each do |type| %>
<div
class="<%= databases[(databases.keys - [type]).first] ? 'col-md-6' : 'col-md-12' %>">
<div
class="panel panel-default">
<div
class="panel-heading">
<h4><%= type.capitalize %> databases</h4>
</div>
<ul
class="list-group databases <%= type %>">
<% databases[type].sort_by(&:title).each do |database| %>
<li class="list-group-item">
<div
class="checkbox">
<label>
<input type="checkbox" name="databases[]" value="<%=database.id%>" data-type="<%=database.type%>" />
<%= database.title or database.name %>
</label>
</div>
</li>
<% end %>
</ul>
</div>
</div>
<% end %>
</div>
<div
class="form-group">
<div
class="col-md-8">
<div
class="form-group advanced">
<label
class="col-md-3 control-label"
for="advanced">
Advanced Parameters:
</label>
<div
class="col-md-9">
<div
class="input-group">
<input
type="text"
class="form-control" name="advanced" id="advanced"
title="View, and enter advanced parameters."
placeholder="eg: -evalue 1.0e-5 -num_alignments 100"/>
<div class="input-group-addon cursor-pointer" data-toggle="modal" data-toggle="modal" data-target="#help">
<i class="fa fa-question"></i>
</div>
</div>
</div>
</div>
</div>
<div
class="col-md-4">
<div
class="btn-group btn-block" id="methods">
<button
type="submit"
id="method" class="btn btn-primary col-md-12">
blast
</button>
</div>
</div>
</div>
</form>
<div
class="result" id="result"
style="display: none;">
</div>
</div> <!-- /container -->
<div
class="footer" id="footer">
<hr>
<p
class="text-center">
<a
href='http://www.sequenceserver.com'>
<%=
quote = [
"Custom BLAST web interface by SequenceServer.",
"SequenceServer: Local BLAST with bespoke html interface.",
"Set up custom BLAST interface with SequenceServer.",
"Easy BLASTing with SequenceServer."
][rand(4)]
%>
</a>
<a
class="twitter-share-button"
href="https://twitter.com/share"
data-url="http://www.sequenceserver.com" data-text="<%= quote %>" data-via="yeban" data-hashtags="bioinformatics">
Tweet
</a>
<%#<div class="g-plusone" data-annotation="none" data-href="http://www.sequenceserver.com"></div>%>
<br>
Please Cite:
<a href='http://www.sequenceserver.com'>
Priyam, Woodcroft, Rai & Wurm, <strong>SequenceServer</strong> (<em>in prep</em>)</a>
</a>
& relevant data sources.
</p>
</div>
<div
id="error"
class="modal fade"
tabindex="-1">
</div> <!-- error -->
<div
class="modal fade" id="error-no-response">
<div
class="modal-dialog">
<div
class="modal-content">
<div
class="modal-header">
<h3>Server didn't respond</h3>
</div>
<div
class="modal-body">
<p>
Could be a temporary network issue, or the service might be
configured to "time out" long requests.
</p>
<p>
Please try again
later, or report to the admin or <a
href="https://groups.google.com/forum/?fromgroups#!forum/sequenceserver">SequenceServer
Google Group</a> (if you are the admin) if problem persists.
</p>
</div>
<div
class="modal-footer">
<button
type="button"
class="btn btn-danger"
data-dismiss="modal">
Okay
</button>
</div>
</div>
</div>
</div> <!-- error-no-response -->
<div
class="modal fade" id="help"
tabindex="-1">
<div
class="modal-dialog modal-lg">
<div
class="modal-content">
<div
class="modal-header">
<h3>Advanced Options</h3>
</div>
<div
class="modal-body">
<%= erb :_options %>
</div>
<div
class="modal-footer">
<button
type="button"
class="btn btn-default btn-primary"
data-dismiss="modal">
Got it!
</button>
</div>
</div>
</div>
</div> <!-- advanced options -->
<div
class="modal" id="spinner"
tabindex="-1"
data-backdrop="static" data-keyboard="false">
<div
class="modal-dialog">
<div
class="modal-content">
<div
class="modal-body text-center">
<h2>
BLAST-ing ...
</h2>
<i class="fa fa-spinner fa-5x fa-spin"></i>
<p>
<br>
This could take some time depending on the size of your query and
database(s).
</p>
</div>
</div>
</div>
</div> <!-- spinner -->
<div
id="sequence-viewer" class="modal"
tabindex=-1>
<div
class="modal-dialog">
<div
class="modal-content">
<div
class="modal-header">
<h3>View and download sequence</h3>
</div>
<div
class="modal-body">
</div>
<div
class="spinner">
<i class="fa fa-spinner fa-3x fa-spin"></i>
</div>
<div
class="modal-footer">
</div>
</div>
</div>
</div> <!-- sequence viewing -->
<!-- JS -->
<% if settings.production? %>
<script src="js/sequenceserver.min.js"></script>
<% else %>
<script type="text/javascript" src="js/underscore.min.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/webshims/polyfiller.js"></script>
<script type="text/javascript" src="js/d3.v3.min.js"></script>
<script type="text/javascript" src="js/sequenceserver.js"></script>
<script type="text/javascript" src="js/sequenceserver.blast.js"></script>
<script type="text/javascript" src="js/jquery.t.js"></script>
<script type="text/javascript" src="js/sequence.js"></script>
<% end %>
<!-- twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>