Difference between revisions of "Team:Technion Israel/Design"

 
(58 intermediate revisions by 5 users not shown)
Line 5: Line 5:
 
 
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Technion/CSS?action=raw&ctype=text/css" />
 
<link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Technion/CSS?action=raw&ctype=text/css" />
 +
        <link rel="stylesheet" type="text/css" href="https://2015.igem.org/Template:Technion/navbar/css?action=raw&ctype=text/css" />
 
<style type="text/css">
 
<style type="text/css">
 
body {
 
body {
background-color: rgb(173, 201, 219);}
+
background-color: rgb(255, 184, 106);}
+
header{background-image: url("https://static.igem.org/mediawiki/2015/0/06/Technion_Israel_2015_newcomb.jpg"); background-size: 100%; background-repeat: no-repeat; width: 100%; height: 420px; margin-bottom: 0px;}
.slides {height: 470px;
+
.title h1{ color: rgb(255, 184, 106); font-weight: bold; font-size: 100px; text-align: center; background: rgba(0, 0, 0, 0.8); font-family: sans-serif; font-style: Arial; height: 100px; text-shadow: black 6px 6px 6px; line-height: 80px;}
 +
#bodyContent h1{margin-bottom: 0em;}
 +
 
 +
.content{padding: 20px; margin-top: 0px; font-size: 16px;}
 +
 
 +
.bottom{font-family: MV Boli; margin-bottom: 20px; width: 100%;}
 +
.previous{width: 160px; float: left; text-align: center; background-color: rgb(255, 184, 106); border: 2px solid black; border-radius: 10px;}
 +
.next{width: 160px; 30px; float: right; text-align: center; background-color: rgb(255, 184, 106); border: 2px solid black; border-radius: 10px;}
 +
 
 +
.previous:hover{border: 4px solid black; font-weight: bold;}
 +
.next:hover{border: 4px solid black; font-weight: bold;}
 +
 
 +
.video_wrapper{margin-left: auto; margin-right:auto; text-align:center;}
 +
 
 +
.img_center{text-align: center;}
 +
.img_center{position: relative;
 +
top: 50%;
 +
text-align: center;}
 +
.img_mid{text-align: center; margin-left: auto; margin-right: auto; width: 500px;}
 +
 
 +
figure {text-align: center; color: gray;}
 +
 +
.slides {height: 470px;
 +
width: 700px;
 +
padding: 20px;
 +
margin: auto;
 +
color: navy;
 +
font-size: 12px;}
 +
 +
.slidess {height: 370px;
 
width: 700px;
 
width: 700px;
 
padding: 20px;
 
padding: 20px;
Line 26: Line 56:
 
#slide3-text{width: 330px; float: left;}
 
#slide3-text{width: 330px; float: left;}
 
#slide4-text-top{float: right; width: 330px;}
 
#slide4-text-top{float: right; width: 330px;}
#slide4-text-top h4{font-size: 16px;}
 
 
 
 
 
  
 
.sp-slideshow {
 
.sp-slideshow {
Line 39: Line 64:
 
   min-width: 260px;
 
   min-width: 260px;
 
   height: 560px;
 
   height: 560px;
 +
  border: 10px solid #ddd;
 +
  border: 10px solid rgba(255,255,255,0.9);
 +
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
 +
}
 +
.sp-slideshows {
 +
  position: relative;
 +
  margin: 0px auto;
 +
  width: 840px;
 +
  max-width: 1000px;
 +
  min-width: 260px;
 +
  height: 400px;
 
   border: 10px solid #ddd;
 
   border: 10px solid #ddd;
 
   border: 10px solid rgba(255,255,255,0.9);
 
   border: 10px solid rgba(255,255,255,0.9);
Line 45: Line 81:
  
 
.sp-content {
 
.sp-content {
 +
  position: relative;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 +
.sp-contents {
 
   position: relative;
 
   position: relative;
 
   width: 100%;
 
   width: 100%;
Line 52: Line 95:
  
 
.sp-parallax-bg {
 
.sp-parallax-bg {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  background-size: cover;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 +
.sp-parallax-bgs {
 
   position: absolute;
 
   position: absolute;
 
   top: 0;
 
   top: 0;
Line 62: Line 115:
  
 
.sp-slideshow input {
 
.sp-slideshow input {
 +
  position: absolute;
 +
  bottom: 15px;
 +
  left: 50%;
 +
  width: 9px;
 +
  height: 9px;
 +
  z-index: 1001;
 +
  cursor: pointer;
 +
  opacity: 0;
 +
}
 +
 +
.sp-slideshows input {
 
   position: absolute;
 
   position: absolute;
 
   bottom: 15px;
 
   bottom: 15px;
Line 73: Line 137:
  
 
.sp-slideshow input + label {
 
.sp-slideshow input + label {
 +
  position: absolute;
 +
  bottom: 15px;
 +
  left: 50%;
 +
  width: 6px;
 +
  height: 6px;
 +
  display: block;
 +
  z-index: 1000;
 +
  border: 3px solid white;
 +
  border: 3px solid navy;
 +
  border-radius: 50%;
 +
  transition: background-color linear 0.1s;
 +
}
 +
 +
.sp-slideshows input + label {
 
   position: absolute;
 
   position: absolute;
 
   bottom: 15px;
 
   bottom: 15px;
Line 87: Line 165:
  
 
.sp-slideshow input:checked + label {
 
.sp-slideshow input:checked + label {
 +
  background-color: white;
 +
  background-color: navy;
 +
}
 +
 +
.sp-slideshows input:checked + label {
 
   background-color: white;
 
   background-color: white;
 
   background-color: navy;
 
   background-color: navy;
Line 97: Line 180:
 
.sp-selector-2, .button-label-2 {
 
.sp-selector-2, .button-label-2 {
 
   margin-left: -18px;
 
   margin-left: -18px;
 +
}
 +
 +
.sp-selector-3, .button-label-3 {
 +
  margin-left: 0px;
 
}
 
}
 
.sp-selector-4, .button-label-4 {
 
.sp-selector-4, .button-label-4 {
 
   margin-left: 18px;
 
   margin-left: 18px;
 +
}
 +
 +
.sp-selectors-1, .button-labels-1 {
 +
  margin-left: -36px;
 +
}
 +
 +
.sp-selectors-2, .button-labels-2 {
 +
  margin-left: -18px;
 +
}
 +
.sp-selectors-3, .button-labels-3 {
 +
  margin-left: 0px;
 +
}
 +
.sp-selectors-4, .button-labels-4 {
 +
  margin-left: 18px;
 +
}
 +
.sp-selectors-5, .button-labels-5 {
 +
  margin-left: 36px;
 
}
 
}
  
  
 
.sp-arrow {
 
.sp-arrow {
 +
    position:absolute;
 +
    top:50%;
 +
    width:26px;
 +
    height:33px;
 +
    margin-top:-35px;
 +
    display:none;
 +
    opacity:0.8;
 +
    cursor:pointer;
 +
    z-index:1000;
 +
    background: url(http://i.imgur.com/L6FjFzo.png) no-repeat;
 +
    -webkit-transition:opacity linear 0.3s;
 +
    -moz-transition:opacity linear 0.3s;
 +
    -o-transition:opacity linear 0.3s;
 +
    -ms-transition:opacity linear 0.3s;
 +
    transition:opacity linear 0.3s; }
 +
 +
.sp-arrows {
 
     position:absolute;
 
     position:absolute;
 
     top:50%;
 
     top:50%;
Line 124: Line 245:
  
 
.sp-arrow:active {
 
.sp-arrow:active {
 +
    margin-top:-35px; }
 +
 +
.sp-arrows:hover {
 +
    opacity:1; }
 +
 +
.sp-arrows:active {
 
     margin-top:-35px; }
 
     margin-top:-35px; }
 
 
Line 136: Line 263:
 
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
 
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
 
.sp-selector-4:checked ~ .sp-arrow.sp-a3 {
 
.sp-selector-4:checked ~ .sp-arrow.sp-a3 {
 +
  left: 15px;
 +
  display: block;
 +
  background-position: top left;
 +
}
 +
 +
.sp-selectors-1:checked ~ .sp-arrows.sps-a2,
 +
.sp-selectors-2:checked ~ .sp-arrows.sps-a3,
 +
.sp-selectors-3:checked ~ .sp-arrows.sps-a4,
 +
.sp-selectors-4:checked ~ .sp-arrows.sps-a5 {
 +
  right: 15px;
 +
  display: block;
 +
  background-position: top right;
 +
}
 +
.sp-selectors-2:checked ~ .sp-arrows.sps-a1,
 +
.sp-selectors-3:checked ~ .sp-arrows.sps-a2,
 +
.sp-selectors-4:checked ~ .sp-arrows.sps-a3,
 +
.sp-selectors-5:checked ~ .sp-arrows.sps-a4{
 
   left: 15px;
 
   left: 15px;
 
   display: block;
 
   display: block;
Line 146: Line 290:
  
 
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
 
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
 +
  transition: background-position linear 0.7s;
 +
}
 +
 +
.sp-slideshows input:checked ~ .sp-contents {
 +
  transition: background-position linear 0.6s, background-color linear 0.8s;
 +
}
 +
 +
.sp-slideshows input:checked ~ .sp-contents .sp-parallax-bgs {
 
   transition: background-position linear 0.7s;
 
   transition: background-position linear 0.7s;
 
}
 
}
Line 185: Line 337:
 
     background-position: 0 0;
 
     background-position: 0 0;
 
}
 
}
 +
 +
 +
input.sp-selectors-1:checked ~ .sp-contents {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 +
input.sp-selectors-2:checked ~ .sp-contents {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 +
input.sp-selectors-3:checked ~ .sp-contents {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 +
input.sp-selectors-4:checked ~ .sp-contents {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 +
input.sp-selectors-5:checked ~ .sp-contents {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 +
 +
input.sp-selectors-1:checked ~ .sp-contents .sp-parallax-bgs {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selectors-2:checked ~ .sp-contents .sp-parallax-bgs {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selectors-3:checked ~ .sp-contents .sp-parallax-bgs {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selectors-4:checked ~ .sp-contents .sp-parallax-bgs {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selectors-5:checked ~ .sp-contents .sp-parallax-bgs {
 +
    background-position: 0 0;
 +
}
 +
  
  
Line 206: Line 406:
 
   float: left;
 
   float: left;
 
   opacity: 1;
 
   opacity: 1;
   transition: opactiy ease-in 0.4s 0.8s;
+
   transition: opacity ease-in 0.4s 0.8s;
 
}
 
}
  
 
.sp-slider > li img {
 
.sp-slider > li img {
 +
  box-sizing: border-box;
 +
  display: block;
 +
  margin: 0 auto;
 +
  padding: 40px 0 50px 0;
 +
  max-height: 100%;
 +
  max-width: 100%;
 +
}
 +
 +
.sp-sliders {
 +
  position: relative;
 +
  left: 0;
 +
  width: 500%;
 +
  height: 100%;
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  transition: left ease-in 0.8s;
 +
}
 +
.sp-sliders > li {
 +
  color: white;
 +
  width: 20%;
 +
  box-sizing: border-box;
 +
  height: 100%;
 +
  padding: 0 0px;
 +
  float: left;
 +
  opacity: 1;
 +
  transition: opacity ease-in 0.4s 0.8s;
 +
}
 +
 +
 +
.sp-sliders > li img {
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
   display: block;
 
   display: block;
Line 232: Line 463:
 
input.sp-selector-4:checked ~ .sp-content .sp-slider {
 
input.sp-selector-4:checked ~ .sp-content .sp-slider {
 
     left: -300%;
 
     left: -300%;
 +
}
 +
 +
 +
input.sp-selectors-1:checked ~ .sp-contents .sp-sliders {
 +
    left: 0;
 +
}
 +
 +
input.sp-selectors-2:checked ~ .sp-contents .sp-sliders {
 +
    left: -100%;
 +
}
 +
 +
input.sp-selectors-3:checked ~ .sp-contents .sp-sliders {
 +
    left: -200%;
 +
}
 +
 +
input.sp-selectors-4:checked ~ .sp-contents .sp-sliders {
 +
    left: -300%;
 +
}
 +
 +
input.sp-selectors-5:checked ~ .sp-contents .sp-sliders {
 +
    left: -400%;
 
}
 
}
 
   
 
   
Line 239: Line 491:
 
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
 
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
 
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4){
 
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4){
 +
    opacity: 1;
 +
}
 +
 +
input.sp-selectors-1:checked ~ .sp-contents .sp-sliders > li:first-child,
 +
input.sp-selectors-2:checked ~ .sp-contents .sp-sliders > li:nth-child(2),
 +
input.sp-selectors-3:checked ~ .sp-contents .sp-sliders > li:nth-child(3),
 +
input.sp-selectors-4:checked ~ .sp-contents .sp-sliders > li:nth-child(4),
 +
input.sp-selectors-5:checked ~ .sp-contents .sp-sliders > li:nth-child(5){
 
     opacity: 1;
 
     opacity: 1;
 
}
 
}
Line 249: Line 509:
 
<body>
 
<body>
  
<!---------------------------------------dropdown menu----------------------------------->
+
<!-------------------------------------nav-bar---------------------------------------------->
<div class="dropdown">
+
<div class="nav_menu">
<a href="https://2015.igem.org/Team:Technion_Israel">
+
 
<img src="https://static.igem.org/mediawiki/2015/c/c1/Team_Technion_Navbar_Home.png" alt="Home" id="home_nav" />
+
<a href="https://2015.igem.org/Team:Technion_Israel" style="position:fixed; width: 170px; display:inline-block; text-decoration: none;" class="nav_home_link">
<!--<div id="home_text">Navigate</div>-->
+
<img src="https://static.igem.org/mediawiki/2015/c/c1/Team_Technion_Navbar_Home.png" alt="Home" id="nav_home" /><div class="home_text">Home</div></a>
</a>
+
 
<nav>
+
<div class="main_buttons">
<div class="main1">
+
<div id="project" class="main_button">Project</div>
<a href="https://2015.igem.org/Team:Technion_Israel/Project">Project</a>
+
<div id="Lab_Notebook" class="main_button">Lab&nbsp;Notebook</div>
<span class="btn-bg1"></span>
+
<div id="Human_Practices" class="main_button">Human&nbsp;Practices</div>
<div class="sub1">
+
<div id="Judging_Criteria" class="main_button">Judging&nbsp;Criteria</div>
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Overview">Overview</a>
+
<div id="Team" class="main_button">Team</div>
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Bacillus">Bacillus</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Project/E_Coli">E.Coli</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Project/NADPH">NADPH</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Comb">Comb</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Modeling">Modeling</a>
+
</div>
+
</div>
+
<div class="main2">
+
<a href="https://2015.igem.org/Team:Technion_Israel/Team">Team</a>
+
<span class="btn-bg2"></span>
+
<div class="sub2">
+
<a href="https://2015.igem.org/Team:Technion_Israel/Team/About_Us">About&nbsp;Us</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Attributions">Attributions</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Team/Sponsors">Sponsors</a>
+
</div>
+
</div>
+
<div class="main3">
+
<a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook">Lab&nbsp;Notebook</a>
+
<span class="btn-bg3"></span>
+
<div class="sub3">
+
<a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Overview">Overview</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Protocols">Protocols</a>
+
</div>
+
</div>
+
<div class="main4">
+
<a href="https://2015.igem.org/Team:Technion_Israel/Practices">Human&nbsp;Practices</a>
+
<span class="btn-bg4"></span>
+
<div class="sub4">
+
<a href="https://2015.igem.org/Team:Technion_Israel/Practices/Education">Education</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Practices/Publications">Publications</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Practices/Market_Research">Market&nbsp;Research</a>
+
</div>
+
</div>
+
<div class="main5">
+
<a href="https://2015.igem.org/Team:Technion_Israel/Judging_Criteria">Judging&nbsp;Criteria</a>
+
<span class="btn-bg5"></span>
+
<div class="sub5">
+
<a href="https://2015.igem.org/Team:Technion_Israel/Parts">Parts</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Judging_Criteria/Achievements">Achievements</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Collaborations">Collaborations</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Design">Design</a>
+
<a href="https://2015.igem.org/Team:Technion_Israel/Entrepreneurship">Entrepreneurship</a>
+
</div>
+
</div>
+
</nav>
+
 
</div>
 
</div>
<!---------------------------------------dropdown menu-end----------------------------------->
+
<nav>
 +
<div id="Team_Links" class="main_links">
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Team/About_Us" id="Team_Links_About_Us">About&nbsp;Us</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Attributions" id="Team_Links_Attributions">Attributions</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Team/Sponsors" id="Team_Links_Sponsors">Sponsors</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Team/gallery" id="Team_Links_gallery">Gallery</a>
 +
</div>
 +
<div id="Judging_Criteria_Links" class="main_links">
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Parts" id="Judging_Criteria_Links_Parts">Parts</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Judging_Criteria/Achievements" id="Judging_Criteria_Links_Achievements">Achievements</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Collaborations" id="Judging_Criteria_Links_Collaborations">Collaborations</a>
 +
</div>
 +
<div id="Human_Practices_Links" class="main_links">
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Practices">Practices</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Practices/safety">Safety</a>
 +
</div>
 +
<div id="Lab_Notebook_Links" class="main_links">
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Overview">Overview</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Protocols">Protocols</a>
 +
</div>
 +
<div id="project_Links" class="main_links">
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Overview">Overview</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Secretion">Secretion</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Expression">Expression</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Cofactor">Cofactor</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Design">Comb</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Modeling">Modeling</a>
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Results">Results</a>
 +
</div>
 +
</nav>
 +
</div>
 +
<!-------------------------------------nav-bar-end------------------------------------------>
 +
 
 +
<!-------------------------------------up-button-------------------------------------------->
 +
<div class="up_button" style="text-decoration: none;">
 +
<a href="#" class="up_link" style="text-decoration: none;">
 +
    <div class="up_button_text" style="text-decoration: none;">UP</div>
 +
    <img src="https://static.igem.org/mediawiki/2015/b/b8/Technion_2015_Up_geek.png" alt="Scroll to top" />
 +
</a>
 +
</div>
 +
<!-------------------------------------up-button-end---------------------------------------->
 +
<header>
 +
</header>
 +
<div class="title">
 +
<h1><b>The Comb</b></h1>
 +
</div>
  
<div class="content">
+
<div class="content">  
<header>
+
<img src="https://static.igem.org/mediawiki/2015/5/52/Technion_Israel_2015_Design-heading.jpg" alt="Design" width="914px" height="300px"/>
+
</header>  
+
 
<div class="text">
 
<div class="text">
<h1><b>Why design?</b></h1>
+
<h2><b>Why design?</b></h2>
<p>When we came up with the idea of having two different types of bacteria work together to break down dihydrotestosteron (DHT), we were faced with a serious
+
<p>When we came up with the idea of having two different types of bacteria work together to break down dihydrotestosterone (DHT), we were faced with a serious
challenge.  We suspected that consumers would be discouraged by a product requiring the application of two different types of bacteria and,in addition, we were hesitant about the safety repercussions.
+
challenge.  We suspected that consumers would be discouraged by a product requiring the application of two different types of bacteria and, in addition, we were hesitant about the safety repercussions.
 
While our project involved using genetically engineered bacteria for two purposes, and therefore two types of bacteria, we wanted to find a way to prevent the <i>Escherichia coli</i>  
 
While our project involved using genetically engineered bacteria for two purposes, and therefore two types of bacteria, we wanted to find a way to prevent the <i>Escherichia coli</i>  
 
from reaching the consumer's scalp, in order to increase the chances of the <i>Bacillus subtilis's</i> survival, and to minimize
 
from reaching the consumer's scalp, in order to increase the chances of the <i>Bacillus subtilis's</i> survival, and to minimize
 
side effects that may occur with the use of such a product. </p>
 
side effects that may occur with the use of such a product. </p>
<p>The solution was found through consulting with multiple academics and an industrial engineer.  After the final prototype was printed, we conducted
+
 
a focus group survey about the comfort and efficiency of using the comb.</p>
+
<p>The solution was found through consulting with multiple academics and an industrial engineer.  Before the final prototype was printed, we conducted a focus group survey about the comfort and efficiency of using the comb, which helped us plan important changes for the final prototype.</p>
 +
 
 +
<h2><b>The Brainstorming Process</b></h2>
 +
<p>Once we set out to search for a solution for combining the components of our project, we quickly came to consider the idea of a comb.  After much consultation with academic staff, an industrial engineer, and friends, we designed a comb composed of a comb body with inner tubes/liquid pathways, a handle, and a syringe.</p>
 
 
  
 
<!-------begin slider------->
 
<!-------begin slider------->
  
<h2>The Designs</h2>
+
<h2><b>The Comb Prototypes</b></h2>
 +
<p>The comb was designed in "Solidworks" and was printed in a 3D printer.</p>
 
<div class="container">
 
<div class="container">
  
Line 365: Line 626:
 
<p>However, within, the pathways are structured in such a way to
 
<p>However, within, the pathways are structured in such a way to
 
uniformly distribute the treatment formula to the scalp.  Simultaneously,  
 
uniformly distribute the treatment formula to the scalp.  Simultaneously,  
the comb massages the scalp, removing excessive fat and helping restoring the hair follicle growth.</p>
+
the comb massages the scalp and gives the consumer full control of the spread of the product.</p>
 
</div>
 
</div>
 
</div>
 
</div>
Line 374: Line 635:
 
<div id="slide2-text-top">
 
<div id="slide2-text-top">
 
<h1><b>Prototype #2</b></h1>
 
<h1><b>Prototype #2</b></h1>
<p>We directed our focus on improving the flow through the pathways.  We moved the entranceway for the treatment formula to the middle and started considering about a comfortable way for the patient to hold the comb.</p>
+
<p>We directed our focus on improving the flow through the pathways.  We moved the entranceway for the treatment formula to the middle and started considering about a comfortable way for the user to hold the comb.</p>
 
</div>
 
</div>
 
</div>
 
</div>
Line 400: Line 661:
 
<div id="slide4-text-top">
 
<div id="slide4-text-top">
 
<h1><b>Prototype #4</b></h1>
 
<h1><b>Prototype #4</b></h1>
<h4><i>The final prototype for the iGEM 2015 competition</i></h4>
+
<p><b><i>The final prototype for the iGEM 2015 competition</i></b></p>
<p>The final model has a unique, aesthetic design.  It can be easily adjusted to fit any hand size.</p>
+
<p>The final design has a unique, aesthetic appearance.  It can be easily adjusted to fit any hand size- an additional feature we added thanks to the responses from the focus group survey we conducted(see below).</p>
 
</div>
 
</div>
 
</div>
 
</div>
Line 418: Line 679:
 
</div>
 
</div>
 
<!-------end of slider------->
 
<!-------end of slider------->
<h2>Focus Group Survey</h2>
+
</br><h2><b>The Mathematics Behind the Comb</b></h2>
<h2>Efficiency of the Comb</h2>
+
<p>As explained in the slideshow above, prototype #3 took into consideration the flow geometry required for uniform distribution of liquids exiting the comb. To obtain even flow for each tube and each comb tooth, we used a specially designed tube geometry. From the syringe entry at the top of the comb, each tube splits into two tubes, periodically, resulting 16 parallel, even-flow tubes at the comb fluid exit to the scalp. We used fluid mechanics equations with different tube sizes (different widths, lengths, and shapes) until we converged to our current ideal dimensions. The equations we used are presented in Figure 1 below.</p>
<h2>Conclusion</h2>
+
<figure><img class="img_mid" src="https://static.igem.org/mediawiki/2015/4/4b/Technion_Israel_2015_comb-equations.png"><figcaption>Figure 1: Flow equations for the determination of ideal tube dimensions</figcaption></figure>
<p>After much though and effort, the final comb apparatus presented for the competition was the result.</p>
+
 
<p>The comb provides clear and defined benefits compared to a topical mixture applied with the hands or gloves:</br>
+
</br><h2><b>The Syringe</b></h2>
<ol><li><b>Cleanliness-</b> The comb and syringe combination allows the consumer to apply the product, whilst never having to touch the bacteria.</li>
+
 
 +
<p>The comb, on its own, is not customized enough to fit our purposes.  Therefore, we needed to consider how exactly our formula would be incorporated into the comb.  At first we considered using two small containers which would be opened by the consumer and placed in the comb.  However, after putting some thought into it, we realized that this strategy could be messy and inconvenient.  It also left us with a product requiring two different types of genetically modified bacteria being placed on the head from separate containers.  Therefore, we developed the idea of using a syringe.</p>
 +
<p>The syringe below is an illustration  of our syringe design.</p>
 +
<figure><img src="https://static.igem.org/mediawiki/2015/2/25/Techion_Israel_2015_Design_syringe.png" width="100%" alt="syringe"/><figcaption>Figure 2: 2-dimensional illustration of the syringe for inserting the engineered bacterium into the comb</figcaption></figure>
 +
<p><b>Explanation:</b></br>
 +
<ul style="list-style: circle;"><li>The <i>E. coli</i> overproducing NADPH is represented by the <span style="color:red; font-weight:bold;">red</span> section.  It will be present in the syringe at the time the consumer purchases it.</li>
 +
<li>The <span style="color:blue; font-weight:bold;">blue</span> section represents the <i>B. subtilis</i> engineered to secrete the 3α-HSD enzyme.  The <i>B. subtilis</i> will be sucked into the syringe from a container also purchased by the consumer as part of the kit.</li>
 +
<li>In between the sections is a filter membrane- small enough to allow the NADPH to pass through, while preventing the <i>E. coli</i> from reaching the user's scalp.  As the piston is pressed during use, the NADPH will pass through the membrane and into the <i>B. subtilis</i>-containing solution.  In other words, while pushing down the piston, the NADPH mixes with the enzyme, making the process more efficient.</li></ul></p>
 +
 
 +
<p>This mixture will reach the scalp of the user, creating an engineered microbiome environment which contains enough NADPH for the 3α-HSD enzyme to work efficiently to break down the DHT in the hair follicles.</p>
 +
 
 +
<p>For now, we have printed the comb from white polymer resin using a 3-D printer, but an advantage to using 3-D printing is that, in the future, it will easily allow us to print the comb in various materials (which can be softer), so the touch with the scalp and hair will be much softer.</p>
 +
<p>In addition to our purposes for the comb, we believe that it has many other potential applications and can be used with different substances such as a lice cream, or to be used by hair stylists to apply hair color on the hair, and more.</p></br>
 +
<p>The movie below simulates the structure of the comb.</p>
 +
 
 +
<div class="video_wrapper" width="100%">
 +
<video controls poster="https://static.igem.org/mediawiki/2015/2/28/Team_Technion_Logo_White.png" width="100%" height="500px">
 +
<source src="https://static.igem.org/mediawiki/2015/4/46/Technion_Israel_2015_combnew.mp4" type="video/mp4" width="100%">
 +
Your browser does not support the video tag.
 +
</video>
 +
</div>
 +
 
 +
 
 +
</br><h2><b>Checking Real-life Conditions</b></h2>
 +
 
 +
<p>Our final tube dimensions suit the viscosity we chose to work with. In order to test out the comb, we created a solution with the proper viscosity, composed of 80% glycerol and 20% LB. In order to check if this solution would allow our bacteria to live, we did a “shelf-life” experiment. In that experiment, we also checked the conditions in which our bacteria could exist inside the syringe and containers, respectively.  We found out that the most suitable temperature is at -18<sup>o</sup>C (same temperature in home freezer).  Check out our <a href="https://2015.igem.org/Team:Technion_Israel/Lab_Notebook/Protocols" target="_blank">protocols</a> to see how we did the experiment. </p>
 +
<p>Click <a href="https://2015.igem.org/Team:Technion_Israel/Project/Results#shelf-life_results" target="_blank">here</a> to see the full results.</p>
 +
 
 +
<h2><a id="focusgroup name="focusgroup"></a><b>Focus Group Survey</b></h2>
 +
<p>Consumer feedback and comfort of use was one of our main concerns when developing the comb and syringe.  Once the final prototype of the comb was printed, we developed a focus group survey.  The 15 respondents including balding and bald men.  Their responses to our questions are featured below.</p>
 +
</br>
 +
<div class="containers">
 +
 
 +
<div class="sp-slideshows">
 +
 
 +
  <input type="radio" id="buttons-1" name="radio-sets" class="sp-selectors-1" checked="checked" />
 +
  <label for="buttons-1" class="button-labels-1"></label>
 +
 
 +
  <input type="radio" id="buttons-2" name="radio-sets" class="sp-selectors-2" />
 +
  <label for="buttons-2" class="button-labels-2"></label>
 +
 
 +
  <input type="radio" id="buttons-3" name="radio-sets" class="sp-selectors-3" />
 +
  <label for="buttons-3" class="button-labels-3"></label>
 +
 
 +
  <input type="radio" id="buttons-4" name="radio-sets" class="sp-selectors-4" />
 +
  <label for="buttons-4" class="button-labels-4"></label>
 +
 
 +
  <input type="radio" id="buttons-5" name="radio-sets" class="sp-selectors-5" />
 +
  <label for="buttons-5" class="button-labels-5"></label>
 +
 +
 
 +
  <label for="buttons-1" class="sp-arrows sps-a1"></label>
 +
  <label for="buttons-2" class="sp-arrows sps-a2"></label>
 +
  <label for="buttons-3" class="sp-arrows sps-a3"></label>
 +
  <label for="buttons-4" class="sp-arrows sps-a4"></label>
 +
  <label for="buttons-5" class="sp-arrows sps-a5"></label>
 +
 
 +
 
 +
    <div class="sp-contents">
 +
    <div class="sp-parallax-bgs"></div>
 +
    <ul class="sp-sliders clearfix">
 +
<li>
 +
<div class="slidess"  style="background-image: url(https://static.igem.org/mediawiki/2015/1/1d/Technion_iGEM_2015_Design_Focus_survey_1.png); background-repeat: no-repeat; background-size: 100%;">
 +
</div>
 +
</li>
 +
<li>
 +
<div class="slidess"  style="background-image: url(https://static.igem.org/mediawiki/2015/f/fe/Technion_iGEM_2015_Design_Focus_survey_2.png); background-repeat: no-repeat; background-size: 100%;">
 +
</div></li>
 +
<li>
 +
<div class="slidess"  style="background-image: url(https://static.igem.org/mediawiki/2015/2/24/Technion_Israel_2015_design_survey_3.png); background-repeat: no-repeat; background-size: 100%;">
 +
</div></li>
 +
<li>
 +
<div class="slidess"  style="background-image: url(https://static.igem.org/mediawiki/2015/e/ec/Techion_Israel_2015_Design_survey_4.png); background-repeat: no-repeat; background-size: 100%;">
 +
</div></li>
 +
<li>
 +
<div class="slidess"  style="background-image: url(https://static.igem.org/mediawiki/2015/e/e1/Techion_Israel_2015_Design_survey_5.png); background-repeat: no-repeat; background-size: 100%;">
 +
</div></li>
 +
</ul>
 +
 
 +
  </div><!-- sp-contents -->
 +
   
 +
 
 +
</div> <!-- sp-slideshows -->
 +
</div>
 +
<!-------end of slider2------->
 +
</br><p>As a result of the feedback we receive through this survey, we made key changes to our comb, which can be seen in the final prototype:</br>
 +
<ul style="list-style: circle"><li>New aesthetic design</li>
 +
<li>Adjustable handle which can easily be modified to fit any hand size</li></ul></p>
 +
<h2><b>Conclusion</b></h2>
 +
<p>After much thought and effort, the final result is the design that will be presented at the Giant Jamboree.</p>
 +
<p>The comb provides clear and defined benefits compared to a topical mixture applied with the hands or gloves:</br></br>
 +
<ol><li><b>Cleanliness-</b> The comb and syringe combination allows the consumer to apply the product, whilst never having to touch the bacteria.</li></br>
 
<li><b>Reusable-</b>The reusable comb can be sterilized with ethanol between uses, while the syringe can be sterilized with ethanol as well and then discarded.  The result  
 
<li><b>Reusable-</b>The reusable comb can be sterilized with ethanol between uses, while the syringe can be sterilized with ethanol as well and then discarded.  The result  
is a relatively environmentally friendly product.</li>
+
is a relatively environmentally friendly product.</li></br>
<li><b>Uniform application-</b>The comb apparaturs, along with the syringe, offers an integrative solution to combining the components of our formula, while allowing for comfortable
+
<li><b>Uniform application-</b>The comb, along with the syringe, offers an integrative solution to combining the components of our formula, while allowing for comfortable
  and uniform application on the scalp of the consumer. This helps ensure that each hair follicle is reached, making our product as effective as possible.</li>
+
  and uniform application on the scalp of the consumer. This helps ensure that each hair follicle is reached, making our product as effective as possible.</li></br>
<li><b>Efficient-</b>The scalp is covered by a thin, oily layer of fatty deposits, as well as dead skin cells, which must be penetrated in order to reach the hair follicle.  Our comb offers a gentle way to overcome
+
<li><b>Safety- </b>Besides cleanliness, the fact that the waste stays in the syringe, makes it easier to treat. Furthermore, the use itself is safe, since the consumer doesn't come in contect with the solution and the latter doesn't influence his natural skin microbiome and the person's environment.</li>
this layer, hopefully leading to better penetration of the 3a-HSD protein into the hair follicle. Additionally, stimulation of the scalp has been found to increase blood flow
+
to the area, helping encourage hair growth and hair follicle restoration.  The comb teeth can provide this stimulation.</li>
+
  
 
</ol>
 
</ol>
 +
</p>
 +
</br>
 +
<p><b>And last, but certainly not least....a demonstration of using the comb and syringe, complete with the final prototype for the competition.  Enjoy!</b></p>
 +
<div class="video_wrapper" width="100%">
 +
<video controls poster="https://static.igem.org/mediawiki/2015/2/28/Team_Technion_Logo_White.png" width="100%">
 +
<source src="https://static.igem.org/mediawiki/2015/e/ec/Technion_Israel_2015_combdemo.mp4" type="video/mp4" width="100%">
 +
Your browser does not support the video tag.
 +
</video>
 +
</div>
 +
 +
<div class="bottom">
 +
<div class="previous">
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Project/Cofactor">Previous<small>(Cofactor)</small></a>
 +
</div>
 +
<div class="next">
 +
<a href="https://2015.igem.org/Team:Technion_Israel/Modeling">Next<small>(Modeling)</small></a>
 +
</div>
 +
</div>
 
</div>
 
</div>
 
</div>
 
</div>
Line 453: Line 821:
  
 
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
 
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
 +
<script type="text/javascript" src="https://2015.igem.org/Template:Technion/navbar/javascript?
 +
action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="https://2015.igem.org/Template:Technion/Javascript?
 
<script type="text/javascript" src="https://2015.igem.org/Template:Technion/Javascript?
 
action=raw&ctype=text/javascript"></script>
 
action=raw&ctype=text/javascript"></script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 23:58, 18 September 2015

Team: Technion 2015

The Comb

Why design?

When we came up with the idea of having two different types of bacteria work together to break down dihydrotestosterone (DHT), we were faced with a serious challenge. We suspected that consumers would be discouraged by a product requiring the application of two different types of bacteria and, in addition, we were hesitant about the safety repercussions. While our project involved using genetically engineered bacteria for two purposes, and therefore two types of bacteria, we wanted to find a way to prevent the Escherichia coli from reaching the consumer's scalp, in order to increase the chances of the Bacillus subtilis's survival, and to minimize side effects that may occur with the use of such a product.

The solution was found through consulting with multiple academics and an industrial engineer. Before the final prototype was printed, we conducted a focus group survey about the comfort and efficiency of using the comb, which helped us plan important changes for the final prototype.

The Brainstorming Process

Once we set out to search for a solution for combining the components of our project, we quickly came to consider the idea of a comb. After much consultation with academic staff, an industrial engineer, and friends, we designed a comb composed of a comb body with inner tubes/liquid pathways, a handle, and a syringe.

The Comb Prototypes

The comb was designed in "Solidworks" and was printed in a 3D printer.

  • Prototype #1

    We started from a very basic design, focusing on the initial solution for applying the formula onto the user's scalp. At first, it looks very simple- like nothing special characterizes it.

    However, within, the pathways are structured in such a way to uniformly distribute the treatment formula to the scalp. Simultaneously, the comb massages the scalp and gives the consumer full control of the spread of the product.

  • Prototype #2

    We directed our focus on improving the flow through the pathways. We moved the entranceway for the treatment formula to the middle and started considering about a comfortable way for the user to hold the comb.

  • Prototype #3

    A mechanism for even flow was used. To obtain even flow in each pathway and comb tooth, we consulted with Dr. Moran Bercovici from Technion's Microfluidic Laboratory. The result was a specially designed tube geometry. From the syringe entry at the top of the comb, each pathway splits, resulting
    in 16 parallel,
    even-flow, square
    tubes at the fluid
    exit to the scalp.

    For flow equations, we selected a viscosity, bearing in mind
    that our formula must stay on the scalp and, of course, must not reach to the user's eyes and clothes. With the help of industrial engineer Ms. Lotem Shmuel, a handle was designed and added to the comb for extra comfort in use.

  • Prototype #4

    The final prototype for the iGEM 2015 competition

    The final design has a unique, aesthetic appearance. It can be easily adjusted to fit any hand size- an additional feature we added thanks to the responses from the focus group survey we conducted(see below).

    After fulfilling the criteria for efficiency and cleanness, we turned our attention to the aesthetic demands as well as accommodating the responses we received from our focus group (see results below).

    From the first draft to the final product presented to you, the comb planning process focused on the ease of use, together with an innovative and eye-catching design which intrigues the user from first sight.


The Mathematics Behind the Comb

As explained in the slideshow above, prototype #3 took into consideration the flow geometry required for uniform distribution of liquids exiting the comb. To obtain even flow for each tube and each comb tooth, we used a specially designed tube geometry. From the syringe entry at the top of the comb, each tube splits into two tubes, periodically, resulting 16 parallel, even-flow tubes at the comb fluid exit to the scalp. We used fluid mechanics equations with different tube sizes (different widths, lengths, and shapes) until we converged to our current ideal dimensions. The equations we used are presented in Figure 1 below.

Figure 1: Flow equations for the determination of ideal tube dimensions

The Syringe

The comb, on its own, is not customized enough to fit our purposes. Therefore, we needed to consider how exactly our formula would be incorporated into the comb. At first we considered using two small containers which would be opened by the consumer and placed in the comb. However, after putting some thought into it, we realized that this strategy could be messy and inconvenient. It also left us with a product requiring two different types of genetically modified bacteria being placed on the head from separate containers. Therefore, we developed the idea of using a syringe.

The syringe below is an illustration of our syringe design.

syringe
Figure 2: 2-dimensional illustration of the syringe for inserting the engineered bacterium into the comb

Explanation:

  • The E. coli overproducing NADPH is represented by the red section. It will be present in the syringe at the time the consumer purchases it.
  • The blue section represents the B. subtilis engineered to secrete the 3α-HSD enzyme. The B. subtilis will be sucked into the syringe from a container also purchased by the consumer as part of the kit.
  • In between the sections is a filter membrane- small enough to allow the NADPH to pass through, while preventing the E. coli from reaching the user's scalp. As the piston is pressed during use, the NADPH will pass through the membrane and into the B. subtilis-containing solution. In other words, while pushing down the piston, the NADPH mixes with the enzyme, making the process more efficient.

This mixture will reach the scalp of the user, creating an engineered microbiome environment which contains enough NADPH for the 3α-HSD enzyme to work efficiently to break down the DHT in the hair follicles.

For now, we have printed the comb from white polymer resin using a 3-D printer, but an advantage to using 3-D printing is that, in the future, it will easily allow us to print the comb in various materials (which can be softer), so the touch with the scalp and hair will be much softer.

In addition to our purposes for the comb, we believe that it has many other potential applications and can be used with different substances such as a lice cream, or to be used by hair stylists to apply hair color on the hair, and more.


The movie below simulates the structure of the comb.


Checking Real-life Conditions

Our final tube dimensions suit the viscosity we chose to work with. In order to test out the comb, we created a solution with the proper viscosity, composed of 80% glycerol and 20% LB. In order to check if this solution would allow our bacteria to live, we did a “shelf-life” experiment. In that experiment, we also checked the conditions in which our bacteria could exist inside the syringe and containers, respectively. We found out that the most suitable temperature is at -18oC (same temperature in home freezer). Check out our protocols to see how we did the experiment.

Click here to see the full results.

Focus Group Survey

Consumer feedback and comfort of use was one of our main concerns when developing the comb and syringe. Once the final prototype of the comb was printed, we developed a focus group survey. The 15 respondents including balding and bald men. Their responses to our questions are featured below.



As a result of the feedback we receive through this survey, we made key changes to our comb, which can be seen in the final prototype:

  • New aesthetic design
  • Adjustable handle which can easily be modified to fit any hand size

Conclusion

After much thought and effort, the final result is the design that will be presented at the Giant Jamboree.

The comb provides clear and defined benefits compared to a topical mixture applied with the hands or gloves:

  1. Cleanliness- The comb and syringe combination allows the consumer to apply the product, whilst never having to touch the bacteria.

  2. Reusable-The reusable comb can be sterilized with ethanol between uses, while the syringe can be sterilized with ethanol as well and then discarded. The result is a relatively environmentally friendly product.

  3. Uniform application-The comb, along with the syringe, offers an integrative solution to combining the components of our formula, while allowing for comfortable and uniform application on the scalp of the consumer. This helps ensure that each hair follicle is reached, making our product as effective as possible.

  4. Safety- Besides cleanliness, the fact that the waste stays in the syringe, makes it easier to treat. Furthermore, the use itself is safe, since the consumer doesn't come in contect with the solution and the latter doesn't influence his natural skin microbiome and the person's environment.


And last, but certainly not least....a demonstration of using the comb and syringe, complete with the final prototype for the competition. Enjoy!

Contact Us