index.html

{% extends "tool_base.html" %}
{% load static %}

{% block head %}
		<link rel="stylesheet" href="{% static "dna_css/style.css" %}">
		<title>DNA Translator</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
		<script src="{% static "dna_script.js" %}"></script>
{% endblock %}

{% block content %}
	<div id="body-div">
		<div class="container">
			<div class="title">
				<h1>DNA Translator</h1>
				<p>
					Translate one or more lines of DNA sequence[s] into their corresponding amino acids
				</p>
			</div>
			<form action="results/" method="post" id="mainform">
				{% csrf_token %}
				<textarea style="font-family:monospace;" id="userinput" name="userinput" placeholder="Enter DNA sequence or multi-line sequences here. Fasta format also accepted" required autofocus></textarea>
				<div id="clearbutton" class="hide">Clear</div>
				<div class="row">
					<div class="col-sm-8">
						<h2>Mode Selection</h2>
						<p>
							A codon (3 nucleotide DNA sequence) can sometimes contain mixtures. Any codon containing said mixture nucleotides could potentially resolve into multiple amino acids. 
							For example the codon 'ARR' contains two mixture nucleotides 'R' and one 'A'.'R' means that the nucleotide is both an 'A' <span class="bold">and</span> a 'G'. 
							This means that the codon has four possible resolutions: AAA, AAG, AGA, and AGG. AAA and AAG encode the same amino acid Lysine (K), while AGA and AGG encode the same 
							amino acid Arginine (R). So the translation of any of these codons can result in only two different amino acids. This is called a non-synonymous resolution, where a codon
							can resolve into more than one amino acid. The inverse is a synonymous resolution in which a codon may contain a mixture, but all potentials resolve to the same amino acid.
							Below, you may choose how you wish to deal with mixture nucleotides in your output.
						</p>
						<div class="row">
							<div class="col-sm-12">
								<input type="radio" id="r1" name="flagselection" checked value="2">
								<label class="radio-label" for="r1">Resolve synonymous mixtures, flag non-synonymous as the "resolve character" (default is "X")</label>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<input type="radio" id="r2" name="flagselection" value="1">
								<label class="radio-label" for="r2">Flag all mixtures as the "resolve character"</label>
							</div>
						</div>
						<div class="row">
							<div class="col-sm-12">
								<input type="radio" id="r3" name="flagselection" value="3">
								<label class="radio-label" for="r3">Resolve all mixtures, show non-synonymous in [brackets]</label>
							</div>
						</div>
					</div>
					<div class="col-sm-4">
						<h2>Resolve character</h2>
						<input class="large" type="text" name="resolvecharacter" placeholder="Enter single character" maxlength="1">
						<h2>Additional Options</h2>
						<input type="checkbox" checked id="highlight" name="highlight" value="True">
						<label class="chklabel" for="highlight">Enable mixture highlighting</label>
						<h2>Reading Frame</h2>
						<input type="radio" id="r4" name="readingframe" value="1" checked>
						<label class="radio-label" for="r4">Frame 1</label>
						<input type="radio" id="r5" name="readingframe" value="2">
						<label class="radio-label" for="r5">Frame 2</label>
						<input type="radio" id="r6" name="readingframe" value="3">
						<label class="radio-label" for="r6">Frame 3</label>
						<p class="italic">*Note that reading frames 2 and 3 will not translate the last codon if the sequence is divisible by 3</p>
					</div>
				</div>
				<div class="spacer"></div>
				<button class="btn-large btn-blank round-sm btn-blue" value="on" name="runtranslate" type="submit" form="mainform">Translate</button>
			</form>
		</div>
	</div>
{% endblock %}