Difference between revisions of "Team:Sydney Australia/Hexagon"

 
(27 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
{{:Team:Sydney_Australia/Templates/NavBar}}
 
 
<html>
 
<html>
 
<head>
 
<head>
−
 
+
<script src="https://2017.igem.org/Team:Sydney_Australia/Resources/angularplasmid.complete.min.js"></script>
−
<script>
+
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 +
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">
  
−
$(document).ready(function(){
+
<script type="text/javascript" src="https://use.fontawesome.com/2967839f93.js"></script>
−
$('.chat[data-chat=person2]').addClass('active-chat');
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
$('.person[data-chat=person2]').addClass('active');
+
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  
−
$('.left .person').mousedown(function(){
+
<script>
−
    if ($(this).hasClass('.active')) {
+
$(document).ready(function() {
−
        return false;
+
  $(function() {
−
    } else {
+
      $('#pip').click(function() {
−
        var findChat = $(this).attr('data-chat');
+
          $('.pip_info').fadeToggle('slow');
−
        var personName = $(this).find('.name').text();
+
          $('.lacr_info').hide();
−
        $('.right .top .name').html(personName);
+
          $('.eoriv_info').hide();
−
        $('.chat').removeClass('active-chat');
+
          $('.boriv_info').hide();
−
        $('.left .person').removeClass('active');
+
          $('.mcs_info').hide();
−
        $(this).addClass('active');
+
          $('.anti_info').hide();
−
        $('.chat[data-chat = '+findChat+']').addClass('active-chat');
+
          $('.laco_info').hide();
−
    }
+
          $('.super_info').hide();             
−
});
+
      });       
−
    });
+
  });
 +
  $(function() {
 +
      $('#boriv').click(function() {
 +
          $('.boriv_info').fadeToggle('slow');
 +
          $('.lacr_info').hide();
 +
          $('.pip_info').hide();
 +
          $('.eoriv_info').hide();
 +
          $('.mcs_info').hide();
 +
          $('.anti_info').hide();
 +
          $('.laco_info').hide();
 +
          $('.super_info').hide();             
 +
      });       
 +
  });
 +
  $(function() {
 +
      $('#eoriv').click(function() {
 +
          $('.eoriv_info').fadeToggle('slow');
 +
          $('.lacr_info').hide();
 +
          $('.pip_info').hide();
 +
          $('.boriv_info').hide();
 +
          $('.mcs_info').hide();
 +
          $('.anti_info').hide();
 +
          $('.laco_info').hide();
 +
          $('.super_info').hide();             
 +
      });       
 +
  });
 +
  $(function() {
 +
      $('#mcs1').click(function() {
 +
          $('.mcs_info').fadeToggle('slow');
 +
          $('.lacr_info').hide();
 +
          $('.pip_info').hide();
 +
          $('.eoriv_info').hide();
 +
          $('.boriv_info').hide();
 +
          $('.anti_info').hide();
 +
          $('.laco_info').hide();
 +
          $('.super_info').hide();             
 +
      });       
 +
  });
 +
  $(function() {
 +
      $('#mcs2').click(function() {
 +
          $('.mcs_info').fadeToggle('slow');
 +
          $('.lacr_info').hide();
 +
          $('.pip_info').hide();
 +
          $('.eoriv_info').hide();
 +
          $('.boriv_info').hide();
 +
          $('.anti_info').hide();
 +
          $('.laco_info').hide();
 +
          $('.super_info').hide();             
 +
      });       
 +
  });
 +
  $(function() {
 +
      $('#anti').click(function() {
 +
          $('.anti_info').fadeToggle('slow');
 +
          $('.lacr_info').hide();
 +
          $('.pip_info').hide();
 +
          $('.eoriv_info').hide();
 +
          $('.boriv_info').hide();
 +
          $('.mcs_info').hide();
 +
          $('.laco_info').hide();
 +
          $('.super_info').hide();             
 +
      });       
 +
  });
 +
  $(function() {
 +
      $('#super').click(function() {
 +
          $('.super_info').fadeToggle('slow');
 +
          $('.lacr_info').hide();
 +
          $('.pip_info').hide();
 +
          $('.eoriv_info').hide();
 +
          $('.boriv_info').hide();
 +
          $('.mcs_info').hide();
 +
          $('.anti_info').hide();
 +
          $('.laco_info').hide();             
 +
      });       
 +
  });
 +
  $(function() {
 +
      $('#lacr').click(function() {
 +
          $('.lacr_info').fadeToggle('slow');
 +
          $('.pip_info').hide();
 +
          $('.eoriv_info').hide();
 +
          $('.boriv_info').hide();
 +
          $('.mcs_info').hide();
 +
          $('.anti_info').hide();
 +
          $('.laco_info').hide();
 +
          $('.super_info').hide();             
 +
      });       
 +
  });
 +
  $(function() {
 +
      $('#laco').click(function() {
 +
          $('.laco_info').fadeToggle('slow');
 +
          $('.lacr_info').hide();
 +
          $('.pip_info').hide();
 +
          $('.eoriv_info').hide();
 +
          $('.boriv_info').hide();
 +
          $('.mcs_info').hide();
 +
          $('.anti_info').hide();
 +
          $('.super_info').hide();             
 +
      });       
 +
  });
 +
 
 +
  });
 
</script>
 
</script>
 
<style>
 
<style>
−
/**
+
  .plasmid .markerhover:hover {
−
  Coded by /u/j0be in scss.
+
  stroke: #e2e2e2;
−
  See scss source here -> https://codepen.io/j0be/pen/MKRVyN
+
  stroke-width: 2px;
−
*/
+
}
 +
  .plasmid .track {
 +
  fill: #cfd9db;
 +
  stroke: #c0cdd1;
 +
}
 +
  .plasmid .tracklabelbody {
 +
  font: 400 20px "Quicksand";
 +
  fill: #5e7980;
 +
}
 +
  .plasmid .tracklabeltitle {
 +
  font: 700 40px "Quicksand";
 +
  fill: #334145;
 +
}
 +
  .plasmid .tracklabelsmall {
 +
  font: 400 12px "Quicksand";
 +
  fill: #5e7980;
 +
}
 +
  .plasmid .scale-major {
 +
  stroke: #334145;
 +
  stroke-width: 2px;
 +
}
 +
  .plasmid .scale-minor {
 +
  stroke: #94aab0;
 +
}
 +
  .plasmid .scale-majortext {
 +
  font: 300 9px "Quicksand";
 +
  fill: #94aab0;
 +
}
 +
  .plasmid .markerlabel {
 +
  font: 400 9px "Quicksand";
 +
  fill: #334145;
 +
}
 +
  .plasmid .featurelabel {
 +
  font: 700 14px "Quicksand";
 +
  fill: #c00;
 +
}
 +
  .plasmid .regionlabel {
 +
  font: 400 11px "Lato";
 +
}
 +
  .plasmid .noncodingregion {
 +
  fill: none;
 +
  stroke: #a3b6bb;
 +
  stroke-dasharray: 4,2;
 +
}
 +
  .plasmid .noncodinglabel {
 +
  font: 400 9px "Quicksand";
 +
  fill: #5e7980;
 +
}
 +
  .plasmid .atracklabel {
 +
  font: 400 20px "Quicksand";
 +
  color: #5e7980;
 +
  text-anchor: middle;
 +
}
 +
  .plasmid .atracklabel h1 {
 +
  font: 700 40px "Quicksand";
 +
}
 +
  .plasmid .atracklabel .tiny {
 +
  font: 400 12px "Quicksand";
 +
  margin-top: 10px;
 +
}
  
−
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600); *, *:before, *:after { box-sizing: border-box; } body { background-color: #f8f8f8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; background-image: url("https://s17.postimg.org/fr01hfe33/image.jpg"); background-size: cover; background-repeat: none; } .wrapper { position: relative; left: 50%; width: 1000px; height: 800px; transform: translate(-50%, 0); } .container { position: relative; top: 50%; left: 50%; width: 80%; height: 75%; background-color: #fff; transform: translate(-50%, -50%); } .container .left { float: left; width: 37.6%; height: 100%; border: 1px solid #e6e6e6; background-color: #fff; } .container .left .top { position: relative; width: 100%; height: 96px; padding: 29px; } .container .left .top:after { position: absolute; bottom: 0; left: 50%; display: block; width: 80%; height: 1px; content: ''; background-color: #e6e6e6; transform: translate(-50%, 0); } .container .left input { float: left; width: 188px; height: 42px; padding: 0 15px; border: 1px solid #e6e6e6; background-color: #eceff1; border-radius: 21px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; } .container .left input:focus { outline: none; } .container .left a.search { display: block; float: left; width: 42px; height: 42px; margin-left: 10px; border: 1px solid #e6e6e6; background-color: #00b0ff; background-image: url("https://s11.postimg.org/dpuahewmn/name_type.png"); background-repeat: no-repeat; background-position: top 12px left 14px; border-radius: 50%; } .container .left .people { margin-left: -1px; border-right: 1px solid #e6e6e6; border-left: 1px solid #e6e6e6; width: calc(100% + 2px); } .container .left .people .person { position: relative; width: 100%; padding: 12px 10% 16px; cursor: pointer; background-color: #fff; } .container .left .people .person:after { position: absolute; bottom: 0; left: 50%; display: block; width: 80%; height: 1px; content: ''; background-color: #e6e6e6; transform: translate(-50%, 0); } .container .left .people .person img { float: left; width: 40px; height: 40px; margin-right: 12px; border-radius: 50%; } .container .left .people .person .name { font-size: 14px; line-height: 22px; color: #1a1a1a; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; } .container .left .people .person .time { font-size: 14px; position: absolute; top: 16px; right: 10%; padding: 0 0 5px 5px; color: #999; background-color: #fff; } .container .left .people .person .preview { font-size: 14px; display: inline-block; overflow: hidden !important; width: 70%; white-space: nowrap; text-overflow: ellipsis; color: #999; } .container .left .people .person.active, .container .left .people .person:hover { margin-top: -1px; margin-left: -1px; padding-top: 13px; border: 0; background-color: #00b0ff; width: calc(100% + 2px); padding-left: calc(10% + 1px); } .container .left .people .person.active span, .container .left .people .person:hover span { color: #fff; background: transparent; } .container .left .people .person.active:after, .container .left .people .person:hover:after { display: none; } .container .right { position: relative; float: left; width: 62.4%; height: 100%; } .container .right .top { width: 100%; height: 47px; padding: 15px 29px; background-color: #eceff1; } .container .right .top span { font-size: 15px; color: #999; } .container .right .top span .name { color: #1a1a1a; font-family: 'Source Sans Pro', sans-serif; font-weight: 600; } .container .right .chat { position: relative; display: none; overflow: hidden; padding: 0 35px 92px; border-width: 1px 1px 1px 0; border-style: solid; border-color: #e6e6e6; height: calc(100% - 48px); justify-content: flex-end; flex-direction: column; } .container .right .chat.active-chat { display: block; display: flex; } .container .right .chat.active-chat .bubble { -moz-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); -o-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); -webkit-transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); transition-timing-function: cubic-bezier(0.4, -0.04, 1, 1); } .container .right .chat.active-chat .bubble:nth-of-type(1) { -moz-animation-duration: 0.15s; -webkit-animation-duration: 0.15s; animation-duration: 0.15s; } .container .right .chat.active-chat .bubble:nth-of-type(2) { -moz-animation-duration: 0.3s; -webkit-animation-duration: 0.3s; animation-duration: 0.3s; } .container .right .chat.active-chat .bubble:nth-of-type(3) { -moz-animation-duration: 0.45s; -webkit-animation-duration: 0.45s; animation-duration: 0.45s; } .container .right .chat.active-chat .bubble:nth-of-type(4) { -moz-animation-duration: 0.6s; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; } .container .right .chat.active-chat .bubble:nth-of-type(5) { -moz-animation-duration: 0.75s; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } .container .right .chat.active-chat .bubble:nth-of-type(6) { -moz-animation-duration: 0.9s; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; } .container .right .chat.active-chat .bubble:nth-of-type(7) { -moz-animation-duration: 1.05s; -webkit-animation-duration: 1.05s; animation-duration: 1.05s; } .container .right .chat.active-chat .bubble:nth-of-type(8) { -moz-animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-duration: 1.2s; } .container .right .chat.active-chat .bubble:nth-of-type(9) { -moz-animation-duration: 1.35s; -webkit-animation-duration: 1.35s; animation-duration: 1.35s; } .container .right .chat.active-chat .bubble:nth-of-type(10) { -moz-animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } .container .right .write { position: absolute; bottom: 29px; left: 30px; height: 42px; padding-left: 8px; border: 1px solid #e6e6e6; background-color: #eceff1; width: calc(100% - 58px); border-radius: 5px; } .container .right .write input { font-size: 16px; float: left; width: 347px; height: 40px; padding: 0 10px; color: #1a1a1a; border: 0; outline: none; background-color: #eceff1; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; } .container .right .write .write-link.attach:before { display: inline-block; float: left; width: 20px; height: 42px; content: ''; background-image: url("https://s1.postimg.org/s5gfy283f/attachemnt.png"); background-repeat: no-repeat; background-position: center; } .container .right .write .write-link.smiley:before { display: inline-block; float: left; width: 20px; height: 42px; content: ''; background-image: url("https://s14.postimg.org/q2ug83h7h/smiley.png"); background-repeat: no-repeat; background-position: center; } .container .right .write .write-link.send:before { display: inline-block; float: left; width: 20px; height: 42px; margin-left: 11px; content: ''; background-image: url("https://s30.postimg.org/nz9dho0pp/send.png"); background-repeat: no-repeat; background-position: center; } .container .right .bubble { font-size: 16px; position: relative; display: inline-block; clear: both; margin-bottom: 8px; padding: 13px 14px; vertical-align: top; border-radius: 5px; } .container .right .bubble:before { position: absolute; top: 19px; display: block; width: 8px; height: 6px; content: '\00a0'; transform: rotate(29deg) skew(-35deg); } .container .right .bubble.you { float: left; color: #fff; background-color: #00b0ff; align-self: flex-start; -moz-animation-name: slideFromLeft; -webkit-animation-name: slideFromLeft; animation-name: slideFromLeft; } .container .right .bubble.you:before { left: -3px; background-color: #00b0ff; } .container .right .bubble.me { float: right; color: #1a1a1a; background-color: #eceff1; align-self: flex-end; -moz-animation-name: slideFromRight; -webkit-animation-name: slideFromRight; animation-name: slideFromRight; } .container .right .bubble.me:before { right: -3px; background-color: #eceff1; } .container .right .conversation-start { position: relative; width: 100%; margin-bottom: 27px; text-align: center; } .container .right .conversation-start span { font-size: 14px; display: inline-block; color: #999; } .container .right .conversation-start span:before, .container .right .conversation-start span:after { position: absolute; top: 10px; display: inline-block; width: 30%; height: 1px; content: ''; background-color: #e6e6e6; } .container .right .conversation-start span:before { left: 0; } .container .right .conversation-start span:after { right: 0; } @keyframes slideFromLeft { 0% { margin-left: -200px; opacity: 0; } 100% { margin-left: 0; opacity: 1; } } @-webkit-keyframes slideFromLeft { 0% { margin-left: -200px; opacity: 0; } 100% { margin-left: 0; opacity: 1; } } @keyframes slideFromRight { 0% { margin-right: -200px; opacity: 0; } 100% { margin-right: 0; opacity: 1; } } @-webkit-keyframes slideFromRight { 0% { margin-right: -200px; opacity: 0; } 100% { margin-right: 0; opacity: 1; } }  
+
.element_info_box_container {
 +
width:95%;
 +
height:460px;
 +
overflow:scroll;
 +
background-color:#e2e2e2;
 +
border-radius:20px;
 +
}
 +
.pus270_container {
 +
display:flex;
 +
flex-direction:row;
 +
flex-wrap: nowrap ;
 +
justify-content: space-around;
 +
align-items:center;
 +
align-content:space-around;
 +
}
 +
.pus_270 {flex-basis:60%;}
 +
.pus_270_info {flex-grow:2;}
 +
 
 +
.lacr_info, .pip_info, .eoriv_info, .mcs_info, .anti_info, .boriv_info, .laco_info, .super_info {display:none;}
 
</style>
 
</style>
 +
 
</head>
 
</head>
 
<body>
 
<body>
−
<div class="wrapper">
 
−
    <div class="container">
 
−
        <div class="left">
 
−
            <div class="top">
 
−
                <input type="text" />
 
−
                <a href="javascript:;" class="search"></a>
 
−
            </div>
 
−
            <ul class="people">
 
−
                <li class="person" data-chat="person1">
 
−
                    <img src="https://s13.postimg.org/ih41k9tqr/img1.jpg" alt="" />
 
−
                    <span class="name">Thomas Bangalter</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">I was wondering...</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person2">
 
−
                    <img src="https://s3.postimg.org/yf86x7z1r/img2.jpg" alt="" />
 
−
                    <span class="name">Dog Woofson</span>
 
−
                    <span class="time">1:44 PM</span>
 
−
                    <span class="preview">I've forgotten how it felt before</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person3">
 
−
                    <img src="https://s3.postimg.org/h9q4sm433/img3.jpg" alt="" />
 
−
                    <span class="name">Louis CK</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">But we’re probably gonna need a new carpet.</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person4">
 
−
                    <img src="https://s3.postimg.org/quect8isv/img4.jpg" alt="" />
 
−
                    <span class="name">Bo Jackson</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">It’s not that bad...</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person5">
 
−
                    <img src="https://s16.postimg.org/ete1l89z5/img5.jpg" alt="" />
 
−
                    <span class="name">Michael Jordan</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">Wasup for the third time like is
 
−
you bling bitch</span>
 
−
                </li>
 
−
                <li class="person" data-chat="person6">
 
−
                    <img src="https://s30.postimg.org/kwi7e42rh/img6.jpg" alt="" />
 
−
                    <span class="name">Drake</span>
 
−
                    <span class="time">2:09 PM</span>
 
−
                    <span class="preview">howdoyoudoaspace</span>
 
−
                </li>
 
−
            </ul>
 
−
        </div>
 
−
        <div class="right">
 
−
            <div class="top"><span>To: <span class="name">Dog Woofson</span></span></div>
 
−
            <div class="chat" data-chat="person1">
 
−
                <div class="conversation-start">
 
−
                    <span>Today, 6:48 AM</span>
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Hello,
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    it's me.
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    I was wondering...
 
−
                </div>
 
−
            </div>
 
−
            <div class="chat" data-chat="person2">
 
−
                <div class="conversation-start">
 
−
                    <span>Today, 5:38 PM</span>
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Hello, can you hear me?
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    I'm in California dreaming
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    ... about who we used to be.
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    Are you serious?
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    When we were younger and free...
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    I've forgotten how it felt before
 
−
                </div>
 
−
            </div>
 
−
            <div class="chat" data-chat="person3">
 
−
                <div class="conversation-start">
 
−
                    <span>Today, 3:38 AM</span>
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Hey human!
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Umm... Someone took a shit in the hallway.
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    ... what.
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    Are you serious?
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    I mean...
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    It’s not that bad...
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    But we’re probably gonna need a new carpet.
 
−
                </div>
 
−
            </div>
 
−
            <div class="chat" data-chat="person4">
 
−
                <div class="conversation-start">
 
−
                    <span>Yesterday, 4:20 PM</span>
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    Hey human!
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    Umm... Someone took a shit in the hallway.
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    ... what.
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Are you serious?
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    I mean...
 
−
                </div>
 
−
                <div class="bubble me">
 
−
                    It’s not that bad...
 
−
                </div>
 
−
            </div>
 
−
            <div class="chat" data-chat="person5">
 
−
                <div class="conversation-start">
 
−
                    <span>Today, 6:28 AM</span>
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Wasup
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Wasup
 
−
                </div>
 
−
                <div class="bubble you">
 
−
                    Wasup for the third time like is <br />you blind bitch
 
−
                </div>
 
  
−
            </div>
+
<div class="pus270_container">
−
            <div class="chat" data-chat="person6">
+
<div class="pus_270">
−
                <div class="conversation-start">
+
<plasmid id="pdemo" class="plasmid" plasmidheight="450" plasmidwidth="600" sequencelength="1240">
−
                    <span>Monday, 1:27 PM</span>
+
    <plasmidtrack style="fill:#e2e2e2;stroke:none;" trackclass="track" radius="200" width="5">
−
                </div>
+
    <!-- plasmid title -->
−
                <div class="bubble you">
+
        <tracklabel text="pUS270" labelstyle="font-size:30px;font-weight:700;font-family:'Quicksand';"></tracklabel>
−
                    So, how's your new phone?
+
        <tracklabel text="5707 bp" labelstyle="font-size:18px;font-weight:400;font-family:'Quicksand';" vadjust="25"></tracklabel>
−
                </div>
+
 
−
                <div class="bubble you">
+
 
−
                    You finally have a smartphone :D
+
        <!-- NeoR/KanR -->   
−
                </div>
+
  <trackmarker markerclass="markerhover" start="0" end="200" style="fill:#f2cbf1"  arrowendlength="15" arrowendwidth="10" vadjust="-10" wadjust="20">
−
                <div class="bubble me">
+
                <svgelement type="a" xlink:href="" id="anti" target="_blank">
−
                     Drake?
+
            <markerlabel labelclass="markerlabel" text="NeoR/KanR" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
−
                </div>
+
            </svgelement>
−
                <div class="bubble me">
+
 
−
                     Why aren't you answering?
+
  </trackmarker>
−
                </div>
+
        <!-- pIP501 Rep -->   
−
                <div class="bubble you">
+
  <trackmarker markerclass="markerhover" start="220" end="420" style="fill:#b1d7dd" arrowendlength="15" arrowendwidth="10" vadjust="-10" wadjust="20">
−
                     howdoyoudoaspace
+
                <svgelement type="a" xlink:href="" id="pip" target="_blank">
−
                </div>
+
          <markerlabel labelclass="markerlabel" text="pIP501 Rep" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
−
            </div>
+
            </svgelement>
−
            <div class="write">
+
            </trackmarker>
−
                <a href="javascript:;" class="write-link attach"></a>
+
      <!-- B. Subtilis OriV -->   
−
                <input type="text" />
+
  <trackmarker markerclass="markerhover" start="440" end="540" style="fill:#eca0a7" vadjust="-10" wadjust="20">
−
                <a href="javascript:;" class="write-link smiley"></a>
+
                     <svgelement type="a" xlink:href="" id="boriv" target="_blank">
−
                <a href="javascript:;" class="write-link send"></a>
+
          <markerlabel labelclass="markerlabel" text="B. Subtilis OriV" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
−
            </div>
+
            </svgelement>
−
        </div>
+
            </trackmarker>
−
     </div>
+
 
 +
        <!-- E. Coli OriV -->   
 +
  <trackmarker markerclass="markerhover" start="560" end="660" style="fill:#fbde9e" vadjust="-10" wadjust="20">
 +
                     <svgelement type="a" xlink:href="" id="eoriv" target="_blank">
 +
          <markerlabel labelclass="markerlabel" text="E. Coli OriV" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
 +
            </svgelement>
 +
            </trackmarker>
 +
 +
        <!-- Lac Operator -->   
 +
  <trackmarker markerclass="markerhover" start="680" end="780" style="fill:#cdf8ff" vadjust="-10" wadjust="20">
 +
                     <svgelement type="a" xlink:href="" id="laco" target="_blank">
 +
          <markerlabel labelclass="markerlabel" text="Lac Operator" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
 +
            </svgelement>
 +
            </trackmarker>
 +
 
 +
        <!-- MCS -->   
 +
  <trackmarker markerclass="markerhover" start="800" end="840" style="fill:#d0cece" vadjust="-10" wadjust="20">
 +
                  <svgelement type="a" xlink:href="" id="mcs1" target="_blank">
 +
          <markerlabel labelclass="markerlabel" text="MCS" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
 +
            </svgelement>
 +
            </trackmarker>
 +
      <!-- Sf-AmilCP-6 -->   
 +
  <trackmarker markerclass="markerhover" start="860" end="1000" style="fill:#a395c8" arrowendlength="15" arrowendwidth="10" vadjust="-10" wadjust="20">
 +
                  <svgelement type="a" xlink:href="" id="super" target="_blank">
 +
          <markerlabel labelclass="markerlabel" text="Sf-AmilCP-6" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
 +
            </svgelement>
 +
            </trackmarker>
 +
 +
 
 +
      <!-- MCS -->   
 +
  <trackmarker markerclass="markerhover" start="1020" end="1060" style="fill:#d0cece" vadjust="-10" wadjust="20">
 +
                  <svgelement type="a" xlink:href="" id="mcs2" target="_blank">
 +
          <markerlabel labelclass="markerlabel" text="MCS" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
 +
            </svgelement>
 +
            </trackmarker>
 +
 
 +
      <!-- LacI-->   
 +
  <trackmarker markerclass="markerhover" start="1080" end="1220" style="fill:#afe0b2" arrowendlength="15" arrowendwidth="10" vadjust="-10" wadjust="20">
 +
                    <svgelement type="a" xlink:href="" id="lacr" target="_blank">
 +
          <markerlabel labelclass="markerlabel" text="LacI" style="fill:#3e3f3f;font-weight:700;font-family:'Quicksand';font-size:16px;" ></markerlabel>
 +
            </svgelement>
 +
            </trackmarker>
 +
 +
     </plasmidtrack>
 +
</plasmid>
 
</div>
 
</div>
 +
<div class="pus_270_info element_info_box_container">
 +
<div class="lacr_info">
 +
<h6>Lac Operon Repressor</h6>
 +
 +
<h4>Codes for the production of the repressor protein that binds to the Lac Operator to prevent expression until induction of the media with IPTG. We have designed pUS270 to have the LacI under the pVeg promoter for strong constitutive expression in Bacillus.</h4>
 +
</div>
 +
 +
<div class="pip_info">
 +
<h6>pIP501 Rep</h6>
 +
<h4>This gene codes for the Replicator protein that pairs with the Bacillus OriV and is essential to promote the independent replication of pUS270 in Bacillus. </h4>
 +
</div>
 +
 +
<div class="eoriv_info">
 +
<h6>E. coli OriV</h6>
 +
<h4>Taken from pSB1C3, having this origin of replication will make it easier to construct the plasmid using E. coli as well as improve cloning efficiency downstream. Chosen because of the high copy number of pSB1C3.</h4>
 +
</div>
 +
 +
<div class="mcs_info">
 +
<h6>Multiple Cloning Site</h6>
 +
<h4>The multiple cloning site of pUS258 and other expression plasmids that we considered using either had too few restriction sites or sites that were incompatible for the efficient cloning with the BB Prefix and Suffix. So we have designed two highly diverse MCS’ that have 27 unique sites amongst them on either side of SF AmylCP-6 to promote simple cloning of parts from the Bio Brick Registry.</h4>
 +
</div>
 +
 +
<div class="anti_info">
 +
<h6>Antibiotic Resistance</h6>
 +
 +
<h4>Codes for Neomycin Phosphotransferase II that gives transformants resistance to both Neomycin and Kanamycin. Allows selective screening of transformants</h4>
 +
</div>
 +
 +
<div class="boriv_info">
 +
<h6> Antibiotic Resistance </h6>
 +
<h4>This region allows independent replication of the vector within Bacillus at a high copy number to provide more copies of the recombinant gene to maximise expression.</h4>
 +
</div>
 +
 +
<div class="laco_info">
 +
<h6>Lac Operator </h6>
 +
<h4>Consists of the target sequence for the lac repressor protein to contribute to the IPTG induction system.</h4>
 +
</div>
 +
 +
<div class="super_info">
 +
<h6>SuperFold AmilCP-6</h6>
 +
<h4>SuperFold AmilCP-6 is a variant of amilCP which was used by the 2016 Sydney IGEM team and originally submitted to the registry by Team Uppsala Sweden in 2011. This variant has undergone site directed mutagenesis to increase the folding rate of the chromoprotein and enhance the blue colour. We are taking advantage of this protein to enable blue-white screening without the need for adding X-gal to the plates. Cloning with the two multiple cloning sites that flank SF AmilCP-6 essentially swaps it with the insert to leave the recombinant bacteria white rather than blue. </h4>
 +
</div>
 +
 +
 +
 +
</div>
 +
</div>
 +
 
</body>
 
</body>
 
</html>
 
</html>
−
{{:Team:Sydney_Australia/templates/Footer}}
+
 
 +
 
 +
        <!-- RECTANGLE -->
 +
        <trackmarker markerclass="markerhover" style="fill:rgba(0,0,128,.4)" start="482" end="567" wadjust="8" vadjust="-4" markerclick="markerClick($event, $marker)">
 +
            <markerlabel labelclass="markerlabel" text="LEUII" style="fill:#fff;font-weight:700" ></markerlabel>
 +
        </trackmarker>

Latest revision as of 10:43, 1 November 2017

Lac Operon Repressor

Codes for the production of the repressor protein that binds to the Lac Operator to prevent expression until induction of the media with IPTG. We have designed pUS270 to have the LacI under the pVeg promoter for strong constitutive expression in Bacillus.

pIP501 Rep

This gene codes for the Replicator protein that pairs with the Bacillus OriV and is essential to promote the independent replication of pUS270 in Bacillus.

E. coli OriV

Taken from pSB1C3, having this origin of replication will make it easier to construct the plasmid using E. coli as well as improve cloning efficiency downstream. Chosen because of the high copy number of pSB1C3.

Multiple Cloning Site

The multiple cloning site of pUS258 and other expression plasmids that we considered using either had too few restriction sites or sites that were incompatible for the efficient cloning with the BB Prefix and Suffix. So we have designed two highly diverse MCS’ that have 27 unique sites amongst them on either side of SF AmylCP-6 to promote simple cloning of parts from the Bio Brick Registry.

Antibiotic Resistance

Codes for Neomycin Phosphotransferase II that gives transformants resistance to both Neomycin and Kanamycin. Allows selective screening of transformants

Antibiotic Resistance

This region allows independent replication of the vector within Bacillus at a high copy number to provide more copies of the recombinant gene to maximise expression.

Lac Operator

Consists of the target sequence for the lac repressor protein to contribute to the IPTG induction system.

SuperFold AmilCP-6

SuperFold AmilCP-6 is a variant of amilCP which was used by the 2016 Sydney IGEM team and originally submitted to the registry by Team Uppsala Sweden in 2011. This variant has undergone site directed mutagenesis to increase the folding rate of the chromoprotein and enhance the blue colour. We are taking advantage of this protein to enable blue-white screening without the need for adding X-gal to the plates. Cloning with the two multiple cloning sites that flank SF AmilCP-6 essentially swaps it with the insert to leave the recombinant bacteria white rather than blue. 


        <trackmarker markerclass="markerhover" style="fill:rgba(0,0,128,.4)" start="482" end="567" wadjust="8" vadjust="-4" markerclick="markerClick($event, $marker)">
           <markerlabel labelclass="markerlabel" text="LEUII" style="fill:#fff;font-weight:700" ></markerlabel>
       </trackmarker>