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

Line 10: Line 10:
 
 
 
.slides {height: 470px;
 
.slides {height: 470px;
−
width: 800px;
+
width: 700px;
 
padding: 20px;
 
padding: 20px;
 
margin: auto;
 
margin: auto;
Line 29: Line 29:
 
 
  
−
+
 
−
</style>
+
 
 +
 
 +
.sp-slideshow {
 +
  position: relative;
 +
  margin: 0px auto;
 +
  width: 840px;
 +
  max-width: 1000px;
 +
  min-width: 260px;
 +
  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-content {
 +
 +
  position: relative;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 
 +
.sp-parallax-bg {
 +
 +
  background-size: cover;
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  overflow: hidden;
 +
}
 +
 
 +
.sp-slideshow input {
 +
  position: absolute;
 +
  bottom: 15px;
 +
  left: 50%;
 +
  width: 9px;
 +
  height: 9px;
 +
  z-index: 1001;
 +
  cursor: pointer;
 +
  opacity: 0;
 +
}
 +
 
 +
.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-slideshow input:checked + label {
 +
  background-color: white;
 +
  background-color: navy;
 +
}
 +
 
 +
.sp-selector-1, .button-label-1 {
 +
  margin-left: -36px;
 +
}
 +
 
 +
.sp-selector-2, .button-label-2 {
 +
  margin-left: -18px;
 +
}
 +
.sp-selector-4, .button-label-4 {
 +
  margin-left: 18px;
 +
}
 +
.sp-selector-5, .button-label-5 {
 +
  margin-left: 36px;
 +
}
 +
 
 +
.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-arrow:hover {
 +
    opacity:1; }
 +
 
 +
.sp-arrow:active {
 +
    margin-top:-35px; }
 +
 +
.sp-selector-1:checked ~ .sp-arrow.sp-a2,
 +
.sp-selector-2:checked ~ .sp-arrow.sp-a3,
 +
.sp-selector-3:checked ~ .sp-arrow.sp-a4,
 +
.sp-selector-4:checked ~ .sp-arrow.sp-a5 {
 +
  right: 15px;
 +
  display: block;
 +
  background-position: top right;
 +
}
 +
.sp-selector-2:checked ~ .sp-arrow.sp-a1,
 +
.sp-selector-3:checked ~ .sp-arrow.sp-a2,
 +
.sp-selector-4:checked ~ .sp-arrow.sp-a3,
 +
.sp-selector-5:checked ~ .sp-arrow.sp-a4 {
 +
  left: 15px;
 +
  display: block;
 +
  background-position: top left;
 +
}
 +
 
 +
.sp-slideshow input:checked ~ .sp-content {
 +
  transition: background-position linear 0.6s, background-color linear 0.8s;
 +
}
 +
 
 +
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg {
 +
  transition: background-position linear 0.7s;
 +
}
 +
 
 +
input.sp-selector-1:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-2:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-3:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-4:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-5:checked ~ .sp-content {
 +
  background-position: 0 0;
 +
  background-color: white;
 +
}
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 +
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg {
 +
    background-position: 0 0;
 +
}
 +
 
 +
.sp-slider {
 +
  position: relative;
 +
  left: 0;
 +
  width: 500%;
 +
  height: 100%;
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  transition: left ease-in 0.8s;
 +
}
 +
 
 +
.sp-slider > li {
 +
  color: white;
 +
  width: 20%;
 +
  box-sizing: border-box;
 +
  height: 100%;
 +
  padding: 0 0px;
 +
  float: left;
 +
  opacity: 1;
 +
  transition: opactiy ease-in 0.4s 0.8s;
 +
}
 +
 
 +
.sp-slider > li img {
 +
  box-sizing: border-box;
 +
  display: block;
 +
  margin: 0 auto;
 +
  padding: 40px 0 50px 0;
 +
  max-height: 100%;
 +
  max-width: 100%;
 +
}
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-slider {
 +
    left: 0;
 +
}
 +
 +
input.sp-selector-2:checked ~ .sp-content .sp-slider {
 +
    left: -100%;
 +
}
 +
 +
input.sp-selector-3:checked ~ .sp-content .sp-slider {
 +
    left: -200%;
 +
}
 +
 +
input.sp-selector-4:checked ~ .sp-content .sp-slider {
 +
    left: -300%;
 +
}
 +
 +
input.sp-selector-5:checked ~ .sp-content .sp-slider {
 +
    left: -400%;
 +
}
 +
 
 +
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
 +
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
 +
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-5:checked ~ .sp-content .sp-slider > li:nth-child(5){
 +
    opacity: 1;
 +
}
 +
 
 +
.note {
 +
  padding: 5px;
 +
  text-align: center;
 +
}
 +
 
 +
 
 +
</style>
 
<title>Team: Technion 2015</title>
 
<title>Team: Technion 2015</title>
 
</head>
 
</head>
Line 104: Line 339:
 
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.
 
We were faced with another problem as well: </p>
 
We were faced with another problem as well: </p>
−
<ul class="show_me_them_pics!" nav="thumbs" style="list-style:none;margin:0px;">
+
 +
 
 +
<!-------begin slider------->
 +
 
 +
<div class="container">
 +
 
 +
<div class="sp-slideshow">
 +
 
 +
  <input type="radio" id="button-1" name="radio-set" class="sp-selector-1" checked="checked" />
 +
  <label for="button-1" class="button-label-1"></label>
 +
 
 +
  <input type="radio" id="button-2" name="radio-set" class="sp-selector-2" />
 +
  <label for="button-2" class="button-label-2"></label>
 +
 
 +
  <input type="radio" id="button-3" name="radio-set" class="sp-selector-3" />
 +
  <label for="button-3" class="button-label-3"></label>
 +
 
 +
  <input type="radio" id="button-4" name="radio-set" class="sp-selector-4" />
 +
  <label for="button-4" class="button-label-4"></label>
 +
 
 +
  <input type="radio" id="button-5" name="radio-set" class="sp-selector-5" />
 +
  <label for="button-5" class="button-label-5"></label>
 +
 
 +
  <label for="button-1" class="sp-arrow sp-a1"></label>
 +
  <label for="button-2" class="sp-arrow sp-a2"></label>
 +
  <label for="button-3" class="sp-arrow sp-a3"></label>
 +
  <label for="button-4" class="sp-arrow sp-a4"></label>
 +
  <label for="button-5" class="sp-arrow sp-a5"></label>
 +
 
 +
 
 +
    <div class="sp-content">
 +
    <div class="sp-parallax-bg"></div>
 +
    <ul class="sp-slider clearfix">
 
<li>
 
<li>
−
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/4/45/Technion_Israel_2015_Comb-1-1.png); background-size: 100%;">
+
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/4/45/Technion_Israel_2015_Comb-1-1.png); background-repeat: no-repeat; background-size: 100%;">
 
<div id="placeholder1">
 
<div id="placeholder1">
 
<div id="slide1-text-top">
 
<div id="slide1-text-top">
Line 122: Line 389:
 
</li>
 
</li>
 
<li>
 
<li>
−
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/9/9e/Technion_Israel_2015_Comb-2.png); background-size: 100%;">
+
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/9/9e/Technion_Israel_2015_Comb-2.png); background-repeat: no-repeat; background-size: 100%;">
 
<div id="placeholder1">
 
<div id="placeholder1">
 
<div id="slide2-text-top">
 
<div id="slide2-text-top">
Line 132: Line 399:
 
</li>
 
</li>
 
<li>
 
<li>
−
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/6/6b/Technion_Israel_2015_Comb-3.png); background-size: 100%;">
+
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/6/6b/Technion_Israel_2015_Comb-3.png); background-repeat: no-repeat; background-size: 100%;">
 
<div id="placeholder1">
 
<div id="placeholder1">
 
<div id="slide3-text-top">
 
<div id="slide3-text-top">
Line 148: Line 415:
 
</li>
 
</li>
 
<li>
 
<li>
−
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/2/21/Technion_Israel_2015_Comb-4.png); background-size: 100%;">
+
<div class="slides"  style="background-image: url(https://static.igem.org/mediawiki/2015/2/21/Technion_Israel_2015_Comb-4.png); background-repeat: no-repeat; background-size: 100%;">
 
<div id="placeholder1">
 
<div id="placeholder1">
 
<div id="slide4-text-top">
 
<div id="slide4-text-top">
Line 163: Line 430:
 
</div>
 
</div>
 
</li>
 
</li>
−
</ul>
+
    </ul>
−
</div>
+
  </div><!-- sp-content -->
 +
   
 +
 
 +
</div> <!-- sp-slideshow -->
 
</div>
 
</div>
 +
<!-------end of slider------->
 +
</div>
 
</div>
 
</div>
  

Revision as of 19:42, 10 September 2015

Team: Technion 2015

Home
Design

Why design?

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 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. We were faced with another problem as well:

  • 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, removing excessive fat and helping restoring the hair follicle growth.

  • 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 patient 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 model has a unique, aesthetic design. It can be easily adjusted to fit any hand size.

    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.

Contact Us