Difference between revisions of "Team:Pasteur Paris/TrainingThomas2"

(Undo revision 119541 by ThomasStarck (talk))
Line 1: Line 1:
−
{{Pasteur_Paris/Fonts}}
+
{{Pasteur_Paris/MenuBlock}}
 
<html>
 
<html>
−
    <head>
 
−
        <title>""</title>
 
−
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 
−
    </head>
 
−
    <style>
 
−
        /* BEGIN : Default Wiki Settings */
 
−
            #home_logo, #sideMenu { display:none; }
 
−
            #sideMenu, #top_title, .patrollink  {display:none;}
 
−
            #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
 
−
            body {background-color:white; }
 
−
            #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
−
            .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;};
 
−
        /* END : Default Wiki Settings */
 
−
        *{
 
−
            margin: 0;
 
−
            padding: 0;
 
−
        }
 
−
        body {
 
−
            padding-top: 80px;
 
−
            font-family: 'Raleway', Arial Black, sans-serif;
 
−
        }
 
−
        #upArrow{
 
−
            position: fixed;
 
−
            bottom: 3%;
 
−
            right: 3%;
 
−
            height: 40px;
 
−
            width: 60px;
 
−
            background-image: url("https://static.igem.org/mediawiki/2018/0/05/T--Pasteur_Paris--UpArrow.svg");
 
−
            opacity: .3;
 
−
            border-radius: 5px;
 
−
            z-index: 300;
 
−
            background-repeat: no-repeat;
 
−
            transition:
 
−
        }
 
−
        #upArrow:hover{
 
−
            opacity: .8;
 
−
        }
 
  
−
        #upArrow a {
+
<style type="text/css">
−
            padding-top: 1px;
+
#runningchip {
−
            padding-bottom: 20px;
+
left: 485px;
−
            padding-left: 60px;
+
}
−
        }
+
#modeling_small {
−
        /* BEGIN : Menu Bar Settings */
+
background-color: #292929;
−
            /* BEGIN : General Settings of Menu Bar */
+
}
−
                /* BEGIN: Settings Menu Containers and List */
+
#banner {
−
                    #Menu {
+
background-image: ;
−
                        opacity: .95;
+
}
−
                        height: 80px;
+
@media screen and (max-width: 760px) {
−
                        position: fixed;
+
#banner {
−
                        top: 18px;
+
background-image: ;
−
                        left: 0%;
+
}
−
                        width: 100%;
+
</style>
−
                        z-index: 2;
+
−
                        border-bottom-left-radius: 15px;
+
−
                        border-bottom-right-radius: 15px;
+
−
                        z-index: 3000;
+
−
                        box-shadow: 0px 0px 5px black;
+
  
−
                    }
+
 
−
                    #Menu img {
+
<style type="text/css">
−
                        float: left;
+
.tableData{
−
                        height: 100%;
+
background-color: transparent;
−
                        width: auto;
+
width: 90%;
−
                    }
+
}
−
                    #naviconwrapper {
+
.dropDown{
−
                        height: 100%;
+
background-color: rgb(15, 12, 132);
−
                        margin: 0px ;    /*auto centers wrapper*/
+
height: 70px;
−
                        min-width: 900px;
+
margin: 5px;
−
                        z-index: -100;
+
border-radius: 10px;
−
                    }
+
position: relative;
−
                    #naviconbar {
+
opacity: .9;
−
                        height: 100%;
+
box-shadow: 0px 1px 3px black;
−
                        min-width: 900px;
+
}
−
                        background-image:  linear-gradient(to right, rgb(0, 0, 127), rgb(227, 0, 56));
+
.dropDown:hover {
−
                        z-index: -60;
+
opacity: .7;
−
                        text-align: center;
+
}
−
                    }
+
.dropDown h4 {
−
                    #navicons {
+
position: absolute;
−
                        width: 960px;
+
left: 50%;
−
                        z-index: -20;    /*defines color behind icons */
+
top: 50%;
−
                        display: inline-block;
+
transform: translate(-50%, -50%);
−
                        vertical-align: middle;
+
color: white;
−
                        height: 100%;
+
}
−
                    }
+
.dropDown a {
−
                    #navicons ul {
+
color: white;
−
                        padding: 0px;
+
text-decoration: none;
−
                        margin: 0px;
+
}
−
                        height: 100%;
+
.hiddenContent{
−
                        width: 100%;
+
display: none;
−
                        position: relative;  /*makes chip go directly behind home from left corner*/
+
background-color: #fffafc;
−
                    }
+
width: 100%;
−
                    #navicons ul li {
+
transition-duration: : opacity 1s;
−
                        list-style: none;
+
}
−
                        /*display: block;*/
+
.hiddenContent:target{
−
                        float: left;
+
display: block;
−
                        position: relative;
+
}
−
                        font-family: 'Raleway', sans-serif;
+
</style>
−
                        font-size: 12px;
+
 
−
                        background-color: rgba(161, 47, 92, 0.0);
+
<style type="text/css">
−
                        /*border: 1px solid #5781BD;*/
+
.frac {
−
                        z-index: 100;
+
    display: inline-block;
−
                        height: 90%;
+
    position: relative;
−
                    }
+
    vertical-align: middle;
−
                    #navicons ul li a {
+
    letter-spacing: 0.001em;
−
                        width: 120px;
+
    text-align: center;
−
                        display: block;
+
    text-indent: 0px;
−
                        text-decoration: none;
+
}
−
                        /*color: #FFF;*/
+
.frac > span {
−
                        text-align: center;
+
    display: block;
−
                        text-transform: uppercase;
+
    padding: 0.1em;
−
                        z-index: 50;
+
}
−
                        padding-top: 50%;
+
.frac span.bottom {
−
                    }
+
    border-top: thin solid black;
−
                    #navicons ul a:hover {
+
}
−
                    }   
+
.frac span.symbol {
−
                /* END: Settings Menu Containers and List */
+
    display: none;
−
                /* BEGIN : Classes for Main Menu Icons */
+
}  
−
                    #home {
+
</style>
−
                        background: url(https://static.igem.org/mediawiki/2018/3/39/T--Pasteur_Paris--teamlogoigemwhite_99x60.png) no-repeat;  
+
 
−
                        height: 60px;
+
<script>
−
                        background-position: center;
+
dropDown.onclick() = $(#dropDown +).css({
−
                    }
+
display: "block"
−
                    #home a {
+
})
−
                        color: #ffffff;
+
</script>
−
                    }
+
 
−
                    #project {
+
<script>
−
                        background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
$(document).ready(function() {
−
                        height: 60px;
+
$('.dropDown').on('click', function() { // Au clic sur un élément
−
                        background-position: center;
+
var page = $(this).attr('href'); // Page cible
−
                    }
+
var speed = 750; // Durée de l'animation (en ms)
−
                    #project a {
+
$('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
−
                        color: #ffffff;
+
return false;
−
                    }
+
});
−
                    #labwork {
+
});
−
                        background: url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
+
</script>
−
                        height: 60px;
+
<script>
−
                        background-position: center;
+
         $("#upArrow").hide();
−
                    }
+
−
                    #labwork a {
+
−
                        color: #ffffff;
+
−
                    }
+
−
                    #design {
+
−
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
−
                        height: 60px;
+
−
                        background-position: center;
+
−
                    }
+
−
                    #design a {
+
−
                        color: #ffffff;
+
−
                    }
+
−
                    #modeling {
+
−
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
−
                        height: 60px;
+
−
                        background-position: center;
+
−
                    }
+
−
                    #modeling a {
+
−
                        color: #ffffff;
+
−
                    }
+
−
                    #achievements {
+
−
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png)no-repeat;  
+
−
                        height: 60px;
+
−
                        background-position: center;
+
−
                    }
+
−
                    #achievements a {
+
−
                        color: #ffffff;
+
−
                    }
+
−
                    #hp {
+
−
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;  
+
−
                        height: 60px;
+
−
                        background-position: center;
+
−
                    }
+
−
                    #hp a {
+
−
                        color: #ffffff;
+
−
                    }
+
−
                    #aboutus {
+
−
                        background:url(https://static.igem.org/mediawiki/2018/2/26/T--Pasteur_Paris--icon-neuroneblanc.png) no-repeat;
+
−
                        height: 60px;
+
−
                        background-position: center;
+
−
                    }
+
−
                    #aboutus a {
+
−
                        color: #ffffff;
+
−
                    }
+
−
                /* END : Classes for Main Menu Icons */
+
−
                /* BEGIN : Running Chip Settings */
+
−
                    /* Begin Chip Design */
+
−
                        #runningchip {
+
−
                            position: absolute;
+
−
                            width: 110px;
+
−
                            height: 120%;
+
−
                            left: 5px;
+
−
                            -webkit-transition: all 300ms ease-out;
+
−
                            -moz-transition: all 300ms ease-out;
+
−
                            transition: all 300ms ease-out;
+
−
                            z-index: 0;
+
−
                            border-bottom-left-radius: 5px;
+
−
                            border-bottom-right-radius: 5px;
+
−
                            background: #000000;
+
−
                        }
+
−
                    /* End Chip Design */
+
−
                    /* Begin Chip Movement */
+
−
                        #home:hover ~ #runningchip {
+
−
                            left: 5px;
+
−
                        }
+
−
                        #project:hover ~ #runningchip {
+
−
                            left: 125px;
+
−
                        }
+
−
                        #labwork:hover ~ #runningchip {
+
−
                            left: 245px;
+
−
                        }
+
−
                        #design:hover ~ #runningchip {
+
−
                            left: 365px;
+
−
                        }
+
−
                        #modeling:hover ~ #runningchip {
+
−
                            left: 485px;
+
−
                        }
+
−
                        #achievements:hover ~ #runningchip {
+
−
                            left: 605px;
+
−
                        }
+
−
                        #hp:hover ~ #runningchip {
+
−
                            left: 725px;
+
−
                        }
+
−
                        #aboutus:hover ~ #runningchip {
+
−
                            left: 845px;
+
−
                        }
+
−
                    /* End Chip Movment */
+
−
                /* END : Running Chip Settings */
+
−
                /* BEGIN : Settings Submenu Level 1 */
+
−
                    #navtextwrapper {                /*define background box*/
+
−
                        margin: 0 auto;
+
−
                        padding: 0px;
+
−
                        top: -2px;
+
−
                        height: 24px;
+
−
                        width: 960px;
+
−
                        position: relative;
+
−
                        /*border: 2px solid #000;*/
+
−
                    }
+
−
                    #navtext {
+
−
                        text-align: center;
+
−
                        font-family: 'Raleway',sans-serif;
+
−
                        font-size: 16px;
+
−
                        z-index: 600;
+
−
                    }
+
−
                    #navtext ul {
+
−
                        margin: 0px auto;
+
−
                        top: -8px;
+
−
                        padding: 0px;
+
−
                        position: absolute;
+
−
                        z-index: 600;
+
−
                    }
+
−
                    #navtext li {
+
−
                        margin: 0px auto;        /*centers text*/
+
−
                        list-style: none;
+
−
                        display: block;        /*makes items go horizontal and centers them*/
+
−
                        /*float: left;*/                /*makes items go horizontal*/
+
−
                        position: relative;
+
−
                        z-index: 600;
+
−
                    }   
+
−
                    #navtext ul li a {
+
−
                        margin-top: 2px;
+
−
                        height: 24px;
+
−
                        padding-left: 10px;
+
−
                        padding-right: 10px;
+
−
                        text-decoration: none;
+
−
                        color: #FFF;
+
−
                        display: block;
+
−
                        text-align: center;
+
−
                        border-radius: 8px;
+
−
                        z-index: 600;
+
−
                    }
+
−
                    #navtext ul li:hover > a {
+
−
                      /* background-color: #6696c7;  /*makes a link stay in a certain color when hovering over it and then looking throught its subitems */
+
−
                        color: #345292; /* couleur du sous titre quand tu passes dessus*/
+
−
                    }
+
−
                    #project-sub {
+
−
                        display: none;
+
−
                        left: 125px;
+
−
                    }
+
−
                    #labwork-sub {
+
−
                        display: none;
+
−
                        left: 243px;
+
−
                    }
+
−
                    #design-sub {
+
−
                        /*background-color: #ac34fe;*/
+
−
                        display: none;
+
−
                        left: 355px;
+
−
                    }
+
−
                    #modeling-sub{
+
−
                        display: none;
+
−
                        left: 505px;
+
−
                    }
+
−
                    #achievements-sub{
+
−
                        display: none;
+
−
                        left: 593px;
+
−
                    }
+
−
                    #hp-sub{
+
−
                        display: none;
+
−
                        left: 680px;
+
−
                    }
+
−
                    #aboutus-sub{
+
−
                        display: none;
+
−
                        left: 835px;
+
−
                    }
+
−
                    .chip_gap {
+
−
                        content: none;
+
−
                    }
+
−
                    .navsub1 {
+
−
                        background-color: #000000;
+
−
                        opacity: 1;
+
−
                    } 
+
−
                /* END : Settings Submenu Level 1 */
+
−
            /* END : General Settings of Menu Bar */
+
−
            /* BEGIN Styles for Smallnav Intermediate Screens */
+
−
                /* Clearfix */
+
−
                .clearfix:before,
+
−
                .clearfix:after {
+
−
                    content: " ";
+
−
                    display: table;
+
−
                }
+
−
                .clearfix:after {
+
−
                    clear: both;
+
−
                }
+
−
                .clearfix {
+
−
                    *zoom: 1;
+
−
                }
+
−
                /* Basic Styles */
+
−
                #smallnav {
+
−
                    height: 40px;
+
−
                    width: 100%;
+
−
                    background-image: linear-gradient(to right, rgba(0, 0, 127, .9), rgba(227, 0, 56, .9));
+
−
                    font-size: 11pt;
+
−
                    font-family: 'Raleway', Arial, sans-serif;
+
−
                    position: fixed;
+
−
                    top: 18px;
+
−
                    left: 0%;
+
−
                    z-index: 3000;
+
−
                    box-shadow: 0px 0px 5px black;
+
−
                }
+
−
                #smallnav ul {
+
−
                    padding: 0;
+
−
                    margin: 0 auto;
+
−
                    width: 770px;
+
−
                    height: 40px;
+
−
                    background: #345292;
+
−
                }
+
−
                #smallnav li {
+
−
                    display: inline;
+
−
                    float: left;
+
−
                }
+
−
                #smallnav a {
+
−
                    color: #ffffff;
+
−
                    display: inline-block;
+
−
                    width: 110px;
+
−
                    text-align: center;
+
−
                    text-decoration: none;
+
−
                    line-height: 40px;
+
−
                }
+
−
                #smallnav li a {
+
−
                    box-sizing:border-box;
+
−
                    -moz-box-sizing:border-box;
+
−
                    -webkit-box-sizing:border-box;
+
−
                }
+
−
                #smallnav li:last-child a {
+
−
                    border-right: 0;
+
−
                }
+
−
                #smallnav a:hover, #smallnav a:active {
+
−
                    background-color: #000000;
+
−
                }
+
−
                #smallnav a#pull {
+
−
                    display: none;
+
−
                }
+
−
            /* END Styles for Smallnav Intermediate Screens*/
+
−
        /* END : Menu Bar Settings */
+
−
        /* BEGIN : Content blocks settings */
+
−
            #banner {
+
−
                width: 100%;
+
−
                height: 70vh;
+
−
                background-image: url("https://static.igem.org/mediawiki/2018/5/53/T--Pasteur_Paris--BannerHome1.png");
+
−
                background-repeat: no-repeat;
+
−
                background-attachment: fixed;
+
−
                background-size: cover;
+
−
                background-position: 50% 50%;
+
−
            }
+
−
            #banner h1 {
+
−
                text-align: center;
+
−
                color: white;
+
−
                font-size: 10vh;
+
−
                line-height: 10vh;
+
−
                font-family: 'Raleway', Arial Black, sans-serif;
+
−
            }
+
−
            #GeneralContent {
+
−
                position:relative;
+
−
                width: 100%;
+
−
                background-color: #fffafc;
+
−
            }
+
−
            #GeneralContent p, #GeneralContent h1, #GeneralContent h2, #GeneralContent h3, #GeneralContent h4, #GeneralContent h5, #GeneralContent h6, #GeneralContent ol, #GeneralContent li {
+
−
                font-family: 'Raleway', Arial Black, sans-serif;
+
−
                font-size: 16px;
+
−
            }
+
−
            #MainContent {
+
−
                max-width: 1100px;
+
−
                margin: auto;
+
−
                padding-top: 10%;
+
−
                padding-bottom: 10%;
+
−
                text-align: center;
+
−
            }
+
−
            footer {
+
−
                position: absolute;
+
−
                background-color: #000000;
+
−
                height: 70px;
+
−
                width: 100%;
+
−
                bottom: 0%;
+
−
                left: 0%;
+
−
            }
+
−
            .block {
+
−
                display: inline-block;
+
−
                vertical-align: middle;
+
−
                margin: auto;
+
−
                margin-top: 2%;
+
−
                margin-bottom: 2%;
+
−
                margin-left: 1%;
+
−
                margin-right: 1%;
+
−
            }
+
−
            .block.title {
+
−
                width: 94%;
+
−
                margin-bottom: 10%;
+
−
            }
+
−
            .block.two-third {
+
−
                width: 60%;
+
−
            }
+
−
            .block.two-third.center {
+
−
                width: 60%;
+
−
            }
+
−
            .block.one-third {
+
−
                width: 30%;
+
−
            }
+
−
            .block.full {
+
−
                width: 90%;
+
−
            }
+
−
            .block.half {
+
−
                width: 45%;
+
−
            }
+
−
            .block.separator {
+
−
                height: 1px;
+
−
                width: 90%;
+
−
                margin-top: 3%;
+
−
                margin-bottom: 3%;
+
−
            }
+
−
            .block.separator-invisible {
+
−
                height: 1px;
+
−
                width: 90%;
+
−
            }
+
−
            .block.separator-mark {
+
−
                height: 2px;
+
−
                width: 70%;
+
−
                margin-top: 15%;
+
−
                margin-bottom: 20%;
+
−
                background-color: black;
+
−
                opacity: 0.3;
+
−
            }
+
−
            .onglet{
+
−
                position: relative;
+
−
                border-radius: 20px;
+
−
                background-color: red;
+
−
                width: 43%;
+
−
                box-shadow: 5px 5px 30px grey;
+
−
                background-color: #fffafc;
+
−
            }
+
−
            .onglet:hover{
+
−
                opacity: .8;
+
−
                transform: scale(1.05,1.05);
+
−
            }
+
−
            .ongletImg {
+
−
                width: 100%;
+
−
                padding-top: 60%;
+
−
                background-repeat: no-repeat;
+
−
                background-size: cover;
+
−
                background-position: center;
+
−
                border-top-left-radius: 20px;
+
−
                border-top-right-radius: 20px;
+
−
            }
+
−
            .textOnglet{
+
−
                height: 50px;
+
−
            }
+
−
            .legend p {
+
−
                text-indent: 0px;
+
−
                font-size: 0.8em;
+
−
            }
+
−
            p {
+
−
                text-align: justify;
+
−
                text-indent: 30px;
+
−
            }
+
−
            img {
+
−
                width: 100%;
+
−
            }
+
−
            a img:hover {
+
−
                opacity: 0.4;
+
−
            }
+
−
        /* END : Content block settings */
+
−
        /* BEGIN : Media Query Responsive Design */
+
−
            /* BEGIN : Menu Style for Large screens above 960 */
+
−
            @media screen and (min-width: 961px){
+
−
                #smallnav{
+
−
                    display: none;
+
−
                }
+
−
            }/* END : Menu Style for Large screens above 960 */
+
−
            /* BEGIN : Menu Style for Small screens 960 and lower*/
+
−
            @media screen and (max-width: 960px){
+
−
                body {
+
−
                    padding-top: 40px;
+
−
                }
+
−
                #Menu{
+
−
                    display: none;
+
−
                }
+
−
                .block.two-third, .block.one-third, .block.half {width: 44%;}
+
−
                .block.two-third.center, .block.full, .block.separator, .block.title {width: 90%;}
+
−
                /* BEGIN : smallnav settings for mobile */
+
−
                    #smallnav {
+
−
                        height: auto;
+
−
                    }
+
−
                    #smallnav ul {
+
−
                        width: 100%;
+
−
                        display: block;
+
−
                        height: auto;
+
−
                    }
+
−
                    #smallnav li {
+
−
                        width: 50%;
+
−
                        float: left;
+
−
                        position: relative;
+
−
                        margin-bottom: 0;
+
−
                    }
+
−
                    #smallnav a {
+
−
                        text-align: left;
+
−
                        width: 100%;
+
−
                        text-indent: 25px;
+
−
                    }
+
−
                    #smallnav {
+
−
                        border-bottom: 0;
+
−
                    }
+
−
                    #smallnav ul {
+
−
                        display: none;
+
−
                        height: auto;
+
−
                    }
+
−
                    #smallnav a#pull {
+
−
                        display: block;
+
−
                        width: 100%;
+
−
                        position: relative;
+
−
                    }
+
−
                    #smallnav a#pull:after {
+
−
                        content:"";
+
−
                        background: url('https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png') no-repeat;
+
−
                        background-size: auto 90%;
+
−
                        width: 30px;
+
−
                        height: 30px;
+
−
                        display: inline-block;
+
−
                        position: absolute;
+
−
                        right: 15px;
+
−
                        top: 5px;
+
−
                    }
+
−
                /* END : smallnav settings for mobile */
+
−
                /* BEGIN : classes for Small Mobile Icons */
+
−
                    #home_small {
+
−
                        background-color: #345292;
+
−
                    }
+
−
                    #home_small a {
+
−
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
−
                        background-position: left;
+
−
                        background-size: auto 100%;
+
−
                        background-repeat: no-repeat;
+
−
                        padding-left: 40px;
+
−
                        color: #FFF;
+
−
                    }
+
−
                    #project_small {
+
−
                        background-color: #345292;
+
−
                    }
+
−
                    #project_small a {
+
−
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
−
                        background-position: left;
+
−
                        background-size: auto 90%;
+
−
                        background-repeat: no-repeat;
+
−
                        padding-left: 40px;
+
−
                        color: #FFF;
+
−
                    }
+
−
                    #labwork_small {
+
−
                        background-color:#345292;
+
−
                    }
+
−
                    #labwork_small a {
+
−
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
−
                        background-position: left;
+
−
                        background-size: auto 90%;
+
−
                        background-repeat: no-repeat;
+
−
                        padding-left: 40px;
+
−
                        color: #FFF;
+
−
                    }
+
−
                    #design_small {
+
−
                        background-color: #345292;
+
−
                    }
+
−
                    #design_small a {
+
−
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
−
                        background-position: left;
+
−
                        background-size: auto 90%;
+
−
                        background-repeat: no-repeat;
+
−
                        padding-left: 40px;
+
−
                        color: #FFF;
+
−
                    }
+
−
                    #modeling_small {
+
−
                        background-color: #345292;
+
−
                    }
+
−
                    #modeling_small a {
+
−
                        color: #FFF;
+
−
                        padding-left: 40px;
+
−
                        background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
+
−
                        background-position: left;
+
−
                        background-size: auto 90%;
+
−
                        background-repeat: no-repeat;
+
−
                    }
+
−
                    #achievements_small {
+
−
                        background-color: #345292;
+
−
                    }
+
−
                    #achievements_small a {
+
−
                        color: #FFF;
+
−
                        padding-left: 40px;
+
−
                        background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
+
−
                        background-position: left;
+
−
                        background-size: auto 90%;
+
−
                        background-repeat: no-repeat;
+
−
                    }
+
−
                    #hp_small {
+
−
                        background-color: #345292;
+
−
                    }
+
−
                    #hp_small a {
+
−
                        color: #FFF;
+
−
                        padding-left: 40px;
+
−
                        background-image: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png);
+
−
                        background-position: left;
+
−
                        background-size: auto 90%;
+
−
                        background-repeat: no-repeat;
+
−
                    }
+
−
                    #aboutus_small {
+
−
                        background-color: #345292;
+
−
                    }
+
−
                    #aboutus_small a {
+
−
                        background: url(https://static.igem.org/mediawiki/2018/7/7b/T--Pasteur_Paris--icon-neuroneblanc_43x44.png) no-repeat;
+
−
                        background-position: left;
+
−
                        background-size: auto 90%;
+
−
                        background-repeat: no-repeat;
+
−
                        padding-left: 40px;
+
−
                        color: #FFF;
+
−
                    }
+
−
                /* END : classes for Small Mobile Icons */
+
−
            }/* END : Menu Style for Small screens 960 and lower */
+
−
            /* BEGIN : Style for Small Mobile screen 760 and lower */
+
−
            @media screen and (max-width: 760px) {
+
−
                /* BEGIN : Content Settings */
+
−
                    .block.two-third, .block.one-third, .block.two-third.center, .block.full, .block.separator, .block.title, .block.half {
+
−
                        width: 90%;
+
−
                    }
+
−
                    #banner {
+
−
                        background-image: none;
+
−
                        background-color: black;
+
−
                        height: 100vh;
+
−
                    }
+
−
                    #banner h1 {
+
−
                    }
+
−
                /* END : Content Settings */
+
−
            }/* END : Style for Small Mobile screen 760 and lower */
+
−
            /* BEGIN : Style for Smartphones 320 and lower*/
+
−
            @media only screen and (max-width : 370px) {
+
−
                #smallnav li {
+
−
                    display: block;
+
−
                    float: none;
+
−
                    width: 100%;
+
−
                }
+
−
            }/* END : Style for Smartphones 320 and lower*/
+
−
        /* END : Media query Responsive Design */
+
−
    </style>
+
−
    <script>
+
−
        // FOR SMALLNAV
+
−
        $(function() {
+
−
            var pull        = $('#pull');
+
−
                menu        = $('#smallnav ul');
+
−
                menuHeight  = menu.height();
+
−
            $(pull).on('click', function(e) {
+
−
                e.preventDefault();
+
−
                menu.slideToggle();
+
−
            });
+
−
            $(window).resize(function(){
+
−
                var w = $(window).width();
+
−
                if(w > 320) {
+
−
                    if (menu.is(':hidden')) {
+
−
                    menu.removeAttr('style');
+
−
                    }
+
−
                }
+
−
            });
+
−
         });
+
 
     </script>
 
     </script>
−
    <script type="text/javascript">
+
 
−
            $(document).ready(function(){
+
<div id="banner">
−
            // make submenus appear //
+
<h1>MODELING</h1>
−
                $("#home").hover(function(){
+
</div>
−
                    $("#project-sub") .hide();
+
 
−
                    $("#design-sub") .hide();
+
<div id="upArrow" href="#GeneralContent">
−
                    $("#labwork-sub") .hide();
+
<a href=""></a>
−
                    $("#modeling-sub") .hide();
+
</div>
−
                    $("#achievements-sub") .hide();
+
 
−
                    $("#hp-sub") .hide();
+
 
−
                    $("#aboutus-sub") .hide();
+
<div id="GeneralContent">
−
                });
+
<div id="MainContent">
−
                $("#project").hover(function(){
+
<!-- Introduction -->
−
                    $("#project-sub") .show();
+
<div class="block title">
−
                    $("#labwork-sub") .hide();
+
<h1>General introduction</h1>
−
                    $("#design-sub") .hide();
+
</div>
−
                    $("#modeling-sub") .hide();
+
<div class="block two-third center">
−
                    $("#achievements-sub") .hide();
+
<p>The aim of our mathematical model is to simulate the growth of neurons towards our biofilm in response of the presence of Nerve Growth Factor (NGF). Nerve growth factor is one of a group of small proteins called neurotrophins that are re-sponsible for the development of new neurons, and for the health and maintenance of mature ones. We created a determin-istic model to help the wetlab establish the optimal concen-tration gradients of NGF needed for the regrowth of the nerves. NGF concentration and concentration gradient are key parameters affecting the growth rate and direction of neu-rites. Neurites growth have shown to be NGF dose-dependent: if NGF concentration si too low or too high, the growth rate is attenuated. In order to visualize the results of the model on a microfluidic chip we used MATLAB, App Designer, Python, Gmsh and FreeFem. This is an important part of our project since it creates the link between the wetlab and drylab. </p>
−
                    $("#hp-sub") .hide();
+
<p>We divided our model in three parts:
−
                    $("#aboutus-sub") .hide();
+
<ol style="text-align: left;">
−
                },
+
<li>Production of NGF by the <i>E. coli</i> genetically modified</li>
−
                                        function(){
+
<li>Simulation of the diffusion of NGF in a given environment</li>
−
                    $("#project-sub") .hide();
+
<li>Neurons growth in the presence of NGF</li>
−
                });
+
</ol>
−
                $("#labwork").hover(function(){
+
</p>
−
                    $("#labwork-sub") .show();
+
</div>
−
                    $("#project-sub") .hide();
+
<div class="block two-third center">
−
                    $("#design-sub") .hide();
+
−
                    $("#modeling-sub") .hide();
+
</div>
−
                    $("#achievements-sub") .hide();
+
<div class="block separator-mark"></div>
−
                    $("#hp-sub") .hide();
+
<div class="block title">
−
                    $("#aboutus-sub") .hide();
+
<h1>Context of our model</h1>
−
                },
+
</div>
−
                                        function(){
+
<div class="block half">
−
                    $("#labwork-sub") .hide();
+
<p>Our project aims at creating a biofilm composed of genetically modified <i>E. coli</i> able to release a neurotrophic factor: NGF. It helps to accelerate the connection between the neurons and the implant of the prothesis; hence aiming at connecting directly the prothesis amputee’s neurons. This will enable the patient to have a more instinctive control of his prothesis device. The nerves will be guided towards a conductive membrane surrounding our genetically modified biofilm. This membrane will then pass the neural signal of the regenerated nerves towards the electronic chip of the implant through wires. It will allow the patient to have a more instinctive and natural control than any other current prosthesis, and a reduced reeducation time.</p>
−
                });
+
</div>
−
               
+
<div class="block half">
−
                $("#design").hover(function(){
+
<img src="https://static.igem.org/mediawiki/2018/a/a3/T--Pasteur_Paris--membraneEcoli.png">
−
                    $("#design-sub") .show();
+
</div>
−
                    $("#project-sub") .hide();
+
<div class="block one-third">
−
                    $("#labwork-sub") .hide();
+
−
                    $("#modeling-sub") .hide();
+
</div>
−
                    $("#achievements-sub") .hide();
+
<div class="block two-third">
−
                    $("#hp-sub") .hide();
+
<p>The aim of the wetllab is to test the biofilm on a microfluidic chip as a proof of concept. The chip is composed of two compartments: one made of the E. coli genetically modified to produce NGF and the other one of neurons. Micro canals link the two compartments in the middle of the chip, allowing the diffusion of NGF and the growth of the neurites. Our model will hence be established on a micro-fluidic chip shape in order to share our results with the wetlab and indicate them the optimal concentration of NGF needed according to their model.</p>
−
                    $("#aboutus-sub") .hide();
+
</div>
−
                },
+
<div class="block two-third center">
−
                                        function(){
+
<p><i>We introduce different parameters in order to create our model :</i></p>
−
                    $("#design-sub") .hide();
+
<table class="tableData" style="margin: auto;">
−
                });
+
<tr>
−
               
+
<td>g</td>
−
                $("#modeling").hover(function(){
+
<td>Length of the neurite outgrowth</td>
−
                    $("#modeling-sub") .show();
+
</tr>
−
                    $("#project-sub") .hide();
+
<tr>
−
                    $("#design-sub") .hide();
+
<td>
−
                    $("#labwork-sub") .hide();
+
<span>
−
                    $("#achievements-sub") .hide();
+
<div class="frac"><span>dg</span><span class="symbol">/</span><span class="bottom">dt</span></div>
−
                    $("#hp-sub") .hide();
+
</span>
−
                    $("#aboutus-sub") .hide();
+
</td>
−
                },
+
<td>Neurite outgrowth rate</td>
−
                                        function(){
+
</tr>
−
                    $("#modeling-sub") .hide();
+
<tr>
−
                });
+
<td>u(x,t)</td>
−
               
+
<td>Concentration of NGF at the position x and time t</td>
−
                $("#achievements").hover(function(){
+
</tr>
−
                    $("#achievements-sub") .show();
+
<tr>
−
                    $("#project-sub") .hide();
+
<td>
−
                    $("#design-sub") .hide();
+
<span>
−
                    $("#labwork-sub") .hide();
+
<div class="frac"><span>du</span><span class="symbol">/</span><span class="bottom">dt</span></div>
−
                    $("#modeling-sub") .hide();
+
</span>
−
                    $("#hp-sub") .hide();
+
</td>
−
                    $("#aboutus-sub") .hide();
+
<td>NGF concentration gradient at the position x and time t</td>
−
                },
+
</tr>
−
                                        function(){
+
<tr>
−
                    $("#achievements-sub") .hide();
+
<td>C<SUB>diff</SUB></td>
−
                });
+
<td>Diffusion coefficient of NGF</td>
−
               
+
</tr>
−
                $("#hp").hover(function(){
+
<tr>
−
                    $("#hp-sub") .show();
+
<td>K</td>
−
                    $("#project-sub") .hide();
+
<td>Gradient factor (growth rate of the neurite under the stimulation of the NGF concentration gradient)</td>
−
                    $("#design-sub") .hide();
+
</tr>
−
                    $("#labwork-sub") .hide();
+
<tr>
−
                    $("#modeling-sub") .hide();
+
<td>G<SUB><FONT face="Raleway">&theta;</FONT></SUB></td>
−
                    $("#achievements-sub") .hide();
+
<td>Baseline growth rate (neurite growth rate in absence of NGF concentration gradient)</td>
−
                    $("#aboutus-sub") .hide();
+
</tr>
−
                },
+
<tr>
−
                                        function(){
+
<td>L</td>
−
                    $("#hp-sub") .hide();
+
<td>Length of the conduit </td>
−
                });
+
</tr>
−
                $("#aboutus").hover(function(){
+
</table>
−
                    $("#aboutus-sub") .show();
+
</div>
−
                    $("#project-sub") .hide();
+
 
−
                    $("#design-sub") .hide();
+
<!-- First Onglet Production of NGF-->
−
                    $("#labwork-sub") .hide();
+
 
−
                    $("#modeling-sub") .hide();
+
<div class="block full dropDown">
−
                    $("#achievements-sub") .hide();
+
<h4><a href="#production">NGF Production by genetically modified <i>E. coli</i></a></h4>
−
                    $("#hp-sub") .hide();
+
</div>
−
                },
+
 
−
                                        function(){
+
<div class="hiddenContent" id="production">
−
                    $("#aboutus-sub") .hide();
+
 
−
                });               
+
</div>
−
            // make chip stay over main menu point when its submenu appears and makes the submenu stay visible//
+
 
−
                $("#project-sub") .hover(function(){
+
<!-- Second Onglet Diffusion of NGF -->
−
                    $("#runningchip") .css('left','125px');
+
 
−
                    $("#project-sub") .show();
+
<div class="block full dropDown">
−
                },
+
<h4><a href="#diffusion">NGF diffusion simultation in a given environment</a></h4>
−
                                        function(){
+
</div>
−
                    $("#runningchip") .css('left','');
+
 
−
                    $("#project-sub") .hide();
+
<div class="hiddenContent" id="diffusion">
−
                });
+
<div class="block title">
−
                $("#labwork-sub") .hover(function(){
+
<h1 style="padding-top: 100px;">NGF diffusion diffusion in a given environment</h1><br>
−
                    $("#runningchip") .css('left','245px');
+
<p><i>We are looking to understand the way the NGF spreads inside the conduit once it is produced. This will help us to determine the NGF concentration u(x,t) (ng.mL<SUP>-1</SUP>) as a function of the distance x (cm) from the production site of NGF.</i></p>
−
                    $("#labwork-sub") .show();
+
</div>
−
                },
+
<!-- Fick's diffusion law -->
−
                                        function(){
+
<div class="block full">
−
                    $("#runningchip") .css('left','');
+
<h3>Fick’s diffusion law </h3>
−
                    $("#labwork-sub") .hide();
+
<p>To simulate NGF diffusion in the microfluidic chip we consider a unidimensional conduit of axe x and a constant concentration of NGF introduced at one end of the canals. In this part, diffusion is assumed to be the only mechanism producing the gradient decay in the micro canals. We can model the diffusion characteristics of NGF with Fick’s second law of diffusion:<br>
−
                });
+
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
−
                $("#design-sub") .hover(function(){
+
<span class="frac">
−
                    $("#runningchip") .css('left','365px');
+
<span>du</span>
−
                    $("#design-sub") .show();
+
<span class="symbol">/</span>
−
                },
+
<span class="bottom">dt</span>
−
                                        function(){
+
</span>
−
                    $("#runningchip") .css('left','');
+
= C<SUB>diff</SUB>
−
                    $("#design-sub") .hide();
+
<span class="frac">
−
                });
+
<span>d<SUP>2</SUP>u</span>
−
                $("#modeling-sub") .hover(function(){
+
<span class="symbol">/</span>
−
                    $("#runningchip") .css('left','485px');
+
<span class="bottom">dx<SUP>2</SUP></span>
−
                    $("#modeling-sub") .show();
+
</span>
−
                },
+
&emsp;&emsp;&emsp;(1)
−
                                        function(){
+
</span>
−
                    $("#runningchip") .css('left','');
+
</p>
−
                    $("#modeling-sub") .hide();
+
<p>Cdiff is assumed to be constant inside the conduit and depends on the material used.<br>
−
                });
+
There are also two boundary conditions:<br>
−
                $("#achievements-sub") .hover(function(){
+
at x=0: &emsp;&emsp;
−
                    $("#runningchip") .css('left','605px');
+
<span class="frac">
−
                    $("#achievements-sub") .show();
+
<span>du</span>
−
                },
+
<span class="symbol">/</span>
−
                                        function(){
+
<span class="bottom">dx</span>
−
                    $("#runningchip") .css('left','');
+
</span>
−
                    $("#achievements-sub") .hide();
+
|<SUB>(0,t)</SUB>&emsp;&emsp;&emsp;(2)<br>
−
                });
+
at x=L: &emsp;&emsp;
−
                $("#hp-sub") .hover(function(){
+
<span style="text-align: left;">
−
                    $("#runningchip") .css('left','725px');
+
<span class="frac">
−
                    $("#hp-sub") .show();
+
<span>du</span>
−
                },
+
<span class="symbol">/</span>
−
                                        function(){
+
<span class="bottom">dx</span>
−
                    $("#runningchip") .css('left','');
+
</span>
−
                    $("#hp-sub") .hide();
+
|<SUB>(L,t)</SUB>&emsp;&emsp;&emsp;(3)<br>
−
                });
+
</span>  
−
                $("#aboutus-sub") .hover(function(){
+
</p>
−
                    $("#runningchip") .css('left','845px');
+
<p>Indeed, in the same material, the rate transfer of the diffusing NGF through the cross section of the micro canal is proportional to the concentration gradient normal to the cross section. It is assumed that the leakage of NGF at both ends of the micro canal is negligible because there should be little NGF at the ends the micro canals compared to the total amount of NGF and second because of a low NGF diffusion rate.
−
                    $("#aboutus-sub") .show();
+
The equation (1) can be solved with Euler’s method and we find the NGF concentration gradient at the position x and time t. The MatLab code is the following:</p>
−
                },
+
</div>
−
                                        function(){
+
<div class="block half">
−
                    $("#runningchip") .css('left','');
+
−
                    $("#aboutus-sub") .hide();
+
</div>
−
                });
+
<div class="block half">
−
            });
+
<p>We displayed our results showing a decrease of the concentration of NGF (u(x,t)) depending on the distance of the conduit x.</p>
−
    </script>
+
<p>We used the following parameters for the model: </p>
−
    <script>
+
<table class="tableData">
−
        /*Attachable menu code*/
+
<tr>
−
        $( document ).ready(function() {
+
<td>Length of the conduit: L</td>
−
       
+
<td>0.1 cm </td>
−
            $(window).scroll(function (event) {
+
</tr>
−
                var y = $(this).scrollTop();
+
<tr>
−
                if(y>60){
+
<td>Diffusion coefficient of NGF : Cdiff</td>
−
                    $("#header").css('position','fixed');
+
<td>7,8*10<SUP>-7</SUP> cm<SUP>2</SUP>.s<SUP>-1</SUP></td>
−
                    $("#header").css('width','100%');
+
</tr>
−
                    $("#header").css('margin-top','-61px');
+
<tr>
−
                    $("#bottom-arrow").css('display','none');
+
<td>Time length of the experiment: t_final</td>
−
                    $("#runningchip-back").css('display','none');
+
<td>3 600 s </td>
−
                    $("#navtext").css('margin-top','-20px');
+
</tr>
−
                    $(".chip_gap").css('height','30px');
+
</table>
−
                }else{
+
</div>
−
                    var offsetTop = -y;
+
<div class="block full">
−
                    $("#header").css('margin-top',offsetTop+'px');
+
<p style="text-align: center;">We obtain the following graphs: </p>
−
                    $("#bottom-arrow").removeAttr('style');
+
</div>
−
                    $("#runningchip-back").removeAttr('style');
+
 
−
                    $("#navtext").removeAttr('style');
+
<div class="block full">
−
                    $(".chip_gap").css('height','23px');
+
<img src="https://static.igem.org/mediawiki/2018/b/b4/T--Pasteur_Paris--gif.gif" style="max-width: 500px; box-shadow: 0px 0px 8px -2px;">
−
                }
+
</div>
−
            });
+
<div class="block half">
−
        /*Fix for when a link targets an id -> check the position on pageload*/
+
−
        $(window).scroll();
+
</div>
−
        });
+
<!-- Optimisation of the gradient -->
−
    </script>
+
<div class="block full">
−
    <script>
+
<h3>Optimisation of the NGF gradient</h3>
−
        $(document).ready(function() {
+
</div>
−
            $("#upArrow").hide();
+
<div class="block half">
−
            $('#upArrow').on('click', function() { // Au clic sur un élément
+
<p>To optimize the accuracy of the NGF gradient we interpolate the curve u(x)=f(x). Consequently, we obtain the f polynomial function easier to derive and a polynomial function of the gradient with a better accuracy than with the first method. The program is the following:</p>
−
                var page = $(this).attr('href'); // Page cible
+
</div>
−
                var speed = 750; // Durée de l'animation (en ms)
+
<div class="block half">
−
                $('html, body').animate( { scrollTop: $(page).offset().top }, speed ); // Go
+
−
                return false;
+
</div>
−
            });
+
<div class="block two-third">
−
        });
+
−
    </script>
+
</div>
−
    <body>
+
<div class="block two-third">
−
        <!-- BEGIN normal Menubar-->
+
<p>With the same parameters as with the previous model we obtain the following graphs: </p>
−
            <div id="Menu">
+
</div>
−
                <div id="naviconwrapper">
+
<div class="block two-third">
−
                    <!-- BEGIN icons -->
+
−
                    <div id="naviconbar">
+
</div>
−
                        <div id="navicons">
+
<!-- Analysis of the model -->
−
                            <ul>
+
<div class="block full">
−
                                <li id="home" ><a href="https://2018.igem.org/Team:Pasteur_Paris"></a>
+
<h3>Analysis of the model </h3>
−
                                </li>
+
<p><i>To validate the model, we vary the three parameters (L, t_final, C<SUB>diff</SUB>) to verify if the program corresponds to a diffusion phenomenon described in Fick’s second law of diffusion. </i></p>
−
                                <li id="project" ><a href="https://2018.igem.org/Team:Pasteur_Paris/Project">Project</a>
+
</div>
−
                                </li>
+
<div class="block two-third">
−
                                <li id="labwork"><a href="https://2018.igem.org/Team:Pasteur_Paris/Labwork">Labwork</a>
+
<img src="https://static.igem.org/mediawiki/2018/4/41/T--Pasteur_Paris--gif-fct-L.gif" style="max-width: 500px; box-shadow: 0px 0px 8px -2px;">
−
                                </li>
+
</div>
−
                                <li id="design"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Design</a>
+
<div class="block full">
−
                                </li>
+
<p>Observations:<br>
−
                                <li id="modeling"><a href="https://2018.igem.org/Team:Pasteur_Paris/Modeling">Modeling</a>
+
<ol style="text-align: left; list-style-type: disc;">
−
                                </li>
+
<li>When the length of the conduit increases but the duration of the experiment is fixed the NGF doesn’t have the time to diffuse in the entire conduit.</li>
−
                                <li id="achievements"><a href="https://2018.igem.org/Team:Pasteur_Paris/Achievements">Achievements</a>
+
<li>For instance, with a t_final= 3 600s the NGF molecules can’t diffuse further than x=0.2cm.</li>
−
                                </li>
+
</ol>
−
                                <li id="hp"><a href="https://2018.igem.org/Team:Pasteur_Paris/HP">Human Practices</a>
+
</p>
−
                                </li>
+
</div>
−
                                <li id="aboutus"><a href="https://2018.igem.org/Team:Pasteur_Paris/AboutUs">About Us</a>
+
<div class="block two-third">
−
                                </li>
+
<img src="https://static.igem.org/mediawiki/2018/0/07/T--Pasteur_Paris--fct-Cdiff.gif" style="max-width: 500px; box-shadow: 0px 0px 8px -2px;">
−
                                <div id="runningchip">
+
</div>
−
                                    <div id="top-arrow"></div>
+
<div class="block full">
−
                                    <div id="runningchip-back"></div>
+
<p>The higher the diffusion coefficient, the faster the molecules will diffuse in the conduit. Indeed, we observe in the model that with a fixed t_final:<br>
−
                                </div>
+
<ol style="text-align: left; list-style-type: disc;">
−
                            </ul>
+
<li>NGF concentration at x=0.1 cm is 675 000 ng.ml<SUP>-1</SUP> for a diffusion coefficient C<SUB>diff</SUB> = 15*10<SUP>-7</SUP> cm<SUP>2</SUP>.s<SUP>-1</SUP></li>
−
                        </div>
+
<li>For a diffusion coefficient two times lower, the NGF concentration is 380 ng.ml<SUP>1</SUP></li>
−
                    </div>
+
</ol>
−
                    <!-- END icons -->
+
</p>
−
                </div>
+
<p>The results confirm the prediction of the Fick’s law model. </p>
−
                    <!-- Begin navigation submenu -->
+
</div>
−
                <div id="navtextwrapper"> <!-- only names of elements -->
+
<div class="block full">
−
                    <div id="navtext">
+
<p>When the time length of the experiment lasts from 1 hour to 2 hours, the concentration of NGF is almost homogeneous in the entire conduit. At the end of the conduit, for x= 0.1 cm, the concentration of NGF equals to 910 ng.ml-1 when t_final= 7 200s whereas the concentration is 3 900 ng.ml<SUP>-1</SUP> when t_final=3 600s. </p>
−
                        <ul id="project-sub">
+
<p>It is interesting to observe that when the duration of the experiment increases, the stationary regime is established: the NGF concentration in the conduit becomes independent of the position and time. Indeed, the concentation gradient of NGF in the conduit moves toward 0 for any position. </p>
−
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Description"></a></li>
+
</div>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Description">Description</a></li>
+
<div class="block two-third">
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Attributions">Infection</a></li>
+
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Partners">Conductivity</a></li>
+
</div>
−
                        </ul>
+
<div class="block two-third">
−
                        <ul id="labwork-sub">
+
−
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Labwork"></a></li>
+
</div>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Experiments">Experiments</a></li>
+
</div>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Demonstrate">Demonstrate</a></li>
+
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Notebook">Notebook</a></li>
+
<!-- Third Onglet Neurons Growth-->
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/InterLab">InterLab</a></li>
+
 
−
                        </ul>
+
<div class="block full dropDown">
−
                        <ul id="design-sub">
+
<h4><a href="#growth">Neurons growth in the presence of NGF</a></h4>
−
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts"></a></li>
+
</div>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Biobricks</a></li>
+
 
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Applied_Design">Product Design</a></li>
+
<div class="hiddenContent" id="growth">
−
                        </ul>
+
<div class="block title">
−
                        <ul id="modeling-sub">
+
<h1 style="padding-top: 100px;">Neurons growth in the presence of NGF</h1><br>
−
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Model"></a></li>
+
<p><i>In this part our goal is to determine the length of the neurite outgrowth (g(t)) in response to the gradient concentration of NGF.</i></p>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Model">Model</a></li>
+
</div>
−
                        </ul>  
+
<!-- Explanation of the model -->
−
                        <ul id="achievements-sub">
+
<div class="block full">
−
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Achievements"></a></li>
+
<h3>Explanation of the model</h3>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/MedalCriterias">Medals Criterias</a></li>
+
</div>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Awards">Awards</a></li>
+
<div class="block full">
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Collaborations">Collaboration</a></li>
+
<h5 style="text-align: left">Baseline growth rate: </h5>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Improve">Improve</a></li>
+
<p>In our mathematical model, neurites grow at a constant growth rate defined as the baseline growth rate G0  when the concentration is below the threshold (assumed to be 995 ng.mL<SUP>-1</SUP>). Neurites stop growing when the NGF concentration is higher than the threshold concentration. The value for the baseline growth rate G0 has been fixed at 20 <FONT face="Raleway">&mu;</FONT>m.h<SUP>-1</SUP> for this model. </p>
−
                        </ul>
+
<h5 style="text-align: left">Concentration Gradient:</h5>
−
                        <ul id="hp-sub">
+
<p>The extent of directional guidance is gradient steepness-dependent provided that the concentration gradient reaches the threshold value. The gradient factor k is a gradient steepness-dependent positive effect on the neurite growth rate. </p>
−
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices"></a></li>
+
<p>In this model we assume that the baseline growth rate and the growth rate in the presence of concentration gradient follow an additive rule. This can be explained by the fact that both the NGF concentration and the its gradient can both individually contribute to neurite extension. The equation governing neurite outgrowth thus becomes:<br><br>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices">Silver</a></li>
+
<span style="position: relative; display: inline-block; text-align: center; width: 100%">
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices">Gold & integrated HP</a></li>
+
<span class="frac">
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Public_Engagement">Education & Engagement</a></li>
+
<span>dg</span>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Safety">Safety</a></li>
+
<span class="symbol">/</span>
−
                        </ul>
+
<span class="bottom">dt</span>
−
                        <ul id="aboutus-sub">
+
</span>
−
                            <li class="chip_gap"><a href="https://2018.igem.org/Team:Pasteur_Paris/Team"></a></li>
+
= G<SUB>0</SUB> + k
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Team">Team Members</a></li>
+
<span class="frac">
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Attributions">Attributions</a></li>
+
<span><FONT face="Raleway">&part;</FONT>u</span>
−
                            <li><a class="navsub1" href="https://2018.igem.org/Team:Pasteur_Paris/Sponsors">Sponsors</a></li>
+
<span class="symbol">/</span>
−
                        </ul>
+
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
−
                    </div>
+
</span>
−
                </div>  
+
|<SUB>(g(t),t)</SUB> &emsp; &emsp; &emsp; (4)</p>
−
                    <!-- End of navigation submenu -->
+
</span>
−
            </div>  
+
</div>
−
        <!-- END: normal Menubar -->
+
<div class="block full">
−
        <!-- BEGIN: Mobile Navigation Menu -->
+
<p>We can introduce a time parameter Tlag because the time taken to transmit the NGF signal is finite. The experiments show that the time lag for the cells to respond to NGF is approximately 1 day. The experiments show:<br>
−
            <div class="clearfix" id="smallnav">
+
if t <FONT face="Raleway">&le;</FONT> T<SUB>lag</SUB> : &emsp; &emsp;
−
                <ul class="clearfix">
+
<span class="frac">
−
                    <li id="home_small"><a href="https://2018.igem.org/Team:Pasteur_Paris">Home</a></li>
+
<span>dg</span>
−
                    <li id="project_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Project">Project</a></li>
+
<span class="symbol">/</span>
−
                    <li id="labwork_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Labwork">Labwork</a></li>
+
<span class="bottom">dt</span>
−
                    <li id="design_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Parts">Design</a></li>
+
</span> = 0<br>
−
                    <li id="modeling_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Modeling">Modeling</a></li>
+
else, if: t <FONT face="Raleway">&ge;</FONT> T<SUB>lag</SUB> : &emsp; &emsp; 
−
                    <li id="achievements_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/Achievements">Achievements</a></li>
+
<span class="frac">
−
                    <li id="hp_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/HP">HP</a></li>
+
<span>dg</span>
−
                    <li id="aboutus_small"><a href="https://2018.igem.org/Team:Pasteur_Paris/AboutUs">About us</a></li>
+
<span class="symbol">/</span>
−
                </ul>
+
<span class="bottom">dt</span>
−
                <a href="#" id="pull">Menu</a>
+
</span> = G<SUB>0</SUB> + k
−
            </div>
+
<span class="frac">
−
        <!-- END: Mobile Navigation Menu -->
+
<span><FONT face="Raleway">&part;</FONT>u</span>
−
    </body>
+
<span class="symbol">/</span>
−
    <!-- Menu Bar code inspired from Freiburg 2015 : https://2015.igem.org/Team:Freiburg -->
+
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
 +
</span>
 +
|<SUB>(g(t),t)</SUB>
 +
</p>
 +
</div>
 +
<!-- Solving the model -->
 +
<div class="block full">
 +
<h3>Solving the model</h3>
 +
</div>
 +
<div class="block full">
 +
<p>To solve the equation (4) we are using Euler’s method forward because the gradient concentration of NGF depends on the length of the neurite (since neurites consume NGF). <br><br>
 +
The Equation (4): &emsp; &emsp; <br>
 +
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
 +
<span class="frac">
 +
<span>dg</span>
 +
<span class="symbol">/</span>
 +
<span class="bottom">dt</span>
 +
</span> = G<SUB>0</SUB> + k
 +
<span class="frac">
 +
<span><FONT face="Raleway">&part;</FONT>u</span>
 +
<span class="symbol">/</span>
 +
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
 +
</span>
 +
|<SUB>(g(t),t)</SUB>
 +
</span><br><br>
 +
Can be written as: &emsp; &emsp; <br><br>
 +
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
 +
g' = G<SUB>0</SUB> + k*f(g,t)
 +
</span><br><br>
 +
Which can be written as : &emsp; &emsp; <br><br>
 +
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
 +
<span class="frac">
 +
<span>g<SUB>n+1</SUB> - g<SUB>n</SUB></span>
 +
<span class="symbol">/</span>
 +
<span class="bottom">dt</span>
 +
</span>
 +
|<SUB>(g(t),t)</SUB> = G<SUB><FONT face= "Raleway">&theta;</FONT></SUB> + k
 +
<span class="frac">
 +
<span><FONT face="Raleway">&part;</FONT>u</span>
 +
<span class="symbol">/</span>
 +
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
 +
</span>
 +
|<SUB>(g(t),t)</SUB>
 +
</span><br><br>
 +
We can therefore have an expression of g<SUB>n+1</SUB>: &emsp; &emsp; <br><br>
 +
<span style="position: relative; display: inline-block; width: 100%; text-align: center;">
 +
g<SUB>n+1</SUB> = g<SUB>n</SUB> + dt*[G<SUB>0</SUB> + k
 +
<span class="frac">
 +
<span><FONT face="Raleway">&part;</FONT>u</span>
 +
<span class="symbol">/</span>
 +
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
 +
</span>
 +
|<SUB>(g(t),t)</SUB>]
 +
</span><br><br>
 +
With initial values of g<SUB><FONT face="Raleway">&theta;</FONT></SUB>, t<SUB><FONT face="Raleway">&theta;</FONT></SUB> and
 +
<span class="frac">
 +
<span><FONT face="Raleway">&part;</FONT>u</span>
 +
<span class="symbol">/</span>
 +
<span class="bottom"><FONT face="Raleway">&part;</FONT>x</span>
 +
</span>
 +
|<SUB>(g(t),t)</SUB>
 +
  we can find all the values of the g </p>
 +
</div>
 +
 
 +
</div>
 +
</div>
 +
</div>
 +
 
 
</html>
 
</html>

Revision as of 12:39, 30 August 2018

""

General introduction

The aim of our mathematical model is to simulate the growth of neurons towards our biofilm in response of the presence of Nerve Growth Factor (NGF). Nerve growth factor is one of a group of small proteins called neurotrophins that are re-sponsible for the development of new neurons, and for the health and maintenance of mature ones. We created a determin-istic model to help the wetlab establish the optimal concen-tration gradients of NGF needed for the regrowth of the nerves. NGF concentration and concentration gradient are key parameters affecting the growth rate and direction of neu-rites. Neurites growth have shown to be NGF dose-dependent: if NGF concentration si too low or too high, the growth rate is attenuated. In order to visualize the results of the model on a microfluidic chip we used MATLAB, App Designer, Python, Gmsh and FreeFem. This is an important part of our project since it creates the link between the wetlab and drylab.

We divided our model in three parts:

  1. Production of NGF by the E. coli genetically modified
  2. Simulation of the diffusion of NGF in a given environment
  3. Neurons growth in the presence of NGF

Context of our model

Our project aims at creating a biofilm composed of genetically modified E. coli able to release a neurotrophic factor: NGF. It helps to accelerate the connection between the neurons and the implant of the prothesis; hence aiming at connecting directly the prothesis amputee’s neurons. This will enable the patient to have a more instinctive control of his prothesis device. The nerves will be guided towards a conductive membrane surrounding our genetically modified biofilm. This membrane will then pass the neural signal of the regenerated nerves towards the electronic chip of the implant through wires. It will allow the patient to have a more instinctive and natural control than any other current prosthesis, and a reduced reeducation time.

The aim of the wetllab is to test the biofilm on a microfluidic chip as a proof of concept. The chip is composed of two compartments: one made of the E. coli genetically modified to produce NGF and the other one of neurons. Micro canals link the two compartments in the middle of the chip, allowing the diffusion of NGF and the growth of the neurites. Our model will hence be established on a micro-fluidic chip shape in order to share our results with the wetlab and indicate them the optimal concentration of NGF needed according to their model.

We introduce different parameters in order to create our model :

g Length of the neurite outgrowth
dg/dt
 		Neurite outgrowth rate
u(x,t) Concentration of NGF at the position x and time t
du/dt
 		NGF concentration gradient at the position x and time t
Cdiff Diffusion coefficient of NGF
K Gradient factor (growth rate of the neurite under the stimulation of the NGF concentration gradient)
Gθ Baseline growth rate (neurite growth rate in absence of NGF concentration gradient)
L Length of the conduit

NGF Production by genetically modified E. coli

NGF diffusion simultation in a given environment

NGF diffusion diffusion in a given environment


We are looking to understand the way the NGF spreads inside the conduit once it is produced. This will help us to determine the NGF concentration u(x,t) (ng.mL-1) as a function of the distance x (cm) from the production site of NGF.

Fick’s diffusion law

To simulate NGF diffusion in the microfluidic chip we consider a unidimensional conduit of axe x and a constant concentration of NGF introduced at one end of the canals. In this part, diffusion is assumed to be the only mechanism producing the gradient decay in the micro canals. We can model the diffusion characteristics of NGF with Fick’s second law of diffusion:
du / dt = Cdiff d2u / dx2    (1)

Cdiff is assumed to be constant inside the conduit and depends on the material used.
There are also two boundary conditions:
at x=0:    du / dx |(0,t)   (2)
at x=L:    du / dx |(L,t)   (3)

Indeed, in the same material, the rate transfer of the diffusing NGF through the cross section of the micro canal is proportional to the concentration gradient normal to the cross section. It is assumed that the leakage of NGF at both ends of the micro canal is negligible because there should be little NGF at the ends the micro canals compared to the total amount of NGF and second because of a low NGF diffusion rate. The equation (1) can be solved with Euler’s method and we find the NGF concentration gradient at the position x and time t. The MatLab code is the following:

We displayed our results showing a decrease of the concentration of NGF (u(x,t)) depending on the distance of the conduit x.

We used the following parameters for the model:

Length of the conduit: L 0.1 cm
Diffusion coefficient of NGF : Cdiff 7,8*10-7 cm2.s-1
Time length of the experiment: t_final 3 600 s

We obtain the following graphs:

Optimisation of the NGF gradient

To optimize the accuracy of the NGF gradient we interpolate the curve u(x)=f(x). Consequently, we obtain the f polynomial function easier to derive and a polynomial function of the gradient with a better accuracy than with the first method. The program is the following:

With the same parameters as with the previous model we obtain the following graphs:

Analysis of the model

To validate the model, we vary the three parameters (L, t_final, Cdiff) to verify if the program corresponds to a diffusion phenomenon described in Fick’s second law of diffusion.

Observations:

  1. When the length of the conduit increases but the duration of the experiment is fixed the NGF doesn’t have the time to diffuse in the entire conduit.
  2. For instance, with a t_final= 3 600s the NGF molecules can’t diffuse further than x=0.2cm.

The higher the diffusion coefficient, the faster the molecules will diffuse in the conduit. Indeed, we observe in the model that with a fixed t_final:

  1. NGF concentration at x=0.1 cm is 675 000 ng.ml-1 for a diffusion coefficient Cdiff = 15*10-7 cm2.s-1
  2. For a diffusion coefficient two times lower, the NGF concentration is 380 ng.ml1

The results confirm the prediction of the Fick’s law model.

When the time length of the experiment lasts from 1 hour to 2 hours, the concentration of NGF is almost homogeneous in the entire conduit. At the end of the conduit, for x= 0.1 cm, the concentration of NGF equals to 910 ng.ml-1 when t_final= 7 200s whereas the concentration is 3 900 ng.ml-1 when t_final=3 600s.

It is interesting to observe that when the duration of the experiment increases, the stationary regime is established: the NGF concentration in the conduit becomes independent of the position and time. Indeed, the concentation gradient of NGF in the conduit moves toward 0 for any position.

Neurons growth in the presence of NGF

Neurons growth in the presence of NGF


In this part our goal is to determine the length of the neurite outgrowth (g(t)) in response to the gradient concentration of NGF.

Explanation of the model

Baseline growth rate:

In our mathematical model, neurites grow at a constant growth rate defined as the baseline growth rate G0 when the concentration is below the threshold (assumed to be 995 ng.mL-1). Neurites stop growing when the NGF concentration is higher than the threshold concentration. The value for the baseline growth rate G0 has been fixed at 20 μm.h-1 for this model.

Concentration Gradient:

The extent of directional guidance is gradient steepness-dependent provided that the concentration gradient reaches the threshold value. The gradient factor k is a gradient steepness-dependent positive effect on the neurite growth rate.

In this model we assume that the baseline growth rate and the growth rate in the presence of concentration gradient follow an additive rule. This can be explained by the fact that both the NGF concentration and the its gradient can both individually contribute to neurite extension. The equation governing neurite outgrowth thus becomes:

dg / dt = G0 + k ∂u / ∂x |(g(t),t)       (4)

We can introduce a time parameter Tlag because the time taken to transmit the NGF signal is finite. The experiments show that the time lag for the cells to respond to NGF is approximately 1 day. The experiments show:
if t ≤ Tlag :     dg / dt = 0
else, if: t ≥ Tlag :     dg / dt = G0 + k ∂u / ∂x |(g(t),t)

Solving the model

To solve the equation (4) we are using Euler’s method forward because the gradient concentration of NGF depends on the length of the neurite (since neurites consume NGF).

The Equation (4):    
dg / dt = G0 + k ∂u / ∂x |(g(t),t)

Can be written as:    

g' = G0 + k*f(g,t)

Which can be written as :    

gn+1 - gn / dt |(g(t),t) = Gθ + k ∂u / ∂x |(g(t),t)

We can therefore have an expression of gn+1:    

gn+1 = gn + dt*[G0 + k ∂u / ∂x |(g(t),t)]

With initial values of gθ, tθ and ∂u / ∂x |(g(t),t) we can find all the values of the g