Team:Aberdeen Scotland/DNA

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
/* REMOVE WIKI STYLING */
+
<html>
 +
<head>
-
body, html, #globalWrapper, #content {
+
<!-- Charset -->
-
background: transparent;
+
<meta charset="UTF-8">
-
margin: 0;
+
-
padding: 0;
+
-
border: 0 none transparent;
+
-
font-size: 1em;
+
-
width: auto;
+
-
border-top: 1px solid transparent;
+
-
margin-top: -1px;
+
-
}
+
-
#top-section {
+
<title>Team:Aberdeen Scotland - 2014.ogem.org</title>
-
border: 0 none transparent;
+
-
margin: auto;
+
-
padding: 0;
+
-
width: 975px;
+
-
height: 1.5em;
+
-
margin-bottom: -1.5em;
+
-
text-decoration: none;
+
-
}
+
-
li.selected a {
+
<!-- JavaScript -->
-
border: 0 none transparent;
+
<script src="https://2014.igem.org/Template:Team:Aberdeen_Scotland/JS?action=raw&ctype=text/js"></script>
-
color: transparent;
+
-
margin: auto;
+
-
padding: 0;
+
-
width: 975px;
+
-
height: 1.5em;
+
-
margin-bottom: -1.5em;
+
-
text-decoration: none;
+
-
}
+
-
#menubar.left-menu li {
+
<!-- Include CSS -->
-
color: transparent;
+
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Template:Team:Aberdeen_Scotland/CSS?action=raw&ctype=text/css">
-
}
+
-
#top-section:hover #menubar * {
+
<!-- Include jQuery -->
-
color: blue !important;
+
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
-
text-decoration: none;
+
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
-
}
+
-
#top-section:hover #menubar.left-menu {
+
<!-- DNA Translator -->
-
background: rgba(255, 255, 255, 0.75) !important;
+
<script src="https://2014.igem.org/Team:Aberdeen_Scotland/DNA/JS?action=raw&ctype=text/js"></script>
-
}
+
-
#search-controls{
+
-
        height: 0px;
+
-
        display: none !important;
+
-
}
+
-
#content>p:first-child {
+
<!-- DNA CSS -->
-
        margin: 0;
+
<link rel="stylesheet" type="text/css" href="https://2014.igem.org/Team:Aberdeen_Scotland/DNA/CSS?action=raw&ctype=text/css">
-
        height: 0;
+
-
        display: none;
+
-
}
+
-
.toc {
+
<!-- Manual scripting -->
-
        display: none;
+
<script type="text/javascript">
-
}
+
function update() {
 +
dna = translate.toDNA({ text: $("#text_in").val() });
 +
$("#dna_out").val(dna);
 +
$("#color_dna").html("");
 +
}
-
.editsection {
+
function colors() {
-
        display: none;
+
dna = $("#dna_out").val();
-
}
+
 +
if(dna == "") { // check for dna sequence
 +
return;
 +
}
-
#contentSub, #footer-box, #sitesub, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading, .visualClear {display: none;}
+
canvas = translate.colorDNA({ text: $("#dna_out").val() });
 +
$("#color_dna").html(canvas);
 +
}
-
/* END OF STYLING REMOVAL*/
+
$(document).ready(
 +
function() {
 +
$("#dna_out").val("");
 +
translate = new dna({});
-
#top, .firstHeading {
+
$("#to_dna").click(update); // update DNA on button click
-
display: none;
+
$("#text_in").keypress( function() { // update DNA on Enter key
-
}
+
var kcode = event.keyCode || event.which;
 +
if(kcode == 13) { //Enter keycode
 +
update();
 +
}
 +
});
-
body {
+
$("#to_color").click(colors); // create color DNA canvas
-
background: #8B2942; /*E6E6E6*/
+
}
-
color: #8B2942;
+
);
-
font-family: Arial, Helvetica, sans-serif;
+
</script>
-
}
+
-
.pg_break {
+
</head>
-
clear: both;
+
<body>
-
border: 1px dotted #8B2942;
+
<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 -->
-
margin: 0px;
+
-
padding: 0px;
+
<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>
-
p {
+
<div id="container">
-
margin: 0px;
+
-
padding: 0px;
+
-
}
+
-
a {
+
<!-- SECTION HEAD -->
-
margin: 0px;
+
<div class="t_overview">
-
padding: 0px;
+
<h1>Overview</h1>
-
text-decoration: none;
+
<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>
 +
<textarea id="text_in" rows="2" cols="70" placeholder="Type your text here"></textarea>
 +
<input id="to_dna" type="button" name="to_dna" value="Translate">
 +
<br class="clear">
 +
<p class="color_black"><sub>*You can try entering your name for instance</sub></p>
 +
</div>
-
ul {
+
<!-- OUTPUT -->
-
margin: 0px;
+
<div class="output_dna">
-
padding: 0px;
+
<p>The translation of your text will appear here:</p>
-
list-style: none;
+
<textarea id="dna_out" rows="5" cols="70" 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>
-
#wrapper{
 
-
background: #8B2942;
 
-
width: 975px;
 
-
margin: auto;
 
-
text-align: left;
 
-
}
 
-
#wrapper h1, h2, h3, h4, h5, h6 {
+
</div> <!-- END OF CONTAINER -->
-
color: #8B2942;
+
-
font-family: Arial, Helvetica, sans-serif;
+
-
border: none;
+
-
}
+
-
#header {
+
</div> <br class="clear"> <!-- END OF PAGE CONTENT -->
-
width: auto;
+
-
margin: auto;
+
-
}
+
-
.logo a {
+
<div id="footer">
-
background-image: url(https://static.igem.org/mediawiki/2014/5/51/Head.png);
+
-
background-repeat: no-repeat;
+
<ul class="sponsors">
-
display: block;
+
<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>
-
width: 975px;
+
<li><a href="http://www.bbsrc.ac.uk/" title="BBSRC"><img src="https://static.igem.org/mediawiki/2014/a/a9/Bbsrc.png"></a></li>
-
height: 327px;
+
<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>
-
z-index: -1;
+
<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>
-
#navbar {
+
</div> <!-- END OF FOOTER -->
-
margin-top: -33px;
+
</div> <!-- END OF PAGE WRAPPER-->
-
z-index: 1;
+
</body>
-
}
+
</html>
-
 
+
-
ul.navbar {
+
-
float: center;
+
-
margin: 0px;
+
-
margin-left: 10px;
+
-
padding: 0px;
+
-
text-align: center;
+
-
display: block;
+
-
}
+
-
 
+
-
ul.navbar li {
+
-
padding: 0px;
+
-
margin: 0px;
+
-
display: inline-block;
+
-
float: left;
+
-
}
+
-
 
+
-
.navbar li a {
+
-
float: left;
+
-
margin-top: 3px;
+
-
margin-bottom: 1px;
+
-
padding-left: 12px;
+
-
padding-right: 12px;
+
-
font-family: "Calibri", tahoma, arial, sans-serif;
+
-
font-size: 18px;
+
-
color: #FFF;
+
-
background: #8B2942;
+
-
line-height: 30px;
+
-
text-decoration: none;
+
-
border-right: 1px dotted #FFF;
+
-
}
+
-
 
+
-
.navbar li a.Act {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
margin-top: 0px;
+
-
border-bottom: 3px solid #FFF;
+
-
}
+
-
 
+
-
.navbar li a:hover {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
position: relative;
+
-
margin-top: 0px;
+
-
border-bottom: 3px solid #FFF;
+
-
}
+
-
 
+
-
.navbar li a.Act:hover {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
margin-top: 0px;
+
-
border-bottom: 3px solid #FFF;
+
-
}
+
-
 
+
-
#social {
+
-
float: right;
+
-
background: url(https://static.igem.org/mediawiki/2014/f/f4/Blur.png);
+
-
background-repeat: no-repeat;
+
-
width: 114px;
+
-
height: 30px;
+
-
padding-top: 4px;
+
-
display: block;
+
-
z-index: 1;
+
-
}
+
-
 
+
-
ul.social {
+
-
display: block;
+
-
}
+
-
 
+
-
.social li a {
+
-
float: right;
+
-
margin-right: 12px;
+
-
width: 22px;
+
-
height: 22px;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
.social li a:hover {
+
-
position: relative;
+
-
margin-top: -2px;
+
-
margin-left: -1px;
+
-
margin-right: 13px;
+
-
}
+
-
 
+
-
.social li a:hover img {
+
-
display: block;
+
-
width: 23px;
+
-
height: 23px;
+
-
}
+
-
 
+
-
#pcontent {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
margin-top: -1px;
+
-
z-index: 1;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
#sidebar {
+
-
float: left;
+
-
margin: 0;
+
-
padding-left: 20px;
+
-
width: 130px;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
#container {
+
-
clear: right;
+
-
float: right;
+
-
width: 825px;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
.t_overview {
+
-
display: block;
+
-
float: left;
+
-
}
+
-
 
+
-
.t_overview h1 {
+
-
padding-top: 1px;
+
-
margin-bottom: 10px;
+
-
}
+
-
 
+
-
.t_overview p {
+
-
margin-top: 5px;
+
-
margin-bottom: 5px;
+
-
}
+
-
 
+
-
ul.back_button {
+
-
display: inline-block;
+
-
}
+
-
 
+
-
ul.back_button li {
+
-
margin: 10px;
+
-
}
+
-
 
+
-
.back_button li a {
+
-
padding-top: 6px;
+
-
padding-bottom: 6px;
+
-
padding-left: 7px;
+
-
padding-right: 7px;
+
-
text-decoration: none;
+
-
color: #FFF;
+
-
background: #8B2942;
+
-
border: 2px solid #8B2942;
+
-
}
+
-
 
+
-
.back_button li a:hover {
+
-
color: #8B2942;
+
-
background: #FFF;
+
-
}
+
-
 
+
-
.external {
+
-
display: block;
+
-
float: left;
+
-
}
+
-
 
+
-
#member {
+
-
+
-
}
+
-
 
+
-
div#member {
+
-
width: 100%;
+
-
float: left;
+
-
display: block;
+
-
/*background: rgba(139, 41, 66, 0.1);*/
+
-
-webkit-box-sizing: border-box;
+
-
  -moz-box-sizing: border-box;
+
-
        box-sizing: border-box;
+
-
border: 20px solid #FFF;
+
-
-webkit-border-radius: 30px;
+
-
        border-radius: 30px;
+
-
}
+
-
 
+
-
#member div {
+
-
display: inline-block;
+
-
}
+
-
 
+
-
#members {
+
-
 
+
-
}
+
-
 
+
-
img.prof_pic {
+
-
float: right;
+
-
height: auto;
+
-
max-width: 190px;
+
-
margin-left: 25px;
+
-
margin-right: 25px;
+
-
margin-bottom: 5px;
+
-
margin-top: 0px;
+
-
}
+
-
 
+
-
#member img {
+
-
+
-
}
+
-
 
+
-
.name {
+
-
float: left;
+
-
margin: auto;
+
-
padding: 15px;
+
-
}
+
-
 
+
-
.member_descr {
+
-
margin: auto;
+
-
padding: 15px;
+
-
display: inline-block;
+
-
text-align: justify;
+
-
}
+
-
 
+
-
.member_descr h2 {
+
-
margin-top: 0px;
+
-
font-size: 20px;
+
-
}
+
-
 
+
-
.member_descr p {
+
-
+
-
}
+
-
 
+
-
.clear {
+
-
clear: both;
+
-
}
+
-
 
+
-
#footer {
+
-
background: #FFF;
+
-
color: #8B2942;
+
-
width: 975px;
+
-
margin-top: 0px;
+
-
padding-top: 15px;
+
-
padding-bottom: 15px;
+
-
display: inline-block;
+
-
}
+
-
 
+
-
.sponsors li a img {
+
-
width: 150px;
+
-
}
+

Revision as of 22:24, 12 August 2014

Team:Aberdeen Scotland - 2014.ogem.org



Overview

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:

Letters [a to z] and [A to Z], Digits [0 to 9],
Spaces [ ] and the Full-Stop[.]


Type in the text you wish translated to DNA in the following box:


*You can try entering your name for instance

The translation of your text will appear here:


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