Difference between revisions of "Team:UCL/Software"

Line 2: Line 2:
  
 
<html>
 
<html>
−
  <!--Banner should go here-->
+
<head>
−
 
+
<!--
−
 
+
<script>
−
  <head>
+
                $(document).ready(function(){
−
    <script>
+
  
−
      $(function () {
+
          $('div#members').each(function(){
−
      $('.content').myTooltip({
+
−
        speed: 200,
+
−
        closeOnClick: true
+
−
      });
+
  
−
    });
+
                // get current div
 +
                var $div_parent = $(this);
  
−
+
                // get array of childs in parent div
−
    $.fn.myTooltip = function ( options ) {
+
                var $divsArr = $div_parent.children('div.memberwrapper');
  
 +
                // sort array of childs in parent div (#members) randomly
 +
                $divsArr.sort(function(a,b){
  
−
      var defaults = {
+
                      // Get a random number between 0 and 10
−
        speed: 650,
+
                      var temp = parseInt( Math.random()*10 );
−
        closeOnClick: false,
+
−
        tooltipClass: 'tooltip'
+
−
      };  
+
  
−
      var settings = $.extend( {}, defaults, options );
+
                      // Get 1 or 0, whether temp is odd or even
 +
                      var isOddOrEven = temp%2;
  
−
      var $this = $(this),
+
                      // Get +1 or -1, whether temp greater or smaller than 5
−
          $tooltip = $this.find('.'+settings.tooltipClass);
+
                      var isPosOrNeg = temp>5 ? 1 : -1;
  
 +
                      // Return -1, 0, or +1
 +
                      return( isOddOrEven*isPosOrNeg );
 +
                })
  
−
      setPosition();
+
                // append child items to parent
−
      $(window).resize(function () {
+
                .appendTo($div_parent);           
−
        setPosition();
+
          });
−
      });
+
    });
  
 +
</script>
 +
-->
  
−
      $this.mouseenter(function () {
+
<script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
−
        $('.'+settings.tooltipClass, this).fadeIn(settings.speed);
+
<script>
−
      }).mouseleave(function () {
+
smoothScroll.init({
−
        $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
+
speed: 1000,
−
      });  
+
easing: 'easeInOutCubic',
 +
offset: 0,
 +
updateURL: true,
 +
callbackBefore: function ( toggle, anchor ) {},
 +
callbackAfter: function ( toggle, anchor ) {}
 +
});
 +
</script>
 +
<style>
  
−
       if(settings.closeOnClick) {
+
 
−
        $tooltip.click(function () {
+
       #submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;}
−
          $(this).stop(true, true).fadeOut(settings.speed);
+
−
        });
+
−
      }
+
  
 +
 
 +
 
 +
#header2 {
 +
width: 100%;
 +
background-color: #000;
 +
min-height: 100%;
 +
height: auto;
 +
position: relative;
 +
margin: 0 auto;
 +
padding: 0;
 +
top: 0;
 +
vertical-align: middle;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px;
 +
padding-bottom: 100px;
 +
}
  
−
      function setPosition() {
 
−
        $tooltip.css({top: $this.height(), left: -150});
 
−
      }
 
  
−
    };
 
  
−
    </script>
+
#header2:before
 +
{
 +
content: "";
 +
background-image: url('https://static.igem.org/mediawiki/2015/9/90/UCL_Software.jpg');
 +
background-repeat: no-repeat;
 +
background-position: 0 0 0 0;
 +
  background-attachment: fixed !important;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 2000, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0.4)));
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
margin: 0;
 +
padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
border: none;
 +
}
  
−
    <script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
 
−
        <script>
 
−
            smoothScroll.init({
 
−
                speed: 1000,
 
−
                easing: 'easeInOutCubic',
 
−
                offset: 0,
 
−
                updateURL: true,
 
−
                callbackBefore: function ( toggle, anchor ) {},
 
−
                callbackAfter: function ( toggle, anchor ) {}
 
−
            });
 
−
        </script>
 
−
    <style>
 
  
−
 
+
#mobilebackground {
−
    .mainmenu {background-color: #fff !important;}
+
  background-image: url('https://static.igem.org/mediawiki/2015/9/90/UCL_Software.jpg');
−
    .menu-items a {color: #493C54;}
+
−
    .buttonblack {background-color: #22343C; border-color: #22343C; }
+
−
    a.buttonblack { color: #fff !important; font-size: 12px;}
+
−
    .buttonblack:hover {border-color: #22343C; color: #22343C !important;}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
    #header2 {
+
−
 
+
−
    width: 100%;
+
−
    position: relative;
+
−
    margin: 0;
+
−
    padding: 0;
+
 
     top: 0;
 
     top: 0;
−
     bottom: 0;
+
     right: 0;
−
     margin: 0 auto;
+
     left: 0;
−
     min-height: 100%;
+
     background-position: 0 0 0 0;
−
    height: auto;
+
position: fixed;
−
     vertical-align: middle;
+
     background-repeat: no-repeat;
−
    font-family: Raleway;
+
  -webkit-background-size: cover;
−
    letter-spacing: 1.1px; font-size: 13px;
+
  -moz-background-size: cover;
−
    }
+
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: none;
 +
width: 100%;
 +
height: 100%;
 +
padding: 0;
 +
margin: 0;
  
 +
  }
  
  
−
    #header2:before
+
 
−
    {
+
  .buttonblack {background-color: #892637; border-color: #892637; }
−
    content: "";
+
a.buttonblack { color: #fff !important; font-size: 12px;}
−
        background-image: url('https://static.igem.org/mediawiki/2015/6/6b/UCLSoftware1.png');
+
.buttonblack:hover {border-color: #892637; color: #892637 !important;}
−
      background-repeat: no-repeat;
+
−
      background-attachment: fixed !important;
+
−
      -webkit-background-size: cover;
+
−
      -moz-background-size: cover;
+
−
      -o-background-size: cover;
+
−
      background-size: cover;
+
−
    -webkit-box-sizing: border-box;
+
−
        -moz-box-sizing: border-box;
+
−
        box-sizing: border-box;
+
−
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
+
−
        position: absolute;
+
−
        top: 0px;
+
−
        left: 0px;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
        width: 100%;
+
−
        height: 100%;
+
−
    pointer-events: none;
+
−
    overflow: hidden;
+
−
    display: block;
+
−
    border: none;}
+
  
−
    #mobilebackground {
 
−
      background-image: url('https://static.igem.org/mediawiki/2015/6/6b/UCLSoftware1.png');
 
−
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 
  
−
        top: 0;
 
−
        right: 0;
 
−
        left: 0;
 
−
        background-position: 0 0 0 0;
 
−
    position: fixed;
 
−
        background-repeat: no-repeat;
 
−
      -webkit-background-size: cover;
 
−
      -moz-background-size: cover;
 
−
      -o-background-size: cover;
 
−
      background-size: cover;
 
−
    -webkit-box-sizing: border-box;
 
−
        -moz-box-sizing: border-box;
 
−
        box-sizing: border-box;
 
−
    display: none;
 
−
    width: 100%;
 
−
    height: 100%;
 
  
−
      }
+
#wrapper {width: 80%; height: 100%; background: none; margin: 0 auto; position: relative; padding: 0; padding-top: 80px; margin-bottom: 200px; overflow: auto;}  
  
  
−
    #text h2 {
 
−
    font-size: 30px !important;
 
  
−
     }
+
.bigtitle {width: 42%; top: 35px; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/e/e3/UCL_headercircle3.png'); text-align: center; line-height: 2;
 +
     background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #0a0111;}
  
 +
.bigtitle a {color: #493C54; text-decoration: none;}
  
  
−
    #wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1;}  
+
#members { width: 100%; height: auto; position: relative;}
  
−
    #submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;}
+
.memberwrapper {
 +
margin: 0 auto;
 +
margin-bottom: 50px;
 +
width: 90%;
 +
position: relative;
 +
background: #fff;
 +
border-radius: 8px;
 +
padding: 50px;
 +
height: auto;
 +
overflow: auto;
 +
}
  
−
    #text {margin-top: 50px; z-index: 9999;}
 
−
    #text h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; }
 
  
−
    .blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity;
+
.memberwrapper h2 {font-size: 13px; text-decoration: none; border-bottom: 0px; display: block; background: #000;
−
        transition-duration: 1s;
+
color: #fff; font-weight: bold; padding: 14px; letter-spacing: 4px; text-transform: uppercase; margin: 5px;}
−
        transition-timing-function: ease; }
+
  
−
    #text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block;  padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}
 
  
−
    .citecryan {background: #fff; border-radius: 4px; opacity: 0.8; margin-left: 340px; padding: 10px;}
+
.portraitL {
 +
float: left;
 +
display: inline-block;
 +
width: 30%;
 +
opacity:1;
  
−
    .citecryan:hover {opacity: 1; transition-property: opacity;
+
}
−
        transition-duration: 1s;
+
−
        transition-timing-function: ease;}
+
  
−
    .constructs {border-radius: 4px;  margin: 0 auto; text-align: justify; font-size: 15px; width: 60%; z-index: 3; opacity: 1;  padding: 40px; line-height: 1.4; padding-top: 25px;}
+
.portraitL img{
−
    #text a {color: #33726c; font-weight: bold; text-decoration: none;}
+
padding: 5px;
−
    #text a:hover {color: #33726c; font-weight: bold; text-decoration: none;}
+
float: left;
−
    #text a:visited {color: #33726c; font-weight: bold; text-decoration: none;}
+
width: 100%;
 +
}
  
 +
.bigtitle p {font-size: 15px;
 +
line-height: 1.6; letter-spacing: 1.2px;}
  
 +
.memberwrapper p {
 +
text-align:justify;
 +
padding:  20px 0px !important;
 +
font-size: 15px;
 +
line-height: 1.9;
 +
letter-spacing: 1.2px;
 +
color: #0a0111;
 +
margin: 0 !important;
  
 +
}
 +
 
 +
 
  
−
    .content .tooltip {
+
 
−
      background-color: #fff;
+
 
−
    border: 1px #22343C solid;
+
−
      border-radius: 4px;
+
−
      padding: 3px;
+
−
      position: absolute;
+
−
      width: 300px;
+
−
      z-Index: 99999;
+
−
      display: none;
+
−
    letter-spacing: 1px;
+
−
    line-height: 1;
+
−
    font-size: 11px;
+
−
    }
+
  
−
    .tooltip a {color: #22343C;}
+
.titlecircle {width: 85%; margin: 0 auto; padding-top: 8%;}
−
    .tooltip {color: #22343C;}
+
.title2 {font-family: League Script; font-size: 380%;}
  
−
    .content {
 
−
      position: relative;
 
−
    }
 
  
−
    .content {color: #d67166;}
 
  
−
    .bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/4/43/UCL_headercircle.png'); text-align: center; line-height: 2;
+
.arrow {font-size: 50px;}
−
        background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;}
+
  
−
    .bigtitle a {color: #22343C; text-decoration: none;}
+
@media(max-width:1280px){
 +
.bigtitle {font-size: 15px;}
 +
.bigtitle {width: 50%;}
  
−
    .title2 {font-family: League Script; font-size: 380%;}
+
}
  
−
    .titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}
 
  
−
    .arrow {font-size: 50px;}
+
@media(max-width:1152px){
  
 +
.bigtitle {font-size: 14px;}
 +
.bigtitle {width: 52%;}
 +
.titlecircle {width: 80%;}
 +
.portraitR, .portraitL {width: 43%;}
 +
.memberdescriptionL, .memberdescriptionR {width: 55%;}
 +
.memberdescriptionL p, .memberdescriptionR p {line-height: 1.5;}
  
−
    .buttonblack {
+
}
−
    text-transform: uppercase;
+
−
      font-size: 14px;
+
−
      font-weight: normal;
+
−
      line-height: 1.428571429;
+
−
      text-align: center;
+
−
      white-space: nowrap;
+
−
      vertical-align: middle;
+
−
      border-radius: 4px;
+
−
    transition-property: background-color, color, border-color;
+
−
      transition-duration: 1s;
+
−
      transition-timing-function: ease;
+
−
                color: #FFFFFF;
+
−
        padding: 10px 16px;
+
−
      text-decoration: none;
+
−
    font-family: Raleway;
+
−
    letter-spacing: 2px;
+
−
    font-weight: bold;}
+
  
  
−
    @media(max-width:1280px){
+
@media(max-width:1024px){  
 +
.bigtitle {width: 58%;}
 +
.titlecircle {padding-top: 10%; width: 75%;}
 +
.memberwrapper {padding: 18px;}
 +
#header2:before {background-image: none; }
 +
#header2 {background: none;}
 +
#mobilebackground {display: block;}
  
−
    .bigtitle {font-size: 15px;}
+
}
−
    .bigtitle {width: 50%;}
+
−
    .buttonblack {padding: 5px 11px;}
+
  
−
    }
+
@media(max-width:960px){
 +
.bigtitle {font-size: 13px; width: 65%;}
 +
.arrow {font-size: 40px;}
 +
.memberdescriptionL, .memberdescriptionR  {width: 90%; display: inline; float: none;}
 +
.portraitR {margin-left: 20px; margin-bottom: -6px; width: 42%;}
 +
.portraitL {margin-right: 20px;  margin-bottom: -6px; width: 42%;}
 +
.memberdescriptionL p, .memberdescriptionR p {line-height: 1.6;}
  
 +
}
  
−
    @media(max-width:1152px){
 
  
−
    .bigtitle {font-size: 14px;}
 
−
    .bigtitle {width: 52%;}
 
−
    .titlecircle {width: 80%;}
 
−
    a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 
−
    .buttonblack {padding: 5px 8px;}
 
−
    }
 
  
  
−
    @media(max-width:1024px){  
+
@media(max-width:850px){  
−
    .bigtitle {width: 58%;}
+
−
    .titlecircle {padding-top: 15%; width: 75%;}
+
−
    #wrapper {top: 100px;}
+
−
    a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
+
−
    #header2:before {background-image: none;}
+
−
    #mobilebackground {display: block;}
+
−
    .constructs {font-size: 15px;}
+
  
 +
.bigtitle p {line-height: 1.7 !important; margin-top: -15px !important;}
 +
}
  
−
    }
+
@media(max-width:820px){
 +
.titlecircle {padding-top: 4%;}
 +
}
  
−
    @media(max-width:960px){
 
  
−
    .bigtitle {font-size: 13px; width: 65%;}
+
@media(max-width: 768px){
−
    .arrow {font-size: 40px;}
+
−
    .buttonblack {padding: 5px 5px;}
+
−
    #submenu {width: 110%; margin-left: -5%;}
+
−
    .constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
+
−
    .constructs {text-align: center;}
+
−
    }
+
  
 +
.bigtitle {width: 80%; font-size: 13px; padding: 14%; margin-left: -4%;}
 +
.bigtitle p { font-size: 14px; margin-top: -20px !important;}
 +
.titlecircle {width: 70%; padding-top: 8%;}
 +
.memberwrapper {width: 100%; margin-left: -3%;}
  
−
    @media(max-width:910px){
 
−
    }
 
  
−
    @media(max-width:850px){
+
}
−
    a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
+
−
    .buttonblack {padding: 4px 3px;}
+
−
    #submenu {width: 112%; margin-left: -6%;}
+
−
    .constructs img {min-width: 80% !important;}
+
  
  
  
  
−
    }
+
@media(max-width:670px){
 +
.bigtitle {margin-left: -4%;}
 +
#wrapper {width: 100%;}
  
 +
.memberwrapper {width: 80%; margin: 0 auto; margin-bottom: 30px;}
 +
.memberwrapper p {font-size: 14px;}
 +
.bigtitle p { font-size: 14px; }
 +
.titlecircle {width: 65%;}
  
  
−
    @media(max-width: 768px){
 
−
    .bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;}
 
−
    .bigtitle p { font-size: 13px; margin-top: -20px !important;}
 
−
    .titlecircle {width: 70%; padding-top: 8%;}
 
−
    a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
 
−
    #submenu {width: 80%; margin: 0 auto;}
 
−
    .buttonblack {line-height: 3.8;}
 
−
    a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 
−
    .buttonblack {padding: 5px 8px;}
 
−
    .citecryan {margin-left: 50px;}
 
  
−
    }
+
}
  
 +
@media(max-width:640px){
 +
.arrow {font-size: 30px;}
 +
.titlecircle {width: 65%;}
 +
.portraitR, .portraitL {width: 50%;}
 +
}
  
  
  
−
    @media(max-width:680px){
+
@media(max-width:530px){
−
    #wrapper {width: 100%;}
+
.titlecircle {width: 75%;}
−
    #text {margin: 50px 25px 0 25px;}
+
.bigtitle {padding: 14%;}
−
    #text h4 {font-size: 13px;}
+
.memberdescriptionL p, .memberdescriptionR p {font-size: 13px; line-height: 1.5;}
−
    .constructs {font-size: 13px;}
+
−
    .bigtitle p { font-size: 13px; }
+
−
    .titlecircle {width: 60%;}
+
−
    #submenu {width: 70%; margin: 0 auto;}
+
−
    .buttonblack {line-height: 3.8;}
+
−
    a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
+
−
    .buttonblack {padding: 5px 8px;}
+
  
−
    }
+
}
  
−
    @media(max-width:640px){  
+
@media(max-width: 480px) {  
−
    .arrow {font-size: 30px;}
+
−
    .titlecircle {width: 60%;}
+
−
    #submenu {width: 80%; margin: 0 auto;}
+
  
  
−
    }
 
  
 +
.bigtitle {padding: 13%;}
 +
.bigtitle p { font-size: 13px; text-align: center;}
 +
.titlecircle {width: 70%; padding-top: 0; }
 +
.portraitR, .portraitL {width: 97%; float: none; margin: 0 auto; padding-bottom: 10px; display: block;}
 +
.portraitR img, .portraitL img {float: none; padding: 0;}
 +
.memberdescriptionL, .memberdescriptionR {width: 98%; display: block; margin: 0 auto !important; padding: 0 !important;}
 +
.memberdescriptionL p, .memberdescriptionR p {font-size: 14px; line-height: 1.5;}
  
 +
}
  
−
    @media(max-width:530px){
+
@media(max-width: 460px) {
−
    a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
+
−
    .bigtitle p {}
+
−
    .titlecircle {width: 60%;}
+
−
    .title2 {font-size: 320%;}
+
−
    #text h4 {line-height: 1.7;}
+
−
    .citecryan {margin-left: 10px;}
+
  
 +
.titlecircle {width: 75%;  padding-top: 0; margin-top: -4%;}
 +
.memberdescriptionL p, .memberdescriptionR p {font-size: 13px; line-height: 1.5; letter-spacing: 1;}
 +
}
  
−
    }
+
@media(max-width: 420px) {
  
−
    @media(max-width: 480px) {
+
.titlecircle {width: 80%;  padding-top: 0; margin-top: -6%;}
−
    .bigtitle p { font-size: 13px; text-align: center;}
+
.title2 {font-size: 320%;}
−
    .titlecircle {width: 70%;}
+
.bigtitle p {line-height: 1.5 !important;}
−
    #submenu {width: 90%; margin: 0 auto;}
+
  
 +
}
  
 +
@media(max-width: 380px) {
  
−
    }
+
.titlecircle {width: 80%;}
 +
.bigtitle p {font-size: 12px; }
  
−
    @media(max-width: 410px) {
 
−
    .titlecircle {width: 75%;}
 
−
    .title2 {font-size: 300%;}
 
−
    .bigtitle p {line-height: 1.5 !important;}
 
−
    }
 
  
−
    @media(max-width: 380px) {
+
}
−
    .titlecircle {width: 75%; padding-top: 10%;}
+
−
    .bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;}
+
−
    .title2 {font-size: 260%;}
+
  
−
    }
 
  
 +
@media(max-width: 360px) {
  
−
    @media(max-width: 360px) {
+
.titlecircle {width: 80%;}
−
    .titlecircle {width: 80%;}
+
.bigtitle p {line-height: 1.3 !important;}
−
    .title2 {font-size: 240%;}
+
.title2 {font-size: 280%;}
−
    .buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
+
}
−
    }
+
 
 +
 
  
−
    .idea:before {content: ""; background: url('https://static.igem.org/mediawiki/2015/d/d6/UCL_Screenshot_2015-09-03_at_00.png'); background-position: top right; opacity: 0.2; top: 0px; left: 0px; width: 100%; height: 300px; position: absolute; background-repeat: no-repeat; z-index: 1; pointer-events: none;}
 
  
  
 +
</style>
 +
</head>
  
−
    .idea {line-height: 2; position: relative; z-index: 2; margin-top: 15px; padding-top: 20px;  border-top: 0px dotted #FF9B8E; border-bottom: 0px dotted #FF9B8E; padding-bottom: 20px;}
 
  
 +
<div id="mobilebackground"></div>
  
 +
<div id="header2">
  
 +
<div id="wrapper">
  
−
    .constructsdiv {position: relative; z-index: 1; width: 140%; height: 100%; background-color: #fff; opacity: 1;    margin-left: -20%;
+
<div class="bigtitle">
−
    border-radius: 15px;  box-shadow: 0px 0px 20px #eaeaea;}
+
<div class="titlecircle">
  
  
−
 
+
<br><br>
−
 
+
<span class="title2">Software</span>  
−
 
+
             <p style="margin-top: -30px; line-height: 1.9;margin-left: 20px;margin-right: 10px;">
−
 
+
              We have developed <b>two incredible tools</b> to help not only our project but all of iGEM! <br>
−
    .constructsdiv:before {content: ""; background-image: url('https://static.igem.org/mediawiki/2015/4/40/UCLScreenshot_2015-09-03_at_13.png'); background-repeat: no-repeat; background-position: top 0% left 9%; opacity: 0.3;  top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; z-index: 2; pointer-events: none;    transition-duration: 1s; transition-property: opacity;
+
−
        transition-timing-function: ease; }
+
−
 
+
−
 
+
−
    .constructsdiv:hover:before {opacity: 1; transition-duration: 1s; transition-property: opacity;
+
−
        transition-timing-function: ease;}
+
−
 
+
−
 
+
−
    </style>
+
−
  </head>
+
−
 
+
−
  <div id="mobilebackground"></div>
+
−
  <div id="header2">
+
−
  <div id="wrapper">
+
−
 
+
−
  <div class="bigtitle">
+
−
        <div class="titlecircle">
+
−
            <span class="title2">Software</span>  
+
−
             <p style="margin-top: -30px; line-height: 1.7;margin-left: 20px;margin-right: 10px;">
+
−
            We have developed two incredible tools to help not only our project but all of iGEM! <br>
+
 
                 <span class="arrow">  
 
                 <span class="arrow">  
 
                     <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a>
 
                     <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a>
 
                 </span>
 
                 </span>
−
             </p>
+
             </p></div> </div>  
−
        </div>  
+
−
    </div>
+
−
 
+
−
 
+
 
     <div id="submenu" style="padding-top: 150px;">
 
     <div id="submenu" style="padding-top: 150px;">
−
         <a data-scroll data-options='{ "easing": "linear" }' href="#background" class="buttonblack">Mind-the-Mark</a>         
+
         <a data-scroll data-options='{ "easing": "linear" }' href="#mark" class="buttonblack">Mind-the-Mark</a>         
−
         <a data-scroll data-options='{ "easing": "linear" }' href="#constructs" class="buttonblack">Mind-the-Model</a>
+
         <a data-scroll data-options='{ "easing": "linear" }' href="#model" class="buttonblack">Mind-the-Model</a>
−
         <a data-scroll data-options='{ "easing": "linear" }' href="#modelling" class="buttonblack">Users</a>
+
         <a data-scroll data-options='{ "easing": "linear" }' href="#users" class="buttonblack">Users</a>
−
         <a data-scroll data-options='{ "easing": "linear" }' href="#characterization" class="buttonblack">Developers</a>
+
         <a data-scroll data-options='{ "easing": "linear" }' href="#developers" class="buttonblack">Developers</a>
 
     </div>
 
     </div>
  
 
    
 
    
 
    
 
    
−
 
+
<div id="members">
−
    <div id="text">
+
 
 +
<div style="height: 100px"></div>
 +
 
  
−
      <h2>Mind-the-Mark</h2>
+
<div class="memberwrapper" id="mark">
−
      <h3>Summary</h3>
+
<h2>Mind-the-Mark</h2>
 +
<br><br><span style="text-align: center; margin: 0 auto; display: block;"><img src="https://static.igem.org/mediawiki/2015/d/d6/UCL_Mind_the_Mark_icon_small.png"/></span><br>
 +
    <h3>Summary</h3>
 
       <p>
 
       <p>
 
             The Mind-the-Mark tool takes the bland and boring wiki input box and transforms it into a proper code editor with several
 
             The Mind-the-Mark tool takes the bland and boring wiki input box and transforms it into a proper code editor with several
Line 446: Line 388:
 
         externally and then transfered it in, costing them time and effort. We have changed that.
 
         externally and then transfered it in, costing them time and effort. We have changed that.
 
       </p>
 
       </p>
−
       <table style="width:100%;margin:0 auto;border:1px solid grey;">
+
       <table style="width:100%; margin:0 auto; border:1px solid grey; z-index:999;">
 
       <tr>
 
       <tr>
 
         <td><div class="bigCenterText">Before</div></td>
 
         <td><div class="bigCenterText">Before</div></td>
Line 521: Line 463:
 
       <p>This tool will and can make a massive difference to teams current and futrue by making the process of creating  
 
       <p>This tool will and can make a massive difference to teams current and futrue by making the process of creating  
 
       a wiki infinitely more easy and enjoyable to do!</p>
 
       a wiki infinitely more easy and enjoyable to do!</p>
−
      <!--<img src="https://static.igem.org/mediawiki/2015/e/eb/UCLSoft1.png" width="50%"/>
+
  </div>
−
      <img src="https://static.igem.org/mediawiki/2015/9/9e/UCLSoft4.png" width="50%"/>-->
+
 
  
−
      <h2>Mind-the-Model</h2>
 
−
      <h2>Mind-the-Maybe</h2>
 
  
−
      <style>
+
</div>
−
        .bodyx {
+
</div>
−
          width:75%;
+
 
−
          margin:0 auto;
+
</div>
−
          background-color:51E8C5;
+
 
−
          padding-top:100px;
+
<div style="clear:both;"></div>
−
        }
+
 
−
        .centerRize {
+
</div>  
−
            width: 80%;
+
 
−
            margin:0 auto;
+
</body>
−
            padding-bottom:20px;
+
 
−
        }
+
−
        .bigCenterText {
+
−
            width:100%;
+
−
            text-align:center;
+
−
            font-size:20px;
+
−
            padding: 20px 0px;
+
−
        }
+
−
      </style>
+
−
    </div>
+
−
  </div>
+
 
</html>
 
</html>

Revision as of 21:01, 9 September 2015

'



Software

We have developed two incredible tools to help not only our project but all of iGEM!
▼

Mind-the-Mark




Summary

The Mind-the-Mark tool takes the bland and boring wiki input box and transforms it into a proper code editor with several interactive and assistive features. Having talked to several iGEM teams this year, and years past, one of the issues they lamented over was the issue of entering code into the wiki. The bland and simple text input on each page made developing interactive and pretty wikis a real hassle. Due to this many teams developed their code externally and then transfered it in, costing them time and effort. We have changed that.

Before
After

By taking advantage of Google's easy to use extension system for the Chrome Browser, we devised a powerful and lightweight extension that transforms the wiki editor on whatever page you choose to edit; be it in the future in 2020 or now in 2015. The extension is easily downloaded and then drag-and-dropped into the Chrome browser, to install. Then its working!

For more information, the source code, and the extension go to Our Github Page.

Construction

The spirit of the tool is to make editing and working on the iGEM wiki easier and more interactive for all. It was with this spirit that we built the tool. Although the code is part of chrome extension, it is really a lightweight javascript tool.

What is a Chrome Extension?

A chrome extension at its base is a .json file called the "Manifest" file that contains the file reference's and basic information about the tool. When used this tells the browser to load a piece of javascript or other files on to specified pages. These then interact with the DOM (Document Object Model) of the page.

Why use a Chrome Extension?

Chrome is one of the most modern and widely used browser on the internet and has an easy to use and develop extension system, on top of a very rich API. When loading files that interact with the DOM chrome extensions also make sure that there is no interaction with any of the loaded scripts of libraries from the page, protecting the user. To top it all off, the chrome extensions are very easy to install and distribute.

How did we Implement it?

Our tool uses the commonly implemented "Content_Scripts" method for loading our extension. This allows chrome to load specific js and css files whenever a URL, defined by a certain patern, is loaded. In our case we load both js and css whenever an iGEM edit page is loaded. The javascipt that is loaded is the background.js file which adds a script refecence to the page, loads the script, and then deletes it. In this instance the script in question is the script.js file. The extension also has the ability to access other js and css file which are referenced in the Manifest file. The reason the background.js file is used to then load the script file is that it allows for a cleaner separation of files as well as a faster loading solution when the scipt is large.

The script.js file contains the source code and several add-on pieces of code from a js library called CodeMirror. This provides the majority of functions that alter the page. It also contains the final function that runs when the Document OnLoad call is made. This final function finds the textarea tag by its ID and makes the call to CodeMirror to change the textarea into the new snazzy code editor. CodeMirror then alters the shape of the divs in the tag and applies the css. As well as defining and instigating a few other features, this performs the majority of the work

By packing the majority of the js into one file it reduces the overall space required and time neaded to load. That being said it is well commented and laid out so that it is easily editable in the future. The same runs true for the css.

Future Work

There are several features we would like to implement in the future to make this the best tool, and the only as far as we know, for editing the iGEM wiki. Javascipt, CSS, and HTML are all currently supported but providing syntax for SCSS and other CSS variants, as well as PHP would complete the language mark up types. Providing code suggestion as well as auto complete would make this a tool to rival the best code editors out there.

Another project we have begun work on is developing a larger tool coaltes our tool with other team's to create a complete IDE for developing iGEM wikis.

This tool will and can make a massive difference to teams current and futrue by making the process of creating a wiki infinitely more easy and enjoyable to do!