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

 
(85 intermediate revisions by the same user not shown)
Line 41: Line 41:
 
         #SVGcontainer1{
 
         #SVGcontainer1{
 
             position: absolute;
 
             position: absolute;
−
             width: 100%;
+
             height: 70vh;
 
             right: 0%;
 
             right: 0%;
 
             transition: right 3s;
 
             transition: right 3s;
Line 47: Line 47:
 
             transition-timing-function: cubic-bezier(.74,0,.34,1);
 
             transition-timing-function: cubic-bezier(.74,0,.34,1);
 
             display: block;
 
             display: block;
 +
        }
 +
        #Calque_1{
 +
            height: 100%;
 
         }
 
         }
 
         #SVGcontainer2{
 
         #SVGcontainer2{
 
             position: absolute;
 
             position: absolute;
−
             width: 100%;
+
             height: 70vh;
−
             right: -100%;
+
             left: 100%;
−
             transition: right 3s;
+
             transition: left 3s;
 
             transition-delay: 2s;
 
             transition-delay: 2s;
 
             transition-timing-function: cubic-bezier(.74,0,.34,1);
 
             transition-timing-function: cubic-bezier(.74,0,.34,1);
 
             display: block;
 
             display: block;
 +
        }
 +
        #Calque_2{
 +
            height: 100%;
 
         }
 
         }
 
         #MenuSimulator{
 
         #MenuSimulator{
Line 87: Line 93:
 
         }
 
         }
 
         .ShortText {
 
         .ShortText {
−
            display: none;
 
 
         }
 
         }
 
         /* Begin Petits Textes*/
 
         /* Begin Petits Textes*/
 
             #TEXT1{
 
             #TEXT1{
 
                 fill: black;
 
                 fill: black;
−
                 opacity: .4;
+
                 opacity: .6;
 +
                display: none;
 
             }
 
             }
 
             #TEXT1:hover{
 
             #TEXT1:hover{
−
                fill: black;
 
−
                color: white;
 
 
                 opacity: 1;
 
                 opacity: 1;
 
             }
 
             }
 
             #TEXT2{
 
             #TEXT2{
 
                 fill: black;
 
                 fill: black;
−
                 opacity: .4;
+
                 opacity: .6;
 +
                display: none;
 
             }
 
             }
 
             #TEXT2:hover{
 
             #TEXT2:hover{
−
                fill: blue;
 
 
                 opacity: 1;
 
                 opacity: 1;
 
             }
 
             }
 
             #TEXT3{
 
             #TEXT3{
 
                 fill: black;
 
                 fill: black;
−
                 opacity: .4;
+
                 opacity: .6;
 +
                display: none;
 
             }
 
             }
 
             #TEXT3:hover{
 
             #TEXT3:hover{
−
                fill: blue;
 
 
                 opacity: 1;
 
                 opacity: 1;
 
             }
 
             }
 
             #TEXT4{
 
             #TEXT4{
 
                 fill: black;
 
                 fill: black;
−
                 opacity: .4;
+
                 opacity: .6;
 +
                display: none;
 
             }
 
             }
 
             #TEXT4:hover{
 
             #TEXT4:hover{
−
                fill: blue;
 
 
                 opacity: 1;
 
                 opacity: 1;
 
             }
 
             }
 
             #TEXT5{
 
             #TEXT5{
 
                 fill: black;
 
                 fill: black;
−
                 opacity: .4;
+
                 opacity: .6;
 +
                display: none;
 
             }
 
             }
 
             #TEXT5:hover{
 
             #TEXT5:hover{
−
                fill: blue;
 
 
                 opacity: 1;
 
                 opacity: 1;
 
             }
 
             }
 
             #TEXT6{
 
             #TEXT6{
 
                 fill: black;
 
                 fill: black;
−
                 opacity: .4;
+
                 opacity: .6;
 +
                display: none;
 
             }
 
             }
 
             #TEXT6:hover{
 
             #TEXT6:hover{
−
                fill: blue;
 
 
                 opacity: 1;
 
                 opacity: 1;
 
             }
 
             }
 
             #TEXT7{
 
             #TEXT7{
 
                 fill: black;
 
                 fill: black;
−
                 opacity: .4;
+
                 opacity: .6;
 +
                display: none;
 
             }
 
             }
 
             #TEXT7:hover{
 
             #TEXT7:hover{
−
                fill: blue;
 
 
                 opacity: 1;
 
                 opacity: 1;
 
             }
 
             }
Line 170: Line 174:
 
                 }
 
                 }
 
             });
 
             });
 +
        });
 +
    </script>
 +
    <script type="text/javascript">
 +
        $(document).ready(function() {
 +
            $('#SVGcontainer1').css("right", "100%");
 +
            $('#SVGcontainer2').css("left", "0%");
 +
            $('#Path1').delay(4500).fadeIn(500);
 +
            $('#Path2').delay(5000).fadeIn(500);
 +
            $('#Path3').delay(5500).fadeIn(500);
 +
            $('#Path4').delay(6000).fadeIn(500);
 +
            $('#TEXT1').delay(6500).fadeIn(500);
 +
            $('#TEXT2').delay(6600).fadeIn(500);
 +
            $('#TEXT3').delay(6700).fadeIn(500);
 +
            $('#TEXT4').delay(6800).fadeIn(500);
 +
            $('#TEXT5').delay(6900).fadeIn(500);
 +
            $('#TEXT6').delay(7000).fadeIn(500);
 +
            $('#TEXT7').delay(7100).fadeIn(500);
 +
            $('#Awards').delay(7500).fadeIn(1000);
 +
            $('#US').delay(7500).fadeIn(1000);
 +
            $('#Sponsors').delay(7500).fadeIn(1000);
 +
 
         });
 
         });
 
     </script>
 
     </script>
Line 179: Line 204:
 
                     height="100%" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
 
                     height="100%" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;" xml:space="preserve">
 
                     <style type="text/css">
 
                     <style type="text/css">
−
                         .st0{fill:#4F4A4A;}
+
                         .st0{fill:black; font-size: 40px;}
 
                         .st1{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}
 
                         .st1{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}
 
                         .st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
 
                         .st2{fill:none;stroke:#000000;stroke-miterlimit:10;}
Line 583: Line 608:
 
                     <circle class="CirclePicto" class="st5" cx="569.3" cy="337.4" r="37.7"/>
 
                     <circle class="CirclePicto" class="st5" cx="569.3" cy="337.4" r="37.7"/>
 
                     <g class="ShortText">
 
                     <g class="ShortText">
−
                         <rect id="TEXT1" x="459.9" y="72.6" class="st6" width="166.9" height="79.8"/>
+
                         <rect x="459.9" y="72.6" class="st6" width="166.9" height="79.8"/>
−
                         <text transform="matrix(1 0 0 1 459.8892 81.0708)"><tspan x="0" y="0" class="st0 st1"><h1>COUCOU</h1></tspan></text>
+
                         <text id="TEXT1" transform="matrix(1 0 0 1 350 90)"><tspan x="0" y="0" class="st0"><a href="https://2018.igem.org/Team:Pasteur_Paris/Growing_Back_Nerves" style="text-decoration: none;">GROWING BACK NERVES</a></tspan></text>
−
                         <rect id="TEXT2" x="683.1" y="125.2" class="st6" width="166.9" height="87.1"/>
+
                         <rect x="683.1" y="125.2" class="st6" width="166.9" height="87.1"/>
−
                         <text transform="matrix(1 0 0 1 683.0791 133.6929)"><tspan x="0" y="0" class="st2 st3">BONJOUR</tspan></text>
+
                         <text id="TEXT2" transform="matrix(1 0 0 1 683 180)"><tspan x="0" y="0" class="st0"><a href="https://2018.igem.org/Team:Pasteur_Paris/Fighting" style="text-decoration: none;">FIGHTING INFECTIONS</a></tspan></text>
 
                     </g>
 
                     </g>
 
                      
 
                      
Line 600: Line 625:
 
                     <circle class="CirclePicto"class="st5" cx="806.9" cy="564.7" r="37.7"/>
 
                     <circle class="CirclePicto"class="st5" cx="806.9" cy="564.7" r="37.7"/>
 
                     <g class="ShortText">
 
                     <g class="ShortText">
−
                         <rect id="TEXT3" x="877.2" y="455.4" class="st6" width="154.2" height="76.2"/>
+
                         <rect x="877.2" y="455.4" class="st6" width="154.2" height="76.2"/>
−
                         <text transform="matrix(1 0 0 1 877.2358 463.9414)"><tspan x="0" y="0" class="st4 st5">Lorem ipsum dolor sit amet, </tspan></text>
+
                         <text id="TEXT3" transform="matrix(1 0 0 1 890 520)"><tspan x="0" y="0" class="st0"><a href="https://2018.igem.org/Team:Pasteur_Paris/Device" style="text-decoration: none;">OUR PROSTHESIS</a></tspan></text>
−
                         <rect id="TEXT4" x="961.8" y="550" class="st6" width="143.3" height="74.4"/>
+
                         <rect x="961.8" y="550" class="st6" width="143.3" height="74.4"/>
−
                         <text transform="matrix(1 0 0 1 961.7783 558.5156)"><tspan x="0" y="0" class="st6 st7">Lorem ipsum dolor sit amet, </tspan></text>
+
                         <text id="TEXT4" transform="matrix(1 0 0 1 968 610)"><tspan x="0" y="0" class="st0"><a href="https://2018.igem.org/Team:Pasteur_Paris/Scenario" style="text-decoration: none;">USER SCENARIO</a></tspan></text>
 
                     </g>
 
                     </g>
  
Line 616: Line 641:
 
                     <circle class="CirclePicto" class="st5" cx="709.4" cy="765.4" r="37.7"/>
 
                     <circle class="CirclePicto" class="st5" cx="709.4" cy="765.4" r="37.7"/>
 
                     <g class="ShortText">
 
                     <g class="ShortText">
−
                         <rect id="TEXT5" x="856.3" y="777.4" class="st6" width="159.7" height="76.2"/>
+
                         <rect x="856.3" y="777.4" class="st6" width="159.7" height="76.2"/>
−
                         <text transform="matrix(1 0 0 1 856.2759 785.9316)"><tspan x="0" y="0" class="st7 st8">Lorem ipsum dolor sit amet, </tspan></text>
+
                         <text id="TEXT5" transform="matrix(1 0 0 1 856 810)"><tspan x="0" y="0" class="st0"><a href="https://2018.igem.org/Team:Pasteur_Paris/Human_Practices" style="text-decoration: none;">HUMAN PRACTICES</a></tspan></text>
−
                         <rect id="TEXT6" x="793" y="868.1" class="st6" width="190.5" height="69"/>
+
                         <rect x="793" y="868.1" class="st6" width="190.5" height="69"/>
−
                         <text transform="matrix(1 0 0 1 793.0249 876.6592)"><tspan x="0" y="0" class="st7 st8">Lorem ipsum dolor sit amet, consec</tspan></text>
+
                         <text id="TEXT6" transform="matrix(1 0 0 1 790 900)"><tspan x="0" y="0" class="st0"><a href="https://2018.igem.org/Team:Pasteur_Paris/Public_Engagement" style="text-decoration: none;">EDUCATION & ENGAGEMENT</a></tspan></text>
 
                     </g>
 
                     </g>
  
Line 632: Line 657:
 
                     <circle class="CirclePicto" class="st5" cx="563.4" cy="892.8" r="37.7"/>
 
                     <circle class="CirclePicto" class="st5" cx="563.4" cy="892.8" r="37.7"/>
 
                     <g class="ShortText">
 
                     <g class="ShortText">
−
                         <rect id="TEXT7" x="616.7" y="926.5" class="st6" width="147" height="72.6"/>
+
                         <rect x="616.7" y="926.5" class="st6" width="147" height="72.6"/>
−
                         <text transform="matrix(1 0 0 1 616.7153 935.0557)"><tspan x="0" y="0" class="st7 st8">Lorem ipsum dolor sit amet, </tspan></text>
+
                         <text id="TEXT7" transform="matrix(1 0 0 1 445 1030)"><tspan x="0" y="0" class="st0"><a href="https://2018.igem.org/Team:Pasteur_Paris/Entrepreneurship" style="text-decoration: none;">BUSINESS PLAN</a></tspan></text>
 
                     </g>
 
                     </g>
 
                 </svg>
 
                 </svg>
 
             </div>
 
             </div>
−
             <div style="position: absolute; height: 40px; width: 40px; right: 22.5%; bottom: 44%;">
+
 
 +
            <div class="legendContainer" id="Hidden1">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/b/be/T--Pasteur_Paris--Banner_Overview.jpg);">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px">Our technology aims at promoting nerves growth towards an interface between the body and a prosthesis, in order to transmit neuronal signals.</p>
 +
                </div>
 +
             </div>
 +
            <div class="legendContainer" id="Hidden2">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/b/be/T--Pasteur_Paris--Banner_Overview.jpg);">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px">Besides transimitting a neuronal signal, we also want to ensure our interface to be sure and avoid potential infections.</p>
 +
                </div>
 +
            </div>
 +
            <div class="legendContainer" id="Hidden3">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/a/a4/T--Pasteur_Paris--Banner_Device.jpg);">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px">Discover our fully-detailed plans for our interface between the body and the prosthesis !</p>
 +
                </div>
 +
            </div>
 +
            <div class="legendContainer" id="Hidden4">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/b/be/T--Pasteur_Paris--Banner_Overview.jpg);">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px">Developping an innovation is good, but thinking of all the aspects of the user's life with our product is better.</p>
 +
                </div>
 +
            </div>
 +
            <div class="legendContainer" id="Hidden5">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/b/be/T--Pasteur_Paris--Banner_Overview.jpg);">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px">To fully understand all the issues raised by our solution, we had to prospect and integrate human practices to our project.</p>
 +
                </div>
 +
            </div>
 +
            <div class="legendContainer" id="Hidden6">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/b/be/T--Pasteur_Paris--Banner_Overview.jpg);">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px"></p>
 +
                </div>
 +
            </div>
 +
            <div class="legendContainer" id="Hidden7">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/4/48/T--Pasteur_Paris--Banner_Entrepreneurship.jpg); background-position-x: 68%;">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px">We explored the prosthesis market to be sure our innovation meets the demand ; you can see here our full business plan.</p>
 +
                </div>
 +
            </div>
 +
            <div class="legendContainer" id="HiddenAwards">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/a/a9/T--Pasteur_Paris--Banner_Awards.jpg); background-position-x: 46; ">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px"></p>
 +
                </div>
 +
            </div>
 +
            <div class="legendContainer" id="HiddenUS">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/1/19/T--Pasteur_Paris--Banner_Team.jpg); background-position-x: 50%;">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px">Meet all our team members !</p>
 +
                </div>
 +
            </div>
 +
            <div class="legendContainer" id="HiddenSponsors">
 +
                <div class="circleIMG" style="background-image: url(https://static.igem.org/mediawiki/2018/d/d7/T--Pasteur_Paris--Banner_Sponsors.jpg);">
 +
                </div>
 +
                <div class="legendTEXT">
 +
                    <p style="font-size: 100%; padding: 4px">We want to thank all our sponsors who supported us during our adventure. Discover all of them here !</p>
 +
                </div>
 +
            </div>
 +
            <div style="bottom: 0px; left: 2%; position: fixed;">
 +
                <h3><a id="Awards" href="https://2018.igem.org/Team:Pasteur_Paris/Awards" style="text-decoration: none; color: black; display: none;">Awards</a></h3>
 +
            </div>
 +
            <div style="bottom: 0px; transform: translate(-50%); left: 50%; position: fixed;">
 +
                <h3><a id="US" href="https://2018.igem.org/Team:Pasteur_Paris/Team" style="text-decoration: none; color: black; display: none;">Who are we ?</a></h3>
 +
            </div>
 +
            <div style="bottom: 0px; right: 2%; position: fixed;">
 +
                <h3><a id="Sponsors" href="https://2018.igem.org/Team:Pasteur_Paris/Sponsors" style="text-decoration: none; color: black; display: none;">Sponsors</a></h3>
 
             </div>
 
             </div>
 +
            <div style="right: 0%; top: 50vh; position: absolute; color: transparent;"><p>did not go to Boston :'( but I coded this page :D</p></div>
 
         </div>
 
         </div>
−
 
 
     </body>
 
     </body>
  
 +
    <style type="text/css">
 +
        .legendContainer{
 +
            position: absolute;
 +
            width: 200px;
 +
            right: 15%;
 +
            top: 15vh;
 +
            display: none;
 +
        }
 +
        .circleIMG{
 +
            background-color: black;
 +
            width: 130px;
 +
            height: 130px;
 +
            border-radius: 50%;
 +
            background-size: cover;
 +
            left: 50%;
 +
            position: relative;
 +
            transform: translate(-50%);
 +
            box-shadow: 0px 0px 6px 0px black;
 +
        }
 +
        .legendTEXT{
 +
            border-radius: 5px;
 +
            box-shadow: 0px 0px 10px -4px black;
 +
            text-justify: none;
 +
        }
 +
    </style>
 
     <script type="text/javascript">
 
     <script type="text/javascript">
 
         $(document).ready(function() {
 
         $(document).ready(function() {
−
             $('#SVGcontainer1').css("right", "100%");
+
             $('#TEXT1').mouseover(function() {
−
             $('#SVGcontainer2').css("right", "0%");
+
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                $('#Hidden1').fadeIn(500);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
             $('#TEXT1').mouseout(function() {
 +
                $('#Hidden1').fadeOut(500);
 +
            });
 +
            $('#TEXT2').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#Hidden2').fadeIn(500);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
            $('#TEXT2').mouseout(function() {
 +
                $('#Hidden2').fadeOut(500);
 +
            });
 +
            $('#TEXT3').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#Hidden3').fadeIn(500);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
            $('#TEXT3').mouseout(function() {
 +
                $('#Hidden3').fadeOut(500);
 +
            });
 +
            $('#TEXT4').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#Hidden4').fadeIn(500);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
            $('#TEXT4').mouseout(function() {
 +
                $('#Hidden4').fadeOut(500);
 +
            });
 +
            $('#TEXT5').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#Hidden5').fadeIn(500);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
            $('#TEXT5').mouseout(function() {
 +
                $('#Hidden5').fadeOut(500);
 +
            });
 +
            $('#TEXT6').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#Hidden6').fadeIn(500);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
            $('#TEXT6').mouseout(function() {
 +
                $('#Hidden6').fadeOut(500);
 +
            });
 +
            $('#TEXT7').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#Hidden7').fadeIn(500);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
            $('#TEXT7').mouseout(function() {
 +
                $('#Hidden7').fadeOut(300);
 +
            });
 +
            $('#Awards').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#HiddenAwards').fadeIn(300);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
            $('#Awards').mouseout(function() {
 +
                $('#HiddenAwards').fadeOut(300);
 +
            });
 +
            $('#US').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#HiddenUS').fadeIn(300);
 +
                }
 +
                else{
 +
 
 +
                }
 +
            });
 +
            $('#US').mouseout(function() {
 +
                $('#HiddenUS').fadeOut(300);
 +
            });
 +
            $('#Sponsors').mouseover(function() {
 +
                var larg = (document.body.clientWidth);
 +
                if (larg>960){
 +
                    $('#HiddenSponsors').fadeIn(300);
 +
                }
 +
                else{
 +
                    return false;
 +
                }
 +
            });
 +
            $('#Sponsors').mouseout(function() {
 +
                $('#HiddenSponsors').fadeOut(300);
 +
            });
 
         });
 
         });
 
     </script>
 
     </script>
 +
 
      
 
      
 
</html>
 
</html>

Latest revision as of 15:37, 11 October 2018

""

GROWING BACK NERVES FIGHTING INFECTIONS OUR PROSTHESIS USER SCENARIO HUMAN PRACTICES EDUCATION & ENGAGEMENT BUSINESS PLAN

Our technology aims at promoting nerves growth towards an interface between the body and a prosthesis, in order to transmit neuronal signals.

Besides transimitting a neuronal signal, we also want to ensure our interface to be sure and avoid potential infections.

Discover our fully-detailed plans for our interface between the body and the prosthesis !

Developping an innovation is good, but thinking of all the aspects of the user's life with our product is better.

To fully understand all the issues raised by our solution, we had to prospect and integrate human practices to our project.

We explored the prosthesis market to be sure our innovation meets the demand ; you can see here our full business plan.

Meet all our team members !

We want to thank all our sponsors who supported us during our adventure. Discover all of them here !

did not go to Boston :'( but I coded this page :D