Team:Aberdeen Scotland/DNA

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
<html>
+
.list_chars {
-
<head>
+
font-size: 11px;
 +
margin-left: 20px;
 +
}
-
<!-- Charset -->
+
.color_black sub {
-
<meta charset="UTF-8">
+
color: #000;
 +
}
-
<title>Team:Aberdeen Scotland - 2014.ogem.org</title>
+
.input_text {
 +
 +
}
-
<!-- JavaScript -->
+
#text_in {
-
<script src="https://2014.igem.org/Template:Team:Aberdeen_Scotland/JS?action=raw&ctype=text/js"></script>
+
font-family: Arial, Helvetica, sans-serif;
 +
width: auto;
 +
height: auto;
 +
margin-bottom: 5px;
 +
float: left;
 +
}
-
<!-- Include CSS -->
+
.output_dna{
-
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Template:Team:Aberdeen_Scotland/CSS?action=raw&ctype=text/css">
+
margin-top: 10px;
 +
margin-bottom: 10px;
 +
}
-
<!-- Include jQuery -->
+
#dna_out {
-
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+
font-family: Arial, Helvetica, sans-serif;
-
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
+
width: auto;
 +
height: auto;
 +
margin-bottom: 5px;
 +
font-size: 14px;
 +
font-weight: bold;
 +
float: left;
 +
}
-
<!-- DNA Translator -->
+
#to_color {
-
<script src="https://2014.igem.org/Team:Aberdeen_Scotland/DNA/JS?action=raw&ctype=text/js"></script>
+
float: left;
 +
margin-left: 3px;
 +
}
-
<!-- DNA CSS -->
+
#color_dna {
-
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:Aberdeen_Scotland/DNA/CSS?action=raw&ctype=text/css">
+
display: block;
 +
float: left;
 +
margin-bottom: 5px;
 +
}
-
<!-- Manual scripting -->
+
#color_dna div {
-
<script type="text/javascript">
+
display: inline-block;
-
function update() {
+
font-weight: bold;
-
dna = translate.toDNA({ text: $("#text_in").val() });
+
font-size: 14px;
-
$("#dna_out").val(dna);
+
line-height: 18px;
-
$("#color_dna").html("");
+
width: 18px;
-
}
+
height: 18px;
 +
text-align: center;
 +
vertical-align: middle;
 +
margin-right: 1px;
 +
}
-
function colors() {
+
.A { /* Azure */
-
dna = $("#dna_out").val();
+
background:#5050ff;
 +
color: #FFF;
 +
font-weight:bold;
 +
}
-
if(dna == "") { // check for dna sequence
+
.G { /* Green */
-
return;
+
background:#00c000;
-
}
+
color: #FFF;
 +
font-weight:bold;
 +
}
-
canvas = translate.colorDNA({ text: $("#dna_out").val() });
+
.C { /* Carmine */
-
$("#color_dna").html(canvas);
+
background:#e00000;
-
}
+
color: #FFF;
 +
font-weight:bold;
 +
}
-
$(document).ready(
+
.T { /* Tweety bird */
-
function() {
+
background:#e6e600;
-
$("#dna_out").val("");
+
color: #FFF;
-
 
+
font-weight:bold;
-
translate = new dna({});
+
}
-
 
+
-
$("#to_dna").click(update); // update DNA on button click
+
-
$("#text_in").keypress( function() { // update DNA on Enter key
+
-
var kcode = event.keyCode || event.which;
+
-
if(kcode == 13) { //Enter keycode
+
-
update();
+
-
}
+
-
});
+
-
 
+
-
$("#to_color").click(colors); // create color DNA canvas
+
-
}
+
-
);
+
-
</script>
+
-
 
+
-
</head>
+
-
<body>
+
-
<div id="wrapper">
+
-
<div id="header">
+
-
<div class="logo">
+
-
<a href="http://abdn.ac.uk" title="University of Aberdeen"></a>
+
-
</div>
+
-
<div id="navbar">
+
-
<ul class="navbar">
+
-
<li><a class="Act" href="https://2014.igem.org/Team:Aberdeen_Scotland">Home</a></li>
+
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Team">Team</a></li>
+
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Project">Project</a></li>
+
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Parts">Parts</a></li>
+
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Modeling">Modelling</a></li>
+
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Notebook">Notebook</a></li>
+
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Safety">Safety</a></li>
+
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland/Attributions">Attributions</a></li>
+
-
</ul>
+
-
<div id="social">
+
-
<ul class="social">
+
-
<li><a href="http://twitter.com/iGEM2014ABDN" title="Twitter"><img src="https://static.igem.org/mediawiki/2014/7/78/Tw_inv_22.png"></a></li>
+
-
<li><a href="http://plus.google.com/106825238674841642988" rel="publisher" title="Google+"><img src="https://static.igem.org/mediawiki/2014/4/45/G%2B22.png"></a></li>
+
-
<li><a href="http://www.facebook.com/iGEM2014ABDN" title="Facebook"><img src="https://static.igem.org/mediawiki/2014/3/35/Fb_icon_22.png"></a></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
-
 
+
-
</div> <br class="clear"> <!-- END OF HEADER -->
+
-
+
-
<div id="pcontent">
+
-
<br class="clear">
+
-
<!-- SIDEBAR -->
+
-
<div id="sidebar">
+
-
<ul class="sidebar">
+
-
<li><a href="https://2014.igem.org/Team:Aberdeen_Scotland">Overview</a></li>
+
-
<li><a href="#">Blank</a></li>
+
-
<li><a href="#">DNA</a></li>
+
-
</ul>
+
-
</div>
+
-
 
+
-
<div id="container">
+
-
 
+
-
<!-- SECTION HEAD -->
+
-
<div class="t_overview">
+
-
<h1>Overview</h1>
+
-
<p>This app will let you transcode text to DNA. The mapping alphabet is using the E. Coli codon bias and can translate the following characters:</p>
+
-
<p class="list_chars">Letters [a to z] and [A to Z], Digits [0 to 9],<br>Spaces [ ] and the Full-Stop[.]</p>
+
-
</div> <br class="clear"> <!-- END OF HEAD -->
+
-
+
-
<!-- INPUT -->
+
-
<div class="input_text">
+
-
<p>Type in the text you wish translated to DNA in the following box:</p>
+
-
<input id="text_in" type="text" name="text_in" value="" placeholder="Type your text here">
+
-
<input id="to_dna" type="button" name="to_dna" value="Translate">
+
-
<p class="color_black"><sub>*You can try entering your name for instance</sub></p>
+
-
</div>
+
-
 
+
-
<!-- OUTPUT -->
+
-
<div class="output_dna">
+
-
<p>The translation of your text will appear here:</p>
+
-
<textarea id="dna_out" rows="5" cols="64" placeholder="DNA will appear here" readonly></textarea>
+
-
<input id="to_color" type="button" name="to_color" value="Color Code DNA">
+
-
<div id="color_dna"></div>
+
-
</div>
+
-
 
+
-
 
+
-
</div> <!-- END OF CONTAINER -->
+
-
 
+
-
</div> <br class="clear"> <!-- END OF PAGE CONTENT -->
+
-
 
+
-
<div id="footer">
+
-
+
-
<ul class="sponsors">
+
-
<li><a href="http://www.abdn.ac.uk/" title="University of Aberdeen"><img src="https://static.igem.org/mediawiki/2014/c/c6/Uni_of_ab.png"></a></li>
+
-
<li><a href="http://www.bbsrc.ac.uk/" title="BBSRC"><img src="https://static.igem.org/mediawiki/2014/a/a9/Bbsrc.png"></a></li>
+
-
<li><a href="http://www.biochemistry.org" title="Biochemical Society"><img src="https://static.igem.org/mediawiki/2014/7/7c/Biochem_soc.png"></a></li>
+
-
<li><a href="http://www.sgm.ac.uk/" title="Society for General Microbiology"><img src="https://static.igem.org/mediawiki/2014/f/f5/Soc_general_microb.png"></a></li>
+
-
<li><a href="http://www.sulsa.ac.uk/" title="SULSA"><img src="https://static.igem.org/mediawiki/2014/2/24/Sulsa.png"></a></li>
+
-
</ul>
+
-
 
+
-
</div> <!-- END OF FOOTER -->
+
-
</div> <!-- END OF PAGE WRAPPER-->
+
-
</body>
+
-
</html>
+

Revision as of 22:14, 12 August 2014

.list_chars { font-size: 11px; margin-left: 20px; }

.color_black sub { color: #000; }

.input_text {

}

  1. text_in {

font-family: Arial, Helvetica, sans-serif; width: auto; height: auto; margin-bottom: 5px; float: left; }

.output_dna{ margin-top: 10px; margin-bottom: 10px; }

  1. dna_out {

font-family: Arial, Helvetica, sans-serif; width: auto; height: auto; margin-bottom: 5px; font-size: 14px; font-weight: bold; float: left; }

  1. to_color {

float: left; margin-left: 3px; }

  1. color_dna {

display: block; float: left; margin-bottom: 5px; }

  1. color_dna div {

display: inline-block; font-weight: bold; font-size: 14px; line-height: 18px; width: 18px; height: 18px; text-align: center; vertical-align: middle; margin-right: 1px; }

.A { /* Azure */ background:#5050ff; color: #FFF; font-weight:bold; }

.G { /* Green */ background:#00c000; color: #FFF; font-weight:bold; }

.C { /* Carmine */ background:#e00000; color: #FFF; font-weight:bold; }

.T { /* Tweety bird */ background:#e6e600; color: #FFF; font-weight:bold; }

Retrieved from "http://2014.igem.org/Team:Aberdeen_Scotland/DNA"